自适應屬性

1.1 版本

注1：2018-12-27 之前的 JAR 包需要安裝自适應插件

注2：本文僅适用於 PC 端，移動端自适應方法請參見：[通用]移動端自适應。

1.2 應用場景

PC 端，用戶預覽模板希望能夠根據屏幕分辨率自适應。

1.3 功能簡介

普通報表可設置表格自适應（橫向自适應、雙向自适應）、字體自适應。

決策報表可設置表單自适應、報表塊自适應、字體自适應。

2.1 設置方式

點擊模板>模板自适應屬性，彈出「PC端自适應屬性」面板，可以選擇是否「使用全局配置」。

2.1.1 使用全局配置

默認選中「使用全局配置」，用戶可選擇「編輯全局配置」。

則字體和表格自适應設置對設計器下所有「使用全局配置」的模板均生效。如下圖所示：

2.1.2 不使用全局配置

不選中「使用全局配置」，則字體和表格自适應設置僅對當前模板生效。如下圖所示：

2.2 自适應邏輯

注1：一定比例爲 0.4，浏覽器中報表的寬高 / 正文寬高 < 0.4

注2：參數界面不自适應。

3.1 設置方式

點擊模板>表單報表塊自适應屬性，彈出「PC端報表塊自适應屬性」面板，可以選擇是否「使用全局配置」。如下圖所示：

全局配置使用方式與上文一緻，請參考本文 2.1 章節。

3.2 自适應邏輯

注1：一定比例爲 0.4，浏覽器中報表的寬高 / 正文寬高 < 0.4

注2：報表塊存在凍結時，報表塊自适應不生效。

注3：IE8 及以下版本的浏覽器，不支持決策報表自适應。

注4：僅在表格默認自适應時，決策報表的懶加載邏輯方生效，其他自适應邏輯下不生效。

注5：開啓字體自适應後，報表塊組件和 Tab 塊中的報表塊，預覽時字體大小不能完全保持一緻。

開啓自适應後預覽報表時，浏覽器端報表的呈現效果和屏幕分辨率有一定的關聯。

body 大小表示的是畫布真實大小，當 body 大小和屏幕分辨率大小一緻時，模板預覽時會顯示真實大小，不會縮放；當 body 大小和屏幕分辨率大小不一緻時，會以屏幕分辨率和 body 大小的比例産生縮放。同一模板，在低分辨率電腦下預覽時縮放比例更大，所以适合高分辨率屏幕下的報表在低分辨率屏幕下預覽時，會比較容易出現滾動條。如下圖所示：

用戶在設計報表時，若報表最終需要在多種不同的分辨率電腦下預覽，推薦在低分辨率電腦上做模板，需要開啓字體自适應，模板完成後，在高分辨率電腦上測試預覽時，如果有細微不适應問題，微調一下即可。

3.3 布局方式

預覽後浏覽器窗口縮放，與body 布局方式 有關，如下圖所示：

本文的模板自适應屬性／表單報表塊屬性對移動端不生效。

移動端自适應設置請參見：[通用]移動端自适應

5.1 模板設置橫向自适應後，預覽字體模糊

問題描述：

模板設置橫向自适應後，預覽字體模糊。

解決方案：

橫向自适應會預留滾動條，因此右側出現一點空白，導緻字體顯示稍微模糊，屬於正常效果。

用戶若希望字體清楚，可設置雙向自适應。

5.2 設置雙向自适應後依舊有滾動條

問題描述：

決策報表設置 PC 端雙向自适應，body 雙向自适應，報表塊雙向自适應後，改變浏覽器頁面大小，還是會出現滾動條。

原因分析：

屬於系統 DPI 問題，分辨率爲 1920*1080 ，縮放率爲 125% 時，會出現橫向滾動條，前台會隐藏該滾動條，但滾動條依然是存在的。

解決方案：

将縮放設置爲 100%  。

5.3 設置凍結後自适應下報表有空白

問題描述：

決策報表中，當報表塊中設置了凍結，在自适應的情況下，出現報表内容沒有撐滿全屏幕，四周有空白的問題。

解決方案：

可使用新自适應插件解決此問題，具體可參考：決策報表新自适應插件

若浏覽器縮放或全屏下，報表塊下方出現空白問題，可以給 body 添加一個初始化事件，調整顯示。事件代碼内容如下：

$(window).resize(function () {
var width = FR.windowWidth; //獲取浏覽器窗口長度
var height = FR.windowHeight;//獲取浏覽器窗口高度
//調整報表form的長寬
var from = _g().getWidgetByName('form')
if (form.oriWidth === width && form.oriHeight === height) {
return;
}
form.oriWidth = width;
form.oriHeight = height;
//加載報表内容
form.loadContentPane(true);
}
);