JS实现为报表页面添加提示声音

目录:

1.概述

在对于关键指标实时性要求较高的报表中，需要及时掌握某些关键指标变化、一般采取定时刷新来重新加载值，当某些关键指标值发生较大变化时，需要第一时间给予用户提醒，其中声音警报提示就是常用的一种。

那么如何为报表添加声音提示呢，比如下图中,当总销售额低于8000时，弹出警告窗口，播放警告声音，当点击报警窗口的确定时，停止播放报警声音，而当销售额高于8000时，则不提示。



2.实现思路

首先对需要的关键指标进行取值，判断，利用HTML页面中的bgsound或audio标签来实现播放声音，这里需要对不同的浏览器进行判断，使用不同的播放方法，同时判断指标，如果不需要提示的话还需要清除声音播放。


3.实现过程

3.1  准备声音文件

准备一个mp3声音文件，命名为alarm.mp3,放置在安装目录下的WebReport目录中，如下图


3.2 模板修改

我们以自带的gettingstarted.cpt模板为例，在模板起始位置插入一行，并在A1位置输入公式=E6，如下图


（这里作为示例，在实际使用中，可以将第一行设置为隐藏）
3.3 添加JS代码

为模板添加加载结束事件，我们需要定义一个参数，value,来获取A1单元格中的值，同时添加JS代码


var $alramDiv; //判断报警提示alarmDiv是否存在，如果不存在，则初始化 if($("#alarmDiv").length>0){ $alramDiv=$("#alarmDiv"); } else{ $alramDiv=$('<div id="alarmDiv"></div>').appendTo($(document.body)); } //清空报警对象，防止多次刷新后造成多次播放 $alramDiv.empty(); //判断销售额值，小于8000，提示声音 if(value<8000){ //判断浏览器类型，IE和其他浏览器播放声音不同 if(FR.Browser.isIE()){ //loop="-1"表示声音无限循环，可以指定数字来控制循环次数 $('<bgsound src="alarm.mp3" loop="-1">').appendTo($alramDiv); } else { //loop="true"表示声音无限循环，去掉则播放一次 $('<audio src="alarm.mp3" hidden="true" autoplay="true" loop="true">' ).appendTo($alramDiv); } //弹出警告窗口，确认后停止播放声音 FR.Msg.confirm("警告","销售额低于8000,【确认】报警信息？",function(value){ if(value){ $alramDiv.empty(); } },100); //可以在这里加上模板消息，发送邮件等其他事件，进行报警信息的推送 } else { //当销售额值超过8000时，清空报警对象-alramDiv，即不播放声音 $alramDiv.empty(); }

保存预览后即可看到上面图中效果

注1：本示例取关键指标采取在首行单元格中输入公式的方法，可以进行隐藏，并且建议大家这样做，因为下面的数据是扩展的，如果直接在JS中定义参数，value=E6的话，是获取不到销售总额的值的，只有在第一行中不进行扩展的地方取得下面扩展行的结果，才能保证在JS中正常取值。

注2:除了提示声音，还可以在JS中通过发送邮件，发送平台消息等方法来进行报警信息的推送，实现全方位的信息监控功能。

附件列表


主题：
标签： 暂无标签

文档内容仅供参考，如果你需要获取更多帮助，付费/准付费客户请咨询帆软技术支持
关于技术问题，您还可以前往帆软社区，点击顶部搜索框旁边的提问按钮
若您还有其他非技术类问题，可以联系帆软传说哥（qq：1745114201）