1.递交

loulijun2021

2023-08-30 31ce9a56c95000f1567cda9f5821aadb5d1e4fd0

 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">
@@ -29,28 +29,28 @@
              <el-table
                ref="tableDataLeftTopRef"
                :data="tableDataLeftTop"
                class="tableData  tableDataCell"
                style="width: 100%;"
                class="tableData tableDataCell"
                style="width: 100%;overflow: hidden"
                :header-cell-style="headerCellStyle"
                :cell-style="cellStyle"
                height="927"
                height="930"
              >
                <el-table-column
                  prop="saleOrderCode"
                  label="销售单号"
                  width="130"
                  label="生产订单"
                  width="170"
                >
                  <template slot-scope="{row}">
                    <div v-if="row.saleOrderCode" style="text-align: left" class="ellipsis">{{
                        row.saleOrderCode
                      }}
                    </div>
                    <div v-else>/</div>
                    <div v-else></div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="partname"
                  width="170"
                  width="143"
                  label="产品名称"
                >
                  <template slot-scope="{row}">
@@ -61,7 +61,7 @@
                <el-table-column
                  prop="good_qty"
                  label="数量"
                  width="70"
                  width="60"
                />
              </el-table>
            </div>
@@ -123,7 +123,7 @@
              </el-table-column>
              <el-table-column
                prop="partname"
                width="150"
                width="120"
                label="产品名称"
              >
                <template slot-scope="{row}">
@@ -177,7 +177,7 @@
              <el-table-column
                prop="stepname"
                label="工序"
                width="100"
                width="130"
              >
                <template slot-scope="{row}">
                  <div
@@ -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"/>
@@ -219,8 +219,8 @@
              >
                <el-table-column
                  prop="saleOrderCode"
                  label="销售单号"
                  width="130"
                  label="生产订单"
                  width="170"
                >
                  <template slot-scope="{row}">
                    <div v-if="row.saleOrderCode" style="text-align: left" class="ellipsis">{{
@@ -232,7 +232,7 @@
                </el-table-column>
                <el-table-column
                  prop="partname"
                  width="170"
                  width="140"
                  label="产品名称"
                >
                  <template slot-scope="{row}">
@@ -243,7 +243,7 @@
                <el-table-column
                  prop="good_qty"
                  label="数量"
                  width="70"
                  width="60"
                />
              </el-table>
            </div>
@@ -295,7 +295,7 @@
    // 中间表格数据内容
    this.getCenterTableDataSetInterval()

    this.setStarsRef()
    // this.setStarsRef()
  },
  methods: {
    setStarsRef() {
@@ -318,25 +318,27 @@

      WkshpContentData().then(res => {
        this.tableDataCenterTopTemp = res.data
        this.tableDataCenterTop = this.tableDataCenterTopTemp.slice(startValue, startValue + scale)
        // this.tableDataCenterTop = this.tableDataCenterTopTemp.slice(startValue, startValue + scale)
        this.tableDataCenterTop = this.tableDataCenterTopTemp

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

        const timer = setInterval(() => {
          startValue = startValue + scale
          this.tableDataCenterTop = this.tableDataCenterTopTemp.slice(startValue, startValue + scale)
          if (nowLoop === loop) {
            clearInterval(timer)
            this.getCenterTableDataSetInterval()
          }
          nowLoop++
          this.$nextTick(() => {
            this.tableDataCenterTop.forEach(i => {
              loadEcharts('progress' + i.RowNum, progress(i.good_qty, i.plan_qty))
            })
          })
        }, 1000 * 10)
        // const loop = Math.floor(this.tableDataCenterTopTemp.length / scale)// 需要循环的次数
        // let nowLoop = 0// 当前循环的次数
        //
        // const timer = setInterval(() => {
        //   startValue = startValue + scale
        //   this.tableDataCenterTop = this.tableDataCenterTopTemp.slice(startValue, startValue + scale)
        //   nowLoop++
        //   if (nowLoop === loop) {
        //     clearInterval(timer)
        //     this.getCenterTableDataSetInterval()
        //   }
        //
        //   this.$nextTick(() => {
        //     this.tableDataCenterTop.forEach(i => {
        //       loadEcharts('progress' + i.RowNum, progress(i.good_qty, i.plan_qty))
        //     })
        //   })
        // }, 1000 * 10)

        this.$nextTick(() => {
          this.tableDataCenterTop.forEach(i => {
@@ -344,53 +346,125 @@
          })
        })
      })

      // 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 = 10// 刻度
      // 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) {
            clearInterval(timer)
            this.getLeftTopTableDataSetInterval()
          // 元素自增距离顶部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 = 10// 刻度
      // 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) {
            clearInterval(timer)
            this.getRightTopTableDataSetInterval()
          // 元素自增距离顶部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 +560,23 @@
  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 +611,6 @@
  backface-visibility: hidden;
  z-index: 102;
}


</style>