修改

src/views/home/netPriceAnalysisComponents/totalOverview.vue

@@ -11,19 +11,20 @@
             </div>
             <div class="number">
               <div class="yield">
-                90%
+                {{ formatRate(factoryData?.completeRate) }}%
               </div>
               <div class="mom">
-                环比10%
-                <img class="arrow" src="../../../assets/img/downArrow.png" alt="">
+                环比{{ formatRate(factoryData?.thb) }}%
+                <img v-if="factoryData?.thb >= 0" class="arrow" src="../../../assets/img/topArrow.png" alt="">
+                <img v-else class="arrow" src="../../../assets/img/downArrow.png" alt="">
               </div>
             </div>
             <div class="electricityGauge">
-              <electricityGauge id="totalGauge"></electricityGauge>
+              <electricityGauge id="year" :detailData="factoryData"></electricityGauge>
             </div>
           </div>
           <div class="line" style="padding: 0px;">
-            <verticalBarChart>
+            <verticalBarChart :detailData="factoryData">
             </verticalBarChart>
 
           </div>
@@ -43,55 +44,75 @@ import verticalBarChart from './verticalBarChart.vue'
 export default {
   name: 'ProductionStatus',
   components: { Container, electricityGauge, verticalBarChart },
-  // mixins: [resize],
   props: {
-    itemData: {  // 接收父组件传递的设备数据数组
-      type: Array,
-      default: () => []  // 默认空数组，避免报错
+    totalData: {
+      type: Object,
+      default: () => ({})
     },
-    title: {  // 接收父组件传递的设备数据数组
+    title: {
       type: String,
-      default: () => ''  // 默认空数组，避免报错
+      default: ''
     },
-    month: {  // 接收父组件传递的设备数据数组
+    month: {
       type: String,
-      default: () => ''  // 默认空数组，避免报错
+      default: ''
     },
   },
   data() {
     return {
       chart: null,
-
     }
   },
-  watch: {
-    itemData: {
-      handler(newValue, oldValue) {
-        // this.updateChart()
-      },
-      deep: true // 若对象内属性变化需触发，需加 deep: true
+  computed: {
+    /**
+     * 自动提取monData中的工厂数据，并新增flag字段
+     */
+    factoryData() {
+      const factoryKeys = Object.keys(this.totalData);
+      if (factoryKeys.length === 0) {
+        // 无数据时返回兜底对象（包含flag）
+        return {
+          completeRate: 0,
+          diff: 0,
+          real: 0,
+          target: 0,
+          thb: 0,
+          flag: 0 // 兜底flag
+        };
+      }
+      const firstKey = factoryKeys[0];
+      const rawData = this.totalData[firstKey];
+      // 整合原始数据 + 计算flag
+      return {
+        completeRate: 0,
+        diff: 0,
+        real: 0,
+        target: 0,
+        thb: 0,
+        ...rawData,
+        flag: this.getRateFlag(rawData.completeRate) // 新增flag字段
+      };
     }
   },
-  // computed: {
-  //   // 处理排序：包含“总成本”的项放前面，其余项按原顺序排列
-  //   sortedItemData() {
-  //     // 过滤出包含“总成本”的项（不区分大小写）
-  //     const totalCostItems = this.itemData.filter(item =>
-  //       item.name && item.name.includes('总成本')
-  //     );
-  //     // 过滤出不包含“总成本”的项
-  //     const otherItems = this.itemData.filter(item =>
-  //       !item.name || !item.name.includes('总成本')
-  //     );
-  //     // 合并：总成本项在前，其他项在后
-  //     return [...totalCostItems, ...otherItems];
-  //   }
-  // },
-  mounted() {
-    // 初始化图表（若需展示图表，需在模板中添加对应 DOM）
-    // this.$nextTick(() => this.updateChart())
-  },
   methods: {
+    /**
+     * 格式化百分比数值：处理空值/非数字，兜底为0
+     */
+    formatRate(value) {
+      if (isNaN(value) || value === null || value === undefined) {
+        return 0;
+      }
+      return value;
+    },
+    /**
+     * 判断完成率对应的flag值（<100为0，≥100为1）
+     * @param {number} rate 完成率（原始值，如89代表89%）
+     * @returns {0|1} flag值
+     */
+    getRateFlag(rate) {
+      if (isNaN(rate) || rate === null || rate === undefined) return 0;
+      return rate >= 100 ? 1 : 0;
+    }
   }
 }
 </script>
@@ -156,7 +177,7 @@ export default {
   }
 
   .mom {
-    width: 97px;
+    // width: 97px;
     height: 18px;
     font-family: PingFangSC, PingFang SC;
     font-weight: 400;