重构

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

@@ -105,10 +105,10 @@
         </el-card>
       </el-col>
       <el-col :xs="24" :sm="24" :lg="12">
-        <week-chart ref="weekChart"/>
+        <week-chart ref="weekChart" :display-data="runningDisplayData"/>
       </el-col>
       <el-col :xs="24" :sm="24" :lg="12">
-        <active-chart ref="activeChart"/>
+        <active-chart ref="activeChart" :display-data="runningDisplayData"/>
       </el-col>
     </el-row>
   </div>
@@ -133,6 +133,8 @@ export default {
       loading: false,
       baseInfoLoading: false,
       runningInfoLoading: false,
+      runningUpdateSpinning: false,
+      runningUpdateTimer: null,
       fallbackSjglData: [
         {
           title: "今日充电量（kWh）",
@@ -182,12 +184,11 @@ export default {
   },
   computed: {
     isBaseInfoLoading() {
-      const state = this.$data || {};
-      return !!(state.baseInfoLoading || state.loading);
+      return false;
     },
     isRunningInfoLoading() {
       const state = this.$data || {};
-      return !!(state.runningInfoLoading || state.loading);
+      return !!(state.runningInfoLoading || state.runningUpdateSpinning || state.loading);
     },
     tableData() {
       return this.runningInfo?.siteMonitorHomeAlarmVo || [];
@@ -227,6 +228,12 @@ export default {
       }));
     },
   },
+  beforeDestroy() {
+    if (this.runningUpdateTimer) {
+      clearTimeout(this.runningUpdateTimer);
+      this.runningUpdateTimer = null;
+    }
+  },
   methods: {
     setBaseInfoLoading(loading) {
       if (Object.prototype.hasOwnProperty.call(this.$data, "baseInfoLoading")) {
@@ -250,25 +257,73 @@ export default {
       this.$router.push({path: "/dzjk/gzgj", query: this.$route.query});
     },
     getBaseInfo() {
-      this.setBaseInfoLoading(true);
       return getSingleSiteBaseInfo(this.siteId).then((response) => {
         this.info = response?.data || {};
-      }).finally(() => {
-        this.setBaseInfoLoading(false);
       });
     },
     getRunningInfo() {
-      this.setRunningInfoLoading(true);
+      const hasOldData = Object.keys(this.runningInfo || {}).length > 0 || (this.runningDisplayData || []).length > 0;
+      if (!hasOldData) {
+        this.setRunningInfoLoading(true);
+      }
       return Promise.all([
         getDzjkHomeView(this.siteId),
         getProjectDisplayData(this.siteId),
       ]).then(([homeResponse, displayResponse]) => {
-        this.runningInfo = homeResponse?.data || {};
-        this.runningDisplayData = displayResponse?.data || [];
+        const nextRunningInfo = homeResponse?.data || {};
+        const nextRunningDisplayData = displayResponse?.data || [];
+        const changed = hasOldData && this.hasTotalRunningChanged(nextRunningInfo, nextRunningDisplayData);
+        this.runningInfo = nextRunningInfo;
+        this.runningDisplayData = nextRunningDisplayData;
+        if (changed) {
+          this.triggerRunningUpdateSpinner();
+        }
       }).finally(() => {
-        this.setRunningInfoLoading(false);
+        if (!hasOldData) {
+          this.setRunningInfoLoading(false);
+        }
       });
     },
+    triggerRunningUpdateSpinner() {
+      if (this.runningUpdateTimer) {
+        clearTimeout(this.runningUpdateTimer);
+      }
+      this.runningUpdateSpinning = true;
+      this.runningUpdateTimer = setTimeout(() => {
+        this.runningUpdateSpinning = false;
+        this.runningUpdateTimer = null;
+      }, 800);
+    },
+    hasTotalRunningChanged(nextRunningInfo, nextRunningDisplayData) {
+      const oldSnapshot = this.getTotalRunningSnapshot(this.runningInfo, this.runningDisplayData);
+      const newSnapshot = this.getTotalRunningSnapshot(nextRunningInfo, nextRunningDisplayData);
+      return JSON.stringify(oldSnapshot) !== JSON.stringify(newSnapshot);
+    },
+    getTotalRunningSnapshot(runningInfo, runningDisplayData) {
+      const snapshot = {};
+      const sectionData = (runningDisplayData || []).filter(item => item.sectionName === "总累计运行数据");
+      if (sectionData.length > 0) {
+        sectionData.forEach(item => {
+          const key = item.fieldCode || item.fieldName;
+          if (!key) return;
+          snapshot[`cfg:${key}`] = this.normalizeRunningCompareValue(item.fieldValue);
+        });
+        return snapshot;
+      }
+      this.fallbackSjglData.forEach(item => {
+        snapshot[`fallback:${item.attr}`] = this.normalizeRunningCompareValue(runningInfo?.[item.attr]);
+      });
+      snapshot["fallback:totalRevenue"] = this.normalizeRunningCompareValue(runningInfo?.totalRevenue);
+      return snapshot;
+    },
+    normalizeRunningCompareValue(value) {
+      if (value === null || value === undefined) return "";
+      if (typeof value === "number") return Number.isNaN(value) ? "" : value;
+      const text = String(value).trim();
+      if (text === "") return "";
+      const num = Number(text);
+      return Number.isNaN(num) ? text : num;
+    },
     init() {
       // 功率曲线
       this.$refs.activeChart.init(this.siteId);