僅介紹常用元件以及元件部分樣式設定以及資料來源設定

圖表類元件

1.公共配置

圖例設定

2.柱狀圖&&折線圖

柱狀圖與折線圖獨有設定為 X 軸設定、Y 軸設定、折線(圖柱)設定

a. X 軸設定&&Y 軸設定

b.圖柱設定

對圖柱進行顯示上的設定，圖柱動態資料來源於 studio 中全域性變數

c.折線設定

此部分主要對摺線進行顯示上的設定，折線動態資料來源於 studio 中全域性變數

折線圖最多儲存 1000 條或兩小時內資料，儲存資料量可在系統設定中設定

2.餅圖

餅圖獨有設定為餅圖配置與餅圖資料

a.餅圖配置

b.餅圖資料

參考折線圖/柱狀圖繫結 studio 引數部分

---

資訊類元件

樣式部分就不一一綴敘

1.指令碼輸出&&文字元件

日誌元件僅支援繫結 string 型別元件，其最大儲存資料量支援在全域性設定中修改

文字元件支援繫結 string、number 型別引數

2.標籤選擇器元件

標籤選擇器元件支援綁定當前畫布內除標籤選擇器外所有元件，用來切換繫結元件的顯示與隱藏

標籤選擇器元件僅支援繫結單個元件，若想繫結多個元件，請將元件進行分組，繫結分組

3.基礎分頁表格

分頁表格元件支援繫結 number 型別引數，用來展示 studio 執行資料，其最大儲存資料量支援在全域性設定中修改，分頁表格首列為時間列，預設寬度自適應，支援行列指示、列寬自適應、首列固定等狀態引數進行選擇

---

裝飾類元件

樣式部分就不一一綴敘

此類元件主要為裝飾類，包括邊框元件、裝飾元件、標題元件以及小元件類，使用者可自行選擇

小元件中數字計陣列件、數字翻牌元件、倒計時元件繫結引數型別為 number 型別

小元件中通用天氣元件拖入即可展示當前天氣，系統預設 key 值存在使用次數限制，建議使用過程中，將 key 值設定為使用者申請的高德應用 key

---

圖片類元件

樣式部分就不一一綴敘

影像元件支援使用者自定義上傳圖片充當元件

圖片屬性：

名稱	說明
拉伸填充	將圖片或影片拉伸或壓縮，以填充容器，不保持寬高比
自適應	在保持寬高比的情況下，縮放圖片，使其能夠完全包含在容器中，容器可能會留出空白區域
覆蓋	在保持寬高比的情況下，縮放圖片，使其能夠完全覆蓋容器，容器可能會有部分內容被裁剪
對比自適應	在保持寬高比的情況下，縮小圖片，使其不超過容器的大小，如果縮小後的大小小於原始大小，則按原始大小顯示
預設值	不對圖片或影片進行任何調整，它們會按原始大小顯示在容器中

---

套件元件

樣式部分就不一一綴敘

執行控制組元件中包括執行狀態圖示、暫停圖示、執行圖示、迴圈執行圖示

---

裝置類元件

樣式部分就不一一綴敘

裝置類元件為 IO 元件，繫結的引數為陣列格式引數,陣列長度應為 16，每一項應為 1 或 0，1 表示此點紅色，0 表示此點白色

統計類元件

樣式部分就不一一綴敘

1.豎向產量柱狀圖&&橫向產量柱狀圖

此元件展示的為歷史產量，需要聯動資料庫進行展示，首先選定資料來源表，其次選定展示的引數即可 豎/橫向產量柱狀圖效果圖

源表：需要繫結的資料庫源表 引數：設定需要統計的時間以及時間數量，例時間為1h，數量為12，則統計12h內的資料

2.資料折線圖

此元件展示的為資料庫中每一列的資料，首先選定資料來源表，其次為每一列選定資料來源(來源於哪一列) 資料折線圖效果圖

折線：可編輯需要展示的折線寬度、大小等引數，可增加、刪除折線個數 源表：需要繫結的資料庫源表 資料：將源表中某一列的資料繫結至 折線-1 警示線：可在折線圖中設定異常線和報警線

3.單次統計表格

統計表格資料來源需先繫結 studio 中變數，其次根據繫結的變數繫結每一列的資料來源，繫結的變數格式為 JSON 字串,如： [{GB = 0.000000,SXLJ = 0.000000,QHLH = 0.000000,焊點編號 = 1.000000,result = 0.000000,HXLJ = 0.000000,}, {GB = 0.000000,SXLJ = 0.000000,QHLH = 0.000000,焊點編號 = 2.000000,result = 0.000000,HXLJ = 0.000000,}, {GB = 0.000000,SXLJ = 0.000000,QHLH = 0.000000,焊點編號 = 3.000000,result = 0.000000,HXLJ = 0.000000,},]

result 結果列預設繫結，在studio建立中，應加入結果列result

單次統計表格效果圖

資料來源：繫結studio中的全域性變數，固定格式如上所示（需注意每層列數應保持一致！） 表頭：繫結其中一列資料，更改對應的表頭名稱

4.配方表格

配方表格用來展示 studio 配方，使用者拖進畫布後無需進行過多設定即可在預覽頁正常使用

配方檔案修改方式：單擊表格資料->修改

圖示	名稱	說明
	編輯按鈕	編輯修改配方表格名稱
	重新整理按鈕	studio 修改配方表格後，需重新整理 HMI 才會同步顯示
	新增按鈕	新增配方檔案，使用者選擇本地配方檔案上傳
	選擇按鈕	studio 使用當前配方檔案
	刪除按鈕	刪除當前配方檔案
	儲存按鈕	修改配方檔案後點擊儲存

5.歷史查詢表格

歷史查詢表格表格支援查詢歷史資料，支援重複性查詢，執行時首先繫結源表，然後選擇查詢條件，進行查詢 歷史查詢表格效果圖 選擇表源：選擇studio工程中寫入的資料庫 狀態選擇：可選擇檢視ALL/OK/NG的結果 起始時間、截止時間：可選擇某一時間段內的資料 查詢：更新上述引數後，需點選查詢，HMI介面才會更新 匯出：將當前顯示的表格匯出 重複性查詢：點選後出現重複性資料折線圖，統計重複性

6.事件通知表格

事件通知表格拖入看板即可使用，無需進行資料配置，執行時會自動寫入事件，並進行輪播展示(如 studio TCP Server 狀態切換等) 事件通知表格效果圖

7.引數修改框

可以繫結studio設定的某個全域性變數引數，在執行頁面可以通過儲存看板變數圖示或者按鈕繫結儲存變數事件來更改繫結引數的值，將繫結的全域性變數引數更改為輸入框中的內容 引數修改框效果圖

輸入框配置：設定輸入框的預設值 引數：繫結studio中需要修改的全域性變數引數 別名：修改名稱

8.良率統計

良率統計元件用於顯示執行後 OK、NG 以及良率顯示，支援文字顯示以及餅圖顯示 OK、NG 佔比 良率統計元件資料來源於 studio 儲存在資料庫中資料，需選定源表 良率統計效果圖

源表：繫結studio工程中寫入的資料庫

9.系統資訊

顯示基本系統資訊，如CPU、記憶體佔用情況等 系統資訊效果圖

10.良率查詢

良率查詢在繫結資料來源表後，可以查詢過往時間的良率情況 良率查詢效果圖

源表：繫結studio工程中寫入的資料庫 時間：選擇查詢的起始日期和截止日期

通用類元件元件

1.圖示元件

樣式部分就不一一綴敘

圖示元件目前內建六種圖示供使用者選擇，分為五種執行圖示與一種頁面圖示

執行圖示分別為暫停圖示、執行圖示、迴圈執行圖示、執行狀態、儲存看板變數 執行圖示與 studio 關聯，控制著 studio 程式的執行，使用者可直接拖入畫布中使用，無需過多設定

圖示	名稱	說明
	暫停圖示	暫停studio中正在執行的程式
	執行圖示	將整個studio中程式執行一次
	迴圈執行圖示	迴圈執行studio程式執行欄的程式
	執行狀態圖示	程式執行時為綠色，程式未執行時是紅色
	儲存看板變數圖示
	執行子程式	執行後自動切換至目標子程式並執行，執行完畢後工程列表恢復至執行前的程式頁面

頁面圖示為全屏切換圖示，頁面圖示與頁面顯示狀相關，可直接拖入畫布中使用

圖示	名稱	說明
	全屏切換圖示	執行時切換執行頁面全屏/退出全屏顯示

---

2.影像元件

樣式部分就不一一綴敘

圖示	名稱	說明	設定圖
	1D影像
	2D影像
	3D影像	3D 圖元件元件，使用者可以選擇不同 sceneID 展示不同 3D 圖，使用者可直接拖入畫布中使用，無需過多設定

3.方形按鈕元件

樣式部分就不一一綴敘 方形按鈕元件含有兩種狀態，可以設定預設顯示狀態以及狀態切換條件(單擊、雙擊、右鍵等)，每種狀態都有自己獨有樣式以及事件

事件模組包括觸發事件、動作、以及目標

名稱	說明
觸發事件	包括單擊、雙擊、右鍵、滑鼠移入、滑鼠移出。
動作	看板跳轉、暫停、單步執行、迴圈執行、儲存看板變數、全屏、退出全屏
目標	動作目標：目前僅有看板跳轉動作含有目標選項(跳轉至哪一個看板)