loulijun2021
2023-05-23 00a4538b06beaf8b21dfdc6c4cec25e61ebc0ee5
src/views/kb/ckgl.vue
@@ -2,22 +2,17 @@
  <div>
    <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">
          <div id="topBarLeft" style="width:600px;height:100%" />
          仓库管理数字化看板
          仓库管理看板
          <div id="topBarRight" style="width:600px;height:100%;transform:rotate(180deg);" />
        </div>
        <div class="kb_headTime" style="left: 85px">
          <span>浙江新凯迪数字科技股份有限公司</span>
        </div>
        <div class="kb_headTime">
          <span>{{ headTime }}</span>
        </div>
@@ -42,7 +37,7 @@
                <el-table-column
                  prop="voucherdate"
                  label="单据日期"
                  width="131"
                  width="151"
                >
                  <template slot-scope="{row}">
                    <div v-if="row.voucherdate" class="ellipsis">{{ row.voucherdate.substring(0, 10) }}</div>
@@ -52,7 +47,7 @@
                <el-table-column
                  prop="wo"
                  label="单据编号"
                  width="189"
                  width="209"
                >
                  <template slot-scope="{row}">
                    <div class="ellipsis">{{ row.wo }}</div>
@@ -61,26 +56,26 @@
                <el-table-column
                  prop="wkshp_name"
                  label="生产车间"
                  width="105"
                  width="125"
                >
                  <template slot-scope="{row}">
                    <div class="ellipsis">{{ row.wkshp_name }}</div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="saleOrderCode"
                  label="销售订单号"
                  width="200"
                >
                  <template slot-scope="{row}">
                    <div v-if="row.saleOrderCode" class="ellipsis">{{ row.saleOrderCode }}</div>
                    <div v-else>/</div>
                  </template>
                </el-table-column>
<!--                <el-table-column-->
<!--                  prop="saleOrderCode"-->
<!--                  label="销售订单号"-->
<!--                  width="200"-->
<!--                >-->
<!--                  <template slot-scope="{row}">-->
<!--                    <div v-if="row.saleOrderCode" class="ellipsis">{{ row.saleOrderCode }}</div>-->
<!--                    <div v-else>/</div>-->
<!--                  </template>-->
<!--                </el-table-column>-->
                <el-table-column
                  prop="materiel_code"
                  label="产品编号"
                  width="136"
                  width="156"
                >
                  <template slot-scope="{row}">
                    <div class="ellipsis">{{ row.materiel_code }}</div>
@@ -89,7 +84,7 @@
                <el-table-column
                  prop="materiel_name"
                  label="产品名称"
                  width="180"
                  width="220"
                >
                  <template slot-scope="{row}">
                    <div class="ellipsis">{{ row.materiel_name }}</div>
@@ -108,7 +103,7 @@
                <el-table-column
                  prop="stck_name"
                  label="预入仓库"
                  width="100"
                  width="120"
                >
                  <template slot-scope="{row}">
                    <div v-if="row.stck_name" class="ellipsis">{{ row.stck_name }}</div>
@@ -118,12 +113,12 @@
                <el-table-column
                  prop="quantity"
                  label="数量"
                  width="63"
                  width="83"
                />
                <el-table-column
                  prop="totalStockInQuantity"
                  label="已入库数量"
                  width="100"
                  width="120"
                >
                  <template slot-scope="{row}">
                    <div v-if="row.totalStockInQuantity">{{ row.totalStockInQuantity }}</div>
@@ -148,7 +143,7 @@
                <el-table-column
                  prop="preFinishDate"
                  label="预计入库"
                  width="140"
                  width="160"
                >
                  <template slot-scope="{row}">
                    <div v-if="row.preFinishDate">{{ row.preFinishDate.substring(0, 10) }}</div>
@@ -343,7 +338,6 @@
  data() {
    return {
      onLine: navigator.onLine, // 监听网络是否在线
      headTime: '',
      tableDataTop: [],
@@ -369,14 +363,9 @@
    // 两小时看板刷新一次
    setInterval(() => {
      window.location.reload()
    }, 1000 * 60 * 60 * 10)
    }, 1000 * 60 * 120)
  },
  mounted() {
    // 监听网络是否在线
    window.addEventListener('online', this.updateOnlineStatus)
    window.addEventListener('offline', this.updateOnlineStatus)
    this.updateOnlineStatus({ type: this.onLine ? 'online' : 'offline', isFirst: true })
    this.getTopBar()
    this.getWareHouseTopLeftData()
@@ -384,33 +373,8 @@
    this.getEcharts()
    this.setStarsRef()
  },
  beforeDestroy() {
    window.removeEventListener('online', this.updateOnlineStatus)
    window.removeEventListener('offline', this.updateOnlineStatus)
  },
  methods: {
    // 更新网络状态
    updateOnlineStatus(e) {
      if (e.isFirst) {
        // console.log('x')
      } else {
        const loading = this.$loading({
          lock: true,
          text: '断网了,正在拼命联网中,请检查网络是否正常...',
          spinner: 'el-icon-loading',
          customClass: 'osloading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        const { type } = e
        this.onLine = type === 'online'
        if (this.onLine) {
          loading.close()
          this.$message.success('网络连接成功!')
        } else {
          this.$message.error('网络掉线,请关注网络状态!')
        }
      }
    },
    setStarsRef() {
      const starNodes = Array.from(this.$refs.starsRef.children)
      starNodes.forEach(item => {
@@ -447,13 +411,13 @@
            WareHouseTopLeftData().then(res => {
              this.tableDataTop = res.data
              // this.number1 = this.tableDataTop.length
              if (this.tableDataTop.length > 9) {
              if (this.tableDataTop.length > 10) {
                clearInterval(this.tableTopTask)
                this.getWareHouseTopLeftData()
              }
            })
          }
        }, this.tableDataTop.length <= 9 ? 1000 * 3 : 100)
        }, this.tableDataTop.length <= 10 ? 1000 * 15 : 100)
      })
    },
    // 获取左下table数据
@@ -481,7 +445,7 @@
              }
            })
          }
        }, this.tableDataBottom.length <= 10 ? 1000 * 3 : 100)
        }, this.tableDataBottom.length <= 10 ? 1000 * 15 : 100)
      })
    },