当前位置: 首页 > news >正文

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>

相关文章:

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

1.父组件写法 初始化&#xff1a; //引入子组件 <odialog ref"odialogRef" onSure"onSurea"></odialog> //子传父private onSurea() {// 初始化信息/重新叫号来的数据this.initTabelData()setTimeout(() > {// 播放声音的数据this.search…...

28、架构-边界:微服务的粒度

微服务的粒度 在设计微服务架构时&#xff0c;确定微服务的粒度是一个关键问题。粒度过大或过小都会带来不同的问题&#xff0c;因此需要找到合理的粒度来划分微服务。下面详细探讨微服务粒度的合理范围及其影响因素。 1. 微服务粒度的上下界 微服务的粒度不应该只有唯一正确…...

开源API网关-ApacheShenYu首次按照启动遇到的问题

一.背景 公司有API网关产品需求&#xff0c;希望有图形化的后台管理功能。看到了ApacheShenYu&#xff0c;作为Apache的顶级项目&#xff0c;直接认可了。首先&#xff0c;感谢各位大神的付出&#xff0c;初步看这个项目是国内大厂中的大神创立的&#xff0c;在此表示膜拜&…...

uniapp获取证书秘钥、Android App备案获取公钥、签名MD5值

一、 uniapp获取证书秘钥 打开uniapp开发者中心下载证书打开cmd输入以下这段代码&#xff0c;下载提供查看到的密钥证书密码就可以了&#xff01;下载证书在 java 环境下运行才可以 // your_alias 换成 证书详情中的别名&#xff0c;your_keystore.keystore 改成自己的证书文件…...

QT 如何储存多种数据类型(QVariant )

QVariant 是 Qt 框架中用于存储各种数据类型的类。它提供了一个强大的类型系统&#xff0c;允许你在运行时存储和检索多种类型的数据&#xff0c;而不需要在编译时确定类型。QVariant 的主要优点在于它的灵活性和通用性&#xff0c;这使得它在 Qt 的很多组件和机制中都被广泛使…...

持续总结中!2024年面试必问的操作系统面试题(九)

上一篇地址&#xff1a;持续总结中&#xff01;2024年面试必问的操作系统面试题&#xff08;八&#xff09;-CSDN博客 十七、解释什么是操作系统的安全性和它的重要性。 操作系统的安全性&#xff08;Operating System Security&#xff09;是指操作系统采取的一系列措施来保…...

操作系统入门 -- 文件管理

操作系统入门 – 文件管理 1.文件管理概述 1.1 文件系统基本功能 目前&#xff0c;计算机内存的容量依然有限&#xff0c;并且其特性决定了数据无法长时间保存&#xff0c;因此把执行的数据以文件形式保存在外存中&#xff0c;等到需要使用时再调入内存。所以&#xff0c;操…...

由浅入深,走进深度学习(2)

今天分享的学习内容主要就是神经网络里面的知识啦&#xff0c;用到的框架就是torch 在这里我也是对自己做一个学习记录&#xff0c;如果不符合大家的口味&#xff0c;大家划走就可以啦 可能没有什么文字或者原理上的讲解&#xff0c;基本上都是代码&#xff0c;但是我还是想说…...

【Python Tips】创建自己的函数包并安装进Anaconda,像引入标准包一样直接import导入

目录 一、引言 二、方法步骤 步骤一&#xff1a;创建包目录结构 步骤二&#xff1a;配置__init__.py文件 步骤三&#xff1a;文件夹外配置setup.py文件 步骤四&#xff1a;终端Pip安装 三、结尾 一、引言 在编写项目代码的时候&#xff0c;有些自定义功能的函数是可以复用的。…...

【Python机器学习实战】 | 基于支持向量机(Support Vector Machine, SVM)进行分类和回归任务分析

&#x1f3a9; 欢迎来到技术探索的奇幻世界&#x1f468;‍&#x1f4bb; &#x1f4dc; 个人主页&#xff1a;一伦明悦-CSDN博客 ✍&#x1f3fb; 作者简介&#xff1a; C软件开发、Python机器学习爱好者 &#x1f5e3;️ 互动与支持&#xff1a;&#x1f4ac;评论 &…...

备份和还原

stai和dnta snat&#xff1a;源地址转换 内网---外网 内网ip转换成可以访问外网的ip 内网的多个主机可以使用一个有效的公网ip地址访问外部网络 DNAT&#xff1a;目的地址转发 外部用户&#xff0c;可以通过一个公网地址访问服务内部的私网服务。 私网的ip和公网ip做一个…...

Java数组的初始化方法

Java数组的初始化方法 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;在Java编程中&#xff0c;数组是一种非常基础也非常重要的数据结构&#xff0c;它能够存储…...

通过分离有色和无色pdf页面减少打印费

前言 该工具是我认识的一位中科大的大佬在本科毕业的时候做的一个小工具&#xff0c;去打印店打印全彩的毕业论文的话会比较贵&#xff0c;他想到有没有一种方案可以实现有彩色页面的pdf和没有彩色页面的pdf分开打印&#xff0c;前者打印彩色&#xff0c;后者打印黑白&#xf…...

c语言--指针

前言 欢迎来到我的博客 个人主页:北岭敲键盘的荒漠猫-CSDN博客 本文整理c语言中指针的相关知识点。 指针概念 指针存储的就是数据的地址。 直观理解: 李华家是北洋路130号1单元101 用变量处理数据: 我们去李华家拿数据。 用指针处理数据: 我们去北洋路130号1单元101拿数据…...

python-九九乘法表(对齐式1)

[题目描述] 输出九九乘法表&#xff0c;输出格式见样例。输入格式&#xff1a; 无输出格式&#xff1a; 输出乘法表&#xff0c;对齐方式见样例输出。样例输入 无样例输出 来源/分类&#xff08;难度系数&#xff1a;一星&#xff09; 完整代码展示&#xff1a; #对齐式1 a[] …...

thinkphp单独为某个接口设置缓存

参考 官方文档 $this->request->cache(__URL__,600);只需要在接口方法的开头添加这个代码即可...

OpenCV视觉--视频人脸微笑检测(超详细,附带检测资源)

目录 概述 具体实现 1.加载分类器 2.打开摄像头并识别人脸 3.处理人脸并检测是否微笑 效果 总结 概述 OpenCV&#xff08;Open Source Computer Vision Library&#xff09;是一个开源的计算机视觉和机器学习库&#xff0c;广泛应用于图像处理和视频分析等领…...

docker 搭建 AI大数据模型 --- 使用GPU

docker 搭建 AI大数据模型 — 使用GPU方式 搭建本地大模型&#xff0c;最简单的方法&#xff01;效果直逼GPT 服务器GPU系统HP580 G8P40Rocky9.2 安装程序AnythingLLM前端界面Open WebUIChatOllamaollama 一、AnythingLLM 介绍 AnythingLLM 是 Mintplex Labs Inc. 开发的一…...

面向对象, 常用类, 集合, 异常, JDBC, mysql数据库 复习

1.面向对象 &#xff08;1&#xff09;面向过程和面向对象 ● 面向过程的程序设计思想 &#xff08;procedure -Oriented Programming)&#xff0c;简称POP ● 关注的焦点是过程&#xff1a;过程就是操作数据的步骤。如果某个过程的实现代码重复出 现&#xff0c;那么就可…...

js取数组最大值之Math.max、Math.max.apply

js取数组最大值之Math.max、Math.max.apply Math.maxMath.max.applyapply()第一个参数为什么可以是null 最小值同理 Math.max Math.max(n1,n2,n3,…,nX) 支持传递多个参数&#xff0c;带有较大的值的那个数 Math.max(2,5,3,6,2,4,2,15,9,6,0,1)Math.max.apply apply() 语法&a…...

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

linux 错误码总结

1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

多模态图像修复系统:基于深度学习的图片修复实现

多模态图像修复系统:基于深度学习的图片修复实现 1. 系统概述 本系统使用多模态大模型(Stable Diffusion Inpainting)实现图像修复功能,结合文本描述和图片输入,对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...

4. TypeScript 类型推断与类型组合

一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式&#xff0c;自动确定它们的类型。 这一特性减少了显式类型注解的需要&#xff0c;在保持类型安全的同时简化了代码。通过分析上下文和初始值&#xff0c;TypeSc…...

安卓基础(Java 和 Gradle 版本)

1. 设置项目的 JDK 版本 方法1&#xff1a;通过 Project Structure File → Project Structure... (或按 CtrlAltShiftS) 左侧选择 SDK Location 在 Gradle Settings 部分&#xff0c;设置 Gradle JDK 方法2&#xff1a;通过 Settings File → Settings... (或 CtrlAltS)…...

DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态

前言 在人工智能技术飞速发展的今天&#xff0c;深度学习与大模型技术已成为推动行业变革的核心驱动力&#xff0c;而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心&#xff0c;系统性地呈现了两部深度技术著作的精华&#xff1a;…...