Skip to content

組態管理 ​

頁面導讀 ​

適用場景適合為產品、場景或獨立業務搭建即時監控畫面、設備狀態面板和可分享頁面。
前置條件已建立產品或場景,物模型變數穩定,素材、圖表、元件和分享權限已確認。
操作路徑組態管理 → 新增組態 → 設計畫面 → 綁定變數 → 執行預覽 → 分享或發佈。
驗收點畫面可執行,變數即時更新,分享連結可存取,刪除或取消分享後權限立即生效。

提示

組態是指使用者透過類似堆積木的方式,使用編輯器提供的工具和方法,就能透過簡單直覺的介面來設定和控制自動化過程和裝備,而不需要編寫電腦程式。在組態管理中,提供了豐富的場景素材控制項,能夠自由拖曳搭建監控場景,即時顯示設備運行狀態等資訊。

一、組態組成 ​

FastBee 組態可分為範本(產品)組態、場景組態和獨立組態;組態元件分別提供了圖庫管理、圖表管理、元件管理和模型管理,便於重複使用、方便維護、可擴充、可客製。

二、組態中心 ​

組態中心可對組態進行建立、編輯、設計、執行、分享和刪除;組態可以是動態的平面工業圖也可以製作大螢幕展示,用途廣,可直接綁定平台參數方便快捷。

1. 範本組態 ​

範本組態 是針對產品繪製的組態畫面,在該產品下的所有設備都會展示該組態畫面,組態畫面中綁定變數來源於產品物模型,取值來源於目前設備上報的即時值。透過繪製一個範本組態畫面就可以實現同產品但不同設備的視覺化資料監控。避免重複編輯應用畫面的麻煩。

範本組態頁面截圖
  • 新增組態,

    方法一:點擊「新增」按鈕,需維護元件名稱、關聯產品必填資訊

    方法二:在產品管理中,點擊「組態設計」,如果該範本未曾新增過範本組態,則會跳轉到「範本組態」選單下,並自動開啟「新增組態」彈出視窗,其餘步驟同方式一

    方法三:在產品管理中,點擊「查看詳情」,點擊「組態應用」,如果沒有組態,可以點擊「建立組態」按鈕,將會跳轉到「組態管理」選單下,並自動開啟「新增組態」彈出視窗,其餘步驟同方式一

  • 組態設計

    方式一:直接在範本組態清單中點擊「設計」

    方式二:在產品管理中,找到對應的設備產品,點擊「組態設計」,前提是該範本已經新增過範本組態,否則需要先新增組態

  • 組態分享

    方式一:直接在範本組態清單中點擊「分享」

    選擇要分享設備

    範本組態頁面截圖

    方式二:在產品管理中,找到對應的產品,點擊組態分享,該範本已經新增過範本組態,否則分享失敗

    選擇要分享設備

    點擊「分享」產生分享連結或分享 QR Code。分享連結可加密,後期也可關閉分享

    範本組態頁面截圖

    方式三:在範本組態編輯器中點擊「分享」,其餘步驟同方式一

  • 刪除組態

    選擇要刪除的組態,點擊「刪除」

    再點擊「確認」按鈕,提示「刪除成功」,刪除後,該組態對應的範本下不再關聯組態畫面,與該範本相關聯的設備無法查看和分享組態,已經分享的組態對應的分享連結和分享 QR Code 會失效

  • 組態查看

    在設備管理中找到該組態綁定的產品下的設備,點擊「查看詳情」,點擊「組態應用」,查看組態。

2. 場景組態 ​

場景組態 是針對場景繪製的組態畫面,變數來源於場景中的所有變數,以場景作為對象,繪製場景組態畫面,實現對場景的視覺化管理。

場景組態頁面截圖
  • 新增組態,

    方法一:點擊「新增」按鈕,需維護元件名稱、關聯場景必填資訊

    方法二:在場景清單中,點擊「組態設計」,如果該範本未曾新增過場景組態,則會跳轉到「場景組態」選單下,並自動開啟「新增組態」彈出視窗,其餘步驟同方式一

    方法三:在產品管理中,點擊「查看」,點擊「組態應用」,如果沒有組態,可以點擊「建立組態」按鈕,將會跳轉到「場景組態」選單下,並自動開啟「新增組態」彈出視窗,其餘步驟同方式一

  • 組態設計

    方式一:直接在場景組態清單中點擊「設計」

    方式二:在場景清單中,找到對應的場景,點擊「組態設計」,前提是該範本已經新增過場景組態,否則需要先新增組態

  • 組態分享

    方式一:直接在場景組態清單中點擊「分享」,產生分享連結或分享 QR Code。分享連結可加密,後期也可關閉分享

    方式二:在場景組態編輯器中點擊「分享」,其餘步驟同方式一

  • 刪除組態

    選擇要刪除的組態,點擊「刪除」

    再點擊「確認」按鈕,提示「刪除成功」,刪除後,該組態對應的場景下不再關聯組態畫面,與該模型相關聯的場景無法查看和分享組態,已經分享的組態對應的分享連結和分享 QR Code 會失效

3. 獨立組態 ​

獨立組態 針對組態應用畫面關聯多個設備或不同設備下的不同從站和資料點的相關資料顯示、控制等功能。獨立組態適用於不同產品下的設備組態設計,控制項可關聯帳號內所有設備的資料變數。

獨立組態頁面截圖
  • 新增組態,

    點擊「新增」按鈕,需維護元件名稱、關聯場景必填資訊

  • 組態設計

    直接在場景組態清單中點擊「設計」

  • 組態分享

    方式一:直接在場景組態清單中點擊「分享」,產生分享連結或分享 QR Code。分享連結可加密,後期也可關閉分享

    方式二:在場景組態編輯器中點擊「分享」,其餘步驟同方式一

  • 刪除組態

    選擇要刪除的組態,點擊「刪除」

    再點擊「確認」按鈕,提示「刪除成功」,刪除後,已經分享的組態對應的分享連結和分享 QR Code 會失效

三、圖庫管理 ​

圖庫管理可用於上傳和管理各種圖片,便於在組態編輯器「圖庫」中使用圖片,系統已經內建了按鈕、指示燈、工業泵浦、儲槽、馬達、電力符號、閥門、反應器、風機、管線、建築物、鍋爐、熱交換站、機械設備、交通、警示標誌、人物、天氣、自然、全景、3D等圖。

三、圖庫管理頁面截圖

四、圖表管理 ​

圖表管理用於自訂圖表元件,自訂圖表可在組態編輯器「圖表」中使用該定義元件。

自訂的圖表基於Echart進行擴充,可參考用Echart官網範例進行客製化調整,例如:需要在「組態編輯器」中使用一個折線圖,可在「圖表管理器」中定義一個折線圖元件,然後在「組態編輯器」左側「圖表」中找到對應元件拖曳到編輯面板中,同時根據需求可以在組態編輯器中對其進行資料綁定(目前支援url綁定)。

圖表元件包含折線圖、長條圖、圓餅圖、散佈圖、K線圖、雷達圖、熱力圖、關係圖、水球圖、樹狀圖、旭日圖、儀表圖、漏斗圖、路徑圖、3D柱圖、3D地圖、文字雲圖等。

四、圖表管理頁面截圖

五、元件管理 ​

元件管理是指使用者可自行定義元件,後在組態編輯器「更多」中使用該定義元件。

自訂元件支援Vue和ElementUI(可以使用http進行資料請求)。

五、元件管理頁面截圖

六、模型管理 ​

模型管理是指使用者可將第三方3D模型匯入系統,後可在組態編輯器「模型」中使用該匯入模型。

模型支援FBX、GLB、GLTF、OBJ等格式的類型檔案(其他類型可在程式碼中進行擴充)。

六、模型管理頁面截圖

七、組態設定驗收 ​

驗收項正常表現
組態類型範本組態、場景組態、獨立組態選擇正確
變數綁定變數來源、物模型識別碼、設備或場景上下文正確
即時更新設備上報後組態元件能更新
控制下發控制元件能向設備下發並收到回傳
分享存取分享連結或 QR Code 可存取,關閉分享後失效
權限隔離一般使用者只能查看自己有權限的設備或場景
資源載入圖片、圖表、3D 模型在執行階段正常載入
行動端展示行動端版面不遮擋、不溢出、操作可用

八、常見問題 ​

組態頁面沒有資料顯示 ​

檢查產品或場景是否綁定正確,變數是否啟用,設備是否線上,設備是否有上報,變數識別碼是否與物模型一致。

分享連結無法存取 ​

檢查組態是否已刪除、分享是否關閉、分享密碼是否正確、存取網域名稱和 Nginx 轉發是否正確。

控制按鈕無效 ​

檢查物模型是否可寫,設備是否線上,設備端是否實現指令處理,目前使用者是否有控制權限。

圖片或模型載入失敗 ​

檢查素材是否被刪除、路徑是否正確、檔案大小是否過大、跨域和靜態資源服務是否正常。

九、二次開發入口 ​

類型路徑或介面說明
組態頁面vue3/src/views/dragEditor組態設計工具和執行階段
元件目錄vue3/src/views/dragEditor/components自訂元件和元件庫
產品應用設定vue3/src/views/iot/product產品狀態模式和組態應用
設備詳情vue3/src/views/iot/device設備組態應用入口
場景頁面vue3/src/views/scene/list場景組態入口
後端介面/goview/project、/goview/projectData視覺化專案和資料介面
設備介面/iot/device、/iot/model設備與物模型資料