FVS網頁框組件

适用場景：安裝了「FVS數據視覺化」插件的用戶，可參考本文了解 FineVis 範本的相關功能。

注：不支持移動端。

1.1 版本

1.2 功能簡介

「網頁框組件」主要用於在 FVS 範本中引入網路頁面和工程下其他範本。如下圖所示：

本文僅為大家介紹網頁框特有功能，其他屬性不贅述。

組件互動請參見：FVS組件框架互動屬性 。表格組件僅支援監控重新整理設定。

組件動畫請參見：FVS組件框架動畫屬性 。

組件屬性請參見：FVS組件屬性 。

2.1 路徑位址

FVS網頁框組件支援兩種路徑位址：網頁路徑和範本路徑。

2.1.1 網頁路徑

網頁路徑支援絕對路徑和相對路徑，V1.16.1 及之後版本還支援在路徑中新增公式，實現動態 URL 連結。

• 絕對路徑：確定當前伺服器可存取該位址即可，例如 https://www.finereport.com/tw/ 

• 相對路徑：需要將資源檔案儲存到 %FR_HOME%\webapps\webroot 資料夾下，例如 /webroot/1.png

例如在網頁路徑框中輸入https://www.finereport.com/tw/ ，即可預覽該網頁內容。如下圖所示：

V1.16.1 及之後版本插入公式範例如下圖所示，詳細內容可參考本文第 3.3 節。

2.1.2 範本路徑

範本路徑可選擇當前報表伺服器%FR_HOME%\webroot\WEB-INF\reportlets目錄下的所有範本，包括普通報表、FineVis視覺化範本等。

選擇範本後點選開啟即可。如下圖所示：

2.2 傳參設定

點選「設定」彈出傳參設定框，在設定框中可新增參數，支援新增多個參數。參數型別支援兩種型別：

• 自訂公式編輯：可使用公式輸入，以實現參數動態變化

• 自訂內容：可直接填寫正文

新增的參數將展示在傳參設定下方的列表中，要修改或刪除參數，仍需點選「設定」在彈出的傳參設定框中操作。

注：V1.14.1 版本之前，預設參數值僅支援設定為固定值。

2.3 請求方式

請求方式可選擇「使用get傳參」或「使用post傳參」，作用於傳參設定，未設定參數時，該設定項無效。如下圖所示：

2.4 顯示網頁捲軸

在「網頁框設定」處，使用者可選擇是否勾選「顯示網頁捲軸」。如下圖所示：

1）若不勾選「顯示網頁捲軸」，隱藏捲軸。網頁框中嵌入的網頁，不支援上下左右捲動查看網頁內容。如下圖所示：

2）若勾選了「顯示網頁捲軸」，網頁框若無法完整展示整個網頁：

使用者可拖動網頁框上的捲軸查看網頁內容；也可把滑鼠行動到網頁框上，使用滑鼠滾輪捲動查看頁面。

3.1 建立範本並新增組件

點選設計器左上角「檔案>建立視覺化看板」建立一張空白看板。如下圖所示：

點選或拖曳組件區「其他>容器>網頁框」，在頁面中新增一個「網頁框組件」。如下圖所示：

3.2 範本路徑動態傳參範例

3.2.1 新增範本路徑

路徑地址選擇【範本路徑】。

點擊【選擇範本】進入範本選擇介面。

範本路徑可選擇當前報表伺服器%FR_HOME%\webroot\WEB-INF\reportlets目錄下的所有範本，包括普通報表、決策報表以及 FVS 大屏範本。

點擊【開啟】確認範本，範本路徑即顯示在右側文本框中，文本框可直接編輯範本路徑。

3.2.2 網頁框傳參設定

選中網頁框組件，設定傳參，新增參數名為地區，參數型別為「自訂內容」，參數內容則輸入華北 。如下圖所示：

3.3 網頁路徑動態URL範例

在上述範本中建立「頁面2」，同樣新增「網頁框組件」和「下拉框組件」完成以下步驟。

3.3.1 新增網頁路徑

這裏我們使用的是兩篇文檔作為網頁路徑的物件：

FVS大屛編輯模式使用概覽-https://help.fanruan.com/finereport-tw/doc-view-4663.html

FVS大屏編輯模式簡介-https://help.fanruan.com/finereport-tw/doc-view-4666.html

要實現動態展示連結，只需要將連結中的「文檔id」用公式代替，公式中輸入參數值 $a 。如下圖所示：

3.3.2 設計下拉框組件

1）設定下拉框組件名稱為 a ，與上一步「文檔id」參數一致。

2）設定資料字典為「自訂」，實際值為對應文檔id，顯示值為對應文檔標題。

3）設定預設值為自訂字串 4666。

如下圖所示：

3.3.3 效果預覽

點選右上角「預覽」，效果如下圖所示，可以看到選擇不同文檔時，網頁框中的範本內容也跟隨變化。

已完成範本請參見：FVS網頁框組件範例.fvs