455 lines
16 KiB
Vue
455 lines
16 KiB
Vue
<template>
|
||
<div class="outer" style="position: relative">
|
||
<login-out-button out-url="centralScreenLogin" />
|
||
<div class="container-div">
|
||
<div class="title-d">
|
||
<div class="title-d-left">
|
||
{{ dayTimeO }}
|
||
</div>
|
||
<div class="title-d-middle">
|
||
<span>{{ title }}</span>
|
||
<span class="phone">({{ phone }})</span>
|
||
</div>
|
||
<div class="title-d-right"> 累计运行时间：{{ dayTimeT }}</div>
|
||
</div>
|
||
<div class="body-d">
|
||
<div class="central-screen-body-left">
|
||
<!--服务详情数据-->
|
||
<ServiceDetails
|
||
theme="dark"
|
||
:refreshState="refreshState"
|
||
:setting="setting"
|
||
class="service-details"
|
||
@handleClick="handlePhoneDialog"
|
||
/>
|
||
<!--一线医疗点每日工作动态-->
|
||
<DailyWorkTrends theme="dark" :refreshState="refreshState" class="daily-work-trends" />
|
||
</div>
|
||
<div class="body-d-middle">
|
||
<CenterMap
|
||
:showFooter="false"
|
||
:computedCenter="false"
|
||
:mapOptions="options"
|
||
:showHospitalList="showHospitalList"
|
||
:hospitalList="hospitalList"
|
||
@clearHospitalList="clearHospitalList"
|
||
/>
|
||
</div>
|
||
<div class="body-d-right">
|
||
<!--健康终端报警-->
|
||
<TerminalAlarm :refreshState="refreshState" :setting="setting" @emit-view-detail="handleEmployeeDialog" />
|
||
<!--员工队伍健康状况-->
|
||
<!-- <EmployeeHealth theme="dark" :refreshState="refreshState" :setting="setting" />-->
|
||
<!-- <!–体检数据–>-->
|
||
<!-- <PhysicalExaminationData :key="tabState" :refreshState="refreshState" :setting="setting" />-->
|
||
<EmergencyData @emergencyDataList="emergencyDataList" class="emergency-data" />
|
||
</div>
|
||
</div>
|
||
<div class="bottom-d"></div>
|
||
</div>
|
||
<EmployeeDialog ref="employeeDialogRef" :record="socketData" />
|
||
<EmergencyDialog ref="emergencyDialogRef" :record="emergencyData" @confirmHelp="confirmHelp" />
|
||
<YunZuoXiDialog ref="yunZuoXiDialogRef" :record="socketData" @confirmHelp="confirmHelp" />
|
||
|
||
<!--呼入电话、受理电话-->
|
||
<PhoneDialog ref="phoneDialogRef" :phoneType="phoneType" :setting="setting" :title="phoneDialogTitle" :useForm="true" />
|
||
<!--健康终端查看详情-->
|
||
<TerminalAlarmDialog ref="terminalAlarmDialogRef" :setting="setting" />
|
||
</div>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { onMounted, onUnmounted, ref, nextTick, watch } from 'vue';
|
||
import ServiceDetails from '/@/views/centralScreen/components/serviceDetails.vue';
|
||
import CenterMap from '/@/views/centralScreen/components/centerMap.vue';
|
||
import TerminalAlarm from '/@/views/centralScreen/components/terminalAlarm.vue';
|
||
import DailyWorkTrends from '/@/views/centralScreen/components/dailyWorkTrends.vue';
|
||
import EmployeeHealth from '/@/views/centralScreen/components/employeeHealth.vue';
|
||
import PhysicalExaminationData from '/@/views/centralScreen/components/physicalExaminationData.vue';
|
||
import { useRefresh } from '/@/hooks/autoRefresh';
|
||
import { DEFAULT_TIME } from '/@/hooks/autoRefresh/pageRefreshTime.ts';
|
||
import { openTestModal, useTopTime } from '/@/utils/utils.ts';
|
||
import { DataType, getSettings, ThemeType } from '/@/utils/settings.ts';
|
||
import { useUserStore } from '/@/store/modules/user.ts';
|
||
import PhoneDialog from '/@/views/centralScreen/components/phoneDialog.vue';
|
||
import { ServerDetailType } from '/@/components/body-d-left/bodyLeftHooks.ts';
|
||
import TerminalAlarmDialog from '/@/views/centralScreen/components/terminalAlarmDialog.vue';
|
||
import { Map } from '/@/assets/mapUtils/map.ts';
|
||
import YunZuoXiDialog from '/@/views/components/yunZuoXiDialog.vue';
|
||
import EmployeeDialog from '/@/views/components/employeeDialog.vue';
|
||
import EmergencyDialog from '/@/views/components/emergencyDialog.vue';
|
||
import { basicPath, emergencyPath, useSocket, yinChuanPath } from '/@/utils/socket.ts';
|
||
import { handleSocketUrl } from '/@/views/centralScreen/components/centerMapHooks.ts';
|
||
import LoginOutButton from '/@/views/components/loginOutButton.vue';
|
||
import EmergencyData from '/@/views/centralScreen/components/emergencyData/emergencyData.vue';
|
||
|
||
const userStore = useUserStore();
|
||
let { simpleName, centerTel, screenTitle } = userStore.getCenterInfo || { simpleName: '', centerTel: '', screenTitle: '' };
|
||
const { refreshState } = useRefresh(DEFAULT_TIME);
|
||
|
||
const props = defineProps({
|
||
result: {
|
||
type: Object,
|
||
default: () => {},
|
||
},
|
||
});
|
||
|
||
const dayTimeO = ref();
|
||
const dayTimeT = ref();
|
||
const interval = ref<any>(null);
|
||
const title = ref(screenTitle ? screenTitle : '应急就医服务中心' + (simpleName || ''));
|
||
const phone = ref(centerTel || '0951-6805199');
|
||
|
||
const options = ref({
|
||
center: [106.32, 38.45], //地图中心点
|
||
zoom: 8, //地图显示的缩放级别
|
||
mapStyle: 'darkblue', //地图样式
|
||
});
|
||
|
||
function init() {
|
||
getTime();
|
||
interval.value = setInterval(() => {
|
||
getTime();
|
||
}, 1000);
|
||
}
|
||
|
||
const { getCenterInfo } = useUserStore();
|
||
function getTime() {
|
||
const { timeLeft, timeRight } = useTopTime(getCenterInfo?.commissioningTime);
|
||
dayTimeO.value = timeLeft;
|
||
dayTimeT.value = timeRight;
|
||
}
|
||
|
||
const setting = getSettings(DataType.yinChuan);
|
||
onMounted(async () => {
|
||
try {
|
||
options.value = {
|
||
center: [getCenterInfo?.longitude || 106.32, getCenterInfo?.latitude || 38.45], //地图中心点
|
||
zoom: 8, //地图显示的缩放级别
|
||
mapStyle: 'darkblue', //地图样式
|
||
};
|
||
} catch (e) {
|
||
console.log(e);
|
||
}
|
||
|
||
console.log([getCenterInfo?.longitude || 106.32, getCenterInfo?.latitude || 38.45]);
|
||
init();
|
||
document.title = title.value;
|
||
openTestModal();
|
||
document.addEventListener('visibilitychange', checkTabState);
|
||
//设置主题
|
||
store.setThemeType(ThemeType.dark);
|
||
});
|
||
const store = useUserStore();
|
||
|
||
onUnmounted(() => {
|
||
clearInterval(interval.value);
|
||
document.removeEventListener('visibilitychange', checkTabState);
|
||
|
||
// 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
|
||
window.onbeforeunload = function () {
|
||
closeSocket();
|
||
closeSocket2();
|
||
// closeSocket3(); //银川云坐席
|
||
};
|
||
|
||
clearInterval(interval.value);
|
||
});
|
||
const tabState = ref('');
|
||
|
||
//判断窗口是否处于激活状态，切换浏览器tab会导致部分echarts显示不正常
|
||
function checkTabState() {
|
||
tabState.value = document.hidden ? 'inactive' : 'active';
|
||
}
|
||
|
||
const phoneDialogTitle = ref('呼入电话');
|
||
const phoneDialogRef = ref();
|
||
//0:处置 1:处理 2:呼入 3:全部
|
||
const phoneType = ref('');
|
||
|
||
//呼入电话、受理电话弹窗
|
||
function handlePhoneDialog(item) {
|
||
const { name, key } = item;
|
||
//呼入电话
|
||
//受理电话
|
||
if (key == 'alerdyreceive' || key == 'gross') {
|
||
phoneType.value = ServerDetailType[key];
|
||
phoneDialogTitle.value = name;
|
||
nextTick(() => {
|
||
phoneDialogRef.value.openDialog();
|
||
});
|
||
}
|
||
}
|
||
|
||
const terminalAlarmDialogRef = ref();
|
||
|
||
//终端预警列表弹窗
|
||
function handleEmployeeDialog() {
|
||
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;
|
||
}
|
||
|
||
// //websocket消息
|
||
// // 健康监测工具报警
|
||
//
|
||
// let basicUrl = handleSocketUrl(basicPath + `${DataType.yinChuan}`, userStore.getCenterInfo.id);
|
||
// const { socketData, setSocketData, closeSocket } = useSocket(basicUrl, false);
|
||
// const employeeDialogRef = ref();
|
||
// watch(socketData, (nVal) => {
|
||
// if (nVal) {
|
||
// nextTick(() => {
|
||
// setSocketData(nVal);
|
||
// employeeDialogRef.value.openDialog();
|
||
// });
|
||
// }
|
||
// });
|
||
//应急求助
|
||
let emergencyUrl = handleSocketUrl(emergencyPath, userStore.getCenterInfo.id);
|
||
const { socketData: emergencyData, setSocketData: setEmergencyData, closeSocket: closeSocket2 } = useSocket(emergencyUrl, false);
|
||
const emergencyDialogRef = ref();
|
||
|
||
watch(emergencyData, (nVal) => {
|
||
if (nVal) {
|
||
userStore.setCount();
|
||
nextTick(() => {
|
||
setEmergencyData(nVal);
|
||
emergencyDialogRef.value.openDialog();
|
||
});
|
||
}
|
||
});
|
||
//银川云坐席
|
||
let socketUrl = handleSocketUrl(basicPath, userStore.getCenterInfo?.id);
|
||
const { socketData, setSocketData, closeSocket } = useSocket(socketUrl, false);
|
||
const yunZuoXiDialogRef = ref(); //云坐席
|
||
// const emergencyDialogRef = ref(); //紧急求助
|
||
const employeeDialogRef = ref(); //终端报警||健康监测
|
||
//title = "1:紧急求助 2:云坐席 3:终端报警")
|
||
watch(socketData, (nVal) => {
|
||
if (nVal) {
|
||
let { popType } = nVal;
|
||
if (popType == 1) {
|
||
userStore.setCount();
|
||
nextTick(() => {
|
||
setSocketData(nVal);
|
||
emergencyDialogRef.value.openDialog();
|
||
});
|
||
}
|
||
if (popType == 2) {
|
||
userStore.setCount();
|
||
nextTick(() => {
|
||
setSocketData(nVal);
|
||
yunZuoXiDialogRef.value.openDialog();
|
||
});
|
||
}
|
||
if (popType == 3) {
|
||
userStore.setCount();
|
||
nextTick(() => {
|
||
setSocketData(nVal);
|
||
employeeDialogRef.value.openDialog();
|
||
});
|
||
}
|
||
}
|
||
});
|
||
|
||
const emergencyDataDialog = ref();
|
||
function emergencyDataList() {
|
||
emergencyDataDialog.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%;
|
||
}
|
||
|
||
.container-div {
|
||
height: 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;
|
||
}
|
||
|
||
.title-d-middle {
|
||
.phone {
|
||
font-size: 27px;
|
||
margin-left: 4px;
|
||
}
|
||
}
|
||
|
||
> :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: 24%;
|
||
}
|
||
|
||
> :nth-child(2) {
|
||
width: 52%;
|
||
}
|
||
|
||
> :nth-child(3) {
|
||
width: 24%;
|
||
}
|
||
|
||
.central-screen-body-left {
|
||
//.service-details {
|
||
// height: calc(100% / 3);
|
||
//}
|
||
//
|
||
//.daily-work-trends {
|
||
// height: calc(100% / 3);
|
||
//}
|
||
//
|
||
//.emergency-data {
|
||
// height: calc(100% / 3);
|
||
//}
|
||
> :nth-child(1) {
|
||
width: 100%;
|
||
height: calc(100% / 3);
|
||
padding: 10px;
|
||
}
|
||
> :nth-child(2) {
|
||
width: 100%;
|
||
height: calc(100% / 3 * 2);
|
||
padding: 10px;
|
||
}
|
||
}
|
||
|
||
.body-d-right {
|
||
> :nth-child(n) {
|
||
width: 100%;
|
||
height: calc(100% / 2);
|
||
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%;
|
||
}
|
||
|
||
:deep(.inner .scroll) {
|
||
height: 100% !important;
|
||
}
|
||
</style>
|