parent
2726b8773e
commit
b114d29cd6
|
Before Width: | Height: | Size: 98 KiB After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 5.3 KiB After Width: | Height: | Size: 4.4 KiB |
|
Before Width: | Height: | Size: 6.1 KiB After Width: | Height: | Size: 9.1 KiB |
|
Before Width: | Height: | Size: 5.8 KiB After Width: | Height: | Size: 7.1 KiB |
@ -1,107 +0,0 @@
|
||||
<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>
|
||||
@ -1,128 +0,0 @@
|
||||
<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>
|
||||
@ -0,0 +1,113 @@
|
||||
.bgRightMidBox {
|
||||
width: vw(1270);
|
||||
height: vh(904);
|
||||
background-image: url('@/assets/svg/Operation/RightMid/Box.svg');
|
||||
background-size: auto;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
>section {
|
||||
box-sizing: border-box;
|
||||
padding-top: vh(32);
|
||||
height: 100%;
|
||||
width: vw(1206);
|
||||
margin: 0 auto;
|
||||
|
||||
header {
|
||||
height: vh(48);
|
||||
line-height: vh(48);
|
||||
text-align: center;
|
||||
background-color: #E5E6FF;
|
||||
|
||||
>div {
|
||||
display: inline-block;
|
||||
|
||||
>div {
|
||||
font-size: vw(16);
|
||||
color: #5D49AF;
|
||||
font-weight: 700;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
height: vh(784);
|
||||
box-sizing: border-box;
|
||||
padding-top: vh(8);
|
||||
|
||||
:deep(.el-carousel) {
|
||||
height: 100%;
|
||||
|
||||
.el-carousel__item,
|
||||
.el-carousel__container {
|
||||
height: 100%;
|
||||
|
||||
.rowBox {
|
||||
height: vh(48);
|
||||
text-align: center;
|
||||
|
||||
&:nth-child(2n+1) {
|
||||
background: #F3F3F9;
|
||||
}
|
||||
|
||||
&:nth-child(2n) {
|
||||
background: #F0F0FC;
|
||||
}
|
||||
|
||||
>div {
|
||||
display: inline-block;
|
||||
|
||||
>div {
|
||||
font-size: vw(16);
|
||||
color: #5D49AF;
|
||||
display: inline-block;
|
||||
|
||||
marquee {
|
||||
font-size: vw(16);
|
||||
color: #5D49AF;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.col1 {
|
||||
width: vw(55);
|
||||
}
|
||||
|
||||
.col2 {
|
||||
width: vw(120);
|
||||
}
|
||||
|
||||
.col3 {
|
||||
width: vw(178);
|
||||
}
|
||||
|
||||
.col4 {
|
||||
width: vw(142);
|
||||
}
|
||||
|
||||
.col5 {
|
||||
width: vw(180);
|
||||
}
|
||||
|
||||
.col6 {
|
||||
width: vw(180);
|
||||
}
|
||||
|
||||
.col7 {
|
||||
width: vw(180);
|
||||
}
|
||||
|
||||
.col8 {
|
||||
width: vw(120);
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue