|
|
<template>
|
|
|
<section class="waitBox bg-[#F3F2FA]">
|
|
|
<nav class="h-[11.11vh] pl-[3.7vh] pr-[2.22vh] flex justify-between items-center bg-[#5D49AF] relative overflow-hidden">
|
|
|
<div class="logBox h-[5vh]">
|
|
|
<img class="h-full" src="@/assets/svg/Wait/logo.png" />
|
|
|
</div>
|
|
|
<div class="absolute titleBox w-full flex justify-around">
|
|
|
<div class="flex items-center">
|
|
|
<p class="text-[5.55vh] font-bold mr-[1.48vh]">手术排程</p>
|
|
|
<span class="text-[2.96vh] text-[#ccc] tracking-widest">({{ carouselCountDown }}s)</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="timeBox text-right">
|
|
|
<p class="text-[3.14vh] font-medium leading-tight">{{ formatTime }}</p>
|
|
|
<p class="text-[1.66vh]">{{ formatDate }}</p>
|
|
|
</div>
|
|
|
</nav>
|
|
|
<main class="h-[calc(100vh-18.51vh)] p-[24px] pb-0 relative" ref="mainRef">
|
|
|
<div class="absolute top-[24px] left-1/2 -translate-x-1/2 w-[calc(100%-48px)]">
|
|
|
<div class="bg-[#9A82FF] flex text-center" :style="carouselNav">
|
|
|
<div class="w-[7%] font-semibold border-r">手术间</div>
|
|
|
<div class="w-[7%] font-semibold border-r">台次</div>
|
|
|
<div class="w-[8%] font-semibold border-r truncate">患者姓名</div>
|
|
|
<div class="w-[16%] font-semibold border-r">科室</div>
|
|
|
<div class="w-[27%] font-semibold border-r">手术名称</div>
|
|
|
<div class="w-[27%] font-semibold border-r">手术医生</div>
|
|
|
<div class="w-[8%] font-semibold">状态</div>
|
|
|
</div>
|
|
|
<div :style="carouselWrap" class="border border-[#9A82FF] border-t-0" v-loading="isLoading">
|
|
|
<template v-if="patientList['length']">
|
|
|
<el-carousel direction="vertical" :autoplay="false" indicatorPosition="none" ref="carousel" @change="onCarouselChange">
|
|
|
<el-carousel-item v-for="(item, index) in patientList" :key="index">
|
|
|
<section class="carouselItemBox">
|
|
|
<div v-for="(subItem, index) in item" :key="index" :style="carouselItemStyle">
|
|
|
<div class="flex text-center">
|
|
|
<div class="w-[7%] border-r text-[#333] font-semibold truncate px-3">{{ subItem['RoomName'] }}</div>
|
|
|
<div class="w-[7%] border-r text-[#333] font-semibold truncate px-3">{{ subItem['Sequence'] }}</div>
|
|
|
<div class="w-[8%] border-r text-[#333] font-semibold truncate px-3">{{ subItem['PatientName'] }}</div>
|
|
|
<div class="w-[16%] border-r text-[#333] font-semibold truncate px-3">{{ subItem['DeptName'] }}</div>
|
|
|
<div class="w-[27%] border-r text-[#333] font-semibold px-3">
|
|
|
<marquee scrollamount="3" class="text-[#333]" :style="carouselItemStyle">{{ subItem['OperationName'] }}</marquee>
|
|
|
</div>
|
|
|
<div class="w-[27%] border-r text-[#333] font-semibold px-3 truncate">
|
|
|
<!-- <marquee scrollamount="2" class="text-[#333]" :style="carouselItemStyle">{{ subItem['SurgeonLists'] }}</marquee> -->
|
|
|
{{ subItem['SurgeonLists'] }}
|
|
|
</div>
|
|
|
<div class="w-[8%] font-semibold text-[#333]" :style="{ color: `${textToColor(subItem['ProcStatusName'])}` }">
|
|
|
{{ subItem['ProcStatusName'] }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
</el-carousel-item>
|
|
|
</el-carousel>
|
|
|
</template>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex">
|
|
|
<template v-for="(item, index) in patientList">
|
|
|
<div class="w-3 h-3 rounded-full bg-[#D8D8D8] mx-1" :class="{ '!bg-[#8C8D92]': index == activeIndex }" :key="index" />
|
|
|
</template>
|
|
|
</div>
|
|
|
</main>
|
|
|
<footer class="h-[7.4vh] flex items-center justify-around bg-[#5D49AF]">
|
|
|
<div class="flex items-center">
|
|
|
<div class="logBox w-[15vh] h-[3.7vh] mr-[1.48vh]">
|
|
|
<img class="h-full" src="@/assets/svg/Wait/footText.png" />
|
|
|
</div>
|
|
|
<p class="text-[2.59vh]">请勿吸烟，请照顾好自己随身携带的物品，请耐心等待，我们将竭诚为您服务</p>
|
|
|
</div>
|
|
|
</footer>
|
|
|
</section>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { getOperationList } from '@/api/waitList';
|
|
|
import { Carousel, CarouselItem } from 'element-ui';
|
|
|
import dayjs from 'dayjs';
|
|
|
import { statusToTxt, textToColor } from '@/utils/common';
|
|
|
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
isLoading: true,
|
|
|
mainRefHeight: 0,
|
|
|
showItemNum: 12,
|
|
|
carouselNav: {},
|
|
|
carouselWrap: {},
|
|
|
carouselItemStyle: {},
|
|
|
patientList: [],
|
|
|
currentDateTime: dayjs().format('YYYY-MM-DD HH:mm dddd'),
|
|
|
dateTimer: null,
|
|
|
carouselCountDown: 10,
|
|
|
carouselTimer: null,
|
|
|
activeIndex: 0,
|
|
|
getDataTimer: null,
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
statusToTxt,
|
|
|
textToColor,
|
|
|
onGetPageData() {
|
|
|
let today = dayjs().format('YYYY-MM-DD');
|
|
|
// today = '2024-06-06';
|
|
|
getOperationList(today)
|
|
|
.then(res => {
|
|
|
this.patientList = [];
|
|
|
if (res['Data']['length']) {
|
|
|
for (let index = 0; index < res['Data'].length; index++) {
|
|
|
const element = res['Data'][index];
|
|
|
const groupIndex = parseInt(index / this.showItemNum);
|
|
|
if (this.patientList[groupIndex]) {
|
|
|
this.patientList[groupIndex].push(element);
|
|
|
} else {
|
|
|
this.patientList[groupIndex] = [element];
|
|
|
}
|
|
|
}
|
|
|
if (!this.carouselTimer) {
|
|
|
this.onCarouselTimer();
|
|
|
}
|
|
|
} else {
|
|
|
clearInterval(this.carouselTimer);
|
|
|
}
|
|
|
})
|
|
|
.finally(() => {
|
|
|
this.isLoading = false;
|
|
|
});
|
|
|
},
|
|
|
onCarouselTimer() {
|
|
|
this.$nextTick(() => {
|
|
|
this.carouselTimer = setInterval(() => {
|
|
|
this.carouselCountDown -= 1;
|
|
|
if (this.carouselCountDown == 0) {
|
|
|
this.$refs.carousel.next();
|
|
|
this.carouselCountDown = 10;
|
|
|
}
|
|
|
}, 1000);
|
|
|
});
|
|
|
},
|
|
|
onCalculate() {
|
|
|
// 根据展示数量计算高度
|
|
|
this.mainRefHeight = parseInt(this.$refs.mainRef.clientHeight - 24 - 40);
|
|
|
const rowHeight = this.mainRefHeight / (this.showItemNum + 1);
|
|
|
this.carouselNav = {
|
|
|
'font-size': `${(rowHeight * 0.5).toFixed(2)}px`,
|
|
|
'line-height': `${rowHeight.toFixed(2)}px`,
|
|
|
};
|
|
|
this.carouselWrap = {
|
|
|
height: `${(rowHeight * this.showItemNum).toFixed(2)}px`,
|
|
|
};
|
|
|
this.carouselItemStyle = {
|
|
|
'line-height': `${rowHeight.toFixed(2)}px`,
|
|
|
height: `${rowHeight.toFixed(2)}px`,
|
|
|
'font-size': `${(rowHeight * 0.48).toFixed(2)}px`,
|
|
|
};
|
|
|
},
|
|
|
onCarouselChange(index) {
|
|
|
this.activeIndex = index;
|
|
|
},
|
|
|
},
|
|
|
mounted() {
|
|
|
this.$nextTick(() => {
|
|
|
this.onCalculate();
|
|
|
|
|
|
// 每秒更新一次当前时间
|
|
|
this.dateTimer = setInterval(() => {
|
|
|
this.currentDateTime = dayjs().format('YYYY-MM-DD HH:mm dddd');
|
|
|
}, 10000);
|
|
|
|
|
|
this.onGetPageData();
|
|
|
this.getDataTimer = setInterval(() => {
|
|
|
this.onGetPageData();
|
|
|
}, 35000);
|
|
|
window.addEventListener('resize', this.onCalculate);
|
|
|
});
|
|
|
},
|
|
|
components: {
|
|
|
'el-carousel': Carousel,
|
|
|
'el-carousel-item': CarouselItem,
|
|
|
},
|
|
|
computed: {
|
|
|
formatDate() {
|
|
|
const timeArr = this.currentDateTime.split(' ');
|
|
|
let weekName = '星期一';
|
|
|
if (timeArr[2] == 'Tuesday') {
|
|
|
weekName = '星期二';
|
|
|
}
|
|
|
if (timeArr[2] == 'Wednesday') {
|
|
|
weekName = '星期三';
|
|
|
}
|
|
|
if (timeArr[2] == 'Thursday') {
|
|
|
weekName = '星期四';
|
|
|
}
|
|
|
if (timeArr[2] == 'Friday') {
|
|
|
weekName = '星期五';
|
|
|
}
|
|
|
if (timeArr[2] == 'Saturday') {
|
|
|
weekName = '星期六';
|
|
|
}
|
|
|
if (timeArr[2] == 'Sunday') {
|
|
|
weekName = '星期日';
|
|
|
}
|
|
|
return `${timeArr[0]} ${weekName}`;
|
|
|
},
|
|
|
formatTime() {
|
|
|
return this.currentDateTime.split(' ')[1];
|
|
|
},
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
// 清除定时器
|
|
|
clearInterval(this.dateTimer);
|
|
|
clearInterval(this.carouselTimer);
|
|
|
clearInterval(this.getDataTimer);
|
|
|
// 组件销毁前移除 resize 事件监听器
|
|
|
window.removeEventListener('resize', this.onCalculate);
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
:deep(.el-carousel) {
|
|
|
height: 100%;
|
|
|
.el-carousel__container,
|
|
|
.el-carousel__item {
|
|
|
height: 100%;
|
|
|
.carouselItemBox {
|
|
|
> div:nth-child(odd) {
|
|
|
background: #fff;
|
|
|
}
|
|
|
> div:nth-child(even) {
|
|
|
background: #f5f8ff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|
