inspect-front/src/views/sta/index.vue

<template>
  <ContentWrap>
    <el-row>
        <el-form-item label="统计时间">
          <el-date-picker
            value-format="YYYY-MM-DD"
            v-model="time"
            type="daterange"
            range-separator="To"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            size="big"
          />
        </el-form-item>
        <el-button type="primary" @click="getList" style="float: right;margin-left: 20px;">
          <Icon icon="ep:search" class="mr-5px" /> 查询
        </el-button>
    </el-row>
  </ContentWrap>
  <ContentWrap>
    <el-table :data="data1" show-summary >
      <el-table-column label="卫生院" align="center" prop="orgname" width="200"/>
        <el-table-column type="expand" label="展开行政村" align="center" width="200">
        <template #default="scope">
          <el-table :data="scope.row.list" style="margin-left: 200px;">
            <el-table-column label="行政村" align="center" prop="districtname" width="200"/>
            <el-table-column label="体检数" align="center" >
              <el-table-column label="老年人" align="center" prop="oldmanflag" width="210" />
              <el-table-column label="高血压" align="center" prop="htnflag" width="210"/>
              <el-table-column label="糖尿病" align="center" prop="diaflag" width="210"/>
              <el-table-column label="精神病" align="center" prop="smiflag" width="210"/>
              <el-table-column label="肺结核" align="center" prop="pulflag" width="210"/>
              <el-table-column label="总数" align="center" prop="sum" sortable width="210"/>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
        <el-table-column label="体检数" align="center" >
          <el-table-column label="老年人" align="center" prop="oldmanflag" width="210"/>
          <el-table-column label="高血压" align="center" prop="htnflag" width="210"/>
          <el-table-column label="糖尿病" align="center" prop="diaflag" width="210"/>
          <el-table-column label="精神病" align="center" prop="smiflag" width="210"/>
          <el-table-column label="肺结核" align="center" prop="pulflag" width="210"/>
          <el-table-column label="总数" align="center" prop="sum" sortable width="210"/>
      </el-table-column>
    </el-table>
  </ContentWrap>
</template>

<script setup lang="ts">

import {StatisticsApi} from "@/api/inspect/statistics";
import dayjs from "dayjs";
import {PatientApi} from "@/api/inspect/inspectpatient";

const time = ref() // 日期
const data = ref([
  {orgname: '北京', districtname:'A村',oldmanflag:1 ,htnflag :2 ,diaflag:1, smiflag:1 ,pulflag:1 ,sum : 6},
  {orgname: '北京', districtname:'B村',oldmanflag:2 ,htnflag :1 ,diaflag:1, smiflag:1 ,pulflag:1 ,sum :6},
  {orgname: '天津', districtname:'C村',oldmanflag:1 ,htnflag :4 ,diaflag:1, smiflag:1 ,pulflag:1 ,sum : 8},
  {orgname: '天津', districtname:'D村',oldmanflag:3 ,htnflag :1 ,diaflag:1, smiflag:1 ,pulflag:1 ,sum :7},
  {orgname: '安徽', districtname:'E村',oldmanflag:4 ,htnflag :3 ,diaflag:1, smiflag:1 ,pulflag:1 ,sum: 10},
  {orgname: '安徽', districtname:'F村',oldmanflag:4 ,htnflag :3 ,diaflag:1, smiflag:1 ,pulflag:1 ,sum: 10},
  {orgname: '安徽', districtname:'G村',oldmanflag:4 ,htnflag :3 ,diaflag:1, smiflag:1 ,pulflag:1 ,sum: 10},
])  // 表格数据
const data1=ref([
    {
      orgname:'北京',oldmanflag:3,htnflag :5 ,diaflag:2, smiflag:5 ,pulflag:6 ,sum : 21,
      list:[
        {  districtname:'A村',oldmanflag:1 ,htnflag :2 ,diaflag:1, smiflag:1 ,pulflag:1 ,sum : 6},
        {  districtname:'B村',oldmanflag:2 ,htnflag :3 ,diaflag:1, smiflag:4 ,pulflag:5 ,sum : 15}
      ],
    },
    {
      orgname:'天津',oldmanflag:3,htnflag :5 ,diaflag:2, smiflag:5 ,pulflag:6 ,sum : 21,
      list:[
        {  districtname:'C村',oldmanflag:1 ,htnflag :2 ,diaflag:1, smiflag:1 ,pulflag:1 ,sum : 6},
        {  districtname:'D村',oldmanflag:2 ,htnflag :3 ,diaflag:1, smiflag:4 ,pulflag:5 ,sum : 15}
      ],
    },
])
const selector = ref([
  '北京',
  '天津',
  '安徽'
])
/**
 * 获取统计数据
 */
const getList = async ()=>{
  const params = {
    dates: [
      dayjs(time.value[0]).format('YYYY-MM-DD'),
      dayjs(time.value[1]).format('YYYY-MM-DD')
    ]
  }
  console.log('Request params:', params);
  let resp = await PatientApi.getData(params)
  console.log(resp)
  data1.value = dataProcessing(data.value)
}
/**
 * 统计数据处理
 * @param data 需要处理的统计数据
 */
const dataProcessing = (data) => {
  const result = data.reduce((acc, current) => {
    const key = current.orgname;
    // 初始化分组（若不存在）
    if (!acc[key]) {
      acc[key] = {
        orgname: key,
        oldmanflag: 0,
        htnflag: 0,
        diaflag: 0,
        smiflag: 0,
        pulflag: 0,
        sum: 0,
        list: []
      };
    }
    // 累加各字段值
    acc[key].oldmanflag += current.oldmanflag;
    acc[key].htnflag += current.htnflag;
    acc[key].diaflag += current.diaflag;
    acc[key].smiflag += current.smiflag;
    acc[key].pulflag += current.pulflag;
    acc[key].sum += current.sum;
    // 将当前对象添加到 list 中（避免引用问题需深拷贝）
    acc[key].list.push({ ...current });
    return acc;
  }, {});

  return Object.values(result);
}
onMounted(()=>{
  getList()
})
</script>

<style scoped>

</style>