yudao-dev/src/views/home/inputOutputRatioComponents/yearRelatedMetrics.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; width: 100%;">
          <!-- 领用量模块（传递整合了flag的useData） -->
          <div class="dashboard left">
            <div class="title">
              领用量·单位/万元
            </div>
            <div class="chart-wrap">
              <operatingSingleBar :detailData="useData"></operatingSingleBar>
            </div>
          </div>
          <!-- 加工产量模块（传递整合了flag的processData） -->
          <div class="dashboard right">
            <div class="title">
              加工产量·单位/万元
            </div>
            <div class="chart-wrap">
              <operatingSingleBar :detailData="processData"></operatingSingleBar>
            </div>
          </div>
        </div>
      </div>
    </Container>
  </div>
</template>

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

export default {
  name: 'ProcessProductionAnalysis', // 语义化组件名
  components: { Container, operatingSingleBar },
  props: {
    // 领用量/加工产量数据源（结构与原monthAnalysis一致）
    ytdAnalysis: {
      type: Array,
      // 默认值：领用量、加工产量两个对象
      default: () => [
        { title: "领用量", budget: 0, real: 0, rate: 0, diff: 0 },
        { title: "加工产量", budget: 0, real: 0, rate: 0, diff: 0 }
      ]
    },
    title: {
      type: String,
      default: '加工生产数据分析' // 默认标题
    },
    month: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      chart: null,
      // 初始化数据（包含flag字段）
      useData: { title: "领用量", budget: 0, real: 0, rate: 0, diff: 0, flag: 0 },
      processData: { title: "加工产量", budget: 0, real: 0, rate: 0, diff: 0, flag: 0 }
    }
  },
  watch: {
    // 监听数据源变化
    ytdAnalysis: {
      handler(newVal) {
        this.updateData(newVal)
      },
      deep: true,
      immediate: true // 初始化立即执行
    }
  },
  mounted() {
    this.updateData(this.ytdAnalysis)
  },
  methods: {
    // 达标标识判断（≥100返回1，<100返回0）
    getRateFlag(rate) {
      if (isNaN(rate) || rate === null || rate === undefined) return 0;
      return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
    },

    // 处理领用量/加工产量数据
    updateData(data) {
      // 数据兜底：确保是数组且长度≥2
      const validData = Array.isArray(data) && data.length >= 2
        ? data
        : this.$props.ytdAnalysis;

      // 提取领用量（第0项）、加工产量（第1项）数据
      const useItem = validData[0] || { title: "领用量", budget: 0, real: 0, rate: 0, diff: 0 };
      const processItem = validData[1] || { title: "加工产量", budget: 0, real: 0, rate: 0, diff: 0 };

      // 整合flag字段到数据对象中
      this.useData = {
        ...useItem,
        flag: this.getRateFlag(useItem.rate)
      };
      this.processData = {
        ...processItem,
        flag: this.getRateFlag(processItem.rate)
      };

      // 调试日志
      console.log('领用量数据：', this.useData);
      console.log('加工产量数据：', this.processData);
    }
  }
}
</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;
}

.topItem-container {
  display: flex;
  justify-content: space-between; // 双列均匀分布
}

.dashboard {
  flex: 1; // 双列等分宽度
  min-width: 300px; // 最小宽度限制
  height: 205px;
  background: #F9FCFF;
  padding: 16px 16px 0;
  margin: 0 4px;

  .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;
    margin-bottom: 12px;
  }

  // 图表容器：适配高度
  .chart-wrap {
    width: 100%;
    height: calc(100% - 30px);
  }

  .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;
  }

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

// 左右列间距优化
.dashboard.left {
  margin-left: 0;
}

.dashboard.right {
  margin-right: 0;
}
</style>