面板概述

畫面內的所有組件有層級關係，使用「盒子」來實現封裝一組元素，可訂閱一些變量來實現整個盒子內的子元素顯示/隱藏（頁面的最頂層也是一個大的「盒子」，所有的子組件其實都是盒子的children）

組件-盒子

盒子可設置的屬性包括寬高、位置、層的位置（深度）、邊框、背景色，訂閱變量後，可以動態變化這些屬性；

可設置盒子的加載、消失、點擊事件

模板畫面

目前SCADA項目里所有畫面都能夠作為模板被其他畫面引用。使用場景1：一個全局的Layout模板，給所有畫面作為模板使用；使用場景2：自定義一個複雜組件庫，如同博圖裡的Faceplate，只需傳入特定參數/變量即可。

例如製作一個大組件：

1.點擊左上角的「+」創建一個畫面，名稱最好有一定規律或者識別性例如: Partial-xxx或者Template-xxx

2.創建畫面專屬的參數，此處叫「屏幕變量」（需要點擊畫面中空白位置或者剛進入畫面時才會出現）

3.創建此組件的各個元素，所有訂閱變量應該都是訂閱動態此畫面的「屏幕變量」

保存完畢後，即可開始使用這個大組件了：

在任意畫面新建一個組件「盒子」，即可使用，注意填寫對應入參對應值或者變量。

組件概述

基礎組件

文字：靜態/動態文字展示，可配置顏色大小等，可訂閱變量來輸出，也可以添加點擊事件
時間展示：展示當前HMI時間，可配置格式化例如：YYYY-MM-DD HH:mm:ss.SSS為2021-07-29 18:55:33.730
進度條：簡單的進度條，根據進度展示進度，可配置顏色、寬度、和錶盤類型的進度
菜單：提供了樹形可摺疊菜單，方便導航、跳轉畫面
antd圖標：一個icon庫，裡面有常規網頁使用的icon元素
圖片：能夠調用後台導入的圖片資源作展示到畫面
變量查詢表格：能跟查詢一段時間內所組態的變量的數據，每一行代表的是聚合時間，每一列是一個變量
標籤頁：可以將多個畫面集成在此組件中，通過切換標籤頁的方式來實現切換查看
彈框：將畫面以彈框的方式展現出來，同時可以綁定彈框的「確認」和「取消」按鈕觸發的事件
當前報警：特殊組件，根據報警規則展示對應的當前報警信息，可定義多組，每一組通過一個規則 + 一個變量來實現報警，變量代表訂閱哪一個PLC報警變量，而規則是描述該變量每一個bit所代表的意義
報警歷史：特殊組件，根據時間來篩選報警的歷史信息
用戶管理：特殊組件，管理用戶的組件
批次中心：特殊組件，查看、導出批次報表

工業組件

除了管道能特殊的設置流向之外，其他組件都只能配置顏色

圖表組件

動態趨勢圖：可配置多個變量來展示當前的實時數據趨勢
儀錶盤：展示單個變量的值
變量查詢趨勢圖：可以搜索和查詢一段時間內所組態的變量數據，轉化為趨勢圖，每一個變量在圖上代表一根趨勢線

交互組件

輸入框：可控制變量的輸入/輸出，如果需要變量同時有輸入和輸出，則需要在數據訂閱里配置該變量，然後再事件的onChange將變量設置成過程值
時間觸發器：可以輸入時間，預設範圍配置「1.days」 = 今天, 「1.hour」 = 一小時前到現在，以此類推
消息提醒：彈框消息
按鈕：跟文本差不多，可以配置點擊事件
滑動條：可配置輸入/輸出變量，onChange事件可以將值寫入變量
選擇器：下拉框，一般搭配「文本列表」使用，可輸入/輸出
開關：特定樣式的開/關，可輸入/輸出

基本圖形

可組合完成不同的圖形，有些需要調整「旋轉」值來使用

使用過程中碰到的問題

組件選擇不到：建議複雜組件輸入好相應的名稱，在左側點擊展開方便查找；深度太淺的組件也沒有在大的盒子裡，只能從左側嘗試點擊item來找到；有些盒子內的組件占滿了盒子，這時候只能通過點擊盒子內的組件，然後到左側點擊選中的父級item(可能要點兩次)
一個組件的數據訂閱：多個訂閱之間互不影響，都是獨立執行的，也可以多個訂閱同時訂閱一個變量。
數據訂閱邏輯：首先由一個變量出發（目前是三種類型，PLC變量是通過PLC讀過來的，LOC變量是內部變量沒有地址，SCR變量是畫面級別的內部Props，只能在被當做template調用時賦值）多個觸發器之間是順序判斷相當於 if (觸發器1){ then 設置屬性A; 設置屬性B} else if (觸發器2) { then 設置屬性C; } else if (觸發器3){ then ... } else{ ....} 最後一條如果沒有寫條件的相當於走到了else層
Bool值的一些問題：在SCADA中bool類型的觸發條件和設定變量值時是true和false，而對於Word取位的判斷則需要用1和0判斷（後續可能要優化）
數據訂閱的一個觸發條件可以同時設置多個屬性，例如可以同時設置顏色和背景色；事件也可以設置「回調」多個變量值（不過更推薦「同時設置多個變量值」的功能）
取反功能：在回調里設置類型「將變量在固定值中切換」，然後添加兩個值，分別是true和false
可見性設置：如果需要配置一塊元素的可見性，訂閱一個bool的變量，true時可見，false不可見，則可以只需要設置一個觸發器「觸發條件選空，設置屬性』顯示『->』為變量值'"(推薦這麼設置，當然設置兩個條件去做也是沒問題的）

畫面組態編輯

目錄