<script setup lang="ts">
|
|
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 names = ["Alice", "Bob", "Charlie", "David", "Eve", "Frank", "Grace",
|
"特朗普", "马卡龙", "普金", "穆迪老仙", "拜登", "卡特"]
|
const visibleCount = 5 // 可同时显示的名字数量
|
const startIndex = ref<number>(0);
|
|
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("...")
|
startIndex.value = (startIndex.value + visibleCount) % names.length;
|
}, 3000); // 每两秒滚动一次
|
}
|
|
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++
|
}
|
}
|
|
</script>
|
|
<template>
|
<el-container>
|
<el-header>Header</el-header>
|
<el-container>
|
<el-aside width="500px">
|
<el-table
|
:data="tableData"
|
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="地址"/>
|
</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>
|
<el-footer>Footer</el-footer>
|
</el-container>
|
</el-container>
|
<el-button @click="speak('请 特朗普 到二号诊室 就诊')" >叫号</el-button>
|
</el-container>
|
</template>
|
|
<style scoped lang="scss">
|
.el-header, .el-footer {
|
background-color: #B3C0D1;
|
color: #333;
|
text-align: center;
|
line-height: 60px;
|
}
|
|
.el-aside {
|
background-color: #D3DCE6;
|
color: #333;
|
text-align: center;
|
line-height: 200px;
|
}
|
|
.el-main {
|
background-color: #E9EEF3;
|
color: #333;
|
text-align: center;
|
line-height: 160px;
|
}
|
|
body > .el-container {
|
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>
|
