#

luxiaotao1123

2023-08-01 b79d7e36392d9992ef883d2fc731b1ab3cf577c3

 src/components/datav/cards.vue

@@ -1,26 +1,10 @@
<template>
  <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">{{ '0' + (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:35px;" />元
          </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;" />处
          </div>
        </div>
      </div>
    <div class="chart-name">
      设备故障月趋势
      <dv-decoration-3 style="width:200px;height:20px;" />
    </div>
    <dv-charts :option="option" />
  </div>
</template>

@@ -31,81 +15,85 @@
  name: 'Cards',
  data() {
    return {
      cards: []
      option: {
        legend: { // 小标签
          data: [
            {
              name: '系列A',
              color: '#333'
            },
            {
              name: '系列B',
              color: '#fff'
            }
          ],
          textStyle: {
            fill: '#fff'
          },
          left: 0,
          top: '50%',
          orient: 'vertical'
        },
        xAxis: {
          name: '第一周',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          nameTextStyle: {  // 轴标题
            fill: '#fff',
            fontSize: 15
          },
          axisLine: { // 轴线
            style: {
              stroke: '#fff'
            }
          },
          axisLabel: {  // 轴字
            style: {
              fill: '#fff',
              fontSize: 12,
            }
          }
        },
        yAxis: {
          name: '销售额',
          data: 'value',
          nameTextStyle: {  // 轴标题
            fill: '#fff',
            fontSize: 15
          },
          axisLine: { // 轴线
            style: {
              stroke: '#fff'
            }
          },
          axisLabel: {  // 轴字
            style: {
              fill: '#fff',
              fontSize: 12,
            }
          }
        },
        series: [  // 数据
          {
            name: '系列A',
            data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
            type: 'bar',
            gradient: {
              color: ['#333']
            }
          },
          {
            name: '系列B',
            data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
            type: 'bar',
            gradient: {
              color: ['#fff']
            }
          }
        ]
      }
    }
  },
  methods: {
    createData() {
      const { randomExtend } = this

      this.httpData();

      this.cards = new Array(5).fill(0).map((foo, i) => ({
        title: '测试路段' + (i + i),
        total: {
          number: [randomExtend(9000, 10000)],
          content: '{nt}',
          textAlign: 'right',
          style: {
            fill: '#ea6027',
            fontWeight: 'bold'
          }
        },
        num: {
          number: [randomExtend(30, 60)],
          content: '{nt}',
          textAlign: 'right',
          style: {
            fill: '#26fcd8',
            fontWeight: 'bold'
          }
        },
        ring: {
          series: [
            {
              type: 'gauge',
              startAngle: -Math.PI / 2,
              endAngle: Math.PI * 1.5,
              arcLineWidth: 13,
              radius: '80%',
              data: [
                { name: '资金占比', value: randomExtend(40, 60) }
              ],
              axisLabel: {
                show: false
              },
              axisTick: {
                show: false
              },
              pointer: {
                show: false
              },
              backgroundArc: {
                style: {
                  stroke: '#224590'
                }
              },
              details: {
                show: true,
                formatter: '资金占比{value}%',
                style: {
                  fill: '#1ed3e5',
                  fontSize: 20
                }
              }
            }
          ],
          color: ['#03d3ec']
        }
      }))
    },
    randomExtend(minNum, maxNum) {
      if (arguments.length === 1) {
        return parseInt(Math.random() * minNum + 1, 10)
      } else {
        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
      }
    },
    httpData() {
      const getApiData = async () => {
        return await axios.get(this.baseUrl + "test.json", { params: {} })
@@ -114,11 +102,11 @@
    }
  },
  mounted() {
    const { createData } = this
    const { httpData } = this

    createData()
    httpData()

    setInterval(this.createData, 30000)
    setInterval(this.httpData, 30000)
  }
}
</script>
@@ -128,68 +116,19 @@
  display: flex;
  justify-content: space-between;
  height: 45%;
  background-color: rgba(6, 30, 93, 0.5);
  border-top: 2px solid rgba(1, 153, 209, .5);
  box-shadow: 0 0 3px blue;
  box-sizing: border-box;
  padding: 0px 30px;
  position: relative;

  .card-item {
    background-color: rgba(6, 30, 93, 0.5);
    border-top: 2px solid rgba(1, 153, 209, .5);
    width: 19%;
    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: 40px;
      color: #03d3ec;
    }
  }

  .ring-charts {
    height: 55%;
  }

  .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: 20px;
      color: #1294fb;
      display: flex;
      font-size: 18px;
      align-items: center;

      .dv-digital-flop {
        margin-right: 5px;
      }
    }
  .chart-name {
    position: absolute;
    right: 70px;
    text-align: right;
    font-size: 20px;
    top: 10px;
  }
}
</style>