cfc/cfc-frontend/components/HealthDimensionsSection.vue

<template>
  <view class="hds-section">
    <!-- 健康指数 -->
    <view class="hds-health-index" v-if="healthData && healthData.healthIndex">
      <view class="index-circle">
        <text class="index-value">{{ healthData.healthIndex }}</text>
        <text class="index-label">健康指数</text>
      </view>
    </view>

    <!-- 七维健康雷达 -->
    <view class="hds-radar" v-if="healthData && healthData.dimensions">
      <view class="radar-title">七维健康雷达</view>
      <view class="radar-wrap">
        <view class="radar-center">
          <view class="radar-grid">
            <view class="grid-ring ring-3"></view>
            <view class="grid-ring ring-2"></view>
            <view class="grid-ring ring-1"></view>
          </view>
          <view class="radar-spokes">
            <view
              class="spoke-item"
              v-for="(dim, idx) in healthData.dimensions"
              :key="dim.dimension"
              :style="spokeStyles[idx]"
            >
              <view class="spoke-dot" :class="'level-' + dim.level"></view>
              <view class="spoke-label">{{ dim.label }}</view>
              <view class="spoke-score">{{ dim.score || '--' }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 维度列表 -->
    <view class="hds-dim-list" v-if="healthData && healthData.dimensions">
      <view
        class="dim-card"
        v-for="dim in healthData.dimensions"
        :key="dim.dimension"
        @click="goDimDetail(dim)"
      >
        <view class="dim-header">
          <text class="dim-label">{{ dim.label }}</text>
          <text class="dim-score" :class="'score-' + dim.level">{{ dim.score || '--' }}分</text>
        </view>
        <view class="dim-bar-wrap">
          <view class="dim-bar-bg">
            <view
              class="dim-bar-fill"
              :class="'fill-' + dim.level"
              :style="{ width: (dim.score || 0) + '%' }"
            ></view>
          </view>
          <text class="dim-norms" v-if="dim.normMin && dim.normMax">
            正常范围 {{ dim.normMin }}-{{ dim.normMax }}
          </text>
        </view>
        <view class="dim-footer">
          <text class="dim-level-tag" :class="'tag-' + dim.level">{{ getLevelText(dim.level) }}</text>
          <text class="dim-source" v-if="dim.trend">{{ dim.trend === 'up' ? '↑ 上升' : dim.trend === 'down' ? '↓ 下降' : '→ 稳定' }}</text>
        </view>
      </view>
    </view>

    <!-- 空数据 -->
    <view class="hds-empty" v-if="!healthData">
      <text class="empty-tip">暂无维度数据</text>
      <text class="empty-sub">上传健康报告或填写问卷后可查看</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    healthData: {
      type: Object,
      default: null
    },
    activeChildId: {
      type: [Number, String],
      default: null
    }
  },
  computed: {
    spokeStyles: function() {
      if (!this.healthData || !this.healthData.dimensions) return []
      var cache = []
      var dims = this.healthData.dimensions
      for (var i = 0; i < dims.length; i++) {
        var angle = i * 51.4 - 90
        var radius = 85
        var normalizedScore = (dims[i].score || 0) / 100
        var translateY = -radius * normalizedScore
        cache.push({
          transform: 'rotate(' + angle + 'deg) translateY(' + translateY + 'px)',
          '-webkit-transform': 'rotate(' + angle + 'deg) translateY(' + translateY + 'px)'
        })
      }
      return cache
    }
  },
  methods: {
    getLevelText: function(level) {
      var map = {
        'excellent': '优秀',
        'good': '良好',
        'fair': '一般',
        'poor': '较差',
        'none': '暂无数据'
      }
      return map[level] || ''
    },
    goDimDetail: function(dim) {
      if (!dim || !dim.dimension) return
      var childId = this.activeChildId || ''
      uni.navigateTo({
        url: '/pages/body-detail/dimension-detail?dimension=' + dim.dimension + '&childId=' + childId
      })
    }
  }
}
</script>

<style scoped>
.hds-section {
  margin: 0 30rpx 20rpx;
}
.hds-health-index {
  display: flex;
  justify-content: center;
  padding: 30rpx;
  background: #fff;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
}
.index-circle {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF8C42, #FF6B35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.index-value {
  font-size: 48rpx;
  font-weight: bold;
  line-height: 1;
}
.index-label {
  font-size: 22rpx;
  opacity: 0.9;
  margin-top: 8rpx;
}
.hds-radar {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}
.radar-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
  text-align: center;
}
.radar-wrap {
  display: flex;
  justify-content: center;
}
.radar-center {
  width: 440rpx;
  height: 440rpx;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.radar-grid {
  position: absolute;
  width: 100%;
  height: 100%;
}
.grid-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid #ddd;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.ring-1 { width: 33%; height: 33%; }
.ring-2 { width: 66%; height: 66%; }
.ring-3 { width: 100%; height: 100%; }
.radar-spokes {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.spoke-item {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: center center;
  width: 80rpx;
  margin-left: -40rpx;
  top: 10rpx;
}
.spoke-dot {
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background: #FF8C42;
  margin-bottom: 6rpx;
}
.spoke-dot.level-excellent { background: #10B981; }
.spoke-dot.level-good { background: #3B82F6; }
.spoke-dot.level-fair { background: #F59E0B; }
.spoke-dot.level-poor { background: #EF4444; }
.spoke-dot.level-none { background: #ddd; }
.spoke-label {
  font-size: 22rpx;
  color: #333;
  white-space: nowrap;
}
.spoke-score {
  font-size: 20rpx;
  color: #666;
  margin-top: 2rpx;
}
.hds-dim-list {
  padding: 0;
}
.dim-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
}
.dim-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}
.dim-label {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}
.dim-score {
  font-size: 36rpx;
  font-weight: bold;
  color: #FF8C42;
}
.dim-score.score-excellent { color: #10B981; }
.dim-score.score-good { color: #3B82F6; }
.dim-score.score-fair { color: #F59E0B; }
.dim-score.score-poor { color: #EF4444; }
.dim-bar-wrap {
  margin-bottom: 12rpx;
}
.dim-bar-bg {
  height: 16rpx;
  background: #f0f0f0;
  border-radius: 8rpx;
  overflow: hidden;
  margin-bottom: 6rpx;
}
.dim-bar-fill {
  height: 100%;
  border-radius: 8rpx;
  background: #FF8C42;
  transition: width 0.3s;
}
.dim-bar-fill.fill-excellent { background: #10B981; }
.dim-bar-fill.fill-good { background: #3B82F6; }
.dim-bar-fill.fill-fair { background: #F59E0B; }
.dim-bar-fill.fill-poor { background: #EF4444; }
.dim-norms {
  font-size: 22rpx;
  color: #999;
}
.dim-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dim-level-tag {
  font-size: 22rpx;
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
  background: #f0f0f0;
  color: #666;
}
.dim-level-tag.tag-excellent { background: #D1FAE5; color: #10B981; }
.dim-level-tag.tag-good { background: #DBEAFE; color: #3B82F6; }
.dim-level-tag.tag-fair { background: #FEF3C7; color: #F59E0B; }
.dim-level-tag.tag-poor { background: #FEE2E2; color: #EF4444; }
.dim-source {
  font-size: 22rpx;
  color: #999;
}
.hds-empty {
  padding: 80rpx 30rpx;
  text-align: center;
}
.hds-empty .empty-tip {
  font-size: 30rpx;
  color: #999;
  display: block;
  margin-bottom: 16rpx;
}
.hds-empty .empty-sub {
  font-size: 24rpx;
  color: #ccc;
  display: block;
}
</style>