1. 概述编辑
1.1 预期效果
使用 FineBI 实时数据直连数据库的用户经常会将 FineBI 的 dashboard 用作大屏展示,因此常常会需要将仪表板进行定时刷新,FineBI 提供了实现仪表板自动的定时刷新功能,能够实现单个仪表板、多个仪表板板和单个组件的自动定时刷新。
仪表板定时刷新效果,如下图所示:
单个组件定时刷新效果,如下图所示:
1.2 实现思路
1)创建 JS 文件。
2)将创建好的 refresh.js 文件放至 FineBI 安装目录%FineBI%/webapps/webroot中。
3)调用 JS 文件。
2. 单个仪表板定时刷新编辑
2.1 创建 JS 文件
1)仪表板的定时刷新通过定制的 JS 来实现,复制如下代码创建 refresh.js 文件。
setTimeout(function () {
var b =document.title;
var a =BI.designConfigure.reportId;//获取仪表板id
//对仪表板id进行判断,实现指定仪表板刷新
if (a=="7193a5c87fbb4915b8893e07a0c6759c") {
setInterval(function () {
BI.SharingPool.put("controlFilters", BI.Utils.getControlCalculations());
//Data.SharingPool.put("controlFilters", BI.Utils.getControlCalculations());
BI.Utils.broadcastAllWidgets2Refresh(true);
}, 3000);//3000为定时刷新的频率,单位ms
}
}, 2000)
其中在对仪表板 ID 进行判断时,需要修改判断条件为自身需要刷新的仪表板 ID;且 3000 为定时刷新的间隔时间,也可根据自身需要进行修改。
2)仪表板 ID 可直接通过编辑仪表板时的链接地址获取,比如新建仪表板时的链接地址为http://localhost:37799/webroot/decision/v5/design/report/7193a5c87fbb4915b8893e07a0c6759c/edit,则该仪表板 ID 为7193a5c87fbb4915b8893e07a0c6759c,如下图所示:
获取后,在判断 ID 处修改a=="仪表板ID"。
3)关闭 FineBI 。
4)将创建好的 refresh.js 文件放至 FineBI 安装目录%FineBI%/webapps/webroot中,如下图所示:
2.2 调用 JS文件
1)在%FineBI%/webapps/webroot/WEB_INF/lib下的 fine-bi-adapter-5.0.jar( 5.1 版本为 fine-bi-adapter-5.1.jar )中找到show.html,如下图所示:
2)在该 HTML 文件中插入下面的代码调用之前新建的 refresh.js 文件,如下图所示:
<!-- 增加刷新功能 -->
<script type="text/javascript" src="/webroot/refresh.js"></script>
修改完成后保存至该 JAR 包中。
2.3 效果查看
1)配置完成后启动 FineBI ,在该仪表板预览页面中按 F12 查看网页源代码判断 JS 是否加载成功。仪表板成功加载了定时刷新的 JS 。如下图所示:
注:若在 JS 里面改频率的话,修改完文件保存之后,清除浏览器缓存就可以,不需要重启 FineBI 。
2)仪表板效果请参见本章 1.1 节。
3. 多个仪表板定时刷新编辑
多个仪表板定时刷新的与单个仪表板的操作步骤大体相似,那么具体应该怎么操作呢?下面我们来详细介绍一下。
3.1 创建JS文件
1)创建 refresh.js 文件,内容与本章 2.1 节一致,仅在判断仪表板 ID 的地方,填入需要设置的多个仪表板的 ID 判断。
setTimeout(function () {
var b =document.title;
var a =BI.designConfigure.reportId;//获取仪表板id //对仪表板id进行判断,实现指定模板刷新
if (a=="d5405b13bfeb454081be9627a9cfc97f" || a=="e1dcb1a61d6947e1adedced59bde9533") {
setInterval(function () {
BI.SharingPool.put("controlFilters", BI.Utils.getControlCalculations());
//Data.SharingPool.put("controlFilters", BI.Utils.getControlCalculations());
BI.Utils.broadcastAllWidgets2Refresh(true);
}, 3000);//3000为定时刷新的频率,单位ms
}
}, 2000);
比如上述代码中,设置的即为“d5405b13bfeb454081be9627a9cfc97f”和"e1dcb1a61d6947e1adedced59bde9533"两个仪表板的 ID 判断,还想增加的话,在判断 ID 处继续加入|| a=="模板ID"的条件即可。
3)仪表板 ID 可直接通过编辑仪表板时的链接地址获取。
4)关闭 FineBI 。
5)将 refresh.js 文件放入%FineBI%/webapps/webroot下。详情参见本章 2.1 节。
3.2 调用 JS 文件
1)修改fine-bi-adapter-5.0.jar(或者 fine-bi-adapter-5.1.jar )中的 show.html,增加如下代码:
<!-- 增加刷新功能 -->
<script type="text/javascript" src="/webroot/refresh.js"></script>
保存至该 JAR 包。
2)此时,查看设置的多个仪表板,每个都会实现定时刷新。详情请参见本章 2.2 节。
3.3 效果查看
1)若查看仪表板的网页源代码,每个仪表板都会增加定时刷新的 JS 。详情请参见本章 2.3 节。
2)仪表板效果请参见本章 1.1 节。
4. 单个组件定时刷新编辑
若想要在仪表板展示时,对某个组件的数据进行定时刷新,可参考如下操作步骤。
4.1 创建 JS 文件
1)获取定时刷新组件的 ID 值在仪表板编辑页面按 F12打开浏览器控制台,选择 Console 页面,输入 BI.designModel.widgets ,回车,点击...获取所有的组件信息,点击组件 ID 后...获取该组件的详细信息,如下图所示:
点击下拉框,此时可以根据组件 ID 下方的 name 获取找到需要设置定时刷新的组件,获取该组件的 KEY 值。本示例对未命名组件 1 进行定时刷新, ID 为f83b0b5ec717bf18,如下图所示:
2)获取组件所在仪表板 ID 。
从路径中获取该仪表板 ID 为7193a5c87fbb4915b8893e07a0c6759c,如下图所示:
详情请参见本章 2.1 节。
3)创建 refresh.js 文件。
文件内容如下所示:
setTimeout(function () {
var b =document.title;
var a =BI.designConfigure.reportId;//获取仪表板id //对仪表板id进行判断,实现指定仪表板刷新
if (a=="fdcc1cb3b96445fcba18fdf27684740b") {
setInterval(function () {
BI.Broadcasts.send(BICst.BROADCAST.REFRESH_PREFIX + "b07e0e200514dfcb"); //刷新指定组件
}, 3000);
//3000为定时刷新的频率,单位ms
}
}, 2000);
与模板定时刷新 JS 相比,增加了指定组件的判断。对模板 ID 进行判断和刷新指定组件中需要修改模板 ID 和组件 ID 为自身需要刷新的对应 ID 值。本示例中修改 a=="仪表板 ID "和 BI.Broadcasts.send(BICst.BROADCAST.REFRESH_PREFIX + "组件 ID ")
注:获取模板 ID 后需要关闭 BI 再进行操作。
4)将 refresh.js 文件放入%FineBI%/webapps/webroot下。
4.2 调用 JS 文件
修改 fine-bi-adapter-5.0.jar(或者 fine-bi-adapter-5.1.jar )中的 show.html,增加如下代码:
<!-- 增加刷新功能 -->
<script type="text/javascript" src="/webroot/refresh.js"></script>
保存修改至该 JAR 包。详情参见本章 2.2 节。
4.3 效果查看
1)此时,查看设置的模板,单个组件会实现定时刷新。若查看模板的网页源代码,会增加上述的定时刷新 JS 。详情请参见本章 2.3 节。
2)仪表板效果请参见本章 1.1 节。