From f908ade63f4b7e4662600887cadcf407fa5924b9 Mon Sep 17 00:00:00 2001 From: eight <641137800@qq.com> Date: 星期六, 14 九月 2024 17:33:56 +0800 Subject: [PATCH] 大屏 布局调整 --- src/views/ecg/callingscreen/bigscreen.vue | 203 +++++++++++++++++++++++++++++--------------------- 1 files changed, 117 insertions(+), 86 deletions(-) diff --git a/src/views/ecg/callingscreen/bigscreen.vue b/src/views/ecg/callingscreen/bigscreen.vue index 98b4cab..14a9d05 100644 --- a/src/views/ecg/callingscreen/bigscreen.vue +++ b/src/views/ecg/callingscreen/bigscreen.vue @@ -1,125 +1,164 @@ <script setup lang="ts"> +import dayjs from 'dayjs' +import {ScreenApi, statusMap, CallingVO} from "@/api/ecg/screen"; + defineOptions({ name: 'bigscreen' }) - const tableData = [{ - date: '2016-05-02', - name: '鐜嬪皬铏�', - address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�' - }, { - date: '2016-05-04', - name: '鐜嬪皬铏�', - address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1517 寮�' - }, { - date: '2016-05-01', - name: '鐜嬪皬铏�', - address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1519 寮�' - }, { - date: '2016-05-03', - name: '鐜嬪皬铏�', - address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1516 寮�' - }] +const listReady = ref<CallingVO[]>([]) // 鍒楄〃鐨勬暟鎹� +const listWaiting = ref<CallingVO[]>([]) // 鍒楄〃鐨勬暟鎹� +const listPassed = ref<CallingVO[]>([]) // - const names = ["Alice", "Bob", "Charlie", "David", "Eve", "Frank", "Grace", - "鐗规湕鏅�", "椹崱榫�", "鏅噾", "绌嗚开鑰佷粰", "鎷滅櫥", "鍗$壒"] - const visibleCount = 5 // 鍙悓鏃舵樉绀虹殑鍚嶅瓧鏁伴噺 - const startIndex = ref<number>(0); +let curSpeakPat : CallingVO | undefined = undefined; +let curSpeakSeqNum : number = 0 +let curWorkDay : Date | undefined = undefined - const visibleNames : string[] = computed(() => { - const endIndex = (startIndex.value + visibleCount) % names.length; - if (endIndex > startIndex.value) { - return names.slice(startIndex.value, endIndex); - } else { - return [...names.slice(startIndex.value), ...names.slice(0, endIndex)]; +const getList = async () => { + const data = await ScreenApi.getBigScreenData() + listReady.value = data[1] + listWaiting.value = data[2] + listPassed.value = data[3] +} + +const startScrolling = () => { + setInterval(() => { + getList(); + if ( curSpeakPat === undefined ) { + initiateSpeak() } - }) + }, 5000); // 姣廥绉掓粴鍔ㄤ竴娆� +} - const startScrolling = () => { - setInterval(() => { - // console.info("...") - startIndex.value = (startIndex.value + visibleCount) % names.length; - }, 3000); // 姣忎袱绉掓粴鍔ㄤ竴娆� +onMounted( () => { + startScrolling() +}) + +const onSpeachEndEvent = async (event) => { + console.log("Speech ended... " + event.currentTarget.text); + await ScreenApi.markCalled(curSpeakPat!.patId) + initiateSpeak() +} + +const getNextSpeak = () => { + if (listReady.value.length === 0) { + return undefined; } - onMounted( () => { - startScrolling() - }) - - const speak = (msg) => { - //const msg = new SpeechSynthesisUtterance(`璇�${this.currentNumber}鍙峰氨璇奰); - const repeatNum = 3 - var speech = new SpeechSynthesisUtterance() - speech.text = msg - speech.pitch = 1 // 鑾峰彇骞惰缃瘽璇殑闊宠皟(0-2 榛樿1锛屽�艰秺澶ц秺灏栭攼,瓒婁綆瓒婁綆娌�) - speech.rate = 0.9 // 鑾峰彇骞惰缃璇濈殑閫熷害(0.1-10 榛樿1锛屽�艰秺澶ц閫熻秺蹇�,瓒婂皬璇�熻秺鎱�) - speech.volume = 100 // 鑾峰彇骞惰缃璇濈殑闊抽噺 - speech.lang = 'zh-CN' // 璁剧疆鎾斁璇█ - // 澧炲姞鎺у埗鎾斁娆℃暟 - let count = 1 - speechSynthesis.speak(speech) - while (count < repeatNum) { - speechSynthesis.speak(speech) - count++ - } + // 澶勭悊姣忓ぉ 鍙嶈浆鐨勬儏鍐� + if ( curWorkDay === undefined) { + curSpeakSeqNum = 0; + curWorkDay = new Date() + } else if (!isSameDate(dayjs(listReady.value[0].bookDate).toDate(), curWorkDay)) { + curSpeakSeqNum = 0; + curWorkDay = dayjs(listReady.value[0].bookDate).toDate() } + + return listReady.value.find( item => item.status === 30 && item.called === 0 && item.seqNum > curSpeakSeqNum) +} + +const initiateSpeak = () => { + const queuePat = getNextSpeak() + if (queuePat !== undefined) { + curSpeakPat = queuePat + curSpeakSeqNum = curSpeakPat.seqNum + speak("璇枫��" + queuePat.patName + "鍒�" + queuePat.roomName + "灏辫瘖"); + } else { + curSpeakPat = undefined + } +} + +const speak = (msg) => { + console.info("speak " + msg); + var speech = new SpeechSynthesisUtterance() + speech.text = msg + "銆傘�傘��" + msg + "銆傘�傘��" + msg + "銆傘�傘��" + speech.pitch = 1 // 鑾峰彇骞惰缃瘽璇殑闊宠皟(0-2 榛樿1锛屽�艰秺澶ц秺灏栭攼,瓒婁綆瓒婁綆娌�) + speech.rate = 0.9 // 鑾峰彇骞惰缃璇濈殑閫熷害(0.1-10 榛樿1锛屽�艰秺澶ц閫熻秺蹇�,瓒婂皬璇�熻秺鎱�) + speech.volume = 100 // 鑾峰彇骞惰缃璇濈殑闊抽噺 + speech.lang = 'zh-CN' // 璁剧疆鎾斁璇█ + + speech.onend = onSpeachEndEvent + speechSynthesis.speak(speech) +} + +const isSameDate = ( date1: Date, date2 : Date) => { + if (date1.getFullYear() === date2.getFullYear() + && date1.getMonth() === date2.getMonth() + && date1.getDate() === date2.getDate()) + return true + else + return false +} </script> <template> - <el-container> - <el-header>Header</el-header> + <el-container style="height: 100%;"> + <el-header>閲戝崕浜烘皯鍖婚櫌</el-header> <el-container> <el-aside width="500px"> <el-table - :data="tableData" + :data="listReady" stripe :show-header="false" - style="width: 100%"> + style="width: 100%; height: 100%; border: solid var(--el-color-primary-light-7); font-size: 18px;"> <el-table-column - prop="date" - label="鏃ユ湡" - width="180"/> + prop="patName" + label="鎮h�呭鍚�" + width="80"/> + <el-table-column label="鐘舵��" align="center" prop="status" width="80"> + <template #default="scope"> + {{ statusMap.get(scope.row.status) }} + </template> + </el-table-column> <el-table-column - prop="name" - label="濮撳悕" - width="180"/> - <el-table-column - prop="address" - label="鍦板潃"/> + prop="roomName" + label="璇婂" + width="120"/> </el-table> </el-aside> <el-container> - <el-main> - <div class="name-scroller"> - <div class="name-box"> - <span v-for="(name, index) in visibleNames" :key="index">{{ name }}</span> - </div> - </div> + <el-main style="padding: 0 0 "> + <el-header height="30px" style="background-color: #98b8e5; line-height: 30px;">绛夊�欏尯</el-header> + <span v-for="(waitingItem, index) in listWaiting" :key="index"> + {{waitingItem.patName + " "}} + </span> </el-main> - <el-footer>Footer</el-footer> + <el-footer height="100px" style="padding: 0 0"> + <el-header height="30px" style="background-color: #98b8e5; line-height: 30px;">杩囧彿鍖�</el-header> + <span v-for="(passedItem, index) in listPassed" :key="index"> + {{passedItem.patName + " "}} + </span> + </el-footer> </el-container> </el-container> - <el-button @click="speak('璇� 鐗规湕鏅� 鍒颁簩鍙疯瘖瀹� 灏辫瘖')" >鍙彿</el-button> + <el-button @click="speak('娆㈣繋浣跨敤')" >娆㈣繋浣跨敤</el-button> </el-container> </template> <style scoped lang="scss"> -.el-header, .el-footer { - background-color: #B3C0D1; +.el-header { + background-color: var(--el-color-primary-light-7); + color: #333; + text-align: center; + line-height: 60px; +} + +.el-footer { + //background-color: var(--el-color-primary-light-7); color: #333; text-align: center; line-height: 60px; } .el-aside { - background-color: #D3DCE6; + background-color: var(--el-color-primary-light-7); color: #333; text-align: center; line-height: 200px; } .el-main { - background-color: #E9EEF3; + //background-color: var(--el-color-primary-light-7); color: #333; text-align: center; line-height: 160px; @@ -129,12 +168,4 @@ margin-bottom: 40px; } -.el-container:nth-child(5) .el-aside, -.el-container:nth-child(6) .el-aside { - line-height: 260px; -} - -.el-container:nth-child(7) .el-aside { - line-height: 320px; -} </style> -- Gitblit v1.9.3