重构

src/views/ems/dzjk/home/ActiveChart.vue

@@ -12,13 +12,18 @@
 import * as echarts from 'echarts'
 import resize from '@/mixins/ems/resize'
 import DateRangeSelect from '@/components/Ems/DateRangeSelect/index.vue'
-import {getProjectDisplayData} from '@/api/ems/dzjk'
 import {getPointConfigCurve} from '@/api/ems/site'
 import intervalUpdate from "@/mixins/ems/intervalUpdate";
 
 export default {
   mixins: [resize, intervalUpdate],
   components: {DateRangeSelect},
+  props: {
+    displayData: {
+      type: Array,
+      default: () => []
+    }
+  },
   data() {
     return {
       chart: null,
@@ -27,6 +32,13 @@ export default {
       isInit: true
     }
   },
+  watch: {
+    displayData() {
+      if (this.siteId && this.timeRange.length === 2) {
+        this.getGVQXData()
+      }
+    }
+  },
   mounted() {
     this.$nextTick(() => {
       this.initChart()
@@ -47,37 +59,34 @@ export default {
       this.isInit = false
     },
     getGVQXData() {
-      this.showLoading()
       const {siteId, timeRange} = this
-      getProjectDisplayData(siteId).then(response => {
-        const displayData = response?.data || []
-        const sectionRows = displayData.filter(item =>
-          item && item.sectionName === '当日功率曲线' && item.useFixedDisplay !== 1 && item.dataPoint
-        )
-        const tasks = sectionRows.map(row => {
-          const pointId = String(row.dataPoint || '').trim()
-          if (!pointId) return Promise.resolve(null)
-          return getPointConfigCurve({
-            siteId,
-            pointId,
-            pointType: 'data',
-            rangeType: 'custom',
-            startTime: this.normalizeDateTime(timeRange[0], false),
-            endTime: this.normalizeDateTime(timeRange[1], true)
-          }).then(curveResponse => {
-            const list = curveResponse?.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]))
-            }
-          }).catch(() => null)
-        })
-        return Promise.all(tasks)
-      }).then(series => {
+      const displayData = this.displayData || []
+      const sectionRows = displayData.filter(item =>
+        item && item.sectionName === '当日功率曲线' && item.useFixedDisplay !== 1 && item.dataPoint
+      )
+      const tasks = sectionRows.map(row => {
+        const pointId = String(row.dataPoint || '').trim()
+        if (!pointId) return Promise.resolve(null)
+        return getPointConfigCurve({
+          siteId,
+          pointId,
+          pointType: 'data',
+          rangeType: 'custom',
+          startTime: this.normalizeDateTime(timeRange[0], false),
+          endTime: this.normalizeDateTime(timeRange[1], true)
+        }).then(curveResponse => {
+          const list = curveResponse?.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]))
+          }
+        }).catch(() => null)
+      })
+      Promise.all(tasks).then(series => {
         this.setOption((series || []).filter(Boolean))
-      }).finally(() => this.hideLoading())
+      })
     },
     init(siteId) {
       //初始化 清空数据
@@ -91,12 +100,6 @@ export default {
     initChart() {
       this.chart = echarts.init(document.querySelector('#activeChart'))
     },
-    showLoading() {
-      this.chart && this.chart.showLoading()
-    },
-    hideLoading() {
-      this.chart && this.chart.hideLoading()
-    },
     normalizeDateTime(value, endOfDay) {
       const raw = String(value || '').trim()
       if (!raw) return ''