renkang/xj-screen
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update 云坐席弹窗WebSocket

Browse Source
This commit is contained in:
zk
2024-07-01 14:46:01 +08:00
parent 80745c9d8c
commit 8551369cfb
12 changed files with 286 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env.production
+4
View File
@@ -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
-1
View File
@@ -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
+1 -1
View File
@@ -474,7 +474,7 @@
margin: 5px 19px 5px 8px;
}
.line-sesc {
.line-desc {
flex: 1;
}
}
src/components/chinaMap/components/routePanel.vue
+1 -1
View File
@@ -107,7 +107,7 @@
margin: 5px 19px 5px 8px;
}
.line-sesc {
.line-desc {
flex: 1;
}
}
src/components/secondaryScreen/secondMap/components/userInfoModal/sleep.vue
+1 -1
View File
@@ -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
+2 -2
View File
@@ -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
+4 -2
View File
@@ -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
+12 -6
View File
@@ -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();
//健康监测工具报警
export const basicPath = VITE_GLOB_API_YIN_JI;
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 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
+107
View File
@@ -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
+20 -3
View File
@@ -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
+108 -4
View File
@@ -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
+26 -1
View File
@@ -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]`;
// }
// },
// },
// },
// },
});