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

调整播放速度

Browse Source
main
@0Melon0 12 months ago
parent b76201db4c
commit d19ead7d0f
5 changed files with 138 additions and 51 deletions
Show Stats Download Patch File Download Diff File

1
1.html
Unescape View File

@ -28,7 +28,6 @@
// 添加 onend 事件处理器 // 添加 onend 事件处理器
utterance.onend = function(event) { utterance.onend = function(event) {
console.log('Speech has finished.'); console.log('Speech has finished.');
alert('Speech has finished.');
}; };
window.speechSynthesis.speak(utterance); window.speechSynthesis.speak(utterance);

6
src/router/index.js
Unescape View File

@ -52,6 +52,12 @@ const routes = [
meta: { title: '手术排程' }, meta: { title: '手术排程' },
component: () => import('@/views/scheduleList/index.vue'), component: () => import('@/views/scheduleList/index.vue'),
}, },
{
path: '/melon',
name: 'melon',
meta: { title: '手术排程' },
component: () => import('@/views/pageMelon/index.vue'),
},
]; ];
const router = new VueRouter({ const router = new VueRouter({

65
src/views/pageMelon/index.vue
Unescape View File

@ -0,0 +1,65 @@
<template>
<section></section>
</template>
<script>
export default {
data() {
return {
popupMsg: '',
synth: window.speechSynthesis,
};
},
mounted() {
this.$nextTick(() => {
setTimeout(() => {
this.popupMsg = `请您的家属到手术室门口接病人${Date.now()}`;
}, 1000);
});
},
watch: {
popupMsg(newVal) {
if (newVal) {
console.log(newVal);
this.speakText(newVal);
}
},
},
methods: {
speakText(text) {
if (this.synth) {
// 清除之前的语音合成
this.synth.cancel();
// 等待语音列表加载完成
const checkVoices = () => {
const voices = this.synth.getVoices();
if (voices.length !== 0) {
clearInterval(voicesCheckInterval);
// 创建 SpeechSynthesisUtterance 实例
const utterance = new SpeechSynthesisUtterance(text);
utterance.rate = 0.6;
const selectedVoice = voices.find(voice => voice.lang === 'zh-CN');
if (selectedVoice) {
utterance.voice = selectedVoice;
}
// 添加 onend 事件处理器
utterance.onend = function () {
this.popupMsg = '';
console.log('Speech has finished.');
};
// 播放语音
this.synth.speak(utterance);
}
};
// 定期检查语音列表是否加载完成
const voicesCheckInterval = setInterval(checkVoices, 100);
}
},
},
};
</script>

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

@ -18,13 +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-[7%] border-r">手术间</div> <div class="w-[7%] font-semibold border-r">手术间</div>
<div class="w-[7%] border-r">台次</div> <div class="w-[7%] font-semibold border-r">台次</div>
<div class="w-[8%] border-r truncate">患者姓名</div> <div class="w-[8%] font-semibold border-r truncate">患者姓名</div>
<div class="w-[16%] border-r">科室</div> <div class="w-[16%] font-semibold border-r">科室</div>
<div class="w-[27%] border-r">手术名称</div> <div class="w-[27%] font-semibold border-r">手术名称</div>
<div class="w-[27%] border-r">手术医生</div> <div class="w-[27%] font-semibold border-r">手术医生</div>
<div class="w-[8%]">状态</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,18 +33,18 @@
<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] truncate px-3">{{ subItem['RoomName'] }}</div> <div class="w-[7%] border-r text-[#333] font-semibold truncate px-3">{{ subItem['RoomName'] }}</div>
<div class="w-[7%] border-r text-[#333] truncate px-3">{{ subItem['Sequence'] }}</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] truncate px-3">{{ subItem['PatientName'] }}</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] truncate px-3">{{ subItem['DeptName'] }}</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] px-3"> <div class="w-[27%] border-r text-[#333] font-semibold 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-[27%] border-r text-[#333] px-3 truncate"> <div class="w-[27%] border-r text-[#333] font-semibold px-3 truncate">
<!-- <marquee scrollamount="2" class="text-[#333]" :style="carouselItemStyle">{{ subItem['SurgeonLists'] }}</marquee> --> <!-- <marquee scrollamount="2" class="text-[#333]" :style="carouselItemStyle">{{ subItem['SurgeonLists'] }}</marquee> -->
{{ subItem['SurgeonLists'] }} {{ subItem['SurgeonLists'] }}
</div> </div>
<div class="w-[8%] text-[#333]" :style="{ color: `${textToColor(subItem['ProcStatusName'])}` }"> <div class="w-[8%] font-semibold text-[#333]" :style="{ color: `${textToColor(subItem['ProcStatusName'])}` }">
{{ subItem['ProcStatusName'] }} {{ subItem['ProcStatusName'] }}
</div> </div>
</div> </div>

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

@ -15,14 +15,14 @@
<p class="text-[1.66vh]">{{ formatDate }}</p> <p class="text-[1.66vh]">{{ formatDate }}</p>
</div> </div>
</nav> </nav>
<main class="h-[calc(100vh-18.51vh)] p-[24px] pb-0 relative" 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%-48px)]"> <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%] border-r">手术间</div> <div class="w-[16%] font-semibold border-r">手术间</div>
<div class="w-[20%] border-r">患者姓名</div> <div class="w-[20%] font-semibold border-r">患者姓名</div>
<div class="w-[16%] border-r">床号</div> <div class="w-[16%] font-semibold border-r">床号</div>
<div class="w-[28%] border-r">科室</div> <div class="w-[28%] font-semibold border-r">科室</div>
<div class="w-[20%]">状态</div> <div class="w-[20%] 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']">
@ -32,11 +32,11 @@
<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] truncate">{{ subItem['RoomName'] }}</div> <div class="w-[16%] border-r text-[#333] font-semibold truncate">{{ subItem['RoomName'] }}</div>
<div class="w-[20%] border-r text-[#333] truncate">{{ subItem['PatientName'] }}</div> <div class="w-[20%] border-r text-[#333] font-semibold truncate">{{ subItem['PatientName'] }}</div>
<div class="w-[16%] border-r text-[#333] truncate">{{ subItem['BedNo'] }}</div> <div class="w-[16%] border-r text-[#333] font-semibold truncate">{{ subItem['BedNo'] }}</div>
<div class="w-[28%] border-r text-[#333] truncate">{{ subItem['DeptName'] }}</div> <div class="w-[28%] border-r text-[#333] font-semibold truncate">{{ subItem['DeptName'] }}</div>
<div class="w-[20%] text-[#333]" :style="{ color: `${textWaitToColor(subItem['ProcStatusName'])}` }"> <div class="w-[20%] text-[#333] font-semibold" :style="{ color: `${textWaitToColor(subItem['ProcStatusName'])}` }">
{{ subItem['ProcStatusName'] }} {{ subItem['ProcStatusName'] }}
</div> </div>
</div> </div>
@ -49,13 +49,13 @@
</div> </div>
</div> </div>
<div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex"> <div class="absolute bottom-2 left-1/2 -translate-x-1/2 flex">
<template v-for="(item, index) in patientList"> <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" /> <div class="w-3 h-3 rounded-full bg-[#D8D8D8] mx-1" :class="{ '!bg-[#8C8D92]': index == activeIndex }" :key="index" />
</template> </template>
</div> </div>
</main> </main>
<footer class="h-[7.4vh] flex items-center justify-around bg-[#5D49AF]"> <footer class="h-[7.4vh] flex items-center justify-around bg-[#5D49AF] overflow-hidden">
<div class="flex items-center"> <div class="flex items-center">
<div class="logBox w-[15vh] h-[3.7vh] mr-[1.48vh]"> <div class="logBox w-[15vh] h-[3.7vh] mr-[1.48vh]">
<img class="h-full" src="@/assets/svg/Wait/footText.png" /> <img class="h-full" src="@/assets/svg/Wait/footText.png" />
@ -68,7 +68,7 @@
<script> <script>
import { getAnesPatientList } from '@/api/waitList'; import { getAnesPatientList } from '@/api/waitList';
import { Carousel, CarouselItem } from 'element-ui'; import { Carousel, CarouselItem, Notification } from 'element-ui';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { statusToTxt, textWaitToColor } from '@/utils/common'; import { statusToTxt, textWaitToColor } from '@/utils/common';
import Stomp from 'stompjs'; import Stomp from 'stompjs';
@ -137,7 +137,7 @@ export default {
}, },
onCalculate() { onCalculate() {
// 根据展示数量计算高度 // 根据展示数量计算高度
this.mainRefHeight = parseInt(this.$refs.mainRef.clientHeight - 24 - 40); this.mainRefHeight = parseInt(this.$refs.mainRef.clientHeight - 15 - 40);
const rowHeight = this.mainRefHeight / (this.showItemNum + 1); const rowHeight = this.mainRefHeight / (this.showItemNum + 1);
this.carouselNav = { this.carouselNav = {
'font-size': `${(rowHeight * 0.53).toFixed(2)}px`, 'font-size': `${(rowHeight * 0.53).toFixed(2)}px`,
@ -202,9 +202,9 @@ export default {
}, 35000); }, 35000);
window.addEventListener('resize', this.onCalculate); window.addEventListener('resize', this.onCalculate);
this.setRabitMQ(); this.setRabitMQ();
setTimeout(() => { // setTimeout(() => {
this.popupMsg = `请0的家属到手术室门口接病人`; // this.popupMsg = `请0的家属到手术室门口接病人`;
}, 1000); // }, 1000);
}); });
}, },
components: { components: {
@ -214,23 +214,40 @@ 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 (this.synth) { if (this.synth) {
// const utterance = new SpeechSynthesisUtterance([newVal, newVal, newVal].join('')); console.log(this.synth);
// const voices = synth.getVoices(); const utterance = new SpeechSynthesisUtterance([newVal, newVal, newVal].join(''));
// utterance.onend = function () { utterance.rate = 0.6;
// Notification.closeAll(); const voices = this.synth.getVoices();
// this.newVal = ''; const selectedVoice = voices.find(voice => voice.lang === 'zh-CN');
// }; if (selectedVoice) {
// window.speechSynthesis.speak(utterance); utterance.voice = selectedVoice;
// } else { }
// alert('您的浏览器不支持语音合成');
// } // 添加 onend 事件处理器
utterance.onend = function () {
this.popupMsg = '';
Notification.colseAll();
console.log('Speech has finished.');
};
this.synth.speak(utterance);
// 等待语音列表加载完成
const checkVoices = () => {
if (this.synth.getVoices().length !== 0) {
clearInterval(voicesCheckInterval);
}
};
const voicesCheckInterval = setInterval(checkVoices, 100);
}
} }
}, },
}, },

Write Preview
Loading…
Cancel
Save