239 lines
7.1 KiB
Vue
239 lines
7.1 KiB
Vue
<template>
|
||
<div class="qh-outer-d">
|
||
<div class="qh-title-d">
|
||
<div>
|
||
<div>
|
||
{{ dateInfo?.day }}
|
||
</div>
|
||
<div>
|
||
{{ dateInfo?.times }}
|
||
</div>
|
||
</div>
|
||
<div> 青海油田员工健康服务数据看板 </div>
|
||
<div>
|
||
{{ rightDate }}
|
||
</div>
|
||
</div>
|
||
<div class="qh-body-d">
|
||
<div class="qh-body-d-left">
|
||
<one-left :title="titleInfo?.oneLeft" />
|
||
<two-left :title="titleInfo?.twoLeft" />
|
||
<three-left :title="titleInfo?.threeLeft" />
|
||
</div>
|
||
<div class="qh-body-d-middle">
|
||
<div>
|
||
<div>
|
||
<div class="people-num">930</div>
|
||
<div class="people-num-des">累计咨询总人数（人）</div>
|
||
</div>
|
||
<div>
|
||
<div class="people-num">265</div>
|
||
<div class="people-num-des">累计应急总人数（人）</div>
|
||
</div>
|
||
</div>
|
||
<middle-d />
|
||
</div>
|
||
<div class="qh-body-d-right">
|
||
<one-right :title="titleInfo?.oneRight" />
|
||
<two-right :title="titleInfo?.twoRight" />
|
||
<three-right :title="titleInfo?.threeRight" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import dayjs from 'dayjs';
|
||
import { onMounted, ref, watch, onBeforeUnmount } from 'vue';
|
||
import OneLeft from '/@/views/qh/components/oneLeft.vue';
|
||
import TwoLeft from '/@/views/qh/components/twoLeft.vue';
|
||
import ThreeLeft from '/@/views/qh/components/threeLeft.vue';
|
||
import OneRight from '/@/views/qh/components/oneRight.vue';
|
||
import TwoRight from '/@/views/qh/components/twoRight.vue';
|
||
import ThreeRight from '/@/views/qh/components/threeRight.vue';
|
||
import MiddleD from '/@/views/qh/components/middleD.vue';
|
||
|
||
const titleInfo = ref({
|
||
oneLeft: '最新咨询记录',
|
||
twoLeft: '就医科室占比',
|
||
threeLeft: '最新咨询记录',
|
||
oneRight: '最新咨询记录',
|
||
twoRight: '最新咨询记录',
|
||
threeRight: '最新咨询记录',
|
||
});
|
||
const dateInfo = ref<object>({});
|
||
const rightDate = ref<string>('');
|
||
const qhInterval = ref<any>();
|
||
|
||
onMounted(() => {
|
||
getTime();
|
||
qhInterval.value = setInterval(() => {
|
||
getTime();
|
||
}, 1000);
|
||
rightDate.value = '累计运行时间：' + dayjs().diff(dayjs('2000-01-01'), 'days') + ' 天';
|
||
});
|
||
onBeforeUnmount(() => {
|
||
if (qhInterval.value) clearInterval(qhInterval.value);
|
||
});
|
||
|
||
const getTime = () => {
|
||
dateInfo.value = {
|
||
day: dayjs().format('YYYY年MM月DD日'),
|
||
times: dayjs().format('HH:mm:ss'),
|
||
};
|
||
};
|
||
|
||
watch(
|
||
() => dateInfo.value.day,
|
||
() => {
|
||
rightDate.value = '累计运行时间：' + dayjs().diff(dayjs('2000-01-01'), 'days') + ' 天';
|
||
}
|
||
);
|
||
</script>
|
||
<style scoped lang="less">
|
||
@import './style/index.less';
|
||
.qh-outer-d {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 0 20px;
|
||
background: #010b15;
|
||
|
||
.qh-title-d {
|
||
color: #ffffff;
|
||
height: 80px;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 30px;
|
||
|
||
> div {
|
||
flex: 1;
|
||
|
||
&:nth-child(1),
|
||
&:nth-child(3) {
|
||
font-size: 27px;
|
||
}
|
||
|
||
&:nth-child(2) {
|
||
font-size: 40px;
|
||
text-align: center;
|
||
}
|
||
|
||
&:nth-child(1) {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
|
||
> div {
|
||
&:nth-child(1) {
|
||
margin-right: 10px;
|
||
}
|
||
&:nth-child(2) {
|
||
padding: 0 15px;
|
||
position: relative;
|
||
&:before {
|
||
position: absolute;
|
||
height: 60%;
|
||
top: 20%;
|
||
left: 0;
|
||
width: 1px;
|
||
background: #000000;
|
||
content: '';
|
||
}
|
||
&:after {
|
||
position: absolute;
|
||
height: 60%;
|
||
top: 20%;
|
||
right: 0;
|
||
width: 1px;
|
||
background: #000000;
|
||
content: '';
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
&:nth-child(3) {
|
||
text-align: right;
|
||
}
|
||
}
|
||
}
|
||
|
||
.qh-body-d {
|
||
flex: 1;
|
||
display: flex;
|
||
padding-bottom: 10px;
|
||
|
||
> div {
|
||
&:nth-child(1),
|
||
&:nth-child(3) {
|
||
width: 25%;
|
||
}
|
||
&:nth-child(2) {
|
||
width: 50%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.qh-body-d-left,
|
||
.qh-body-d-right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
> div {
|
||
flex: 1;
|
||
padding: 0 0 0;
|
||
}
|
||
}
|
||
|
||
.qh-body-d-left,
|
||
.qh-body-d-right {
|
||
> div {
|
||
padding-bottom: 25px !important;
|
||
}
|
||
}
|
||
|
||
.qh-body-d-middle {
|
||
padding: 0 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
|
||
.people-num {
|
||
font-size: 30px;
|
||
font-weight: bold;
|
||
}
|
||
.people-num-des {
|
||
padding-top: 5px;
|
||
font-size: 20px;
|
||
}
|
||
|
||
> div {
|
||
&:nth-child(1) {
|
||
position: absolute;
|
||
width: 100%;
|
||
left: 0;
|
||
top: 100px;
|
||
display: flex;
|
||
justify-content: center;
|
||
> div {
|
||
color: #ffffff;
|
||
font-size: 18px;
|
||
text-align: center;
|
||
padding: 20px 30px;
|
||
background: red;
|
||
|
||
&:nth-child(1) {
|
||
margin: 50px 100px 0 0;
|
||
}
|
||
&:nth-child(2) {
|
||
margin: 50px 0 0 100px;
|
||
}
|
||
}
|
||
}
|
||
&:nth-child(2) {
|
||
flex: 1;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|