|
|
|
|
@ -21,16 +21,25 @@
|
|
|
|
|
<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">
|
|
|
|
|
<template v-for="item in colList">
|
|
|
|
|
<div class="font-semibold border-r truncate"
|
|
|
|
|
<div class="font-semibold border-r "
|
|
|
|
|
:style="item['width'] ? `flex-basis:${item['width']}px` : `flex-grow: 1;`" :key="item['columnCode']"
|
|
|
|
|
v-if="item['isShow']">
|
|
|
|
|
{{ item['columnName'] }}
|
|
|
|
|
<div class="h-full flex items-center selectBox" v-if="item['depFilter']">
|
|
|
|
|
<el-select v-model="selectDepList" class="flex-grow" filterable :filterMethod="onSelectDepFilter"
|
|
|
|
|
multiple collapseTags :multipleLimit="1" :popperAppendToBody="false" @change="onSelectChange(item)">
|
|
|
|
|
<template v-for="(subItem, index) in depList">
|
|
|
|
|
<el-option :key="index" :label="subItem['DisplayName']" :value="subItem['Code']"
|
|
|
|
|
v-if="subItem['isShow']" />
|
|
|
|
|
</template>
|
|
|
|
|
</el-select>
|
|
|
|
|
</div>
|
|
|
|
|
<p @click="onDepFilter(item)" v-else class="truncate">{{ item['columnName'] }}</p>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
<div :style="carouselWrap" class="border border-[#9A82FF] border-t-0" v-loading="isLoading">
|
|
|
|
|
<template v-if="patientList['length']">
|
|
|
|
|
<el-carousel direction="vertical" :autoplay="true" indicatorPosition="none" ref="carousel"
|
|
|
|
|
<el-carousel direction="vertical" :autoplay="true" indicatorPosition="none" ref="carousel" :interval="0"
|
|
|
|
|
@change="onCarouselChange">
|
|
|
|
|
<el-carousel-item v-for="(item, index) in patientList" :key="index">
|
|
|
|
|
<section class="carouselItemBox">
|
|
|
|
|
@ -88,10 +97,11 @@
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { getDynamicTableHeader, getDynamicTableList, getGlobeConfig } from '@/api/publishApi';
|
|
|
|
|
import { Carousel, CarouselItem } from 'element-ui';
|
|
|
|
|
import dayjs from 'dayjs';
|
|
|
|
|
import { getDynamicTableHeader, getDynamicTableList, getGlobeConfig, getDepList } from '@/api/publishApi';
|
|
|
|
|
import { Carousel, CarouselItem, Select, Option } from 'element-ui';
|
|
|
|
|
import { statusToTxt, textToColor } from '@/utils/common';
|
|
|
|
|
import dayjs from 'dayjs';
|
|
|
|
|
import PinyinMatch from "pinyin-match";
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
@ -105,7 +115,7 @@ export default {
|
|
|
|
|
patientList: [],
|
|
|
|
|
currentDateTime: dayjs().format('YYYY-MM-DD HH:mm dddd'),
|
|
|
|
|
dateTimer: null,
|
|
|
|
|
carouselCountDown: 10,
|
|
|
|
|
carouselCountDown: 20,
|
|
|
|
|
carouselTimer: null,
|
|
|
|
|
activeIndex: 0,
|
|
|
|
|
getDataTimer: null,
|
|
|
|
|
@ -115,6 +125,26 @@ export default {
|
|
|
|
|
logoUrlBackup: "",
|
|
|
|
|
groupIndex: -1,
|
|
|
|
|
roomNameList: [],
|
|
|
|
|
stayTime: 30,
|
|
|
|
|
depList: [],
|
|
|
|
|
selectDepList: [],
|
|
|
|
|
options: [{
|
|
|
|
|
value: '选项1',
|
|
|
|
|
label: '黄金糕'
|
|
|
|
|
}, {
|
|
|
|
|
value: '选项2',
|
|
|
|
|
label: '双皮奶'
|
|
|
|
|
}, {
|
|
|
|
|
value: '选项3',
|
|
|
|
|
label: '蚵仔煎'
|
|
|
|
|
}, {
|
|
|
|
|
value: '选项4',
|
|
|
|
|
label: '龙须面'
|
|
|
|
|
}, {
|
|
|
|
|
value: '选项5',
|
|
|
|
|
label: '北京烤鸭'
|
|
|
|
|
}],
|
|
|
|
|
value: ''
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
@ -136,9 +166,26 @@ export default {
|
|
|
|
|
})
|
|
|
|
|
.then(res => {
|
|
|
|
|
this.patientList = [];
|
|
|
|
|
console.log(res['Data']['Data']);
|
|
|
|
|
|
|
|
|
|
if (res['Data']['Data']['length']) {
|
|
|
|
|
// 过滤结束时间
|
|
|
|
|
const deadline = dayjs().valueOf() - (60 * this.stayTime * 1000);
|
|
|
|
|
res['Data']['Data'] = res['Data']['Data'].filter(item => {
|
|
|
|
|
if (item['ProcStatus'] == 35 && item['OutRoomDateTime']) {
|
|
|
|
|
return dayjs(item['OutRoomDateTime']).valueOf() > deadline
|
|
|
|
|
}
|
|
|
|
|
if (item['ProcStatus'] == 45 && item['OutPacuDateTime']) {
|
|
|
|
|
return dayjs(item['OutPacuDateTime']).valueOf() > deadline
|
|
|
|
|
}
|
|
|
|
|
return true
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// 过滤部门
|
|
|
|
|
if (this.selectDepList.length) {
|
|
|
|
|
res['Data']['Data'] = res['Data']['Data'].filter(item => {
|
|
|
|
|
return this.selectDepList.includes(item['DeptCode'])
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
// 分区
|
|
|
|
|
if (this.groupIndex >= 0) {
|
|
|
|
|
if (this.roomNameList[this.groupIndex]) {
|
|
|
|
|
res['Data']['Data'] = res['Data']['Data'].filter(item => {
|
|
|
|
|
@ -174,7 +221,7 @@ export default {
|
|
|
|
|
this.carouselCountDown -= 1;
|
|
|
|
|
if (this.carouselCountDown == 0) {
|
|
|
|
|
this.$refs.carousel.next();
|
|
|
|
|
this.carouselCountDown = 10;
|
|
|
|
|
this.carouselCountDown = 20;
|
|
|
|
|
}
|
|
|
|
|
}, 1000);
|
|
|
|
|
});
|
|
|
|
|
@ -204,7 +251,6 @@ export default {
|
|
|
|
|
res['Data']['Item'].forEach(item => {
|
|
|
|
|
if (item['Key'] == 'HospitalLogo') {
|
|
|
|
|
this.logoUrl = item['Value']
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
if (item['Key'] == "CorporateLogo") {
|
|
|
|
|
this.logoUrlBackup = item['Value']
|
|
|
|
|
@ -212,14 +258,62 @@ export default {
|
|
|
|
|
if (item['Key'] == "RoomName") {
|
|
|
|
|
this.roomNameList = JSON.parse(item['Value'])
|
|
|
|
|
}
|
|
|
|
|
if (item['Key'] == "StayTime") {
|
|
|
|
|
this.stayTime = Number(item['Value'])
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
onGetDepList() {
|
|
|
|
|
getDepList().then(res => {
|
|
|
|
|
this.depList = res['Data'].map((item, index) => {
|
|
|
|
|
item['isShow'] = index < 30
|
|
|
|
|
return item
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
onDepFilter(rowData) {
|
|
|
|
|
if (rowData['columnCode'] == 'DeptName') {
|
|
|
|
|
rowData['depFilter'] = true
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
const selectBox = document.querySelector(".selectBox");
|
|
|
|
|
if (selectBox) {
|
|
|
|
|
const selectNode = selectBox.querySelector(".el-select");
|
|
|
|
|
if (selectNode) {
|
|
|
|
|
const instance = selectNode.__vue__;
|
|
|
|
|
if (instance && typeof instance.toggleMenu === "function") {
|
|
|
|
|
instance.toggleMenu();
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
onSelectDepFilter(val) {
|
|
|
|
|
if (val) {
|
|
|
|
|
this.depList.map(item => {
|
|
|
|
|
item["isShow"] = PinyinMatch.match(item["DisplayName"], val);
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
this.depList.map((item, index) => {
|
|
|
|
|
item["isShow"] = index < 30;
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
onSelectChange(rowData) {
|
|
|
|
|
if (!this.selectDepList.length) {
|
|
|
|
|
rowData['depFilter'] = false
|
|
|
|
|
}
|
|
|
|
|
this.onGetPageData()
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.onCalculate();
|
|
|
|
|
this.onGetblobe();
|
|
|
|
|
this.onGetDepList()
|
|
|
|
|
|
|
|
|
|
// 每秒更新一次当前时间
|
|
|
|
|
this.dateTimer = setInterval(() => {
|
|
|
|
|
@ -231,13 +325,16 @@ export default {
|
|
|
|
|
}).then(res => {
|
|
|
|
|
if (res['Data']['Data']['length']) {
|
|
|
|
|
res = res['Data']['Data'][0];
|
|
|
|
|
this.colList = JSON.parse(res['ReportHeadColumn']);
|
|
|
|
|
this.colList = JSON.parse(res['ReportHeadColumn']).map(item => {
|
|
|
|
|
item['depFilter'] = false
|
|
|
|
|
return item
|
|
|
|
|
});
|
|
|
|
|
this.queryCondition = JSON.parse(res['QueryCondition']);
|
|
|
|
|
}
|
|
|
|
|
this.onGetPageData();
|
|
|
|
|
this.getDataTimer = setInterval(() => {
|
|
|
|
|
this.onGetPageData();
|
|
|
|
|
}, 35000);
|
|
|
|
|
}, 120000);
|
|
|
|
|
window.addEventListener('resize', this.onCalculate);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
@ -245,6 +342,8 @@ export default {
|
|
|
|
|
components: {
|
|
|
|
|
'el-carousel': Carousel,
|
|
|
|
|
'el-carousel-item': CarouselItem,
|
|
|
|
|
'el-select': Select,
|
|
|
|
|
'el-option': Option,
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
formatDate() {
|
|
|
|
|
@ -314,4 +413,28 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.selectBox {
|
|
|
|
|
:deep(.el-select) {
|
|
|
|
|
.el-input__inner {
|
|
|
|
|
border: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-input__suffix {
|
|
|
|
|
visibility: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-select-dropdown {
|
|
|
|
|
text-align: left;
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-select__tags-text {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
