系统总览页面

web/src/components/Home/Charge.vue

@@ -0,0 +1,249 @@
+<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: {
+    deviceInfo: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      curList: [
+        {
+          name: '日充电电量',
+          key: 'key1',
+          lineColor: '#00BBA3',
+          colorStart: ' rgba(10, 250, 106, 0.15)',
+          colorEnd: ' rgba(171, 255, 249, 0.3)',
+          value:0,
+          d:'kW·h'
+        },
+        {
+          name: '日充电次数',
+          key: 'key2',
+          lineColor: '#3F80F2',
+          colorStart: ' rgba(99, 151, 235, 0.3)',
+          colorEnd: ' rgba(24, 109, 245, 0.3)',
+          value:0,
+          d:''
+        }
+      ],
+      curListEcharts: [
+        {
+          name: '日充电电量',
+          key: 'key1',
+          lineColor: '#00BBA3',
+          colorStart: ' rgba(10, 250, 106, 0.15)',
+          colorEnd: ' rgba(171, 255, 249, 0.3)',
+          value:0,
+          d:'kW·h'
+        },
+        {
+          name: '日充电收益',
+          key: 'key2',
+          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: {
+    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) {
+      console.log(data, 'dddddddddddddddddddddddddddd')
+      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)
+      console.log(this.lineChartData, 'this.lineChartData')
+      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>