历史版本8 :JS实现为报表页面添加提示声音 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 描述编辑


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

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

222

2. 思路编辑


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


3. 操作步骤编辑



3.1  准备声音文件

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

222

3.2 模板修改

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


222

注:这里作为示例,在实际使用中,可以将第一行设置为隐藏。

3.3 添加JavaScript代码

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

222

代码如下:

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();
}

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

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

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