1.1 问题描述

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

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

1）以 HTML 实现跑马灯特效

2）JS 实现跑马灯效果

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

1.2 解决思路

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

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

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

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

2.1 新建模板

2.1.1 新建数据集

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

2.1.2 设计报表样式

新建 3 个报表块，样式如下图所示：

2.1.3 冻结标题行

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

2.2 添加初始化事件

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

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 不受影响。效果如下图所示：

注：不支持移动端。

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

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