实时运行图标更新

2025-09-27 14:50:20 +08:00
parent 408ba489ca
commit b421d11bc2
5 changed files with 293 additions and 244 deletions
--- 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'
  })
 }
--- 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>
--- 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>
--- 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>
--- 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>