uniapp 大屏加载后端数据循环显示

<template>
  <div class="bottom-charts">
    <div id="cards">
      <div
        class="card-item"
        v-for="(card, i) in cards"
        :key="card.title"
      >
        <div class="card-header">
          <div class="card-header-left">{{ card.title }}</div>
          <div class="card-header-right">{{ (i + 1) }}</div>
        </div>
        <dv-charts class="ring-charts" :option="card.ring" />
        <div class="card-footer">
          <div class="card-footer-item">
            <div class="footer-title">今日已产</div>
            <div class="footer-detail">
              <dv-digital-flop :config="card.total" style="width:70%;height:30px;" />m³
            </div>
          </div>
          <div class="card-footer-item">
            <div class="footer-title">今日计划</div>
            <div class="footer-detail">
              <dv-digital-flop :config="card.num" style="width:70%;height:35px;" />m³
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Cards',
  data () {
    return {
      cards: []
    }
  },
  methods: {
    createData () {
      let postData = this.$qs.stringify({
          date_type:2,//日期类型0:昨天,1:今天,2:本月,3:今年
        });
      var that = this;
      this.$http({
          method: 'post',
          url:'/screen/eachCompanyProduceTotal',
          data:postData
        }).then((res)=>{
          if(res.data.code === 200){
            console.log(res.data.data);
            //先给数组的每一项都填充为0，让这个数组有数据项，而不仅仅只有长度
            //再用 map 替换各个项为 new Object( )
            this.cards = new Array(res.data.data.length).fill(0).map((data, i) => ({
              title: res.data.data[i].name,
              total: {
                number: [res.data.data[i].value],
                content: '{nt}',
                textAlign: 'right',
                style: {
                  fill: '#ea6027',
                }
              },
              num: {
                number: [res.data.data[i].plan],
                content: '{nt}',
                textAlign: 'right',
                style: {
                  fill: '#26fcd8',
                }
              },
              ring: {
                series: [
                  {
                    type: 'gauge',
                    startAngle: -Math.PI / 2,
                    endAngle: Math.PI * 1.5,
                    arcLineWidth: 13,
                    radius: '70%',
                    data: [
                      { name: '完成率', value: res.data.data[i].percentage }
                    ],
                    axisLabel: {
                      show: false
                    },
                    axisTick: {
                      show: false
                    },
                    pointer: {
                      show: false
                    },
                    backgroundArc: {
                      style: {
                        stroke: '#224590'
                      }
                    },
                    details: {
                      show: true,
                      formatter: '完成率{value}%',
                      style: {
                        fill: '#EFF804',
                        fontSize: 15
                      }
                    }
                  }
                ],
                color: ['#03d3ec']
              }
            }))
          }
      });

    }
  },
  mounted () {
    const { createData } = this

    createData()

    this.timer = setInterval(() => {
      createData();
    }, 5000);
  }
}
</script>

<style lang="less">
.bottom-charts {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;

  .bc-chart-item {
    width: 25%;
    height: 100%;
    padding-top: 20px;
    box-sizing: border-box;
  }

  .bcci-header {
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
  }

  .dv-active-ring-chart {
    height: calc(~"100% - 80px");
  }

  .label-tag {
    height: 30px;
  }

  .active-ring-name {
    font-size: 18px !important;
  }

  .decoration-1, .decoration-2, .decoration-3 {
    display: absolute;
    left: 0%;
  }
}

#cards {
  display: flex;
  justify-content: space-between;
  height: 100%;
width: 100%;
  .card-item {
    background-color: rgba(6, 30, 93, 0.5);
    border-top: 2px solid rgba(1, 153, 209, .5);
    width: 40%;
    display: flex;
    flex-direction: column;
  }

  .card-header {
    display: flex;
    height: 20%;
    align-items: center;
    justify-content: space-between;

    .card-header-left {
      font-size: 18px;
      font-weight: bold;
      padding-left: 20px;
    }

    .card-header-right {
      padding-right: 20px;
      font-size: 30px;
      color: #03d3ec;
    }
  }

  .ring-charts {
    height: 35%;
  }

  .card-footer {
    height: 25%;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .card-footer-item {
    padding: 5px 10px 0px 10px;
    box-sizing: border-box;
    width: 40%;
    background-color: rgba(6, 30, 93, 0.7);
    border-radius: 3px;

    .footer-title {
      font-size: 15px;
      margin-bottom: 5px;
    }

    .footer-detail {
      font-size: 15px;
      color: #1294fb;
      display: flex;
      align-items: center;

      .dv-digital-flop {
        margin-right: 5px;
      }
    }
  }
}
</style>