| | |
| | | <script setup lang="ts"> |
| | | |
| | | 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); |
| | | const getList = async () => { |
| | | const data = await ScreenApi.getBigScreenData() |
| | | listReady.value = data[1] |
| | | listWaiting.value = data[2] |
| | | listPassed.value = data[3] |
| | | } |
| | | |
| | | 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 startScrolling = () => { |
| | | setInterval(() => { |
| | | // console.info("...") |
| | | getList(); |
| | | }, 3000); // æ¯ä¸¤ç§æ»å¨ä¸æ¬¡ |
| | | } |
| | | |
| | | const startScrolling = () => { |
| | | setInterval(() => { |
| | | // console.info("...") |
| | | startIndex.value = (startIndex.value + visibleCount) % names.length; |
| | | }, 3000); // æ¯ä¸¤ç§æ»å¨ä¸æ¬¡ |
| | | } |
| | | onMounted( () => { |
| | | startScrolling() |
| | | }) |
| | | |
| | | 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' // è®¾ç½®ææ¾è¯è¨ |
| | | |
| | | 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 |
| | | utterance.onend = function() { |
| | | console.log("Speech ended"); |
| | | }; |
| | | |
| | | // å¢å æ§å¶ææ¾æ¬¡æ° |
| | | let count = 1 |
| | | speechSynthesis.speak(speech) |
| | | while (count < repeatNum) { |
| | | speechSynthesis.speak(speech) |
| | | while (count < repeatNum) { |
| | | speechSynthesis.speak(speech) |
| | | count++ |
| | | } |
| | | count++ |
| | | } |
| | | } |
| | | |
| | | </script> |
| | | |
| | |
| | | <el-container> |
| | | <el-aside width="500px"> |
| | | <el-table |
| | | :data="tableData" |
| | | :data="listReady" |
| | | stripe |
| | | :show-header="false" |
| | | style="width: 100%"> |
| | | <el-table-column |
| | | prop="date" |
| | | label="æ¥æ" |
| | | width="180"/> |
| | | <el-table-column |
| | | prop="name" |
| | | label="å§å" |
| | | width="180"/> |
| | | <el-table-column |
| | | prop="address" |
| | | label="å°å"/> |
| | | prop="patName" |
| | | label="æ£è
å§å" |
| | | 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> |
| | | </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-table |
| | | :data="listWaiting" |
| | | stripe |
| | | :show-header="false" |
| | | style="width: 100%"> |
| | | <el-table-column |
| | | prop="patName" |
| | | label="æ£è
å§å" |
| | | 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> |
| | | </el-main> |
| | | <el-footer>Footer</el-footer> |
| | | <el-footer> |
| | | <el-table |
| | | :data="listPassed" |
| | | stripe |
| | | :show-header="false" |
| | | style="width: 100%"> |
| | | <el-table-column |
| | | prop="patName" |
| | | label="æ£è
å§å" |
| | | 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> |
| | | </el-footer> |
| | | </el-container> |
| | | </el-container> |
| | | <el-button @click="speak('请 ç¹ææ® å°äºå·è¯å®¤ å°±è¯')" >å«å·</el-button> |