1.看板调整2.上云路由整合

loulijun2021

2023-05-06 6c2e00278c1194b46eb9153ca4166af868bb15ef

 src/views/kb/cjsc.vue

@@ -3,9 +3,9 @@
    <div class="kb_dashboard">

      <!--    星空背景-->
      <div ref="starsRef" class="stars">
        <div v-for="(item, index) in starsCount" :key="index" class="star"/>
      </div>
<!--      <div ref="starsRef" class="stars">-->
<!--        <div v-for="(item, index) in starsCount" :key="index" class="star"/>-->
<!--      </div>-->

      <div class="kb_header">
        <div class="flex_c_c kb_header_text">
@@ -30,10 +30,10 @@
                ref="tableDataLeftTopRef"
                :data="tableDataLeftTop"
                class="tableData  tableDataCell"
                style="width: 100%;"
                style="width: 100%;overflow: hidden"
                :header-cell-style="headerCellStyle"
                :cell-style="cellStyle"
                height="927"
                height="930"
              >
                <el-table-column
                  prop="saleOrderCode"
@@ -45,12 +45,12 @@
                        row.saleOrderCode
                      }}
                    </div>
                    <div v-else>/</div>
                    <div v-else></div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="partname"
                  width="140"
                  width="143"
                  label="产品名称"
                >
                  <template slot-scope="{row}">
@@ -190,7 +190,7 @@
              <el-table-column
                prop="scjdxxx"
                label="生产进度"
                width="130"
                width="134"
              >
                <template slot-scope="{row}">
                  <div :id="'progress'+row.RowNum" style="width: 100%;height:30px"/>
@@ -295,7 +295,7 @@
    // 中间表格数据内容
    this.getCenterTableDataSetInterval()

    this.setStarsRef()
    // this.setStarsRef()
  },
  methods: {
    setStarsRef() {
@@ -344,53 +344,135 @@
          })
        })
      })


      // WkshpContentData().then(res => {
      //   this.tableDataCenterTop = res.data
      //   const divData = this.$refs.tableDataLeftCenterRef.bodyWrapper
      //   // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
      //   const timer = setInterval(() => {
      //     // 元素自增距离顶部1像素
      //     divData.scrollTop += 1
      //     // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
      //     if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
      //       // 重置table距离顶部距离
      //       divData.scrollTop = 0
      //       WkshpContentData().then(res => {
      //         this.tableDataCenterTop = res.data
      //         if (this.tableDataCenterTop.length > 20) {
      //           clearInterval(timer)
      //           this.getCenterTableDataSetInterval()
      //         }
      //       })
      //     }
      //       this.$nextTick(() => {
      //         this.tableDataCenterTop.forEach(i => {
      //           loadEcharts('progress' + i.RowNum, progress(i.good_qty, i.plan_qty))
      //         })
      //       })
      //   }, this.tableDataCenterTop.length <= 20 ? 1000 * 15 : 10)
      // })










    },

    // 获取左上数据并定时刷新
    getLeftTopTableDataSetInterval() {
      let startValue = 0 // 初始值
      const scale = 24// 刻度
      // let startValue = 0 // 初始值
      // const scale = 24// 刻度
      //
      // WkshpLineData({ LineCode: '001' }).then(res => {
      //   this.tableDataLeftTopTemp = res.data
      //   this.tableDataLeftTop = this.tableDataLeftTopTemp.slice(startValue, startValue + scale)
      //
      //   const loop = Math.floor(this.tableDataLeftTopTemp.length / scale)// 需要循环的次数
      //   let nowLoop = 0// 当前循环的次数
      //
      //   const timer = setInterval(() => {
      //     startValue = startValue + scale
      //     this.tableDataLeftTop = this.tableDataLeftTopTemp.slice(startValue, startValue + scale)
      //     if (nowLoop === loop) {
      //       clearInterval(timer)
      //       this.getLeftTopTableDataSetInterval()
      //     }
      //     nowLoop++
      //   }, 1000 * 10)
      // })

      WkshpLineData({ LineCode: '001' }).then(res => {
        this.tableDataLeftTopTemp = res.data
        this.tableDataLeftTop = this.tableDataLeftTopTemp.slice(startValue, startValue + scale)

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

        this.tableDataLeftTop = res.data
        const divData = this.$refs.tableDataLeftTopRef.bodyWrapper
        // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
        const timer = setInterval(() => {
          startValue = startValue + scale
          this.tableDataLeftTop = this.tableDataLeftTopTemp.slice(startValue, startValue + scale)
          if (nowLoop === loop) {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
            // 重置table距离顶部距离
            divData.scrollTop = 0
            WkshpLineData({ LineCode: '001' }).then(res => {
              this.tableDataLeftTop = res.data
              if (this.tableDataLeftTop.length > 24) {
            clearInterval(timer)
            this.getLeftTopTableDataSetInterval()
          }
          nowLoop++
        }, 1000 * 10)
            })
          }
        }, this.tableDataLeftTop.length <= 24 ? 1000 * 10 : 100)
      })
    },

    // 获取右上数据并定时刷新
    getRightTopTableDataSetInterval() {
      let startValue = 0 // 初始值
      const scale = 24// 刻度
      // let startValue = 0 // 初始值
      // const scale = 24// 刻度
      //
      // WkshpLineData({ LineCode: '002' }).then(res => {
      //   this.tableDataRightTopTemp = res.data
      //   this.tableDataRightTop = this.tableDataRightTopTemp.slice(startValue, startValue + scale)
      //
      //   const loop = Math.floor(this.tableDataRightTopTemp.length / scale)// 需要循环的次数
      //   let nowLoop = 0// 当前循环的次数
      //
      //   const timer = setInterval(() => {
      //     startValue = startValue + scale
      //     this.tableDataRightTop = this.tableDataRightTopTemp.slice(startValue, startValue + scale)
      //     if (nowLoop === loop) {
      //       clearInterval(timer)
      //       this.getRightTopTableDataSetInterval()
      //     }
      //     nowLoop++
      //   }, 1000 * 10)
      // })

      WkshpLineData({ LineCode: '002' }).then(res => {
        this.tableDataRightTopTemp = res.data
        this.tableDataRightTop = this.tableDataRightTopTemp.slice(startValue, startValue + scale)

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

        this.tableDataRightTop = res.data
        const divData = this.$refs.tableDataRightTopRef.bodyWrapper
        // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
        const timer = setInterval(() => {
          startValue = startValue + scale
          this.tableDataRightTop = this.tableDataRightTopTemp.slice(startValue, startValue + scale)
          if (nowLoop === loop) {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
            // 重置table距离顶部距离
            divData.scrollTop = 0
            WkshpLineData({ LineCode: '002' }).then(res => {
              this.tableDataRightTop = res.data
              if (this.tableDataRightTop.length > 24) {
            clearInterval(timer)
            this.getRightTopTableDataSetInterval()
          }
          nowLoop++
        }, 1000 * 10)
            })
          }
        }, this.tableDataRightTop.length <= 24 ? 1000 * 10 : 100)
      })
    },

@@ -486,6 +568,22 @@
  color: $main_color;
}

::v-deep .el-table__body-wrapper{
  overflow: hidden !important;
}

::v-deep .el-table th.gutter{
  display: none;
  width:0
}
//::v-deep .el-table colgroup col[name='gutter']{
//  display: none;
//  width: 0;
//}
//::v-deep .el-table__body{
//  width: 100% !important;
//}

</style>
<!--星空-->
<style lang="css" scoped>
@@ -520,4 +618,6 @@
  backface-visibility: hidden;
  z-index: 102;
}


</style>