From b421d11bc2a54a258b145c1bf1ed2057f6ae43f7 Mon Sep 17 00:00:00 2001
From: baicai <18221243570@163.com>
Date: Sat, 27 Sep 2025 14:50:20 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E6=97=B6=E8=BF=90=E8=A1=8C=E5=9B=BE?=
 =?UTF-8?q?=E6=A0=87=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/ems/dzjk.js                           |   6 +-
 src/views/ems/dzjk/sbjk/ssyx/CnglqxChart.vue  | 150 ++++++++++--------
 src/views/ems/dzjk/sbjk/ssyx/DcpjsocChart.vue | 127 ++++++++-------
 src/views/ems/dzjk/sbjk/ssyx/DcpjwdChart.vue  | 125 ++++++++-------
 src/views/ems/dzjk/sbjk/ssyx/PocpjwdChart.vue | 129 ++++++++-------
 5 files changed, 293 insertions(+), 244 deletions(-)

diff --git a/src/api/ems/dzjk.js b/src/api/ems/dzjk.js
index 47b89e2..2662ffa 100644
--- a/src/api/ems/dzjk.js
+++ b/src/api/ems/dzjk.js
@@ -146,10 +146,10 @@ export function storagePower(siteId) {
     method: 'get'
   })
 }
-//poc平均温度
-export function stackAveTemp(siteId) {
+//poc温度
+export function pcsMaxTemp(siteId) {
   return request({
-    url: `/ems/siteMonitor/runningGraph/stackAveTemp?siteId=${siteId}`,
+    url: `/ems/siteMonitor/runningGraph/pcsMaxTemp?siteId=${siteId}`,
     method: 'get'
   })
 }
diff --git a/src/views/ems/dzjk/sbjk/ssyx/CnglqxChart.vue b/src/views/ems/dzjk/sbjk/ssyx/CnglqxChart.vue
index ce7dd5c..ec46f10 100644
--- a/src/views/ems/dzjk/sbjk/ssyx/CnglqxChart.vue
+++ b/src/views/ems/dzjk/sbjk/ssyx/CnglqxChart.vue
@@ -1,107 +1,125 @@
-
 <template>
-  <el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
+  <el-card
+    shadow="always"
+    class="common-card-container common-card-container-body-no-padding"
+  >
     <div slot="header">
-      <span class="card-title">储能功率曲线</span>
+      <span class="card-title">PCS有功功率/PCS无功功率</span>
     </div>
-    <div style="height: 360px" id="cnglqxChart"/>
+    <div style="height: 360px" id="cnglqxChart" />
   </el-card>
 </template>
 
 <style scoped lang="scss"></style>
 <script>
-import * as echarts from 'echarts'
-import resize from '@/mixins/ems/resize'
-import {formatDate} from "@/filters/ems";
-import {storagePower} from '@/api/ems/dzjk'
+import * as echarts from "echarts";
+import resize from "@/mixins/ems/resize";
+import { formatDate } from "@/filters/ems";
+import { storagePower } from "@/api/ems/dzjk";
 
 export default {
   mixins: [resize],
   data() {
     return {
-      chart: null
-    }
+      chart: null,
+    };
   },
   mounted() {
-    this.chart = echarts.init(document.querySelector('#cnglqxChart'))
+    this.chart = echarts.init(document.querySelector("#cnglqxChart"));
   },
   beforeDestroy() {
     if (!this.chart) {
-      return
+      return;
     }
-    this.chart.dispose()
-    this.chart = null
+    this.chart.dispose();
+    this.chart = null;
   },
   methods: {
-    init(siteId){
-      this.chart.showLoading()
-      const x = []
-      const data1 =[],data2 =[]
-      storagePower(siteId).then(response => {
-        const source = response?.data?.energyStoragePowList || []
-        source.forEach(item=>{
-          x.push(formatDate(item.createDate,false,true))
-          data1.push(item.pcsTotalActPower)
-          data2.push(item.pcsTotalReactivePower)
+    init(siteId) {
+      this.chart.showLoading();
+      const x = [];
+      const data1 = [],
+        data2 = [];
+      storagePower(siteId)
+        .then((response) => {
+          this.setOption(response?.data?.pcsPowerList || []);
         })
-        this.setOption(x,data1,data2)
-      }).finally(()=>{
-        this.chart.hideLoading()
-      })
+        .finally(() => {
+          this.chart.hideLoading();
+        });
     },
-    setOption(x,data1,data2) {
+    setOption(data) {
+      // data=[{deviceId:'pcs1',energyStoragePowList:[{createDate,deviceId,pcsTotalActPower,pcsTotalReactivePower}]}]
+      let xdata = [],
+        series = [];
+      data.forEach((element, index) => {
+        if (index === 0) {
+          xdata = (element.energyStoragePowList || []).map((i) => i.createDate);
+        }
+        series.push(
+          {
+            type: "line",
+            name: `${element.deviceId}有功功率`,
+            areaStyle: {
+              // color:'#FFBD00'
+            },
+            data: (element.energyStoragePowList || []).map(
+              (i) => i.pcsTotalActPower
+            ),
+          },
+          {
+            type: "line",
+            name: `${element.deviceId}无功功率`,
+            areaStyle: {
+              // color:'#FFBD00'
+            },
+            data: (element.energyStoragePowList || []).map(
+              (i) => i.pcsTotalReactivePower
+            ),
+          }
+        );
+      });
       this.chart.setOption({
-        color:['#FFBD00','#3C81FF'],
         legend: {
-          left: 'center',
-          top: '10',
+          left: "center",
+          top: "5",
+          itemWidth: 10,
+          itemHeight: 5,
+          textStyle: {
+            fontSize: 9,
+          },
         },
         grid: {
-          containLabel: true
+          containLabel: true,
         },
         tooltip: {
-          trigger: 'axis',
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-          }
+          trigger: "axis",
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+          },
         },
-        textStyle:{
-          color:"#333333",
+        textStyle: {
+          color: "#333333",
         },
-        xAxis: {type:'category',data:x},
+        xAxis: { type: "category", data: xdata },
         yAxis: {
-          type: 'value',
+          type: "value",
         },
         dataZoom: [
           {
-            type: 'inside',
+            type: "inside",
             start: 0,
-            end: 100
+            end: 100,
           },
           {
             start: 0,
-            end: 100
-          }
+            end: 100,
+          },
         ],
-        series: [
-          {
-            name:'PCS实时有功功率',
-            type: 'line',
-            areaStyle: {
-              color:'#FFBD00'
-            },
-            data: data1,
-          },{
-            name:'PCS实时无功功率',
-            type: 'line',
-            areaStyle: {
-              color: '#3C81FF'
-            },
-            data: data2
-          }]
-      })
-    }
-  }
-}
-
+        series,
+      });
+    },
+  },
+};
 </script>
diff --git a/src/views/ems/dzjk/sbjk/ssyx/DcpjsocChart.vue b/src/views/ems/dzjk/sbjk/ssyx/DcpjsocChart.vue
index bc737a2..4ed6d39 100644
--- a/src/views/ems/dzjk/sbjk/ssyx/DcpjsocChart.vue
+++ b/src/views/ems/dzjk/sbjk/ssyx/DcpjsocChart.vue
@@ -1,99 +1,106 @@
-
 <template>
-  <el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
+  <el-card
+    shadow="always"
+    class="common-card-container common-card-container-body-no-padding"
+  >
     <div slot="header">
-      <span class="card-title">电池平均SOC</span>
+      <span class="card-title">平均SOC</span>
     </div>
-    <div style="height: 360px" id="dcpjsocChart"/>
+    <div style="height: 360px" id="dcpjsocChart" />
   </el-card>
 </template>
 
 <style scoped lang="scss"></style>
 <script>
-import * as echarts from 'echarts'
-import resize from '@/mixins/ems/resize'
-import {formatDate} from "@/filters/ems";
-import {batteryAveSoc} from '@/api/ems/dzjk'
+import * as echarts from "echarts";
+import resize from "@/mixins/ems/resize";
+import { formatDate } from "@/filters/ems";
+import { batteryAveSoc } from "@/api/ems/dzjk";
 export default {
   mixins: [resize],
   data() {
     return {
-      chart: null
-    }
+      chart: null,
+    };
   },
   mounted() {
-    this.chart = echarts.init(document.querySelector('#dcpjsocChart'))
+    this.chart = echarts.init(document.querySelector("#dcpjsocChart"));
   },
   beforeDestroy() {
     if (!this.chart) {
-      return
+      return;
     }
-    this.chart.dispose()
-    this.chart = null
+    this.chart.dispose();
+    this.chart = null;
   },
   methods: {
-    init(siteId){
-      this.chart.showLoading()
-      const x = []
-      const data =[]
-      batteryAveSoc(siteId).then(response => {
-        const source = response?.data?.batteryAveSOCList || []
-        source.forEach(item=>{
-          x.push(formatDate(item.createDate,false,true))
-          data.push(item.batterySOC)
+    init(siteId) {
+      this.chart.showLoading();
+      batteryAveSoc(siteId)
+        .then((response) => {
+          this.setOption(response?.data?.batteryAveSOCList || []);
         })
-        this.setOption(x,data)
-      }).finally(()=>{
-        this.chart.hideLoading()
-      })
+        .finally(() => {
+          this.chart.hideLoading();
+        });
     },
-    setOption(x,data) {
-      this.chart.setOption({
-        color:['#FFBD00','#3C81FF'],
-        // legend: {
-        //   left: 'center',
-        //   bottom: '10',
-        // },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-          }
+    setOption(data) {
+      let xdata = [],
+        ydata = [];
+      data.forEach((element) => {
+        xdata.push(element.createDate);
+        ydata.push(element.batterySOC);
+      });
+      xdata = this.chart.setOption({
+        legend: {
+          left: "center",
+          top: "5",
+          itemWidth: 10,
+          itemHeight: 5,
+          textStyle: {
+            fontSize: 9,
+          },
         },
         grid: {
-          containLabel: true
+          containLabel: true,
         },
-        textStyle:{
-          color:"#333333",
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+          },
         },
-        xAxis: {type:'category',data:x},
+        textStyle: {
+          color: "#333333",
+        },
+        xAxis: { type: "category", data: xdata },
         yAxis: {
-          type: 'value',
+          type: "value",
         },
         dataZoom: [
           {
-            type: 'inside',
+            type: "inside",
             start: 0,
-            end: 100
+            end: 100,
           },
           {
             start: 0,
-            end: 100
-          }
+            end: 100,
+          },
         ],
         series: [
           {
-            name:'电池平均SOC',
-            data: data,
-            type: 'line',
+            type: "line",
+            name: `平均SOC`,
             areaStyle: {
-              color:'#FFBD00'
-            }
-
-          }]
-      })
-    }
-  }
-}
-
+              // color:'#FFBD00'
+            },
+            data: ydata,
+          },
+        ],
+      });
+    },
+  },
+};
 </script>
diff --git a/src/views/ems/dzjk/sbjk/ssyx/DcpjwdChart.vue b/src/views/ems/dzjk/sbjk/ssyx/DcpjwdChart.vue
index 04900ac..78ab03f 100644
--- a/src/views/ems/dzjk/sbjk/ssyx/DcpjwdChart.vue
+++ b/src/views/ems/dzjk/sbjk/ssyx/DcpjwdChart.vue
@@ -1,99 +1,110 @@
-
 <template>
-  <el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
+  <el-card
+    shadow="always"
+    class="common-card-container common-card-container-body-no-padding"
+  >
     <div slot="header">
       <span class="card-title">电池平均温度</span>
     </div>
-    <div style="height: 360px" id="dcpjwdChart"/>
+    <div style="height: 360px" id="dcpjwdChart" />
   </el-card>
 </template>
 
 <style scoped lang="scss"></style>
 <script>
-import * as echarts from 'echarts'
-import resize from '@/mixins/ems/resize'
-import {formatDate} from "@/filters/ems";
-import {batteryAveTemp} from '@/api/ems/dzjk'
+import * as echarts from "echarts";
+import resize from "@/mixins/ems/resize";
+import { formatDate } from "@/filters/ems";
+import { batteryAveTemp } from "@/api/ems/dzjk";
 
 export default {
   mixins: [resize],
   data() {
     return {
-      chart: null
-    }
+      chart: null,
+    };
   },
   mounted() {
-    this.chart = echarts.init(document.querySelector('#dcpjwdChart'))
+    this.chart = echarts.init(document.querySelector("#dcpjwdChart"));
   },
   beforeDestroy() {
     if (!this.chart) {
-      return
+      return;
     }
-    this.chart.dispose()
-    this.chart = null
+    this.chart.dispose();
+    this.chart = null;
   },
   methods: {
-    init(siteId){
-      this.chart.showLoading()
-      const x = []
-      const data1 =[],data2 =[]
-      batteryAveTemp(siteId).then(response => {
-        const source = response?.data?.batteryAveTempList || []
-        source.forEach(item=>{
-          x.push(formatDate(item.createDate,false,true))
-          data1.push(item.batteryTemp)
+    init(siteId) {
+      this.chart.showLoading();
+      const x = [];
+      const data1 = [],
+        data2 = [];
+      batteryAveTemp(siteId)
+        .then((response) => {
+          this.setOption(response?.data?.batteryAveTempList || []);
         })
-        this.setOption(x,data1,data2)
-      }).finally(()=>{
-        this.chart.hideLoading()
-      })
+        .finally(() => {
+          this.chart.hideLoading();
+        });
     },
-    setOption(x,data) {
-      this.chart.setOption({
-        color:['#3C81FF'],
-        // legend: {
-        //   left: 'center',
-        //   bottom: '10',
-        // },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-          }
+    setOption(data) {
+      let xdata = [],
+        ydata = [];
+      data.forEach((element) => {
+        xdata.push(element.createDate);
+        ydata.push(element.batteryTemp);
+      });
+      xdata = this.chart.setOption({
+        legend: {
+          left: "center",
+          top: "5",
+          itemWidth: 10,
+          itemHeight: 5,
+          textStyle: {
+            fontSize: 9,
+          },
         },
         grid: {
-          containLabel: true
+          containLabel: true,
         },
-        textStyle:{
-          color:"#333333",
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+          },
         },
-        xAxis: {type:'category',data:x},
+        textStyle: {
+          color: "#333333",
+        },
+        xAxis: { type: "category", data: xdata },
         yAxis: {
-          type: 'value',
+          type: "value",
         },
         dataZoom: [
           {
-            type: 'inside',
+            type: "inside",
             start: 0,
-            end: 100
+            end: 100,
           },
           {
             start: 0,
-            end: 100
-          }
+            end: 100,
+          },
         ],
         series: [
           {
-            name:'电池平均温度',
-            data: data,
-            type: 'line',
+            type: "line",
+            name: `电池平均温度`,
             areaStyle: {
-              color:'#3C81FF'
+              // color:'#FFBD00'
             },
-          }]
-      })
-    }
-  }
-}
-
+            data: ydata,
+          },
+        ],
+      });
+    },
+  },
+};
 </script>
diff --git a/src/views/ems/dzjk/sbjk/ssyx/PocpjwdChart.vue b/src/views/ems/dzjk/sbjk/ssyx/PocpjwdChart.vue
index 4294047..8b67734 100644
--- a/src/views/ems/dzjk/sbjk/ssyx/PocpjwdChart.vue
+++ b/src/views/ems/dzjk/sbjk/ssyx/PocpjwdChart.vue
@@ -1,96 +1,109 @@
-
 <template>
-  <el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
+  <el-card
+    shadow="always"
+    class="common-card-container common-card-container-body-no-padding"
+  >
     <div slot="header">
-      <span class="card-title">PCS平均温度</span>
+      <span class="card-title">PCS最高温度</span>
     </div>
-    <div style="height: 360px" id="pocpjwdChart"/>
+    <div style="height: 360px" id="pocpjwdChart" />
   </el-card>
 </template>
 
 <style scoped lang="scss"></style>
 <script>
-import * as echarts from 'echarts'
-import resize from '@/mixins/ems/resize'
-import {formatDate} from "@/filters/ems";
-import {stackAveTemp} from '@/api/ems/dzjk'
+import * as echarts from "echarts";
+import resize from "@/mixins/ems/resize";
+import { formatDate } from "@/filters/ems";
+import { pcsMaxTemp } from "@/api/ems/dzjk";
 
 export default {
   mixins: [resize],
   data() {
     return {
-      chart: null
-    }
+      chart: null,
+    };
   },
   mounted() {
-    this.chart = echarts.init(document.querySelector('#pocpjwdChart'))
+    this.chart = echarts.init(document.querySelector("#pocpjwdChart"));
   },
   beforeDestroy() {
     if (!this.chart) {
-      return
+      return;
     }
-    this.chart.dispose()
-    this.chart = null
+    this.chart.dispose();
+    this.chart = null;
   },
   methods: {
-    init(siteId){
-      this.chart.showLoading()
-      const x = []
-      const data =[]
-      stackAveTemp(siteId).then(response => {
-        const source = response?.data?.stackAveTempList || []
-        source.forEach(item=>{
-          x.push(formatDate(item.createDate,false,true))
-          data.push(item.temp)
+    init(siteId) {
+      this.chart.showLoading();
+      const x = [];
+      const data = [];
+      pcsMaxTemp(siteId)
+        .then((response) => {
+          this.setOption(response?.data?.pcsMaxTempList || []);
         })
-        this.setOption(x,data)
-      }).finally(()=>{
-        this.chart.hideLoading()
-      })
+        .finally(() => {
+          this.chart.hideLoading();
+        });
     },
-    setOption(x,data) {
+    setOption(data) {
+      let xdata = [],
+        series = [];
+      data.forEach((element, index) => {
+        if (index === 0) {
+          xdata = (element.maxTempVoList || []).map((i) => i.createDate);
+        }
+        series.push({
+          type: "line",
+          name: `${element.deviceId}最高温度`,
+          areaStyle: {
+            // color:'#FFBD00'
+          },
+          data: (element.maxTempVoList || []).map((i) => i.temp),
+        });
+      });
       this.chart.setOption({
-        color:['#FFBD00','#3C81FF'],
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-          }
+        legend: {
+          left: "center",
+          top: "5",
+          itemWidth: 10,
+          itemHeight: 5,
+          textStyle: {
+            fontSize: 9,
+          },
         },
         grid: {
-          containLabel: true
+          containLabel: true,
         },
-        textStyle:{
-          color:"#333333",
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+          },
         },
-        xAxis: {type:'category',data:x},
+        textStyle: {
+          color: "#333333",
+        },
+        xAxis: { type: "category", data: xdata },
         yAxis: {
-          type: 'value',
+          type: "value",
         },
         dataZoom: [
           {
-            type: 'inside',
+            type: "inside",
             start: 0,
-            end: 100
+            end: 100,
           },
           {
             start: 0,
-            end: 100
-          }
+            end: 100,
+          },
         ],
-        series: [
-          {
-            name:'PCS平均温度',
-            data: data,
-            type: 'line',
-            areaStyle: {
-              color:'#FFBD00'
-            }
-
-          }]
-      })
-    }
-  }
-}
-
+        series,
+      });
+    },
+  },
+};
 </script>