最近遇到一个需求,当监控的指标出现异常的时候,发起语音提示。
前端用的是elementUI + VUEjs,后台用springboot + mybatis。实现的思路是,前端监听某一个指标,当该指标发生变化的时候,调用语音提示功能。代码如下:
data数据:
data () { return { showDetail: false, height: 1, // 1 不可用 0 正常 2运维中 result: [], tableData: [], // 应用异常数量 errCount: 0 }
监听:
// 监听异常发生变化,语音播报 watch: { 'errCount': function () { this.aplayAudio() } }
语音播报的方法:
// 语音播放 aplayAudio () { const audio = document.getElementById('audio') audio.play() }
页面上需要定义一个audio:
<!-- 告警音 --> <audio id="audio" src="/static/audio/130808.wav"/>
tips:
src中是语音资源路径,你可以放在前端项目中的静态资源文件夹里面,引入就可以。