D00-02 決策報表新自適應插件

1

版本。

注1：此插件僅優化決策報表 PC 端範本的設計和展現效果，不作用於 CPT 範本和 FRM行動端 範本。

注2：此插件已適配官方插件，暫不支援與第三方插件結合使用，不支援使用 圖表(舊版本) 插件。

2

應用場景。

1. 在 PC 端預覽決策報表，開啓自適範本可自動適應不同螢幕決議度的瀏覽器，展示出與設計相符的效果。

3

功能介紹。

1. 採用全新元件 UI 效果，優化捲軸樣式，提升決策報表 PC 端展示的視覺體驗。

2. 決策報表的報表塊設計標尺使用【像素】單位，使報表塊內外設計單位保持一緻。

3. 設計範本時，body 大小（即決策報表設計區域）與組件大小比例固定為 1:1，不再受電腦決議度影響。

4. 設計和預覽盡可能做到“設計所見即展示所得”，範本設計時看到的文字換行和修剪即為展示時的換行和修剪，便於除錯範本到最佳效果。

5. 提供 【PC 端預覽】和【開發者預覽】兩種預覽方式。【開發者預覽】為範本固定寬高比例展示，寬高比例不受瀏覽器決議度影響，在「開發者預覽」模式下可檢查範本是否出現修剪或捲軸等異常，在 【PC 端預覽】模式下可查看範本在當前瀏覽器決議度下的最終展示效果。

6. 內建決策報表匯出功能，預設按照決策報表設計寬高尺寸匯出，允許自訂寬高尺寸匯出範本。

7. 參數面板可手動輸入設計高度，並實現預覽時的縮放效果。

8. 範本掛載到決策平台以新自適應預覽，需要在 URL 後面加上 【&op=form_adaptive 】。

1

插件版本。

1. 伺服器插件安裝方法參照：伺服器插件管理。

插件公測期間，請聯系技術支援或其他帆軟工作人員獲取。

說明1：公測期間，插件可能存在少量問題，請知悉此風險。但是由於新決策報表採用新的邏輯，因此風險問題不會影響到原有決策報表範本及其他功能模組；

說明2：新決策報表的報表塊展示邏輯進行了重新設計，當範本的報表塊行列很多時，新決策報表的範本展示載入效能比老的決策報表要好，當範本的報表塊行列較少時，新決策報表的範本展示載入效能要低於老的決策報表，報表塊特別多的範本差異會比較明顯，試用插件前請知悉此問題。

2

範本整體自適應設定。

1. 點選【範本】→【 PC 端自適應屬性】，彈出【PC 端自適應屬性】面板。如下圖所示。

2. 若要修改伺服器設定，需在【伺服器】→【伺服器配置】→【PC端自適應屬性】中修改，詳情請參考文檔 自适應屬性 。

注1：此處設定對範本整體生效。

注2：在絕對佈局和自適應佈局下，均能操作此處設定範本的自適應屬性，佈局方式不影響自適應屬性。

注3：新老操作介面下，全局配置的修改不會互相影響。

自適應屬性設定	類型	效果	描述
報表縮放方式	雙向自適應（預設值）		範本雙向充滿瀏覽器視窗大小，在不同螢幕決議度下，內容全部呈現在一頁中。
	橫向自適應		範本橫向充滿瀏覽器視窗寬度，高度等比例尺，在不同螢幕決議度下，單頁顯示不全時，縱向會出現捲軸。
	不自適應		範本按照設計時決議度大小，原樣展示在瀏覽器視窗，在不同螢幕決議度下，單頁顯示不全時，會出現縱向或橫向捲軸。
字體	自適應（預設值）		字體大小會隨範本縮放的效果進行縮放。 注：字體自適應屬性設定，作用於範本中所有組件字體
	不自適應		字體按照設計時的大小，原樣展示。

3

報表塊的內容顯示方式設定。

1. 報表塊進入編輯狀態後，顯示報表塊大小的【邊框虛線】，form 中的報表塊內容顯示範圍為邊框虛線裏的內容，如下圖1所示。

2. 在右上角的組件中選中【報表塊】，在下面的【屬性】中可以看到【內容顯示方式】設定項，可調整報表塊的內容在報表塊中的顯示效果。如下圖2所示。

3. 邏輯說明如下表。

注：邊框虛線外的儲存格有內容（包括內容、格式）時，會出現橫向或縱向捲軸，可選中邊框虛線外區域，點選滑鼠右鍵進行 【清除】→【全部】 操作。

設定項	效果	描述
不自動調整（預設值）		預覽時報表塊的內容原樣匯出。 注：報表塊的內容超出報表塊大小時，會出現縱向或橫向捲軸。
寬度鋪滿報表塊		報表塊的內容橫向鋪滿報表塊的寬度，高度等比例尺，可能出現縱向捲軸。 注：選擇該項後，字體開啓自適應下，該報表塊的字體縮放比例可能與整體不一緻。
雙向鋪滿報表塊		報表塊的內容雙向鋪滿報表塊的寬度和高度。 注：選擇該項後，字體開啓自適應下，該報表塊的字體縮放比例可能與整體不一緻。

1. 取消老設計模式下，form 中報表塊的【行序號】和【列序號】顯示。

2. 報表塊設計標尺採用【像素】單位。

3. 在【絕對佈局】下，body 大小（即決策報表設計區域）與組件大小比例為 1:1。

4. 不支援儲存格根據內容自動調整行高列寬。

4

參數面板設定。

1. 將【參數面板】拖入到決策報表中，可設定參數面板的高度，如下圖所示。

注：當在參數介面中新增元件時，若最底部元件所處的位置大於參數介面的【設計高度】，此時不支援修改參數介面的【設計高度】。建議使用者設定具體的【設計高度】後，重新整理增元件。

5

預覽方式。

1. 安裝插件後，新增【PC 端預覽】和【開發者預覽】兩種預覽模式。

2. PC 端預覽：根據範本中的自適應屬性配置，呈現最終展示效果的預覽模式。

3. 開發者預覽：透過該預覽方式檢查是否存在修剪或捲軸，並基於預覽效果調整範本。

效果	描述	應用場景
	預設為【字體自適應】，範本的【寬高固定比例尺】的效果。在不同螢幕決議度下，範本保持原始比例。	此種預覽方式，適用於報表塊儲存格中有公式、引用或擴展等，可查看範本的真實展示效果。 注：螢幕決議度和範本決議度比例不同時，會出現留白。

注1：開發者預覽效果固定，用來彌補設計器內不能完美做到"所見即所得"的缺點，該預覽方式不受 【範本】→【PC端自適應屬性】 設定的影響。

注2：開發者預覽模式下不出現修剪或捲軸現象，則開啓字體自適應和報表雙向自適應下，使用 【PC端預覽】 也不會出現修剪或捲軸現象。

6

多Tab懶載入和預載入邏輯。

1. 當決策報表 Tab 塊較多，或 Tab 塊裏的載入項較多時，如果是首次載入範本，那麼一次就會載入所有 Tab 塊，這樣會導緻範本首次載入耗時較長。

2. 為了減少決策報表多 Tab 範本首次載入耗時，插件 1.9.8 版本新增了懶載入和預載入邏輯，具體介紹如下。

注：懶載入和預載入為新決策報表自適應預設邏輯，不提供前端配置開關，插件安裝即開啓。

1. 此功能在插件裏實現，安裝插件後，不影響老決策報表裏的懶載入邏輯。

2. 此插件僅對伺服器工程生效。如果遠端設計時，環境安裝的插件裏有此最新的邏輯，則遠端環境生效。如果只有本地插件裏有此邏輯，遠端環境沒有，則遠端設計預覽時，懶載入和預載入邏輯不生效。

3. 載入時的動畫效果如下。

1. 為了讓大家更簡單地把一張舊範本轉換為新自適應下可使用的範本，我們提供了新舊決策報表轉換的功能，操作步驟如下：

2. 第一步：開啟一張【舊的決策報表範本】，會預設開啟【舊的決策報表操作介面】。

3. 第二步：點選設計器頂部工具欄中的【轉換按鈕】，切換成【新決策報表】。

4. 第三步：在【應答彈窗】中，選擇是否切換，點選【是】按鈕，完成舊範本轉換為新自適應下的範本。

注1：開啟舊範本，切換至新版決策報表後卸載插件，body 大小會發生變化。切換至舊版決策報表後卸載插件，則不會改變 body 大小。

注2：開啟舊範本，切換為新版決策報表後，會在同級目錄下，自動備份舊範本。

注3：新舊決策報表操作介面，全局配置的設定相互獨立。

1. 匯出的內容預設使用範本設計時的寬高尺寸，允許自訂寬高匯出，功能使用方式。

注：針對使用直接匯出或者郵件匯出決策報表時，匯出效果和報表實際效果差異過大的問題，2.0.0 版本已經對匯出效果進行了優化。

1

URL新增後綴直接匯出。

1. URL 連結新增後綴時，使用的API與舊自適應略有不同：

2. 老的方式：【&op=export&format=xxx】。

3. 新的方式：【&export_format=xxx】。

4. 例如：在報表預覽的URL後輸入【&export_format=pdf&width=1920&height=1080】，透過給【export_format】參數賦一個格式，實現URL直接匯出。

注：重命名等其他操作與原來的方式一緻。見參考文檔 URL 直接匯出 。

2

帶參決策報表的匯出。

1. 見參見文檔：D05-00 決策報表匯出 （第三節），URL新增後綴的步驟需要調整，改動如下：

2. 老的方式：URL後綴加上【&op=export&format=excel&sessionID=xx】。

3. 新的方式：URL後綴加上【&export_format=excel&sessionID=xx】。

注1：該方式的其他操作步驟和說明文檔一緻。

注2：該方式同樣允許自訂寬高匯出，方法見上述第四章第1節。

3

JS 實現點選按鈕匯出帶參決策報表。

1. 見參考文檔：決策報表匯出插件 ，給按鈕新增點選事件需要調整，改動如下。

2. 修改前：【var REPORT_URL = '${servletURL}?viewlet=doc/frm/example.frm&op=export&format=excel&sessionID=' + aaa;window.location = encodeURI(REPORT_URL)】;

3. 修改後：【var REPORT_URL = '${servletURL}?viewlet=doc/frm/example.frm&op=form_adaptive&export_format=excel&sessionID=' + aaa;window.location = encodeURI(REPORT_URL)】。

注1：該方式的其他操作步驟和說明文檔一緻。

注2：該方式同樣允許自訂寬高匯出，方法見上述第四章第1節。

1. 在部分場景中，需要新增參數 【op=form_adaptive】，說明是新自適應調動。

2. 使用網頁框時，如圖1所示。

3. 新增連結-網路報表，如圖2所示。

1

報表設計。

1. 範本的右上角組件管理處選中 body，設定為【自適應佈局】。

2. 範本中的所有報表塊，其右側屬性處【內容顯示方式】預設為【不自動調整】。

3. 【範本】→【PC端自適應屬性】彈窗中，取消勾選使用全局配置，【字體】設定為【自適應】，【報表縮放方式】設定為【雙向自適應】。

4. 使用【PC 端預覽】，查看範本展示效果。

2

效果預覽。

3

範本下載。

1. 點選下載已完成的範本：監視看板.frm。

2. 線上 demo 體驗（帳號：demo；密碼：demo）:監控看板。