From cacd939dd694dedb16d1d56bb20b5b13f82650f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E8=8F=9C?=
 <43331987+JiaLiBai@users.noreply.github.com>
Date: Tue, 1 Jul 2025 22:41:45 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A6=82=E7=8E=87=E7=BB=9F=E8=AE=A1-=E7=94=B5?=
 =?UTF-8?q?=E9=87=8F=E6=8C=87=E6=A0=87=E6=8E=A5=E5=8F=A3=E8=81=94=E8=B0=83?=
 =?UTF-8?q?=EF=BC=8C=E7=AB=99=E7=82=B9=E4=BF=A1=E6=81=AF6=E4=B8=AA?=
 =?UTF-8?q?=E6=96=B9=E5=9D=97=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/ems/dzjk.js                     |  9 +++
 src/components/Ems/ZdBaseInfo/index.vue |  4 +-
 src/views/ems/dzjk/tjbb/gltj/Dlzb.vue   | 97 +++++++++++++++----------
 3 files changed, 71 insertions(+), 39 deletions(-)

diff --git a/src/api/ems/dzjk.js b/src/api/ems/dzjk.js
index ad1dcc7..9e3cdc7 100644
--- a/src/api/ems/dzjk.js
+++ b/src/api/ems/dzjk.js
@@ -83,3 +83,12 @@ export function getAlarmDetailList({siteId, deviceType, alarmLevel, alarmStartTi
     method: 'get'
   })
 }
+
+// 概率统计
+//获取概率统计 电量指标接口
+export function getElectricData({siteId,startDate,endDate}) {
+  return request({
+    url: `/ems/statsReport/getElectricData?siteId=${siteId}&startDate=${startDate}&endDate=${endDate}`,
+    method: 'get'
+  })
+}
diff --git a/src/components/Ems/ZdBaseInfo/index.vue b/src/components/Ems/ZdBaseInfo/index.vue
index 0a4a346..e18693a 100644
--- a/src/components/Ems/ZdBaseInfo/index.vue
+++ b/src/components/Ems/ZdBaseInfo/index.vue
@@ -65,11 +65,13 @@ export default {
 </script>
 <style scoped lang="scss">
 .card{
-  width: 150px;
+  min-width: 150px;
   height: 96px;
   margin-right: 27px;
   border-bottom: 4px solid transparent;
   text-align: center;
+  box-sizing: border-box;
+  padding:0 10px;
   .info{
     color: #666666;
     line-height: 14px;
diff --git a/src/views/ems/dzjk/tjbb/gltj/Dlzb.vue b/src/views/ems/dzjk/tjbb/gltj/Dlzb.vue
index 39eb325..9d5c1bc 100644
--- a/src/views/ems/dzjk/tjbb/gltj/Dlzb.vue
+++ b/src/views/ems/dzjk/tjbb/gltj/Dlzb.vue
@@ -3,7 +3,7 @@
     <div slot="header">
       <span class="card-title">电量指标</span>
     </div>
-    <div class="card-main">
+    <div class="card-main" v-loading="loading">
       <!--    搜索栏-->
       <div class="select-container">
         <el-form :inline="true">
@@ -19,7 +19,7 @@
             </el-date-picker>
           </el-form-item>
           <el-form-item>
-            <el-button type="primary" @click="onSearch" native-type="button">搜索</el-button>
+            <el-button type="primary" @click="getData" native-type="button">搜索</el-button>
           </el-form-item>
           <el-form-item>
             <el-button @click="onReset" native-type="button">重置</el-button>
@@ -27,9 +27,9 @@
         </el-form>
       </div>
       <div class="total-data">
-        <div>总充电量:<span class="point">1390988kWh</span></div>
-        <div>总放电量:<span class="point">988kWh</span></div>
-        <div>综合效率:<span class="point">99%</span></div>
+        <div>总充电量:<span class="point">{{totalChargedCap | formatNumber}}kWh</span></div>
+        <div>总放电量:<span class="point">{{totalDisChargedCap | formatNumber}}kWh</span></div>
+        <div>综合效率:<span class="point">{{efficiency | formatNumber}}%</span></div>
       </div>
       <div id="dlzbChart" style="height: 310px"></div>
     </div>
@@ -39,8 +39,11 @@
 <script>
 import * as echarts from 'echarts'
 import resize from "@/mixins/ems/resize";
+import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
+import {getElectricData} from '@/api/ems/dzjk'
+import {formatDate} from '@/filters/ems'
 export default {
-  mixins: [resize],
+  mixins: [resize,getQuerySiteId],
   data() {
     return {
       pickerOptions:{
@@ -51,74 +54,92 @@ export default {
       defaultDateRange:[],//默认展示的时间
       dateRange:[],
       loading:false,
-      chart: null
-
+      chart: null,
+      totalChargedCap:'',
+      totalDisChargedCap:'',
+      efficiency:''
     }
   },
   methods: {
-    // 搜索
-    onSearch(){
-      this.getData()
-    },
     // 重置
     onReset(){
       this.dateRange=[]
       this.getData()
     },
-    getData(){
-      this.loading=true;
-      this.chart.showLoading()
-      //接口调用完成之后 设置图表、结束loading
-      this.setOption()
-      this.loading=false;
-      this.chart.hideLoading()
-    },
     setOption(data){
-      // const source = [['日期','充电量','放电量']]
-      // data.forEach(item=>{
-      //   source.push([item.ammeterDate, item.chargedCap,item.disChargedCap])
-      // })
+      const source = [['日期','充电量','放电量','效率']]
+      data.forEach(item=>{
+        source.push([item.ammeterDate, item.chargedCap,item.disChargedCap,item.dailyEfficiency])
+      })
       this.chart.setOption({
-        color:['#FFBD00','#3C81FF'],
+        color:['#FFBD00','#3C81FF','#05AEA3'],
         // legend: {
         //   left: 'right',
         //   bottom: '10',
         // },
         tooltip: {},
         xAxis: { type: 'category' },
-        yAxis: { type: 'value' },
+        yAxis: [{
+          type: 'value',
+          axisLine: {
+            lineStyle:{
+              color: '#333333',
+            },
+            onZero:false
+          }
+        },{
+          type: 'value',
+          axisLine: {
+            lineStyle:{
+              color: '#333333',
+            },
+            onZero:false
+          }
+        }],
         grid:{top:30},
         dataset:{
-          // source
-          source:[//格式
-            ['product','充电量','放电量'],
-            ['6/10',101,220],
-            ['6/11',210,390],
-            ['6/12',220,360],
-            ['6/13',520,340],
-            ['6/14',270,430],
-          ]
+          source
         },
         series: [
           {
+            yAxisIndex:0,
             type: 'bar',//柱状图
           },
           {
+            yAxisIndex:0,
             type: 'bar',//柱状图
           },
+          {
+            yAxisIndex:1,
+            type: 'line',//柱状图
+          },
         ]
       })
     },
-    initChart() {
+    getData(){
+      this.loading=true;
+      //接口调用完成之后 设置图表、结束loading
+      const [start='',end='']=this.dateRange || [];
+      const startDate=formatDate(start),endDate = formatDate(end)
+      getElectricData({siteId:this.siteId,startDate,endDate}).then(response => {
+        const {totalChargedCap='',totalDisChargedCap='',efficiency='',sevenDayDisChargeStats=[]}=response?.data || {}
+        this.setOption(sevenDayDisChargeStats)
+        this.totalChargedCap=totalChargedCap
+        this.totalDisChargedCap=totalDisChargedCap
+        this.efficiency=efficiency
+      }).finally(() => {
+        this.loading=false;
+      })
+    },
+    init(){
       this.chart = echarts.init(document.querySelector('#dlzbChart'));
+      this.onReset()
     }
   },
   mounted(){
     const now = new Date();
     const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
     this.defaultDateRange = [lastMonth, now];
-    this.initChart()
-    this.getData()
   },
   beforeDestroy() {
     if (!this.chart) {