254 lines
8.2 KiB
Vue
254 lines
8.2 KiB
Vue
<template>
|
||
<div class="outer">
|
||
<div class="title-d">
|
||
<div class="title-d-left">
|
||
{{ dayTimeO }}
|
||
</div>
|
||
<div class="title-d-middle"> 应急就医服务中心</div>
|
||
<div class="title-d-right"> 累计运行时间：{{ dayTimeT }}</div>
|
||
</div>
|
||
<div class="body-d">
|
||
<div class="body-d-left">
|
||
<one-l :setting="setting" :refreshState="refreshState" @handleClick="handlePhoneDialog" />
|
||
<two-l :key="tabState" :refreshState="refreshState" />
|
||
<three-l :key="tabState" :setting="setting" :refreshState="refreshState" />
|
||
</div>
|
||
<div class="body-d-middle">
|
||
<china-map />
|
||
</div>
|
||
<div class="body-d-right">
|
||
<one-r :setting="setting" :refreshState="refreshState" />
|
||
<two-r :key="tabState" :setting="setting" :refreshState="refreshState" />
|
||
<three-r :key="refreshState" />
|
||
</div>
|
||
</div>
|
||
<div class="bottom-d"></div>
|
||
<EmployeeDialog ref="employeeDialogRef" :record="socketData" />
|
||
<EmergencyDialog ref="emergencyDialogRef" :record="emergencyData" />
|
||
<PhoneDialog ref="phoneDialogRef" :title="phoneDialogTitle" :useForm="true" :setting="setting" :phoneType="phoneType" />
|
||
</div>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { onUnmounted, ref, watch, nextTick, onMounted } from 'vue';
|
||
import OneL from '/@/components/body-d-left/oneL.vue';
|
||
import TwoL from '/@/components/body-d-left/twoL.vue';
|
||
import ThreeL from '/@/components/body-d-left/threeL.vue';
|
||
import OneR from '/@/components/body-d-right/oneR.vue';
|
||
import TwoR from '/@/components/body-d-right/twoR.vue';
|
||
import ThreeR from '/@/components/body-d-right/threeR.vue';
|
||
import ChinaMap from '/@/components/chinaMap/chinaMap.vue';
|
||
import EmployeeDialog from '/@/views/components/employeeDialog.vue';
|
||
import EmergencyDialog from '/@/views/components/emergencyDialog.vue';
|
||
import { useTopTime } from '/@/utils/utils.ts';
|
||
import { basicPath, emergencyPath, useSocket } from '/@/utils/socket.ts';
|
||
import { useRefresh } from '/@/hooks/autoRefresh';
|
||
import { DEFAULT_TIME } from '/@/hooks/autoRefresh/pageRefreshTime.ts';
|
||
import { DataType, getSettings } from '/@/utils/settings.ts';
|
||
import { ServerDetailType } from '/@/components/body-d-left/bodyLeftHooks.ts';
|
||
import PhoneDialog from '/@/views/components/phoneDialog/phoneDialog.vue';
|
||
|
||
const { refreshState } = useRefresh(DEFAULT_TIME);
|
||
const dayTimeO = ref();
|
||
const dayTimeT = ref();
|
||
const interval = ref(1);
|
||
const setting = getSettings(DataType.xian);
|
||
|
||
function init() {
|
||
getTime();
|
||
interval.value = setInterval(() => {
|
||
getTime();
|
||
}, 1000);
|
||
}
|
||
|
||
function getTime() {
|
||
const { timeLeft, timeRight } = useTopTime();
|
||
dayTimeO.value = timeLeft;
|
||
dayTimeT.value = timeRight;
|
||
}
|
||
|
||
onMounted(() => {
|
||
init();
|
||
document.addEventListener('visibilitychange', checkTabState);
|
||
});
|
||
onUnmounted(() => {
|
||
clearInterval(interval.value);
|
||
document.removeEventListener('visibilitychange', checkTabState);
|
||
});
|
||
|
||
const tabState = ref('');
|
||
|
||
//判断窗口是否处于激活状态，切换浏览器tab会导致部门echarts显示不正常
|
||
function checkTabState() {
|
||
tabState.value = document.hidden ? 'inactive' : 'active';
|
||
}
|
||
|
||
// 健康监测工具报警
|
||
const { socketData, setSocketData, closeSocket } = useSocket(basicPath);
|
||
const employeeDialogRef = ref();
|
||
watch(socketData, (nVal) => {
|
||
if (nVal) {
|
||
nextTick(() => {
|
||
setSocketData(nVal);
|
||
employeeDialogRef.value.openDialog();
|
||
});
|
||
}
|
||
});
|
||
|
||
//应急求助
|
||
const { socketData: emergencyData, setSocketData: setEmergencyData, closeSocket: closeSocket2 } = useSocket(emergencyPath);
|
||
const emergencyDialogRef = ref();
|
||
|
||
watch(emergencyData, (nVal) => {
|
||
if (nVal) {
|
||
nextTick(() => {
|
||
setEmergencyData(nVal);
|
||
emergencyDialogRef.value.openDialog;
|
||
});
|
||
}
|
||
});
|
||
onUnmounted(() => {
|
||
// 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
|
||
window.onbeforeunload = function () {
|
||
closeSocket();
|
||
closeSocket2();
|
||
};
|
||
|
||
clearInterval(interval.value);
|
||
});
|
||
const phoneDialogTitle = ref('呼入电话');
|
||
const phoneDialogRef = ref();
|
||
//0:处置 1:处理 2:呼入 3:全部
|
||
const phoneType = ref('');
|
||
|
||
//呼入电话、受理电话弹窗
|
||
function handlePhoneDialog(item) {
|
||
const { name, key } = item;
|
||
nextTick(() => {
|
||
//呼入电话
|
||
if (key == 'gross') {
|
||
phoneType.value = ServerDetailType['gross'];
|
||
}
|
||
//受理电话
|
||
if (key == 'alerdyreceive') {
|
||
phoneType.value = ServerDetailType['alerdyreceive'];
|
||
}
|
||
phoneDialogTitle.value = name;
|
||
phoneDialogRef.value.openDialog();
|
||
});
|
||
}
|
||
|
||
// function test() {
|
||
// let nVal = {
|
||
// watchNo: 'CRFTQ22C03000080',
|
||
// eventType: 'heart_rate',
|
||
// bindUserId: 'fd358031299d4816b5d304fd818ecc73',
|
||
// createBy: null,
|
||
// createDate: null,
|
||
// dataValue: '999',
|
||
// address:
|
||
// '一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字',
|
||
// lon: 108.6666,
|
||
// lat: 29.8888,
|
||
// dataDate: '2023-12-07',
|
||
// warnTime: '2023-12-07',
|
||
// gpsErrorMsg: '',
|
||
// lonGd: 108.67084314886117,
|
||
// latGd: 29.88607705672868,
|
||
// addressGd: null,
|
||
// sendFlag: '0',
|
||
// largeScreenFlag: '0',
|
||
// orgCode: null,
|
||
// orgName: '冯地坑采油作业区',
|
||
// realName: '王志文',
|
||
// phone: '15229020494',
|
||
// };
|
||
// nextTick(() => {
|
||
// setEmergencyData(nVal);
|
||
// emergencyDialogRef.value.openDialog();
|
||
// });
|
||
// }
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.outer {
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
background: url('/@/assets/images/bg.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.title-d {
|
||
height: 80px;
|
||
line-height: 80px;
|
||
display: flex;
|
||
padding-bottom: 9px;
|
||
background: url('/@/assets/images/top-title.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
|
||
.title-d-left,
|
||
.title-d-middle,
|
||
.title-d-right {
|
||
font-size: 27px;
|
||
color: #ffffff;
|
||
line-height: 60px;
|
||
text-align: center;
|
||
}
|
||
|
||
> :nth-child(1) {
|
||
width: 29%;
|
||
}
|
||
|
||
> :nth-child(2) {
|
||
width: 42%;
|
||
font-size: 40px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
> :nth-child(3) {
|
||
width: 29%;
|
||
}
|
||
}
|
||
|
||
.body-d {
|
||
display: flex;
|
||
height: calc(100% - 120px);
|
||
padding-top: 10px;
|
||
|
||
> :nth-child(1) {
|
||
width: 25%;
|
||
}
|
||
|
||
> :nth-child(2) {
|
||
width: 50%;
|
||
}
|
||
|
||
> :nth-child(3) {
|
||
width: 25%;
|
||
}
|
||
|
||
.body-d-left,
|
||
.body-d-right {
|
||
text-align: center;
|
||
}
|
||
|
||
.body-d-left,
|
||
.body-d-right {
|
||
> :nth-child(n) {
|
||
width: 100%;
|
||
height: calc(100% / 3);
|
||
padding: 10px;
|
||
}
|
||
}
|
||
|
||
.body-d-middle {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
}
|
||
|
||
.bottom-d {
|
||
height: 40px;
|
||
background: url('../assets/images/bottom-b.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
</style>
|