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 |
| 否 | 橫向自适應 | 寬度充滿，高度自适應，支持最大高度限制 |
| 縱向自适應 | 有最大高度限制 | |
| 雙向自适應 | 寬高自适應充滿，支持最大高度限制 | |
| 不自适應 | 高度自适應，支持最大高度限制 |
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 端隐藏情況如下表所示：
| 是否可見 | 布局樣式 | 預覽效果 |
|---|---|---|
| 可見 | - | 組件正常顯示 |
| 不可見 | 重布局 | 組件隐藏，不占位 |
| 不可見 | 保留布局 | 組件隐藏，占位 |
