1.1 预期效果

制作大屏模板时，给报表或者报表中的某一部分添加动态背景或动态边框。如下图所示：

1.2 实现思路

通过 JS 调用 gif 格式的图片作为报表背景或报表块背景，也可以使用WEBIMAGE()函数调用网页中的 gif 图片。

注：不支持新版决策报表。

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.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.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