系统总览字段修改

web/src/components/Home/Charge.vue

@@ -1,13 +1,10 @@
 <template>
   <div class="charge">
     <div class="text_Cur">
-      <div  v-for="item in curList" :key="item.key">
+      <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>
+        <span class="mark">{{ item.value ? item.value : 0 }}</span>
+        <span class="d">{{ item.d }}</span>
       </div>
     </div>
     <div id="charge-chart"></div>
@@ -18,6 +15,10 @@
 export default {
   name: '',
   props: {
+    total: {
+      type: Object,
+      default: () => {}
+    },
     deviceInfo: {
       type: Array,
       default: () => []
@@ -28,52 +29,63 @@ export default {
       curList: [
         {
           name: '日充电电量',
-          key: 'key1',
+          key: 'chargeElect',
           lineColor: '#00BBA3',
           colorStart: ' rgba(10, 250, 106, 0.15)',
           colorEnd: ' rgba(171, 255, 249, 0.3)',
-          value:0,
-          d:'kW·h'
+          value: 0,
+          d: 'kW·h'
         },
         {
           name: '日充电次数',
-          key: 'key2',
+          key: 'chargeNum',
           lineColor: '#3F80F2',
           colorStart: ' rgba(99, 151, 235, 0.3)',
           colorEnd: ' rgba(24, 109, 245, 0.3)',
-          value:0,
-          d:''
+          value: 0,
+          d: ''
         }
       ],
       curListEcharts: [
         {
           name: '日充电电量',
-          key: 'key1',
+          key: 'chargeElect',
           lineColor: '#00BBA3',
           colorStart: ' rgba(10, 250, 106, 0.15)',
           colorEnd: ' rgba(171, 255, 249, 0.3)',
-          value:0,
-          d:'kW·h'
+          value: 0,
+          d: 'kW·h'
         },
         {
           name: '日充电收益',
-          key: 'key2',
+          key: 'incomeCharge',
           lineColor: '#3F80F2',
           colorStart: ' rgba(99, 151, 235, 0.3)',
           colorEnd: ' rgba(24, 109, 245, 0.3)',
-          value:0,
-          d:''
+          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(() => {
@@ -94,25 +106,23 @@ export default {
       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]])
+      const values = []
+      keys.forEach((item, index) => {
+        values[index] = data.map((dataValue) => dataValue[keys[index]])
       })
-    
+
       return {
         dates,
-        values,
+        values
       }
     },
     getChargeData() {
-      const arr=this.curListEcharts
-      const keyList=this.curListEcharts.map((item)=>item.key)
+      const arr = this.curListEcharts
+      const keyList = this.curListEcharts.map((item) => item.key)
       const result = this.processData(this.deviceInfo, keyList)
 
       this.lineChartData.xdata = result.dates
@@ -139,14 +149,13 @@ export default {
               y2: 1,
               colorStops: [
                 { offset: 0, color: JSON.parse(JSON.stringify(item)).colorStart }, // 顶部颜色
-                { offset: 1, color: JSON.parse(JSON.stringify(item)).colorEnd }, // 底部颜色
+                { offset: 1, color: JSON.parse(JSON.stringify(item)).colorEnd } // 底部颜色
               ]
             }
           },
           global: false,
           showSymbol: false,
-          data:result.values[index]
-
+          data: result.values[index]
         }
       })
     },
@@ -197,7 +206,6 @@ export default {
         series: this.lineChartData.ydata
       }
       option && chargeChart.setOption(option)
-      console.log(this.lineChartData, 'this.lineChartData')
       window.addEventListener('resize', this.handleResize)
     }
   }
@@ -224,12 +232,12 @@ export default {
   display: flex;
   justify-content: space-between;
   align-items: center;
-& > div:last-child{
+  & > div:last-child {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: end;
-   }
+  }
   .mark {
     font-size: 16px;
     margin-right: 2px;
@@ -241,7 +249,7 @@ export default {
     rgba(61, 254, 250, 0.15) 49.2%,
     rgba(61, 254, 250, 0) 100%
   );
-  .d{
+  .d {
     margin-left: 1px;
     font-size: 12px;
   }