yudao-dev/src/views/home/unitPriceAnalysisComponents/monthlyRelatedMetrics.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;">
          <!-- 销量图表：传递销量数据 + 完成率flag -->
          <div class="dashboard left" @click="handleDashboardClick('/salesVolumeAnalysis/salesVolumeAnalysisBase')">
            <div class="title">
              销量·万㎡
            </div>
            <div class="chart-wrap">
              <operatingSingleBar :detailData="{
                ...(relatedMon.销量 || defaultData),
  flag: getRateFlag((relatedMon.销量 || defaultData).completeRate, (relatedMon.销量 || defaultData).real, (relatedMon.销量 || defaultData).target,)
              }" />
            </div>
          </div>
          <!-- 成本图表：传递全成本数据 + 完成率flag -->
          <div class="dashboard right" @click="handleDashboardClick('/fullCostAnalysis/fullCostAnalysisBase')">
            <div class="title">
              成本·元/㎡
            </div>
            <div class="chart-wrap">
              <operatingSingleBar :detailData="{
  ...(relatedMon.成本 || defaultData),
  flag: getRateFlag((relatedMon.成本 || defaultData).completeRate, (relatedMon.成本 || defaultData).real, (relatedMon.成本 || defaultData).target)
              }" />
            </div>
          </div>

          <!-- 运费图表：传递单价数据 + 完成率flag -->
          <div class="dashboard right">
            <div class="title">
              运费·万元
            </div>
            <div class="chart-wrap">
              <operatingSingleBar :detailData="{
                ...(relatedMon.运费 || defaultData),
  flag: getRateFlag((relatedMon.运费 || defaultData).completeRate, (relatedMon.运费 || defaultData).real, (relatedMon.运费 || defaultData).target)
              }" />
            </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: {
    relatedMon: {
      type: Object,
      default: () => ({
        运费: { completeRate: 0, diff: 0, real: 0, target: 0, thb: 0 },
        成本: { completeRate: 0, diff: 0, real: 0, target: 0, thb: 0 },
        销量: { completeRate: 0, diff: 0, real: 0, target: 0, thb: 0 }
      })
    },
    dateData: {
      type: Object,
      default: () => ({ })
    },
    factory: {
      type: [String, Number],
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      chart: null,
      // 兜底数据：防止字段缺失时报错
      defaultData: {
        completeRate: 0,
        diff: 0,
        real: 0,
        target: 0,
        thb: 0
      }
    }
  },
  watch: {
    relatedMon: {
      handler(newValue) {
        this.updateChart()
      },
      immediate: true, // 初始化时立即执行
      deep: true
    }
  },
  mounted() {
    // 初始化图表
    this.$nextTick(() => this.updateChart())
  },
  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为0，≥100为1）
     * @param {number} rate 完成率（原始值，如89代表89%）
     * @returns {0|1} flag值
     */
getRateFlag(rate, real, target) {
  if (isNaN(rate) || rate === null || rate === undefined) return 0;

  // 1. 完成率 >= 100 => 达标
  if (rate >= 100) return 1;

  // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
  if (rate === 0 && target === 0) return 1;

  // 其他情况 => 未达标
  return 0;
},

    /**
     * 图表更新方法：可在这里补充全局的图表刷新逻辑
     * 若子组件内部已监听 chartData 变化，此方法可留空或补充额外逻辑
     */
    updateChart() {
      // console.log('数据更新，当前relatedMon:', this.relatedMon)
      // // 打印各维度的flag值，方便调试
      // console.log('销量flag:', this.getRateFlag(this.relatedMon.销量.completeRate))
      // console.log('成本flag:', this.getRateFlag(this.relatedMon.成本.completeRate))
      // console.log('运费flag:', this.getRateFlag(this.relatedMon.运费.completeRate))
    }
  }
}
</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: 250px;
  height: 205px;
  background: #F9FCFF;
  padding: 16px 0 0 16px;
  box-sizing: border-box; // 防止内边距撑大容器

  .title {
    height: 18px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 18px;
    color: #000000;
    line-height: 18px;
    letter-spacing: 2px;
    margin-bottom: 12px; // 标题和图表增加间距
  }

  // 图表容器样式：适配高度
  .chart-wrap {
    width: calc(100% - 16px); // 适配左侧内边距
    height: calc(100% - 46px); // 减去标题高度和间距
  }

  .number {
    display: flex;
    align-items: center;
    gap: 30px;
    height: 32px;
    font-family: YouSheBiaoTiHei;
    font-size: 32px;
    color: #0B58FF;
    line-height: 32px;
    letter-spacing: 2px;
  }

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