1. 概述编辑
1.1 预期效果
制作大屏模板时,给报表或者报表中的某一部分添加动态背景或动态边框。如下图所示:
1.2 实现思路
通过 JS 调用 gif 格式的图片作为报表背景或报表块背景,也可以使用WEBIMAGE()函数调用网页中的 gif 图片。
注:JS 仅支持旧版决策报表。
2. 背景示例编辑
2.1 准备图片
准备 一张 gif 动图 1.gif,放置在报表工程%FR_HOME%\webapps\webroot\help\picture下。如下图所示:
点击下载 1.gif :1.gif
2.2 准备模板
新建决策报表,新建数据集 ds1,sql 语句为:SELECT * FROM 地图
在 body 中添加一个地图,设置地图边界为中国,地图数据为 ds1 数据。如何设置可参考:区域地图
2.3 设置背景
在控件列表中选择 body,为其添加一个「初始化后事件」。如下图所示:
JavaScript 代码如下:
//URL中的地址要填写图片的实际地址
setTimeout(function() {
$('.content-container').css({'background': 'url(/webroot/help/picture/1.gif)no-repeat','background-size':'100% 100%'});
}, 1000);
注:远程设计时,图片需放在服务器工程上。
普通报表中,可以在「模板>模板 Web 属性>分页预览设置」位置,添加一个「加载结束」事件,代码一致。
2.4 效果预览
保存模板,预览效果如下图所示:
注:不支持移动端。
3. 边框示例编辑
3.1 准备图片
准备 一张 gif 动图 2.gif,放置在报表工程%FR_HOME%\webapps\webroot\help\picture下。如下图所示:
点击下载 2.gif :2.gif
3.2 准备模板
1)新建决策报表,为方便查看效果,设置 body 的布局方式为「绝对布局>适应区域」。
2)在 body 中 添加一个 报表块 report 0。
如下图所示:
3.3 设置边框
在控件列表中选择 body,为其添加一个「初始化后事件」。如下图所示:
JavaScript 代码如下:
//URL中的地址要填写图片的实际地址
setTimeout(function() {
$("div[widgetname= REPORT0].fr-titlelayout").css("background","url(/webroot/help/picture/2.gif;)center center / 100% 100% no-repeat")
},200);
注:远程设计时,图片需放在服务器工程上。
也可以使用 webimage 公式调用网页上的图片。例如在 report0 A1单元格中输入公式:
=webimage("http://www.finereporthelp.com:8021/download/demo/9.0demo/doc/JS/表单JS实例/2.gif")
如下图所示:
3.4 效果预览
如果需要作为其他组件的边框,就可以通过叠加报表块的方式。如下图所示:
保存模板,预览效果如下图所示:
注:不支持移动端。
4. 模板下载编辑
4.1 决策报表背景示例
已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\17-JS设置动态背景或边框-示例一.frm
点击下载模板:17-JS设置动态背景或边框-示例一.frm
点击下载 1.gif:1.gif
4.2 普通报表背景示例
已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\17-JS设置动态背景或边框-示例二.cpt
点击下载模板:17-JS设置动态背景或边框-示例二.cpt
点击下载 1.gif:1.gif
4.3 边框示例
已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\17-JS设置动态背景或边框-示例三.frm
点击下载模板:17-JS设置动态背景或边框-示例三.frm
点击下载 2.gif:2.gif