From 09f4ddc2d76b15f1464e5ac0985ca4271e549c6e Mon Sep 17 00:00:00 2001
From: wx <645899409@qq.com>
Date: Wed, 23 Oct 2024 15:20:57 +0800
Subject: [PATCH] =?UTF-8?q?update=201.=E9=93=B6=E5=B7=9D=E5=A4=A7=E5=B1=8F?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=80=A5=E6=95=91=E6=95=B0=E6=8D=AE=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/body-d-left/bodyLeftHooks.ts   |  67 +++++
 .../dailyWorkTrends/dailyWorkTrends.vue       |   1 +
 .../emergencyData/emergencyData.vue           | 228 ++++++++++++++++++
 src/views/yinChuan/yinChuan.api.ts            |   4 +
 src/views/yinChuan/yinChuan.vue               |  16 +-
 5 files changed, 314 insertions(+), 2 deletions(-)
 create mode 100644 src/views/yinChuan/componetns/emergencyData/emergencyData.vue

diff --git a/src/components/body-d-left/bodyLeftHooks.ts b/src/components/body-d-left/bodyLeftHooks.ts
index 796f807..ba76e77 100644
--- a/src/components/body-d-left/bodyLeftHooks.ts
+++ b/src/components/body-d-left/bodyLeftHooks.ts
@@ -463,6 +463,73 @@ export function barOption(xData, ydata, theme) {
     };
 }
 
+export function getOptions(data: any[] = [], colors: any[] = [], totalTimes: number = 0) {
+    return {
+        title: [
+            {
+                text: totalTimes + '人',
+                left: 'center',
+                top: '35%',
+                textStyle: {
+                    color: '#ffffff',
+                    fontStyle: 'normal',
+                    fontWeight: '400', // 字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
+                    fontFamily: 'Source Han Sans CN',
+                    fontSize: 20,
+                    height: '22%',
+                },
+            },
+            {
+                subtext: '急救总次数',
+                subtextStyle: {
+                    color: '#ffffff',
+                    fontStyle: 'normal',
+                    fontWeight: '500',
+                    fontFamily: 'Source Han Sans CN',
+                    fontSize: 24,
+                },
+                left: 'center',
+                top: '48%',
+            },
+        ],
+        tooltip: {
+            trigger: 'item',
+        },
+        label: {
+            formatter: '{b} {c}',
+            // fontSize: 18
+        },
+        legend: {
+            top: '0%',
+            left: 'center',
+            textStyle: {
+                color: '#ffffff',
+            },
+        },
+        colors: colors,
+        series: [
+            {
+                type: 'pie',
+                radius: ['60%', '70%'],
+                avoidLabelOverlap: false,
+                padAngle: 1,
+                itemStyle: {
+                    borderRadius: 10,
+                },
+                center: ['50%', '55%'],
+                // emphasis: {
+                //     label: {
+                //         show: true,
+                //         fontSize: 40,
+                //         fontWeight: 'bold',
+                //     },
+                // },
+                data: data,
+            },
+        ],
+    };
+}
+
 /**
  * @desc 值是否不为零
  * @param list 数组
diff --git a/src/views/yinChuan/componetns/dailyWorkTrends/dailyWorkTrends.vue b/src/views/yinChuan/componetns/dailyWorkTrends/dailyWorkTrends.vue
index 0193d05..ec1bebb 100644
--- a/src/views/yinChuan/componetns/dailyWorkTrends/dailyWorkTrends.vue
+++ b/src/views/yinChuan/componetns/dailyWorkTrends/dailyWorkTrends.vue
@@ -54,6 +54,7 @@
             padding: 10px 20px;
 
             .trends-title-con {
+                margin-bottom: 5px;
                 display: flex;
                 align-items: center;
             }
diff --git a/src/views/yinChuan/componetns/emergencyData/emergencyData.vue b/src/views/yinChuan/componetns/emergencyData/emergencyData.vue
new file mode 100644
index 0000000..cd31a7e
--- /dev/null
+++ b/src/views/yinChuan/componetns/emergencyData/emergencyData.vue
@@ -0,0 +1,228 @@
+<template>
+    <div>
+        <public-title title="急救数据" themeType="dark">
+            <template #right>
+                <span class="right-text" :class="[themeType]" @click="viewDetail">查看详情</span>
+            </template>
+        </public-title>
+        <div class="inner">
+            <div class="type-time">
+                <span
+                    v-for="(item, index) in typeTime"
+                    :key="index"
+                    :class="[selectIndex === index ? 'select' : 'unSelect', themeType]"
+                    @click="handleSelect(index, item.value)"
+                    >{{ item.name }}</span
+                >
+            </div>
+            <div class="server-container">
+                <a-spin :spinning="spinning" class="spin"></a-spin>
+                <div class="RadarCharts" ref="chartsRef"></div>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+    import PublicTitle from '/@/components/publicTitle.vue';
+    import { useTheme } from '/@/hooks/theme/useTheme.ts';
+    import { useSession } from '/@/hooks/autoRefresh/caching.ts';
+    import { onMounted, ref, watch } from 'vue';
+    import { getOptions, useSpin } from '/@/components/body-d-left/bodyLeftHooks.ts';
+    import { ambulanceStatApi } from '/@/views/yinChuan/yinChuan.api.ts';
+    import * as echarts from 'echarts';
+    const { themeType } = useTheme();
+    const props = defineProps({
+        refreshState: {
+            type: Boolean,
+        },
+        setting: {
+            type: Object,
+        },
+        theme: {
+            type: String,
+        },
+    });
+    const typeTime = ref([
+        {
+            name: '本年',
+            value: '2',
+        },
+        {
+            name: '本月',
+            value: '1',
+        },
+        {
+            name: '本周',
+            value: '0',
+        },
+    ]);
+
+    const emergencyTypeList = ref([
+        {
+            type: '1',
+            name: '濒危',
+            color: '#5087ec',
+            value: 0,
+        },
+        {
+            type: '2',
+            name: '危重',
+            color: '#68bbc4',
+            value: 0,
+        },
+        {
+            type: '3',
+            name: '急症',
+            color: '#58a55c',
+            value: 0,
+        },
+        {
+            type: '4',
+            name: '非急症',
+            color: '#f2bd42',
+            value: 0,
+        },
+        {
+            type: '5',
+            name: '死亡',
+            color: '#ee752f',
+            value: 0,
+        },
+    ]);
+
+    const selectIndex = ref(0);
+    const selectVal = ref('2'); //本年
+    const { setSpin, spinning } = useSpin();
+
+    onMounted(() => {
+        getList();
+    });
+
+    const { setSession, getSession } = useSession();
+
+    const chartsRef = ref();
+
+    async function getList() {
+        try {
+            emergencyTypeList.value = [
+                {
+                    type: '1',
+                    name: '濒危',
+                    color: '#5087ec',
+                    value: 0,
+                },
+                {
+                    type: '2',
+                    name: '危重',
+                    color: '#68bbc4',
+                    value: 0,
+                },
+                {
+                    type: '3',
+                    name: '急症',
+                    color: '#58a55c',
+                    value: 0,
+                },
+                {
+                    type: '4',
+                    name: '非急症',
+                    color: '#f2bd42',
+                    value: 0,
+                },
+                {
+                    type: '5',
+                    name: '死亡',
+                    color: '#ee752f',
+                    value: 0,
+                },
+            ];
+            const { result, success } = await ambulanceStatApi({ type: selectVal.value });
+            if (success) {
+                result &&
+                    result.map((item: any) => {
+                        emergencyTypeList.value.forEach((it: any) => {
+                            if (item.type == it.type) {
+                                it['value'] = item.count || 0;
+                            }
+                        });
+                    });
+
+                let data: any[] = [];
+                let colors: any[] = [];
+                let totalTimes = 0;
+                emergencyTypeList.value.map((item: any) => {
+                    data.push({
+                        name: item.name,
+                        value: item.value,
+                    });
+                    colors.push(item.colors);
+                    totalTimes += item.value || 0;
+                });
+
+                const option = getOptions(data, colors, totalTimes);
+
+                const myChart = echarts.init(chartsRef.value);
+
+                myChart.setOption(option);
+                window.addEventListener('resize', () => {
+                    myChart.resize();
+                });
+            }
+        } catch (e) {
+            console.log(e);
+        } finally {
+            setSpin(false);
+        }
+    }
+
+    function handleSelect(index: number, value: string) {
+        setSpin(true);
+        selectIndex.value = index;
+        selectVal.value = value;
+        getList();
+    }
+
+    const emit = defineEmits(['emergencyDataList']);
+
+    function viewDetail() {
+        emit('emergencyDataList');
+    }
+
+    watch(
+        () => props.refreshState,
+        () => {
+            getList();
+        }
+    );
+</script>
+<style scoped lang="less">
+    .inner {
+        height: calc(100% - 40px);
+    }
+    .right-text {
+        font-weight: 100;
+        cursor: pointer;
+        margin-right: 3px;
+        font-size: 18px;
+    }
+    .server-container {
+        margin-top: 15px;
+        width: 96%;
+        height: calc(100% - 40px);
+        display: flex;
+        flex-wrap: wrap;
+        align-content: space-around;
+        position: relative;
+
+        .spin {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+        }
+
+        .RadarCharts {
+            width: 100%;
+            height: 100%;
+        }
+    }
+</style>
diff --git a/src/views/yinChuan/yinChuan.api.ts b/src/views/yinChuan/yinChuan.api.ts
index c1d9abc..d56adf2 100644
--- a/src/views/yinChuan/yinChuan.api.ts
+++ b/src/views/yinChuan/yinChuan.api.ts
@@ -4,6 +4,8 @@ export enum Api {
     phoneList = '/health-emergency/emergency/tblUserHelp/phoneList',
     getWorkDaily = '/health-emergency/emergency/ycLargeScreen/medicalCenter',
     getTeamHealth = '/health-emergency/emergency/ycLargeScreen/userHealthCenter',
+    ambulanceStat = '/health-emergency/emergency/ycLargeScreen/ambulanceStat',
+    ambulancePage = '/health-emergency/emergency/ycLargeScreen/ambulancePage',
 }
 
 // 呼入电话、受理电话
@@ -12,3 +14,5 @@ export const getPhoneList = (params: any) => get(Api.phoneList, params);
 export const getWorkDaily = (params: any) => get(Api.getWorkDaily, params);
 //员工队伍健康状况
 export const getTeamHealth = (params: any) => get(Api.getTeamHealth, params);
+export const ambulanceStatApi = (params: any) => get(Api.ambulanceStat, params);
+export const ambulancePageApi = (params: any) => get(Api.ambulancePage, params);
diff --git a/src/views/yinChuan/yinChuan.vue b/src/views/yinChuan/yinChuan.vue
index e24c791..49f3d28 100644
--- a/src/views/yinChuan/yinChuan.vue
+++ b/src/views/yinChuan/yinChuan.vue
@@ -23,6 +23,7 @@
                 />
                 <!--一线医疗点每日工作动态-->
                 <DailyWorkTrends theme="dark" :refreshState="refreshState" class="daily-work-trends" />
+                <EmergencyData @emergencyDataList="emergencyDataList" class="emergency-data" />
             </div>
             <div class="body-d-middle">
                 <china-map
@@ -49,6 +50,7 @@
         <YunZuoXiDialog ref="yunZuoXiDialogRef" :record="yunZuoXiData" @confirmHelp="confirmHelp" />
         <PhoneDialog ref="phoneDialogRef" :phoneType="phoneType" :setting="setting" :title="phoneDialogTitle" :useForm="true" />
         <TerminalAlarmDialog ref="terminalAlarmDialogRef" :setting="setting" />
+        <emergency-data-dialog ref="emergencyDataDialog" />
     </div>
 </template>
 <script lang="ts" setup>
@@ -64,6 +66,7 @@
     import YunZuoXiDialog from '/@/views/components/yunZuoXiDialog.vue';
     import PhoneDialog from '/@/views/components/phoneDialog/phoneDialog.vue';
     import TerminalAlarmDialog from '/@/views/yinChuan/componetns/TerminalAlarmDialog/TerminalAlarmDialog.vue';
+    import EmergencyData from '/@/views/yinChuan/componetns/emergencyData/emergencyData.vue';
     import { useTopTime } from '/@/utils/utils.ts';
     import { basicPath, emergencyPath, useSocket, yinChuanPath } from '/@/utils/socket.ts';
     import { useRefresh } from '/@/hooks/autoRefresh';
@@ -74,6 +77,7 @@
     import { useUserStore } from '/@/store/modules/user.ts';
     import { Map } from '/@/assets/mapUtils/map.ts';
     import LoginOutButton from '/@/views/components/loginOutButton.vue';
+    import EmergencyDataDialog from '/@/views/yinChuan/componetns/emergencyData/components/emergencyDataDialog.vue';
 
     const title = ref('银川片应急就医服务中心');
     const phone = '(0951-6805199)';
@@ -110,6 +114,11 @@
         }, 1000);
     }
 
+    const emergencyDataDialog = ref();
+    function emergencyDataList() {
+        emergencyDataDialog.value.openDialog();
+    }
+
     function getTime() {
         const { timeLeft, timeRight } = useTopTime();
         dayTimeO.value = timeLeft;
@@ -430,11 +439,14 @@
 
         .yichuan-body-left {
             .service-details {
-                height: 33%;
+                height: calc(100% / 3);
             }
 
             .daily-work-trends {
-                height: 67%;
+                height: calc(100% / 3);
+            }
+            .emergency-data {
+                height: calc(100% / 3);
             }
         }