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="1"></el-option>
          <el-option label="近3天(72小时)" value="2"></el-option>
          <el-option label="近7天" value="3"></el-option>
          <el-option label="近30天" value="4"></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';
import {getjcwzbInfo, getyblxtjInfo, getybtjInfo} from '@/api/statistics/report';
export default {
  name: 'SampleStatistics',
  data() {
    return {
      selectedRange: '1',
      totalSamples: 1234,
      lineChart: null,
      typePieChart: null,
      detectedPieChart: null,
      lineData: [],
      typePieData: [],
      detectedPieData: [],
    }
  },
  mounted() {
    this.initCharts()
    this.fetchData()
  },
  methods: {
    onRangeChange() {
      this.fetchData()
    },
   async fetchData() {
    const response =  await getjcwzbInfo(this.selectedRange)
     if (response.data ) {
          let arr = []
          for(let k in response.data) {
            arr.push({
              name: k,
              value: response.data[k]
            })
          }
          this.detectedPieData = [...arr];
        }
   const res = await getyblxtjInfo(this.selectedRange)
       if (res.data ) {
          let arr = []
          for(let k in res.data) {
            arr.push({
              name: k,
              value: res.data[k]
            })
          }
          this.typePieData = [...arr];
        }
     const result = await getybtjInfo(this.selectedRange)
      const analysisData = []
      const adoptionData = []
      // 生成日期
      const xData = []
      if (result.data ) {
        result.data.forEach(item => {
          analysisData.push(item.fxl)
          adoptionData.push(item.ybl)
          xData.push(item.hour)
        })
      }
      // 模拟数据，根据selectedRange更新
      // const now = new Date()
      // let days = 1
      // if (this.selectedRange === '2') days = 3
      // if (this.selectedRange === '3') days = 7
      // if (this.selectedRange === '4') days = 30



      // 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>