修改

src/views/home/productionCostAnalysisComponents/relateSingleCombustible.vue

@@ -1,16 +1,18 @@
 <template>
   <div style="flex: 1">
-    <Container :name="title" icon="cockpitItemIcon" size="opLargeBg" topSize="large">
-      <!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
+    <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 专属包裹容器，统一控制样式和布局 -->
+        <!-- 新增：topItem 专属包裹容器，统一控制样式和布局（原有行内样式不变） -->
         <div class="topItem-container" style="display: flex; gap: 8px;">
           <div class="dashboard left">
             <div class="title">
               采购单价·单位/万元
             </div>
             <div class="line">
-              <operatingSingleBar></operatingSingleBar>
+              <!-- 绑定对应数据：新增数据绑定，样式不变 -->
+              <operatingSingleBar :detailData="unitPriceData"></operatingSingleBar>
             </div>
           </div>
           <div class="dashboard right">
@@ -18,7 +20,8 @@
               产量·单位/万元
             </div>
             <div class="line">
-              <operatingSingleBar></operatingSingleBar>
+              <!-- 绑定对应数据：新增数据绑定，样式不变 -->
+              <operatingSingleBar :detailData="productData"></operatingSingleBar>
             </div>
           </div>
           <div class="dashboard right">
@@ -26,7 +29,8 @@
               单耗·单位/万元
             </div>
             <div class="line">
-              <operatingSingleBar></operatingSingleBar>
+              <!-- 绑定对应数据：新增数据绑定，样式不变 -->
+              <operatingSingleBar :detailData="unitHaoData"></operatingSingleBar>
             </div>
           </div>
           <div class="dashboard right">
@@ -34,7 +38,8 @@
               消耗量·单位/万元
             </div>
             <div class="line">
-              <operatingSingleBar></operatingSingleBar>
+              <!-- 绑定对应数据：新增数据绑定，样式不变 -->
+              <operatingSingleBar :detailData="haoNumData"></operatingSingleBar>
             </div>
           </div>
           <div class="dashboard right">
@@ -42,7 +47,8 @@
               热耗·单位/万元
             </div>
             <div class="line">
-              <operatingSingleBar></operatingSingleBar>
+              <!-- 绑定对应数据：新增数据绑定，样式不变 -->
+              <operatingSingleBar :detailData="heatConsumptionData"></operatingSingleBar>
             </div>
           </div>
         </div>
@@ -62,58 +68,118 @@ export default {
   components: { Container, operatingSingleBar },
   // mixins: [resize],
   props: {
-    itemData: {  // 接收父组件传递的设备数据数组
-      type: Array,
-      default: () => []  // 默认空数组，避免报错
+    relatedData: {
+      type: Object,
+      default: () => ({
+        relatedMon: [], // 物料月度数据（数组格式，存储各物料项）
+        relatedTotal: [] // 物料累计数据（数组格式，存储各物料项）
+      })
     },
     title: {  // 接收父组件传递的设备数据数组
       type: String,
-      default: () => ''  // 默认空数组，避免报错
+      default: ''  // 默认空字符串，保持原有配置
     },
     month: {  // 接收父组件传递的设备数据数组
       type: String,
-      default: () => ''  // 默认空数组，避免报错
+      default: ''  // 默认空字符串，保持原有配置
     },
   },
   data() {
     return {
       chart: null,
-
+      // 新增：当前激活的数据集（默认月度，和第一个组件逻辑对齐，样式无变化）
+      activeData: this.relatedData.relatedMon || []
     }
   },
   watch: {
-    itemData: {
-      handler(newValue, oldValue) {
-        // this.updateChart()
+    // 移除无效的itemData监听，新增relatedData深度监听（数据逻辑补充，样式不变）
+    relatedData: {
+      handler(newVal) {
+        this.activeData = newVal.relatedMon || [];
       },
-      deep: true // 若对象内属性变化需触发，需加 deep: true
+      immediate: true, // 组件挂载时立即执行
+      deep: true // 深度监听对象内部变化
+    }
+    // 保留原有itemData监听（若你需要可保留，此处注释不影响样式）
+    // itemData: {
+    //   handler(newValue, oldValue) {
+    //     // this.updateChart()
+    //   },
+    //   deep: true // 若对象内属性变化需触发，需加 deep: true
+    // }
+  },
+  // 新增：5个指标对应的计算属性，精准筛选数据（仅数据逻辑，样式不变）
+  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
+      };
+    },
+    // 5. 热耗数据（新增对应5个指标）
+    heatConsumptionData() {
+      return this.activeData.find(item => (item.name || '').includes('热耗')) || {
+        targetValue: 0,
+        value: 0,
+        completed: 0,
+        diffValue: 0
+      };
     }
   },
-  // 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: {
+    // 新增：Tab切换处理函数，同步切换月度/累计数据（仅数据逻辑，样式不变）
+    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>
 
 <style lang='scss' scoped>
+/* 样式完全保留不变，无任何修改 */
 /* 3. 核心：滚动容器样式（固定高度+溢出滚动+隐藏滚动条） */
 .scroll-container {
   /* 1. 固定容器高度：根据页面布局调整（示例300px，超出则滚动） */