修改

src/views/home/operatingProfitComponents/totalOverview.vue

@@ -11,21 +11,22 @@
             </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>
+              <!-- 传递包含flag的factoryData给仪表盘组件 -->
+              <electricityGauge id="month" :detailData="factoryData"></electricityGauge>
             </div>
           </div>
           <div class="line" style="padding: 0px;">
-            <verticalBarChart>
-            </verticalBarChart>
-
+            <!-- 传递包含flag的factoryData给柱状图组件 -->
+            <verticalBarChart :detailData="factoryData"></verticalBarChart>
           </div>
         </div>
       </div>
@@ -43,55 +44,60 @@ 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() {      // 整合原始数据 + 计算flag
+      return {
+        completeRate: Number(this.totalData.proportion).toFixed(2),
+        diff: this.totalData.diffValue,
+        real: this.totalData.value,
+        target: this.totalData.targetValue,
+        thb: this.totalData.thb,
+        // ...rawData,
+        flag: this.getRateFlag(this.totalData.completed) // 新增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>