soilgd12/src/components/detectionStatistics/irrigationstatistics.vue

<template>
  <div class="boxplot-container">
    <div class="chart-container">
      <div class="header">
        <div class="chart-title">{{ $t('DetectionStatistics.irrigationWaterHeavyMetal') }}</div>
        <p>{{ $t('DetectionStatistics.distributionDescription') }}</p>
        <p class="sample-subtitle">{{ $t('DetectionStatistics.sampleSource') }}{{ totalPoints }}{{ $t('DetectionStatistics.sampleDataCount') }}</p>
      </div>

      <div v-if="isLoading" class="loading-state">
        <span class="spinner"></span> {{ $t('DetectionStatistics.dataLoading') }}
      </div>

      <div v-else-if="error" class="error-state">
        ❌ {{ $t('DetectionStatistics.loadingFailed') }}{{ error.message }}
      </div>

      <div v-else>
        <div class="chart-wrapper">
          <v-chart :option="chartOption" autoresize />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import VChart from 'vue-echarts'
import { api8000 } from '@/utils/request'
import { ref, onMounted, computed, watch } from 'vue'
import { useI18n } from 'vue-i18n'

export default {
  components: { VChart },
  setup() {
    const { t } = useI18n()
    const { locale } = useI18n()

    // -------- 基本状态 --------
    const apiUrl = ref('/api/vector/stats/water_sampling_data')
    const apiTimestamp = ref(null)
    const statsData = ref({})
    const chartOption = ref({})
    const isLoading = ref(true)
    const error = ref(null)
    
    // 样本数统计
    const totalPoints = computed(() => {
      const firstMetalKey = getHeavyMetals()[0]?.key
      return statsData.value[firstMetalKey]?.count || 0
    })

    // 缓存每个品类的统计量
    const statsByIndex = ref([])

    // -------- 配置：金属字段 - 改为函数形式 --------
    const getHeavyMetals = () => [
      { key: 'cr_concentration', name: t('DetectionStatistics.chromium'), color: '#FF9800' },
      { key: 'as_concentration', name: t('DetectionStatistics.arsenic'), color: '#4CAF50' },
      { key: 'cd_concentration', name: t('DetectionStatistics.cadmium'), color: '#9C27B0' },
      { key: 'hg_concentration', name: t('DetectionStatistics.mercury'), color: '#2196F3' },
      { key: 'pb_concentration', name: t('DetectionStatistics.lead'), color: '#F44336' }
    ]

    // -------- 构建箱线数据 --------
    const buildBoxplotData = () => {
      const heavyMetals = getHeavyMetals()
      const xAxisData = heavyMetals.map(m => m.name)

      statsByIndex.value = heavyMetals.map(metal => {
        const stat = statsData.value[metal.key] || {}
        return {
          key: metal.key,
          name: metal.name,
          min: stat.min,
          q1: stat.q1,
          median: stat.median,
          q3: stat.q3,
          max: stat.max,
          color: metal.color
        }
      })

      const data = statsByIndex.value.map(s => {
        if (s.min === undefined || s.min === null) {
          return [null, null, null, null, null]
        }
        return [s.min, s.q1, s.median, s.q3, s.max]
      })

      return { xAxisData, data }
    }

    // -------- 初始化图表 --------
    const initChart = () => {
      const { xAxisData, data } = buildBoxplotData()

      chartOption.value = {
        tooltip: {
          trigger: 'item',
          formatter: (params) => {
            const s = statsByIndex.value[params.dataIndex]
            if (!s || s.min === null) {
              return `<div style="font-weight:bold;color:#f56c6c">${xAxisData[params.dataIndex]}</div><div>${t('DetectionStatistics.noValidData')}</div>`
            }
            return `<div style="font-weight:bold">${xAxisData[params.dataIndex]}</div>
              <div style="margin-top:8px">
                <div>${t('DetectionStatistics.minValue')}：<span style="color:#5a5;">${s.min.toFixed(4)}</span></div>
                <div>${t('DetectionStatistics.q1Value')}：<span style="color:#d87a80;">${s.q1.toFixed(4)}</span></div>
                <div>${t('DetectionStatistics.medianValue')}：<span style="color:#f56c6c;font-weight:bold;">${s.median.toFixed(4)}</span></div>
                <div>${t('DetectionStatistics.q3Value')}：<span style="color:#d87a80;">${s.q3.toFixed(4)}</span></div>
                <div>${t('DetectionStatistics.maxValue')}：<span style="color:#5a5;">${s.max.toFixed(4)}</span></div>
              </div>`
          },
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
          name: t('DetectionStatistics.heavyMetalType'),
          nameLocation: 'middle',
          nameGap: 30,
          axisLabel: { color: '#555', rotate: 0, fontWeight: 'bold', fontSize: 11 }
        },
        yAxis: {
          type: 'value',
          name: 'ug/L',
          nameTextStyle: { fontSize: 12 }, 
          nameLocation: 'end',
          nameGap: 8,
          axisLabel: { color: '#555', fontWeight: 'bold', fontSize: 11 },
          splitLine: { lineStyle: { color: '#f0f0f0' } }
        },
        series: [{
          name: t('DetectionStatistics.concentrationDistribution'),
          type: 'boxplot',
          data,
          itemStyle: {
            color: (p) => (getHeavyMetals()[p.dataIndex]?.color || '#1890ff'),
            borderWidth: 2
          },
          emphasis: {
            itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0,0,0,0.2)', borderWidth: 3 }
          }
        }],
        grid: { top: '10%', right: '3%', left: '6%', bottom: '10%' }
      }

      isLoading.value = false
    }

    // -------- 拉取接口并绘图 --------
    onMounted(async () => {
      try {
        const response = await api8000.get(apiUrl.value)
        statsData.value = response.data.data
        apiTimestamp.value = new Date().toLocaleString()
        initChart()
      } catch (err) {
        error.value = err
        isLoading.value = false
        console.error('接口请求失败：', err)
      }
    })

    // 监听语言变化，重新初始化图表
    watch(locale, () => {
      console.log('语言切换，重新初始化图表')
      initChart()
    })

    return {
      apiUrl,
      apiTimestamp,
      chartOption,
      isLoading,
      error,
      totalPoints
    }
  }
}
</script>

<style scoped>
.boxplot-container {
  width: 100%;
  height: 300px;
  max-width: 1000px;
  margin: 0 auto;
}
.header { 
  text-align: left;
   margin-bottom: 10px; 
}

.header h2 { 
  font-size: 0.6rem; 
  color: #333; 
  margin-bottom: 4px;
 }
.header p { 
  font-size: 0.6rem; 
  color: #666;
  margin: 0; 
}
.loading-state { 
  text-align: center;
   padding: 40px 0;
   color: #666; 
}
.loading-state .spinner {
  display: inline-block; width: 24px; height: 24px; margin-right: 8px;
  border: 3px solid #ccc; border-top-color: #1890ff; border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.error-state { text-align: center; padding: 40px 0; color: #f56c6c; }
.chart-wrapper { width: 100%; height: 220px; }
.chart-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  height: 100%;
  box-sizing: border-box;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
}

.chart-title {
  font-size: 14px;
  color: #2980b9;
  font-weight: 600;
}

.title-group {
    display: flex;
    align-items: left;
}

.sample-subtitle {
  font-size: 0.85rem;
  color: #888;
  margin-top: 4px;
}
</style>