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>
@@ -170,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,
@@ -368,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)
    },

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

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

          .number {
            margin-top: -50px;
            font-size: 18px;