vue2+TS获取到数据后自动叫号写法

1.父组件写法

初始化：

//引入子组件  
<odialog ref="odialogRef" @onSure="onSurea"></odialog>
//子传父private onSurea() {// 初始化信息/重新叫号来的数据this.initTabelData()setTimeout(() => {// 播放声音的数据this.searchCallInfo()}, 2000)}activated() {// 初始化信息/重新叫号来的数据this.initTabelData()// 播放声音的数据this.searchCallInfo()}// 一开始进入的时候激活一下，表格的数据private async initTabelData() {let res = await getCallInfo()this.tableData = res}// 一开始进入的时候激活一下private async searchCallInfo() {try {//需要播报的文字数据let res = await getALLCallText()// 如果有数据if (res.data !== '') {clearTimeout(this.timer)// 打开弹窗播放数据;(this.$refs.odialogRef as any).openDialog(res)} else {// 如果没有数据，5秒后获取一次表格所有数据this.timer = setTimeout(() => {this.initTabelData()console.log('(((((((((((((((((((((((((((((获取数据)))))))))))))))))))))))))))))')// 播放声音的数据this.searchCallInfo()}, 10000)}} catch (error) {this.$message({message: error,type: 'error'})}}

 2.子组件写法

template写法：

<template><el-dialog :show-close="false" title="叫号显示" :visible.sync="customerDialogVisible" top="200px" width="40%" center :close-on-click-modal="false"destroy-on-close append-to-body><div class="details"><div style="font-size:50px" @click="playVoice" id="playVoiceButton">{{carName}}</div><div style="font-size:50px" @click="playVoice" id="playVoiceButton">{{detail}}</div><!-- <div v-else>没有叫号数据！</div> --><!-- <div style="font-size:50px" v-if="this.text==''">没有叫号数据！</div> --></div></el-dialog></template>

方法：

  // 车牌号private carName: string = ''// 鹤位地点private detail: string = ''//   dialog打开后携带需要播报的数据private async openDialog(data) {this.callTextInfo = data// 截取文字let str = data.split(' ')this.detail = str[str.length - 1]this.carName = str[str.length - 3]this.customerDialogVisible = trueawait this.$nextTick()// 播放声音await this.playVoice()}//播放声音private async playVoice() {// 四秒后播放一次声音this.handleSpeak(this.callTextInfo)await setTimeout(() => {this.handleSpeak(this.callTextInfo)}, 4000)// 播放声音十秒后关闭await setTimeout(() => {this.customerDialogVisible = falsethis.onSure(null)}, 10000)}//刷新@Emit('onSure')private onSure(row: any) {}

 

3.全部写法：

//父组件：
<template><div class="fullScreenBox"><!-- <el-button type="primary" v-if="fullScreenSwitch" @click="fullScreenFn">全 屏</el-button><el-button type="primary" v-else @click="goBack">退 出</el-button> --><xTable ref="xtable" :tableData="tableData" :tablePage="tablePage" :showSearchBox="false" :isShowPage="false" :showOperationBtn="true" :tableConfigure="tableConfigure" :showClearSearchInfoBtn="false"><template #optionBtns><div class="operationBtnBox"><el-row><el-button type="primary" v-if="fullScreenSwitch" @click="fullScreenFn"><div><p style="color:#fff">全 屏</p></div></el-button><el-button type="primary" v-else @click="goBack"><div><p style="color:#fff">退 出</p></div></el-button></el-row></div></template><template v-slot:columns><vxe-column type="seq" width="50px" align="center"></vxe-column><vxe-column field="carNumber" title="车牌号" width="6.6%" align="center"></vxe-column><vxe-column field="driverName" title="驾驶员姓名" width="6.6%" align="center"></vxe-column><vxe-column field="pickUpNo" title="提货单号" width="6.6%" align="center"></vxe-column><vxe-column field="createTime" title="入场时间" width="6.6%" align="center"></vxe-column><vxe-column field="equDao" title="岛" width="6.6%" align="center"></vxe-column><vxe-column field="equName" title="鹤位名称" width="6.6%" align="center"></vxe-column><vxe-column field="state" title="状态" width="6.6%" align="center"></vxe-column></template></xTable><odialog ref="odialogRef" @onSure="onSurea"></odialog></div>
</template><script lang="ts">
import { Component, Prop, Vue, Emit, Watch } from 'vue-property-decorator'
import PageBase from '@src/views/PageBase'
import { Route } from 'vue-router'
import { getCallInfo, getALLCallText } from '../../../deliverPetroleum_apis/index_api'
import odialog from './opendialog.vue'
import dateRangePicker from '@src/components/TimePickr/dateRangePicker.vue'
import moment from 'moment'
import xTable from '@src/components/TableBase/baseTable.vue'
/***贮运厂总览 */
@Component({// previewDialog,components: { xTable, dateRangePicker, odialog },name: 'mapView'
})
export default class Index extends PageBase {mounted() {// this.time()}activated() {// 初始化信息/重新叫号来的数据this.initTabelData()// 播放声音的数据this.searchCallInfo()}private timer: any = nulldeactivated() {clearTimeout(this.timer)}// private async searchCallInfo() {//   try {//     let res = await getALLCallText()//     // 如果有数据//     if (res) {//       // clearTimeout(this.timer)//       // 打开弹窗播放数据//       ;(this.$refs.odialogRef as any).openDialog(res)//     } else {//       // // 如果没有数据，每隔十秒获取一次所有数据//       // this.timer = setTimeout(() => {//       //   this.initTabelData()//       //   // 播放声音的数据//       //   this.searchCallInfo()//       // }, 10000)//     }//   } catch (error) {//     this.$message({//       message: error,//       type: 'error'//     })//   }// }private fullScreenSwitch: boolean = true// 全屏private async fullScreenFn() {$('.fullScreenBox').css({ position: 'fixed', top: '0px', left: '0px' })this.fullScreenSwitch = !this.fullScreenSwitch}private async goBack() {$('.fullScreenBox').css({ position: 'relative' })this.fullScreenSwitch = !this.fullScreenSwitch}// 一开始进入的时候激活一下private async initTabelData() {let res = await getCallInfo()this.tableData = res// 处理一下状态this.tableData.forEach((item1) => {this.options.forEach((item2) => {if (item1.state == item2.value) {item1.state = item2.label}})})}// 一开始进入的时候激活一下private async searchCallInfo() {try {let res = await getALLCallText()// 如果有数据if (res.data !== '') {clearTimeout(this.timer)// 打开弹窗播放数据;(this.$refs.odialogRef as any).openDialog(res)} else {// 如果没有数据，5秒后获取一次所有数据this.timer = setTimeout(() => {this.initTabelData()console.log('(((((((((((((((((((((((((((((获取数据)))))))))))))))))))))))))))))')// 播放声音的数据this.searchCallInfo()}, 10000)}} catch (error) {this.$message({message: error,type: 'error'})}}private tablePage: any = {total: 0,currentPage: 1,pageSize: 10}private onSurea() {// 初始化信息/重新叫号来的数据this.initTabelData()setTimeout(() => {// 播放声音的数据this.searchCallInfo()}, 2000)}private tableData: any[] = []private printName: string = ''private tableConfigure: any = {tableTitle: '叫号信息',imgSrc: 'queuing'}private queryCondition: any = {time: [moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),moment(new Date()).add(1, 'days').format('YYYY-MM-DD HH:mm:ss')],carNumber: '',start: '全部'}private options: any[] = [{value: '全部',label: '全部'},{value: 2,label: '已入库'},{value: 0,label: '待呼叫'},{value: 1,label: '呼叫中'},{value: -1,label: '已取消'}]//  初始化数据
}
</script>
<style lang="less" scoped>
/deep/.vxe-table--body-wrapper.body--wrapper {height: calc(95% - 0px);
}
/deep/span.span_button {cursor: pointer;text-decoration: underline;color: var(--lyl_addBtnAndLogoColor) !important;
}
/deep/.input-box.el-row {padding-left: 1%;
}
/deep/.table-box {height: calc(100% - 44px) !important;
}
/deep/.el-col.el-col-8 {padding-left: 20px;
}
.fullScreenBox {height: 100%;width: 100%;
}
</style>

//子组件
<template><el-dialog :show-close="false" title="叫号显示" :visible.sync="customerDialogVisible" top="200px" width="40%" center :close-on-click-modal="false"destroy-on-close append-to-body><div class="details"><div style="font-size:50px" @click="playVoice" id="playVoiceButton">{{carName}}</div><div style="font-size:50px" @click="playVoice" id="playVoiceButton">{{detail}}</div><!-- <div v-else>没有叫号数据！</div> --><!-- <div style="font-size:50px" v-if="this.text==''">没有叫号数据！</div> --></div></el-dialog></template>
<script lang="ts">
import { Component, Prop, Vue, Emit, Watch } from 'vue-property-decorator'
import PageBase from '@src/views/PageBase'
import { Route } from 'vue-router'
import dialog from './dialog.vue'
import dateRangePicker from '@src/components/TimePickr/dateRangePicker.vue'
import moment from 'moment'
import xTable from '@src/components/TableBase/baseTable.vue'
// import { setInterval } from 'timers/promises'
const synth = window.speechSynthesis
const msg = new SpeechSynthesisUtterance()
/***贮运厂总览 */
@Component({// previewDialog,components: { xTable, dateRangePicker }
})
export default class Index extends PageBase {// dialog开关private customerDialogVisible: boolean = falsemounted() {}// 车牌号private carName: string = ''// 鹤位地点private detail: string = ''// 呼叫文本信息private callTextInfo: string = ''//   dialog打开后携带需要播报的数据private async openDialog(data) {this.callTextInfo = data// 一打开弹窗获得的数据// await this.getALLCallText()// 截取文字let str = data.split(' ')this.detail = str[str.length - 1]this.carName = str[str.length - 3]this.customerDialogVisible = trueawait this.$nextTick()// 播放声音await this.playVoice()}//播放声音private async playVoice() {// 四秒后播放一次声音this.handleSpeak(this.callTextInfo)await setTimeout(() => {this.handleSpeak(this.callTextInfo)}, 4000)// 播放声音六秒后刷新显示数据，两秒后获取新的需要播放的数据await setTimeout(() => {this.customerDialogVisible = falsethis.onSure(null)}, 10000)}//刷新@Emit('onSure')private onSure(row: any) {}// 语音播报的函数private handleSpeak(text) {msg.text = text // 文字内容: 小朋友，你是否有很多问号msg.lang = 'zh-CN' // 使用的语言:中文msg.volume = 1 // 声音音量：1msg.rate = 1 // 语速：1msg.pitch = 1 // 音高：1synth.speak(msg) // 播放}
}
</script>
<style lang="less" scoped>
/deep/ .el-dialog--center .el-dialog__body {text-align: initial;padding: 25px 25px 30px;height: 30%;
}
.details {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}
</style>