yudao-dev/src/views/home/fullCostAnalysisComponents/monthlyOverview.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 class="dashboard">
            <div class="title">
              {{ month }}月完成率
            </div>
            <div class="number">
              <div class="yield">
                {{ formatRate(factoryData?.completeRate) }}%
              </div>
              <div class="mom">
                环比{{ formatRate(factoryData?.thb) }}%
                <img v-if="factoryData?.thb >= 0" class="arrow" src="../../../assets/img/topArrow.png" alt="上升">
                <img v-else class="arrow" src="../../../assets/img/downArrow.png" alt="下降">
              </div>
            </div>
          </div>
          <div class="line" style="padding: 0px;">
            <!-- 传递包含flag的factoryData给柱状图组件 -->
            <verticalBarChart :detailData="factoryData"></verticalBarChart>
          </div>
        </div>
      </div>
    </Container>
  </div>
</template>

<script>
import Container from './container.vue'
import electricityGauge from './electricityGauge.vue'
import verticalBarChart from './verticalBarChart.vue'
// 引入箭头图片（根据实际路径调整，若模板中直接用路径可注释）

export default {
  name: 'ProductionStatus',
  components: { Container, electricityGauge, verticalBarChart },
  props: {
    monData: {
      type: Object,
      default: () => ({})
    },
    title: {
      type: String,
      default: ''
    },
    month: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      chart: null,
    }
  },
  computed: {
    /**
     * 自动提取monData中的工厂数据，并新增flag字段
     */
    factoryData() {
      const factoryKeys = Object.keys(this.monData);
      if (factoryKeys.length === 0) {
        // 无数据时返回兜底对象（包含flag）
        return {
          completeRate: 0,
          diff: 0,
          real: 0,
          target: 0,
          thb: 0,
          flag: 0 // 兜底flag
        };
      }
      const firstKey = factoryKeys[0];
      const rawData = this.monData[firstKey];
      // 整合原始数据 + 计算flag
      return {
        completeRate: 0,
        diff: 0,
        real: 0,
        target: 0,
        thb: 0,
        ...rawData,
        flag: rawData.completeRate >= 100 ? 1 : 0
      };
    }
  },
  methods: {
    /**
     * 格式化百分比数值：处理空值/非数字，兜底为0
     */
    formatRate(value) {
      if (isNaN(value) || value === null || value === undefined) {
        return 0;
      }
      return value;
    },
  }
}
</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: 264px;
  height: 205px;
  background: #F9FCFF;
  padding: 16px 0 0 10px;

  .title {
    height: 18px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 18px;
    color: #000000;
    line-height: 18px;
    letter-spacing: 2px;
  }

  .number {
    font-family: YouSheBiaoTiHei;
    font-size: 46px;
    color: #0B58FF;
    letter-spacing: 2px;
    text-align: center;
    font-style: normal;
    white-space: nowrap;
    margin-top: 20px;
  }

  .mom {
    height: 18px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 20px;
    color: #000000;
    line-height: 18px;
    letter-spacing: 1px;
    text-align: center;
    font-style: normal;
    margin-top: 20px;
  }

  // 箭头样式优化
  .arrow {
    width: 16px;
    height: 16px;
    object-fit: contain;
  }
}

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