反饋已提交

網絡繁忙

決策報表新自适應

一、概述

  1. Finereport 11.0 對決策報表的自適應效果進行了優化,可實現範本在不同分辨率的瀏覽器上顯示出與設計相同的自適應效果。

  2. 新自適應模式僅對決策報表 PC 端範本的設計和展現有影響,不作用於普通報表和行動端決策報表。

  3. 新自適應暫不支援與第三方插件結合使用,也不支援 D03-00 圖表(舊版本)插件。

二、功能介紹

1
功能入口。
  1. 新建一張決策報表後,預設是處於新自適應模式下的,设计器快捷工具欄出现【轉換至舊版】按鈕,就代表當前處於新自適應模式下。如下圖所示。

  2. 舊決策報表可透過設計器快捷工具欄【轉換至新版】按鈕調整成新自適應範本。

2022-03-28_14-16-20.gif

2
PC端自適應屬性。
  1. 【PC端自適應屬性】是決策報表內建功能,它包含一些對範本整體生效的自適應設定項。

  2. 新自適應模式下該功能可以設定字型自適應效果,還可以調整報表縮放方式,這些設定項的邏輯及展示效果如下表所示。

設定項
選項效果說明

字型

自適應

1-1.png

 

字型大小會隨範本縮放的效果進行縮放

且字型自適應屬性作用於範本中所有組件的文字。

不自適應

1-2.png

 

字型按照設計時的大小原樣展示,不跟隨範本縮放。

報表縮放方式

雙向自適應

1-3.png

 

範本中的所有組件同時在橫向和縱向兩個方向上充滿瀏覽器視窗。

且在不同螢幕解析度下,內容都會呈現在一頁中。

橫向自適應

1-4.png

 

範本中的所有組件橫向充滿瀏覽器視窗,高度會等比例縮放。

在不同螢幕解析度下,單頁顯示不全時,縱向會出現捲軸。

不自適應

1-5.png 

範本按照設計時解析度大小,原樣展示在瀏覽器視窗。

在不同螢幕解析度下,單頁顯示不全時,橫向或縱向會出現捲軸。 

  1. 新自适應模式下,報表塊編輯界面會出現黑色的邊界虛線。邊界線裏面的内容可以正常展示在報表塊區域,區域外的需要用滾動條查看,如下圖所示。

  2. 報表塊屬性面板新增功能【內容顯示方式】,可單獨配置報表塊裡面內容的自適應方式。如下圖所示

  3. 報表塊每種内容顯示方式的邏輯和效果如下表所示。

image (2).png

11-5.gif

顯示方式
效果說明

不自動調整

2-1.png


 

預覽時報表塊的内容原樣輸出,空白沒内容的地方就是空白

寬度鋪滿報表塊

2-2.png

 

報表塊内容橫向鋪滿整個報表塊區域,高度會等比例縮放

雙向鋪滿報表塊

2-3.png

 

報表塊内容同時在橫向和縱向兩個方向上鋪滿整個報表塊區域

4
參數介面設計高度。
  1. 參數介面組件的屬性面板新增功能【設計高度】,可以透過手動拖曳或者修改數值的方式調整參數面板的高度,如下圖所示。

11-6.gif

5
開發者除錯。
  1. FineReport 11.0 決策報表新自適應模式下新增【開發者除錯】預覽方式,使用者可以直接在範本預覽介面調整決策報表的佈局,點選儲存後即生效,實現所見即所得。

6
Tab載入邏輯最佳化。
  1. 為了減少決策報表多 Tab 範本首次載入耗時,新自適應模式下新增了懶載入和預載入邏輯,具體介紹如下。

  2. 註:懶載入和預載入為新自適應預設邏輯,不提供前端配置開關,預設開啟。

載入邏輯邏輯介紹邏輯需知

懶載入

首次載入第一個 Tab 塊,後續點哪個 Tab 塊即載入哪個

  • 後臺和前臺都進行懶載入

  • 若有參數傳遞到尚未載入的 Tab塊 時,由後端快取此參數。當透過點 Tab 請求載入/懶載入/預載入等方式,載入到聯動 Tab 塊時,再攜帶此參數載入該 Tab 塊

 

預載入

對未點選的 Tab 塊進行預先載入,按照 Tab 順序載入各個 Tab 塊的後臺資料

  • 當首個展現的 Tab 載入完畢,且被手動點選的 Tab 也載入完畢後,按照 Tab 順序,載入各個 Tab 的後臺資料

  • 僅後臺資料可預載入,前端不可預載入

7
匯出決策報表-預覽URL新增寬高設定匯出。
  1. 在決策報表預覽的URL後面加字尾,回車後即可將範本匯出為其他檔案,例如下圖使用了字尾:&export_format=pdf&width=1920&height=1080。

  2. 【&export_format=】後面是要匯出的檔案格式,支援的格式和寫法參見文件:導出格式參數值

  3. 【&width=】是自訂匯出範本的寬度,【&height=】是自訂匯出範本的高度。如果不自訂寬高,則使用範本設計時的寬高匯出。

11-8.gif

三、新舊範本轉換自適應邏輯說明

1
報表塊內容顯示方式。
  1. 佈局方式轉換邏輯:新老操作介面來回切換,佈局方式(指自適應佈局和絕對佈局)不會改變。

  2. PC端自適應屬性轉換邏輯:如下表所示。

  3. 報表塊的PC浏覽器自适應屬性設置轉換邏輯:下表所示。

  4. 註:若未單獨修改過報表塊的Pc浏覽器自适應屬性设定,轉成成新的操作介面時,右側屬性欄中報表塊的内容顯示方式预设为“不自動調整”。

舊自適應配置PC端自適應-報表縮放方式

絕對布局-固定大小

不自適應

絕對佈局-適應區域

雙向自適應

自適應佈局-雙向自適應

雙向自適應

自適應佈局-橫向自適應

橫向自適應

報表塊-PC瀏覽器自適應
報表塊-內容顯示方式

不自適應

不自動調整

橫向自適應

橫向鋪滿報表塊

雙向自適應

雙向鋪滿報表塊 

image (4).png

2
修改伺服器配置。
  1. 範本【PC端自适應屬性】中,【字型】預設采用伺服器設置。若要修改伺服器設定,可點選菜單欄【伺服器】→【伺服器配置】,選擇【PC端自适應屬性】進行修改。如下圖所示。

四、注意事項

1
Chrome出現字號和設計時不一緻。
  1. 原因分析Chrome 瀏覽器默認設置了最小字體,在預覽時,若設計字號小於瀏覽器最小字號,則以瀏覽器最小字號爲準。

  2. 解決方法打開 Chrome 瀏覽器,點選【設定】→【外觀】→【自訂字型】→【最小字體】,調整最小字體設置。

2
新自適應和老決策報表效能的差異。
  1. 邏輯說明:

    新自適應報表塊展示邏輯已經重新設計,當範本的報表塊列欄很多時,新自適應的範本展示載入效能比老決策報表要好,反之新自適應的範本展示載入效能要低於老決策報表。

    報表塊特別多的範本差異會比較明顯,使用新自適應時請您知悉此差異。

3
部分老範本切換至新自適應後未達理想效果。
  1. 部分老範本切換至新操作介面後,範本效果未必能達到完美,需要手動再進行調整,場景如下。

老範本切換後可能出現的異常效果建議調整方式

自適應佈局,使用了絕對畫布

絕對畫布裡的組件內容被截斷

切換後調整絕對畫布裡的組件位置和尺寸

絕對佈局,存在組件位置超出body區域

以最外側組件的邊作為body的邊界

切換前調整組件位置,使組件不超出body邊界

絕對佈局,body內邊距空白較多

body內邊距空白區域被裁剪

切換後手動調整組件位置和效果

4
新自適應範本實現帶參決策報表匯出。
  1. 方法介紹:新自適應範本在舊自適應方法的基礎上將字尾改成:xx 即可,且這個字尾也支援自訂寬高。

  2. 舊範本實現帶參導出的方法參見文件:帶參決策報表匯出

5
新自適應範本使用JS實現點選按鈕匯出帶參決策報表。
  1. 方法介紹:新自适應範本在舊自適應方法方法的基礎上修改下 JavaScript 代碼即可,修改後的代碼如下。

  2. 舊範本實現的方法參見文檔:JS實現點擊按鈕導出帶參決策報表

var REPORT_URL = '${servletURL}?viewlet=doc/frm/example.frm&op=form_adaptive&export_format=excel&sessionID=' + aaa;
window.location = encodeURI(REPORT_URL)


附件列表


主題: 決策報表應用
  • 有幫助
  • 沒幫助
  • 只是瀏覽
  • 圖片不清晰
  • 用語看不懂
  • 功能說明看不懂
  • 操作說明太簡單
  • 內容有錯誤
中文(繁體)

文 檔回 饋

滑鼠選中內容,快速回饋問題

滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

不再提示

10s後關閉