历史版本6 :Pad自适应 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
1. 概述编辑
1.1 版本
| 报表设计器版本 | App | HTML5 移动端展现插件 |
|---|---|---|
| 10.0 | V10.0 | V10.0 |
1.2 应用场景
移动办公场景下，用户携带电脑非常不便，手机查看工程阅读困难，Pad成为了最佳的移动办公设备。
为了减少开发和维护耗时，手机和Pad端往往共用一套模板，两者分别自适应展示即可。
1.3 功能简介
对于移动端决策报表，配置了 移动端自适应 后，Pad 端可自适应展示，与手机端略有不同。
2. Body 组件编辑
| 移动端布局 | body布局 | 组件缩放 | 预览效果 |
|---|---|---|---|
| 保留布局 | 自适应布局 | 横向自适应 | 宽高等比例缩放，横向自适应充满，纵向可能出现滚动条 |
| 双向自适应 | 宽高等比例缩放，横向/纵向自适应充满 | ||
| 绝对布局 | 固定大小 | 裁剪四周空白部分后，宽高等比例缩放，横向自适应充满，纵向可能出现滚动条 | |
| 适应区域 | 裁剪四周空白部分后，宽高等比例缩放，横向/纵向自适应充满 |
3. 报表块编辑
3.1 移动端保留布局
3.1.1 组件预览效果
| body布局 | 组件缩放 | 报表块是否占据整行 | 报表块自适应 | 预览效果 |
|---|---|---|---|---|
| 自适应布局 | 横向自适应 | 是 | 横向自适应 | 宽度充满，高度自适应，支持最大高度限制 |
| 纵向自适应 | 有最大高度限制 | |||
| 双向自适应 | 宽高自适应充满，支持最大高度限制 | |||
| 不自适应 | 高度自适应，支持最大高度限制 | |||
| 否 | - | 和pc端一致，宽高按比例分配 | ||
| 双向自适应 | - | - | ||
| 绝对布局 | - | - | - |
3.1.2 组件冻结效果
| 分类 | 报表块自适应 | 是否限高 | 行冻结 | 列冻结 |
|---|---|---|---|---|
| 组件横向自适应，且报表块为单行报表块 | 横向自适应 | 是 | 支持 | 不支持 |
| 否 | 不支持 | |||
| 纵向自适应 | - | 不支持 | 支持 | |
| 双向自适应 | - | 不支持 | 不支持 | |
| 不自适应 | 是 | 支持 | 支持 | |
| 否 | 不支持 | |||
| 其他情况下 | 横向自适应 | - | 支持 | 不支持 |
| 纵向自适应 | - | 不支持 | 支持 | |
| 双向自适应 | - | 不支持 | 不支持 | |
| 不自适应 | - | 支持 | 支持 |
4. 图表块编辑
4.1 移动端保留布局
| 布局样式 | 预览效果 |
|---|---|
| 横向自适应 | 若图表块与其他组件并列一行，与 PC 端一致，宽高等比缩放 若图表块占据整行，高度自适应，与报表块效果一致 |
| 双向自适应 | 与 PC 端一致，宽高按比例分配 |
| 固定大小 | |
| 适应区域 |
5. 控件编辑
5.1 移动端保留布局
| 分类 | 控件 | 预览效果 |
|---|---|---|
自适应布局-横向自适应 绝对布局-固定大小 | 标签控件 | 控件宽高等比缩放，内容超出显示区域可滚动 |
| 文本域控件 | 控件宽高等比缩放，内容超出显示区域可滚动 | |
| 单选按钮组/复选框组 | 控件宽高等比缩放 超出显示区域可滚动，不足显示区域则根据内容自适应高度 | |
| 其他控件 | 控件宽高等比缩放 但有最大和最小高度显示，宽度中控件内容显示不下则截断 | |
自适应布局-双向自适应 绝对布局-适应区域 | 标签控件 | 控件宽高按比例分配，内容超出显示区域可滚动 |
| 文本域控件 | 控件宽高按比例分配，内容超出显示区域可滚动 | |
| 单选按钮组/复选框组 | 控件宽高按比例分配 超出显示区域可滚动，不足显示区域则根据内容自适应高度 | |
| 其他控件 | 控件宽高按比例分配 但有最大和最小高度显示，宽度中控件内容显示不下则截断 |
6. Tab块编辑
6.1 移动端保留布局
| 布局样式 | tab预览效果 |
|---|---|
| 横向自适应 |
|
| 双向自适应 | Tab块宽高按比例分配，Tab内没有滚动条 |
| 固定大小 | Tab块宽高等比缩放，Tab内没有滚动条 |
| 适应区域 | Tab块宽高按比例分配，Tab内没有滚动条 |
7. 组件隐藏编辑
7.1 普通隐藏
图表块、报表块、控件的 PAD 端隐藏情况如下表所示：
注：Tab块不支持隐藏。
| 是否可见 | 布局样式 | 预览效果 |
|---|---|---|
| 可见 | - | 组件正常显示 |
| 不可见 | 绝对布局 | 组件隐藏，占位 |
| 不可见 | 自适应布局 | 组件隐藏，组件位置会被周围组件自适应充满，组件不占位 |
7.2 JS 隐藏组件
JS 控制组件是否可见，PAD 端生效情况如下表所示：
| 布局样式 | 控件位置 | JS事件触发效果 |
|---|---|---|
| 保留布局-横向自适应 | 控件占整行 | |
| 控件不占整行 | JS可以控制组件可见不可见 当不可见时组件位置留空，其他组件不会自适应充满 | |
| 保留布局-双向自适应 | - | |
| 保留布局-固定大小 | - | |
| 保留布局-适应区域 | - |
7.3 Tab 中组件隐藏
Tab 中的图表块、报表块、控件，PAD 端隐藏情况如下表所示：
| 是否可见 | 布局样式 | 预览效果 |
|---|---|---|
| 可见 | - | 组件正常显示 |
| 不可见 | 保留布局 | 组件隐藏，占位 |