mental-health-web/src/views/archive/information/components/Statistic.vue

<template>
  <el-dialog title="测评统计" v-model="visible" width="800px" append-to-body :close-on-click-modal="false"
    @close="handleClose">
    <el-card>
      <template #header>
        图表统计
      </template>
      <v-chart style="height: 300px;" :option="barOption" autoresize />
    </el-card>

    <el-card style="margin-top: 20px;">
      <template #header>
        列表统计
      </template>
      <el-table :data="tableData">
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="times" label="时间">
          <template #default="scope">
            <div v-for="item in scope.row.times.split(',')">
              {{ item }}<br>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="value" label="测评次数" />
      </el-table>
    </el-card>
  </el-dialog>

</template>

<script setup lang="ts">
import { statisticScale, statisticWarn } from '@/api/archive/information'

import * as echarts from 'echarts';
import { use } from 'echarts/core'
import { CanvasRenderer } from "echarts/renderers";
import { PieChart, BarChart, LineChart } from "echarts/charts";
import { TitleComponent, TooltipComponent, LegendComponent, ToolboxComponent, GridComponent, VisualMapComponent } from "echarts/components";
import VChart from 'vue-echarts'

use([
  CanvasRenderer,
  PieChart,
  BarChart,
  LineChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  ToolboxComponent,
  GridComponent,
  VisualMapComponent
]);

const visible = ref(false)
const userId = ref()
const openStatistic = (row: any) => {
  userId.value = row.userId
  console.log('userId:', userId.value);
  visible.value = true
}

const tableData = ref<any[]>([])
const statisticScaleData = async () => {
  const { data } = await statisticScale({ userId: userId.value })
  tableData.value = data
}

const barOption = ref({
  xAxis: {
    type: 'category',
    data: ['未见异常', '低风险', '中风险', '高风险', '重大风险']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [],
      type: 'bar'
    }
  ]
})
const statisticWarnData = async () => {
  const { data: { noneNum, lowNum, middleNum, highNum, majorNum } } = await statisticWarn({ userId: userId.value })

  barOption.value.series[0].data = [
    noneNum, lowNum, middleNum, highNum, majorNum
  ]
}

watch(visible, (newVal, oldVal) => {
  if (newVal) {
    statisticScaleData()
    statisticWarnData()
  }
})

const handleClose = () => {
  barOption.value = {
    xAxis: {
      type: 'category',
      data: ['未见异常', '低风险', '中风险', '高风险', '重大风险']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [],
        type: 'bar'
      }
    ]
  }

  tableData.value = []
}

defineExpose({ openStatistic })

</script>

<style scoped></style>