yudao-dev/src/views/home/grossMarginComponents/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的incomeData） -->
          <div class="dashboard left" @click="handleDashboardClick('/operatingRevenue/operatingRevenueBase')">
            <div class="title">
              收入·万元
            </div>
            <div class="chart-wrap">
              <operatingSingleBar :detailData="incomeData"></operatingSingleBar>
            </div>
          </div>
          <!-- 全成本模块（传递整合了flag的totalCostData） -->
          <div class="dashboard right" @click="handleDashboardClick('/fullCostAnalysis/fullCostAnalysisBase')">
            <div class="title">
              全成本·万元
            </div>
            <div class="chart-wrap">
              <operatingSingleBar :detailData="totalCostData"></operatingSingleBar>
            </div>
          </div>
        </div>
      </div>
    </Container>
  </div>
</template>

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

export default {
  name: 'ProductionStatus',
  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 }
      ]
    },
    dateData: {  // 接收父组件传递的设备数据数组
      type: Object,
      default: () => { }  // 默认空数组，避免报错
    },
    title: {
      type: String,
      default: ''
    },
    month: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      chart: null,
      // 初始化收入/全成本数据（包含flag字段）
      incomeData: { title: "收入", budget: 0, real: 0, rate: 0, diff: 0, flag: 0 },
      totalCostData: { title: "全成本", budget: 0, real: 0, rate: 0, diff: 0, flag: 0 }
    }
  },
  watch: {
    // 监听收入/全成本数据源变化
    ytdAnalysis: {
      handler(newVal) {
        this.updateChart(newVal)
      },
      deep: true,
      immediate: true // 初始化立即执行
    }
  },
  mounted() {
    // 初始化数据
    this.updateChart(this.ytdAnalysis)
  },
  methods: {
    handleDashboardClick(path) {
      this.$router.push({
        path: path,
        query: {
          factory: this.$route.query.factory ? this.$route.query.factory : this.factory,
          dateData: this.dateData
        }
      })
    },
    // 保留原flag判断逻辑（≥100返回1，<100返回0）
    getRateFlag(rate) {
      if (isNaN(rate) || rate === null || rate === undefined) return 0;
      return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
    },

    updateChart(data) {
      // 数据兜底：确保是数组且长度≥2
      const validData = Array.isArray(data) && data.length >= 2
        ? data
        : this.$props.ytdAnalysis.default();

      // 提取收入（第0项）、全成本（第1项）数据
      const incomeItem = validData[0] || { title: "收入", budget: 0, real: 0, rate: 0, diff: 0 };
      const totalCostItem = validData[1] || { title: "全成本", budget: 0, real: 0, rate: 0, diff: 0 };

      // 整合flag字段到收入/全成本数据中
      this.incomeData = {
        ...incomeItem,
        flag: this.getRateFlag(incomeItem.rate)
      };

      this.totalCostData = {
        ...totalCostItem,
        flag: this.getRateFlag(totalCostItem.rate)
      };

      // 调试：确认数据赋值正确
      console.log('整合flag后的收入数据：', this.incomeData);
      console.log('整合flag后的全成本数据：', this.totalCostData);
    }
  }
}
</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>