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

update

Browse Source 
1.修改标准化大屏跳转逻辑，根据获取分中心信息，进行跳转至对应页面
This commit is contained in:
weixin
2024-11-14 13:04:05 +08:00
parent 1cfc2e5d89
commit f81fb4a868
8 changed files with 1360 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/centralScreen/centralScreenYinChuan.vue
+435
View File
@@ -0,0 +1,435 @@
<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" />
<EmergencyData @emergencyDataList="emergencyDataList" class="emergency-data" />
</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" />
</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 { 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 } = userStore.getCenterInfo || { simpleName: '', centerTel: '' };
const { refreshState } = useRefresh(DEFAULT_TIME);
const props = defineProps({
result: {
type: Object,
default: () => {},
},
});
const dayTimeO = ref();
const dayTimeT = ref();
const interval = ref(1);
const title = ref('应急就医服务中心' + (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;
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) {
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) {
nextTick(() => {
setSocketData(nVal);
emergencyDialogRef.value.openDialog();
});
}
if (popType == 2) {
nextTick(() => {
setSocketData(nVal);
yunZuoXiDialogRef.value.openDialog();
});
}
if (popType == 3) {
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);
}
}
.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>