1.综合看板改为翻页形式

loulijun2021

2022-11-18 994a722829bd01de4b24f85c359b84dbf4047997

 src/views/kb/zhkb.vue

@@ -210,21 +210,21 @@
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="planenddate"
                    prop="planstartdate"
                    label="预计开始"
                    width="115"
                  >
                    <template slot-scope="{row}">
                      <div>{{ row.planenddate.substring(0, 10) }}</div>
                      <div>{{ row.planstartdate.substring(0, 10) }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="planstartdate"
                    prop="planenddate"
                    label="预计结束"
                    width="125"
                  >
                    <template slot-scope="{row}">
                      <div>{{ row.planstartdate.substring(0, 10) }}</div>
                      <div>{{ row.planenddate.substring(0, 10) }}</div>
                    </template>
                  </el-table-column>
                </el-table>
@@ -332,6 +332,7 @@

      leftTopData: [],
      tableData: [],
      tableDataTemp: [],
      tableDataRank: [],
      lineCodeArr: [],

@@ -354,6 +355,11 @@

  created() {
    setInterval(this.getNowTime, 1000)

    // 两小时看板刷新一次
    setInterval(() => {
      window.location.reload()
    }, 1000 * 60 * 120)
  },
  mounted() {
    // 监听网络是否在线
@@ -403,7 +409,6 @@
      await this.getEcharts()
      await this.getTableDataRoll()
      await this.getTableDataRankRoll()
      await this.getMarqueeTipsContent()
      await this.getMarqueeTipsContent()
    },
    // 获取公告
@@ -484,31 +489,54 @@

    // 产线加工任务
    getTableDataRoll() {
      LineSearchBottomLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
        this.tableData = res.data
        this.number2 = this.tableData.length
      let startValue = 0 // 初始值
      const scale = 10// 刻度

        const divData = this.$refs.tableData.bodyWrapper
        // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
      LineSearchBottomLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
        this.tableDataTemp = res.data
        this.number2 = res.data.length

        this.tableData = this.tableDataTemp.slice(startValue, startValue + scale)

        const loop = Math.floor(this.tableDataTemp.length / scale)// 需要循环的次数
        let nowLoop = 0// 当前循环的次数

        this.TableDataRollTask = setInterval(() => {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1
          // divData.scrollTop += divData.scrollHeight / this.tableData.length
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
            // 重置table距离顶部距离
            divData.scrollTop = 0
            LineSearchBottomLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
              this.tableData = res.data
              this.number2 = this.tableData.length
              if (this.tableData.length > 10) {
                clearInterval(this.TableDataRollTask)
                this.getTableDataRoll()
              }
            })
          startValue = startValue + scale
          this.tableData = this.tableDataTemp.slice(startValue, startValue + scale)
          if (nowLoop === loop) {
            clearInterval(this.TableDataRollTask)
            this.getTableDataRoll()
          }
        }, this.tableData.length <= 10 ? 1000 * 3 : 100)
          nowLoop++
        }, 1000 * 10)
      })

      // LineSearchBottomLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
      //   this.tableData = res.data
      //   this.number2 = this.tableData.length
      //
      //   const divData = this.$refs.tableData.bodyWrapper
      //   // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
      //   this.TableDataRollTask = setInterval(() => {
      //     // 元素自增距离顶部1像素
      //     divData.scrollTop += 1
      //     // divData.scrollTop += divData.scrollHeight / this.tableData.length
      //     // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
      //     if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
      //       // 重置table距离顶部距离
      //       divData.scrollTop = 0
      //       LineSearchBottomLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
      //         this.tableData = res.data
      //         this.number2 = this.tableData.length
      //         if (this.tableData.length > 10) {
      //           clearInterval(this.TableDataRollTask)
      //           this.getTableDataRoll()
      //         }
      //       })
      //     }
      //   }, this.tableData.length <= 10 ? 1000 * 3 : 100)
      // })
    },
    // 当日完工产品数量排行
    getTableDataRankRoll() {