1.综合看板渲染数据，完成一个版本

loulijun2021

2022-08-03 458f6714f335938fce80690c037ffca0ccfaa50c

 src/views/kb/cgdd.vue

@@ -19,17 +19,19 @@
              <div class="content01">
                <div class="pic01" />
                <div class="number">12</div>
                <div class="text">当日入库数</div>
                <div class="text">本月采购单数</div>
              </div>
              <div class="content01">
                <div class="pic01" />
                <div class="number">90200</div>
                <div class="text">当月入库总数</div>
                <div class="text">本月进货单数</div>
              </div>
              <div class="content01">
                <div class="pic01" />
                <div class="number">12%</div>
                <div class="text">当月延期占比</div>
                <div class="number">90200</div>
                <div class="text">本月入库单数</div>
                <!--                <div id="pie01" ref="pie01" class="pie01" />-->
                <!--                <div class="text" style="margin-top: -10px">当月延期占比</div>-->
              </div>

            </div>
@@ -68,6 +70,7 @@
                <el-table-column
                  prop="jgdh"
                  label="加工单号"
                  width="207"
                />
                <el-table-column
                  prop="cpmc"
@@ -124,6 +127,7 @@
              <div class="content_head">供应商延期交货排行</div>
              <div class="content_body">
                <el-table
                  ref="tableDataRank"
                  :data="tableDataRank"
                  style="width: 100%;"
                  :header-cell-style="headerCellStyle"
@@ -133,7 +137,7 @@
                  <el-table-column
                    prop="xh"
                    label="序号"
                    width="70"
                    width="75"
                  />
                  <el-table-column
                    prop="cj"
@@ -143,10 +147,11 @@
                  <el-table-column
                    prop="cx"
                    label="产线"
                    width="100"
                    width="120"
                  />
                  <el-table-column
                    prop="cp"
                    width="138"
                    label="产品"
                  />
                  <el-table-column
@@ -167,24 +172,15 @@

<script>
import './kbCommon.css'
import { bar03, loadEcharts } from '@/utils/myEcharts'
import { loadEcharts, pie01 } from '@/utils/myEcharts'
import * as echarts from 'echarts'

export default {
  name: 'Index2',
  data() {
    return {
      headTime: '',
      leftTopDataAll: [
        // { id: 1, name: '锂电产线', value: 1000, children: [] },
        { id: 2, name: '包装产线1', value: 1200, children: [] },
        { id: 3, name: '包装产线2', value: 1300, children: [] },
        { id: 4, name: '包装产线3', value: 1300, children: [] },
        { id: 5, name: '包装产线4', value: 1300, children: [] },
        { id: 6, name: '包装产线5', value: 1300, children: [] }
      ],
      leftTopDataAllLength: 0,
      leftTopDataCurrentNumber: 0,
      leftTopData: [],

      tableData: [
        {
          xh: 1,
@@ -365,31 +361,17 @@
    setInterval(this.getNowTime, 1000)
  },
  mounted() {
    this.leftTopData = this.leftTopDataAll.slice(this.leftTopDataCurrentNumber, this.leftTopDataCurrentNumber + 2)
    this.leftTopDataAllLength = this.leftTopDataAll.length

    // this.handleData()
    // setInterval(this.handleData, 2000)

    this.getEcharts()
  },
  methods: {
    // 处理数据
    handleData() {
      console.log(this.leftTopDataCurrentNumber)
      this.leftTopData = this.leftTopDataAll.slice(this.leftTopDataCurrentNumber, this.leftTopDataCurrentNumber + 2)

      if (this.leftTopDataCurrentNumber === this.leftTopDataAllLength - 2 || this.leftTopDataCurrentNumber === this.leftTopDataAllLength - 1) {
        this.leftTopDataCurrentNumber = 0
      } else {
        this.leftTopDataCurrentNumber = this.leftTopDataCurrentNumber + 2
      }
    },

    // 获取echarts
    getEcharts() {
      loadEcharts('bar03', bar03('本周入库量汇总'))
      loadEcharts('bar04', bar03('本周出货量汇总'))
      loadEcharts('pie01', pie01())

      // setInterval(() => {
      //   loadEcharts('pie01', pie01())
      // }, 5000)
    },

    // 获取当前时间
@@ -469,6 +451,12 @@
            background: url("../../assets/images/pic01.png");
          }

          //.pie01{
          //  height: 200px;
          //  width: 200px;
          //  margin-top: -30px;
          //}

          .number {
            margin-top: -50px;
            font-size: 18px;
@@ -531,4 +519,9 @@
::v-deep .el-table__body-wrapper {
  background-color: #000;
}

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