修改

src/views/home/fullCostAnalysisComponents/relatedIndicatorsAnalysis.vue

@@ -1,6 +1,7 @@
 <template>
   <div style="flex: 1">
-    <Container :name="title" icon="cockpitItemIcon" size="opLargeBg" topSize="large">
+    <Container :isShowTab="true" :name="title" icon="cockpitItemIcon" size="opLargeBg" topSize="large"
+      @tabChange="handleChange">
       <!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
       <div class="kpi-content" style="padding: 14px 16px; display: flex; width: 100%;">
         <!-- 新增：topItem 专属包裹容器，统一控制样式和布局 -->
@@ -10,7 +11,10 @@
               制造成本·单位/万元
             </div>
             <div class="line">
-              <operatingSingleBar></operatingSingleBar>
+              <operatingSingleBar :detailData="{
+  ...(relatedDetailData.制造成本 || defaultData),
+  flag: getRateFlag((relatedDetailData.制造成本 || defaultData).completeRate)
+              }" />
             </div>
           </div>
           <div class="dashboard right">
@@ -18,7 +22,10 @@
               财务费用·单位/万元
             </div>
             <div class="line">
-              <operatingSingleBar></operatingSingleBar>
+              <operatingSingleBar :detailData="{
+  ...(relatedDetailData.财务费用 || defaultData),
+  flag: getRateFlag((relatedDetailData.财务费用 || defaultData).completeRate)
+              }" />
             </div>
           </div>
           <div class="dashboard right">
@@ -26,7 +33,10 @@
               销售费用·单位/万元
             </div>
             <div class="line">
-              <operatingSingleBar></operatingSingleBar>
+              <operatingSingleBar :detailData="{
+  ...(relatedDetailData.销售费用 || defaultData),
+  flag: getRateFlag((relatedDetailData.销售费用 || defaultData).completeRate)
+              }" />
             </div>
           </div>
           <div class="dashboard right">
@@ -34,7 +44,10 @@
               管理费用·单位/万元
             </div>
             <div class="line">
-              <operatingSingleBar></operatingSingleBar>
+              <operatingSingleBar :detailData="{
+  ...(relatedDetailData.管理费用 || defaultData),
+  flag: getRateFlag((relatedDetailData.管理费用 || defaultData).completeRate)
+              }" />
             </div>
           </div>
           <div class="dashboard right">
@@ -42,7 +55,10 @@
               运费·单位/万元
             </div>
             <div class="line">
-              <operatingSingleBar></operatingSingleBar>
+              <operatingSingleBar :detailData="{
+  ...(relatedDetailData.运费 || defaultData),
+  flag: getRateFlag((relatedDetailData.运费 || defaultData).completeRate)
+              }" />
             </div>
           </div>
         </div>
@@ -53,63 +69,81 @@
 <script>
 import Container from '../components/container.vue'
 import operatingSingleBar from './operatingSingleBar.vue'
-import verticalBarChart from './verticalBarChart.vue'
 
 // import * as echarts from 'echarts'
 // import rawItem from './raw-Item.vue'
 
 export default {
   name: 'ProductionStatus',
-  components: { Container, operatingSingleBar, verticalBarChart },
-  // mixins: [resize],
+  components: { Container, operatingSingleBar },
   props: {
-    itemData: {  // 接收父组件传递的设备数据数组
-      type: Array,
-      default: () => []  // 默认空数组，避免报错
+    relatedData: {
+      type: Object,
+      default: () => ({
+        relatedMon: {}, // 兜底月度数据
+        relatedTotal: {} // 兜底累计数据
+      })
     },
-    title: {  // 接收父组件传递的设备数据数组
+    title: {
       type: String,
-      default: () => ''  // 默认空数组，避免报错
+      default: ''
     },
-    month: {  // 接收父组件传递的设备数据数组
+    month: {
       type: String,
-      default: () => ''  // 默认空数组，避免报错
+      default: ''
     },
   },
   data() {
     return {
       chart: null,
-
+      // 关键优化：初始化时直接赋值为月度数据（relatedMon）
+      relatedDetailData: this.relatedData.relatedMon || {},
+      defaultData: {
+        completeRate: 0,
+        diff: 0,
+        real: 0,
+        target: 0,
+        thb: 0
+      }
     }
   },
   watch: {
+    // 监听 relatedData 变化（异步加载场景），同步更新月度数据
+    relatedData: {
+      handler(newVal) {
+        this.relatedDetailData = newVal.relatedMon || {};
+      },
+      immediate: true,
+      deep: true
+    },
     itemData: {
       handler(newValue, oldValue) {
-        // this.updateChart()
+        // 保留原有逻辑（若有需要）
       },
-      deep: true // 若对象内属性变化需触发，需加 deep: 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())
+    // 无需额外操作，初始化数据已赋值
   },
   methods: {
+    handleRoute(path) {
+      this.$router.push({
+        path: path
+      })
+    },
+    getRateFlag(rate) {
+      if (isNaN(rate) || rate === null || rate === undefined) return 0;
+      return +(rate >= 100 || rate === 0);
+    },
+    handleChange(value) {
+      console.log('value', value, this.relatedData);
+      if (value === 'month') {
+        this.relatedDetailData = this.relatedData.relatedMon || {};
+      } else {
+        this.relatedDetailData = this.relatedData.relatedTotal || {};
+      }
+    }
   }
 }
 </script>