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,
});
};

99
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">
<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>
<template v-for="item in colList">
<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']">
{{ item['columnName'] }}
</div>
</template>
</div>
<div :style="carouselWrap" class="border border-[#9A82FF] border-t-0" v-loading="isLoading">
<template v-if="patientList['length']">
@ -33,20 +31,38 @@
<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>
<template v-for="item in colList">
<template v-if="item['columnCode'] == 'ProcStatusName'">
<div
class="border-r text-[#333] font-semibold truncate px-3"
:style="{ color: `${textToColor(subItem['ProcStatusName'])}`, 'flex-basis': `${item['width']}px` }"
:key="item['columnCode']"
v-if="item['isShow']"
>
{{ subItem['ProcStatusName'] }}
</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>
</section>
@ -74,7 +90,7 @@
</template>
<script>
import { getOperationList } from '@/api/waitList';
import { getDynamicTableHeader, getDynamicTableList } from '@/api/publishApi';
import { Carousel, CarouselItem } from 'element-ui';
import dayjs from 'dayjs';
import { statusToTxt, textToColor } from '@/utils/common';
@ -95,6 +111,8 @@ export default {
carouselTimer: null,
activeIndex: 0,
getDataTimer: null,
colList: [],
queryCondition: [],
};
},
methods: {
@ -103,12 +121,22 @@ export default {
onGetPageData() {
let today = dayjs().format('YYYY-MM-DD');
// 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 => {
this.patientList = [];
if (res['Data']['length']) {
for (let index = 0; index < res['Data'].length; index++) {
const element = res['Data'][index];
if (res['Data']['Data']['length']) {
for (let index = 0; index < res['Data']['Data']['length']; index++) {
const element = res['Data']['Data'][index];
const groupIndex = parseInt(index / this.showItemNum);
if (this.patientList[groupIndex]) {
this.patientList[groupIndex].push(element);
@ -116,7 +144,7 @@ export default {
this.patientList[groupIndex] = [element];
}
}
if (!this.carouselTimer && res['Data']['length'] > this.showItemNum) {
if (!this.carouselTimer && res['Data']['Data']['length'] > this.showItemNum) {
this.onCarouselTimer();
}
} else {
@ -168,11 +196,20 @@ export default {
this.currentDateTime = dayjs().format('YYYY-MM-DD HH:mm dddd');
}, 10000);
this.onGetPageData();
this.getDataTimer = setInterval(() => {
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();
}, 35000);
window.addEventListener('resize', this.onCalculate);
this.getDataTimer = setInterval(() => {
this.onGetPageData();
}, 35000);
window.addEventListener('resize', this.onCalculate);
});
});
},
components: {

104
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">
<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="w-[16%] font-semibold border-r">手术间</div>
<div class="w-[20%] font-semibold border-r">患者姓名</div>
<div class="w-[16%] font-semibold border-r">床号</div>
<div class="w-[28%] font-semibold border-r">科室</div>
<div class="w-[20%] font-semibold">状态</div>
<template v-for="item in colList">
<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']">
{{ item['columnName'] }}
</div>
</template>
</div>
<div :style="carouselWrap" class="border border-[#9A82FF] border-t-0" v-loading="isLoading">
<template v-if="patientList['length']">
@ -32,13 +32,28 @@
<template v-for="(subItem, index) in item">
<div :key="index" :style="carouselItemStyle">
<div class="flex text-center">
<div class="w-[16%] border-r text-[#333] font-semibold truncate">{{ subItem['RoomName'] }}</div>
<div class="w-[20%] border-r text-[#333] font-semibold truncate">{{ subItem['PatientName'] }}</div>
<div class="w-[16%] border-r text-[#333] font-semibold truncate">{{ subItem['BedNo'] }}</div>
<div class="w-[28%] border-r text-[#333] font-semibold truncate">{{ subItem['DeptName'] }}</div>
<div class="w-[20%] text-[#333] font-semibold" :style="{ color: `${textWaitToColor(subItem['ProcStatusName'])}` }">
{{ subItem['ProcStatusName'] }}
</div>
<template v-for="item in colList">
<template v-if="item['columnCode'] == 'ProcStatusName'">
<div
class="border-r text-[#333] font-semibold truncate"
:style="{ color: `${textWaitToColor(subItem['ProcStatusName'])}`, 'flex-basis': `${item['width']}px` }"
:key="item['columnCode']"
v-if="item['isShow']"
>
{{ subItem['ProcStatusName'] }}
</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>
</template>
@ -74,7 +89,7 @@
</template>
<script>
import { getAnesPatientList } from '@/api/waitList';
import { getDynamicTableHeader, getDynamicTableList } from '@/api/publishApi';
import { Carousel, CarouselItem } from 'element-ui';
import dayjs from 'dayjs';
import { statusToTxt, textWaitToColor } from '@/utils/common';
@ -104,6 +119,8 @@ export default {
popupMag: [],
popupTimer: null,
synth: window.speechSynthesis,
colList: [],
queryCondition: [],
};
},
methods: {
@ -112,12 +129,22 @@ export default {
onGetPageData() {
let today = dayjs().format('YYYY-MM-DD');
// 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 => {
this.patientList = [];
if (res['Data']['length']) {
for (let index = 0; index < res['Data'].length; index++) {
const element = res['Data'][index];
if (res['Data']['Data']['length']) {
for (let index = 0; index < res['Data']['Data']['length']; index++) {
const element = res['Data']['Data'][index];
const groupIndex = parseInt(index / this.showItemNum);
if (this.patientList[groupIndex]) {
this.patientList[groupIndex].push(element);
@ -125,7 +152,7 @@ export default {
this.patientList[groupIndex] = [element];
}
}
if (!this.carouselTimer && res['Data']['length'] > this.showItemNum) {
if (!this.carouselTimer && res['Data']['Data']['length'] > this.showItemNum) {
this.onCarouselTimer();
}
} else {
@ -189,11 +216,11 @@ export default {
this.popupMsgList.push(data['msg'].replaceAll('，', ','));
}
} catch (e) {
console.log(e);
console.warn(e);
}
},
onFailed: function (frame) {
console.log('MQ Failed: ' + frame);
console.warn('MQ Failed: ' + frame);
setTimeout(() => {
this.client = Stomp.client(MQTT_SERVICE);
Stomp.over(this.client);
@ -214,7 +241,7 @@ export default {
if (selectedVoice) {
utterance.voice = selectedVoice;
} else {
console.log('voices not fount');
console.warn('voices not fount');
}
// 添加 onend 事件处理器
@ -253,21 +280,30 @@ export default {
this.currentDateTime = dayjs().format('YYYY-MM-DD HH:mm dddd');
}, 10000);
this.onGetPageData();
this.getDataTimer = setInterval(() => {
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();
}, 35000);
this.popupTimer = setInterval(() => {
this.onPopupPlay();
}, 2000);
window.addEventListener('resize', this.onCalculate);
this.setRabitMQ();
this.getDataTimer = setInterval(() => {
this.onGetPageData();
}, 35000);
this.popupTimer = setInterval(() => {
this.onPopupPlay();
}, 2000);
window.addEventListener('resize', this.onCalculate);
this.setRabitMQ();
// setTimeout(() => {
// this.popupMsgList.push('请,金尧仙,的家属#到,手术室门口接病人');
// this.popupMsgList.push('请,金尧仙,的家属#到,手术室门口接病人');
// this.popupMsgList.push('请,金尧仙,的家属#到,手术室门口接病人');
// }, 3000);
// setTimeout(() => {
// this.popupMsgList.push('请,金尧仙,的家属#到,手术室门口接病人');
// this.popupMsgList.push('请,金尧仙,的家属#到,手术室门口接病人');
// this.popupMsgList.push('请,金尧仙,的家属#到,手术室门口接病人');
// }, 3000);
});
});
},
components: {

Write Preview
Loading…
Cancel
Save