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
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',