修改

src/views/home/salesVolumeAnalysisComponents/yearThreeRelatedMetrics.vue

@@ -10,7 +10,10 @@
               双镀成本·单位/万元
             </div>
             <div class="line">
-              <operatingSingleBar></operatingSingleBar>
+              <operatingSingleBar :detailData="{
+                ...(relatedTotal.双镀成本 || defaultData),
+                flag: getRateFlag((relatedTotal.双镀成本 || defaultData).completeRate)
+              }" />
             </div>
           </div>
           <div class="dashboard right">
@@ -18,7 +21,10 @@
               双镀均价·单位/万元
             </div>
             <div class="line">
-              <operatingSingleBar></operatingSingleBar>
+              <operatingSingleBar :detailData="{
+                ...(relatedTotal.双镀均价 || defaultData),
+                flag: getRateFlag((relatedTotal.双镀均价 || defaultData).completeRate)
+              }" />
             </div>
           </div>
           <div class="dashboard right">
@@ -26,7 +32,10 @@
               双镀毛利·单位/万元
             </div>
             <div class="line">
-              <operatingSingleBar></operatingSingleBar>
+              <operatingSingleBar :detailData="{
+                ...(relatedTotal.双镀毛利 || defaultData),
+                flag: getRateFlag((relatedTotal.双镀毛利 || defaultData).completeRate)
+              }" />
             </div>
           </div>
         </div>
@@ -44,56 +53,69 @@ import verticalBarChart from './verticalBarChart.vue'
 
 export default {
   name: 'ProductionStatus',
-  components: { Container, operatingSingleBar, verticalBarChart },
-  // mixins: [resize],
+  components: { Container, operatingSingleBar },
   props: {
-    itemData: {  // 接收父组件传递的设备数据数组
-      type: Array,
-      default: () => []  // 默认空数组，避免报错
+    relatedTotal: {
+      type: Object,
+      default: () => ({
+        双镀成本: { completeRate: 0, diff: 0, real: 0, target: 0, thb: 0 },
+        双镀均价: { completeRate: 0, diff: 0, real: 0, target: 0, thb: 0 },
+        双镀毛利: { completeRate: 0, diff: 0, real: 0, target: 0, thb: 0 },
+      })
     },
-    title: {  // 接收父组件传递的设备数据数组
+    title: {
       type: String,
-      default: () => ''  // 默认空数组，避免报错
-    },
-    month: {  // 接收父组件传递的设备数据数组
-      type: String,
-      default: () => ''  // 默认空数组，避免报错
+      default: ''
     },
   },
   data() {
     return {
       chart: null,
-
+      // 兜底数据：防止字段缺失时报错
+      defaultData: {
+        completeRate: 0,
+        diff: 0,
+        real: 0,
+        target: 0,
+        thb: 0
+      }
     }
   },
   watch: {
-    itemData: {
-      handler(newValue, oldValue) {
-        // this.updateChart()
+    relatedTotal: {
+      handler(newValue) {
+        this.updateChart()
       },
-      deep: true // 若对象内属性变化需触发，需加 deep: true
+      immediate: true, // 初始化时立即执行
+      deep: true
     }
   },
-  // 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())
+    // 初始化图表
+    this.$nextTick(() => this.updateChart())
   },
   methods: {
+    /**
+     * 判断完成率对应的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 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
+    },
+
+    /**
+     * 图表更新方法：可在这里补充全局的图表刷新逻辑
+     * 若子组件内部已监听 chartData 变化，此方法可留空或补充额外逻辑
+     */
+    updateChart() {
+      console.log('数据更新，当前relatedMon:', this.relatedTotal)
+      // 打印各维度的flag值，方便调试
+      // console.log('销量flag:', this.getRateFlag(this.relatedTotal.销量.completeRate))
+      // console.log('成本flag:', this.getRateFlag(this.relatedTotal.成本.completeRate))
+      // console.log('运费flag:', this.getRateFlag(this.relatedTotal.运费.completeRate))
+    }
   }
 }
 </script>