重构

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

@@ -6,7 +6,7 @@
     <div slot="header">
       <span class="card-title">电池平均温度</span>
     </div>
-    <div style="height: 360px" id="dcpjwdChart" />
+    <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 { batteryAveTemp } 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("#dcpjwdChart"));
+    this.chart = echarts.init(this.$refs.chartRef);
   },
   beforeDestroy() {
     if (!this.chart) {
@@ -35,28 +41,47 @@ export default {
   },
   methods: {
     init(siteId,timeRange) {
-      this.chart.showLoading();
       const [startTime='', endTime=''] = timeRange;
-      batteryAveTemp(siteId,startTime,endTime)
+      const row = (this.displayData || []).find(
+        (item) =>
+          item &&
+          item.fieldCode === "SBJK_SSYX__curveBatteryAveTemp" &&
+          item.useFixedDisplay !== 1 &&
+          item.dataPoint
+      );
+      const pointId = String(row?.dataPoint || "").trim();
+      if (!pointId) {
+        this.setOption([]);
+        return;
+      }
+      getPointConfigCurve({
+        siteId,
+        pointId,
+        rangeType: "custom",
+        startTime: this.normalizeDateTime(startTime, false),
+        endTime: this.normalizeDateTime(endTime, true)
+      })
         .then((response) => {
-          this.setOption(response?.data?.batteryAveTempList || []);
-        })
-        .finally(() => {
-          this.chart.hideLoading();
+          const list = response?.data || [];
+          this.setOption(
+            list
+              .map((item) => [this.parseToTimestamp(item.dataTime), Number(item.pointValue)])
+              .filter((item) => item[0] && !Number.isNaN(item[1]))
+          );
         });
     },
-    setOption(data) {
-      let xdata = [],
-        ydata = [];
-      data.forEach((element) => {
-        xdata.push(element.createDate);
-        ydata.push(
-          {
-            value: element.batteryTemp,
-            year: element.dateDay
-          }
-        );
-      });
+    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(data = []) {
       this.chart && this.chart.setOption({
         legend: {
           left: "center",
@@ -74,26 +99,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",
         },
@@ -112,10 +124,12 @@ export default {
           {
             type: "line",
             name: `电池平均温度`,
+            showSymbol: false,
+            smooth: true,
             areaStyle: {
-              // color:'#FFBD00'
+              opacity: 0.35
             },
-            data: ydata,
+            data,
           },
         ],
       },true);