系统总览字段修改

web/src/components/Home/Alarm.vue

@@ -15,6 +15,10 @@
 export default {
   name: '',
   props: {
+    total:{
+      type:Object,
+      default:()=>{}
+    },
     deviceInfo: {
       type: Array,
       default: () => []
@@ -27,7 +31,7 @@ export default {
           name: '日光伏设备告警',
           key: 'key1',
           lineColor: '#22E4FF',
-          value: 0,
+          value: 1111,
           d: ''
         },
         {
@@ -62,11 +66,28 @@ export default {
   watch: {
     deviceInfo: {
       handler(n) {
+        let that=this
         this.$nextTick(() => {
+          
           this.drawLineChart()
         })
       }
       // immediate: true
+    },
+    total:{
+      handler(n){
+        if(n){
+
+          let that=this
+          that.curList.forEach((item)=>{
+            item.value=that.total[item.key]
+          })
+        }
+       
+      },
+      deep: true, // 深度监听
+      immediate: true,
+
     }
   },
   mounted() {},
@@ -166,7 +187,6 @@ export default {
         series: this.lineChartData.ydata
       }
       option && faultChart.setOption(option)
-      console.log(this.lineChartData, 'this.lineChartData')
       window.addEventListener('resize', this.handleResize)
     }
   }

web/src/components/Home/Charge.vue

@@ -3,10 +3,7 @@
     <div class="text_Cur">
       <div v-for="item in curList" :key="item.key">
         <div>{{ item.name }}</div>
-        <span class="mark">{{
+        <span class="mark">{{ item.value ? item.value : 0 }}</span>
-          item.value?item.value: 0
-        }}</span
-        >
         <span class="d">{{ item.d }}</span>
       </div>
     </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,
+          value: 0,
-          d:'kW·h'
+          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,
+          value: 0,
-          d:''
+          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,
+          value: 0,
-          d:'kW·h'
+          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,
+          value: 0,
-          d:''
+          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=[]
+      const values = []
-      keys.forEach((item,index)=>{
+      keys.forEach((item, index) => {
-        
+        values[index] = data.map((dataValue) => dataValue[keys[index]])
-        values[index]= data.map((dataValue)=>dataValue[keys[index]])
       })
 
       return {
         dates,
-        values,
+        values
       }
     },
     getChargeData() {
-      const arr=this.curListEcharts
+      const arr = this.curListEcharts
-      const keyList=this.curListEcharts.map((item)=>item.key)
+      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,7 +232,7 @@ 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;
@@ -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;
   }

web/src/components/Home/Energy.vue

@@ -17,6 +17,10 @@
 export default {
   name: '',
   props: {
+    total:{
+      type:Object,
+      default:()=>{}
+    },
     deviceInfo: {
       type: Array,
       default: () => []
@@ -27,14 +31,14 @@ export default {
       curList: [
         {
           name: '日充电电量',
-          key: 'key1',
+          key: 'storageElectIn',
           lineColor: '#22E4FF',
           value: 0,
           d: 'kW·h'
         },
         {
           name: '日放电电量',
-          key: 'key2',
+          key: 'storageElectOut',
           lineColor: '#0E68E4',
           value: 0,
           d: 'kW·h'
@@ -48,6 +52,20 @@ export default {
     }
   },
   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(() => {
@@ -68,7 +86,6 @@ export default {
       this.faultChart.resize()
     },
     processData(data, keys) {
-      console.log(data, 'dddddddddddddddddddddddddddd')
       data.sort((a, b) => {
         return new Date(a.date) - new Date(b.date)
       })
@@ -155,7 +172,6 @@ export default {
         series: this.lineChartData.ydata
       }
       option && faultChart.setOption(option)
-      console.log(this.lineChartData, 'this.lineChartData')
       window.addEventListener('resize', this.handleResize)
     }
   }

web/src/components/Home/Map.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="map">
     <div>
-      <div class="icon1" @click="showModal()"></div>
+      <div class="icon1" @click="showModal(testVal)"></div>
       <div class="icon"></div>
     </div>
     <div ref="mapContent"></div>
@@ -42,16 +42,21 @@ export default {
       testVal: {
         name: '场站211',
         id: '124563'
-      }
+      },
+      changeStationId:''
     }
   },
   mounted() {},
   methods: {
     async showModal(currentVal) {
+      this.changeStationId=currentVal.id
+      this.$emit('changeStation',this.changeStationId)
       console.log(currentVal, 'cccccccccccccccccccccc')
       this.showCtrModal = true
       try {
-        const query = {}
+        const query = {
+          // station_id:this.changeStationId
+        }
         const res = await postReq(query, '')
         if (res.code == 200) {
           this.modalInfo = res.data.records

web/src/components/Home/Modal/DisCharge.vue

@@ -61,7 +61,6 @@ export default {
       this.disChargeChart.resize()
     },
     processData(data, keys) {
-      console.log(data, 'dddddddddddddddddddddddddddd')
       data.sort((a, b) => {
         return new Date(a.date) - new Date(b.date)
       })
@@ -151,7 +150,6 @@ export default {
         series: this.lineChartData.ydata
       }
       option && disChargeChart.setOption(option)
-      console.log(this.lineChartData, 'this.lineChartData')
       window.addEventListener('resize', this.handleResize)
     }
   }

web/src/components/Home/Modal/Revenue.vue

@@ -57,7 +57,6 @@ export default {
       this.revenueChart.resize()
     },
     processData(data, keys) {
-      console.log(data, 'dddddddddddddddddddddddddddd')
       data.sort((a, b) => {
         return new Date(a.date) - new Date(b.date)
       })
@@ -160,7 +159,6 @@ export default {
         series: this.lineChartData.ydata
       }
       option && revenueChart.setOption(option)
-      console.log(this.lineChartData, 'this.lineChartData')
       window.addEventListener('resize', this.handleResize)
     }
   }

web/src/components/Home/Modal/Utilization.vue

@@ -55,7 +55,6 @@ export default {
       this.utilizationChart.resize()
     },
     processData(data, keys) {
-      console.log(data, 'dddddddddddddddddddddddddddd')
       data.sort((a, b) => {
         return new Date(a.date) - new Date(b.date)
       })
@@ -145,7 +144,6 @@ export default {
         series: this.lineChartData.ydata
       }
       option && utilizationChart.setOption(option)
-      console.log(this.lineChartData, 'this.lineChartData')
       window.addEventListener('resize', this.handleResize)
     }
   }

web/src/components/Home/Operational.vue

@@ -2,12 +2,12 @@
   <div class="Operational">
     <div class="oper-bg">{{ currentHoverNumber }}%</div>
     <div class="oper-right">
-      <div v-for="item in list" :key="item.key" class="oper-item" @mouseover="changeNumber(item)">
+      <div v-for="item in curList" :key="item.key" class="oper-item" @mouseover="changeNumber(item)">
         <div style="display: flex">
           <div :style="`background:${item.lineColor}`" class="item-icon"></div>
           <span class="item-name">{{ item.name }}</span>
         </div>
-        <span class="item-value">{{ item.value }}</span>
+        <span class="item-value">{{ item.value?item.value:0 }}</span>
       </div>
     </div>
   </div>
@@ -17,6 +17,10 @@
 export default {
   name: '',
   props: {
+    total:{
+      type:Object,
+      default:()=>{}
+    },
     deviceInfo: {
       type: Array,
       default: () => []
@@ -25,10 +29,10 @@ export default {
   data() {
     return {
       currentHoverNumber: 58,
-      list: [
+      curList: [
         {
           name: '收益',
-          key: 'connector_online',
+          key: 'incomeTotal',
           percentKey: 'connector_online_percent',
           lineColor: 'linear-gradient(90deg, rgba(13, 87, 144, 1) 0%, rgba(21, 153, 253, 1) 100%);',
           value: 0
@@ -44,7 +48,22 @@ export default {
       ]
     }
   },
-  watch: {},
+  watch: {
+    total:{
+      handler(n){
+        if(n){
+          let that=this
+          that.curList.forEach((item)=>{
+            item.value=that.total[item.key]
+          })
+        }
+       
+      },
+      deep: true, // 深度监听
+      immediate: true,
+
+    }
+  },
   mounted() {},
 
   methods: {

web/src/components/Home/Pv.vue

@@ -17,6 +17,10 @@
 export default {
   name: '',
   props: {
+    total: {
+      type: Object,
+      default: () => {}
+    },
     deviceInfo: {
       type: Array,
       default: () => []
@@ -27,14 +31,14 @@ export default {
       curList: [
         {
           name: '日发电量',
-          key: 'key1',
+          key: 'solarElectGen',
           lineColor: '#22E4FF',
           value: 0,
           d: 'kW·h'
         },
         {
           name: '日入网电量',
-          key: 'key2',
+          key: 'solarElectGrid',
           lineColor: '#0E68E4',
           value: 0,
           d: 'kW·h'
@@ -53,6 +57,18 @@ export default {
     }
   },
   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(() => {
@@ -73,7 +89,6 @@ export default {
       this.faultChart.resize()
     },
     processData(data, keys) {
-      console.log(data, 'dddddddddddddddddddddddddddd')
       data.sort((a, b) => {
         return new Date(a.date) - new Date(b.date)
       })
@@ -160,7 +175,6 @@ export default {
         series: this.lineChartData.ydata
       }
       option && faultChart.setOption(option)
-      console.log(this.lineChartData, 'this.lineChartData')
       window.addEventListener('resize', this.handleResize)
     }
   }

web/src/components/Home/onLine.vue

@@ -29,42 +29,42 @@ export default {
     return {
       list: [
         {
-          key: 'tianshu',
+          key: 'launchDate',
           value: 20,
           d: '天',
           label: '系统运行天数',
           class: 'item-1'
         },
         {
-          key: 'shouyi',
+          key: 'incomeTotal',
           value: 10,
           d: '万元',
           label: '累计收益',
           class: 'item-2'
         },
         {
-          key: 'shuliang',
+          key: 'solarDeviceNum',
           value: 20,
           d: '',
           label: '光伏设备数量',
           class: 'item-3'
         },
         {
-          key: 'shuliang',
+          key: '"stationNum',
           value: 20,
           d: '',
           label: '储能预制舱数量',
           class: 'item-4'
         },
         {
-          key: 'fadianliang',
+          key: 'solarElectGen',
           value: 20,
           d: '',
           label: '光伏设备累计发电量',
           class: 'item-5'
         },
         {
-          key: 'rongliang',
+          key: 'capacityTotal',
           value: 20,
           d: '',
           label: '储能总容量',

web/src/components/statisticalAnalysis/energyEchart.vue

@@ -274,9 +274,7 @@ export default {
     },
     initCharts() {
       this.chartOptions.forEach((option, index) => {
-        // Vue 2 的 $refs 在 v-for 中是数组，需要取 [0]
         const dom = this.$refs[`chartContainer${index}`][0]
-        console.log(dom, 'ddddddddddddddd')
         if (!dom) return
 
         const chart = this.$echarts.init(dom)
@@ -363,7 +361,6 @@ export default {
     },
     processData(keysList, dataKey, data) {
       const keys = keysList.map((item) => item.key)
-      console.log(keys, dataKey, data, 'dddddddddddddddddddddddddddd')
       data.sort((a, b) => {
         return new Date(a.date) - new Date(b.date)
       })
@@ -373,7 +370,6 @@ export default {
       keys.forEach((item, index) => {
         values[index] = data.map((dataValue) => dataValue[keys[index]])
       })
-      console.log(dates, values, 'dates')
       return {
         dates,
         values

web/src/views/sub/Home.vue

@@ -8,11 +8,15 @@
             <span class="linear-text">{{ item.title }}</span>
           </div>
         </div>
-        <component :is="item.componentId" :device-info="deviceInfo[item.infoKey]"></component>
+        <component
+          :is="item.componentId"
+          :device-info="deviceInfo[item.infoKey]"
+          :total="deviceInfo.allTotal"
+        ></component>
       </div>
     </div>
     <div class="tianditu">
-      <Map></Map>
+      <Map @changeStation="getCurrentStation"></Map>
     </div>
     <div class="content-right">
       <div v-for="(item, i) in rightList" :key="i" :class="`grid-item ${item.class}`">
@@ -22,7 +26,11 @@
             <span class="linear-text">{{ item.title }}</span>
           </div>
         </div>
-        <component :is="item.componentId" :device-info="deviceInfo[item.infoKey]"></component>
+        <component
+          :is="item.componentId"
+          :device-info="deviceInfo[item.infoKey]"
+          :total="deviceInfo.allTotal"
+        ></component>
       </div>
     </div>
   </div>
@@ -36,12 +44,13 @@ import Charge from '@/components/Home/Charge.vue'
 import Pv from '@/components/Home/Pv.vue'
 import Alarm from '@/components/Home/Alarm.vue'
 import Map from '@/components/Home/Map.vue'
-
+import { getReq, postReq } from '@/request/api'
 export default {
   name: 'Home',
-  components: {Map},
+  components: { Map },
   data() {
     return {
+      stationId: null,
       deviceInfo: {},
       list: [
         {
@@ -96,7 +105,8 @@ export default {
     }
   },
   async mounted() {
-    this.deviceInfo = {
+    await Promise.all([
+      (this.deviceInfo = {
         alarm: [
           {
             date: '2025-08-30',
@@ -307,11 +317,138 @@ export default {
             key1: '2',
             key2: '2'
           }
-      ]
+        ],
-    }
+        allTotal: {}
+      }),
+      this.getOnLineList(),
+      this.getStatTotalList(),
+      this.getStatDayList(1),
+      this.getStatDayList(2),
+      this.getStatDayList(3)
+    ])
   },
 
-  methods: {}
+  methods: {
+    getCurrentStation(e) {
+      console.log(e, 'getCurrentStation')
+      this.stationId = e
+    },
+    // 查询系统统计信息
+    async getOnLineList() {
+      try {
+        // token: 用户TOKEN
+        const res = await getReq({}, '/queryStatSystem')
+        if (res.code === 200) {
+          this.deviceInfo.onLine = res.data
+        } else {
+          throw res
+        }
+      } catch (error) {
+        this.deviceInfo.onLine = {}
+      }
+    },
+    // 查询系统累计统计信息
+    async getStatTotalList() {
+      try {
+        // token: 用户TOKEN
+        // date:日期
+        // station_id:场站ID，为0或不传查询所有场站总计
+        // category:类别，1:储能设备,2:充电设备,3:光伏设备,为0或不传查询所有类别总计
+        const query = {
+          // date:
+          // station_id:this.stationId
+          // category:0
+        }
+        const res = await postReq(query, '/queryStatTotal')
+        if (res.code === 200) {
+          this.deviceInfo.allTotal = res.data
+          this.deviceInfo.allTotal.incomeTotal=
+        this.deviceInfo.allTotal.incomeCharge+ this.deviceInfo.allTotal.incomeElect
+       
+        } else {
+          throw res
+        }
+      } catch (error) {
+        this.deviceInfo.allTotal = {
+
+          storageElectIn: 2,
+          storageElectOut: 5,
+          chargeElect: 4,
+          chargeNum: 5,
+          incomeCharge: 7,
+          incomeElect: 7,
+          solarElectGen: 7,
+          solarElectGrid: 7
+        }
+        this.deviceInfo.allTotal.incomeTotal=
+        this.deviceInfo.allTotal.incomeCharge+ this.deviceInfo.allTotal.incomeElect
+        
+      }
+    },
+    // 查询场站日统计信息
+    async getStatDayList(category) {
+      try {
+        // station_id: 场站ID
+        // category: 类别： 1：储能设备,2:充电设备,3:光伏设备
+        // start_date：开始日期，格式：yyyy-mm-dd
+        // end_date：结束日期，格式：yyyy-mm-dd
+        const query = {
+          stationId:this.stationId,
+          category,
+          // start_date:
+          // end_date:
+        }
+        const arr=[{
+          type:1,
+          label:'储能设备',
+          infoKey:'energy'
+        },
+        {
+          type:2,
+          label:'充电设备',
+          infoKey:'charge'
+        },
+        {
+          type:3,
+          label:'光伏设备',
+          infoKey:'pv'
+        },
+        ]
+        const res = await postReq(query, '/queryStatDayList')
+        if (res.code === 200) {
+          arr.forEach((item)=>{
+            this.deviceInfo[item.infoKey]=res.data
+          })
+        } else {
+          throw res
+        }
+      } catch (error) {
+        // this.deviceInfo.allStatDayList = []
+        // this.deviceInfo.allStatDayList = [
+        //   {
+        //     date: '2025-08-30',
+        //     storageElectIn: 2,
+        //     storageElectOut: 5,
+        //     chargeElect: 4,
+        //     chargeNum: 5,
+        //     incomeCharge: 7,
+        //     solarElectGen: 7,
+        //     solarElectGrid: 7
+        //   },
+        //   {
+        //     date: '2025-08-31',
+        //     storageElectIn: 3,
+        //     storageElectOut: 7,
+        //     chargeElect: 5,
+        //     chargeNum: 5,
+        //     incomeCharge: 4,
+        //     solarElectGen: 6,
+        //     solarElectGrid: 8
+        //   }
+        // ]
+      }
+    }
+  }
 }
 </script>
 
@@ -325,10 +462,9 @@ export default {
 }
 
 .tianditu {
-   width: calc(100% - 520px * 2) ;
+  width: calc(100% - 520px * 2);
   height: 100%;
   margin: 0px 15px;
-
 }
 
 .content-left,