报表块实现跑马灯效果

  • 文档创建者:axing
  • 编辑次数:18次
  • 最近更新:Carly 于 2020-01-06
  • 1. 概述

    1.1 问题描述

    在设计大屏报表块时,希望实现文字跑马灯效果。

    通常大家可以「HTML+JS」的方式实现单行文本的跑马灯效果,方案如下:

    1)以 HTML 实现跑马灯特效

    2)JS 实现跑马灯效果

    那么如何实现整体报表块的跑马灯效果呢?如下图所示:
    222

    1.2 解决思路

    在报表块初始化后,通过 JS 实现隐藏滚动条和跑马灯的效果。

    1)多个报表块同时实现跑马灯效果时,每个报表块可独立暂停。

    2)存在冻结行时,报表块的跑马灯效果不受影响。

    3)安装自定义滚动条时,报表块的跑马灯效果不受影响。

    2. 示例

    2.1 新建模板

    2.1.1 新建数据集

    新建决策报表,新建数据集 ds1 ,SQL 为:SELECT * FROM 销量。如下图所示:

    1578280687814238.png

    2.1.2 设计报表样式

    新建 3 个报表块,样式如下图所示:

    1578281617727262.png

    2.1.3 冻结标题行

    选中报表块 report1,点击编辑,冻结第 1 行,如下图所示:

    1578281901276382.png

    2.2 添加初始化事件

    选中 body 组件,添加初始化事件,如下图所示:

    1578282161443313.png

    JavaScript 代码如下:

    注:本示例代码仅对 report0 和 report1 设置跑马灯效果,用户需根据自身需求设置 reportarray

    注:报表块的名称需要大写,例如示例中的 report0 报表块,需写为 REPORT0

    注:如果报表块加载比较慢没有实现效果,可以适当调整延时函数 setTimeout 的延时时间。

    var reportarray = ["REPORT0", "REPORT1"];
    //根据实际情况设置跑马灯报表块的名称,名称大写。
    window.fobject = {};
    for (i = 0; i < reportarray.length; i++) {
        fobject["flag" + i] = true;
    }
     
    for (i = 0; i < reportarray.length; i++) {
        $("div[widgetname='" + reportarray[i] + "']").ready(function() {
            //function
            var index = i;
            let part;
            var self = '$("div[widgetname="' + reportarray[i] + ']")';
            var name = reportarray[i];
            console.log(name)
            setTimeout(function() {
                if ($('.scrollDiv').length == 0)
                //判断是否安装了自定义滚动条插件
                {
     
                    if ($("div[widgetname=" + name + "]").find(".frozen-center").length == 1)
                    //没安装,报表块有没有设置冻结
                    {
                        part = $("div[widgetname=" + name + "]").find(".frozen-center");
                        //设置了冻结时
                        $("div[widgetname=" + name + "]").find(".frozen-north").css("overflow", "hidden");
                        $("div[widgetname=" + name + "]").find(".frozen-north").css("overflow-y", "hidden");
                    } else {
                        part = $("div[widgetname=" + name + "]").find(".reportContent");
                        //没设置冻结时
                    }
                } else {
     
                    part = $("div[widgetname=" + name + "]").find(".scrollDiv");
                    //如果安装了插件,所有元素都是.scrollDiv
                }
                part.css("overflow", "hidden"); //去除滚动条
                part.css("overflow-x", "hidden");
                part.css("overflow-y", "hidden"); //兼容IE的去除滚动条
                part.mouseover(function() {
                    fobject["flag" + index] = false;
                });
                //鼠标离开,继续滚动 
                part.mouseleave(function() {
                    fobject["flag" + index] = true;
                });
                var old = -1;
                setInterval(function() {
                    if (fobject["flag" + index]) {
                        currentpos = part[0].scrollTop;
                        if (currentpos == old) {
                            part[0].scrollTop = 0;
                        } else {
                            old = currentpos;
                            //以25ms的速度每次滚动1.5PX 
                            part[0].scrollTop = currentpos + 1.5;
                        }
                    }
                }, 25);
            }, 300)
        })
    }

    2.3 效果预览

    保存模板,点击预览,报表块 report0 和 report1 实现跑马灯效果,报表块 report2 不受影响。效果如下图所示:

    1578290303280779.gif

    注:不支持移动端。

    3. 已完成模板

    已完成的模板请参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\03-报表块实现跑马灯效果.frm

    点击下载模板:03-报表块实现跑马灯效果.frm

    附件列表


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