391 lines
12 KiB
Vue
391 lines
12 KiB
Vue
<template>
|
||
<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>
|
||
</div>
|
||
<div class="sun-title-center">健康咨询平台</div>
|
||
<div class="sun-title-right">
|
||
<div style="display: flex; align-items: center; justify-content: flex-end">
|
||
<img :src="phonePng" alt="" /> 7*24小时心理咨询热线：<div class="phone-d">
|
||
400-663-2005<span style="margin: 0 1px">或</span>400-650-6605
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="sun-body-content">
|
||
<div class="sun-body-content-top">
|
||
<health-content-top :b-key="bKey" />
|
||
</div>
|
||
<div class="sun-body-content-middle">
|
||
<health-content-middle :b-key="bKey" />
|
||
</div>
|
||
<div class="sun-body-content-bottom">
|
||
<health-content-bottom-item1 :b-key="bKey" class="item" />
|
||
<health-content-bottom-item2 :b-key="bKey" class="item" />
|
||
<health-content-bottom-item3 :b-key="bKey" class="item" />
|
||
<health-content-bottom-item4 :b-key="bKey" class="item" />
|
||
</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">
|
||
import healthContentTop from './components/healthContentTop.vue';
|
||
import healthContentMiddle from './components/healthContentMiddle.vue';
|
||
import healthContentBottomItem1 from './components/healthContentBottomItem1.vue';
|
||
import healthContentBottomItem2 from './components/healthContentBottomItem2.vue';
|
||
import healthContentBottomItem3 from './components/healthContentBottomItem3.vue';
|
||
import healthContentBottomItem4 from './components/healthContentBottomItem4.vue';
|
||
import phonePng from '/@/assets/img/phone.png';
|
||
|
||
import { ref, onMounted, watch, onUnmounted, nextTick } from 'vue';
|
||
import dayjs from 'dayjs';
|
||
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;
|
||
times?: string;
|
||
}
|
||
const dateInfo = ref<DateInfo>({});
|
||
const rightDate = ref<string>('');
|
||
const initDate = ref(startTime);
|
||
const timer = ref<number | null>(null);
|
||
const interval = ref();
|
||
const bKey = ref(0);
|
||
const pageRef = ref();
|
||
|
||
const getTime = () => {
|
||
dateInfo.value = {
|
||
day: dayjs().format('YYYY年MM月DD日'),
|
||
times: dayjs().format('HH:mm:ss'),
|
||
};
|
||
};
|
||
|
||
// 启动定时器，每秒更新时间
|
||
const startTimer = () => {
|
||
if (timer.value) {
|
||
clearInterval(timer.value);
|
||
}
|
||
timer.value = window.setInterval(() => {
|
||
getTime();
|
||
updateRightDate();
|
||
}, 1000);
|
||
};
|
||
// 定时器，定时刷新接口
|
||
const startInterval = () => {
|
||
if (interval.value) {
|
||
clearInterval(interval.value);
|
||
}
|
||
interval.value = setInterval(
|
||
() => {
|
||
bKey.value++;
|
||
},
|
||
5 * 60 * 1000
|
||
);
|
||
};
|
||
|
||
const updateRightDate = () => {
|
||
rightDate.value = '累计运行时间：' + (dayjs().diff(dayjs(initDate.value), 'days') + 1) + ' 天';
|
||
};
|
||
|
||
onMounted(() => {
|
||
getTime();
|
||
updateRightDate();
|
||
startTimer(); // 启动定时器
|
||
startInterval(); // 启动定时器
|
||
document.title = '健康咨询平台';
|
||
});
|
||
|
||
watch(
|
||
() => dateInfo.value.day,
|
||
() => {
|
||
updateRightDate();
|
||
}
|
||
);
|
||
|
||
// 组件卸载时清理定时器
|
||
onUnmounted(() => {
|
||
if (timer.value) {
|
||
clearInterval(timer.value);
|
||
}
|
||
if (interval.value) {
|
||
clearInterval(interval.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>
|
||
.sun-screen-box {
|
||
height: 100vh;
|
||
letter-spacing: 2px;
|
||
background: url('/@/assets/indexSun/bigBg.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
|
||
.sun-screen-title {
|
||
height: 80px;
|
||
background: url('/@/assets/indexSun/bg.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
font-size: 20px;
|
||
color: #fff;
|
||
text-align: center;
|
||
|
||
.sun-title-left {
|
||
font-family: MicrosoftYaHei-Bold;
|
||
// font-size: 22px;
|
||
font-weight: bold;
|
||
text-align: left;
|
||
flex: 1;
|
||
line-height: 60px;
|
||
padding-left: 15px;
|
||
}
|
||
|
||
.sun-title-right {
|
||
flex: 1;
|
||
font-weight: bold;
|
||
text-align: right;
|
||
line-height: 60px;
|
||
padding-right: 15px;
|
||
|
||
> div {
|
||
> div {
|
||
color: #45ffa1;
|
||
font-family: MicrosoftYaHei-Bold;
|
||
}
|
||
}
|
||
|
||
img {
|
||
width: 28px;
|
||
height: 28px;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
|
||
.sun-title-center {
|
||
flex: 1;
|
||
font-size: 50px;
|
||
letter-spacing: 10px;
|
||
// text-shadow: 2px 2px 5px rgba(118, 141, 219, 0.53);
|
||
font-weight: bold;
|
||
text-align: center;
|
||
font-family: PangMenZhengDao;
|
||
}
|
||
}
|
||
|
||
.sun-body-content {
|
||
height: calc(100% - 87px);
|
||
padding: 10px 20px;
|
||
box-sizing: border-box;
|
||
.sun-body-content-top {
|
||
height: 10%;
|
||
}
|
||
.sun-body-content-middle {
|
||
height: 55%;
|
||
// padding: 0 20px 20px 20px;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
// position: absolute;
|
||
// left: 0;
|
||
// top: 200px;
|
||
}
|
||
.sun-body-content-bottom {
|
||
height: 35%;
|
||
// padding: 0 20px 20px 20px;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
// height: 300px;
|
||
// position: absolute;
|
||
// left: 0;
|
||
// bottom: 0;
|
||
display: flex;
|
||
display: flex;
|
||
justify-content: space-between; /* 左右元素靠边，中间等间距 */
|
||
gap: 16px;
|
||
.item {
|
||
flex: 1; /* 等分占位 */
|
||
}
|
||
}
|
||
}
|
||
}
|
||
: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;
|
||
}
|
||
}
|
||
}
|
||
|
||
.phone-d {
|
||
padding-bottom: 2px;
|
||
font-weight: normal;
|
||
font-size: 18px;
|
||
}
|
||
</style>
|