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

于 2024-06-25 15:20:15 发布
阅读量217 收藏
点赞数 3
分类专栏： TS + Vue2 文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chabaimgg/article/details/139959874
版权

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>

行走的茶白
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值