修改

src/views/home/productionCostAnalysisComponents/yearRelatedMetrics.vue

@@ -5,17 +5,17 @@
       <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">
+          <div class="dashboard left" @click="handleDashboardClick('电')" :detailData="dianData">
             <div class="title">
-              销量·单位/万元
+              电·单位/万元
             </div>
             <div class="line">
               <operatingSingleBar></operatingSingleBar>
             </div>
           </div>
-          <div class="dashboard right">
+          <div class="dashboard right" @click="handleDashboardClick('水')" :detailData="shuiData">
             <div class="title">
-              单价·单位/万元
+              水·单位/万元
             </div>
             <div class="line">
               <operatingSingleBar></operatingSingleBar>
@@ -29,61 +29,64 @@
 <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
+      };
+    },
+    // 2. 单价数据：从当前激活数据集中筛选
+    shuiData() {
+      return (this.relatedData.find(item => item.name === "水成本")) || {
+        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];
+  // 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: {
   }