修改

src/views/home/productionCostAnalysisComponents/relateSingleFuelCostAnalysis.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,7 @@
               采购单价·单位/万元
             </div>
             <div class="line">
-              <operatingSingleBar></operatingSingleBar>
+              <operatingSingleBar :detailData="unitPriceData"></operatingSingleBar>
             </div>
           </div>
           <div class="dashboard right">
@@ -18,7 +19,7 @@
               产量·单位/万元
             </div>
             <div class="line">
-              <operatingSingleBar></operatingSingleBar>
+              <operatingSingleBar :detailData="productData"></operatingSingleBar>
             </div>
           </div>
           <div class="dashboard right">
@@ -26,7 +27,7 @@
               单耗·单位/万元
             </div>
             <div class="line">
-              <operatingSingleBar></operatingSingleBar>
+              <operatingSingleBar :detailData="unitHaoData"></operatingSingleBar>
             </div>
           </div>
           <div class="dashboard right">
@@ -34,7 +35,7 @@
               消耗量·单位/万元
             </div>
             <div class="line">
-              <operatingSingleBar></operatingSingleBar>
+              <operatingSingleBar :detailData="haoNumData"></operatingSingleBar>
             </div>
           </div>
         </div>
@@ -50,57 +51,100 @@ import operatingSingleBar from './operatingSingleBar.vue'
 // import rawItem from './raw-Item.vue'
 
 export default {
-  name: 'ProductionStatus',
+  name: 'ProductionStatus', // 如需区分可重命名为MaterialProductionStatus
   components: { Container, operatingSingleBar },
-  // mixins: [resize],
   props: {
-    itemData: {  // 接收父组件传递的设备数据数组
-      type: Array,
-      default: () => []  // 默认空数组，避免报错
+    // 对齐第二个组件：改为Object类型，支持月度/累计物料数据，格式统一
+    relatedData: {
+      type: Object,
+      default: () => ({
+        relatedMon: [], // 物料月度数据（数组格式，存储各物料项）
+        relatedTotal: [] // 物料累计数据（数组格式，存储各物料项）
+      })
     },
-    title: {  // 接收父组件传递的设备数据数组
+    title: {
       type: String,
-      default: () => ''  // 默认空数组，避免报错
+      default: ''
     },
-    month: {  // 接收父组件传递的设备数据数组
+    month: {
       type: String,
-      default: () => ''  // 默认空数组，避免报错
+      default: ''
     },
   },
   data() {
     return {
       chart: null,
-
+      // 核心：当前激活的物料数据集（默认月度数据，与第二个组件逻辑一致）
+      activeData: this.relatedData.relatedMon || [],
+      activeMaterial: '' // 记录选中的物料状态，与第二个组件一致
     }
   },
+  // 对齐第二个组件：添加计算属性，精准筛选各物料数据
+  computed: {
+    // 1. 硅砂数据：从激活数据集中筛选，兜底值与第二个组件统一
+    unitPriceData() {
+      return this.activeData.find(item => (item.name || '').includes('采购单价')) || {
+        targetValue: 0,
+        value: 0,
+        completed: 0,
+        diffValue: 0
+      };
+    },
+    // 2. 海砂数据：精准筛选
+    productData() {
+      return this.activeData.find(item => (item.name || '').includes('产量')) || {
+        targetValue: 0,
+        value: 0,
+        completed: 0,
+        diffValue: 0
+      };
+    },
+    // 3. 纯碱数据：精准筛选
+    unitHaoData() {
+      return this.activeData.find(item => (item.name || '').includes('单耗')) || {
+        targetValue: 0,
+        value: 0,
+        completed: 0,
+        diffValue: 0
+      };
+    },
+    // 4. 白云石数据：精准筛选
+    haoNumData() {
+      return this.activeData.find(item => (item.name || '').includes('消耗量')) || {
+        targetValue: 0,
+        value: 0,
+        completed: 0,
+        diffValue: 0
+      };
+    },
+  },
   watch: {
-    itemData: {
-      handler(newValue, oldValue) {
-        // this.updateChart()
+    // 对齐第二个组件：监听物料数据变化，同步更新激活数据集
+    relatedData: {
+      handler(newVal) {
+        this.activeData = newVal.relatedMon || [];
       },
-      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())
+    console.log('物料组件挂载时的激活数据：', this.activeData);
   },
   methods: {
+    handleChange(value) {
+      console.log('Tab 切换值：', value);
+      // 根据 Tab 值更新当前激活的数据集
+      if (value === 'month') {
+        // 切换为月度数据
+        this.activeData = this.relatedData.relatedMon || [];
+      } else {
+        // 切换为累计数据（非 month 均视为累计，可根据实际需求调整判断条件）
+        this.activeData = this.relatedData.relatedTotal || [];
+      }
+      console.log('当前激活数据集：', this.activeData);
+    },
+    // 对齐第二个组件：优化点击事件，接收物料名和路由路径参数
   }
 }
 </script>