修改

src/views/home/productionCostAnalysisComponents/relateCombustibleCostAnalysis.vue

@@ -1,31 +1,36 @@
 <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">
       <div class="kpi-content" style="padding: 14px 16px; display: flex; width: 100%;">
+        <!-- 横向滚动容器：和第二个组件样式统一，防止溢出 -->
         <div class="topItem-container" style="display: flex; gap: 8px;">
-          <!-- 1. 为每个dashboard绑定点击事件，传递物料名称参数 -->
-          <div class="dashboard left" @click="handleDashboardClick('天然气')">
+          <!-- 天然气组件：绑定对应筛选数据，点击传递物料名和路由 -->
+          <div class="dashboard left" @click="handleDashboardClick('天然气', 'singleCombustible')">
             <div class="title">天然气·单位/万元</div>
             <div class="line">
-              <operatingSingleBar></operatingSingleBar>
+              <operatingSingleBar :detailData="naturalGasData"></operatingSingleBar>
             </div>
           </div>
-          <div class="dashboard right" @click="handleDashboardClick('LNG液化天然气')">
+          <!-- LNG液化天然气组件：绑定对应筛选数据 -->
+          <div class="dashboard right" @click="handleDashboardClick('LNG液化天然气', 'singleCombustible')">
             <div class="title">LNG液化天然气·单位/万元</div>
             <div class="line">
-              <operatingSingleBar></operatingSingleBar>
+              <operatingSingleBar :detailData="lngData"></operatingSingleBar>
             </div>
           </div>
-          <div class="dashboard right" @click="handleDashboardClick('重油')">
+          <!-- 重油组件：绑定对应筛选数据 -->
+          <div class="dashboard right" @click="handleDashboardClick('重油', 'singleCombustible')">
             <div class="title">重油·单位/万元</div>
             <div class="line">
-              <operatingSingleBar></operatingSingleBar>
+              <operatingSingleBar :detailData="heavyOilData"></operatingSingleBar>
             </div>
           </div>
-          <div class="dashboard right" @click="handleDashboardClick('水')">
+          <!-- 水组件：绑定对应筛选数据 -->
+          <div class="dashboard right" @click="handleDashboardClick('水', 'singleCombustible')">
             <div class="title">水·单位/万元</div>
             <div class="line">
-              <operatingSingleBar></operatingSingleBar>
+              <operatingSingleBar :detailData="waterData"></operatingSingleBar>
             </div>
           </div>
         </div>
@@ -39,12 +44,16 @@ import Container from '../components/container.vue'
 import operatingSingleBar from './operatingSingleBar.vue'
 
 export default {
-  name: 'ProductionStatus',
+  name: 'GasWaterProductionStatus', // 与第二个组件区分命名
   components: { Container, operatingSingleBar },
   props: {
-    itemData: {
-      type: Array,
-      default: () => []
+    // 完全对齐第二个组件的props结构，数据格式统一
+    relatedData: {
+      type: Object,
+      default: () => ({
+        relatedMon: [], // 月度数据（数组格式，存储各物料项）
+        relatedTotal: [] // 累计数据（数组格式，存储各物料项）
+      })
     },
     title: {
       type: String,
@@ -58,69 +67,98 @@ export default {
   data() {
     return {
       chart: null,
-      // 可选：记录当前选中的物料
-      activeMaterial: ''
+      activeData: this.relatedData.relatedMon || [], // 核心激活数据集（默认月度，与第二个组件一致）
+      activeMaterial: '' // 记录选中物料状态，与第二个组件统一
     }
   },
+  // 新增计算属性：和第二个组件逻辑一致，精准筛选各物料数据
+  computed: {
+    // 天然气数据：从激活数据集中筛选，兜底值统一
+    naturalGasData() {
+      return this.activeData.find(item => (item.name || '').includes('天然气')) || {
+        targetValue: 0,
+        value: 0,
+        completed: 0,
+        diffValue: 0
+      };
+    },
+    // LNG液化天然气数据：精准筛选
+    lngData() {
+      return this.activeData.find(item => (item.name || '').includes('LNG液化天然气')) || {
+        targetValue: 0,
+        value: 0,
+        completed: 0,
+        diffValue: 0
+      };
+    },
+    // 重油数据：精准筛选
+    heavyOilData() {
+      return this.activeData.find(item => (item.name || '').includes('重油')) || {
+        targetValue: 0,
+        value: 0,
+        completed: 0,
+        diffValue: 0
+      };
+    },
+    // 水数据：精准筛选
+    waterData() {
+      return this.activeData.find(item => (item.name || '').includes('水')) || {
+        targetValue: 0,
+        value: 0,
+        completed: 0,
+        diffValue: 0
+      };
+    },
+    // 移除原无效的itemData，统一使用activeData
+  },
   watch: {
-    itemData: {
-      handler(newValue, oldValue) {
-        // this.updateChart()
+    // 对齐第二个组件：深度监听relatedData变化，同步更新激活数据集
+    relatedData: {
+      handler(newVal) {
+        this.activeData = newVal.relatedMon || [];
       },
-      deep: true
+      immediate: true, // 挂载时立即执行
+      deep: true // 深度监听对象内部变化
     }
   },
   mounted() {
-    // this.$nextTick(() => this.updateChart())
+    console.log('燃气水组件挂载时的激活数据：', this.activeData);
   },
   methods: {
-    /**
-     * dashboard点击事件处理函数
-     * @param {String} material 物料名称（硅砂/海砂/纯碱等）
-     */
-    handleDashboardClick(material) {
-      // 1. 记录选中状态（可选）
-      this.activeMaterial = material;
-
-      // 2. 基础逻辑：打印物料名称（可替换为业务逻辑）
-      console.log(`点击了【${material}】，月份：${this.month}`, '物料数据：', this.itemData);
-      this.$router.push({
-        path: 'singleCombustible',
-        month: this.month,
-        query: {
-          name: material
-        }
-      })
-      // 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);
+    // 新增tab切换处理函数：和第二个组件逻辑完全一致，切换月度/累计数据
+    handleChange(value) {
+      console.log('Tab 切换值：', value);
+      // 根据tab值更新激活数据集
+      if (value === 'month') {
+        this.activeData = this.relatedData.relatedMon || [];
+      } else {
+        this.activeData = this.relatedData.relatedTotal || [];
+      }
+      console.log('当前激活数据集：', this.activeData);
     },
 
-    /**
-     * 可选：打开物料详情弹窗（示例）
-     */
-    openMaterialDetail(material) {
-      // 此处可编写弹窗逻辑
-      alert(`查看【${material}】的详细成本分析`);
+    // 优化点击事件：对齐第二个组件，接收物料名和路由路径，修复原路由参数错误
+    handleDashboardClick(material, path) {
+      // 1. 记录选中状态
+      this.activeMaterial = material;
+
+      console.log(`点击了【${material}】，月份：${this.month}`, '物料数据：', this.activeData);
+
+      // 2. 修复原路由跳转错误：month放入query中（原代码month直接写在路由配置里无效）
+      this.$router.push({
+        path: path,
+        query: {
+          name: material,
+          month: this.month
+        }
+      });
     }
   }
 }
 </script>
 
 <style lang='scss' scoped>
+/* 完全对齐第二个组件样式，统一视觉效果 */
 .scroll-container {
   max-height: 210px;
   overflow-y: auto;
@@ -140,21 +178,21 @@ export default {
   height: 205px;
   background: #F9FCFF;
   padding: 16px 0 0 16px;
-  // 核心：添加点击反馈样式
-  cursor: pointer; // 鼠标悬浮显示手型
-  transition: all 0.2s ease; // 过渡动画
+  flex-shrink: 0; // 固定宽度，不被挤压（与第二个组件一致）
+  cursor: pointer; // 鼠标悬浮手型（保留原点击反馈）
+  transition: all 0.2s ease; // 过渡动画（保留原样式）
 
-  // 选中状态样式（可选）
-  &.active {
-    background: #E8F4FF;
-    border: 1px solid #0B58FF;
-  }
+  // 悬浮样式（保留原交互效果）
+  // &:hover {
+  //   background: #F0F8FF;
+  //   box-shadow: 0 2px 8px rgba(11, 88, 255, 0.1);
+  // }
 
-  // 悬浮样式
-  &:hover {
-    background: #F0F8FF;
-    box-shadow: 0 2px 8px rgba(11, 88, 255, 0.1);
-  }
+  // // 选中状态样式（可选，与第二个组件风格统一）
+  // &.active {
+  //   background: #E8F4FF;
+  //   border: 1px solid #0B58FF;
+  // }
 
   .title {
     height: 18px;
@@ -166,6 +204,7 @@ export default {
     letter-spacing: 2px;
     text-align: left;
     font-style: normal;
+    margin-bottom: 16px; // 与第二个组件标题间距一致
   }
 
   .number {
@@ -181,5 +220,20 @@ export default {
     text-align: left;
     font-style: normal;
   }
+
+  // .line {
+  //   width: 280px; // 适配310px宽度，避免图表溢出（与第二个组件一致）
+  //   height: 150px; // 图表高度与第二个组件统一
+  // }
+}
+
+/* 隐藏横向滚动条，与第二个组件样式完全统一 */
+.topItem-container::-webkit-scrollbar {
+  display: none;
+}
+
+.topItem-container {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
 }
 </style>