1. 概述
1.1 版本
| 设计器版本 | HTML5移动端展现插件版本 | App版本 |
|---|---|---|
| 11.0 | V11.0 | V11.0 |
1.2 应用场景
由于手机屏幕比 PC 端和 Pad 端都小，因此针对以下三种场景的模板制作，手机端需要采用不同的布局。
下面的报表设计场景中，场景一需要手机重布局，而场景二、三不需要手机重布局。
场景一：做好的决策报表含报表块等组件，在 PC 和 Pad 以及手机上共用，在 PC 和 Pad 端都是宽高自适应屏幕或者宽高等比例缩放，但是在手机上没有太大的布局要求，只需要在手机上面流式布局展现，即一行一个组件这种情况。
场景二：在手机上也采用原始布局，PC 端想要和手机共用一套模板，模板设计的时候建议以移动端效果为先。
场景三：在手机上采用原始布局，为手机专门制作的模板。
1.3 功能介绍
手机重布局只能在决策报表的 body 组件的移动端属性下设置，如下图所示：
注：重布局属性是决策报表的整体属性，只有当前控件选择 body 的时候才会有手机重布局属性，设置后是对整个决策报表进行生效的，如果决策报表内部有绝对布局或者 Tab 组件，那么里面的控件也是重布局显示。
手机重布局的设置项包括：
注：不勾选手机重布局时，body 的布局方式即为“保留布局”，除了控件顺序，是不会出现其他设置项的。
内边距：移动端展现时报表内容距离边框上下左右四个方向的距离。
组件间隔：每个组件纵向的间隔距离。
组件冻结：组件冻结后，向上滑动时，该组件固定在顶部不动。
控件顺序：移动端展现时，组件从上到下的排列顺序，设置时可自由拖拽。
注：2019-12-05及之后版本的 JAR 包才能支持在设计器中设置组件冻结。
当决策报表中多个组件在同一行时，以%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\NewbieGuide\决策报表入门示例.frm为例。
如果不勾选手机重布局，效果如下图所示：
勾选了手机重布局后，组件按行显示，如下图所示：
注：饼图在移动端预览时会自动旋转，被点击的饼块将自动旋转到正上方。
2. 属性设置
下面将通过举例，详细介绍每个属性设置项的移动端预览效果。
2.1 内边距
以%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\NewbieGuide\决策报表入门示例.frm为例。
1）设置该报表的上边距为4时。
移动端预览效果如下图所示：
2）设置该报表的上边距为20时。
移动端预览效果如下图所示：
2.2 组件间隔
以%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\NewbieGuide\决策报表入门示例.frm为例。
1）设置报表的组件间隔为4时。
移动端预览效果如下图所示：
2）设置报表的组件间隔为20时。
移动端预览效果如下图所示：
2.3 组件冻结
组件冻结作用范围如下：
只能选 body 中第一层下的组件（报表块、图表块、文本、绝对画布块等），不能设置tab组件。
如果是插件化扩展的非容器组件，也可以选。
组件可以多选。
以%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\Phone\others\骑行记录-phone.frm为例。
1）只冻结单个组件
点击冻结组件右边的白色框体部分，勾选展示顺序为第二的组件 report0。
移动端预览报表，向上滑动过程中，当 report0 到达顶端时，会自动冻结，保持不动，如下图所示：
2）冻结多个连续组件
点击冻结组件右边的白色框体部分，勾选展示顺序分别为第二、第三的组件 report0、report2。
移动端预览报表，向上滑动过程中，当 report0 到达顶端时，report0 和 report2 会合并一起冻结，保持不动，如下图所示：
3）冻结多个不连续组件
点击冻结组件右边的白色框体部分，勾选展示顺序分别为第二、第五的组件 report0、chart2。
移动端预览报表，向上滑动过程中，当 report0 到达顶端时，会自动冻结，保持不动。但是当 chart2 到达顶端时，report0 的冻结效果会失效，内容会被覆盖掉，chart2 会自动冻结，保持不动。如下图所示：
3. 重布局下图表
3.1 支持自定义数据点提示
3.1.1 显示效果
新版本支持重布局下的图表可以显示自定义的数据点提示，具体的版本要求参见「1.1版本说明」。
上面示例的自定义提示实际效果效果如下图所示：
3.1.2 HTML 解析
不勾选「使用html解析文本内容」只返回计算数据，样式不生效（如换行符）。
勾选「使用html解析文本内容」，返回的是默认通用内容。
3.2 较长数据点提示优化
新版本对较长内容的数据点提示进行了优化，具体的版本要求参见「1.1版本说明」，具体优化如下：
3.2.1 横向优化
横向上现在有最小宽度和最大宽度，基本场景分三个，分别如下：
提示内容小于最小宽度，提示框宽度不变。
提示内容介于最小宽度和最大宽度之间，弹窗宽度自适应。
提示内容较长，超过了最大宽度，那么超出的部分直接省略。
例如用富文本编辑提示内容，如果内容较长，如下图所示：
移动端预览时超出固定宽度的部分被省略，效果如下图所示：
3.2.2 纵向优化
数据点提示最大显示行数为 6 行（系统或第三方 App 的字体为标准时），超过 6 行的内容需要手动下滑来查看。
例如富文本编辑 8 行的提示内容，如下图所示：
移动端预览时只显示 6 行，效果如下图所示：
上一篇：[通用]参数面板移动端样式
