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

loulijun2021

2022-08-03 458f6714f335938fce80690c037ffca0ccfaa50c

 src/views/kb/cgdd.vue

@@ -19,18 +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 id="pie01" ref="pie01" class="pie01" />
                <div class="text" style="margin-top: -10px">当月延期占比</div>
                <div class="pic01" />
                <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>
@@ -179,17 +180,7 @@
  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,
@@ -370,26 +361,9 @@
    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() {
@@ -477,11 +451,11 @@
            background: url("../../assets/images/pic01.png");
          }

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

          .number {
            margin-top: -50px;