修改

src/views/home/productionCostAnalysisComponents/monthlyRelatedMetricsProcessingFuel.vue

@@ -5,7 +5,7 @@
       <div class="kpi-content" style="padding: 14px 16px; display: flex; width: 100%;">
         <!-- 新增：topItem 专属包裹容器，统一控制样式和布局 -->
         <div class="topItem-container" style="display: flex; gap: 8px;">
-          <div class="dashboard left" @click="handleDashboardClick('电')">
+          <div class="dashboard left" @click="handleDashboardClick('电')" :detailData="dianData">
             <div class="title">
               电·单位/万元
             </div>
@@ -13,7 +13,7 @@
               <operatingSingleBar></operatingSingleBar>
             </div>
           </div>
-          <div class="dashboard right" @click="handleDashboardClick('水')">
+          <div class="dashboard right" @click="handleDashboardClick('水')" :detailData="shuiData">
             <div class="title">
               水·单位/万元
             </div>
@@ -29,93 +29,76 @@
 <script>
 import Container from './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: {  // 接收父组件传递的设备数据数组
+    // 接收父组件传递的 月度+累计 组合数据
+    relatedData: {
       type: Array,
-      default: () => []  // 默认空数组，避免报错
+      default: () => ([])
     },
-    title: {  // 接收父组件传递的设备数据数组
+    // 可选：动态标题
+    title: {
       type: String,
-      default: () => ''  // 默认空数组，避免报错
-    },
-    month: {  // 接收父组件传递的设备数据数组
-      type: String,
-      default: () => ''  // 默认空数组，避免报错
-    },
+      default: ''
+    }
   },
   data() {
     return {
       chart: null,
-
+      // 核心：当前激活的数据集（月度/累计），默认初始化月度数据
+      // activeData: this.relatedData || []
     }
   },
-  watch: {
-    itemData: {
-      handler(newValue, oldValue) {
-        // this.updateChart()
-      },
-      deep: true // 若对象内属性变化需触发，需加 deep: true
-    }
+  computed: {
+    // 1. 销量数据：从当前激活数据集中筛选（依赖 activeData，自动响应变化）
+    dianData() {
+      return (this.relatedData.find(item => item.name === "电成本")) || {
+        targetValue: 0,
+        value: 0,
+        completed: 0,
+        diffValue: 0,
+        proportion: 0,
+      };
+    },
+    // 2. 单价数据：从当前激活数据集中筛选
+    shuiData() {
+      return (this.relatedData.find(item => item.name === "水成本")) || {
+        targetValue: 0,
+        value: 0,
+        proportion: 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];
+  // watch: {
+  //   // 可选：监听 relatedData 初始变化（若父组件异步传递数据，确保 activeData 同步更新）
+  //   relatedData: {
+  //     handler(newVal) {
+  //       this.activeData = newVal.relatedMon || [];
+  //     },
+  //     immediate: true,
+  //     deep: true
   //   }
   // },
   mounted() {
-    // 初始化图表（若需展示图表，需在模板中添加对应 DOM）
-    // this.$nextTick(() => this.updateChart())
+    console.log('组件挂载时的激活数据：', this.activeData);
   },
   methods: {
-    handleDashboardClick(material) {
-      // 1. 记录选中状态（可选）
-      this.activeMaterial = material;
-
-      // 2. 基础逻辑：打印物料名称（可替换为业务逻辑）
-      console.log(`点击了【${material}】，月份：${this.month}`, '物料数据：', this.itemData);
+    handleDashboardClick(name) {
       this.$router.push({
         path: 'singleProcessingFuel',
-        month: this.month,
         query: {
-          name: material
+          name,
         }
       })
-      // 3. 扩展逻辑示例：
-      // - 触发父组件事件（如需向父组件传递数据）
-      this.$emit('dashboard-click', {
-        material,
-        month: this.month,
-        // data: this.itemData.find(item => item.name === material) || {}
-      });
-
-      // - 跳转详情页（如需路由跳转）
-      // this.$router.push({
-      //   path: '/material-detail',
-      //   query: { name: material, month: this.month }
-      // });
-
-      // - 打开弹窗/加载详情数据等
-      // this.openMaterialDetail(material);
-    },
+    }
   }
 }
 </script>