energy_storage/web/src/components/Home/Charge.vue

<template>
  <div class="charge">
    <div class="text_Cur">
      <div v-for="item in curList" :key="item.key">
        <div>{{ item.name }}</div>
        <span class="mark">{{ item.value ? item.value : 0 }}</span>
        <span class="d">{{ item.d }}</span>
      </div>
    </div>
    <div id="charge-chart"></div>
  </div>
</template>

<script>
export default {
  name: '',
  props: {
    total: {
      type: Object,
      default: () => {}
    },
    deviceInfo: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      curList: [
        {
          name: '日充电电量',
          key: 'chargeElect',
          lineColor: '#00BBA3',
          colorStart: ' rgba(10, 250, 106, 0.15)',
          colorEnd: ' rgba(171, 255, 249, 0.3)',
          value: 0,
          d: 'kW·h'
        },
        {
          name: '日充电次数',
          key: 'chargeNum',
          lineColor: '#3F80F2',
          colorStart: ' rgba(99, 151, 235, 0.3)',
          colorEnd: ' rgba(24, 109, 245, 0.3)',
          value: 0,
          d: ''
        }
      ],
      curListEcharts: [
        {
          name: '日充电电量',
          key: 'chargeElect',
          lineColor: '#00BBA3',
          colorStart: ' rgba(10, 250, 106, 0.15)',
          colorEnd: ' rgba(171, 255, 249, 0.3)',
          value: 0,
          d: 'kW·h'
        },
        {
          name: '日充电收益',
          key: 'incomeCharge',
          lineColor: '#3F80F2',
          colorStart: ' rgba(99, 151, 235, 0.3)',
          colorEnd: ' rgba(24, 109, 245, 0.3)',
          value: 0,
          d: ''
        }
      ],
      chargeChart: null,
      lineChartData: {
        ydata: [],
        xdata: []
      }
    }
  },
  watch: {
    total: {
      handler(n) {
        if (n) {
          let that = this
          that.curList.forEach((item) => {
            item.value = that.total[item.key]
          })
        }
      },
      deep: true, // 深度监听
      immediate: true
    },
    deviceInfo: {
      handler(n) {
        this.$nextTick(() => {
          this.drawLineChart()
        })
      }
      // immediate: true
    }
  },
  mounted() {},
  onBeforeUnmount() {
    this.chargeChart = null
    window.removeEventListener('resize', this.handleResize)
  },

  methods: {
    handleResize() {
      this.chargeChart.resize()
    },
    processData(data, keys) {
      data.sort((a, b) => {
        return new Date(a.date) - new Date(b.date)
      })
      const dates = data.map((item) => item.date)
      const values = []
      keys.forEach((item, index) => {
        values[index] = data.map((dataValue) => dataValue[keys[index]])
      })

      return {
        dates,
        values
      }
    },
    getChargeData() {
      const arr = this.curListEcharts
      const keyList = this.curListEcharts.map((item) => item.key)
      const result = this.processData(this.deviceInfo, keyList)

      this.lineChartData.xdata = result.dates
      arr.forEach((item, index) => {
        this.lineChartData.ydata[index] = {
          name: item.name,
          smooth: true,
          type: 'line',
          barWidth: 10,
          itemStyle: {
            borderRadius: 10,
            color: item.lineColor
          },
          emphasis: {
            focus: 'series'
          },
          areaStyle: {
            global: false,
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: JSON.parse(JSON.stringify(item)).colorStart }, // 顶部颜色
                { offset: 1, color: JSON.parse(JSON.stringify(item)).colorEnd } // 底部颜色
              ]
            }
          },
          global: false,
          showSymbol: false,
          data: result.values[index]
        }
      })
    },

    drawLineChart(activeKey) {
      this.getChargeData(activeKey)
      const chartDom = document.getElementById('charge-chart')
      let chargeChart = this.$echarts.init(chartDom)
      this.chargeChart = chargeChart
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          top: 20,
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.lineChartData.xdata,
          axisLine: {
            lineStyle: { type: 'dashed', color: '#435463' }
          },
          axisLabel: {
            color: '#fff'
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: { type: 'dashed', color: '#435463' }
          },
          axisLabel: {
            color: '#fff'
          }
        },
        series: this.lineChartData.ydata
      }
      option && chargeChart.setOption(option)
      window.addEventListener('resize', this.handleResize)
    }
  }
}
</script>

<style lang="scss" scoped>
.charge {
  height: calc(100% - 45px);

  #charge-chart {
    height: calc(100% - 45px);
  }
}

.text_Cur {
  border-bottom: 1px solid transparent;
  border-top: 1px solid transparent;
  border-image: linear-gradient(to right, transparent, #1d8a7b, transparent) 1;
  padding: 0px 15px;
  font-size: 14px;
  margin: 3px 0px;
  height: 45px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  & > div:last-child {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;
  }
  .mark {
    font-size: 16px;
    margin-right: 2px;
  }

  background: linear-gradient(
    90deg,
    rgba(0, 186, 173, 0.15) 0%,
    rgba(61, 254, 250, 0.15) 49.2%,
    rgba(61, 254, 250, 0) 100%
  );
  .d {
    margin-left: 1px;
    font-size: 12px;
  }
}
</style>