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

  • 文档创建者:yets11
  • 编辑次数:10次
  • 最近更新:Carly 于 2020-02-17
  • 1. 概述

    1.1 预期效果

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

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

    222

    1.2 实现思路

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

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

    2. 示例

    2.1 准备声音文件

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

    222

    2.2 修改模板

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

    222

    注:本示例中,采取在首行单元格中输入公式的方法获取关键指标。由于表格中的数据是扩展的,如果直接在 JavaScript 中定义参数 value = E6 ,无法获取到销售总额的值,只有在第一行中不进行扩展的地方取得下面扩展行的结果,才能保证在 JavaScript 中正常取值。

    2.3 添加加载结束事件

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

    1581919519304204.png

    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 预期效果所示。

    注:不支持移动端。

    3. 注意事项

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

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

    1581920452269905.png


    附件列表


    主题: 二次开发
    • 有帮助
    • 没帮助
    • 只是浏览