重构

src/views/ems/dzjk/sbjk/ssyx/CnglqxChart.vue

@@ -6,7 +6,7 @@
     <div slot="header">
       <span class="card-title">PCS有功功率/PCS无功功率</span>
     </div>
-    <div style="height: 360px" id="cnglqxChart"/>
+    <div ref="chartRef" style="height: 360px" />
   </el-card>
 </template>
 
@@ -14,17 +14,23 @@
 <script>
 import * as echarts from "echarts";
 import resize from "@/mixins/ems/resize";
-import {storagePower} from "@/api/ems/dzjk";
+import { getPointConfigCurve } from "@/api/ems/site";
 
 export default {
   mixins: [resize],
+  props: {
+    displayData: {
+      type: Array,
+      default: () => []
+    }
+  },
   data() {
     return {
       chart: null,
     };
   },
   mounted() {
-    this.chart = echarts.init(document.querySelector("#cnglqxChart"));
+    this.chart = echarts.init(this.$refs.chartRef);
   },
   beforeDestroy() {
     if (!this.chart) {
@@ -35,56 +41,61 @@ export default {
   },
   methods: {
     init(siteId, timeRange) {
-      this.chart.showLoading();
-      const [startTime = '', endTime = ''] = timeRange;
-      storagePower(siteId, startTime, endTime)
+      const [startTime = "", endTime = ""] = timeRange;
+      const query = {
+        rangeType: "custom",
+        startTime: this.normalizeDateTime(startTime, false),
+        endTime: this.normalizeDateTime(endTime, true),
+        siteId
+      };
+      const rows = (this.displayData || []).filter(
+        (item) =>
+          item &&
+          item.useFixedDisplay !== 1 &&
+          [
+            "SBJK_SSYX__curvePcsActivePower",
+            "SBJK_SSYX__curvePcsReactivePower"
+          ].includes(item.fieldCode) &&
+          item.dataPoint
+      );
+      const tasks = rows.map((row) => {
+        const pointId = String(row.dataPoint || "").trim();
+        if (!pointId) return Promise.resolve(null);
+        return getPointConfigCurve({
+          ...query,
+          pointId
+        })
           .then((response) => {
-            this.setOption(response?.data?.pcsPowerList || []);
+            const list = response?.data || [];
+            return {
+              name: row.fieldName || row.fieldCode || pointId,
+              data: list
+                .map((item) => [
+                  this.parseToTimestamp(item.dataTime),
+                  Number(item.pointValue)
+                ])
+                .filter((item) => item[0] && !Number.isNaN(item[1]))
+            };
           })
-          .finally(() => {
-            this.chart.hideLoading();
-          });
-    },
-    setOption(data) {
-      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) => {
-                    return {
-                      value: i.pcsTotalActPower,
-                      year: i.dateDay || ''
-                    }
-                  }
-              )
-            },
-            {
-              type: "line",
-              name: `${element.deviceId}无功功率`,
-              areaStyle: {
-                // color:'#FFBD00'
-              },
-              data: (element.energyStoragePowList || []).map(
-                  (i) => {
-                    return {
-                      value: i.pcsTotalReactivePower,
-                      year: i.dateDay || ''
-                    }
-                  }
-              ),
-            }
-        );
+          .catch(() => null);
       });
+      Promise.all(tasks)
+        .then((series) => {
+          this.setOption((series || []).filter(Boolean));
+        });
+    },
+    normalizeDateTime(value, endOfDay) {
+      const raw = String(value || "").trim();
+      if (!raw) return "";
+      if (raw.includes(" ")) return raw;
+      return `${raw} ${endOfDay ? "23:59:59" : "00:00:00"}`;
+    },
+    parseToTimestamp(value) {
+      if (!value) return null;
+      const t = new Date(value).getTime();
+      return Number.isNaN(t) ? null : t;
+    },
+    setOption(seriesData = []) {
       this.chart && this.chart.setOption({
         legend: {
           left: "center",
@@ -102,26 +113,13 @@ export default {
           show: true,
           trigger: "axis",
           axisPointer: {
-            // 坐标轴指示器，坐标轴触发有效
-            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
-          },
-          formatter: (params) => {
-            if (params.length <= 0) return
-            let result = (params[0].data.year || '') + ' ' + params[0].name + '<div>'
-            params.forEach(item => {
-              const {color, seriesName, value} = item
-              result += `<div style="position: relative;padding-left:20px;line-height: 20px;">
-                <div style="position: absolute;top:50%;left:0;width:12px;height:12px;border-radius:100%;background: ${color};transform: translateY(-50%)"></div>
-                <span>${seriesName}</span><span style="margin-left:20px;font-weight: 700">${value}</span></div>`
-            })
-            result += '</div>'
-            return result
+            type: "cross",
           }
         },
         textStyle: {
           color: "#333333",
         },
-        xAxis: {type: "category", data: xdata},
+        xAxis: { type: "time" },
         yAxis: {
           type: "value",
         },
@@ -136,7 +134,16 @@ export default {
             end: 100,
           },
         ],
-        series,
+        series: seriesData.map((item) => ({
+          type: "line",
+          name: item.name,
+          showSymbol: false,
+          smooth: true,
+          areaStyle: {
+            opacity: 0.35
+          },
+          data: item.data
+        })),
       }, true);
     },
   },