1.大岛2.0看板重构

小小儁爺

2025-02-18 9a4c8548e3bb761cec5fc508650b727a345f9009

 src/views/kanbanManager/cgdd.vue

@@ -1,517 +1,444 @@
<!--<template>-->

<!--  <div>-->

<!--    <div class="kb_dashboard">-->

<template>
  <div>
    <div class="kb_dashboard">


<!--      &lt;!&ndash;    星空背景&ndash;&gt;-->

<!--      <div ref="starsRef" class="stars">-->

<!--        <div v-for="(item, index) in starsCount" :key="index" class="star" />-->

<!--      </div>-->

      <div class="kb_backgroundCustom" />
      <div class="kb_header">
        <div class="kb_headTime" style="top: 35px;left:  20px">
          <span>浙江大岛电器有限公司</span>
        </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 kb_header_text" style="top: 35px;left:  800px">
          <span>采购跟踪数字化看板</span>
        </div>


<!--        <div class="kb_headTime" style="left: 85px">-->

<!--          <span>浙江新凯迪数字科技股份有限公司</span>-->

<!--        </div>-->

        <div class="kb_headTime" style="top: 35px;right:  25px">
          <span>{{ headTime }}</span>
        </div>
      </div>


<!--        <div class="kb_headTime">-->

<!--          <span>{{ headTime }}</span>-->

<!--        </div>-->

<!--      </div>-->

<!--      <div style="display: flex;justify-content: space-between;padding:0 20px 20px 20px;height: 980px">-->

<!--        <div style="width: 1250px;" class="flex_c_b">-->

<!--          <div style="height: 380px;">-->

<!--            <div>-->

<!--              <div class="smallTitle">-->

<!--                <svg-icon icon-class="cggz" class="svg_class" />-->

<!--                采购跟踪-->

<!--              </div>-->

<!--              <div class="lineContent horn" style="height: 345px">-->

<!--                <div id="cgddchart" class="flex_c_c" style="width: 100%;height:100%" />-->

<!--              </div>-->

<!--            </div>-->

<!--          </div>-->

<!--          <div style="height: 560px; ">-->

<!--            <div>-->

<!--              <div class="smallTitle">-->

<!--                <svg-icon icon-class="cggz" class="svg_class" />-->

<!--                采购到货跟踪-->

<!--              </div>-->

<!--              <div class="lineContent horn" style="height: 525px">-->

<!--                <el-table-->

<!--                  ref="tableData"-->

<!--                  :data="tableData"-->

<!--                  class="tableData"-->

<!--                  style="width: 100%;"-->

<!--                  :header-cell-style="headerCellStyleCenter"-->

<!--                  :cell-style="cellStyleCenter"-->

<!--                  height="515"-->

<!--                >-->

<!--                  <el-table-column-->

<!--                    prop="PurchaseOrder"-->

<!--                    label="采购订单"-->

<!--                    width="225"-->

<!--                  >-->

<!--                    <template slot-scope="{row}">-->

<!--                      <div class="ellipsis">{{ row.PurchaseOrder }}</div>-->

<!--                    </template>-->

<!--                  </el-table-column>-->

<!--                  <el-table-column-->

<!--                    prop="suppername"-->

<!--                    label="供应商"-->

<!--                    width="183"-->

<!--                  >-->

<!--                    <template slot-scope="{row}">-->

<!--                      <div v-if="row.suppername" class="ellipsis">{{ row.suppername }}</div>-->

<!--                      <div v-else />-->

<!--                    </template>-->

<!--                  </el-table-column>-->

<!--                  &lt;!&ndash;                  <el-table-column&ndash;&gt;-->

<!--                  &lt;!&ndash;                    prop="username"&ndash;&gt;-->

<!--                  &lt;!&ndash;                    label="采购员"&ndash;&gt;-->

<!--                  &lt;!&ndash;                    width="78"&ndash;&gt;-->

<!--                  &lt;!&ndash;                  >&ndash;&gt;-->

<!--                  &lt;!&ndash;                    <template slot-scope="{row}">&ndash;&gt;-->

<!--                  &lt;!&ndash;                      <div v-if="row.username">{{ row.username }}</div>&ndash;&gt;-->

<!--                  &lt;!&ndash;                      <div v-else>/</div>&ndash;&gt;-->

<!--                  &lt;!&ndash;                    </template>&ndash;&gt;-->

<!--                  &lt;!&ndash;                  </el-table-column>&ndash;&gt;-->

      <div style="display: flex;justify-content: space-between;padding:0 20px 20px 20px;height: 950px">


<!--                  &lt;!&ndash;                  <el-table-column&ndash;&gt;-->

<!--                  &lt;!&ndash;                    prop="partcode"&ndash;&gt;-->

<!--                  &lt;!&ndash;                    label="产品编码"&ndash;&gt;-->

<!--                  &lt;!&ndash;                    width="108"&ndash;&gt;-->

<!--                  &lt;!&ndash;                  />&ndash;&gt;-->

<!--                  <el-table-column-->

<!--                    prop="partname"-->

<!--                    label="产品名称"-->

<!--                    width="215"-->

<!--                  >-->

<!--                    <template slot-scope="{row}">-->

<!--                      <div v-if="row.partname" class="ellipsis">{{ row.partname }}</div>-->

<!--                      <div v-else />-->

<!--                    </template>-->

<!--                  </el-table-column>-->

<!--                  &lt;!&ndash;                  <el-table-column&ndash;&gt;-->

<!--                  &lt;!&ndash;                    prop="partspec"&ndash;&gt;-->

<!--                  &lt;!&ndash;                    label="规格型号"&ndash;&gt;-->

<!--                  &lt;!&ndash;                    width="130"&ndash;&gt;-->

<!--                  &lt;!&ndash;                  >&ndash;&gt;-->

<!--                  &lt;!&ndash;                    <template slot-scope="{row}">&ndash;&gt;-->

<!--                  &lt;!&ndash;                      <div v-if="row.partspec" class="ellipsis">{{ row.partspec }}</div>&ndash;&gt;-->

<!--                  &lt;!&ndash;                      <div v-else>/</div>&ndash;&gt;-->

<!--                  &lt;!&ndash;                    </template>&ndash;&gt;-->

<!--                  &lt;!&ndash;                  </el-table-column>&ndash;&gt;-->

<!--                  <el-table-column-->

<!--                    prop="quantity"-->

<!--                    label="订单数量"-->

<!--                    width="114"-->

<!--                  >-->

<!--                    <template slot-scope="{row}">-->

<!--                      <div v-if="row.quantity">{{ parseFloat(row.quantity) }}</div>-->

<!--                      <div v-else>0</div>-->

<!--                    </template>-->

<!--                  </el-table-column>-->

<!--                  &lt;!&ndash;                  <el-table-column&ndash;&gt;-->

<!--                  &lt;!&ndash;                    prop="checktype"&ndash;&gt;-->

<!--                  &lt;!&ndash;                    label="检验状态"&ndash;&gt;-->

<!--                  &lt;!&ndash;                    width="104"&ndash;&gt;-->

<!--                  &lt;!&ndash;                  >&ndash;&gt;-->

<!--                  &lt;!&ndash;                    <template slot-scope="{row}">&ndash;&gt;-->

<!--                  &lt;!&ndash;                      <div v-if="row.checktype===null">未检验</div>&ndash;&gt;-->

<!--                  &lt;!&ndash;                      <div v-else>已检验</div>&ndash;&gt;-->

<!--                  &lt;!&ndash;                    </template>&ndash;&gt;-->

<!--                  &lt;!&ndash;                  </el-table-column>&ndash;&gt;-->

<!--                  &lt;!&ndash;                  <el-table-column&ndash;&gt;-->

<!--                  &lt;!&ndash;                    prop="checkuser"&ndash;&gt;-->

<!--                  &lt;!&ndash;                    label="检验人员"&ndash;&gt;-->

<!--                  &lt;!&ndash;                    width="94"&ndash;&gt;-->

<!--                  &lt;!&ndash;                  >&ndash;&gt;-->

<!--                  &lt;!&ndash;                    <template slot-scope="{row}">&ndash;&gt;-->

<!--                  &lt;!&ndash;                      <div v-if="row.checkuser===null">/</div>&ndash;&gt;-->

<!--                  &lt;!&ndash;                      <div v-else>{{ row.checkuser }}</div>&ndash;&gt;-->

<!--                  &lt;!&ndash;                    </template>&ndash;&gt;-->

<!--                  &lt;!&ndash;                  </el-table-column>&ndash;&gt;-->

<!--                  <el-table-column-->

<!--                    prop="quantity1"-->

<!--                    label="已收数量"-->

<!--                    width="114"-->

<!--                  >-->

<!--                    <template slot-scope="{row}">-->

<!--                      <div v-if="row.quantity1">{{ parseFloat(row.quantity1) }}</div>-->

<!--                      <div v-else>0</div>-->

<!--                    </template>-->

<!--                  </el-table-column>-->

<!--                  <el-table-column-->

<!--                    label="未收数量"-->

<!--                    width="114"-->

<!--                  >-->

<!--                    <template slot-scope="{row}">-->

<!--                      <div v-if="row.quantity- row.quantity1">{{ parseFloat(row.quantity - row.quantity1) }}</div>-->

<!--                      <div v-else>0</div>-->

<!--                    </template>-->

<!--                  </el-table-column>-->

<!--                  <el-table-column-->

<!--                    prop="acceptDate"-->

<!--                    label="预计交期"-->

<!--                    width="135"-->

<!--                  >-->

<!--                    <template slot-scope="{row}">-->

<!--                      <div v-if="row.acceptDate">{{ row.acceptDate.substring(0, 10) }}</div>-->

<!--                      <div v-else>/</div>-->

<!--                    </template>-->

<!--                  </el-table-column>-->

<!--                  <el-table-column-->

<!--                    prop="warning"-->

<!--                    label="延期天数"-->

<!--                    width="144"-->

<!--                  >-->

<!--                    <template slot-scope="{row}">-->

<!--                      <div v-if="parseFloat(row.warning)<0" style="color: red">{{-->

<!--                        Math.abs(parseFloat(row.warning))-->

<!--                      }}-->

<!--                      </div>-->

<!--                      <div v-else-if="row.warning===null||row.warning===''||row.warning>=0">0</div>-->

<!--                      &lt;!&ndash;                      <div v-else-if="parseFloat(row.warning)>3">{{ row.warning }}</div>&ndash;&gt;-->

<!--                      &lt;!&ndash;                      <div v-else-if="parseFloat(row.warning)>0&&parseFloat(row.warning)<=3" style="color:yellow;">&ndash;&gt;-->

<!--                      &lt;!&ndash;                        {{ row.warning }}&ndash;&gt;-->

<!--                      &lt;!&ndash;                      </div>&ndash;&gt;-->

<!--                    </template>-->

<!--                  </el-table-column>-->

<!--                </el-table>-->

<!--                &lt;!&ndash;                <div id="cgddchart" class="flex_c_c" style="width: 100%;height:100%" />&ndash;&gt;-->

<!--              </div>-->

<!--            </div>-->

<!--          </div>-->

<!--        </div>-->

<!--        <div style="width: 600px;">-->

<!--          <div>-->

<!--            <div class="smallTitle">-->

<!--              <svg-icon icon-class="yqjh" class="svg_class" />-->

<!--              供应商延期交货排行-->

<!--            </div>-->

<!--            <div class="lineContent horn" style="height: 925px">-->

<!--              <el-table-->

<!--                ref="tableDataRank"-->

<!--                :data="tableDataRank"-->

<!--                class="tableData"-->

<!--                style="width: 100%;"-->

<!--                :header-cell-style="headerCellStyleCenter"-->

<!--                :cell-style="cellStyleCenter"-->

<!--                :row-class-name="tableRowClassName"-->

<!--                height="920"-->

<!--              >-->

<!--                <el-table-column-->

<!--                  type="index"-->

<!--                  label="序号"-->

<!--                  width="80"-->

<!--                >-->

<!--                  <template slot-scope="{row}">-->

<!--                    <div>NO.{{ row.index }}</div>-->

<!--                    &lt;!&ndash;                      <div>NO.100</div>&ndash;&gt;-->

<!--                  </template>-->

<!--                </el-table-column>-->

<!--                &lt;!&ndash;                  <el-table-column&ndash;&gt;-->

<!--                &lt;!&ndash;                    prop="cj"&ndash;&gt;-->

<!--                &lt;!&ndash;                    label="车间"&ndash;&gt;-->

<!--                &lt;!&ndash;                    width="100"&ndash;&gt;-->

<!--                &lt;!&ndash;                  />&ndash;&gt;-->

<!--                <el-table-column-->

<!--                  prop="suppercode"-->

<!--                  label="供应商编码"-->

<!--                  width="140"-->

<!--                >-->

<!--                  <template slot-scope="{row}">-->

<!--                    <div v-if="row.suppercode" class="ellipsis">{{ row.suppercode }}</div>-->

<!--                    <div v-else />-->

<!--                  </template>-->

<!--                </el-table-column>-->

<!--                <el-table-column-->

<!--                  prop="suppername"-->

<!--                  width="293"-->

<!--                  label="供应商名称"-->

<!--                >-->

<!--                  <template slot-scope="{row}">-->

<!--                    <div class="ellipsis">{{ row.suppername }}</div>-->

<!--                  </template>-->

<!--                </el-table-column>-->

<!--                <el-table-column-->

<!--                  prop="cont"-->

<!--                  label="次数"-->

<!--                  width="81"-->

<!--                />-->

<!--              </el-table>-->

<!--            </div>-->

<!--          </div>-->

<!--        </div>-->

<!--      </div>-->

        <div style="width: 1250px;z-index: 2;margin-top: 50px;" class="flex_c_b">
          <div style="height: 380px;">
            <div class="smallTitle">
              <svg-icon icon-class="cggz" class="svg_class" />
              采购跟踪
            </div>
            <div style="height: 345px">
              <dv-border-box-12>
                <div id="cgddchart" class="flex_c_c" style="width: 100%;height:100%" />
              </dv-border-box-12>
            </div>
          </div>
          <div style="height: 535px;margin-top:10px">
            <div>
              <div class="smallTitle">
                <svg-icon icon-class="cggz" class="svg_class" />
                采购到货跟踪
              </div>
              <div style="height: 500px">
                <dv-border-box-12>
                  <dv-scroll-board
                    ref="scrollBoard"
                    :config="configTable"
                    style="width: 1226px;height: 96%;margin:0 auto;padding-top: 13px;"
                  />
                </dv-border-box-12>
              </div>
            </div>
          </div>
        </div>
        <div style="width: 600px;z-index: 2;margin-top: 50px;">
          <div>
            <div class="smallTitle">
              <svg-icon icon-class="yqjh" class="svg_class" />
              供应商延期交货排行
            </div>
            <div style="height: 890px">
              <dv-border-box-12>
                <dv-scroll-board
                  ref="scrollBoardRight"
                  :config="configTableRight"
                  style="width: 580px;height: 96%;margin:0 auto;padding-top: 13px;"
                />
              </dv-border-box-12>
            </div>
          </div>
        </div>
      </div>


<!--    </div>-->

<!--  </div>-->

<!--</template>-->

    </div>
  </div>
</template>


<!--<script>-->

<!--import './kbCommon.css'-->

<!--import { cgddchart, kbTop, loadEcharts } from '@/utils/myEcharts'-->

<!--import { PurchaseLeftBottom, PurchaseLeftTop, PurchaseRight } from '@/api/kanbanManager'-->

<script>
import './kbCommon.css'
import { cgddchart, loadEcharts } from '@/utils/myEcharts'
import {
  PurchaseLeftTop, PurchaseLeftBottom, PurchaseRight
} from '@/api/kanbanManager'


<!--export default {-->

<!--  name: 'Index2',-->

<!--  data() {-->

<!--    return {-->

<!--      onLine: navigator.onLine, // 监听网络是否在线-->

export default {
  name: 'Index2',


<!--      headTime: '',-->

<!--      purchaseLeftTopData: {},-->

  data() {
    return {
      onLine: navigator.onLine, // 监听网络是否在线


<!--      tableData: [],-->

<!--      tableDataRank: [],-->

      headTime: '',
      purchaseLeftTopData: {},


<!--      PurchaseRight: null,-->

<!--      PurchaseLeftBottom: null,-->

      configTable: {
        headerBGC: 'rgba(38, 68 ,139, 0.2)', // 表头背景色
        oddRowBGC: 'transparent', // 奇数行背景色
        evenRowBGC: 'transparent', // 偶数行背景色
        headerHeight: 45,
        waitTime: 3000,
        rowNum: 8,


<!--      starsCount: 800, // 星星数量-->

<!--      distance: 900 // 间距-->

        header: [
          '<span style="color:#09d8f2;">采购订购</span>',
          '<span style="color:#09d8f2;">供应商</span>',
          '<span style="color:#09d8f2;">产品名称</span>',
          '<span style="color:#09d8f2;">订单数量</span>',
          '<span style="color:#09d8f2;">已收数量</span>',
          '<span style="color:#09d8f2;">未收数量</span>',
          '<span style="color:#09d8f2;">预计交期</span>',
          '<span style="color:#09d8f2;">延期天数</span>'
        ],
        data: [
          // ['<span style="color:#37a2da;">行1列1</span>', '行1列2', '行1列3'],
          // [1, 2, 3, 4, 5, 6, 8, 9],
          // [1, 2, 3, 4, 5, 6, 8, 9],
          // [1, 2, 3, 4, 5, 6, 8, 9],
          // [1, 2, 3, 4, 5, 6, 8, 9],
          // [1, 2, 3, 4, 5, 6, 8, 9],
          // [1, 2, 3, 4, 5, 6, 8, 9],
          // [1, 2, 3, 4, 5, 6, 8, 9],
          // [1, 2, 3, 4, 5, 6, 8, 9],
          // [1, 2, 3, 4, 5, 6, 8, 9],
          // [1, 2, 3, 4, 5, 6, 8, 9],
          // [1, 2, 3, 4, 5, 6, 8, 9],
          // [1, 2, 3, 4, 5, 6, 8, 9]


<!--    }-->

<!--  },-->

        ],
        index: true,
        columnWidth: [50, 180, 300, 150, 150, 120, 120, 120, 120],
        align: ['center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center']
        // carousel: 'page'
      },


<!--  activated() {
  window.addEventListener('resize', this.getHeight)
  this.getHeight()
},
created() {-->

<!--    setInterval(this.getNowTime, 1000)-->

      configTableRight: {
        headerBGC: 'rgba(38, 68 ,139, 0.2)', // 表头背景色
        oddRowBGC: 'transparent', // 奇数行背景色
        evenRowBGC: 'transparent', // 偶数行背景色
        headerHeight: 45,
        waitTime: 3000,
        rowNum: 16,


<!--    // 两小时看板刷新一次-->

<!--    setInterval(() => {-->

<!--      window.location.reload()-->

<!--    }, 1000 * 60 * 60 * 10)-->

<!--  },-->

<!--  mounted() {-->

<!--    // 监听网络是否在线-->

<!--    window.addEventListener('online', this.updateOnlineStatus)-->

<!--    window.addEventListener('offline', this.updateOnlineStatus)-->

<!--    this.updateOnlineStatus({ type: this.onLine ? 'online' : 'offline', isFirst: true })-->

        header: [
          '<span style="color:#09d8f2;">供应商编码</span>',
          '<span style="color:#09d8f2;">供应商名称</span>',
          '<span style="color:#09d8f2;">次数</span>'
        ],
        data: [
          // ['<span style="color:#37a2da;">行1列1</span>', '行1列2', '行1列3'],
          // [1, 2, 3, 4, 5, 6, 8, 9],
          // [1, 2, 3, 4, 5, 6, 8, 9],
          // [1, 2, 3, 4, 5, 6, 8, 9],
          // [1, 2, 3, 4, 5, 6, 8, 9],
          // [1, 2, 3, 4, 5, 6, 8, 9],
          // [1, 2, 3, 4, 5, 6, 8, 9],
          // [1, 2, 3, 4, 5, 6, 8, 9],
          // [1, 2, 3, 4, 5, 6, 8, 9],
          // [1, 2, 3, 4, 5, 6, 8, 9],
          // [1, 2, 3, 4, 5, 6, 8, 9],
          // [1, 2, 3, 4, 5, 6, 8, 9],
          // [1, 2, 3, 4, 5, 6, 8, 9]


<!--    this.getTopBar()-->

<!--    this.getEcharts()-->

<!--    this.getPurchaseLeftBottom()-->

<!--    this.getPurchaseRight()-->

        ],
        index: true,
        columnWidth: [50, 200, 200, 150],
        align: ['center', 'center', 'center', 'center']
        // carousel: 'page'
      }


<!--    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 => {-->

<!--        const speed = 0.2 + Math.random() * 1-->

<!--        const thisDistance = this.distance + Math.random() * 300-->

<!--        item.style.transformOrigin = `0 0 ${thisDistance}px`-->

<!--        item.style.transform = `-->

<!--        translate3d(0,0,-${thisDistance}px)-->

<!--        rotateY(${Math.random() * 360}deg)-->

<!--        rotateX(${Math.random() * -50}deg)-->

<!--        scale(${speed},${speed})`-->

<!--      })-->

<!--    },-->

<!--    // 获取topEcharts-->

<!--    getTopBar() {-->

<!--      loadEcharts('topBarLeft', kbTop())-->

<!--      loadEcharts('topBarRight', kbTop())-->

<!--    },-->

<!--    // 获取echarts-->

<!--    async getEcharts() {-->

<!--      PurchaseLeftTop().then(res => {-->

<!--        this.purchaseLeftTopData = res.data[0]-->

<!--        loadEcharts('cgddchart', cgddchart(this.purchaseLeftTopData.ThisMonthPurchaseOrderCont, this.purchaseLeftTopData.ThisMonthPurchaseArrivalOrderCont, this.purchaseLeftTopData.ThisMonthWareHouseOrderCont))-->

<!--        // loadEcharts('cgddchart', cgddchart(30, 5, 10))-->

<!--      })-->

<!--      setInterval(() => {-->

<!--        PurchaseLeftTop().then(res => {-->

<!--          this.purchaseLeftTopData = res.data[0]-->

<!--          loadEcharts('cgddchart', cgddchart(this.purchaseLeftTopData.ThisMonthPurchaseOrderCont, this.purchaseLeftTopData.ThisMonthPurchaseArrivalOrderCont, this.purchaseLeftTopData.ThisMonthWareHouseOrderCont))-->

<!--        })-->

<!--      }, 1000 * 6)-->

<!--    },-->

<!--    getPurchaseLeftBottom() {-->

<!--      PurchaseLeftBottom().then(res => {-->

<!--        this.tableData = res.data.filter(i => !parseFloat(i.quantity1))// 过滤掉已收数量大于零的值-->

    }
  },


<!--        // this.number1 = this.tableData.length-->

  activated() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
  },
  created() {
    setInterval(this.getNowTime, 1000)


<!--        const divData = this.$refs.tableData.bodyWrapper-->

<!--        // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)-->

<!--        this.PurchaseLeftBottom = setInterval(() => {-->

<!--          // 元素自增距离顶部1像素-->

<!--          divData.scrollTop += 1-->

<!--          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)-->

<!--          if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {-->

<!--            // 重置table距离顶部距离-->

<!--            divData.scrollTop = 0-->

<!--            PurchaseLeftBottom().then(res => {-->

<!--              this.tableData = res.data.filter(i => !parseFloat(i.quantity1))// 过滤掉已收数量大于零的值-->

<!--              // this.number1 = this.tableData.length-->

<!--              if (this.tableData.length > 13) {-->

<!--                clearInterval(this.PurchaseLeftBottom)-->

<!--                this.getPurchaseLeftBottom()-->

<!--              }-->

<!--            })-->

<!--          }-->

<!--        }, this.tableData.length <= 13 ? 1000 * 3 : 100)-->

<!--      })-->

<!--    },-->

<!--    getPurchaseRight() {-->

<!--      PurchaseRight().then(res => {-->

<!--        this.tableDataRank = res.data-->

<!--        const divData = this.$refs.tableDataRank.bodyWrapper-->

<!--        // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)-->

<!--        this.PurchaseRight = setInterval(() => {-->

<!--          // 元素自增距离顶部1像素-->

<!--          divData.scrollTop += 1-->

<!--          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)-->

<!--          if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {-->

<!--            // 重置table距离顶部距离-->

<!--            divData.scrollTop = 0-->

<!--            PurchaseRight().then(res => {-->

<!--              this.tableDataRank = res.data-->

<!--              if (this.tableDataRank.length > 23) {-->

<!--                clearInterval(this.PurchaseRight)-->

<!--                this.getPurchaseRight()-->

<!--              }-->

<!--            })-->

<!--          }-->

<!--        }, this.tableDataRank.length <= 23 ? 1000 * 3 : 100)-->

<!--      })-->

<!--    },-->

<!--    tableRowClassName({ row, rowIndex }) {-->

<!--      // 把每一行的索引放进row-->

<!--      row.index = rowIndex + 1-->

<!--    },-->

    // 两小时看板刷新一次
    setInterval(() => {
      window.location.reload()
    }, 1000 * 60 * 120)
  },
  mounted() {
    // 监听网络是否在线
    window.addEventListener('online', this.updateOnlineStatus)
    window.addEventListener('offline', this.updateOnlineStatus)
    this.updateOnlineStatus({ type: this.onLine ? 'online' : 'offline', isFirst: true })


<!--    // 获取当前时间-->

<!--    getNowTime() {-->

<!--      const dt = new Date()-->

<!--      const wk = dt.getDay()-->

<!--      const y = dt.getFullYear()-->

<!--      const m = (dt.getMonth() + 1 + '').padStart(2, '0')-->

<!--      const d = (dt.getDate() + '').padStart(2, '0')-->

    this.getEcharts()


<!--      const hh = (dt.getHours() + '').padStart(2, '0')-->

<!--      const mm = (dt.getMinutes() + '').padStart(2, '0')-->

<!--      const ss = (dt.getSeconds() + '').padStart(2, '0')-->

<!--      const weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']-->

<!--      const week = weeks[wk]-->

    this.getPurchaseLeftBottom()
    setInterval(() => {
      this.getPurchaseLeftBottom()
    }, 15 * 1000)


<!--      this.headTime = `${y}-${m}-${d}  ${hh}:${mm}:${ss}   ${week}`-->

<!--    },-->

<!--    headerCellStyleCenter() {-->

<!--      return {-->

<!--        // backgroundColor: 'rgb(30 ,33, 46)',-->

<!--        backgroundColor: '#000',-->

<!--        padding: '10px 0',-->

<!--        textAlign: 'center',-->

<!--        color: '#07acc2',-->

<!--        border: 'none',-->

<!--        fontSize: '18px'-->

<!--      }-->

<!--    },-->

<!--    cellStyleCenter() {-->

<!--      return {-->

<!--        padding: '7.5px 0',-->

<!--        textAlign: 'center',-->

<!--        backgroundColor: '#000',-->

<!--        color: '#fff',-->

<!--        border: 'none',-->

<!--        fontSize: '18px'-->

<!--      }-->

<!--    }-->

<!--  }-->

<!--}-->

<!--</script>-->

    this.getPurchaseRight()
    setInterval(() => {
      this.getPurchaseRight()
    }, 20 * 1000)
  },
  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('网络掉线，请关注网络状态！')
        }
      }
    },


<!--<style scoped lang="scss">-->

<!--$main_color: #09d8f2;-->

<!--$color01: #00FFFF;-->

<!--.tableData {-->

<!--  background: #000;-->

<!--}-->

    getPurchaseLeftBottom() {
      PurchaseLeftBottom().then(res => {
        const flag = this.compareArrays(this.configTable.data, res.data)
        if (!flag) {
          this.configTable.data = res.data.map(i =>
            [
              i.PurchaseOrder,
              i.suppername,
              i.partname,
              i.quantity,
              i.quantity1,
              `<span> ${parseFloat(i.quantity - i.quantity1)}</span>`,
              i.acceptDate ? i.acceptDate.substring(0, 11) : i.acceptDate,
              parseFloat(i.warning) < 0 ? `<span style="color: red;">${Math.abs(parseFloat(i.warning))}</span>` : `0`
            ]
          )
          this.$refs['scrollBoard'].updateRows(this.configTable.data)
        }
      })
    },


<!--.el-table__empty-text {-->

<!--  color: $main_color;-->

<!--}-->

    getPurchaseRight() {
      PurchaseRight().then(res => {
        const flag = this.compareArrays(this.configTableRight.data, res.data)
        if (!flag) {
          this.configTableRight.data = res.data.map(i =>
            [
              i.suppercode,
              i.suppername,
              i.cont
            ]
          )
          this.$refs['scrollBoardRight'].updateRows(this.configTableRight.data)
        }
      })
    },


<!--::v-deep .el-table::before {-->

<!--  height: 0;-->

<!--}-->

    // 两个数组做对比
    compareArrays(arr1, arr2) {
      const set1 = new Set(arr1)
      const set2 = new Set(arr2)


<!--::v-deep .el-table__body-wrapper::-webkit-scrollbar {-->

<!--  /* width: 0;宽度为0暗藏 */-->

<!--  width: 0;-->

<!--}-->

      if (set1.size !== set2.size) {
        return false
      }


<!--::v-deep .cell {-->

<!--  padding: 0 !important;-->

<!--  font-size: 18px;-->

<!--}-->

<!--</style>-->

<!--&lt;!&ndash;星空&ndash;&gt;-->

<!--<style lang="css" scoped>-->

<!--@keyframes rotate {-->

<!--  0% {-->

<!--    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);-->

<!--  }-->

<!--  100% {-->

<!--    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);-->

<!--  }-->

<!--}-->

      for (const value of set1) {
        if (!set2.has(value)) {
          return false
        }
      }


<!--.stars {-->

<!--  transform: perspective(500px);-->

<!--  transform-style: preserve-3d;-->

<!--  position: absolute;-->

<!--  perspective-origin: 50% 100%;-->

<!--  left: 45%;-->

<!--  animation: rotate 90s infinite linear;-->

<!--  bottom: 0;-->

<!--  z-index: 102;-->

<!--}-->

      return true
    },


<!--.star {-->

<!--  width: 2px;-->

<!--  height: 2px;-->

<!--  /*background: #f7f7b6;*/-->

<!--  background: #8edffc;-->

<!--  position: absolute;-->

<!--  left: 0;-->

<!--  top: 0;-->

<!--  backface-visibility: hidden;-->

<!--  z-index: 102;-->

<!--}-->

<!--</style>-->

    // 获取echarts
    getEcharts() {
      PurchaseLeftTop().then(res => {
        this.purchaseLeftTopData = res.data[0]
        loadEcharts('cgddchart', cgddchart(this.purchaseLeftTopData.ThisMonthPurchaseOrderCont, this.purchaseLeftTopData.ThisMonthPurchaseArrivalOrderCont, this.purchaseLeftTopData.ThisMonthWareHouseOrderCont))
        // loadEcharts('cgddchart', cgddchart(30, 5, 10))
      })
      setInterval(() => {
        PurchaseLeftTop().then(res => {
          this.purchaseLeftTopData = res.data[0]
          loadEcharts('cgddchart', cgddchart(this.purchaseLeftTopData.ThisMonthPurchaseOrderCont, this.purchaseLeftTopData.ThisMonthPurchaseArrivalOrderCont, this.purchaseLeftTopData.ThisMonthWareHouseOrderCont))
        })
      }, 1000 * 6)
    },
    // 获取当前时间
    getNowTime() {
      const dt = new Date()
      const wk = dt.getDay()
      const y = dt.getFullYear()
      const m = (dt.getMonth() + 1 + '').padStart(2, '0')
      const d = (dt.getDate() + '').padStart(2, '0')

      const hh = (dt.getHours() + '').padStart(2, '0')
      const mm = (dt.getMinutes() + '').padStart(2, '0')
      const ss = (dt.getSeconds() + '').padStart(2, '0')
      const weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      const week = weeks[wk]

      this.headTime = `${y}-${m}-${d}  ${hh}:${mm}:${ss}   ${week}`
    }

  }
}
</script>

<style lang="scss" scoped>
$main_color: #09d8f2;
$color01: #00FFFF;
.tableData {
  background: transparent;
}

.el-table::before {
  height: 0;
}

.el-table__empty-text {
  color: $main_color;
}

.tableDataCell {
  ::v-deep .cell {
    padding: 0 2px;
  }
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  /* width: 0;宽度为0暗藏 */
  width: 0;
  background: transparent;
}

::v-deep .el-table__body-wrapper {
  background: transparent;
}

::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: transparent;
}

::v-deep .gutter {
  display: none;
}

.all_block01 {
  width: 237px;
  height: 180px;
}

.all_block02 {
  width: 100%;
  height: 49px;
  background: rgba(9, 216, 242, 0.1);
}

.all_block03 {
  width: 199px;
  height: 180px;
}

.all_block04 {
  width: 100%;
  height: 49px;
  background: rgba(9, 216, 242, 0.1);
}

.kb_center_block_children {
  height: 180px;
  //border: 1px solid $kbBorderColor;
  width: 240px;
  display: flex;
  z-index: 2;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  margin: 10px;
  font-size: 22px;

  .box02 {
    background: url("../../assets/images/box02.png") no-repeat;
    transform: scale(1.5);
    width: 145px;
    height: 84px;

  }
}

.all_block05 {
  position: absolute;
  animation: upDown 3s ease-in-out infinite;
  left: 60px;
}

.all_block06 {
  position: absolute;
  animation: upDown2 3s ease-in-out infinite;
  left: 290px;
}

.all_block07 {
  position: absolute;
  animation: upDown 3s ease-in-out infinite;
  left: 520px;
}

@keyframes upDown {
  0% {
    top: 50px;
  }
  50% {
    top: 100px;
  }
  100% {
    top: 50px;
  }
}

@keyframes upDown2 {
  0% {
    top: 100px;
  }
  50% {
    top: 50px;
  }
  100% {
    top: 100px;
  }
}

</style>