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 = true await this.$nextTick() // 播放声音 await this.playVoice() } //播放声音 private async playVoice() { // 四秒后播放一次声音 this.handleSpeak(this.callTextInfo) await setTimeout(() => { this.handleSpeak(this.callTextInfo) }, 4000) // 播放声音十秒后关闭 await setTimeout(() => { this.customerDialogVisible = false this.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 = null
deactivated() {
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 = false
mounted() {}
// 车牌号
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 = true
await this.$nextTick()
// 播放声音
await this.playVoice()
}
//播放声音
private async playVoice() {
// 四秒后播放一次声音
this.handleSpeak(this.callTextInfo)
await setTimeout(() => {
this.handleSpeak(this.callTextInfo)
}, 4000)
// 播放声音六秒后刷新显示数据,两秒后获取新的需要播放的数据
await setTimeout(() => {
this.customerDialogVisible = false
this.onSure(null)
}, 10000)
}
//刷新
@Emit('onSure')
private onSure(row: any) {}
// 语音播报的函数
private handleSpeak(text) {
msg.text = text // 文字内容: 小朋友,你是否有很多问号
msg.lang = 'zh-CN' // 使用的语言:中文
msg.volume = 1 // 声音音量:1
msg.rate = 1 // 语速:1
msg.pitch = 1 // 音高:1
synth.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>