yudao-dev/src/views/home/productionCostAnalysisComponents/relateCombustibleCostAnalysis.vue

<template>
  <div style="flex: 1">
    <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;">
          <!-- 天然气组件：绑定对应筛选数据，点击传递物料名和路由 -->
          <div class="dashboard left" @click="handleDashboardClick('天然气', 'singleCombustible')">
            <div class="title">天然气·单位/万元</div>
            <div class="line">
              <operatingSingleBar :detailData="naturalGasData"></operatingSingleBar>
            </div>
          </div>
          <!-- LNG液化天然气组件：绑定对应筛选数据 -->
          <div class="dashboard right" @click="handleDashboardClick('LNG液化天然气', 'singleCombustible')">
            <div class="title">LNG液化天然气·单位/万元</div>
            <div class="line">
              <operatingSingleBar :detailData="lngData"></operatingSingleBar>
            </div>
          </div>
          <!-- 重油组件：绑定对应筛选数据 -->
          <div class="dashboard right" @click="handleDashboardClick('重油', 'singleCombustible')">
            <div class="title">重油·单位/万元</div>
            <div class="line">
              <operatingSingleBar :detailData="heavyOilData"></operatingSingleBar>
            </div>
          </div>
          <!-- 水组件：绑定对应筛选数据 -->
          <div class="dashboard right" @click="handleDashboardClick('水', 'singleCombustible')">
            <div class="title">水·单位/万元</div>
            <div class="line">
              <operatingSingleBar :detailData="waterData"></operatingSingleBar>
            </div>
          </div>
        </div>
      </div>
    </Container>
  </div>
</template>

<script>
import Container from '../components/container.vue'
import operatingSingleBar from './operatingSingleBar.vue'

export default {
  name: 'GasWaterProductionStatus', // 与第二个组件区分命名
  components: { Container, operatingSingleBar },
  props: {
    // 完全对齐第二个组件的props结构，数据格式统一
    relatedData: {
      type: Object,
      default: () => ({
        relatedMon: [], // 月度数据（数组格式，存储各物料项）
        relatedTotal: [] // 累计数据（数组格式，存储各物料项）
      })
    },
    title: {
      type: String,
      default: ''
    },
    month: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      chart: null,
      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: {
    // 对齐第二个组件：深度监听relatedData变化，同步更新激活数据集
    relatedData: {
      handler(newVal) {
        this.activeData = newVal.relatedMon || [];
      },
      immediate: true, // 挂载时立即执行
      deep: true // 深度监听对象内部变化
    }
  },
  mounted() {
    console.log('燃气水组件挂载时的激活数据：', this.activeData);
  },
  methods: {
    // 新增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);
    },

    // 优化点击事件：对齐第二个组件，接收物料名和路由路径，修复原路由参数错误
    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;
  overflow-x: hidden;
  padding: 10px 0;

  &::-webkit-scrollbar {
    display: none;
  }

  scrollbar-width: none;
  -ms-overflow-style: none;
}

.dashboard {
  width: 390px;
  height: 205px;
  background: #F9FCFF;
  padding: 16px 0 0 16px;
  flex-shrink: 0; // 固定宽度，不被挤压（与第二个组件一致）
  cursor: pointer; // 鼠标悬浮手型（保留原点击反馈）
  transition: all 0.2s ease; // 过渡动画（保留原样式）

  // 悬浮样式（保留原交互效果）
  // &:hover {
  //   background: #F0F8FF;
  //   box-shadow: 0 2px 8px rgba(11, 88, 255, 0.1);
  // }

  // // 选中状态样式（可选，与第二个组件风格统一）
  // &.active {
  //   background: #E8F4FF;
  //   border: 1px solid #0B58FF;
  // }

  .title {
    height: 18px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 18px;
    color: #000000;
    line-height: 18px;
    letter-spacing: 2px;
    text-align: left;
    font-style: normal;
    margin-bottom: 16px; // 与第二个组件标题间距一致
  }

  .number {
    display: flex;
    align-items: center;
    gap: 30px;
    height: 32px;
    font-family: YouSheBiaoTiHei;
    font-size: 32px;
    color: #0B58FF;
    line-height: 32px;
    letter-spacing: 2px;
    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>