~yxh/opo-web.git

<!-- src/views/statistics/donor.vue -->
<template>
  <div class="statistics-page">
    <!-- 筛选面板 -->
    <FilterPanel
      :fields="filterFields"
      :default-value="query"
      @search="handleSearch"
      @reset="handleReset"
    >
      <template #extra-actions>
        <el-button type="success" icon="el-icon-download" @click="handleExport">导出</el-button>
      </template>
    </FilterPanel>
 
    <!-- 数据概览 -->
    <el-row :gutter="20" class="overview-row">
      <el-col :span="6" v-for="item in overviewData" :key="item.title">
        <el-card class="overview-card">
          <div class="overview-content">
            <div class="overview-icon" :style="{ backgroundColor: item.color }">
              <i :class="item.icon"></i>
            </div>
            <div class="overview-info">
              <div class="overview-title">{{ item.title }}</div>
              <div class="overview-value">{{ item.value }}</div>
              <div class="overview-desc">{{ item.desc }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
 
    <!-- 图表区域 -->
    <el-row :gutter="20" class="chart-row">
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix">
            <span>捐献者年龄分布</span>
          </div>
          <EChartsWrapper
            :id="'age-chart'"
            :options="ageChartOptions"
            height="400px"
          />
        </el-card>
      </el-col>
 
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix">
            <span>性别与血型分布</span>
          </div>
          <EChartsWrapper
            :id="'gender-blood-chart'"
            :options="genderBloodChartOptions"
            height="400px"
          />
        </el-card>
      </el-col>
    </el-row>
 
    <el-row :gutter="20" class="chart-row">
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix">
            <span>中国分类分布</span>
          </div>
          <EChartsWrapper
            v-if="useMock"
            :id="'china-category-chart'"
            :options="chinaCategoryOptions"
            height="400px"
          />
          <el-empty v-else description="后端暂未提供中国分类统计接口"></el-empty>
        </el-card>
      </el-col>
 
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix">
            <span>死亡原因分布</span>
          </div>
          <EChartsWrapper
            v-if="useMock"
            :id="'death-cause-chart'"
            :options="deathCauseOptions"
            height="400px"
          />
          <el-empty v-else description="后端暂未提供死亡原因统计接口"></el-empty>
        </el-card>
      </el-col>
    </el-row>
 
    <!-- 数据表格 -->
    <el-card>
      <div slot="header" class="clearfix">
        <span>捐献者详细信息</span>
      </div>
 
      <template v-if="useMock">
        <el-table
          v-loading="loading"
          :data="tableData"
          style="width: 100%"
          border
          stripe
        >
          <el-table-column label="捐献者编号" prop="donorNo" align="center" />
          <el-table-column label="姓名" prop="name" align="center" />
          <el-table-column label="性别" prop="gender" align="center" />
          <el-table-column label="年龄" prop="age" align="center" />
          <el-table-column label="血型" prop="bloodType" align="center" />
          <el-table-column label="地区" prop="region" align="center" />
          <el-table-column label="捐献时间" prop="donationTime" align="center" />
        </el-table>
 
        <el-pagination
          v-show="total > 0"
          :total="total"
          :page.sync="query.page"
          :limit.sync="query.limit"
          @current-change="handlePagination"
          @size-change="handlePageSizeChange"
          style="margin-top: 20px;"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[10, 20, 50, 100]"
        />
      </template>
      <el-empty v-else description="后端暂未提供捐献者详细信息接口"></el-empty>
    </el-card>
  </div>
</template>
 
<script>
import FilterPanel from '@/components/charts/FilterPanel.vue';
import EChartsWrapper from '@/components/charts/EChartsWrapper.vue';
import { caseSex, caseBloodType, caseAvgAge } from '@/api/businessApi';
import { toTotalsList, toNum } from '@/utils/totals';
import statisticsMode, { isStatisticsMock } from '@/utils/statisticsMode';
import { COLORS, PALETTE, axisTooltip, grid, legend } from '@/utils/chartStyle';
 
const AGE_GROUP_MAP = {
  '1': '<17岁',
  '2': '18-49岁',
  '3': '50-69岁',
  '4': '>69岁'
};
 
export default {
  name: 'DonorStatistics',
  components: {
    FilterPanel,
    EChartsWrapper
  },
  data() {
    return {
      // 查询参数
      query: {
        region: [],
        monthRange: [],
        ageRange: [],
        gender: null,
        bloodType: null,
        page: 1,
        limit: 10
      },
 
      // 筛选字段配置
      filterFields: [
        {
          label: '地区',
          prop: 'region',
          type: 'select',
          multiple: true,
          options: [
            { label: '青岛地区', value: '青岛地区' },
            { label: '日照地区', value: '日照地区' },
            { label: '济南地区', value: '济南地区' },
            { label: '烟台地区', value: '烟台地区' },
            { label: '威海地区', value: '威海地区' },
            { label: '潍坊地区', value: '潍坊地区' },
            { label: '临沂地区', value: '临沂地区' }
          ],
          width: '300px'
        },
        {
          label: '月份范围',
          prop: 'monthRange',
          type: 'daterange',
          dateType: 'monthrange',
          startPlaceholder: '开始月份',
          endPlaceholder: '结束月份',
          valueFormat: 'yyyy-MM',
          width: '300px'
        },
        {
          label: '性别',
          prop: 'gender',
          type: 'select',
          options: [
            { label: '男', value: '男' },
            { label: '女', value: '女' }
          ],
          width: '100px'
        },
        {
          label: '血型',
          prop: 'bloodType',
          type: 'select',
          options: [
            { label: 'A型', value: 'A' },
            { label: 'B型', value: 'B' },
            { label: 'O型', value: 'O' },
            { label: 'AB型', value: 'AB' }
          ],
          width: '100px'
        }
      ],
 
      // 加载状态
      loading: false,
 
      // 概览数据
      overviewData: [
        { title: '总捐献者数', value: 0, desc: '统计周期内', icon: 'el-icon-user', color: '#409EFF' },
        { title: '男性占比', value: '0%', desc: '统计周期内', icon: 'el-icon-male', color: '#67C23A' },
        { title: '女性占比', value: '0%', desc: '统计周期内', icon: 'el-icon-female', color: '#F56C6C' },
        { title: '平均年龄', value: 0, desc: '统计周期内', icon: 'el-icon-s-data', color: '#E6A23C' }
      ],
 
      // 图表配置
      ageChartOptions: {},
      genderBloodChartOptions: {},
 
      // 接口返回数据
      sexData: [],
      bloodData: [],
 
      // 无接口图表的模拟数据（仅 mock 模式展示）
      chinaCategoryData: [
        { name: '中国一类(DBD)', value: 45 },
        { name: '中国二类(DCD)', value: 35 },
        { name: '中国三类(DBCD)', value: 20 }
      ],
      deathCauseData: [
        { name: '脑血管疾病', value: 40 },
        { name: '颅脑损伤', value: 30 },
        { name: '心脏疾病', value: 15 },
        { name: '其他原因', value: 15 }
      ],
 
      // 捐献者详细信息模拟数据（无后端接口，仅 mock 模式展示）
      donorList: [
        { donorNo: 'D2024001', name: '张伟', gender: '男', age: 45, bloodType: 'A', region: '青岛地区', donationTime: '2024-03-15' },
        { donorNo: 'D2024002', name: '王芳', gender: '女', age: 38, bloodType: 'B', region: '青岛地区', donationTime: '2024-03-22' },
        { donorNo: 'D2024003', name: '李娜', gender: '女', age: 52, bloodType: 'O', region: '日照地区', donationTime: '2024-04-02' },
        { donorNo: 'D2024004', name: '刘洋', gender: '男', age: 29, bloodType: 'AB', region: '青岛地区', donationTime: '2024-04-18' },
        { donorNo: 'D2024005', name: '陈静', gender: '女', age: 47, bloodType: 'A', region: '济南地区', donationTime: '2024-05-06' },
        { donorNo: 'D2024006', name: '杨强', gender: '男', age: 33, bloodType: 'B', region: '烟台地区', donationTime: '2024-05-21' },
        { donorNo: 'D2024007', name: '赵敏', gender: '女', age: 41, bloodType: 'O', region: '青岛地区', donationTime: '2024-06-03' },
        { donorNo: 'D2024008', name: '黄磊', gender: '男', age: 55, bloodType: 'A', region: '潍坊地区', donationTime: '2024-06-17' },
        { donorNo: 'D2024009', name: '周杰', gender: '男', age: 62, bloodType: 'O', region: '临沂地区', donationTime: '2024-07-01' },
        { donorNo: 'D2024010', name: '吴霞', gender: '女', age: 26, bloodType: 'AB', region: '日照地区', donationTime: '2024-07-15' },
        { donorNo: 'D2024011', name: '徐磊', gender: '男', age: 48, bloodType: 'B', region: '青岛地区', donationTime: '2024-08-09' },
        { donorNo: 'D2024012', name: '孙丽', gender: '女', age: 35, bloodType: 'O', region: '威海地区', donationTime: '2024-08-24' },
        { donorNo: 'D2024013', name: '马超', gender: '男', age: 44, bloodType: 'A', region: '济南地区', donationTime: '2024-09-05' },
        { donorNo: 'D2024014', name: '朱婷', gender: '女', age: 58, bloodType: 'B', region: '青岛地区', donationTime: '2024-09-19' },
        { donorNo: 'D2024015', name: '胡军', gender: '男', age: 31, bloodType: 'O', region: '烟台地区', donationTime: '2024-10-08' },
        { donorNo: 'D2024016', name: '郭涛', gender: '男', age: 68, bloodType: 'A', region: '青岛地区', donationTime: '2024-10-22' },
        { donorNo: 'D2024017', name: '何平', gender: '女', age: 39, bloodType: 'AB', region: '潍坊地区', donationTime: '2024-11-06' },
        { donorNo: 'D2024018', name: '高翔', gender: '男', age: 50, bloodType: 'B', region: '临沂地区', donationTime: '2024-11-20' },
        { donorNo: 'D2024019', name: '林芳', gender: '女', age: 27, bloodType: 'O', region: '青岛地区', donationTime: '2024-12-04' },
        { donorNo: 'D2024020', name: '罗刚', gender: '男', age: 42, bloodType: 'A', region: '日照地区', donationTime: '2024-12-18' },
        { donorNo: 'D2023021', name: '郑爽', gender: '女', age: 34, bloodType: 'B', region: '青岛地区', donationTime: '2023-06-10' },
        { donorNo: 'D2023022', name: '梁宇', gender: '男', age: 57, bloodType: 'O', region: '济南地区', donationTime: '2023-07-25' },
        { donorNo: 'D2023023', name: '谢娜', gender: '女', age: 49, bloodType: 'A', region: '威海地区', donationTime: '2023-08-14' },
        { donorNo: 'D2023024', name: '韩冰', gender: '男', age: 23, bloodType: 'AB', region: '青岛地区', donationTime: '2023-09-30' }
      ],
 
      // 表格数据
      tableData: [],
      total: 0
    };
  },
  computed: {
    useMock() {
      return isStatisticsMock();
    },
    chinaCategoryOptions() {
      return this.buildPieOptions('中国分类', this.chinaCategoryData);
    },
    deathCauseOptions() {
      return this.buildPieOptions('死亡原因', this.deathCauseData);
    }
  },
  created() {
    this.loadData();
    // 数据源(mock/真实接口)切换时重新加载
    this.$watch(() => statisticsMode.useMock, () => this.loadData());
  },
  methods: {
    // 组装查询条件
    buildQuery() {
      const q = {};
      if (this.query.region && this.query.region.length) {
        q.area = this.query.region.join(',');
      }
      if (this.query.monthRange && this.query.monthRange.length === 2) {
        q.startTime = this.query.monthRange[0];
        q.endTime = this.query.monthRange[1];
      }
      if (this.query.sex) q.sex = this.query.sex;
      if (this.query.bloodType) q.boodType = this.query.bloodType;
      return q;
    },
 
    // 加载数据
    async loadData() {
      this.loading = true;
      try {
        const q = this.buildQuery();
        const [sexRes, bloodRes, avgRes] = await Promise.all([
          caseSex(q),
          caseBloodType(q),
          caseAvgAge(q)
        ]);
 
        this.sexData = toTotalsList(sexRes);
        this.bloodData = toTotalsList(bloodRes);
        const avgList = toTotalsList(avgRes);
 
        this.updateOverviewData(avgList);
        this.updateCharts();
 
        // 捐献者详细信息无 /opo/totals 聚合接口，使用模拟数据补全
        this.updateDonorTable();
      } catch (error) {
        console.error('加载数据失败:', error);
        this.$message.error('数据加载失败');
      } finally {
        this.loading = false;
      }
    },
 
    // 更新概览数据
    updateOverviewData(avgList) {
      const males = this.sexData.reduce((sum, item) => sum + toNum(item.manCount), 0);
      const females = this.sexData.reduce((sum, item) => sum + toNum(item.womanCount), 0);
      const total = males + females;
      const avgAge = avgList.length
        ? toNum(avgList.reduce((sum, item) => sum + toNum(item.avgAge), 0) / avgList.length)
        : 0;
 
      this.overviewData[0].value = total;
      this.overviewData[1].value = total > 0 ? `${((males / total) * 100).toFixed(1)}%` : '0%';
      this.overviewData[2].value = total > 0 ? `${((females / total) * 100).toFixed(1)}%` : '0%';
      this.overviewData[3].value = avgAge.toFixed(1);
    },
 
    // 更新图表
    updateCharts() {
      // 年龄分布图（左男右女，清爽发散金字塔）
      this.ageChartOptions = {
        tooltip: axisTooltip(),
        legend: legend(['男性', '女性']),
        grid: grid(),
        xAxis: {
          type: 'value',
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: { color: '#8a919f', fontSize: 12, formatter: value => Math.abs(value) },
          splitLine: { lineStyle: { type: 'dashed', color: '#f0f1f5' } }
        },
        yAxis: {
          type: 'category',
          data: this.sexData.map(item => AGE_GROUP_MAP[item.ageGroup] || item.ageGroup || '未知'),
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: { color: '#606266', fontSize: 13 }
        },
        series: [
          {
            name: '男性',
            type: 'bar',
            stack: '性别',
            barMaxWidth: 18,
            data: this.sexData.map(item => toNum(item.manCount)),
            itemStyle: { color: COLORS.blue, borderRadius: [4, 0, 0, 4] }
          },
          {
            name: '女性',
            type: 'bar',
            stack: '性别',
            barMaxWidth: 18,
            data: this.sexData.map(item => -toNum(item.womanCount)),
            itemStyle: { color: COLORS.coral, borderRadius: [0, 4, 4, 0] }
          }
        ]
      };
 
      // 性别与血型分布图（同心环，配色清爽）
      const males = this.bloodData.reduce((sum, item) => sum + toNum(item.manCount), 0);
      const females = this.bloodData.reduce((sum, item) => sum + toNum(item.womanCount), 0);
      const bloodPie = this.bloodData.map(item => ({
        name: item.boodType || '未知',
        value: toNum(item.boodTypeCount) || (toNum(item.manCount) + toNum(item.womanCount))
      }));
 
      this.genderBloodChartOptions = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: { data: ['男性', '女性', ...this.bloodData.map(item => item.boodType || '未知')], top: 20 },
        series: [
          {
            name: '性别分布',
            type: 'pie',
            radius: [0, '40%'],
            center: ['25%', '50%'],
            label: { position: 'inner', fontSize: 12 },
            data: [
              { name: '男性', value: males },
              { name: '女性', value: females }
            ],
            color: [COLORS.blue, COLORS.coral]
          },
          {
            name: '血型分布',
            type: 'pie',
            radius: ['55%', '75%'],
            center: ['25%', '50%'],
            label: { fontSize: 14, color: '#606266' },
            data: bloodPie,
            color: [COLORS.amber, COLORS.teal, COLORS.purple, COLORS.orange]
          }
        ]
      };
    },
 
    // 捐献者详细信息（无接口，模拟数据补全 + 过滤分页）
    updateDonorTable() {
      let list = this.donorList;
      if (this.query.region && this.query.region.length) {
        list = list.filter(item => this.query.region.includes(item.region));
      }
      if (this.query.monthRange && this.query.monthRange.length === 2) {
        const start = this.query.monthRange[0];
        const end = this.query.monthRange[1];
        list = list.filter(item => {
          const m = item.donationTime.slice(0, 7);
          return m >= start && m <= end;
        });
      }
      if (this.query.gender) {
        list = list.filter(item => item.gender === this.query.gender);
      }
      if (this.query.bloodType) {
        list = list.filter(item => item.bloodType === this.query.bloodType);
      }
      this.total = list.length;
      const start = (this.query.page - 1) * this.query.limit;
      this.tableData = list.slice(start, start + this.query.limit);
    },
 
    // 生成饼图配置（无接口图表的 mock 展示）
    buildPieOptions(name, data) {
      return {
        color: PALETTE,
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          top: 'middle',
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 16,
          textStyle: { fontSize: 14, color: '#606266' },
          data: data.map(item => item.name)
        },
        series: [
          {
            name,
            type: 'pie',
            radius: '55%',
            center: ['55%', '50%'],
            itemStyle: { borderColor: '#fff', borderWidth: 2 },
            label: { fontSize: 15, color: '#606266', formatter: '{b} {d}%' },
            labelLine: { lineStyle: { color: '#c0c4cc' } },
            data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
    },
 
    // 处理查询
    handleSearch(formData) {
      this.query = { ...this.query, ...formData, page: 1 };
      this.loadData();
    },
 
    // 处理重置
    handleReset() {
      this.query = {
        region: [],
        monthRange: [],
        ageRange: [],
        gender: null,
        bloodType: null,
        page: 1,
        limit: 10
      };
      this.loadData();
    },
 
    // 处理分页
    handlePagination(page) {
      this.query.page = page;
      this.loadData();
    },
 
    // 处理分页大小变化
    handlePageSizeChange(size) {
      this.query.limit = size;
      this.query.page = 1;
      this.loadData();
    },
 
    // 处理导出
    handleExport() {
      this.$message.info('导出功能开发中...');
    }
  }
};
</script>
 
<style scoped>
.statistics-page {
  padding: 20px;
}
 
.overview-row {
  margin-bottom: 20px;
}
 
.overview-card {
  height: 100%;
}
 
.overview-content {
  display: flex;
  align-items: center;
}
 
.overview-icon {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}
 
.overview-icon i {
  font-size: 24px;
  color: white;
}
 
.overview-info {
  flex: 1;
}
 
.overview-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 4px;
}
 
.overview-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 4px;
}
 
.overview-desc {
  font-size: 12px;
  color: #C0C4CC;
}
 
.chart-row {
  margin-bottom: 20px;
}
</style>