parent
918f589fdb
commit
2726b8773e
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 98 KiB |
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 984 B |
|
After Width: | Height: | Size: 618 B |
@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<div class="h-[32.4vh] mt-[2.77vh] bgLeftBottomBox pt-[3.24vh]">
|
||||
<div class="w-[43.79vh] h-[26.85vh] mx-auto" ref="echartsContainer"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import { GetMonitorFirstOperationMonth } from '@/api/operation';
|
||||
let chart = null;
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
chartOptions: {
|
||||
grid: {
|
||||
top: '13%',
|
||||
left: '13%',
|
||||
right: '10%',
|
||||
bottom: '13%',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['3月', '4月', '5月', '6月', '7月', '8月'],
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontFamily: 'DIN-Bold,Microsoft YaHei',
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
formatter: '{value}%',
|
||||
color: '#fff',
|
||||
fontFamily: 'DIN-Bold,Microsoft YaHei',
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(0,142,114,0.3)',
|
||||
width: 0.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [95, 97, 96, 98, 99, 96],
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
color: '#30FDFF',
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(0, 128, 255, 0.7)', // 开始颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(200, 254, 255, 0)', // 结束颜色
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
isLoading: true,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onGetPageData() {
|
||||
GetMonitorFirstOperationMonth().then(res => {
|
||||
this.chartOptions['xAxis']['data'] = [];
|
||||
this.chartOptions['series'][0]['data'] = [];
|
||||
res['data'].forEach(item => {
|
||||
this.chartOptions['xAxis']['data'].push(item['monthName']);
|
||||
this.chartOptions['series'][0]['data'].push(item['firstPunctualityRate'].slice(0, -1));
|
||||
});
|
||||
chart.setOption(this.chartOptions);
|
||||
this.isLoading = false;
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
chart = echarts.init(this.$refs.echartsContainer);
|
||||
this.onGetPageData();
|
||||
setInterval(() => {
|
||||
this.onGetPageData();
|
||||
}, this.$store.getters.intervalTime);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.bgLeftBottomBox {
|
||||
background-image: url('@/assets/svg/Operation/LeftBottom/Box.svg');
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,90 @@
|
||||
.leftBox {
|
||||
height: vh(526);
|
||||
box-sizing: border-box;
|
||||
padding: vh(20) vw(20);
|
||||
background-image: url('@/assets/svg/Operation/LeftTop/Box.svg');
|
||||
background-size: auto;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
.echartsContainer {
|
||||
width: vw(230);
|
||||
height: vh(230);
|
||||
margin: vh(20) auto;
|
||||
}
|
||||
|
||||
.bottomBox {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: vw(496);
|
||||
height: vh(172);
|
||||
padding: vh(24) vw(30) 0;
|
||||
margin: vh(50) auto 0;
|
||||
background: linear-gradient(180deg, #F2F3FA 0%, #EAE9FE 100%);
|
||||
box-sizing: border-box;
|
||||
border: 2px solid #EDE9F4;
|
||||
|
||||
.top {
|
||||
>div {
|
||||
div {
|
||||
font-size: vw(16);
|
||||
color: #302D32;
|
||||
margin-left: vw(8);
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: vw(28);
|
||||
color: #605C68;
|
||||
|
||||
span {
|
||||
font-size: vw(44);
|
||||
color: #5D49AF;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
>div {
|
||||
width: vw(276);
|
||||
height: vh(48);
|
||||
padding: 0 vw(24);
|
||||
background: linear-gradient(272deg, rgba(93, 73, 175, 0.045) 2%, rgba(93, 73, 175, 0.066) 99%);
|
||||
border: 1px solid;
|
||||
border-image: linear-gradient(160deg, rgba(158, 136, 246, 0.4) -10%, rgba(93, 73, 175, 0) 41%) 1.5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
font-size: vw(16);
|
||||
color: #571273;
|
||||
margin-left: vw(4);
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
font-size: vw(12);
|
||||
color: #571273;
|
||||
|
||||
span {
|
||||
font-weight: 500;
|
||||
font-size: vw(26);
|
||||
color: #5D49AF;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-bottom: vh(24);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<div class="w-[116.94vh] h-[85.8vh] bgRightMidBox">
|
||||
<div class="w-[112.96vh] h-[77.03vh] mx-auto mt-[2.96vh]">
|
||||
<div class="h-[4.44vh] leading-[4.44vh] text-center bg-[#322369]">
|
||||
<div class="inline-block">
|
||||
<div class="inline-block w-[5.11vh] text-[#AAAAAA] text-[1.48vh]">手术间</div>
|
||||
<div class="inline-block w-[11.11vh] text-[#AAAAAA] text-[1.48vh]">人员</div>
|
||||
<div class="inline-block w-[16.51vh] text-[#AAAAAA] text-[1.48vh]">手术名称</div>
|
||||
<div class="inline-block w-[13.11vh] text-[#AAAAAA] text-[1.48vh]">申请类型</div>
|
||||
<div class="inline-block w-[16.66vh] text-[#AAAAAA] text-[1.48vh]">入手术室时间</div>
|
||||
<div class="inline-block w-[16.66vh] text-[#AAAAAA] text-[1.48vh]">麻醉开始时间</div>
|
||||
<div class="inline-block w-[16.66vh] text-[#AAAAAA] text-[1.48vh]">手术开始时间</div>
|
||||
<div class="inline-block w-[11.11vh] text-[#AAAAAA] text-[1.48vh]">是否准点</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-[72.58vh]">
|
||||
<el-carousel direction="vertical" :autoplay="true" :interval="15000" indicatorPosition="none">
|
||||
<el-carousel-item v-for="(item, index) in scheduList" :key="index">
|
||||
<template v-for="(subItem, index) in item">
|
||||
<div class="h-[4.44vh] leading-[4.44vh] mt-[0.74vh] text-center itemStyle" :key="index">
|
||||
<div class="inline-block">
|
||||
<div class="inline-block align-top w-[5.11vh] text-[1.48vh] panmen">
|
||||
{{ subItem['roomName'] }}
|
||||
</div>
|
||||
<div class="inline-block align-top w-[11.11vh] text-[1.48vh]">
|
||||
{{ subItem['patientName'] }}
|
||||
</div>
|
||||
<div class="inline-block align-top w-[16.51vh] text-[1.48vh] px-1">
|
||||
<marquee scrollamount="2">{{ subItem['operationName'] }}</marquee>
|
||||
</div>
|
||||
<div class="inline-block align-middle w-[13.11vh] text-[1.48vh]">
|
||||
<img class="mx-auto" src="@/assets/svg/Operation/RightMid/Emergency.svg" v-if="subItem['OperationType']" />
|
||||
<img class="mx-auto" src="@/assets/svg/Operation/RightMid/Other.svg" v-else />
|
||||
</div>
|
||||
<div class="inline-block align-top w-[16.66vh] text-[1.48vh]">
|
||||
{{ formatData(subItem['inDateTime']) }}
|
||||
</div>
|
||||
<div class="inline-block align-top w-[16.66vh] text-[1.48vh]">
|
||||
{{ formatData(subItem['anesStartTime']) }}
|
||||
</div>
|
||||
<div class="inline-block align-top w-[16.66vh] text-[1.48vh]">
|
||||
{{ formatData(subItem['operStartTime']) }}
|
||||
</div>
|
||||
<div class="inline-block align-top w-[11.11vh] text-[1.48vh]" :class="subItem['IsFirstOnTime'] ? 'text-[#349AFC]' : 'text-[#A53FAF]'">
|
||||
{{ subItem['IsFirstOnTime'] ? '准点' : '不准点' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Carousel, CarouselItem } from 'element-ui';
|
||||
import { GetMonitorOperationCount } from '@/api/operation';
|
||||
import dayjs from 'dayjs';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
scheduList: [],
|
||||
isLoading: true,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onGetPageData() {
|
||||
let nowDay = dayjs().format('YYYY-MM-DD');
|
||||
if (this.$store.getters.isMock) {
|
||||
nowDay = '2024-06-06';
|
||||
}
|
||||
GetMonitorOperationCount(nowDay).then(res => {
|
||||
this.scheduList = [];
|
||||
let group = 0;
|
||||
for (let i = 0; i < res['data']['length']; i++) {
|
||||
group = parseInt(i / 14);
|
||||
if (this.scheduList[group]) {
|
||||
this.scheduList[group].push(res['data'][i]);
|
||||
} else {
|
||||
this.scheduList[group] = [res['data'][i]];
|
||||
}
|
||||
}
|
||||
this.isLoading = false;
|
||||
});
|
||||
},
|
||||
formatData(date) {
|
||||
let txt = '';
|
||||
if (date) {
|
||||
txt = dayjs(date).format('YYYY-MM-DD HH:mm:ss');
|
||||
}
|
||||
return txt;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.onGetPageData();
|
||||
setInterval(() => {
|
||||
this.onGetPageData();
|
||||
}, this.$store.getters.intervalTime);
|
||||
},
|
||||
components: {
|
||||
'el-carousel': Carousel,
|
||||
'el-carousel-item': CarouselItem,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bgRightMidBox {
|
||||
background-image: url('@/assets/svg/Operation/RightMid/Box.svg');
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.itemStyle {
|
||||
background: rgba(74, 78, 103, 0.15);
|
||||
box-sizing: border-box;
|
||||
border: 1px solid rgba(87, 151, 181, 0.4);
|
||||
}
|
||||
:deep(.el-carousel) {
|
||||
height: 100%;
|
||||
.el-carousel__item,
|
||||
.el-carousel__container {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue