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

<template>
  <div style="flex: 1">
    <Container :name="title" icon="cockpitItemIcon" size="operatingRevenueBg" topSize="middle">
      <div class="kpi-content" style="padding: 14px 16px; display: flex; width: 100%;">
        <div class="topItem-container" style="display: flex; gap: 8px">
          <div
            v-for="item in sortedIndicators"
            :key="item.key"
            class="dashboard"
            @click="item.route && handleDashboardClick(item.name,item.route)"
          >
            <div class="title">
              {{ item.name }}·{{ item.unit }}
            </div>
            <div style='font-size: 14px;text-align: right;padding-right: 5px;'>
              <span>完成率:<span style='color: #0B58FF;'>{{item.data.proportion}}%</span></span>
              <span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:item.data.completed>0?'#30B590':'#FF9423'}" >{{item.data.diffValue}}</span></span>
            </div>
            <operatingSingleBar :detailData="item.data"></operatingSingleBar>
          </div>
        </div>
      </div>
    </Container>
  </div>
</template>
<script>
import Container from './container.vue'
import operatingSingleBar from './operatingSingleBar.vue'

// import * as echarts from 'echarts'
// import rawItem from './raw-Item.vue'
export default {
  name: 'ProductionStatus',
  components: { Container, operatingSingleBar },
  props: {
    // 接收父组件传递的 月度+累计 组合数据（原有配置保留，仅优化注释）
    relatedData: {
      type: Array,
      default: () => []
    },
    factory: {
      type: [String, Number],
      default: ''
    },
    dateData: {
      type: Object,
      default: () => ({})
    },
    // 可选：动态标题（原有配置保留）
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      chart: null
      // 注释无效的activeData，保持数据简洁（样式不变）
      // activeData: this.relatedData || []
    }
  },
  computed: {
    indicatorDefs() {
      return [
        { key: 'mx', name: '芒硝', unit: '元/㎡', route: 'SIMFRMCostAnalysis'},
        { key: 'xsn', name: '硝酸钠', unit: '元/㎡', route: 'SIMFRMCostAnalysis'},
        { key: 'jtsn', name: '焦锑酸钠', unit: '元/㎡', route: 'SIMFRMCostAnalysis'},
      ]
    },
    indicators() {
      const fallback = { targetValue: 0, value: 0, completed: 0, diffValue: 0 }
      const list = (Array.isArray(this.relatedData) ? this.relatedData : [])

      return this.indicatorDefs.map(def => {
        const data = list.find(item => item && item.name.includes(def.name)) || fallback
        return {
          ...def,
          data,
          sortValue: Number((data && data.value) ?? 0)
        }
      })
    },
    sortedIndicators() {
      const unitOrder = ['元/㎡']
      const unitRank = (u) => {
        const idx = unitOrder.indexOf(u)
        return idx === -1 ? 999 : idx
      }

      return this.indicators.slice().sort((a, b) => {
        const ur = unitRank(a.unit) - unitRank(b.unit)
        if (ur !== 0) return ur
        const vr = (b.sortValue ?? -Infinity) - (a.sortValue ?? -Infinity)
        if (vr !== 0) return vr
        return String(a.key).localeCompare(String(b.key))
      })
    }
  },
  // 保留原有watch注释（若需恢复可直接启用，样式不变）
  // watch: {
  //   // 可选：监听 relatedData 初始变化（若父组件异步传递数据，确保 activeData 同步更新）
  //   relatedData: {
  //     handler(newVal) {
  //       this.activeData = newVal.relatedMon || [];
  //     },
  //     immediate: true,
  //     deep: true
  //   }
  // },
  mounted() {
    // 优化打印日志，输出有效数据（移除无效的activeData打印，样式不变）
    console.log('组件挂载时的相关数据：', this.relatedData);
  },
  methods: {
    handleDashboardClick(material, path) {
      this.$router.push({
        path: path,
        query: {
          name: material,
          month: this.month,
          factory: this.$route.query.factory ? this.$route.query.factory :5,
          dateData: this.dateData
        }
      });
    },
  }
}
</script>

<style lang='scss' scoped>
/* 3. 核心：滚动容器样式（固定高度+溢出滚动+隐藏滚动条） */
.scroll-container {
  /* 1. 固定容器高度：根据页面布局调整（示例300px，超出则滚动） */
  max-height: 210px;
  /* 2. 溢出滚动：内容超出高度时显示滚动功能 */
  overflow-y: auto;
  /* 3. 隐藏横向滚动条（防止设备名过长导致横向滚动） */
  overflow-x: hidden;
  /* 4. 内边距：与标题栏和容器边缘对齐 */
  padding: 10px 0;

  /* 5. 隐藏滚动条（兼容主流浏览器） */
  /* Chrome/Safari */
  &::-webkit-scrollbar {
    display: none;
  }

  /* Firefox */
  scrollbar-width: none;
  /* IE/Edge */
  -ms-overflow-style: none;
}

.dashboard {
  width: 250px;
  height: 205px;
  background: #F9FCFF;
  padding: 16px 0 0 10px;

  .title {
    // width: 190px;
    height: 18px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 18px;
    color: #000000;
    line-height: 18px;
    letter-spacing: 1px;
    text-align: left;
    font-style: normal;
    letter-spacing: 2px;
  }

  .number {
    display: flex;
    align-items: center;
    gap: 6px;
    // width: 190px;
    height: 32px;
    font-family: YouSheBiaoTiHei;
    font-size: 32px;
    color: #0B58FF;
    line-height: 32px;
    letter-spacing: 2px;
    text-align: left;
    font-style: normal;
    white-space: nowrap;
  }

  .mom {
    width: 120px;
    height: 18px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 18px;
    color: #000000;
    line-height: 18px;
    letter-spacing: 1px;
    text-align: left;
    font-style: normal;
    z-index: 1000;
  }
}

// .line {
//   width: 500px;
//   height: 205px;
//   background: #F9FCFF;
// }

// .leftTitle {
//   .item {
//     width: 67px;
//     height: 180px;
//     padding: 37px 23px;
//     background: #F9FCFF;
//     font-family: PingFangSC, PingFang SC;
//     font-weight: 400;
//     font-size: 18px;
//     color: #000000;
//     line-height: 25px;
//     letter-spacing: 1px;
//     // text-align: left;
//     font-style: normal;
//   }
// }
</style>

<!-- <style>
/* 全局 tooltip 样式（不使用 scoped，确保生效） */
.production-status-chart-tooltip {
  background: #0a2b4f77 !important;
  border: none !important;
  backdrop-filter: blur(12px);
}

.production-status-chart-tooltip * {
  color: #fff !important;
}
</style> -->