1. 概述
1.1 版本說明
| 設計器版本 | HTML5移動端展現插件版本 | JAR包版本 | App版本 | 功能變動 |
|---|---|---|---|---|
| 10.0 | V10.4.49 | 2019-12-05 | V10.4.49 | - |
| 10.0.11 | V10.4.975 | 2020-12-02 | V10.4.975 |
|
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 行，效果如下圖所示：
