cfc/cfc-frontend/pages/body/health-report.vue

<template>
  <view class="report-container">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <text class="nav-back" @click="goBack">‹ 返回</text>
      <text class="nav-title">健康报告详情</text>
      <view class="nav-placeholder"></view>
    </view>

    <!-- 报告头部 -->
    <view class="report-header" v-if="report">
      <view class="report-type-tag">{{ reportTypeLabel }}</view>
      <view class="report-scores">
        <view class="score-item">
          <view class="score-circle-lg">
            <text class="score-num">{{ report.overallScore || '--' }}</text>
            <text class="score-unit">分</text>
          </view>
          <text class="score-label">综合评分</text>
        </view>
        <view class="score-item" v-if="report.gutHealthScore">
          <view class="score-circle-lg score-circle-green">
            <text class="score-num">{{ report.gutHealthScore }}</text>
            <text class="score-unit">分</text>
          </view>
          <text class="score-label">肠道健康</text>
        </view>
      </view>
      <view class="report-info-row" v-if="report.gutAge || report.gutType">
        <text class="info-chip" v-if="report.gutAge">肠道年龄：{{ report.gutAge }}</text>
        <text class="info-chip" v-if="report.gutType">肠道分型：{{ report.gutType }}</text>
      </view>
      <text class="report-date">报告日期：{{ formatDate(report.reportDate) }}</text>
    </view>

    <!-- ===== 评分可视化面板 (仅菌群报告) ===== -->
    <view class="score-dashboard" v-if="report && report.reportType === 'gut_flora'">
      <view class="main-scores">
        <view class="main-score-item" v-for="item in mainScores" :key="item.key">
          <view class="score-ring-wrap">
            <svg width="140" height="140" viewBox="0 0 120 120">
              <circle cx="60" cy="60" r="50" fill="none" stroke="#EEEEEE" stroke-width="8"/>
              <circle cx="60" cy="60" r="50" fill="none" v-bind:stroke="item.color" stroke-width="8" v-bind:stroke-dasharray="item.circumference" v-bind:stroke-dashoffset="item.offset" stroke-linecap="round" transform="rotate(-90 60 60)"/>
              <text x="60" y="52" text-anchor="middle" font-size="32" font-weight="bold" fill="#333">{{ item.score }}</text>
              <text x="60" y="72" text-anchor="middle" font-size="14" fill="#999">分</text>
            </svg>
          </view>
          <text class="main-score-label">{{ item.label }}</text>
        </view>
      </view>
      <view class="flora-score-row" v-if="hasFloraScores">
        <view class="flora-score-item" v-for="item in floraScores" :key="item.key">
          <view class="flora-score-circle" v-bind:style="{ background: item.color }">
            <text class="flora-score-num">{{ item.score }}</text>
          </view>
          <text class="flora-score-label">{{ item.label }}</text>
        </view>
      </view>
    </view>

    <!-- 指标列表 -->
    <view class="section">
      <view class="section-title">
        <text>指标明细</text>
        <text class="section-sub">共 {{ indicators.length }} 项</text>
      </view>

      <!-- 按分类分组 -->
      <view class="category-group" v-for="group in groupedIndicators" :key="group.name">
        <view class="category-header">
          <text class="category-name">{{ group.name }}</text>
          <text class="category-count">{{ group.items.length }}项</text>
        </view>
        <view class="indicator-card" v-for="ind in group.items" :key="ind._idx">
          <view class="ind-header">
            <text class="ind-name">{{ ind.indicatorName }}</text>
            <view class="ind-status" :class="ind._cls">
              <text>{{ ind._label }}</text>
            </view>
          </view>
          <view class="ind-body">
            <view class="ind-value-wrap">
              <text class="ind-value">{{ ind.indicatorValue || '--' }}</text>
              <text class="ind-unit">{{ ind.unit || '' }}</text>
            </view>
            <text class="ind-ref">参考值：{{ ind.refRange || '暂无' }}</text>
          </view>
        </view>
      </view>

      <view class="empty-indicators" v-if="indicators.length === 0 && !loading">
        <text>暂无指标数据</text>
      </view>
    </view>

    <!-- ===== 营养缺乏分析 ===== -->
    <view class="section" v-if="deficiencyRecords && deficiencyRecords.length > 0">
      <view class="section-title">
        <text>🔬 营养缺乏分析</text>
        <text class="section-sub">{{ deficiencyRecords.length }}项</text>
      </view>
      <view class="deficiency-list">
        <view class="deficiency-card" v-for="dr in deficiencyRecords" :key="dr.nutrient">
          <view class="deficiency-header">
            <text class="deficiency-nutrient">{{ dr.nutrient }}</text>
            <view class="deficiency-type-tag" :class="'dtype-' + dr.deficiencyType">
              <text>{{ getDeficiencyTypeLabel(dr.deficiencyType) }}</text>
            </view>
          </view>
          <view class="deficiency-severity-row">
            <view class="severity-bar">
              <view class="severity-fill" :style="{ width: (dr.severity * 100) + '%', background: getSeverityColor(dr.severity) }"></view>
            </view>
            <text class="severity-val">{{ dr.severity }}</text>
          </view>
          <view class="deficiency-meta" v-if="dr.indicatorName">
            <text class="meta-label">关联指标：</text>
            <text class="meta-value">{{ dr.indicatorName }} ({{ dr.indicatorValue }})</text>
          </view>
          <view class="deficiency-foods" v-if="dr.foodSuggestions">
            <text class="foods-label">推荐食物：</text>
            <text class="foods-value">{{ dr.foodSuggestions }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- ===== 五维雷达图 (菌群报告) ===== -->
    <view class="section" v-if="report && report.reportType === 'gut_flora' && radarDimensions.length > 0">
      <view class="section-title">
        <text>五维雷达图</text>
      </view>
      <view class="radar-wrap">
        <canvas canvas-id="radarCanvas" id="radarCanvas" class="radar-canvas" @touchstart.prevent></canvas>
      </view>
    </view>

    <!-- 底部占位 -->
    <view class="bottom-spacer"></view>

    <!-- 营养分析入口按钮 -->
    <view class="nutrition-fab" @click="goNutritionChat" v-if="report">
      <text class="fab-icon">🥗</text>
      <text class="fab-text">精准营养分析</text>
    </view>
  </view>
</template>

<script>
import config from '@/config.js'
import { getDeficiencyAnalysis } from '@/utils/api.js'

const healthRequest = function(url, data) {
  var token = uni.getStorageSync('token')
  return new Promise(function(resolve, reject) {
    uni.request({
      url: config.API_BASE_URL + url,
      method: 'POST',
      data: data,
      header: {
        'Content-Type': 'application/json',
        'Authorization': token ? 'Bearer ' + token : ''
      },
      success: function(res) {
        if (res.data.code === 200) {
          resolve(res.data)
        } else {
          reject(res.data)
        }
      },
      fail: function(err) {
        reject(err)
      }
    })
  })
}

export default {
  data() {
    return {
      childId: null,
      reportId: null,
      report: null,
      reportDetail: null,
      indicators: [],
      deficiencyRecords: [],
      loading: false
    }
  },
  computed: {
    reportTypeLabel: function() {
      if (!this.report) return ''
      return this.report.reportType === 'gut_flora' ? '肠道检测报告' : '体检报告'
    },
    // 预计算分组，每个指标附加 _cls (CSS类) 和 _label (显示标签)
    groupedIndicators: function() {
      var result = []
      var groupMap = {}
      var idx = 0
      for (var i = 0; i < this.indicators.length; i++) {
        var ind = this.indicators[i]
        var cat = ind.category || '其他'
        // Compute status css class
        var cls = 'status-normal'
        var label = '正常'
        var status = ind.status || ''
        var s = status.toLowerCase()
        if (s.indexOf('偏高') !== -1 || s.indexOf('过高') !== -1 || s.indexOf('concern') !== -1) {
          cls = 'status-warning'
          label = '偏高'
        } else if (s.indexOf('偏低') !== -1 || s.indexOf('过低') !== -1 || s.indexOf('注意') !== -1 || s.indexOf('warning') !== -1) {
          cls = 'status-warn'
          label = '偏低'
        } else if (s.indexOf('正常') !== -1 || s.indexOf('normal') !== -1 || s.indexOf('低风险') !== -1) {
          cls = 'status-normal'
          label = '正常'
        } else if (status) {
          label = status
        }
        ind._cls = cls
        ind._label = label
        ind._idx = idx
        idx++
        // Group
        if (!groupMap[cat]) {
          groupMap[cat] = { name: cat, items: [] }
          result.push(groupMap[cat])
        }
        groupMap[cat].items.push(ind)
      }
      return result
    },
    circumference: function() {
      return Math.round(2 * Math.PI * 50)
    },
    mainScores: function() {
      if (!this.report) return []
      var items = []
      var r = this.report
      var pairs = [
        {key:'overall', label:'综合评分', score: r.overallScore, color:'#5B9BD5'},
        {key:'gut', label:'肠道健康', score: r.gutHealthScore, color:'#4CAF50'},
        {key:'chronic', label:'慢病控制', score: r.chronicDiseaseScore, color:'#FF9800'},
        {key:'nutrition', label:'营养均衡', score: r.nutritionScore, color:'#2196F3'}
      ]
      var circ = Math.round(2 * Math.PI * 50)
      for (var i = 0; i < pairs.length; i++) {
        var p = pairs[i]
        var s = p.score || 0
        items.push({key: p.key, label: p.label, score: s, color: p.color, circumference: circ, offset: Math.round(circ - (s / 100) * circ)})
      }
      return items
    },
    hasFloraScores: function() {
      if (!this.report) return false
      var r = this.report
      return (r.balanceScore != null) || (r.diversityScore != null) || (r.beneficialScore != null) || (r.harmfulScore != null) || (r.coreGenusScore != null)
    },
    floraScores: function() {
      if (!this.report) return []
      var r = this.report
      var items = []
      var pairs = [
        {key:'balance', label:'菌群平衡', score: r.balanceScore},
        {key:'diversity', label:'菌群多样性', score: r.diversityScore},
        {key:'beneficial', label:'有益菌', score: r.beneficialScore},
        {key:'harmful', label:'有害菌', score: r.harmfulScore},
        {key:'coreGenus', label:'核心菌属', score: r.coreGenusScore}
      ]
      for (var i = 0; i < pairs.length; i++) {
        var p = pairs[i]
        if (p.score != null) {
          var s = p.score
          var color = '#4CAF50'
          if (s < 30) { color = '#F44336' }
          else if (s < 60) { color = '#FFC107' }
          items.push({key: p.key, label: p.label, score: s, color: color})
        }
      }
      return items
    },
    radarDimensions: function() {
      if (!this.report) return []
      var r = this.report
      var dims = []
      if (r.overallScore != null) dims.push({ label: '综合', value: r.overallScore })
      if (r.gutHealthScore != null) dims.push({ label: '肠道', value: r.gutHealthScore })
      if (r.nutritionScore != null) dims.push({ label: '营养', value: r.nutritionScore })
      if (r.chronicDiseaseScore != null) dims.push({ label: '慢病', value: r.chronicDiseaseScore })
      if (r.gutBalanceScore != null) dims.push({ label: '菌群平衡', value: r.gutBalanceScore })
      return dims
    }
  },
  onLoad: function(options) {
    var childId = options.childId
    var reportId = options.reportId
    this.childId = childId ? parseInt(childId) : null
    this.reportId = reportId ? parseInt(reportId) : null
    this.loadData()
  },
  onReady: function() {
    if (this.radarDimensions.length >= 3) {
      this.drawRadarChart()
    }
  },
  methods: {
    loadData: function() {
      var self = this
      uni.showLoading({ title: '加载中...' })
      // Load report + indicators in parallel
      var promises = []
      if (this.reportId) {
        promises.push(healthRequest('/api/health/report/latest', { childId: this.childId }))
        promises.push(healthRequest('/api/health/indicator/list', { reportId: this.reportId }))
      } else if (this.childId) {
        promises.push(healthRequest('/api/health/report/latest', { childId: this.childId }))
      }
      Promise.all(promises.map(function(p) {
        return p.catch(function(e) { return null })
      })).then(function(results) {
        uni.hideLoading()
        if (results[0] && results[0].data) {
          self.report = results[0].data
          self.reportId = self.report.id
          self.loadDeficiencyRecords()
          // Load indicators after getting reportId
          if (self.reportId) {
            healthRequest('/api/health/indicator/list', { reportId: self.reportId }).then(function(res) {
              if (res.data) {
                self.indicators = res.data
              }
            }).catch(function(e) {
              console.log('获取指标失败', e)
            })
            healthRequest('/api/health/report/detail', { reportId: self.reportId }).then(function(res) {
              if (res.data) {
                self.reportDetail = res.data
              }
            }).catch(function(e) {
              console.log('获取报告详情失败', e)
            })
          }
        }
      }).catch(function(e) {
        uni.hideLoading()
        uni.showToast({ title: '加载失败', icon: 'none' })
      })
    },
    goBack: function() {
      uni.navigateBack()
    },
    goNutritionChat: function() {
      if (!this.reportId) return
      uni.navigateTo({
        url: '/pages/ai/chat?mode=nutrition&reportId=' + this.reportId + '&firstMessage=' + encodeURIComponent('请根据这份菌群检测报告，分析我孩子的营养状况并提出建议')
      })
    },
    loadDeficiencyRecords: function() {
      if (!this.childId) return
      var self = this
      getDeficiencyAnalysis(this.childId).then(function(res) {
        if (res.code === 200 && res.data) {
          self.deficiencyRecords = res.data
        }
      }).catch(function(e) {
        console.log('获取缺乏分析失败', e)
      })
    },
    getDeficiencyTypeLabel: function(type) {
      if (type === 'deficiency') return '缺乏'
      if (type === 'excess') return '偏高'
      if (type === 'borderline') return '边界值'
      return '未分类'
    },
    getSeverityColor: function(severity) {
      if (severity >= 0.7) return '#EF4444'
      if (severity >= 0.3) return '#F59E0B'
      return '#10B981'
    },
    drawRadarChart: function() {
      var dims = this.radarDimensions
      if (!dims || dims.length < 3) return
      var ctx = uni.createCanvasContext('radarCanvas', this)
      var cw = 300
      var ch = 300
      var cx = cw / 2
      var cy = ch / 2
      var maxR = 110
      var n = dims.length
      var angleStep = (2 * Math.PI) / n

      for (var level = 1; level <= 5; level++) {
        var r = maxR * (level / 5)
        ctx.setStrokeStyle('#E5E7EB')
        ctx.setLineWidth(1)
        ctx.beginPath()
        for (var j = 0; j < n; j++) {
          var a = j * angleStep - Math.PI / 2
          var x = cx + r * Math.cos(a)
          var y = cy + r * Math.sin(a)
          if (j === 0) ctx.moveTo(x, y)
          else ctx.lineTo(x, y)
        }
        ctx.closePath()
        ctx.stroke()
      }

      for (var k = 0; k < n; k++) {
        var a2 = k * angleStep - Math.PI / 2
        ctx.beginPath()
        ctx.moveTo(cx, cy)
        ctx.lineTo(cx + maxR * Math.cos(a2), cy + maxR * Math.sin(a2))
        ctx.setStrokeStyle('#E5E7EB')
        ctx.setLineWidth(1)
        ctx.stroke()
      }

      ctx.beginPath()
      for (var m = 0; m < n; m++) {
        var angle = m * angleStep - Math.PI / 2
        var val = dims[m].value || 0
        var rr = maxR * (val / 100)
        var px = cx + rr * Math.cos(angle)
        var py = cy + rr * Math.sin(angle)
        if (m === 0) ctx.moveTo(px, py)
        else ctx.lineTo(px, py)
      }
      ctx.closePath()
      ctx.setFillStyle('rgba(249, 115, 22, 0.2)')
      ctx.fill()
      ctx.setStrokeStyle('#F97316')
      ctx.setLineWidth(2)
      ctx.stroke()

      for (var q = 0; q < n; q++) {
        var angle3 = q * angleStep - Math.PI / 2
        var lx = cx + (maxR + 20) * Math.cos(angle3)
        var ly = cy + (maxR + 20) * Math.sin(angle3)
        ctx.setFontSize(11)
        ctx.setFillStyle('#6B7280')
        ctx.setTextAlign('center')
        ctx.setTextBaseline('middle')
        ctx.fillText(dims[q].label + ' ' + (dims[q].value || '--'), lx, ly)
      }

      ctx.draw()
    },
    formatDate: function(dateStr) {
      if (!dateStr) return '--'
      try {
        var d = new Date(dateStr)
        var y = d.getFullYear()
        var m = ('' + (d.getMonth() + 1)).padStart(2, '0')
        var day = ('' + d.getDate()).padStart(2, '0')
        return y + '-' + m + '-' + day
      } catch (e) {
        return dateStr
      }
    }
  }
}
</script>

<style scoped>
.report-container {
  min-height: 100vh;
  background: #f5f7fa;
}

/* ===== 导航栏 ===== */
.nav-bar {
  position: sticky;
  top: 0;
  background: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
  z-index: 100;
}
.nav-back {
  font-size: 32rpx;
  color: #5B9BD5;
}
.nav-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}
.nav-placeholder {
  width: 80rpx;
}

/* ===== 报告头部 ===== */
.report-header {
  background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
  margin: 20rpx 30rpx;
  border-radius: 20rpx;
  padding: 30rpx 24rpx;
}
.report-type-tag {
  display: inline-block;
  background: #1565C0;
  color: #fff;
  font-size: 22rpx;
  padding: 6rpx 20rpx;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
}
.report-scores {
  display: flex;
  flex-direction: row;
  margin-bottom: 20rpx;
}
.score-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 60rpx;
}
.score-circle-lg {
  width: 140rpx;
  height: 140rpx;
  border-radius: 70rpx;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 8rpx;
}
.score-circle-green {
  background: #E8F5E9;
}
.score-num {
  font-size: 48rpx;
  font-weight: bold;
  color: #1565C0;
}
.score-circle-green .score-num {
  color: #2E7D32;
}
.score-unit {
  font-size: 22rpx;
  color: #64B5F6;
}
.score-circle-green .score-unit {
  color: #81C784;
}
.score-label {
  font-size: 24rpx;
  color: #666;
}
.report-info-row {
  display: flex;
  flex-direction: row;
  margin-bottom: 16rpx;
}
.info-chip {
  background: #fff;
  color: #333;
  font-size: 24rpx;
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  margin-right: 16rpx;
}
.report-date {
  font-size: 22rpx;
  color: #888;
}

/* ===== 指标明细 ===== */
.section {
  margin: 20rpx 30rpx;
}
.section-title {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  margin-bottom: 20rpx;
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}
.section-sub {
  font-size: 22rpx;
  color: #999;
  font-weight: normal;
  margin-left: 12rpx;
}
.category-group {
  margin-bottom: 30rpx;
}
.category-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12rpx;
}
.category-name {
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
}
.category-count {
  font-size: 22rpx;
  color: #999;
}
.indicator-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
}
.ind-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12rpx;
}
.ind-name {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}
.ind-status {
  font-size: 22rpx;
  padding: 4rpx 16rpx;
  border-radius: 16rpx;
}
.status-normal {
  background: #E8F5E9;
  color: #2E7D32;
}
.status-warning {
  background: #FFF3E0;
  color: #E65100;
}
.status-warn {
  background: #F3E5F5;
  color: #7B1FA2;
}
.ind-body {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
}
.ind-value-wrap {
  display: flex;
  flex-direction: row;
  align-items: baseline;
}
.ind-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #1565C0;
}
.ind-unit {
  font-size: 24rpx;
  color: #999;
  margin-left: 8rpx;
}
.ind-ref {
  font-size: 22rpx;
  color: #bbb;
}
.empty-indicators {
  text-align: center;
  padding: 60rpx;
  color: #999;
  font-size: 28rpx;
}

/* ===== 底部 ===== */
.bottom-spacer {
  height: 130rpx;
}

/* ===== 营养分析入口 FAB ===== */
.nutrition-fab {
  position: fixed;
  bottom: 40rpx;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #43A047, #66BB6A);
  color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20rpx 40rpx;
  border-radius: 50rpx;
  box-shadow: 0 8rpx 24rpx rgba(67, 160, 71, 0.4);
  z-index: 200;
}

.fab-icon {
  font-size: 36rpx;
  margin-right: 12rpx;
}

.fab-text {
  font-size: 30rpx;
  font-weight: 600;
}

.score-dashboard {
  margin: 20rpx 30rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.main-scores {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}
.main-score-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20rpx;
  width: 45%;
}
.score-ring-wrap {
  margin-bottom: 8rpx;
}
.main-score-label {
  font-size: 24rpx;
  color: #666;
  font-weight: 500;
}
.flora-score-row {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 16rpx;
  padding-top: 20rpx;
  border-top: 2rpx solid #F0F0F0;
}
.flora-score-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.flora-score-circle {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8rpx;
}
.flora-score-num {
  font-size: 28rpx;
  font-weight: bold;
  color: #fff;
}
.flora-score-label {
  font-size: 20rpx;
  color: #888;
}

/* ===== 营养缺乏分析 ===== */
.deficiency-list {
  display: flex;
  flex-direction: column;
}
.deficiency-card {
  background: #FAFAFA;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 12rpx;
}
.deficiency-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12rpx;
}
.deficiency-nutrient {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}
.deficiency-type-tag {
  font-size: 22rpx;
  padding: 4rpx 16rpx;
  border-radius: 16rpx;
  background: #FFF3E0;
  color: #E65100;
}
.dtype-deficiency {
  background: #FEE2E2;
  color: #DC2626;
}
.dtype-excess {
  background: #FFF3E0;
  color: #E65100;
}
.dtype-borderline {
  background: #FEF3C7;
  color: #D97706;
}
.dtype-unclassified {
  background: #F3F4F6;
  color: #6B7280;
}
.deficiency-severity-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 8rpx;
}
.severity-bar {
  flex: 1;
  height: 12rpx;
  background: #F3F4F6;
  border-radius: 6rpx;
  overflow: hidden;
  margin-right: 16rpx;
}
.severity-fill {
  height: 100%;
  border-radius: 6rpx;
}
.severity-val {
  font-size: 24rpx;
  color: #9CA3AF;
  width: 60rpx;
  text-align: right;
}
.deficiency-meta {
  font-size: 22rpx;
  color: #6B7280;
  margin-bottom: 6rpx;
}
.deficiency-foods {
  font-size: 22rpx;
  color: #374151;
  margin-top: 8rpx;
}
.foods-label {
  color: #9CA3AF;
}
.foods-value {
  color: #2E7D32;
}

/* ===== 雷达图 ===== */
.radar-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
.radar-canvas {
  width: 300px;
  height: 300px;
  margin: 0 auto;
}
</style>