1. 版本编辑
| 报表服务器版本 | JAR 包 | 插件版本 |
|---|---|---|
| 11.0 | 2022-08-11 | V1.5.3 |
2. 描述编辑
2.1 应用场景
默认情况下 FineReport 加载动画为蓝白相间条柱变化，且外部元素无背景变化这样的画面风格可能比较突兀。
用户可以使用该插件实现页面加载动画的自定义，定制化效果满足企业用户对报表细节效果的完美追求。
注：移动端不支持
2.2 功能简介
1）提供加载动画的自定义功能。
系统全局加载动画的自定义功能，可定制图片动画和尺寸大小。
单个模板加载动画的自定义功能，可定制图片动画和尺寸大小。
2）加载时布局元素的背景自定义功能。(新决策前端不支持)
系统全局加载时布局元素的背景自定义功能（加载完恢复）。
单个模板加载时布局元素的背景自定义功能（加载完恢复）。
3）新增页面动图、元素动图、背景图各项显示禁用功能。
3. 使用示例编辑
3.1 安装插件
点击下载插件：页面加载动画自定义
设计器插件安装方法参照： 设计器插件管理
服务器安装插件方法参照： 服务器插件管理
安装完成后，默认插件启用，我们接着进行两步骤完成插件配置操作。
3.2 动图目录建立
首先下载动图资源文件：插件动图资源包 .zip (见文末)，解压缩后的得到动图文件夹loadingImages。
将动图文件夹 loadingImages 拷贝到 FineReport 安装路径 %FR_HOME%\webapps\webroot的 help目录下 或者新建的目录下（浏览器可访问到图都可）。
注：不要放入 WEB-INF 和 scripts 中。
文件中默认包含加载动画 GIF，提供用户进行选择配置；同时用户也可添加自定义的各种动图和背景图片放在loadingImages 目录，然后维护参数对应名称，即可生效。
3.3 插件参数配置
3.3.1 全局参数配置
进入到报表平台管理页面（数据决策系统）>管理系统>系统管理>常规，配置加载效果自定义，如下图所示：
参数说明：
1）动画图片路径：
对应存放动图和背景图的文件路径，默认为 %FR_HOME%\webapps\webroot\help\loadingImages。
如果设置了tomcat虚拟目录为 部署路径 + webroot，动画图片路径可为 help\loadingImages\
此项可以设置网络共享目录或者URL地址均可，例如：http://shopres.finereport.com/ueditor/loadingImages。
2）背景图：
系统全局背景自定义的图片名称，类型限定为 JPG 格式。默认为 bg_none，即透明背景，值为bg_none或none为禁用不显示。
3）元素动图：
报表画面中局部 HTML 元素加载动图，填写 GIF 文件名称（不含文件扩展名），值为none为禁用不显示。
元素动图宽度、高度：宽度 30 像素、高度 30 像素。
4）页面动图：
报表页面加载动图，填写 GIF 文件名称（不含文件扩展名），值为none为禁用不显示。
页面动图宽度、高度：宽度 60 像素、高度 60 像素。
3.3.2 模板参数配置
在 FineReport 安装路径 %FR_HOME%\webapps\webroot\WEB-INF\resources 下创建文件 LoadingConfig.xml 。
编辑 LoadingConfig.xml 文件，添加指定模板的属性。所含属性标签如下所示：
reportName：报表的路径文件名称，包括路径和报表名称；
bgImage：背景图片名称（不含文件扩展名），值为bg_none或none为禁用不显示;
localPic：元素动图名称（不含文件扩展名），值为none为禁用不显示；
localWidth：元素动图宽度；
localHeight：元素动图高度；
wholePic：页面动图名称（不含文件扩展名），值为none为禁用不显示；
wholeWidth：页面动图宽度；
wholeHeight：页面动图高度；
示例如下：
<?xml version="1.0" encoding="UTF-8"?>
<LoadingConfig>
<ReportAttr
reportName="doc/example.frm"
bgImage="bg_yellow"
localPic="circle-local"
wholePic="circle-whole"/>
<ReportAttr
reportName="doc/GettingStarted.cpt"
bgImage="bg_yellow"
localPic="default-local"
wholePic="default-whole"/>
<ReportAttr
reportName="doc/GettingStarted-test.cpt"
bgImage="bg_yellow"
localPic="default-local" localWidth="200" localHeight="200"
wholePic="default-whole" wholeWidth="400" wholeHeight="400"/>
</LoadingConfig>配置文件下载：LoadingConfig.xml
4 效果查看编辑
5. 注意事项编辑
1. 配置参数文件，全局动画参数是可视化配置、模板动画参数是xm配置。配置生效是需要重启服务工程的。
2. 因接口限制，新决策前端，不支持IE浏览器、背景图片更换功能。
3. 如果设置了tomcat虚拟目录为 部署路径 + webroot，动画图片路径可为 help\loadingImages\