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 塊標題、報表塊標題、圖表塊標題 |
