458 lines
15 KiB
Vue
458 lines
15 KiB
Vue
<template>
|
||
<div class="outer">
|
||
<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="yichuan-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">
|
||
<china-map
|
||
:showFooter="false"
|
||
:computedCenter="false"
|
||
:mapOptions="YinChuanOption"
|
||
: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" />
|
||
</div>
|
||
</div>
|
||
<div class="bottom-d"></div>
|
||
<EmployeeDialog ref="employeeDialogRef" :record="socketData" />
|
||
<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>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import { onUnmounted, ref, watch, nextTick, onMounted } from 'vue';
|
||
import ServiceDetails from '/@/components/body-d-left/oneL.vue';
|
||
import DailyWorkTrends from '/@/views/yinChuan/componetns/dailyWorkTrends/dailyWorkTrends.vue';
|
||
import PhysicalExaminationData from '/@/components/body-d-left/threeL.vue';
|
||
import TerminalAlarm from '/@/components/body-d-right/oneR.vue';
|
||
import EmployeeHealth from '/@/views/yinChuan/componetns/employeeHealth/employeeHealth.vue';
|
||
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, yinChuanPath } 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';
|
||
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)';
|
||
const setting = getSettings(DataType.yinChuan);
|
||
onMounted(() => {
|
||
init();
|
||
document.title = title.value;
|
||
document.addEventListener('visibilitychange', checkTabState);
|
||
//设置主题
|
||
store.setThemeType(ThemeType.dark);
|
||
});
|
||
const store = useUserStore();
|
||
|
||
onUnmounted(() => {
|
||
clearInterval(interval.value);
|
||
document.removeEventListener('visibilitychange', checkTabState);
|
||
});
|
||
const tabState = ref('');
|
||
|
||
//判断窗口是否处于激活状态，切换浏览器tab会导致部分echarts显示不正常
|
||
function checkTabState() {
|
||
tabState.value = document.hidden ? 'inactive' : 'active';
|
||
}
|
||
|
||
const { refreshState } = useRefresh(DEFAULT_TIME);
|
||
const dayTimeO = ref();
|
||
const dayTimeT = ref();
|
||
const interval = ref(1);
|
||
|
||
function init() {
|
||
getTime();
|
||
interval.value = setInterval(() => {
|
||
getTime();
|
||
}, 1000);
|
||
}
|
||
|
||
function getTime() {
|
||
const { timeLeft, timeRight } = useTopTime();
|
||
dayTimeO.value = timeLeft;
|
||
dayTimeT.value = timeRight;
|
||
}
|
||
|
||
// 健康监测工具报警
|
||
const { socketData, setSocketData, closeSocket } = useSocket(basicPath + `${DataType.yinChuan}`);
|
||
const employeeDialogRef = ref();
|
||
watch(socketData, (nVal) => {
|
||
if (nVal) {
|
||
nextTick(() => {
|
||
setSocketData(nVal);
|
||
employeeDialogRef.value.openDialog();
|
||
});
|
||
}
|
||
});
|
||
|
||
//模拟开启
|
||
function employeeDialogOpen() {
|
||
setEmergencyData({
|
||
userId: '001a9878fdaf401c844a03e2fc7c370b',
|
||
realName: '曹燕',
|
||
lon: 108.872442,
|
||
lat: 34.189956,
|
||
sex: 2,
|
||
age: 40,
|
||
orgCode: 'A01A33A05',
|
||
orgName: '地质研究所',
|
||
hospitalList: [
|
||
{
|
||
id: null,
|
||
name: '交大一附院',
|
||
lat: 34.22,
|
||
lon: 108.94,
|
||
type: null,
|
||
ambulance: null,
|
||
docNum: null,
|
||
nurseNum: null,
|
||
expertNum: null,
|
||
distance: null,
|
||
},
|
||
{
|
||
id: null,
|
||
name: '高新医院',
|
||
lat: 34.23,
|
||
lon: 108.88,
|
||
type: null,
|
||
ambulance: null,
|
||
docNum: null,
|
||
nurseNum: null,
|
||
expertNum: null,
|
||
distance: null,
|
||
},
|
||
{
|
||
id: null,
|
||
name: '人民医院',
|
||
lat: 34.24,
|
||
lon: 108.93,
|
||
type: null,
|
||
ambulance: null,
|
||
docNum: null,
|
||
nurseNum: null,
|
||
expertNum: null,
|
||
distance: null,
|
||
},
|
||
],
|
||
});
|
||
emergencyDialogRef.value.openDialog();
|
||
}
|
||
|
||
//应急求助
|
||
const {
|
||
socketData: emergencyData,
|
||
setSocketData: setEmergencyData,
|
||
closeSocket: closeSocket2,
|
||
} = useSocket(emergencyPath + `${DataType.yinChuan}`);
|
||
const emergencyDialogRef = ref();
|
||
|
||
watch(emergencyData, (nVal) => {
|
||
if (nVal) {
|
||
nextTick(() => {
|
||
setEmergencyData(nVal);
|
||
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();
|
||
});
|
||
}
|
||
});
|
||
onUnmounted(() => {
|
||
// 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
|
||
window.onbeforeunload = function () {
|
||
closeSocket();
|
||
closeSocket2();
|
||
closeSocket3(); //银川云坐席
|
||
};
|
||
|
||
clearInterval(interval.value);
|
||
});
|
||
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;
|
||
}
|
||
|
||
// 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;
|
||
}
|
||
|
||
.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%;
|
||
}
|
||
|
||
//.yichuan-body-left,
|
||
//.body-d-right {
|
||
// text-align: center;
|
||
//}
|
||
|
||
.yichuan-body-left {
|
||
.service-details {
|
||
height: 33%;
|
||
}
|
||
|
||
.daily-work-trends {
|
||
height: 67%;
|
||
}
|
||
}
|
||
|
||
.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>
|