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

update

Browse Source 
1.应急事件显示信息过长，精简一下。
2.救护车图标配色调整
3.医院图标增大一点，显示图标及应急求助时的推荐图标
4.急救弹窗添加呼吸效果
5.急救路线搜索框，控制只搜索新疆境内
6.咨询大屏也要监听事件并弹出弹窗
This commit is contained in:
weixin
2025-10-31 17:51:22 +08:00
parent f44e372210
commit f617922cd3
18 changed files with 480 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/healthConsultation/HealthConsultationIndex.vue
+177 -3
View File
@@ -1,5 +1,5 @@
<template>
<div class="sun-screen-box">
<div class="sun-screen-box" ref="pageRef">
<div class="sun-screen-title">
<div class="sun-title-left">
{{ dateInfo?.day }} {{ dateInfo?.times }}<span style="margin-left: 30px">{{ rightDate }}</span>
@@ -26,6 +26,10 @@
</div>
</div>
</div>
<!-- 健康监测弹窗 -->
<EmployeeDialog ref="employeeDialogRef" :record="socketData" @confirm-help="confirmHelp" :get-container="() => pageRef" />
<!-- 应急、120弹窗 -->
<EmergencyDialog ref="emergencyDialogRef" :record="socketData1" @confirm-help="confirmHelp" :get-container="() => pageRef" />
</template>
<script setup lang="ts">
@@ -37,9 +41,16 @@
import healthContentBottomItem4 from './components/healthContentBottomItem4.vue';
import phonePng from '/@/assets/img/phone.png';
import { ref, onMounted, watch, onUnmounted } from 'vue';
import { ref, onMounted, watch, onUnmounted, nextTick } from 'vue';
import dayjs from 'dayjs';
import { startTime } from '/@/utils/utils.ts';
import { handleSocketUrl, startTime } from '/@/utils/utils.ts';
import { useUserStore } from '/@/store/modules/user.ts';
import { basicPath, useSocket, emergencyPath } from '/@/utils/socket.ts';
import EmployeeDialog from '/@/views/components/employeeDialog.vue';
import EmergencyDialog from '/@/views/components/emergencyDialog.vue';
import { useRouter } from 'vue-router';
const { getCenterInfo, setCount } = useUserStore();
interface DateInfo {
day?: string;
@@ -49,6 +60,7 @@
const rightDate = ref<string>('');
const initDate = ref(startTime);
const timer = ref<number | null>(null);
const pageRef = ref();
const getTime = () => {
dateInfo.value = {
@@ -92,6 +104,139 @@
clearInterval(timer.value);
}
});
// 健康监测工具报警
let socketUrl = handleSocketUrl(basicPath, getCenterInfo?.id);
const { socketData, setSocketData, closeSocket } = useSocket(socketUrl);
const employeeDialogRef = ref();
watch(socketData, (nVal) => {
if (nVal) {
nextTick(() => {
setCount();
setSocketData(nVal);
employeeDialogRef.value.openDialog();
});
}
});
//应急求助、120弹窗
let socketUrl1 = handleSocketUrl(emergencyPath, getCenterInfo?.id);
const { socketData: socketData1, setSocketData: setSocketData1, closeSocket: closeSocket1 } = useSocket(socketUrl1, false);
const emergencyDialogRef = ref(); //紧急求助
onUnmounted(() => {
// 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function () {
closeSocket();
closeSocket1(); //西安云坐席
};
});
watch(socketData1, (nVal) => {
if (nVal) {
setCount();
setSocketData1(nVal);
emergencyDialogRef.value.openDialog();
}
});
const router = useRouter();
function confirmHelp(data: any) {
// const routeUrl = router.resolve({
// path: '/home1',
// }).href;
sessionStorage.setItem('socketData', JSON.stringify(data));
// window.open(routeUrl, '_blank');
router.push('/home1');
// sessionStorage.removeItem('socketData');
}
function openEmergencyOpen() {
setSocketData1({
userId: '1942871719583739905',
phone: '15129287781',
realName: '连龙刚',
lon: 108.94734,
lat: 34.218951,
sex: 2,
age: 37,
orgCode: 'A01A01A02',
orgName: '硬件部',
departCode: 'A01A01',
departName: '软硬件开发部',
type: '0',
centerId: '1940693902422519809',
popType: 1,
queue: null,
noticeId: null,
careLiaisonName: '周飞飞',
careLiaisonPhone: '18800001111',
lifeguardName: '李林林',
lifeguardPhone: '15511110000',
});
emergencyDialogRef.value.openDialog();
}
function employeeDialogOpen() {
setSocketData({
watchNo: 'A5GTQ24920002519',
eventType: 'a_key_alarm',
eventType_dictText: '一键告警',
bindUserId: '1942871719583739905',
bindDate: '2025-07-23',
createBy: 'apiusername',
createDate: '2025-09-25 15:01:11',
dataValue: '',
address: null,
lon: 0,
lat: 0,
dataDate: '2025-09-25',
warnTime: '2025-09-25 15:00:03',
gpsErrorMsg: '定位超时',
lonGd: null,
latGd: null,
addressGd: null,
sendFlag: '0',
largeScreenFlag: '0',
orgCode: 'A01A01A02',
orgName: '硬件部',
realName: '连龙刚',
phone: '15129287781',
hospitalList: [
{
name: '跃满油田作业区',
lon: 82.9955,
lat: 40.787056,
},
{
name: '跃满油田作业区',
lon: 82.9955,
lat: 40.787056,
},
{
name: '采油一厂稠油小屋',
lon: 84.881775,
lat: 44.987652,
},
],
centerId: '1940693902422519809',
popType: 3,
keyUser: '0',
avatar: null,
sex: 2,
age: 37,
workNo: '2025001',
deptName: '软硬件开发部',
audioUrl: null,
});
employeeDialogRef.value.openDialog();
}
// setTimeout(() => {
// openEmergencyOpen();
// employeeDialogOpen();
// }, 2000);
</script>
<style lang="less" scoped>
@@ -187,4 +332,33 @@
}
}
}
:deep(.emergency-dialog) {
position: relative;
&::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background:
linear-gradient(to top, transparent calc(100% - 15px), #a0440f 100%),
linear-gradient(to bottom, transparent calc(100% - 15px), #a0440f 100%),
linear-gradient(to left, transparent calc(100% - 15px), #a0440f 100%),
linear-gradient(to right, transparent calc(100% - 15px), #a0440f 100%);
animation: borderFlash 2s ease-in-out infinite;
}
@keyframes borderFlash {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
}
</style>