反饋已提交
網絡繁忙
適用場景:安裝了「FineVis資料視覺化」插件的使用者,可參考本文了解 FVS 範本的相關功能。
使用 FVS 三維組件設定模型,希望模型可根據資料庫表欄位改變資料或狀態。例如下圖所示:
注:不支援行動端。
使用重新整理資料API refreshData 定時重新整理模型資料,結合 subscribeMarkerData 訂閱監聽資料更新,當資料圖層中的資料更新,執行回呼。
首先請在本地工程所使用的資料庫中建立一個表,表名為「車輛監視」,包含三個欄位:
車輛編號:自訂車輛編號,與模型名稱保持一致(模型名稱可修改)
是否有車:0 表示沒有,即車輛模型不可見;1 表示有,車輛模型可見
車停時長:自訂停車時長
表樣式如下圖所示:
注:可使用 Navicat 新增資料庫表,詳細操作請自行百度。
關於如何上傳模型、新增模型等功能請先查看文檔:三維自訂場景組件 。
本文提供初始範本 停車場模型.fvs ,點選下載範本,將其放置到工程路徑 %FR_HOME%\webapps\webroot\WEB-INF\reportlets 下。
開啟設計器,在檔案列表中開啟該範本。如下圖所示:
點選「範本>頁面載入結束事件」,輸入 JavaScript 程式碼。如下圖所示:
JavaScript 程式碼如下:
// 等待 callback 的回傳值// 每 200 ms 重新執行一次 callback,直到 callback 有回傳值為止async function future(callback) { return new Promise(resolve => { const timerId = setInterval(() => { const result = callback(); if (result) { // 有回傳值時,清除監視計時器,並透過 resolve 傳回最終結果 clearInterval(timerId); resolve(result); } }, 200); });}async function perform() { // 等待場景載入結束,並獲取到 widget, dataLayer const widget = await future(() => duchamp.getWidgetByName("停車場模型")); const dataLayer = await future(() => widget.getDataLayerByName("車輛監視")); // 根據資料圖層 marker 資料,隱藏指定模型 const processMarkerData = data => { const visible = data["是否有車"] === "1"; const name = data["車輛編號"]; const mesh = widget.getMeshByName(name); mesh.setVisible(visible); }; // 訂閱監聽資料圖層 Marker 資料,當 Marker 更新時,執行訂閱監聽函式 dataLayer.subscribeMarkerData(data => { processMarkerData(data); }); // 每隔 3s,重新整理組件資料 setInterval(() => { widget.refreshData(); }, 3000); // 循環執行}perform();
注:若存在多個分頁,需要指定某個分頁中三維組件實現監視重新整理時,JavaScript 程式碼如下:
// 等待 callback 的回傳值// 每 200 ms 重新執行一次 callback,直到 callback 有回傳值為止async function future(callback) { return new Promise(resolve => { const timerId = setInterval(() => { const result = callback(); if (result) { // 有回傳值時,清除監視計時器,並透過 resolve 傳回最終結果 clearInterval(timerId); resolve(result); } }, 200); });}async function perform() { // 等待場景載入結束,並獲取到 widget, dataLayer const widget = await future(() => duchamp.getWidgetByName("停車場模型")); const dataLayer = await future(() => widget.getDataLayerByName("車輛監視")); // 根據資料圖層 marker 資料,隱藏指定模型 const processMarkerData = data => { const visible = data["是否有車"] === "1"; const name = data["車輛編號"]; const mesh = widget.getMeshByName(name); mesh.setVisible(visible); }; // 訂閱監聽資料圖層 Marker 資料,當 Marker 更新時,執行訂閱監聽函式 const observer = dataLayer.subscribeMarkerData(data => { processMarkerData(data); }); // 每隔 3s,重新整理組件資料 const refreshTimerId = setInterval(() => { widget.refreshData(); }, 3000); // 循環執行 const clean = () => { observer.unsubscribe(); clearInterval(refreshTimerId); };}let page1Clean = null;duchamp.on("storychange", current => { if (current === "頁面2") { page1Cleaner = perform(); } else { page1Clean && page1Clean(); }});
點選右上角「儲存」,再點選「預覽」。效果如 1.2 節所示。
點選下載範本:JS實現數據庫表字段控制模型顯隱.fvs
滑鼠選中內容,快速回饋問題
滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。
不再提示
10s後關閉
反馈已提交
网络繁忙