toid-client/src/views/statistics/sample-statistics/index.vue

<template>
  <div class="sample-statistics">
    <!-- Top: Statistics & Time Filter -->
    <el-row :gutter="20" class="top-bar">
      <el-col :span="12">
        <div class="stat-box">
          <div class="stat-title">样本统计</div>
          <!-- <div class="stat-value">{{ totalSamples }}</div> -->
        </div>
      </el-col>
      <el-col :span="12" class="filter-col">
        <el-select v-model="selectedRange" placeholder="选择时间范围" @change="onRangeChange" size="small">
          <el-option label="24小时" value="24h"></el-option>
          <el-option label="三天" value="3d"></el-option>
          <el-option label="五天" value="5d"></el-option>
          <el-option label="七天" value="7d"></el-option>
        </el-select>
      </el-col>
    </el-row>

    <!-- Middle: Line Chart -->
    <div class="chart-section">
      <div ref="lineChart" class="line-chart"></div>
    </div>

    <!-- Bottom: Pie Charts -->
    <el-row :gutter="20" class="pie-row">
      <el-col :span="12">
        <div class="pie-title">样本类型占比</div>
        <div ref="typePieChart" class="pie-chart"></div>
      </el-col>
      <el-col :span="12">
        <div class="pie-title">检出物占比</div>
        <div ref="detectedPieChart" class="pie-chart"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'SampleStatistics',
  data() {
    return {
      selectedRange: '24h',
      totalSamples: 1234,
      lineChart: null,
      typePieChart: null,
      detectedPieChart: null,
      lineData: [],
      typePieData: [],
      detectedPieData: [],
    }
  },
  mounted() {
    this.initCharts()
    this.fetchData()
  },
  methods: {
    onRangeChange() {
      this.fetchData()
    },
    fetchData() {
      // 模拟数据，根据selectedRange更新
      const now = new Date()
      let days = 1
      if (this.selectedRange === '3d') days = 3
      if (this.selectedRange === '5d') days = 5
      if (this.selectedRange === '7d') days = 7

      // 生成日期
      const xData = []
      const analysisData = []
      const adoptionData = []
      for (let i = days - 1; i >= 0; i--) {
        const d = new Date(now)
        d.setDate(now.getDate() - i)
        xData.push(`${d.getMonth() + 1}-${d.getDate()}`)
        analysisData.push(Math.floor(Math.random() * 100 + 100))
        adoptionData.push(Math.floor(Math.random() * 80 + 50))
      }
      this.lineData = { xData, analysisData, adoptionData }

      // 饼图数据
      this.typePieData = [
        { value: 335, name: '血液' },
        { value: 310, name: '尿液' },
        { value: 234, name: '唾液' },
        { value: 135, name: '其他' }
      ]
      this.detectedPieData = [
        { value: 400, name: '物质A' },
        { value: 335, name: '物质B' },
        { value: 310, name: '物质C' },
        { value: 234, name: '其他' }
      ]
      this.totalSamples = analysisData.reduce((a, b) => a + b, 0)
      this.updateCharts()
    },
    initCharts() {
      this.lineChart = echarts.init(this.$refs.lineChart)
      this.typePieChart = echarts.init(this.$refs.typePieChart)
      this.detectedPieChart = echarts.init(this.$refs.detectedPieChart)
    },
    updateCharts() {
      // 折线图
      this.lineChart.setOption({
        tooltip: { trigger: 'axis' },
        legend: { data: ['数据分析量', '收养量'] },
        xAxis: { type: 'category', data: this.lineData.xData },
        yAxis: { type: 'value', name: '数量' },
        series: [
          {
            name: '数据分析量',
            type: 'line',
            smooth: true,
            data: this.lineData.analysisData
          },
          {
            name: '收养量',
            type: 'line',
            smooth: true,
            data: this.lineData.adoptionData
          }
        ]
      })
      // 样本类型饼图
      this.typePieChart.setOption({
        tooltip: { trigger: 'item' },
        legend: { bottom: 0 },
        series: [
          {
            name: '样本类型',
            type: 'pie',
            radius: '60%',
            data: this.typePieData,
            emphasis: {
              itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' }
            }
          }
        ]
      })
      // 检出物饼图
      this.detectedPieChart.setOption({
        tooltip: { trigger: 'item' },
        legend: { bottom: 0 },
        series: [
          {
            name: '检出物',
            type: 'pie',
            radius: '60%',
            data: this.detectedPieData,
            emphasis: {
              itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' }
            }
          }
        ]
      })
    }
  }
}
</script>

<style scoped>
.sample-statistics {
  padding: 24px;
  background: #fff;
}
.top-bar {
  margin-bottom: 24px;
  align-items: center;
}
.stat-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 60px;
}
.stat-title {
  font-size: 16px;
  color: #888;
}
.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #409EFF;
}
.filter-col {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.chart-section {
  margin-bottom: 24px;
}
.line-chart {
  width: 100%;
  height: 320px;
}
.pie-row {
  margin-top: 12px;
}
.pie-chart {
  width: 100%;
  height: 260px;
}
.pie-title {
  text-align: center;
  font-size: 16px;
  margin-bottom: 8px;
  color: #333;
}
</style>