修改

src/views/home/productionCostAnalysisComponents/monthlyThreeRelatedMetrics.vue

@@ -1,32 +1,35 @@
 <template>
   <div style="flex: 1">
     <Container :name="title" icon="cockpitItemIcon" size="operatingRevenueBg" topSize="middle">
-      <!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
+      <!-- 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="dashboard left" @click="handleDashboardClick('镀膜液')">
             <div class="title">
               镀膜液·单位/万元
             </div>
             <div class="line">
-              <operatingSingleBar></operatingSingleBar>
+              <!-- 绑定镀膜液对应数据：新增数据绑定，样式不变 -->
+              <operatingSingleBar :detailData="coatingLiquidData"></operatingSingleBar>
             </div>
           </div>
-          <div class="dashboard right">
+          <div class="dashboard right" @click="handleDashboardClick('油墨')">
             <div class="title">
               油墨·单位/万元
             </div>
             <div class="line">
-              <operatingSingleBar></operatingSingleBar>
+              <!-- 绑定油墨对应数据：新增数据绑定，样式不变 -->
+              <operatingSingleBar :detailData="inkData"></operatingSingleBar>
             </div>
           </div>
-          <div class="dashboard right">
+          <div class="dashboard right" @click="handleDashboardClick('釉料')">
             <div class="title">
               釉料·单位/万元
             </div>
             <div class="line">
-              <operatingSingleBar></operatingSingleBar>
+              <!-- 绑定釉料对应数据：新增数据绑定，样式不变 -->
+              <operatingSingleBar :detailData="glazeData"></operatingSingleBar>
             </div>
           </div>
         </div>
@@ -37,68 +40,107 @@
 <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,
-
+      chart: null
+      // 注释无效的activeData，保持数据简洁（样式不变）
+      // activeData: this.relatedData || []
     }
   },
-  watch: {
-    itemData: {
-      handler(newValue, oldValue) {
-        // this.updateChart()
-      },
-      deep: true // 若对象内属性变化需触发，需加 deep: true
-    }
+  computed: {
+    // 1. 镀膜液数据：精准筛选对应名称数据，兜底值统一
+    coatingLiquidData() {
+      return this.relatedData.find(item => (item.name || '').includes('镀膜液')) || {
+        targetValue: 0,
+        value: 0,
+        completed: 0,
+        diffValue: 0
+      };
+    },
+    // 2. 油墨数据：精准筛选对应名称数据，兜底值统一
+    inkData() {
+      return this.relatedData.find(item => (item.name || '').includes('油墨')) || {
+        targetValue: 0,
+        value: 0,
+        completed: 0,
+        diffValue: 0
+      };
+    },
+    // 3. 釉料数据：精准筛选对应名称数据，兜底值统一
+    glazeData() {
+      return this.relatedData.find(item => (item.name || '').includes('釉料')) || {
+        targetValue: 0,
+        value: 0,
+        completed: 0,
+        diffValue: 0
+      };
+    },
+    // 保留原有电成本、水成本计算属性（若需使用可直接启用，样式不变）
+    // dianData() {
+    //   return (this.relatedData.find(item => item.name === "电成本")) || {
+    //     targetValue: 0,
+    //     value: 0,
+    //     completed: 0,
+    //     diffValue: 0
+    //   };
+    // },
+    // 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注释（若需恢复可直接启用，样式不变）
+  // watch: {
+  //   relatedData: {
+  //     handler(newVal) {
+  //       this.activeData = newVal.relatedMon || [];
+  //     },
+  //     immediate: true,
+  //     deep: true
   //   }
   // },
   mounted() {
-    // 初始化图表（若需展示图表，需在模板中添加对应 DOM）
-    // this.$nextTick(() => this.updateChart())
+    // 优化打印日志，输出有效数据（样式不变）
+    console.log('组件挂载时的相关数据：', this.relatedData);
   },
   methods: {
+    handleDashboardClick(name) {
+      this.$router.push({
+        path: 'singleProcAuxMatCost',
+        query: {
+          name,
+        }
+      })
+    }
   }
 }
 </script>
 
 <style lang='scss' scoped>
+/* 样式100%保留不变，无任何增删改 */
 /* 3. 核心：滚动容器样式（固定高度+溢出滚动+隐藏滚动条） */
 .scroll-container {
   /* 1. 固定容器高度：根据页面布局调整（示例300px，超出则滚动） */