於 2021年8月11日 (三) 19:00 的修訂

面板概述

組件-盒子

畫面內的所有組件有層級關係，使用「盒子」來實現封裝一組元素，可訂閱一些變量來實現整個盒子內的子元素顯示/隱藏（頁面的最頂層也是一個大的「盒子」，所有的子組件其實都是盒子的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{ ....}
```
if (触发器1) {
  设置属性A;
  设置属性B
} else if (触发器2) {
  设置属性C; 
} else if (触发器3) {
  ...
} else { 
  ...
}
```
最後一條如果沒有寫條件的相當於走到了else分支
Bool值的一些問題：在SCADA中bool類型的觸發條件和設定變量值時是true和false，而對於Word取位的判斷則需要用1和0判斷（後續可能要優化）
數據訂閱的一個觸發條件可以同時設置多個屬性，例如可以同時設置顏色和背景色；事件也可以設置「回調」多個變量值（不過更推薦「同時設置多個變量值」的功能）
取反功能：在回調里設置類型「將變量在固定值中切換」，然後添加兩個值，分別是true和false
可見性設置：如果需要配置一塊元素的可見性，訂閱一個bool的變量，true時可見，false不可見，則可以只需要設置一個觸發器「觸發條件選空，設置屬性』顯示『->』為變量值'"(推薦這麼設置，當然設置兩個條件去做也是沒問題的）

@@ 第35行： / 第35行： @@
 * 文字：静态/动态文字展示，可配置颜色大小等，可订阅变量来输出，也可以添加点击事件
-* 时间展示：展示当前HMI时间，可配置格式化例如 ：YYYY-MM-DD HH:mm:ss.SSS为2021-07-29 18:55:33.730
+* 时间展示：展示当前HMI时间，可配置格式化例如 ：<code>YYYY-MM-DD HH:mm:ss.SSS</code> 为2021-07-29 18:55:33.730
 * 进度条：简单的进度条，根据进度展示进度，可配置颜色、宽度、和表盘类型的进度
 * 菜单：提供了树形可折叠菜单，方便导航、跳转画面
@@ 第74行： / 第74行： @@
 # 组件选择不到：  建议复杂组件输入好相应的名称，在左侧点击展开方便查找；  深度太浅的组件也没有在大的盒子里，只能从左侧尝试点击item来找到；  有些盒子内的组件占满了盒子，这时候只能通过点击盒子内的组件，然后到左侧点击选中的父级item(可能要点两次)
 # 一个组件的数据订阅：多个订阅之间互不影响，都是独立执行的，也可以多个订阅同时订阅一个变量。
-# 数据订阅逻辑：  首先由一个变量出发（目前是三种类型 ，PLC 变量是通过PLC读过来的 ，LOC 变量是内部变量没有地址 ，SCR 变量是画面级别的内部Props，只能在被当做template调用时赋值）  多个触发器之间是顺序判断相当于  if (触发器1){ then 设置属性A; 设置属性B} else if (触发器2) { then 设置属性C; } else if (触发器3){ then ... } else{ ....}  最后一条如果没有写条件的相当于走到了else 层
+# 数据订阅逻辑：  首先由一个变量出发（目前是三种类型 ，<code>PLC</code> 变量是通过PLC读过来的 ，<code>LOC</code> 变量是内部变量没有地址 ，<code>SCR</code> 变量是画面级别的内部Props，只能在被当做template调用时赋值）  多个触发器之间是顺序判断相当于  if (触发器1){ then 设置属性A; 设置属性B} else if (触发器2) { then 设置属性C; } else if (触发器3){ then ... } else{ ....}<syntaxhighlight lang="javascript">
-# Bool值的一些问题：在SCADA中bool类型的触发条件和设定变量值时 是true和false ，而对于Word取位的判断则需要用1和0判断（后续可能要优化）
+if (触发器1) {
+  设置属性A;
+  设置属性B
+} else if (触发器2) {
+  设置属性C;
+} else if (触发器3) {
+  ...
+} else {
+   ...
+}
+</syntaxhighlight> 最后一条如果没有写条件的相当于走到了else 分支
+# Bool值的一些问题：在SCADA中bool类型的触发条件和设定变量值时 是<code>true</code>和<code>false</code> ，而对于Word取位的判断则需要用1和0判断（后续可能要优化）
 # 数据订阅的一个触发条件可以同时设置多个属性，例如可以同时设置颜色和背景色；事件也可以设置“回调”多个变量值（不过更推荐“同时设置多个变量值”的功能）
-# 取反功能：在回调里设置类型“将变量在固定值中切换”，然后添加两个值，分别 是true和false
+# 取反功能：在回调里设置类型“将变量在固定值中切换”，然后添加两个值，分别 是<code>true</code>和<code>false</code>
-# 可见性设置：如果需要配置一块元素的可见性，订阅一 个bool 的变量 ，true 时可见 ，false 不可见，则可以只需要设置一个触发器“触发条件选空，设置属性’显示‘->’为变量值'"(推荐这么设置，当然设置两个条件去做也是没问题的）
+# 可见性设置：如果需要配置一块元素的可见性，订阅一 个<code>bool</code> 的变量 ，<code>true</code> 时可见 ，<code>false</code> 不可见，则可以只需要设置一个触发器“触发条件选空，设置属性’显示‘->’为变量值'"(推荐这么设置，当然设置两个条件去做也是没问题的）

「画面组态编辑」修訂間的差異