cfc/cfc-frontend/components/indicator/IndicatorIncompleteBanner.vue

<template>
  <view v-if="visible" class="incomplete-banner" :class="toneClass">
    <text class="banner-icon">ⓘ</text>
    <text class="banner-text">{{ bannerText }}</text>
  </view>
</template>

<script>
/**
 * IndicatorIncompleteBanner —— 残缺横幅（P0 红线，不可裁剪）
 *
 * 文案契约（design §1.2.2 / PRD §5.3 ②·5，四条件）：
 *   0 < pointsCount < totalReportCount → 「共 N 份报告，本指标目前 M 期数据（历史数据整理中）」（橙）
 *   pointsCount == 0 && total > 0       → 「共 N 份报告，本指标暂无可显示的历史数据」（橙）
 *   pointsCount == 0 && total == 0      → 「该成员暂无报告数据」（灰）
 *   pointsCount == totalReportCount     → 横幅隐藏（数据完整，无需解释）
 *
 * 硬性禁止：任何路径下均不得出现孤立的「暂无趋势数据」。
 * 三处复用：indicator-timeline.vue / indicator-curve.vue / report-detail.vue
 */
export default {
  name: 'IndicatorIncompleteBanner',
  props: {
    /** 本指标已具备的期数 */
    pointsCount: { type: Number, required: true },
    /** 该成员（该报告类型）的报告总份数 */
    totalReportCount: { type: Number, required: true }
  },
  computed: {
    visible: function() {
      var pc = this.pointsCount || 0
      var tc = this.totalReportCount || 0
      // 数据完整 → 隐藏
      if (pc === tc) return false
      // 有报告但无期次 → 显示「暂无可显示的历史数据」
      if (pc === 0 && tc > 0) return true
      // 有期次但少于报告数 → 显示「历史数据整理中」
      if (pc > 0 && pc < tc) return true
      // pc > tc（脏数据兜底）→ 隐藏，避免误导
      return false
    },
    toneClass: function() {
      var pc = this.pointsCount || 0
      var tc = this.totalReportCount || 0
      // 无任何报告 → 灰；其余残缺态 → 橙
      return (pc === 0 && tc === 0) ? 'banner-gray' : 'banner-orange'
    },
    bannerText: function() {
      var pc = this.pointsCount || 0
      var tc = this.totalReportCount || 0
      if (pc === 0 && tc === 0) return '该成员暂无报告数据'
      if (pc === 0) return '共 ' + tc + ' 份报告，本指标暂无可显示的历史数据'
      return '共 ' + tc + ' 份报告，本指标目前 ' + pc + ' 期数据（历史数据整理中）'
    }
  }
}
</script>

<style scoped lang="scss">
.incomplete-banner {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 10rpx 16rpx;
  margin: 16rpx 0;
  border-radius: 8rpx;
}
.banner-icon {
  font-size: 22rpx;
  margin-right: 8rpx;
  line-height: 30rpx;
}
.banner-text {
  flex: 1;
  font-size: 20rpx;
  line-height: 30rpx;
}
.banner-orange {
  background: #FFF7ED;
}
.banner-orange .banner-icon {
  color: #EA580C;
}
.banner-orange .banner-text {
  color: #C2410C;
}
.banner-gray {
  background: #F8FAFC;
}
.banner-gray .banner-icon {
  color: #94A3B8;
}
.banner-gray .banner-text {
  color: #64748B;
}
</style>