1. 概述
1.1 问题描述
普通报表可以参考 JS实现自动滚屏/跑马灯效果 实现跑马灯效果，决策报表中报表块如何实现下图所示的跑马灯效果呢？
1.2 实现思路
通过给报表块添加「初始化后」 JS 事件实现隐藏滚动条的跑马灯的效果。
1.3 应用实例
复用组件下载后可直接在设计器内安装复用，即可实现文本滚动效果，无需进行代码编辑；
更多跑马灯组件的示例，可参见 帆软市场-组件 / 设计器→在线组件库，组件复用相关文档请参见：组件复用 。
| 组件下载链接 | 描述 | 效果图 |
|---|---|---|
| 纵向文本滚动-机械风 | 1）该组件适用于深色酷炫风格模板 2）文本滚动速度可自行调整，滚动完刷新从头继续滚动 | |
| 滚动明细表a-简约蓝 | 1）该组件适用于浅色简约风格模板 2）明细表中根据部分指标的增减趋势，设置标识提醒，可自行修改条件 | |
2. 示例
2.1 数据准备
新建决策报表，新建数据集 ds1 ，SQL 语句为：SELECT * FROM 销量
2.2 报表设计
1）将报表块report0拖入到 body 组件中，如下图设计报表块的表格。
2）选中报表块report0，点击编辑，冻结第 1 行，如下图所示：
2.3 添加事件
选中报表块report0，添加初始化事件，如下图所示：
JavaScript 代码如下：
if(window.interval){clearInterval(window.interval);} //判断之前是否执行过该代码,如果有,就停止之前的执行
setTimeout(function() {
//隐藏报表块report0的滚动条（此报表块名为report0，根据具体情况修改，且需大写）
$("div[widgetname=REPORT0]").find(".frozen-north").css({
'overflow-x':'hidden',
'overflow-y':'hidden'
});
$("div[widgetname=REPORT0]").find(".frozen-center").css({
'overflow-x':'hidden',
'overflow-y':'hidden'
});
},1000);
window.flag1 = true;
var self1 = this;
//鼠标悬停，滚动停止
setTimeout(function() {
$("div[widgetname=REPORT0]").find(".frozen-center").mouseover(function() {
window.flag1 = false;
});
//鼠标离开，继续滚动
$("div[widgetname=REPORT0]").find(".frozen-center").mouseleave(function() {
window.flag1 = true;
});
var old = -1;
window.interval = setInterval(function() {
if (!self1.isVisible()) {
return;
}
if (window.flag1) {
currentpos1 = $("div[widgetname=REPORT0]").find(".frozen-center")[0].scrollTop;
if (currentpos1 == old && 0!=currentpos1) {
$("div[widgetname=REPORT0]").find(".frozen-center")[0].scrollTop = 0;
} else {
old = currentpos1;
//以25ms的速度每次滚动1.5PX
$("div[widgetname=REPORT0]").find(".frozen-center")[0].scrollTop = currentpos1 + 1.5;
}
}
},
25);
},
1000);
如果要实现从上到下滚动到底后再从下到上滚动，可以参考代码：
if(window.interval){clearInterval(window.interval);}//判断之前是否执行过该代码,如果有,就停止之前的执行
setTimeout(function() {
//隐藏报表块report0的滚动条（此报表块名为report0，根据具体情况修改）
$("div[widgetname=REPORT0]").find(".frozen-north").css({
'overflow-x':'hidden',
'overflow-y':'hidden'
});
$("div[widgetname=REPORT0]").find(".frozen-center").css({
'overflow-x':'hidden',
'overflow-y':'hidden'
});
},1000);
window.flag1 = true;
var self1 = this;
//鼠标悬停，滚动停止
setTimeout(function() {
$("div[widgetname=REPORT0]").find(".frozen-center").mouseover(function() {
window.flag1 = false;
});
//鼠标离开，继续滚动
$("div[widgetname=REPORT0]").find(".frozen-center").mouseleave(function() {
window.flag1 = true;
});
var isDown1 = true;
var camera= $("div[widgetname=REPORT0]").find(".frozen-center")[0];
window.interval = setInterval(function() {
if (!self1.isVisible()) {
return;
}
if (window.flag1) {
if (isDown1) {
camera.scrollTop++; //下降
//如果滚动条超过100的话，就往上
//可以修改这个条件，作为折返的前提
if (camera.scrollTop+camera.clientHeight > camera.scrollHeight-1) {
isDown1 = false;
}
} else {
camera.scrollTop--; //上升
//到达顶部的话，就下降
if (camera.scrollTop == 0) {
isDown1 = true;
}
}
}
},
25);//移动的速度
},
1000);代码支持 IE、谷歌、火狐浏览器，若出现不支持情况，可根据浏览器版本适配内容更改。实际应用时，用户需要自行修改以下几处：
| 修改点 | 注释 |
|---|---|
| $("div[widgetname=REPORT0]") | 用户需要根据报表块的名称修改 REPORT0，报表块的名称需要大写 |
find(".frozen-center") | 根据实际情况修改滚动块元素名称 ： .frozen-center：报表块中存在冻结 .reportContent：报表块中无冻结且未安装自定义滚动条插件 .scrollDiv：报表块中无冻结且安装了自定义滚动条插件 |
| var flag = window.flag0 | 模板中存在多个跑马灯报表块时，依次设置为 flag0，flag1，flag2 等 需保证全局变量各不相同，否则无法实现单个暂停 |
| 25); | 滚动速度，用户可以根据实际情况修改 |
注：如果报表块加载比较慢没有实现效果，可以适当调整延时函数 setTimeout( )的延时时间。
2.4 效果预览
保存报表，点击PC端预览，跑马灯效果如下图所示：
注1：不支持移动端。
注2：不支持报表块定时刷新场景。
注3：如果不安装 自定义滚动条 插件，鼠标移入后不跟随鼠标滚轮移动。
3. 扩展应用
新增一种报表块跑马灯应用场景和设置方法：报表前端展示时，报表块处于隐藏不显示的状态，点击按钮后，报表块可以显示并自动加载跑马灯效果。如下图所示：
3.1 数据准备
新建决策报表，新建数据集 ds1 ，SQL 语句为：SELECT * FROM 销量
3.2 报表设计
1）将报表块report0和按钮控件button0_c拖入到 body 组件中，如下图设计报表块的表格，不勾选控件可见，隐藏报表块。
2）选中报表块组件，点击编辑，冻结第 1 行，如下图所示：
3.3 添加事件
1）选中报表块组件，给报表块添加一个初始化事件，实现跑马灯效果，如下图所示：
JavaScript 代码如下：
注：代码支持 IE、谷歌、火狐浏览器，若出现不支持情况，可根据浏览器版本适配内容更改。实际应用时，用户可根据实际情况调整代码，具体可参考 2.3 节。
if(window.interval){clearInterval(window.interval);} //判断之前是否执行过该代码,如果有,就停止之前的执行
setTimeout(function() {
//隐藏报表块report0的滚动条（此报表块名为report0，根据具体情况修改）
$("div[widgetname=REPORT0]").find(".frozen-north").css({
'overflow-x':'hidden',
'overflow-y':'hidden'
});
$("div[widgetname=REPORT0]").find(".frozen-center").css({
'overflow-x':'hidden',
'overflow-y':'hidden'
});
},1000);
window.flag1 = true;
var self1 = this;
//鼠标悬停，滚动停止
setTimeout(function() {
$("div[widgetname=REPORT0]").find(".frozen-center").mouseover(function() {
window.flag1 = false;
});
//鼠标离开，继续滚动
$("div[widgetname=REPORT0]").find(".frozen-center").mouseleave(function() {
window.flag1 = true;
});
var old = -1;
window.interval = setInterval(function() {
if (!self1.isVisible()) {
return;
}
if (window.flag1) {
currentpos1 = $("div[widgetname=REPORT0]").find(".frozen-center")[0].scrollTop;
if (currentpos1 == old && 0!=currentpos1) {
$("div[widgetname=REPORT0]").find(".frozen-center")[0].scrollTop = 0;
} else {
old = currentpos1;
//以25ms的速度每次滚动1.5PX
$("div[widgetname=REPORT0]").find(".frozen-center")[0].scrollTop = currentpos1 + 1.5;
}
}
},
25);
},
1000);
2）选中按钮组件，给按钮添加一个点击事件，点击之后可以显示被隐藏的报表块，如下图所示：
JavaScript 代码如下：
this.options.form.getWidgetByName('REPORT0').setVisible(true)
3.4 效果预览
保存报表，点击PC端预览，效果如下图所示：
4. 已完成模板
已完成的模板请参见：
%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\03-报表块实现跑马灯效果.frm
%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\报表块跑马灯扩展应用.frm
点击下载模板：