update 增加新版大屏
This commit is contained in:
zk
@@ -0,0 +1,219 @@
|
||||
<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="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="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>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted, ref } from 'vue';
|
||||
import { YinChuanOption } from '/@/assets/mapUtils/mapConstant.ts';
|
||||
import ServiceDetails from '/@/views/centralScreen/components/serviceDetails.vue';
|
||||
import CenterMap from '/@/views/centralScreen/components/centerMap.vue';
|
||||
import TerminalAlarm from '/@/components/body-d-right/oneR.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';
|
||||
|
||||
const { refreshState } = useRefresh(DEFAULT_TIME);
|
||||
const dayTimeO = ref();
|
||||
const dayTimeT = ref();
|
||||
const interval = ref(1);
|
||||
const title = ref('新版应急就医服务中心');
|
||||
const phone = ref('0951-6805199');
|
||||
|
||||
function init() {
|
||||
getTime();
|
||||
interval.value = setInterval(() => {
|
||||
getTime();
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function getTime() {
|
||||
const { timeLeft, timeRight } = useTopTime();
|
||||
dayTimeO.value = timeLeft;
|
||||
dayTimeT.value = timeRight;
|
||||
}
|
||||
|
||||
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 phoneDialogTitle = ref('呼入电话');
|
||||
const phoneDialogRef = ref();
|
||||
//0:处置 1:处理 2:呼入 3:全部
|
||||
const phoneType = ref('');
|
||||
|
||||
//呼入电话、受理电话弹窗
|
||||
function handlePhoneDialog(item) {
|
||||
const { name, key } = item;
|
||||
//呼入电话
|
||||
if (key == 'gross') {
|
||||
phoneType.value = ServerDetailType['gross'];
|
||||
//受理电话
|
||||
if (key == 'alerdyreceive') {
|
||||
phoneType.value = ServerDetailType['alerdyreceive'];
|
||||
}
|
||||
nextTick(() => {
|
||||
phoneDialogTitle.value = name;
|
||||
phoneDialogRef.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%;
|
||||
}
|
||||
|
||||
.central-screen-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