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

wip:更新布局

Browse Source
main
@0Melon0 12 months ago
parent 8b596ba355
commit b76201db4c
5 changed files with 164 additions and 107 deletions
Show Stats Download Patch File Download Diff File

47
1.html
Unescape View File

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<title>Speech Synthesis Example</title>
</head>
<body>
<h1>Speech Synthesis Example</h1>
<input type="text" id="text" value="请0的家属到手术室门口接病人">
<br>
<button onclick="speakText()">Speak</button>
<script>
const synth = window.speechSynthesis;
function speakText() {
const textInput = document.getElementById('text').value;
const utterance = new SpeechSynthesisUtterance(textInput);
// 固定播放速度和语音
utterance.rate = 1.0; // 播放速度
const voices = synth.getVoices();
const selectedVoice = voices.find(voice => voice.lang === 'zh-CN'); // 固定选择中文（普通话）的语音
if (selectedVoice) {
utterance.voice = selectedVoice;
}
// 添加 onend 事件处理器
utterance.onend = function(event) {
console.log('Speech has finished.');
alert('Speech has finished.');
};
window.speechSynthesis.speak(utterance);
}
// 等待语音列表加载完成
function checkVoices() {
if (synth.getVoices().length !== 0) {
clearInterval(voicesCheckInterval);
}
}
const voicesCheckInterval = setInterval(checkVoices, 100);
</script>
</body>
</html>

23
src/api/waitList.js
Unescape View File

@ -1,16 +1,27 @@
import _axios from '@/utils/_axios'; import _axios from '@/utils/_axios';
/** /**
* 麻醉管理患者列表 * 患者等候大屏列表
*/ */
export const getAnesPatientList = data => { export const getAnesPatientList = date => {
return _axios({ return _axios({
method: 'post', method: 'post',
url: '/api/ScheduleMicroservice/OperationRecord/AnesPatientList', url: '/api/DoctorMicroservice/AnesthesiaRecord/GetAnesthesiaRecordFamilyWaitingAsync',
params: { params: {
pageIndex: 1, scheduledDatetime: date,
pageSize: 999, },
});
};
/**
* 手术排程大屏列表
*/
export const getOperationList = date => {
return _axios({
method: 'post',
url: '/api/ScheduleMicroservice/OperationRecord/GetOperationRecordScreenAsync',
params: {
scheduledDatetime: date,
}, },
data,
}); });
}; };

26
src/utils/common.js
Unescape View File

@ -83,6 +83,32 @@ export const textToColor = text => {
return color; return color;
}; };
// 根据手术状态输出颜色
export const textWaitToColor = text => {
let color = '#87ceeb';
switch (text) {
case '手术前':
color = '#87ceeb';
break;
case '入手术室':
color = '#f00';
break;
case '手术中':
color = '#f00';
break;
case '手术结束':
color = '#67c23a';
break;
case '复苏中':
color = '#f09b55';
break;
case '出手术室':
color = '#67c23a';
break;
}
return color;
};
// 手术状态清单 // 手术状态清单
export const opStatusList = [ export const opStatusList = [
{ {

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

@ -1,6 +1,6 @@
<template> <template>
<section class="waitBox bg-[#F3F2FA]"> <section class="waitBox bg-[#F3F2FA]">
<nav class="h-[11.11vh] pl-[3.7vh] pr-[2.22vh] flex justify-between items-center bg-[#5D49AF] relative"> <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]"> <div class="logBox h-[5vh]">
<img class="h-full" src="@/assets/svg/Wait/logo.png" /> <img class="h-full" src="@/assets/svg/Wait/logo.png" />
</div> </div>
@ -18,16 +18,13 @@
<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-[8%] border-r">手术间</div> <div class="w-[7%] border-r">手术间</div>
<div class="w-[8%] border-r">台次</div> <div class="w-[7%] border-r">台次</div>
<div class="w-[10%] border-r">患者姓名</div> <div class="w-[8%] border-r truncate">患者姓名</div>
<div class="w-[10%] border-r">科室</div> <div class="w-[16%] border-r">科室</div>
<div class="w-[14%] border-r">手术名称</div> <div class="w-[27%] border-r">手术名称</div>
<div class="w-[10%] border-r">主刀医生</div> <div class="w-[27%] border-r">手术医生</div>
<div class="w-[10%] border-r">主麻医生</div> <div class="w-[8%]">状态</div>
<div class="w-[10%] border-r">巡回护士</div>
<div class="w-[10%] border-r">器械护士</div>
<div class="w-[10%]">状态</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']">
@ -36,29 +33,19 @@
<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-[8%] border-r text-[#333] truncate">{{ subItem['RoomName'] }}</div> <div class="w-[7%] border-r text-[#333] truncate px-3">{{ subItem['RoomName'] }}</div>
<div class="w-[8%] border-r text-[#333] truncate">{{ subItem['Sequence'] }}</div> <div class="w-[7%] border-r text-[#333] truncate px-3">{{ subItem['Sequence'] }}</div>
<div class="w-[10%] border-r text-[#333] truncate">{{ subItem['PatientName'] }}</div> <div class="w-[8%] border-r text-[#333] truncate px-3">{{ subItem['PatientName'] }}</div>
<div class="w-[10%] border-r text-[#333] truncate">{{ subItem['WardName'] }}</div> <div class="w-[16%] border-r text-[#333] truncate px-3">{{ subItem['DeptName'] }}</div>
<div class="w-[14%] border-r text-[#333] leading-none"> <div class="w-[27%] border-r text-[#333] px-3">
<marquee scrollamount="3" class="text-[#333]" :style="carouselItemStyle">{{ subItem['OperationName'] }}</marquee> <marquee scrollamount="3" class="text-[#333]" :style="carouselItemStyle">{{ subItem['OperationName'] }}</marquee>
</div> </div>
<div class="w-[10%] border-r text-[#333] truncate">{{ subItem['Surgeon'] }}</div> <div class="w-[27%] border-r text-[#333] px-3 truncate">
<div class="w-[10%] border-r text-[#333] truncate">{{ subItem['AnesthesiaDoctor'] }}</div> <!-- <marquee scrollamount="2" class="text-[#333]" :style="carouselItemStyle">{{ subItem['SurgeonLists'] }}</marquee> -->
<div class="w-[10%] border-r text-[#333] truncate"> {{ subItem['SurgeonLists'] }}
<p class="text-[#333]" v-if="subItem['OperationNursList']['length'] <= 1">
{{ subItem['OperationNursList'].join() }}
</p>
<marquee scrollamount="3" class="text-[#333]" :style="carouselItemStyle" v-else> {{ subItem['OperationNursList'].join() }}</marquee>
</div> </div>
<div class="w-[10%] border-r text-[#333] truncate"> <div class="w-[8%] text-[#333]" :style="{ color: `${textToColor(subItem['ProcStatusName'])}` }">
<p class="text-[#333]" v-if="subItem['SupplyNurseList']['length'] <= 1"> {{ subItem['ProcStatusName'] }}
{{ subItem['SupplyNurseList'].join() }}
</p>
<marquee scrollamount="3" class="text-[#333]" :style="carouselItemStyle" v-else> {{ subItem['SupplyNurseList'].join() }}</marquee>
</div>
<div class="w-[10%] text-[#333]" :style="{ color: `${textToColor(statusToTxt(subItem['ProcStatus']))}` }">
{{ statusToTxt(subItem['ProcStatus']) }}
</div> </div>
</div> </div>
</div> </div>
@ -87,7 +74,7 @@
</template> </template>
<script> <script>
import { getAnesPatientList } from '@/api/waitList'; import { getOperationList } from '@/api/waitList';
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';
@ -115,23 +102,13 @@ export default {
textToColor, textToColor,
onGetPageData() { onGetPageData() {
let today = dayjs().format('YYYY-MM-DD'); let today = dayjs().format('YYYY-MM-DD');
getAnesPatientList({ // today = '2024-06-06';
ScheduledDateTime: today, getOperationList(today)
Status: -1,
IsPacu: false,
IsEOperation: false,
IsAnesManage: true,
IsInfect: false,
IsRadiation: false,
IsPostoperativeAnalgesia: false,
IsSurgicalFreezing: false,
IsType: false,
})
.then(res => { .then(res => {
this.patientList = []; this.patientList = [];
if (res['Data']['Data']) { if (res['Data']['length']) {
for (let index = 0; index < res['Data']['Data']['AnesPatientLists'].length; index++) { for (let index = 0; index < res['Data'].length; index++) {
const element = res['Data']['Data']['AnesPatientLists'][index]; const element = res['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);
@ -142,6 +119,8 @@ export default {
if (!this.carouselTimer) { if (!this.carouselTimer) {
this.onCarouselTimer(); this.onCarouselTimer();
} }
} else {
clearInterval(this.carouselTimer);
} }
}) })
.finally(() => { .finally(() => {
@ -164,7 +143,7 @@ export default {
this.mainRefHeight = parseInt(this.$refs.mainRef.clientHeight - 24 - 40); this.mainRefHeight = parseInt(this.$refs.mainRef.clientHeight - 24 - 40);
const rowHeight = this.mainRefHeight / (this.showItemNum + 1); const rowHeight = this.mainRefHeight / (this.showItemNum + 1);
this.carouselNav = { this.carouselNav = {
'font-size': `${(rowHeight * 0.33).toFixed(2)}px`, 'font-size': `${(rowHeight * 0.5).toFixed(2)}px`,
'line-height': `${rowHeight.toFixed(2)}px`, 'line-height': `${rowHeight.toFixed(2)}px`,
}; };
this.carouselWrap = { this.carouselWrap = {
@ -173,7 +152,7 @@ export default {
this.carouselItemStyle = { this.carouselItemStyle = {
'line-height': `${rowHeight.toFixed(2)}px`, 'line-height': `${rowHeight.toFixed(2)}px`,
height: `${rowHeight.toFixed(2)}px`, height: `${rowHeight.toFixed(2)}px`,
'font-size': `${(rowHeight * 0.31).toFixed(2)}px`, 'font-size': `${(rowHeight * 0.48).toFixed(2)}px`,
}; };
}, },
onCarouselChange(index) { onCarouselChange(index) {

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

@ -1,6 +1,6 @@
<template> <template>
<section class="waitBox bg-[#F3F2FA]"> <section class="waitBox bg-[#F3F2FA]">
<nav class="h-[11.11vh] pl-[3.7vh] pr-[2.22vh] flex justify-between items-center bg-[#5D49AF] relative"> <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]"> <div class="logBox h-[5vh]">
<img class="h-full" src="@/assets/svg/Wait/logo.png" /> <img class="h-full" src="@/assets/svg/Wait/logo.png" />
</div> </div>
@ -18,11 +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="flex-1 border-r">手术间</div> <div class="w-[16%] border-r">手术间</div>
<div class="flex-1 border-r">患者姓名</div> <div class="w-[20%] border-r">患者姓名</div>
<div class="flex-1 border-r">床号</div> <div class="w-[16%] border-r">床号</div>
<div class="flex-1 border-r">科室</div> <div class="w-[28%] border-r">科室</div>
<div class="flex-1">状态</div> <div class="w-[20%]">状态</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']">
@ -32,12 +32,12 @@
<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="flex-1 border-r text-[#333] truncate">{{ subItem['RoomName'] }}</div> <div class="w-[16%] border-r text-[#333] truncate">{{ subItem['RoomName'] }}</div>
<div class="flex-1 border-r text-[#333] truncate">{{ subItem['PatientName'] }}</div> <div class="w-[20%] border-r text-[#333] truncate">{{ subItem['PatientName'] }}</div>
<div class="flex-1 border-r text-[#333] truncate">{{ subItem['BedNo'] }}</div> <div class="w-[16%] border-r text-[#333] truncate">{{ subItem['BedNo'] }}</div>
<div class="flex-1 border-r text-[#333] truncate">{{ subItem['WardName'] }}</div> <div class="w-[28%] border-r text-[#333] truncate">{{ subItem['DeptName'] }}</div>
<div class="flex-1 text-[#333]" :style="{ color: `${textToColor(statusToTxt(subItem['ProcStatus']))}` }"> <div class="w-[20%] text-[#333]" :style="{ color: `${textWaitToColor(subItem['ProcStatusName'])}` }">
{{ statusToTxt(subItem['ProcStatus']) }} {{ subItem['ProcStatusName'] }}
</div> </div>
</div> </div>
</div> </div>
@ -68,9 +68,9 @@
<script> <script>
import { getAnesPatientList } from '@/api/waitList'; import { getAnesPatientList } from '@/api/waitList';
import { Carousel, CarouselItem, Notification } 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, textWaitToColor } from '@/utils/common';
import Stomp from 'stompjs'; import Stomp from 'stompjs';
const { MQTT_SERVICE, MQTT_USERNAME, MQTT_PASSWORD } = window.globalMQ; const { MQTT_SERVICE, MQTT_USERNAME, MQTT_PASSWORD } = window.globalMQ;
@ -91,31 +91,21 @@ export default {
activeIndex: 0, activeIndex: 0,
getDataTimer: null, getDataTimer: null,
popupMsg: '', popupMsg: '',
synth: window.speechSynthesis,
}; };
}, },
methods: { methods: {
statusToTxt, statusToTxt,
textToColor, textWaitToColor,
onGetPageData() { onGetPageData() {
let today = dayjs().format('YYYY-MM-DD'); let today = dayjs().format('YYYY-MM-DD');
getAnesPatientList({ today = '2024-06-06';
ScheduledDateTime: today, getAnesPatientList(today)
Status: -1,
IsPacu: false,
IsEOperation: false,
IsAnesManage: true,
IsInfect: false,
IsRadiation: false,
IsPostoperativeAnalgesia: false,
IsSurgicalFreezing: false,
IsType: false,
client: null,
})
.then(res => { .then(res => {
this.patientList = []; this.patientList = [];
if (res['Data']['Data']) { if (res['Data']['length']) {
for (let index = 0; index < res['Data']['Data']['AnesPatientLists'].length; index++) { for (let index = 0; index < res['Data'].length; index++) {
const element = res['Data']['Data']['AnesPatientLists'][index]; const element = res['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);
@ -126,6 +116,8 @@ export default {
if (!this.carouselTimer) { if (!this.carouselTimer) {
this.onCarouselTimer(); this.onCarouselTimer();
} }
} else {
clearInterval(this.carouselTimer);
} }
}) })
.finally(() => { .finally(() => {
@ -148,7 +140,7 @@ export default {
this.mainRefHeight = parseInt(this.$refs.mainRef.clientHeight - 24 - 40); this.mainRefHeight = parseInt(this.$refs.mainRef.clientHeight - 24 - 40);
const rowHeight = this.mainRefHeight / (this.showItemNum + 1); const rowHeight = this.mainRefHeight / (this.showItemNum + 1);
this.carouselNav = { this.carouselNav = {
'font-size': `${(rowHeight * 0.43).toFixed(2)}px`, 'font-size': `${(rowHeight * 0.53).toFixed(2)}px`,
'line-height': `${rowHeight.toFixed(2)}px`, 'line-height': `${rowHeight.toFixed(2)}px`,
}; };
this.carouselWrap = { this.carouselWrap = {
@ -156,7 +148,7 @@ export default {
}; };
this.carouselItemStyle = { this.carouselItemStyle = {
'line-height': `${rowHeight.toFixed(2)}px`, 'line-height': `${rowHeight.toFixed(2)}px`,
'font-size': `${(rowHeight * 0.4).toFixed(2)}px`, 'font-size': `${(rowHeight * 0.5).toFixed(2)}px`,
}; };
}, },
onCarouselChange(index) { onCarouselChange(index) {
@ -164,7 +156,7 @@ export default {
}, },
setRabitMQ() { setRabitMQ() {
this.client = Stomp.client(MQTT_SERVICE); this.client = Stomp.client(MQTT_SERVICE);
this.connect(); // this.connect();
}, },
connect: function () { connect: function () {
const headers = { const headers = {
@ -210,6 +202,9 @@ export default {
}, 35000); }, 35000);
window.addEventListener('resize', this.onCalculate); window.addEventListener('resize', this.onCalculate);
this.setRabitMQ(); this.setRabitMQ();
setTimeout(() => {
this.popupMsg = `请0的家属到手术室门口接病人`;
}, 1000);
}); });
}, },
components: { components: {
@ -219,24 +214,23 @@ export default {
watch: { watch: {
popupMsg(newVal) { popupMsg(newVal) {
if (newVal) { if (newVal) {
const h = this.$createElement; // const h = this.$createElement;
Notification({ // Notification({
title: '呼叫患者', // title: '呼叫信息',
message: h('i', { style: 'color: teal;font-size:24px' }, newVal), // message: h('i', { style: 'color: teal;font-size:24px' }, newVal),
duration: 12000, // duration: 12000,
}); // });
if ('speechSynthesis' in window) { // if (this.synth) {
const utterance = new SpeechSynthesisUtterance([newVal, newVal, newVal].join('')); // const utterance = new SpeechSynthesisUtterance([newVal, newVal, newVal].join(''));
utterance.onend = function () { // const voices = synth.getVoices();
Notification.closeAll(); // utterance.onend = function () {
this.newVal = ''; // Notification.closeAll();
}; // this.newVal = '';
window.speechSynthesis.speak(utterance); // };
} else { // window.speechSynthesis.speak(utterance);
alert('您的浏览器不支持语音合成'); // } else {
} // alert('您的浏览器不支持语音合成');
// }
console.log(newVal);
} }
}, },
}, },

Write Preview
Loading…
Cancel
Save