2.1 应用场景

默认情况下 FR 系统加载动画为蓝白相间条柱变化，且外部元素无背景变化。这样画面风格可能比较突兀，出现不协调的情况。

通过此插件可以对页面加载动画定制，使页面内容展示保持一致性、更酷炫，以满足企业用户对系统细节效果的完美追求。

2.2 功能简介

此插件功能为：

1）提供加载动画的自定义功能。

2）加载中布局元素的背景自定义功能。

主要功能介绍：

• 系统全局加载动画的自定义功能。
  

• 单个模板文件（cpt/frm）加载动画的自定义功能。

• 系统全局加载中布局元素的背景自定义功能（加载完恢复）。

• 单个模板文件（cpt/frm）加载中布局元素的背景自定义功能（加载完恢复）。

3.1 安装插件

点击下载插件：页面加载动画自定义

设计器插件安装方法参照： 设计器插件管理

服务器安装插件方法参照： 服务器插件管理

安装完成后，默认插件启用，我们接着进行两步骤完成插件配置操作。

3.2 动图目录建立

首先下载动图资源文件：插件动图资源包 .zip (见文末)，解压缩后的得到动图文件夹loadingImages。

将动图文件夹 loadingImages 复制到FR系统部署目录下 webapps/webroot/ 的静态文件夹中 help 或 scripts 等目录均可。

注：不要放入 WEB-INF 中。

文件中默认包含加载动画 GIF，提供用户进行选择配置；同时用户也可添加自定义的各种动图和背景图片放在loadingImages 目录，然后维护参数对应名称，即可生效。

3.3 插件参数配置

全局参数配置

进入到报表平台管理页面（数据决策系统）>管理系统>系统管理，点击「常规」选项卡，配置「加载效果自定义」，如下图所示：

四个参数说明：

动画图片路径：对应存放动图和背景图的文件路径。默认为 /webroot/help/loadingImages/ 。

           此项可以设置网络共享目录或者URL地址均可，例如：http://shopres.finereport.com/ueditor/loadingImages/。

背景图：系统全局背景自定义的图片名称，类型限定为 JPG 格式。默认为 bg_none，即透明背景。

元素动图：报表画面中局部 HTML 元素加载动图，小动图分辨率 30*30 像素。

页面动图：报表页面加载动图，大动图分辨率 60*60 像素。

模板参数配置

在 FR 系统部署目录对应 webapps/webroot/WEB-INF/resources 目录下创建文件 LoadingConfig.xml 。

编辑 LoadingConfig.xml 文件，添加指定模板的属性。各个标签标识如下：

• reportName：报表的路径文件名称，包括路径和报表名称；

• bgImage：背景图片名称（不含文件扩展名）;
  

• localPic：元素动图名称（不含文件扩展名）；

• wholePic：页面动图名称（不含文件扩展名）；

示例如下：

<?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="GettingStarted-test.cpt" 
    bgImage="bg_yellow" 
    localPic="default-local" 
    wholePic="default-whole"/>
<ReportAttr 
    reportName="战区报表/加盟进销差.cpt" 
    bgImage="bg_yellow" 
    localPic="default-local" 
    wholePic="default-whole"/>
</LoadingConfig>

配置文件下载：LoadingConfig.xml

默认提供的动图资源展示，如下图所示：

序号	局部元素动图	页面动图
1
2
3
4
5
6
7
8
9
10
11
12

动图资源文件下载：插件动图资源包.zip

以上，欢迎使用。