yin.wei
/
bigScreen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:接入动态表格

Browse Source
main
@0Melon0 12 months ago
parent c707e324b0
commit eb3466d654
3 changed files with 156 additions and 65 deletions
Show Stats Download Patch File Download Diff File

18
src/api/publishApi.js
Unescape View File

@ -0,0 +1,18 @@
import _axios from '@/utils/_axios';
// 获取动态表格列头
export const getDynamicTableHeader = data => {
return _axios({
url: '/api/DoctorMicroservice/DictReportDataSource/QueryPageList',
params: data,
});
};
// 获取动态表格数据
export const getDynamicTableList = data => {
return _axios({
method: 'post',
url: '/api/DoctorMicroservice/DictReportDataSource/GetHistoryAllData',
data,
});
};

87
src/views/scheduleList/index.vue
Unescape View File

@ -18,13 +18,11 @@
<main class="h-[calc(100vh-18.51vh)] p-[24px] pb-0 relative" ref="mainRef"> <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="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="bg-[#9A82FF] flex text-center" :style="carouselNav">
<div class="w-[7%] font-semibold border-r">手术间</div> <template v-for="item in colList">
<div class="w-[7%] font-semibold border-r">台次</div> <div class="font-semibold border-r truncate" :style="item['width'] ? `flex-basis:${item['width']}px` : `flex-grow: 1;`" :key="item['columnCode']" v-if="item['isShow']">
<div class="w-[8%] font-semibold border-r truncate">患者姓名</div> {{ item['columnName'] }}
<div class="w-[16%] font-semibold border-r">科室</div> </div>
<div class="w-[27%] font-semibold border-r">手术名称</div> </template>
<div class="w-[27%] font-semibold border-r">手术医生</div>
<div class="w-[8%] font-semibold">状态</div>
</div> </div>
<div :style="carouselWrap" class="border border-[#9A82FF] border-t-0" v-loading="isLoading"> <div :style="carouselWrap" class="border border-[#9A82FF] border-t-0" v-loading="isLoading">
<template v-if="patientList['length']"> <template v-if="patientList['length']">
@ -33,20 +31,38 @@
<section class="carouselItemBox"> <section class="carouselItemBox">
<div v-for="(subItem, index) in item" :key="index" :style="carouselItemStyle"> <div v-for="(subItem, index) in item" :key="index" :style="carouselItemStyle">
<div class="flex text-center"> <div class="flex text-center">
<div class="w-[7%] border-r text-[#333] font-semibold truncate px-3">{{ subItem['RoomName'] }}</div> <template v-for="item in colList">
<div class="w-[7%] border-r text-[#333] font-semibold truncate px-3">{{ subItem['Sequence'] }}</div> <template v-if="item['columnCode'] == 'ProcStatusName'">
<div class="w-[8%] border-r text-[#333] font-semibold truncate px-3">{{ subItem['PatientName'] }}</div> <div
<div class="w-[16%] border-r text-[#333] font-semibold truncate px-3">{{ subItem['DeptName'] }}</div> class="border-r text-[#333] font-semibold truncate px-3"
<div class="w-[27%] border-r text-[#333] font-semibold px-3"> :style="{ color: `${textToColor(subItem['ProcStatusName'])}`, 'flex-basis': `${item['width']}px` }"
<marquee scrollamount="3" class="text-[#333]" :style="carouselItemStyle">{{ subItem['OperationName'] }}</marquee> :key="item['columnCode']"
</div> v-if="item['isShow']"
<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'] }} {{ subItem['ProcStatusName'] }}
</div> </div>
</template>
<template v-else-if="item['columnCode'] == 'IntendedOperationName'">
<div
class="border-r text-[#333] font-semibold truncate px-3"
:style="item['width'] ? `flex-basis:${item['width']}px` : `flex-grow: 1;`"
:key="item['columnCode']"
v-if="item['isShow']"
>
<marquee scrollamount="3" class="text-[#333]" :style="carouselItemStyle">{{ subItem['IntendedOperationName'] }}</marquee>
</div>
</template>
<template v-else>
<div
class="border-r text-[#333] font-semibold truncate px-3"
:style="item['width'] ? `flex-basis:${item['width']}px` : `flex-grow: 1;`"
:key="item['columnCode']"
v-if="item['isShow']"
>
{{ subItem[item['columnCode']] }}
</div>
</template>
</template>
</div> </div>
</div> </div>
</section> </section>
@ -74,7 +90,7 @@
</template> </template>
<script> <script>
import { getOperationList } from '@/api/waitList'; import { getDynamicTableHeader, getDynamicTableList } from '@/api/publishApi';
import { Carousel, CarouselItem } from 'element-ui'; import { Carousel, CarouselItem } from 'element-ui';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { statusToTxt, textToColor } from '@/utils/common'; import { statusToTxt, textToColor } from '@/utils/common';
@ -95,6 +111,8 @@ export default {
carouselTimer: null, carouselTimer: null,
activeIndex: 0, activeIndex: 0,
getDataTimer: null, getDataTimer: null,
colList: [],
queryCondition: [],
}; };
}, },
methods: { methods: {
@ -103,12 +121,22 @@ export default {
onGetPageData() { onGetPageData() {
let today = dayjs().format('YYYY-MM-DD'); let today = dayjs().format('YYYY-MM-DD');
// today = '2024-06-06'; // today = '2024-06-06';
getOperationList(today) const QueryFiledDic = {};
this.queryCondition.forEach(queryItem => {
if (queryItem['queryType'] == 'dateTime') {
QueryFiledDic[queryItem['queryFiled']] = today;
}
});
getDynamicTableList({
PageSize: 999,
GroupCode: 'SSPCDP',
QueryFiledDic,
})
.then(res => { .then(res => {
this.patientList = []; this.patientList = [];
if (res['Data']['length']) { if (res['Data']['Data']['length']) {
for (let index = 0; index < res['Data'].length; index++) { for (let index = 0; index < res['Data']['Data']['length']; index++) {
const element = res['Data'][index]; const element = res['Data']['Data'][index];
const groupIndex = parseInt(index / this.showItemNum); const groupIndex = parseInt(index / this.showItemNum);
if (this.patientList[groupIndex]) { if (this.patientList[groupIndex]) {
this.patientList[groupIndex].push(element); this.patientList[groupIndex].push(element);
@ -116,7 +144,7 @@ export default {
this.patientList[groupIndex] = [element]; this.patientList[groupIndex] = [element];
} }
} }
if (!this.carouselTimer && res['Data']['length'] > this.showItemNum) { if (!this.carouselTimer && res['Data']['Data']['length'] > this.showItemNum) {
this.onCarouselTimer(); this.onCarouselTimer();
} }
} else { } else {
@ -168,12 +196,21 @@ export default {
this.currentDateTime = dayjs().format('YYYY-MM-DD HH:mm dddd'); this.currentDateTime = dayjs().format('YYYY-MM-DD HH:mm dddd');
}, 10000); }, 10000);
getDynamicTableHeader({
query: 'SSPCDP',
}).then(res => {
if (res['Data']['Data']['length']) {
res = res['Data']['Data'][0];
this.colList = JSON.parse(res['ReportHeadColumn']);
this.queryCondition = JSON.parse(res['QueryCondition']);
}
this.onGetPageData(); this.onGetPageData();
this.getDataTimer = setInterval(() => { this.getDataTimer = setInterval(() => {
this.onGetPageData(); this.onGetPageData();
}, 35000); }, 35000);
window.addEventListener('resize', this.onCalculate); window.addEventListener('resize', this.onCalculate);
}); });
});
}, },
components: { components: {
'el-carousel': Carousel, 'el-carousel': Carousel,

74
src/views/waitList/index.vue
Unescape View File

@ -18,11 +18,11 @@
<main class="h-[calc(100vh-18.51vh)] p-[15px] pb-0 relative overflow-hidden" ref="mainRef"> <main class="h-[calc(100vh-18.51vh)] p-[15px] pb-0 relative overflow-hidden" ref="mainRef">
<div class="absolute top-[24px] left-1/2 -translate-x-1/2 w-[calc(100%-30px)]"> <div class="absolute top-[24px] left-1/2 -translate-x-1/2 w-[calc(100%-30px)]">
<div class="bg-[#9A82FF] flex text-center" :style="carouselNav"> <div class="bg-[#9A82FF] flex text-center" :style="carouselNav">
<div class="w-[16%] font-semibold border-r">手术间</div> <template v-for="item in colList">
<div class="w-[20%] font-semibold border-r">患者姓名</div> <div class="font-semibold border-r truncate" :style="item['width'] ? `flex-basis:${item['width']}px` : `flex-grow: 1;`" :key="item['columnCode']" v-if="item['isShow']">
<div class="w-[16%] font-semibold border-r">床号</div> {{ item['columnName'] }}
<div class="w-[28%] font-semibold border-r">科室</div> </div>
<div class="w-[20%] font-semibold">状态</div> </template>
</div> </div>
<div :style="carouselWrap" class="border border-[#9A82FF] border-t-0" v-loading="isLoading"> <div :style="carouselWrap" class="border border-[#9A82FF] border-t-0" v-loading="isLoading">
<template v-if="patientList['length']"> <template v-if="patientList['length']">
@ -32,13 +32,28 @@
<template v-for="(subItem, index) in item"> <template v-for="(subItem, index) in item">
<div :key="index" :style="carouselItemStyle"> <div :key="index" :style="carouselItemStyle">
<div class="flex text-center"> <div class="flex text-center">
<div class="w-[16%] border-r text-[#333] font-semibold truncate">{{ subItem['RoomName'] }}</div> <template v-for="item in colList">
<div class="w-[20%] border-r text-[#333] font-semibold truncate">{{ subItem['PatientName'] }}</div> <template v-if="item['columnCode'] == 'ProcStatusName'">
<div class="w-[16%] border-r text-[#333] font-semibold truncate">{{ subItem['BedNo'] }}</div> <div
<div class="w-[28%] border-r text-[#333] font-semibold truncate">{{ subItem['DeptName'] }}</div> class="border-r text-[#333] font-semibold truncate"
<div class="w-[20%] text-[#333] font-semibold" :style="{ color: `${textWaitToColor(subItem['ProcStatusName'])}` }"> :style="{ color: `${textWaitToColor(subItem['ProcStatusName'])}`, 'flex-basis': `${item['width']}px` }"
:key="item['columnCode']"
v-if="item['isShow']"
>
{{ subItem['ProcStatusName'] }} {{ subItem['ProcStatusName'] }}
</div> </div>
</template>
<template v-else>
<div
class="border-r text-[#333] font-semibold truncate"
:style="item['width'] ? `flex-basis:${item['width']}px` : `flex-grow: 1;`"
:key="item['columnCode']"
v-if="item['isShow']"
>
{{ subItem[item['columnCode']] }}
</div>
</template>
</template>
</div> </div>
</div> </div>
</template> </template>
@ -74,7 +89,7 @@
</template> </template>
<script> <script>
import { getAnesPatientList } from '@/api/waitList'; import { getDynamicTableHeader, getDynamicTableList } from '@/api/publishApi';
import { Carousel, CarouselItem } from 'element-ui'; import { Carousel, CarouselItem } from 'element-ui';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { statusToTxt, textWaitToColor } from '@/utils/common'; import { statusToTxt, textWaitToColor } from '@/utils/common';
@ -104,6 +119,8 @@ export default {
popupMag: [], popupMag: [],
popupTimer: null, popupTimer: null,
synth: window.speechSynthesis, synth: window.speechSynthesis,
colList: [],
queryCondition: [],
}; };
}, },
methods: { methods: {
@ -112,12 +129,22 @@ export default {
onGetPageData() { onGetPageData() {
let today = dayjs().format('YYYY-MM-DD'); let today = dayjs().format('YYYY-MM-DD');
// today = '2024-06-06'; // today = '2024-06-06';
getAnesPatientList(today) const QueryFiledDic = {};
this.queryCondition.forEach(queryItem => {
if (queryItem['queryType'] == 'dateTime') {
QueryFiledDic[queryItem['queryFiled']] = today;
}
});
getDynamicTableList({
PageSize: 999,
GroupCode: 'JSDHQDP',
QueryFiledDic,
})
.then(res => { .then(res => {
this.patientList = []; this.patientList = [];
if (res['Data']['length']) { if (res['Data']['Data']['length']) {
for (let index = 0; index < res['Data'].length; index++) { for (let index = 0; index < res['Data']['Data']['length']; index++) {
const element = res['Data'][index]; const element = res['Data']['Data'][index];
const groupIndex = parseInt(index / this.showItemNum); const groupIndex = parseInt(index / this.showItemNum);
if (this.patientList[groupIndex]) { if (this.patientList[groupIndex]) {
this.patientList[groupIndex].push(element); this.patientList[groupIndex].push(element);
@ -125,7 +152,7 @@ export default {
this.patientList[groupIndex] = [element]; this.patientList[groupIndex] = [element];
} }
} }
if (!this.carouselTimer && res['Data']['length'] > this.showItemNum) { if (!this.carouselTimer && res['Data']['Data']['length'] > this.showItemNum) {
this.onCarouselTimer(); this.onCarouselTimer();
} }
} else { } else {
@ -189,11 +216,11 @@ export default {
this.popupMsgList.push(data['msg'].replaceAll('，', ',')); this.popupMsgList.push(data['msg'].replaceAll('，', ','));
} }
} catch (e) { } catch (e) {
console.log(e); console.warn(e);
} }
}, },
onFailed: function (frame) { onFailed: function (frame) {
console.log('MQ Failed: ' + frame); console.warn('MQ Failed: ' + frame);
setTimeout(() => { setTimeout(() => {
this.client = Stomp.client(MQTT_SERVICE); this.client = Stomp.client(MQTT_SERVICE);
Stomp.over(this.client); Stomp.over(this.client);
@ -214,7 +241,7 @@ export default {
if (selectedVoice) { if (selectedVoice) {
utterance.voice = selectedVoice; utterance.voice = selectedVoice;
} else { } else {
console.log('voices not fount'); console.warn('voices not fount');
} }
// 添加 onend 事件处理器 // 添加 onend 事件处理器
@ -253,6 +280,14 @@ export default {
this.currentDateTime = dayjs().format('YYYY-MM-DD HH:mm dddd'); this.currentDateTime = dayjs().format('YYYY-MM-DD HH:mm dddd');
}, 10000); }, 10000);
getDynamicTableHeader({
query: 'JSDHQDP',
}).then(res => {
if (res['Data']['Data']['length']) {
res = res['Data']['Data'][0];
this.colList = JSON.parse(res['ReportHeadColumn']);
this.queryCondition = JSON.parse(res['QueryCondition']);
}
this.onGetPageData(); this.onGetPageData();
this.getDataTimer = setInterval(() => { this.getDataTimer = setInterval(() => {
this.onGetPageData(); this.onGetPageData();
@ -269,6 +304,7 @@ export default {
// this.popupMsgList.push('请,金尧仙,的家属#到,手术室门口接病人'); // this.popupMsgList.push('请,金尧仙,的家属#到,手术室门口接病人');
// }, 3000); // }, 3000);
}); });
});
}, },
components: { components: {
'el-carousel': Carousel, 'el-carousel': Carousel,

Write Preview
Loading…
Cancel
Save