update 云坐席弹窗WebSocket

.env.production

@@ -6,3 +6,7 @@ VITE_GLOB_API_YIN_JI=wss://api.cqygjk.com/health-watch/websocket/watchMonitor
 #健康监测工具报警-websocket
 VITE_GLOB_API_JIAN_CE=wss://api.cqygjk.com/health-emergency/websocket/emergency
 
+#西安云坐席
+VITE_GLOB_API_XIAN_YUN=wss://api.cqygjk.com/health-emergency/websocket/emergency3
+#银川云坐席
+VITE_GLOB_API_YIN_CHUAN=wss://api.cqygjk.com/health-emergency/websocket/emergency4

src/assets/mapUtils/map.ts

@@ -459,7 +459,6 @@ export const Map = {
         return new Promise((resolve, reject) => {
             geocoder.getAddress(lnglat, (status, result) => {
                 if (status === 'complete' && result.regeocode) {
-                    console.log('xx', result);
                     return resolve(result.regeocode.formattedAddress, result.regeocode);
                 }
                 return reject(result);

src/components/chinaMap/chinaMap.vue

@@ -474,7 +474,7 @@
                         margin: 5px 19px 5px 8px;
                     }
 
-                    .line-sesc {
+                    .line-desc {
                         flex: 1;
                     }
                 }

src/components/chinaMap/components/routePanel.vue

@@ -107,7 +107,7 @@
                 margin: 5px 19px 5px 8px;
             }
 
-            .line-sesc {
+            .line-desc {
                 flex: 1;
             }
         }

src/components/secondaryScreen/secondMap/components/userInfoModal/sleep.vue

@@ -204,7 +204,6 @@
                     type: 'shadow',
                 },
                 formatter: function (params) {
-                    console.log(params);
                     let tar = params[0];
                     let name = '';
                     switch (tar.value) {
@@ -380,6 +379,7 @@
 
         return { h: (time - (time % 60)) / 60, m: time % 60 };
     }
+
     onMounted(() => {
         initEchart();
     });

src/components/xianMap/components/routePanel.vue

@@ -104,11 +104,11 @@
 
             .line {
                 width: 1px;
-                color: var(--cardFontColor);
+                background-color: var(--cardFontColor);
                 margin: 5px 19px 5px 8px;
             }
 
-            .line-sesc {
+            .line-desc {
                 flex: 1;
             }
         }

src/utils/env.ts

@@ -1,9 +1,11 @@
 export function getAppEnvConfig() {
     const ENV = import.meta.env;
-    const { VITE_GLOB_API_URL, VITE_GLOB_API_YIN_JI, VITE_GLOB_API_JIAN_CE } = ENV;
+    const { VITE_GLOB_API_URL, VITE_GLOB_API_YIN_JI, VITE_GLOB_API_JIAN_CE, VITE_GLOB_API_XIAN_YUN, VITE_GLOB_API_YIN_CHUAN } = ENV;
     return {
         VITE_GLOB_API_URL,
         VITE_GLOB_API_YIN_JI,
         VITE_GLOB_API_JIAN_CE,
+        VITE_GLOB_API_XIAN_YUN,
+        VITE_GLOB_API_YIN_CHUAN,
     };
 }

src/utils/socket.ts

@@ -8,11 +8,15 @@ import { useRouter } from 'vue-router';
 const router = useRouter();
 const userStore = useUserStore();
 const { token } = userStore;
-const { VITE_GLOB_API_YIN_JI, VITE_GLOB_API_JIAN_CE } = getAppEnvConfig();
+const { VITE_GLOB_API_YIN_JI, VITE_GLOB_API_JIAN_CE, VITE_GLOB_API_XIAN_YUN, VITE_GLOB_API_YIN_CHUAN } = getAppEnvConfig();
-//健康监测工具报警
-export const basicPath = VITE_GLOB_API_YIN_JI;
 //应急求助
+export const basicPath = VITE_GLOB_API_YIN_JI;
+//健康监测工具报警
 export const emergencyPath = VITE_GLOB_API_JIAN_CE;
+//西安云坐席
+export const xianYunPath = VITE_GLOB_API_XIAN_YUN;
+//银川
+export const yinChuanPath = VITE_GLOB_API_YIN_CHUAN;
 let t = token || getAuthCache(TOKEN_KEY);
 
 export function useSocket(p = basicPath) {
@@ -69,6 +73,7 @@ export function useSocket(p = basicPath) {
         if (typeof WebSocket === 'undefined') {
             alert('您的浏览器不支持socket');
         } else {
+            closeSocket();
             // 实例化socket
             socket.value = new WebSocket(path.value + Date.now(), [t]);
 
@@ -87,10 +92,11 @@ export function useSocket(p = basicPath) {
             socket.value.onmessage = function (event) {
                 //如果获取到消息，心跳检测重置
                 heartCheck.reset().start(); //拿到任何消息都说明当前连接是正常的
-                //console.log('收到消息:', event.data);
+                console.log('收到消息:', event.data);
                 if (event.data != 'pong') {
                     let data = JSON.parse(event.data);
-                    socketData.value = data;
+                    // socketData.value = data;
+                    setSocketData(data);
                 }
             };
         }
@@ -103,7 +109,7 @@ export function useSocket(p = basicPath) {
     init();
 
     function closeSocket() {
-        socket.value && socket.value.close;
+        socket.value && socket.value.hasOwnProperty('close') && socket.value.close();
     }
 
     return { socket, socketData, setSocketData, closeSocket };

src/views/components/yunZuoXiDialog.vue

@@ -0,0 +1,107 @@
+<!--云坐席弹窗-->
+<template>
+    <Dialog :openVis="visible" width="30%" :title="title" @close="closeDialog" :maskClosable="false">
+        <template #container>
+            <div class="police-con" :class="[themeType]">
+                <div class="sub-text"> 有一个员工刚刚发起应急求助,请马上处理！</div>
+                <div class="con-item">
+                    <span>姓名：</span>
+                    <span>{{ userInfo?.realName }}</span>
+                </div>
+                <div class="con-item">
+                    <span>年龄：</span>
+                    <span>{{ userInfo?.age || '未知' }}</span>
+                </div>
+                <div class="con-item">
+                    <span>单位：</span>
+                    <span>{{ userInfo?.departName || '未知' }}</span>
+                </div>
+                <div class="con-item">
+                    <span>部门：</span>
+                    <span>{{ userInfo?.orgName || '未知' }}</span>
+                </div>
+                <div class="con-item">
+                    <span>电话：</span>
+                    <span>{{ userInfo?.phone || '未知' }}</span>
+                </div>
+            </div>
+            <div class="btn-box">
+                <a-button type="primary" @click="confirmHelp">确认</a-button>
+            </div>
+        </template>
+    </Dialog>
+</template>
+<script setup lang="ts">
+    import Dialog from '/@/components/dialog/Dialog.vue';
+    import { useDialog } from '/@/views/components/dialogHooks.ts';
+    import { watch, ref, Ref } from 'vue';
+    import { useTheme } from '/@/hooks/theme/useTheme.ts';
+
+    const props = defineProps({
+        record: Object,
+    });
+    const emit = defineEmits(['confirmHelp']);
+    const { themeType } = useTheme();
+
+    interface UserInfo {
+        realName?: string;
+        age?: string;
+        departName?: string;
+        orgName?: string;
+        phone?: string;
+    }
+
+    const userInfo: Ref<UserInfo> = ref({});
+    watch(
+        () => props.record,
+        (nVal: UserInfo) => {
+            userInfo.value = nVal;
+        }
+    );
+    const { visible, title, closeDialog, openDialog } = useDialog({ title: '应急求助' });
+
+    defineExpose({
+        openDialog,
+    });
+
+    //确认帮助
+    function confirmHelp() {
+        closeDialog();
+        emit('confirmHelp', userInfo.value);
+    }
+</script>
+<style scoped lang="less">
+    .police-con {
+        padding: 2% 0 2% 5%;
+
+        .sub-text {
+            font-weight: bold;
+            margin-left: 8px;
+            font-size: 16px;
+        }
+
+        .con-item {
+            padding: 1.3% 0;
+            display: flex;
+
+            span:nth-child(1) {
+                font-weight: bold;
+                text-align: right;
+                display: inline-flex;
+                justify-content: flex-end;
+                width: 80px;
+            }
+
+            span:nth-child(2) {
+                flex: 1;
+                padding-left: 2%;
+                padding-right: 2%;
+            }
+        }
+    }
+
+    .btn-box {
+        text-align: center;
+        margin-top: 2%;
+    }
+</style>

src/views/index.vue

@@ -28,6 +28,7 @@
             </div>
         </div>
         <div class="bottom-d"></div>
+        <YunZuoXiDialog ref="yunZuoXiDialogRef" :record="xianYunData" @confirmHelp="confirmHelp" />
         <EmployeeDialog ref="employeeDialogRef" :record="socketData" />
         <EmergencyDialog ref="emergencyDialogRef" :record="emergencyData" @confirmHelp="confirmHelp" />
         <PhoneDialog ref="phoneDialogRef" :title="phoneDialogTitle" :useForm="true" :setting="setting" :phoneType="phoneType" />
@@ -44,8 +45,9 @@
     import xianMap from '/@/components/xianMap/xianMap.vue';
     import EmployeeDialog from '/@/views/components/employeeDialog.vue';
     import EmergencyDialog from '/@/views/components/emergencyDialog.vue';
+    import YunZuoXiDialog from '/@/views/components/yunZuoXiDialog.vue';
     import { useTopTime } from '/@/utils/utils.ts';
-    import { basicPath, emergencyPath, useSocket } from '/@/utils/socket.ts';
+    import { basicPath, emergencyPath, xianYunPath, useSocket } from '/@/utils/socket.ts';
     import { useRefresh } from '/@/hooks/autoRefresh';
     import { DEFAULT_TIME } from '/@/hooks/autoRefresh/pageRefreshTime.ts';
     import { DataType, getSettings, ThemeType } from '/@/utils/settings.ts';
@@ -169,15 +171,28 @@
         if (nVal) {
             nextTick(() => {
                 setEmergencyData(nVal);
-                emergencyDialogRef.value.openDialog;
+                emergencyDialogRef.value.openDialog();
             });
         }
     });
+    //西安云坐席
+    const { socketData: xianYunData, setSocketData: setXianYunData, closeSocket: closeSocket3 } = useSocket(xianYunPath);
+    const yunZuoXiDialogRef = ref();
+    watch(xianYunData, (nVal) => {
+        if (nVal) {
+            nextTick(() => {
+                setXianYunData(nVal);
+                yunZuoXiDialogRef.value.openDialog();
+            });
+        }
+    });
+
     onUnmounted(() => {
         // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
         window.onbeforeunload = function () {
             closeSocket();
             closeSocket2();
+            closeSocket3(); //西安云坐席
         };
 
         clearInterval(interval.value);
@@ -213,13 +228,15 @@
         hospitalList.value = [];
         //用户的坐标信息
         let point = [data.lon, data.lat];
-        if (data.hospitalList.length > 0) {
+        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 = {

src/views/yinChuan/yinChuan.vue

@@ -24,7 +24,14 @@
                 <DailyWorkTrends theme="dark" :refreshState="refreshState" class="daily-work-trends" />
             </div>
             <div class="body-d-middle">
-                <china-map :showFooter="false" :computedCenter="false" :mapOptions="YinChuanOption" />
+                <china-map
+                    :showFooter="false"
+                    :computedCenter="false"
+                    :mapOptions="YinChuanOption"
+                    :showHospitalList="showHospitalList"
+                    :hospitalList="hospitalList"
+                    @clearHospitalList="clearHospitalList"
+                />
             </div>
             <div class="body-d-right">
                 <!--健康终端报警-->
@@ -37,7 +44,8 @@
         </div>
         <div class="bottom-d"></div>
         <EmployeeDialog ref="employeeDialogRef" :record="socketData" />
-        <EmergencyDialog ref="emergencyDialogRef" :record="emergencyData" />
+        <EmergencyDialog ref="emergencyDialogRef" :record="emergencyData" @confirmHelp="confirmHelp" />
+        <YunZuoXiDialog ref="yunZuoXiDialogRef" :record="yunZuoXiData" @confirmHelp="confirmHelp" />
         <PhoneDialog ref="phoneDialogRef" :phoneType="phoneType" :setting="setting" :title="phoneDialogTitle" :useForm="true" />
         <TerminalAlarmDialog ref="terminalAlarmDialogRef" :setting="setting" />
     </div>
@@ -52,10 +60,11 @@
     import ChinaMap from '/@/components/chinaMap/chinaMap.vue';
     import EmployeeDialog from '/@/views/components/employeeDialog.vue';
     import EmergencyDialog from '/@/views/components/emergencyDialog.vue';
+    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 { useTopTime } from '/@/utils/utils.ts';
-    import { basicPath, emergencyPath, useSocket } from '/@/utils/socket.ts';
+    import { basicPath, emergencyPath, useSocket, yinChuanPath } from '/@/utils/socket.ts';
     import { useRefresh } from '/@/hooks/autoRefresh';
     import { DEFAULT_TIME } from '/@/hooks/autoRefresh/pageRefreshTime.ts';
     import { useRoute } from 'vue-router';
@@ -63,6 +72,7 @@
     import { ServerDetailType } from '/@/components/body-d-left/bodyLeftHooks.ts';
     import { YinChuanOption } from '/@/assets/mapUtils/mapConstant.ts';
     import { useUserStore } from '/@/store/modules/user.ts';
+    import { Map } from '/@/assets/mapUtils/map.ts';
 
     const title = ref('银川片应急就医服务中心');
     const phone = '(0951-6805199)';
@@ -183,7 +193,18 @@
         if (nVal) {
             nextTick(() => {
                 setEmergencyData(nVal);
-                emergencyDialogRef.value.openDialog;
+                emergencyDialogRef.value.openDialog();
+            });
+        }
+    });
+    //银川云坐席
+    const { socketData: yunZuoXiData, setSocketData: setYunZuoXiData, closeSocket: closeSocket3 } = useSocket(yinChuanPath);
+    const yunZuoXiDialogRef = ref();
+    watch(yunZuoXiData, (nVal) => {
+        if (nVal) {
+            nextTick(() => {
+                setYunZuoXiData(nVal);
+                yunZuoXiDialogRef.value.openDialog();
             });
         }
     });
@@ -192,6 +213,7 @@
         window.onbeforeunload = function () {
             closeSocket();
             closeSocket2();
+            closeSocket3(); //银川云坐席
         };
 
         clearInterval(interval.value);
@@ -225,6 +247,88 @@
         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;
+    }
+
     // function test() {
     //     let nVal = {
     //         watchNo: 'CRFTQ22C03000080',

vite.config.ts

@@ -20,7 +20,7 @@ const px2remOptions = {
     // ignoreIdentifier: false, //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
     // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
     mediaQuery: false, //（布尔值）允许在媒体查询中转换px
-    minPixelValue: 0, //设置要替换的最小像素值(3px会被转rem)。 默认 0
+    minPixelValue: 2, //设置要替换的最小像素值(3px会被转rem)。 默认 0
 };
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -60,4 +60,29 @@ export default defineConfig({
         // @iconify/iconify: The dependency is dynamically and virtually loaded by @purge-icons/generated, so it needs to be specified explicitly
         include: ['lodash-es', 'ant-design-vue/es/locale/zh_CN', 'ant-design-vue/es/locale/en_US'],
     },
+    // build: {
+    //     rollupOptions: {
+    //         output: {
+    //             //入口文件输出配置
+    //             entryFileNames: `assets/js/[name]-[hash].js`,
+    //             //代码分割后的文件输出配置
+    //             chunkFileNames: `assets/js/[name]-[hash].js`,
+    //             //静态资源输出配置
+    //             assetFileNames(assetInfo) {
+    //                 //css文件单独输出到css文件夹
+    //                 if (assetInfo.name.endsWith('.css')) {
+    //                     return `assets/css/[name]-[hash].css`;
+    //                 }
+    //                 //图片文件单独输出到img文件夹
+    //                 else if (['.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp'].some((ext) => assetInfo.name.endsWith(ext))) {
+    //                     return `assets/img/[name]-[hash].[ext]`;
+    //                 }
+    //                 //其他资源输出到assets文件夹
+    //                 else {
+    //                     return `assets/[name]-[hash].[ext]`;
+    //                 }
+    //             },
+    //         },
+    //     },
+    // },
 });