1. 概述
1.1 版本
| 报表设计器版本 | App | HTML5 移动端展现插件 |
|---|---|---|
| 11.0 | V11.0 | V11.0 |
1.2 应用场景
移动办公场景下，用户携带电脑非常不便，手机查看工程阅读困难，Pad成为了最佳的移动办公设备。
为了减少开发和维护耗时，手机和Pad端往往共用一套模板，两者分别自适应展示即可。
1.3 功能简介
对于移动端决策报表，配置了 移动端自适应 后，Pad 端可自适应展示，与手机端略有不同。
2. Body 组件
| 移动端布局 | body布局 | 组件缩放 | 预览效果 |
|---|---|---|---|
| 重布局 | - | - | 一行一个组件，可能出现上下滚动条 |
| 保留布局 | 自适应布局 | 横向自适应 | 宽高等比例缩放，横向自适应充满，纵向可能出现滚动条 |
| 双向自适应 | 宽高等比例缩放，横向/纵向自适应充满 | ||
| 绝对布局 | 固定大小 | 裁剪四周空白部分后，宽高等比例缩放，横向自适应充满，纵向可能出现滚动条 | |
| 适应区域 | 裁剪四周空白部分后，宽高等比例缩放，横向/纵向自适应充满 |
3. 报表块
3.1 移动端重布局
3.1.1 组件预览效果
| 是否单个报表块 | 报表块自适应 | 预览效果 |
|---|---|---|
| 是 | - | 单个报表块充满body |
| 否 | 横向自适应 | 宽度充满，高度自适应，支持最大高度限制 |
| 纵向自适应 | 有最大高度限制 | |
| 双向自适应 | 宽高自适应充满，支持最大高度限制 | |
| 不自适应 | 高度自适应，支持最大高度限制 |
3.1.1 组件冻结效果
| 报表块自适应 | 模板中是否仅单个报表块组件 | 是否限高 | 行冻结效果 | 列冻结 |
|---|---|---|---|---|
| 横向自适应 | 是 | - | 支持 | 不支持 |
| 否 | 是 | 支持 | ||
| 否 | 不支持 | |||
| 纵向自适应 | - | - | 不支持 | 支持 |
| 双向自适应 | - | - | 不支持 | 不支持 |
| 不自适应 | 是 | - | 支持 | 支持 |
| 否 | 是 | 支持 | ||
| 否 | 不支持 |
3.2 移动端保留布局
3.2.1 组件预览效果
| body布局 | 组件缩放 | 报表块是否占据整行 | 报表块自适应 | 预览效果 |
|---|---|---|---|---|
| 自适应布局 | 横向自适应 | 是 | 横向自适应 | 宽度充满，高度自适应，支持最大高度限制 |
| 纵向自适应 | 有最大高度限制 | |||
| 双向自适应 | 宽高自适应充满，支持最大高度限制 | |||
| 不自适应 | 高度自适应，支持最大高度限制 | |||
| 否 | - | 和pc端一致，宽高按比例分配 | ||
| 双向自适应 | - | - | ||
| 绝对布局 | - | - | - |
3.2.2 组件冻结效果
| 分类 | 报表块自适应 | 是否限高 | 行冻结 | 列冻结 |
|---|---|---|---|---|
| 组件横向自适应，且报表块为单行报表块 | 横向自适应 | 是 | 支持 | 不支持 |
| 否 | 不支持 | |||
| 纵向自适应 | - | 不支持 | 支持 | |
| 双向自适应 | - | 不支持 | 不支持 | |
| 不自适应 | 是 | 支持 | 支持 | |
| 否 | 不支持 | |||
| 其他情况下 | 横向自适应 | - | 支持 | 不支持 |
| 纵向自适应 | - | 不支持 | 支持 | |
| 双向自适应 | - | 不支持 | 不支持 | |
| 不自适应 | - | 支持 | 支持 |
4. 图表块
4.1 移动端重布局
| 图表宽高 | 预览效果 | |
|---|---|---|
| 表单画布宽度≤高度 | - | 横向充满，宽高等比缩放 |
表单画布宽度>高度 | 图表宽度≤设备宽度 | 横向充满，宽高等比放大 |
| 图表宽度>设备宽度 | 面积相等原则，高度拉长 若有最大高度限制，最大高度为显示区域的80% | |
| 单个图表块 | - | 充满屏幕 |
4.2 移动端保留布局
| 布局样式 | 预览效果 |
|---|---|
| 横向自适应 | 若图表块与其他组件并列一行，与 PC 端一致，宽高等比缩放 若图表块占据整行，高度自适应，与报表块效果一致 |
| 双向自适应 | 与 PC 端一致，宽高按比例分配 |
| 固定大小 | |
| 适应区域 |
5. 控件
5.1 移动端重布局
| 控件 | 预览效果 |
|---|---|
| 标签控件 | 内容自适应高度 |
| 文本域控件 | 固定高度 |
| 单选按钮组/复选框组（内容≤5项） | 内容自适应高度 |
| 单选按钮组/复选框组（内容>5项） | 固定高度，内容可滚动 |
| 其他控件 | 固定高度 |
5.2 移动端保留布局
| 分类 | 控件 | 预览效果 |
|---|---|---|
自适应布局-横向自适应 绝对布局-固定大小 | 标签控件 | 控件宽高等比缩放，内容超出显示区域可滚动 |
| 文本域控件 | 控件宽高等比缩放，内容超出显示区域可滚动 | |
| 单选按钮组/复选框组 | 控件宽高等比缩放 超出显示区域可滚动，不足显示区域则根据内容自适应高度 | |
| 其他控件 | 控件宽高等比缩放 但有最大和最小高度显示，宽度中控件内容显示不下则截断 | |
自适应布局-双向自适应 绝对布局-适应区域 | 标签控件 | 控件宽高按比例分配，内容超出显示区域可滚动 |
| 文本域控件 | 控件宽高按比例分配，内容超出显示区域可滚动 | |
| 单选按钮组/复选框组 | 控件宽高按比例分配 超出显示区域可滚动，不足显示区域则根据内容自适应高度 | |
| 其他控件 | 控件宽高按比例分配 但有最大和最小高度显示，宽度中控件内容显示不下则截断 |
6. Tab块
6.1 移动端重布局
是否单个 Tab块 | Tab中是否 为单个组件 | Tab 预览效果 | Tab 中组件预览效果 |
|---|---|---|---|
| 是 | 是 | 单个 Tab块自适应充满，高度固定 | 按照对应组件在重布局下单个组件的显示的效果来显示 |
| 是 | 否 | 单个 Tab块自适应充满，高度固定 | 按照对应组件在重布局下非单个组件的显示的效果来显示 高度超出屏幕则在 Tab 里出现上下滚动条 |
| 否 | - | Tab 块的显示高度根据当前Tab页中的组件内容自适应，Tab内无滚动条 切换 Tab 页，可能会引起tab高度的变化 | 按照对应组件在重布局下非单个组件的显示的效果来显示 |
6.2 移动端保留布局
| 布局样式 | tab预览效果 |
|---|---|
| 横向自适应 |
|
| 双向自适应 | Tab块宽高按比例分配，Tab内没有滚动条 |
| 固定大小 | Tab块宽高等比缩放，Tab内没有滚动条 |
| 适应区域 | Tab块宽高按比例分配，Tab内没有滚动条 |
7. 组件隐藏
7.1 普通隐藏
图表块、报表块、控件的 PAD 端隐藏情况如下表所示：
注：Tab块不支持隐藏。
| 是否可见 | 布局样式 | 预览效果 |
|---|---|---|
| 可见 | - | 组件正常显示 |
| 不可见 | 重布局 | 组件隐藏，不占位 |
| 不可见 | 绝对布局 | 组件隐藏，占位 |
| 不可见 | 自适应布局 | 组件隐藏，组件位置会被周围组件自适应充满，组件不占位 |
7.2 JS 隐藏组件
JS 控制组件是否可见，PAD 端生效情况如下表所示：
| 布局样式 | 控件位置 | JS事件触发效果 |
|---|---|---|
| 重布局 | - | JS可以控制组件可见不可见 当不可见时下方组件自动向上填充 |
| 保留布局-横向自适应 | 控件占整行 | |
| 控件不占整行 | JS可以控制组件可见不可见 当不可见时组件位置留空，其他组件不会自适应充满 | |
| 保留布局-双向自适应 | - | |
| 保留布局-固定大小 | - | |
| 保留布局-适应区域 | - |
7.3 Tab 中组件隐藏
Tab 中的图表块、报表块、控件，PAD 端隐藏情况如下表所示：
| 是否可见 | 布局样式 | 预览效果 |
|---|---|---|
| 可见 | - | 组件正常显示 |
| 不可见 | 重布局 | 组件隐藏，不占位 |
| 不可见 | 保留布局 | 组件隐藏，占位 |
8. Pad 组件标题字号适应
Pad 上移动端模板组件标题字号支持自动适应该设备，该功能范围说明如下表所示：
| 移动端设备 | 生效范围 | 终端范围 | 组件类型 |
|---|---|---|---|
| Pad | 表单重布局、表单保留布局 | App、H5 | Tab 块标题、报表块标题、图表块标题 |
