update
1.青海大屏
This commit is contained in:
@@ -0,0 +1,238 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user