update 添加银川大屏
This commit is contained in:
zk
@@ -0,0 +1,274 @@
|
||||
<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="yichuan-body-left">
|
||||
<!--服务详情数据-->
|
||||
<ServiceDetails :setting="setting" class="service-details" :refreshState="refreshState" @handleClick="handlePhoneDialog" />
|
||||
<!--一线医疗点每日工作动态-->
|
||||
<DailyWorkTrends class="daily-work-trends" :refreshState="refreshState" />
|
||||
</div>
|
||||
<div class="body-d-middle">
|
||||
<china-map />
|
||||
</div>
|
||||
<div class="body-d-right">
|
||||
<!--健康终端报警-->
|
||||
<TerminalAlarm :setting="setting" :refreshState="refreshState" @emit-view-detail="handleEmployeeDialog" />
|
||||
<!--员工队伍健康状况-->
|
||||
<EmployeeHealth :refreshState="refreshState" />
|
||||
<!--体检数据-->
|
||||
<PhysicalExaminationData :setting="setting" :refreshState="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" />
|
||||
<TerminalAlarmDialog ref="terminalAlarmDialogRef" :setting="setting" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
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 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 } from '/@/utils/socket.ts';
|
||||
import { useRefresh } from '/@/hooks/autoRefresh';
|
||||
import { DEFAULT_TIME } from '/@/hooks/autoRefresh/pageRefreshTime.ts';
|
||||
// import { useUserStore } from '/@/store/modules/user.ts';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { DataType, getSettings } from '/@/utils/settings.ts';
|
||||
|
||||
const route = useRoute();
|
||||
const setting = getSettings(DataType.yinChuan);
|
||||
onMounted(() => {
|
||||
// const userStore = useUserStore();
|
||||
// let data = JSON.parse(route.query.data as string);
|
||||
// if (data.token) {
|
||||
// localStorage.setItem('token', data.token);
|
||||
// userStore.setToken(data.token);
|
||||
// userStore.setUserInfo(data.userInfo);
|
||||
// console.log(useUserStore);
|
||||
// }
|
||||
});
|
||||
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;
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
clearInterval(interval.value);
|
||||
});
|
||||
init();
|
||||
// 健康监测工具报警
|
||||
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;
|
||||
//呼入电话
|
||||
if (key == 'gross') {
|
||||
phoneType.value = '2';
|
||||
}
|
||||
//受理电话
|
||||
if (key == 'alerdyreceive') {
|
||||
phoneType.value = '1';
|
||||
}
|
||||
nextTick(() => {
|
||||
phoneDialogTitle.value = name;
|
||||
phoneDialogRef.value.openDialog();
|
||||
});
|
||||
}
|
||||
|
||||
const terminalAlarmDialogRef = ref();
|
||||
|
||||
//终端预警列表弹窗
|
||||
function handleEmployeeDialog() {
|
||||
terminalAlarmDialogRef.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: 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>
|
||||
Reference in New Issue
Block a user