死亡病例分析

src/api/emr-control/query-die.ts

@@ -1,6 +1,17 @@
 import request from "./request";
 
-export function selectDieEmrData(start: string, end: string) {
+export interface QueryDieReturn {
+    data: any[];
+    header: string[]
+    analysis: {
+        [key: string]: {
+            [key: string]: number
+        }
+    }
+}
+
+export function selectDieEmrData(start: string, end: string): Promise<QueryDieReturn> {
+    // @ts-ignore
     return request({
         url: '/queryEmr/selectDieEmrData',
         method: 'get',

src/components/zhu-yuan-yi-sheng/emr/web-socket/EmrWebSocket.vue

@@ -112,6 +112,7 @@ const onmessageFunc = {
     })
   },
   "closeSoctek": (val) => {
+    console.log(val)
     if (navigator.userAgent.indexOf("Firefox") !== -1 || navigator.userAgent.indexOf("Chrome") !== -1) {
       window.location.href = "about:blank";
       window.close();

src/views/hospitalization/zhu-yuan-yi-sheng/electronic-medical-record/query-die/QueryDie.vue

@@ -1,14 +1,53 @@
 <script setup lang="ts">
-import {ref} from "vue";
+import {onMounted, ref} from "vue";
 import DieEmr from "@/views/hospitalization/zhu-yuan-yi-sheng/electronic-medical-record/query-die/comp/DieEmr.vue";
+import {QueryDieReturn, selectDieEmrData} from "@/api/emr-control/query-die";
+import {getDateRangeFormatDate, getFormatDatetime} from '@/utils/date'
+import {Export} from '@/utils/ExportExcel'
+import AnalysisChart
+  from "@/views/hospitalization/zhu-yuan-yi-sheng/electronic-medical-record/query-die/comp/AnalysisChart.vue";
 
 const tabs = ref('dieEmr')
+
+const dateRange = ref([])
+const resData = ref<QueryDieReturn>({
+  data: [],
+  header: [],
+  analysis: {}
+})
+
+const queryClick = async () => {
+  let {startTime, endTime} = getDateRangeFormatDate(dateRange.value)
+  resData.value = await selectDieEmrData(startTime, endTime)
+}
+
+const exportExcelClick = () => {
+  let title = {}
+  resData.value.header.forEach(item => {
+    title[item] = item
+  })
+  let {startTime, endTime} = getDateRangeFormatDate(dateRange.value)
+  Export(resData.value.data, title, `${getFormatDatetime(startTime, 'YYYY-MM-DD')}至${getFormatDatetime(endTime, 'YYYY-MM-DD')}`)
+}
+
+onMounted(() => {
+  // dateRange.value = ['2021-01-01', '2023-08-09']
+})
+
 </script>
 
 <template>
+  <el-header>
+    <el-date-picker type="daterange" v-model="dateRange" style="width: 250px" :clearable="false"/>
+    <el-button type="primary" v-el-btn="queryClick">查询</el-button>
+    <el-button type="primary" @click="exportExcelClick">Excel</el-button>
+  </el-header>
   <el-tabs v-model="tabs">
     <el-tab-pane name="dieEmr" label="死亡病历">
-      <DieEmr/>
+      <DieEmr :res-data="resData"/>
+    </el-tab-pane>
+    <el-tab-pane name="analysisChart" label="分析图">
+      <AnalysisChart :res-data="resData"/>
     </el-tab-pane>
   </el-tabs>
 </template>

src/views/hospitalization/zhu-yuan-yi-sheng/electronic-medical-record/query-die/comp/AnalysisChart.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import {defineProps, nextTick} from "vue";
+import {QueryDieReturn} from "@/api/emr-control/query-die";
+import * as echarts from 'echarts';
+import sleep from "@/utils/sleep";
+import {windowSizeStore} from "@/utils/store-public";
+
+
+const {resData} = defineProps<{
+  resData: QueryDieReturn
+}>()
+
+
+const establishDiv = async (el, value, name) => {
+  await nextTick()
+  await sleep(500)
+  let myChart = echarts.getInstanceByDom(el); //有的话就获取已有echarts实例的DOM节点。
+  if (myChart == null) { // 如果不存在，就进行初始化。
+    myChart = echarts.init(el);
+  }
+
+  let data = []
+  for (let key in value) {
+    data.push({
+      value: value[key],
+      name: key
+    })
+  }
+  let option = {
+    title: {
+      text: name,
+      left: 'center'
+    },
+    tooltip: {
+      trigger: 'item'
+    },
+    legend: {
+      orient: 'vertical',
+      left: 'left'
+    },
+    series: [
+      {
+        name: 'Access From',
+        type: 'pie',
+        radius: '50%',
+        data,
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)'
+          }
+        }
+      }
+    ]
+  }
+  myChart.setOption(option);
+}
+
+
+</script>
+
+<template>
+  <el-container>
+    <el-main style="overflow: auto" :style="{height: windowSizeStore.h / 1.1 + 'px'}">
+      <el-row>
+        <el-col :span="12" v-for="(value, key) in resData.analysis"
+                style="height: 200px;">
+          <div :ref="(el) => establishDiv(el , value, key)" style="height: 200px; width: 100%"/>
+        </el-col>
+      </el-row>
+    </el-main>
+  </el-container>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/hospitalization/zhu-yuan-yi-sheng/electronic-medical-record/query-die/comp/DieEmr.vue

@@ -1,44 +1,18 @@
 <script setup lang="ts">
-import {onMounted, ref} from "vue";
-import {getDateRangeFormatDate, getFormatDatetime} from '@/utils/date'
-import {selectDieEmrData} from "@/api/emr-control/query-die";
 import XcTable from "@/components/xiao-chan/xc-table/XcTable.vue";
 import {windowSizeStore} from "@/utils/store-public";
-import {Export} from '@/utils/ExportExcel'
+import {defineProps} from 'vue'
+import {QueryDieReturn} from "@/api/emr-control/query-die";
 
-const dateRange = ref([])
-const resData = ref({
-  data: [],
-  header: []
-})
 
+const {resData} = defineProps<{
+  resData: QueryDieReturn
+}>()
 
-const queryClick = async () => {
-  let {startTime, endTime} = getDateRangeFormatDate(dateRange.value)
-  resData.value = await selectDieEmrData(startTime, endTime) as any
-}
-
-const exportExcelClick = () => {
-  let title = {}
-  resData.value.header.forEach(item => {
-    title[item] = item
-  })
-  let {startTime, endTime} = getDateRangeFormatDate(dateRange.value)
-  Export(resData.value.data, title, `${getFormatDatetime(startTime, 'YYYY-MM-DD')}至${getFormatDatetime(endTime, 'YYYY-MM-DD')}`)
-}
-
-onMounted(() => {
-  dateRange.value = ['2021-01-01', '2023-08-09']
-})
 
 </script>
 
 <template>
-  <el-header>
-    <el-date-picker type="daterange" v-model="dateRange" style="width: 250px" :clearable="false"/>
-    <el-button type="primary" v-el-btn="queryClick">查询</el-button>
-    <el-button type="primary" @click="exportExcelClick">Excel</el-button>
-  </el-header>
   <el-main style="height: 100%">
     <xc-table :local-data="resData.data" :final-height="windowSizeStore.h / 1.15">
       <el-table-column v-for="item in resData.header" :label="item" :prop="item" show-overflow-tooltip/>