JS實現三維組件傳參僅重新整理資料

適用場景：安裝了「FineVis資料視覺化」插件的使用者，可參考本文了解 FVS 範本的相關功能。

1.1 版本

1.2 應用場景

在 FVS 範本中，若使用三維組件本身的「交互>監視重新整理」功能，或使用 refresh API傳參並重新整理三維組件，三維組件均整體重新整理。

即如果模型有動畫或預覽時視角變化，重新整理後模型動畫會重新開始，視角會恢復原樣。如下圖所示：

在 V1.16.0 及之後的版本，可使用 refreshData API傳參給三維組件，實現僅重新整理資料。效果如下圖所示：

注：refresh 支援所有組件，refreshData 僅支援三維組件 。

1.3 實現思路

透過新增 JavaScript 事件，使用 refreshData() 實現僅重新整理三維組件資料。

注：不支援行動端。

2.1 準備範本

本文範例完整範本資源來源於 智慧風電監視企業戰情室 。本文範例檔案請提前下載：風機測試.zip。

將下載的「智慧風電.db」資料庫檔案放在工程的 %FR_HOME%\webapps\webroot\help 資料夾下，並完成對應的資料連結，可參考文檔 [設計器]JDBC連結資料庫 。

資料連結如下圖所示：

將下載的「風機傳參重新整理資料測試.fvs」範本檔案放置到工程的 %FR_HOME%\webapps\webroot\WEB-INF\reportlets 路徑下。

該範本已經設定好含有參數的 資料庫查詢 和 自訂模型 組件，本文將要在此基礎上完成以下設定。

2.2 標題組件傳參範例

2.2.1 新增標題組件

新增一個「標題組件」到畫布中，設定標題內容為 F04 。如下圖所示：

注：F04 表示風機的編號，與模型綁定的資料適配。

2.2.2 設定JavaScript事件

給標題組件新增一個 JavaScript 點選事件，JavaScript 程式碼如下：

var a=duchamp.getWidgetByName("標題1_頁面1").getValue();  //獲取標題組件的值
duchamp.getWidgetByName("自訂模型").refreshData({FJ:a});  //將獲取到的值作為參數 FJ 的值傳遞給自訂模型組件並重新整理資料

注：僅在 V1.16.0 版本及之後的插件中，標題組件支援使用 getValue 獲取組件值。

2.3 下拉框控件傳參範例

使用元件傳參時，若元件名稱與參數名稱 FJ 一致，該元件直接表示該參數，無需 JS 傳參即可聯動使用到 FJ 參數的組件，整個組件重新載入重新整理資料。

所以要實現僅重新整理資料，需要將元件名稱設定為與參數不一致，再使用 JS 傳參重新整理。

2.3.1 新增下拉框元件

1）新增一個下拉框元件到畫布中，設定元件名稱為「下拉框」。如下圖所示：

2）設定元件資料字典為「資料庫表」，選擇「智慧風電」資料庫中的「風機發電統計」表中的「風機」欄位；設定預設值為自訂字串 F01 。如下圖所示：

2.3.2 設定JavaScript事件

給下拉框元件新增一個「編輯結束」事件，輸入 JavaScript 程式碼：

var a=duchamp.getWidgetByName("下拉框").getValue();  //獲取下拉框組件的值
duchamp.getWidgetByName("自訂模型").refreshData({FJ:a});  //將獲取到的值作為參數 FJ 的值傳遞給自訂模型組件並重新整理資料

2.4 效果預覽

點選右上角「儲存」，再點選「預覽」，效果如下圖所示：

2.5 拓展：監視刷新範例

上述範例是透過點選事件實現的傳參及重新整理。但若存在資料後臺變化，三維組件需實現監視重新整理時，該如何設定呢？

此時可新增「範本>頁面載入結束事件」，輸入 JavaScript 程式碼如下：

setInterval(() => {
    duchamp.getWidgetByName("自訂模型").refreshData();
    }, 3000); //每隔3秒重新整理一次資料

若存在多個分頁，需要指定某個分頁中三維組件實現監視重新整理時，JavaScript 程式碼如下：

duchamp.on("storychange", (current) => {
  if (current === "頁面1") {
    setInterval(() => {
    duchamp.getWidgetByName("自訂模型").refreshData();
    }, 3000);
  }
});

點選下載範本：風機傳參重新整理資料測試.fvs