update

1.修改标准化大屏跳转逻辑，根据获取分中心信息，进行跳转至对应页面

.env.development

@@ -1,7 +1,7 @@
 # 王昊地址
-VITE_GLOB_API_URL=http://192.168.1.27
+#VITE_GLOB_API_URL=http://192.168.1.27
 #开发环境
-#VITE_GLOB_API_URL=http://cqyt.dev.yg.dt.io
+VITE_GLOB_API_URL=http://cqyt.dev.yg.dt.io
 #VITE_GLOB_API_URL=https://api.cqygjk.com
 #健康监测工具报警-websocket
 #VITE_GLOB_API_YIN_JI=ws://cqyt.dev.yg.dt.io/health-watch/websocket/watchMonitor

src/App.vue

@@ -7,9 +7,30 @@
     import zhCN from 'ant-design-vue/es/locale/zh_CN';
     import dayjs from 'dayjs';
     import 'dayjs/locale/zh-cn';
+    import { onMounted } from 'vue';
+    import { getEmergencyCenterApi } from '/@/api/user.ts';
+    import { useUserStore } from '/@/store/modules/user.ts';
+    import { useRouter } from 'vue-router';
 
     dayjs.locale('zh-cn');
     const locle = zhCN;
+
+    const userStore = useUserStore();
+    const router = useRouter();
+
+    onMounted(async () => {
+        try {
+            if (userStore.getToken) {
+                const { result } = await getEmergencyCenterApi();
+                if (result?.screenPath) {
+                    router.replace(result?.screenPath);
+                } else {
+                    router.replace('centralScreen');
+                }
+                userStore.setCenterInfo(result);
+            }
+        } catch (e) {}
+    });
 </script>
 <style lang="less" src="./assets/less/index.less"></style>
 <style src="./assets/theme/theme.css"></style>

src/router/index.ts

@@ -83,6 +83,22 @@ const routes: Array<RouteRecordRaw> = [
         },
         component: () => import('/@/views/centralScreen/centralScreen.vue'),
     },
+    {
+        path: '/centralScreenYinChuan',
+        name: 'centralScreenYinChuan',
+        meta: {
+            title: '应急中心',
+        },
+        component: () => import('/@/views/centralScreen/centralScreenYinChuan.vue'),
+    },
+    {
+        path: '/centralScreenD',
+        name: 'centralScreenD',
+        meta: {
+            title: '应急中心',
+        },
+        component: () => import('/@/views/centralScreen/centralScreenD.vue'),
+    },
 ];
 
 const router: Router = createRouter({

src/views/centralScreen/centralScreen.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="outer" style="position: relative">
         <login-out-button out-url="centralScreenLogin" />
-        <div class="container-div" :class="[screenPath === sPath ? 'container-div-s' : '']">
+        <div class="container-div">
             <div class="title-d">
                 <div class="title-d-left">
                     {{ dayTimeO }}
@@ -13,7 +13,7 @@
                 <div class="title-d-right"> 累计运行时间：{{ dayTimeT }}</div>
             </div>
             <div class="body-d">
-                <div class="central-screen-body-left" :class="[screenPath === sPath ? 'central-screen-body-left-s' : '']">
+                <div class="central-screen-body-left">
                     <!--服务详情数据-->
                     <ServiceDetails
                         theme="dark"
@@ -25,7 +25,7 @@
                     <!--一线医疗点每日工作动态-->
                     <DailyWorkTrends theme="dark" :refreshState="refreshState" class="daily-work-trends" />
                 </div>
-                <div class="body-d-middle" :class="[screenPath === sPath ? 'body-d-middle-s' : '']">
+                <div class="body-d-middle">
                     <CenterMap
                         :showFooter="false"
                         :computedCenter="false"
@@ -35,7 +35,7 @@
                         @clearHospitalList="clearHospitalList"
                     />
                 </div>
-                <div class="body-d-right" :class="[screenPath === sPath ? 'body-d-right-s' : '']">
+                <div class="body-d-right">
                     <!--健康终端报警-->
                     <TerminalAlarm :refreshState="refreshState" :setting="setting" @emit-view-detail="handleEmployeeDialog" />
                     <!--员工队伍健康状况-->
@@ -78,20 +78,25 @@
     import EmergencyDialog from '/@/views/components/emergencyDialog.vue';
     import { basicPath, emergencyPath, useSocket, yinChuanPath } from '/@/utils/socket.ts';
     import { handleSocketUrl } from '/@/views/centralScreen/components/centerMapHooks.ts';
-    import { getEmergencyCenterApi } from '/@/api/user.ts';
     import LoginOutButton from '/@/views/components/loginOutButton.vue';
 
     const userStore = useUserStore();
     let { simpleName, centerTel } = userStore.getCenterInfo || { simpleName: '', centerTel: '' };
     const { refreshState } = useRefresh(DEFAULT_TIME);
+
+    const props = defineProps({
+        result: {
+            type: Object,
+            default: () => {},
+        },
+    });
+
     const dayTimeO = ref();
     const dayTimeT = ref();
     const interval = ref(1);
-    const title = ref((simpleName || '') + '应急就医服务中心');
+    const title = ref('应急就医服务中心' + (simpleName || ''));
     const phone = ref(centerTel || '0951-6805199');
 
-    const screenPath = ref('');
-    const sPath = ref('/specialScreen');
     const options = ref({
         center: [106.32, 38.45], //地图中心点
         zoom: 8, //地图显示的缩放级别
@@ -105,26 +110,24 @@
         }, 1000);
     }
 
+    const { getCenterInfo } = useUserStore();
     function getTime() {
-        const { timeLeft, timeRight } = useTopTime();
+        const { timeLeft, timeRight } = useTopTime(getCenterInfo?.commissioningTime);
         dayTimeO.value = timeLeft;
         dayTimeT.value = timeRight;
     }
 
-    const { getCenterInfo } = useUserStore();
-
     const setting = getSettings(DataType.yinChuan);
     onMounted(async () => {
         try {
-            const { result } = await getEmergencyCenterApi();
-            screenPath.value = result?.screenPath;
             options.value = {
-                center: [result?.longitude || 106.32, result?.latitude || 38.45], //地图中心点
+                center: [getCenterInfo?.longitude || 106.32, getCenterInfo?.latitude || 38.45], //地图中心点
                 zoom: 8, //地图显示的缩放级别
                 mapStyle: 'darkblue', //地图样式
             };
-            userStore.setCenterInfo(result);
+        } catch (e) {
-        } catch (e) {}
+            console.log(e);
+        }
 
         console.log([getCenterInfo?.longitude || 106.32, getCenterInfo?.latitude || 38.45]);
         init();
@@ -332,12 +335,6 @@
     .container-div {
         height: 100%;
     }
-    .container-div-s {
-        width: 200%;
-        height: 100%;
-        transform: scaleX(0.5);
-        transform-origin: left top;
-    }
 
     .title-d {
         height: 80px;
@@ -424,13 +421,4 @@
         background: url('/@/assets/images/bottom-b.png') no-repeat;
         background-size: 100% 100%;
     }
-    .central-screen-body-left-s {
-        width: calc(100% / 6) !important;
-    }
-    .body-d-middle-s {
-        width: calc(100% * 2 / 3) !important;
-    }
-    .body-d-right-s {
-        width: calc(100% / 6) !important;
-    }
 </style>

src/views/centralScreen/centralScreenD.vue

@@ -0,0 +1,441 @@
+<template>
+    <div class="outer" style="position: relative">
+        <login-out-button out-url="centralScreenLogin" />
+        <div class="container-div container-div-s">
+            <div class="title-d">
+                <div class="title-d-left">
+                    {{ dayTimeO }}
+                </div>
+                <div class="title-d-middle">
+                    <span>{{ title }}</span>
+                    <span class="phone">({{ phone }})</span>
+                </div>
+                <div class="title-d-right"> 累计运行时间：{{ dayTimeT }}</div>
+            </div>
+            <div class="body-d">
+                <div class="central-screen-body-left central-screen-body-left-s">
+                    <!--服务详情数据-->
+                    <ServiceDetails
+                        theme="dark"
+                        :refreshState="refreshState"
+                        :setting="setting"
+                        class="service-details"
+                        @handleClick="handlePhoneDialog"
+                    />
+                    <!--一线医疗点每日工作动态-->
+                    <DailyWorkTrends theme="dark" :refreshState="refreshState" class="daily-work-trends" />
+                </div>
+                <div class="body-d-middle body-d-middle-s">
+                    <CenterMap
+                        :showFooter="false"
+                        :computedCenter="false"
+                        :mapOptions="options"
+                        :showHospitalList="showHospitalList"
+                        :hospitalList="hospitalList"
+                        @clearHospitalList="clearHospitalList"
+                    />
+                </div>
+                <div class="body-d-right body-d-right-s">
+                    <!--健康终端报警-->
+                    <TerminalAlarm :refreshState="refreshState" :setting="setting" @emit-view-detail="handleEmployeeDialog" />
+                    <!--员工队伍健康状况-->
+                    <EmployeeHealth theme="dark" :refreshState="refreshState" :setting="setting" />
+                    <!--体检数据-->
+                    <PhysicalExaminationData :key="tabState" :refreshState="refreshState" :setting="setting" />
+                </div>
+            </div>
+            <div class="bottom-d"></div>
+        </div>
+        <EmployeeDialog ref="employeeDialogRef" :record="socketData" />
+        <EmergencyDialog ref="emergencyDialogRef" :record="emergencyData" @confirmHelp="confirmHelp" />
+        <YunZuoXiDialog ref="yunZuoXiDialogRef" :record="socketData" @confirmHelp="confirmHelp" />
+
+        <!--呼入电话、受理电话-->
+        <PhoneDialog ref="phoneDialogRef" :phoneType="phoneType" :setting="setting" :title="phoneDialogTitle" :useForm="true" />
+        <!--健康终端查看详情-->
+        <TerminalAlarmDialog ref="terminalAlarmDialogRef" :setting="setting" />
+    </div>
+</template>
+<script setup lang="ts">
+    import { onMounted, onUnmounted, ref, nextTick, watch } from 'vue';
+    import ServiceDetails from '/@/views/centralScreen/components/serviceDetails.vue';
+    import CenterMap from '/@/views/centralScreen/components/centerMap.vue';
+    import TerminalAlarm from '/@/views/centralScreen/components/terminalAlarm.vue';
+    import DailyWorkTrends from '/@/views/centralScreen/components/dailyWorkTrends.vue';
+    import EmployeeHealth from '/@/views/centralScreen/components/employeeHealth.vue';
+    import PhysicalExaminationData from '/@/views/centralScreen/components/physicalExaminationData.vue';
+    import { useRefresh } from '/@/hooks/autoRefresh';
+    import { DEFAULT_TIME } from '/@/hooks/autoRefresh/pageRefreshTime.ts';
+    import { useTopTime } from '/@/utils/utils.ts';
+    import { DataType, getSettings, ThemeType } from '/@/utils/settings.ts';
+    import { useUserStore } from '/@/store/modules/user.ts';
+    import PhoneDialog from '/@/views/centralScreen/components/phoneDialog.vue';
+    import { ServerDetailType } from '/@/components/body-d-left/bodyLeftHooks.ts';
+    import TerminalAlarmDialog from '/@/views/centralScreen/components/terminalAlarmDialog.vue';
+    import { Map } from '/@/assets/mapUtils/map.ts';
+    import YunZuoXiDialog from '/@/views/components/yunZuoXiDialog.vue';
+    import EmployeeDialog from '/@/views/components/employeeDialog.vue';
+    import EmergencyDialog from '/@/views/components/emergencyDialog.vue';
+    import { basicPath, emergencyPath, useSocket, yinChuanPath } from '/@/utils/socket.ts';
+    import { handleSocketUrl } from '/@/views/centralScreen/components/centerMapHooks.ts';
+    import LoginOutButton from '/@/views/components/loginOutButton.vue';
+
+    const userStore = useUserStore();
+    let { simpleName, centerTel } = userStore.getCenterInfo || { simpleName: '', centerTel: '' };
+    const { refreshState } = useRefresh(DEFAULT_TIME);
+
+    const props = defineProps({
+        result: {
+            type: Object,
+            default: () => {},
+        },
+    });
+
+    const dayTimeO = ref();
+    const dayTimeT = ref();
+    const interval = ref(1);
+    const title = ref('应急就医服务中心' + (simpleName || ''));
+    const phone = ref(centerTel || '0951-6805199');
+
+    const screenPath = ref('');
+    const options = ref({
+        center: [106.32, 38.45], //地图中心点
+        zoom: 8, //地图显示的缩放级别
+        mapStyle: 'darkblue', //地图样式
+    });
+
+    function init() {
+        getTime();
+        interval.value = setInterval(() => {
+            getTime();
+        }, 1000);
+    }
+
+    const { getCenterInfo } = useUserStore();
+    function getTime() {
+        const { timeLeft, timeRight } = useTopTime(getCenterInfo?.commissioningTime);
+        dayTimeO.value = timeLeft;
+        dayTimeT.value = timeRight;
+    }
+
+    const setting = getSettings(DataType.yinChuan);
+    onMounted(async () => {
+        try {
+            screenPath.value = getCenterInfo?.screenPath;
+            options.value = {
+                center: [getCenterInfo?.longitude || 106.32, getCenterInfo?.latitude || 38.45], //地图中心点
+                zoom: 8, //地图显示的缩放级别
+                mapStyle: 'darkblue', //地图样式
+            };
+        } catch (e) {
+            console.log(e);
+        }
+
+        console.log([getCenterInfo?.longitude || 106.32, getCenterInfo?.latitude || 38.45]);
+        init();
+        document.title = title.value;
+        document.addEventListener('visibilitychange', checkTabState);
+        //设置主题
+        store.setThemeType(ThemeType.dark);
+    });
+    const store = useUserStore();
+
+    onUnmounted(() => {
+        clearInterval(interval.value);
+        document.removeEventListener('visibilitychange', checkTabState);
+
+        // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
+        window.onbeforeunload = function () {
+            closeSocket();
+            closeSocket2();
+            // closeSocket3(); //银川云坐席
+        };
+
+        clearInterval(interval.value);
+    });
+    const tabState = ref('');
+
+    //判断窗口是否处于激活状态，切换浏览器tab会导致部分echarts显示不正常
+    function checkTabState() {
+        tabState.value = document.hidden ? 'inactive' : 'active';
+    }
+
+    const phoneDialogTitle = ref('呼入电话');
+    const phoneDialogRef = ref();
+    //0:处置 1:处理 2:呼入 3:全部
+    const phoneType = ref('');
+
+    //呼入电话、受理电话弹窗
+    function handlePhoneDialog(item) {
+        const { name, key } = item;
+        //呼入电话
+        //受理电话
+        if (key == 'alerdyreceive' || key == 'gross') {
+            phoneType.value = ServerDetailType[key];
+            phoneDialogTitle.value = name;
+            nextTick(() => {
+                phoneDialogRef.value.openDialog();
+            });
+        }
+    }
+
+    const terminalAlarmDialogRef = ref();
+
+    //终端预警列表弹窗
+    function handleEmployeeDialog() {
+        terminalAlarmDialogRef.value.openDialog();
+    }
+
+    //确认应急求助
+    const hospitalList = ref([]); //医院列表
+    const showHospitalList = ref(false);
+
+    async function confirmHelp(data) {
+        if (!data.lon) return;
+        hospitalList.value = [];
+        //用户的坐标信息
+        let point = [data.lon, data.lat];
+        if (data.hospitalList && data.hospitalList.length > 0) {
+            try {
+                hospitalList.value = await getHospitalList(data.hospitalList, point);
+                showHospitalList.value = true;
+            } catch (error) {
+                console.log('获取医院列表时出错:', error);
+            }
+        } else {
+            console.log('没有医院list');
+        }
+        Map.getAddressByPoint(point).then((res) => {
+            const option = {
+                lon: data.lon,
+                lat: data.lat,
+                position: point,
+                name: data.realName,
+                address: res,
+                sex: data.sex,
+            };
+            Map.createEmergencyMarker(option);
+        });
+    }
+
+    async function getHospitalList(hospitalList, userLocation) {
+        const hospitalPromises = hospitalList.map(async (item) => {
+            item.distance = getDistance(userLocation, [item.lon, item.lat]);
+            const { time, routeList } = await getDriveTime(userLocation, [item.lon, item.lat]);
+            item.driveTime = time;
+            item.routeList = routeList;
+            item.userLocation = userLocation;
+            return item; // 返回更新后的医院条目
+        });
+        return Promise.all(hospitalPromises);
+    }
+
+    function getDistance(userLocation, destination) {
+        const value = Map.getDistance(userLocation, destination);
+        return value > 1000 ? (value / 1000).toFixed(2) + 'km' : value + 'm';
+    }
+
+    async function getDriveTime(userLocation, destination) {
+        let { time, steps } = await Map.getDriveTime(userLocation, destination);
+        let h,
+            m,
+            s = 0;
+        if (time <= 60) {
+            return {
+                time: `${s}秒`,
+                routeList: steps,
+            };
+        }
+        if (time > 60 && time < 3600) {
+            m = Math.floor(time / 60);
+            return {
+                time: `${m}分`,
+                routeList: steps,
+            };
+        }
+        if (time >= 3600) {
+            h = Math.floor(time / 3600);
+            m = Math.floor((time - h * 3600) / 60);
+            return {
+                time: `${h}小时${m}分`,
+                routeList: steps,
+            };
+        }
+    }
+
+    function clearHospitalList() {
+        hospitalList.value = [];
+        showHospitalList.value = false;
+    }
+
+    // //websocket消息
+    // // 健康监测工具报警
+    //
+    // let basicUrl = handleSocketUrl(basicPath + `${DataType.yinChuan}`, userStore.getCenterInfo.id);
+    // const { socketData, setSocketData, closeSocket } = useSocket(basicUrl, false);
+    // const employeeDialogRef = ref();
+    // watch(socketData, (nVal) => {
+    //     if (nVal) {
+    //         nextTick(() => {
+    //             setSocketData(nVal);
+    //             employeeDialogRef.value.openDialog();
+    //         });
+    //     }
+    // });
+    //应急求助
+    let emergencyUrl = handleSocketUrl(emergencyPath, userStore.getCenterInfo.id);
+    const { socketData: emergencyData, setSocketData: setEmergencyData, closeSocket: closeSocket2 } = useSocket(emergencyUrl, false);
+    const emergencyDialogRef = ref();
+
+    watch(emergencyData, (nVal) => {
+        if (nVal) {
+            nextTick(() => {
+                setEmergencyData(nVal);
+                emergencyDialogRef.value.openDialog();
+            });
+        }
+    });
+    //银川云坐席
+    let socketUrl = handleSocketUrl(basicPath, userStore.getCenterInfo?.id);
+    const { socketData, setSocketData, closeSocket } = useSocket(socketUrl, false);
+    const yunZuoXiDialogRef = ref(); //云坐席
+    // const emergencyDialogRef = ref(); //紧急求助
+    const employeeDialogRef = ref(); //终端报警||健康监测
+    //title = "1:紧急求助 2:云坐席 3:终端报警")
+    watch(socketData, (nVal) => {
+        if (nVal) {
+            let { popType } = nVal;
+            if (popType == 1) {
+                nextTick(() => {
+                    setSocketData(nVal);
+                    emergencyDialogRef.value.openDialog();
+                });
+            }
+            if (popType == 2) {
+                nextTick(() => {
+                    setSocketData(nVal);
+                    yunZuoXiDialogRef.value.openDialog();
+                });
+            }
+            if (popType == 3) {
+                nextTick(() => {
+                    setSocketData(nVal);
+                    employeeDialogRef.value.openDialog();
+                });
+            }
+        }
+    });
+</script>
+<style lang="less" scoped>
+    .outer {
+        height: 100%;
+        box-sizing: border-box;
+        background: url('/@/assets/images/bg.png') no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .container-div {
+        height: 100%;
+    }
+    .container-div-s {
+        width: 200%;
+        height: 100%;
+        transform: scaleX(0.5);
+        transform-origin: left top;
+    }
+
+    .title-d {
+        height: 80px;
+        line-height: 80px;
+        display: flex;
+        padding-bottom: 9px;
+        background: url('/@/assets/images/top-title.png') no-repeat;
+        background-size: 100% 100%;
+
+        .title-d-left,
+        .title-d-middle,
+        .title-d-right {
+            font-size: 27px;
+            color: #ffffff;
+            line-height: 60px;
+            text-align: center;
+        }
+
+        .title-d-middle {
+            .phone {
+                font-size: 27px;
+                margin-left: 4px;
+            }
+        }
+
+        > :nth-child(1) {
+            width: 29%;
+        }
+
+        > :nth-child(2) {
+            width: 42%;
+            font-size: 40px;
+            font-weight: bold;
+        }
+
+        > :nth-child(3) {
+            width: 29%;
+        }
+    }
+
+    .body-d {
+        display: flex;
+        height: calc(100% - 120px);
+        padding-top: 10px;
+
+        > :nth-child(1) {
+            width: 24%;
+        }
+
+        > :nth-child(2) {
+            width: 52%;
+        }
+
+        > :nth-child(3) {
+            width: 24%;
+        }
+
+        .central-screen-body-left {
+            .service-details {
+                height: 33%;
+            }
+
+            .daily-work-trends {
+                height: 67%;
+            }
+        }
+
+        .body-d-right {
+            > :nth-child(n) {
+                width: 100%;
+                height: calc(100% / 3);
+                padding: 10px;
+            }
+        }
+
+        .body-d-middle {
+            display: flex;
+            flex-direction: column;
+        }
+    }
+
+    .bottom-d {
+        height: 40px;
+        background: url('/@/assets/images/bottom-b.png') no-repeat;
+        background-size: 100% 100%;
+    }
+    .central-screen-body-left-s {
+        width: calc(100% / 6) !important;
+    }
+    .body-d-middle-s {
+        width: calc(100% * 2 / 3) !important;
+    }
+    .body-d-right-s {
+        width: calc(100% / 6) !important;
+    }
+</style>

src/views/centralScreen/centralScreenYinChuan.vue

@@ -0,0 +1,435 @@
+<template>
+    <div class="outer" style="position: relative">
+        <login-out-button out-url="centralScreenLogin" />
+        <div class="container-div">
+            <div class="title-d">
+                <div class="title-d-left">
+                    {{ dayTimeO }}
+                </div>
+                <div class="title-d-middle">
+                    <span>{{ title }}</span>
+                    <span class="phone">({{ phone }})</span>
+                </div>
+                <div class="title-d-right"> 累计运行时间：{{ dayTimeT }}</div>
+            </div>
+            <div class="body-d">
+                <div class="central-screen-body-left">
+                    <!--服务详情数据-->
+                    <ServiceDetails
+                        theme="dark"
+                        :refreshState="refreshState"
+                        :setting="setting"
+                        class="service-details"
+                        @handleClick="handlePhoneDialog"
+                    />
+                    <!--一线医疗点每日工作动态-->
+                    <DailyWorkTrends theme="dark" :refreshState="refreshState" class="daily-work-trends" />
+                    <EmergencyData @emergencyDataList="emergencyDataList" class="emergency-data" />
+                </div>
+                <div class="body-d-middle">
+                    <CenterMap
+                        :showFooter="false"
+                        :computedCenter="false"
+                        :mapOptions="options"
+                        :showHospitalList="showHospitalList"
+                        :hospitalList="hospitalList"
+                        @clearHospitalList="clearHospitalList"
+                    />
+                </div>
+                <div class="body-d-right">
+                    <!--健康终端报警-->
+                    <TerminalAlarm :refreshState="refreshState" :setting="setting" @emit-view-detail="handleEmployeeDialog" />
+                    <!--员工队伍健康状况-->
+                    <EmployeeHealth theme="dark" :refreshState="refreshState" :setting="setting" />
+                    <!--体检数据-->
+                    <PhysicalExaminationData :key="tabState" :refreshState="refreshState" :setting="setting" />
+                </div>
+            </div>
+            <div class="bottom-d"></div>
+        </div>
+        <EmployeeDialog ref="employeeDialogRef" :record="socketData" />
+        <EmergencyDialog ref="emergencyDialogRef" :record="emergencyData" @confirmHelp="confirmHelp" />
+        <YunZuoXiDialog ref="yunZuoXiDialogRef" :record="socketData" @confirmHelp="confirmHelp" />
+
+        <!--呼入电话、受理电话-->
+        <PhoneDialog ref="phoneDialogRef" :phoneType="phoneType" :setting="setting" :title="phoneDialogTitle" :useForm="true" />
+        <!--健康终端查看详情-->
+        <TerminalAlarmDialog ref="terminalAlarmDialogRef" :setting="setting" />
+    </div>
+</template>
+<script setup lang="ts">
+    import { onMounted, onUnmounted, ref, nextTick, watch } from 'vue';
+    import ServiceDetails from '/@/views/centralScreen/components/serviceDetails.vue';
+    import CenterMap from '/@/views/centralScreen/components/centerMap.vue';
+    import TerminalAlarm from '/@/views/centralScreen/components/terminalAlarm.vue';
+    import DailyWorkTrends from '/@/views/centralScreen/components/dailyWorkTrends.vue';
+    import EmployeeHealth from '/@/views/centralScreen/components/employeeHealth.vue';
+    import PhysicalExaminationData from '/@/views/centralScreen/components/physicalExaminationData.vue';
+    import { useRefresh } from '/@/hooks/autoRefresh';
+    import { DEFAULT_TIME } from '/@/hooks/autoRefresh/pageRefreshTime.ts';
+    import { useTopTime } from '/@/utils/utils.ts';
+    import { DataType, getSettings, ThemeType } from '/@/utils/settings.ts';
+    import { useUserStore } from '/@/store/modules/user.ts';
+    import PhoneDialog from '/@/views/centralScreen/components/phoneDialog.vue';
+    import { ServerDetailType } from '/@/components/body-d-left/bodyLeftHooks.ts';
+    import TerminalAlarmDialog from '/@/views/centralScreen/components/terminalAlarmDialog.vue';
+    import { Map } from '/@/assets/mapUtils/map.ts';
+    import YunZuoXiDialog from '/@/views/components/yunZuoXiDialog.vue';
+    import EmployeeDialog from '/@/views/components/employeeDialog.vue';
+    import EmergencyDialog from '/@/views/components/emergencyDialog.vue';
+    import { basicPath, emergencyPath, useSocket, yinChuanPath } from '/@/utils/socket.ts';
+    import { handleSocketUrl } from '/@/views/centralScreen/components/centerMapHooks.ts';
+    import LoginOutButton from '/@/views/components/loginOutButton.vue';
+    import EmergencyData from '/@/views/centralScreen/components/emergencyData/emergencyData.vue';
+
+    const userStore = useUserStore();
+    let { simpleName, centerTel } = userStore.getCenterInfo || { simpleName: '', centerTel: '' };
+    const { refreshState } = useRefresh(DEFAULT_TIME);
+
+    const props = defineProps({
+        result: {
+            type: Object,
+            default: () => {},
+        },
+    });
+
+    const dayTimeO = ref();
+    const dayTimeT = ref();
+    const interval = ref(1);
+    const title = ref('应急就医服务中心' + (simpleName || ''));
+    const phone = ref(centerTel || '0951-6805199');
+
+    const options = ref({
+        center: [106.32, 38.45], //地图中心点
+        zoom: 8, //地图显示的缩放级别
+        mapStyle: 'darkblue', //地图样式
+    });
+
+    function init() {
+        getTime();
+        interval.value = setInterval(() => {
+            getTime();
+        }, 1000);
+    }
+
+    const { getCenterInfo } = useUserStore();
+    function getTime() {
+        const { timeLeft, timeRight } = useTopTime(getCenterInfo?.commissioningTime);
+        dayTimeO.value = timeLeft;
+        dayTimeT.value = timeRight;
+    }
+
+    const setting = getSettings(DataType.yinChuan);
+    onMounted(async () => {
+        try {
+            options.value = {
+                center: [getCenterInfo?.longitude || 106.32, getCenterInfo?.latitude || 38.45], //地图中心点
+                zoom: 8, //地图显示的缩放级别
+                mapStyle: 'darkblue', //地图样式
+            };
+        } catch (e) {
+            console.log(e);
+        }
+
+        console.log([getCenterInfo?.longitude || 106.32, getCenterInfo?.latitude || 38.45]);
+        init();
+        document.title = title.value;
+        document.addEventListener('visibilitychange', checkTabState);
+        //设置主题
+        store.setThemeType(ThemeType.dark);
+    });
+    const store = useUserStore();
+
+    onUnmounted(() => {
+        clearInterval(interval.value);
+        document.removeEventListener('visibilitychange', checkTabState);
+
+        // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
+        window.onbeforeunload = function () {
+            closeSocket();
+            closeSocket2();
+            // closeSocket3(); //银川云坐席
+        };
+
+        clearInterval(interval.value);
+    });
+    const tabState = ref('');
+
+    //判断窗口是否处于激活状态，切换浏览器tab会导致部分echarts显示不正常
+    function checkTabState() {
+        tabState.value = document.hidden ? 'inactive' : 'active';
+    }
+
+    const phoneDialogTitle = ref('呼入电话');
+    const phoneDialogRef = ref();
+    //0:处置 1:处理 2:呼入 3:全部
+    const phoneType = ref('');
+
+    //呼入电话、受理电话弹窗
+    function handlePhoneDialog(item) {
+        const { name, key } = item;
+        //呼入电话
+        //受理电话
+        if (key == 'alerdyreceive' || key == 'gross') {
+            phoneType.value = ServerDetailType[key];
+            phoneDialogTitle.value = name;
+            nextTick(() => {
+                phoneDialogRef.value.openDialog();
+            });
+        }
+    }
+
+    const terminalAlarmDialogRef = ref();
+
+    //终端预警列表弹窗
+    function handleEmployeeDialog() {
+        terminalAlarmDialogRef.value.openDialog();
+    }
+
+    //确认应急求助
+    const hospitalList = ref([]); //医院列表
+    const showHospitalList = ref(false);
+
+    async function confirmHelp(data) {
+        if (!data.lon) return;
+        hospitalList.value = [];
+        //用户的坐标信息
+        let point = [data.lon, data.lat];
+        if (data.hospitalList && data.hospitalList.length > 0) {
+            try {
+                hospitalList.value = await getHospitalList(data.hospitalList, point);
+                showHospitalList.value = true;
+            } catch (error) {
+                console.log('获取医院列表时出错:', error);
+            }
+        } else {
+            console.log('没有医院list');
+        }
+        Map.getAddressByPoint(point).then((res) => {
+            const option = {
+                lon: data.lon,
+                lat: data.lat,
+                position: point,
+                name: data.realName,
+                address: res,
+                sex: data.sex,
+            };
+            Map.createEmergencyMarker(option);
+        });
+    }
+
+    async function getHospitalList(hospitalList, userLocation) {
+        const hospitalPromises = hospitalList.map(async (item) => {
+            item.distance = getDistance(userLocation, [item.lon, item.lat]);
+            const { time, routeList } = await getDriveTime(userLocation, [item.lon, item.lat]);
+            item.driveTime = time;
+            item.routeList = routeList;
+            item.userLocation = userLocation;
+            return item; // 返回更新后的医院条目
+        });
+        return Promise.all(hospitalPromises);
+    }
+
+    function getDistance(userLocation, destination) {
+        const value = Map.getDistance(userLocation, destination);
+        return value > 1000 ? (value / 1000).toFixed(2) + 'km' : value + 'm';
+    }
+
+    async function getDriveTime(userLocation, destination) {
+        let { time, steps } = await Map.getDriveTime(userLocation, destination);
+        let h,
+            m,
+            s = 0;
+        if (time <= 60) {
+            return {
+                time: `${s}秒`,
+                routeList: steps,
+            };
+        }
+        if (time > 60 && time < 3600) {
+            m = Math.floor(time / 60);
+            return {
+                time: `${m}分`,
+                routeList: steps,
+            };
+        }
+        if (time >= 3600) {
+            h = Math.floor(time / 3600);
+            m = Math.floor((time - h * 3600) / 60);
+            return {
+                time: `${h}小时${m}分`,
+                routeList: steps,
+            };
+        }
+    }
+
+    function clearHospitalList() {
+        hospitalList.value = [];
+        showHospitalList.value = false;
+    }
+
+    // //websocket消息
+    // // 健康监测工具报警
+    //
+    // let basicUrl = handleSocketUrl(basicPath + `${DataType.yinChuan}`, userStore.getCenterInfo.id);
+    // const { socketData, setSocketData, closeSocket } = useSocket(basicUrl, false);
+    // const employeeDialogRef = ref();
+    // watch(socketData, (nVal) => {
+    //     if (nVal) {
+    //         nextTick(() => {
+    //             setSocketData(nVal);
+    //             employeeDialogRef.value.openDialog();
+    //         });
+    //     }
+    // });
+    //应急求助
+    let emergencyUrl = handleSocketUrl(emergencyPath, userStore.getCenterInfo.id);
+    const { socketData: emergencyData, setSocketData: setEmergencyData, closeSocket: closeSocket2 } = useSocket(emergencyUrl, false);
+    const emergencyDialogRef = ref();
+
+    watch(emergencyData, (nVal) => {
+        if (nVal) {
+            nextTick(() => {
+                setEmergencyData(nVal);
+                emergencyDialogRef.value.openDialog();
+            });
+        }
+    });
+    //银川云坐席
+    let socketUrl = handleSocketUrl(basicPath, userStore.getCenterInfo?.id);
+    const { socketData, setSocketData, closeSocket } = useSocket(socketUrl, false);
+    const yunZuoXiDialogRef = ref(); //云坐席
+    // const emergencyDialogRef = ref(); //紧急求助
+    const employeeDialogRef = ref(); //终端报警||健康监测
+    //title = "1:紧急求助 2:云坐席 3:终端报警")
+    watch(socketData, (nVal) => {
+        if (nVal) {
+            let { popType } = nVal;
+            if (popType == 1) {
+                nextTick(() => {
+                    setSocketData(nVal);
+                    emergencyDialogRef.value.openDialog();
+                });
+            }
+            if (popType == 2) {
+                nextTick(() => {
+                    setSocketData(nVal);
+                    yunZuoXiDialogRef.value.openDialog();
+                });
+            }
+            if (popType == 3) {
+                nextTick(() => {
+                    setSocketData(nVal);
+                    employeeDialogRef.value.openDialog();
+                });
+            }
+        }
+    });
+
+    const emergencyDataDialog = ref();
+    function emergencyDataList() {
+        emergencyDataDialog.value.openDialog();
+    }
+</script>
+<style lang="less" scoped>
+    .outer {
+        height: 100%;
+        box-sizing: border-box;
+        background: url('/@/assets/images/bg.png') no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .container-div {
+        height: 100%;
+    }
+
+    .title-d {
+        height: 80px;
+        line-height: 80px;
+        display: flex;
+        padding-bottom: 9px;
+        background: url('/@/assets/images/top-title.png') no-repeat;
+        background-size: 100% 100%;
+
+        .title-d-left,
+        .title-d-middle,
+        .title-d-right {
+            font-size: 27px;
+            color: #ffffff;
+            line-height: 60px;
+            text-align: center;
+        }
+
+        .title-d-middle {
+            .phone {
+                font-size: 27px;
+                margin-left: 4px;
+            }
+        }
+
+        > :nth-child(1) {
+            width: 29%;
+        }
+
+        > :nth-child(2) {
+            width: 42%;
+            font-size: 40px;
+            font-weight: bold;
+        }
+
+        > :nth-child(3) {
+            width: 29%;
+        }
+    }
+
+    .body-d {
+        display: flex;
+        height: calc(100% - 120px);
+        padding-top: 10px;
+
+        > :nth-child(1) {
+            width: 24%;
+        }
+
+        > :nth-child(2) {
+            width: 52%;
+        }
+
+        > :nth-child(3) {
+            width: 24%;
+        }
+
+        .central-screen-body-left {
+            .service-details {
+                height: calc(100% / 3);
+            }
+
+            .daily-work-trends {
+                height: calc(100% / 3);
+            }
+
+            .emergency-data {
+                height: calc(100% / 3);
+            }
+        }
+
+        .body-d-right {
+            > :nth-child(n) {
+                width: 100%;
+                height: calc(100% / 3);
+                padding: 10px;
+            }
+        }
+
+        .body-d-middle {
+            display: flex;
+            flex-direction: column;
+        }
+    }
+
+    .bottom-d {
+        height: 40px;
+        background: url('/@/assets/images/bottom-b.png') no-repeat;
+        background-size: 100% 100%;
+    }
+</style>

src/views/centralScreen/components/emergencyData/components/emergencyDataDialog.vue

@@ -0,0 +1,198 @@
+<template>
+    <Dialog :openVis="visible" width="60%" title="急救列表" @close="closeDialog" :maskClosable="false">
+        <template #container>
+            <BasicTable ref="registerTable" class="table-container" :columns="columns" :api="ambulancePageApi">
+                <template #bodyCell="{ column, record }">
+                    <template v-if="column?.dataIndex === 'tz'">
+                        <Dropdown :trigger="['click']">
+                            <span
+                                style="color: #45a2ff; cursor: pointer"
+                                @click="
+                                    () => {
+                                        console.log('aaa');
+                                    }
+                                "
+                                >查看</span
+                            >
+                            <template #overlay>
+                                <div class="drop-down-div">
+                                    <div>
+                                        <span>舒张压(mmHg)</span><span>{{ record?.diastolicPressure || '--' }}</span>
+                                    </div>
+                                    <div>
+                                        <span>收缩压(mmHg)</span><span>{{ record?.systolicPressure || '--' }}</span>
+                                    </div>
+                                    <div>
+                                        <span>血糖(mmoV/L)</span><span>{{ record?.bloodSugar || '--' }}</span>
+                                    </div>
+                                    <div>
+                                        <span>血氧饱和度(%)</span><span>{{ record?.bloodOxygenSaturation || '--' }}</span>
+                                    </div>
+                                    <div>
+                                        <span>体温(℃)</span><span>{{ record?.temperature || '--' }}</span>
+                                    </div>
+                                    <div>
+                                        <span>脉搏(次/分钟)</span><span>{{ record?.pulse || '--' }}</span>
+                                    </div>
+                                    <div>
+                                        <span>心率(次/分钟)</span><span>{{ record?.heartRate || '--' }}</span>
+                                    </div>
+                                    <div>
+                                        <span>呼吸率(次/分钟)</span><span>{{ record?.breathingRate || '--' }}</span>
+                                    </div>
+                                </div>
+                            </template>
+                        </Dropdown>
+                    </template>
+                    <template v-if="column?.dataIndex === 'arriveSceneTime'">
+                        <Dropdown :trigger="['click']">
+                            <span
+                                style="color: #45a2ff; cursor: pointer; margin-left: 10px"
+                                @click="
+                                    () => {
+                                        console.log('aaa');
+                                    }
+                                "
+                                >全部</span
+                            >
+                            <template #overlay>
+                                <div class="drop-down-div" style="width: 300px">
+                                    <div>
+                                        <span>救护车出发时间</span><span>{{ record?.startTime || '--' }}</span>
+                                    </div>
+                                    <div>
+                                        <span>到达现场时间</span><span>{{ record?.arriveSceneTime || '--' }}</span>
+                                    </div>
+                                    <div>
+                                        <span>离开现场时间</span><span>{{ record?.leaveSceneTime || '--' }}</span>
+                                    </div>
+                                    <div>
+                                        <span>到达医院时间</span><span>{{ record?.arriveHospitalTime || '--' }}</span>
+                                    </div>
+                                    <div>
+                                        <span>院前预警时间</span><span>{{ record?.earlyWarningTime || '--' }}</span>
+                                    </div>
+                                </div>
+                            </template>
+                        </Dropdown>
+                    </template>
+                </template>
+            </BasicTable>
+        </template>
+    </Dialog>
+</template>
+<script setup lang="ts">
+    import { nextTick, ref } from 'vue';
+    import Dialog from '/@/components/dialog/Dialog.vue';
+    import { useDialog } from '/@/views/components/dialogHooks.ts';
+    import BasicTable from '/@/components/secondaryScreen/secondMap/components/basicTable/BasicTable.vue';
+    import { ambulancePageApi } from '/@/views/yinChuan/yinChuan.api.ts';
+    import { Dropdown } from 'ant-design-vue';
+
+    const columns = [
+        {
+            title: '二级单位',
+            dataIndex: 'secondDepart',
+            key: 'secondDepart',
+            width: 120,
+        },
+        {
+            title: '三级单位',
+            dataIndex: 'thirdDepart',
+            key: 'secondDepart',
+            width: 120,
+        },
+        {
+            title: '姓名',
+            dataIndex: 'patientName',
+            key: 'patientName',
+            width: 120,
+        },
+        {
+            title: '性别',
+            dataIndex: 'gender_dictText',
+            key: 'gender_dictText',
+            width: 45,
+        },
+        {
+            title: '年龄',
+            dataIndex: 'age',
+            key: 'age',
+            width: 45,
+        },
+        {
+            title: '联系电话',
+            dataIndex: 'phone',
+            key: 'phone',
+            width: 110,
+        },
+        {
+            title: '病人MPDS类型',
+            dataIndex: 'mpdsCategoryId_dictText',
+            key: 'mpdsCategoryId_dictText',
+            width: 110,
+        },
+        {
+            title: '生命体征',
+            dataIndex: 'tz',
+            key: 'tz',
+            slot: 'tz',
+            width: 75,
+        },
+        {
+            title: '病情判断',
+            dataIndex: 'injuryLevel_dictText',
+            key: 'injuryLevel_dictText',
+            width: 80,
+        },
+        {
+            title: '到达现场时间',
+            dataIndex: 'arriveSceneTime',
+            key: 'arriveSceneTime',
+            width: 180,
+        },
+        {
+            title: '发病地点',
+            dataIndex: 'attackAddress',
+            key: 'attackAddress',
+            width: 220,
+            // customRender: ({ record }) => {
+            //     if (record?.address) {
+            //         return record?.address;
+            //     } else {
+            //         return h('span', { style: { color: '#eb3636' } }, record?.gpsErrorMsg);
+            //     }
+            // },
+        },
+    ];
+    const { visible, closeDialog, openDialog } = useDialog({ title: '急救列表' });
+    function openDia() {
+        openDialog();
+        // nextTick(() => {
+        //     registerTable.value?.getRecords();
+        // });
+    }
+    const registerTable = ref();
+    defineExpose({
+        openDialog: openDia,
+    });
+</script>
+<style scoped lang="less">
+    .table-container {
+        margin: 0 10px;
+    }
+
+    .drop-down-div {
+        background-color: #0f2841;
+        color: #ffffff;
+        border: 1px solid #1960a3;
+        padding: 10px 10px 0;
+        width: 200px;
+        div {
+            width: 100%;
+            padding: 0 0 10px 0;
+            display: flex;
+            justify-content: space-between;
+        }
+    }
+</style>

src/views/centralScreen/components/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>