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

1.1 预期效果

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

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

注：此方案不支持报表挂载在「数据决系统」中使用，「数据决系统」中消息提醒可以参考 发送平台消息 来进行报警信息的推送。

1.2 实现思路

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

2.1 准备声音文件

准备一个 mp3 声音文件，命名为 alarm.mp3，放置在安装目录下的webapps\webroot\help目录中，如下图所示：

2.2 准备模板

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

2.3 添加事件

点击模板>模板Web属性>分页预览设置，选择为该模板单独设置，为模板添加加载结束事件，定义一个参数 value = A1 ，同时添加 JavaScript 代码，如下图所示：

JavaScript 代码如下：

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="../../help/alarm.mp3" loop="-1">').appendTo($alramDiv);
} else {
//loop="true"表示声音无限循环，去掉则播放一次  
$('<audio src="../../help/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();
}

2.4 效果预览

保存模板，点击预览，效果如 1.1 预期效果所示。

注：不支持移动端。

Chrome 浏览器中如无法正常播放警告声音，请在浏览器地址栏中输入 chrome://settings/content/sound，打开声音设置。

在允许播放的网页中添加 http://IP:端口/webroot/decision，即可实现自动播放报警声音。如下图所示：