一、概述
Tips
FastBee組態(tài)編輯器主要由頂部工具欄、左側(cè)導(dǎo)航欄、畫(huà)布、右側(cè)配置欄組成。
- 工具欄：常見(jiàn)的執(zhí)行操作，例如復(fù)制、刪除、置頂、置底、旋轉(zhuǎn)、對(duì)齊、組合、鎖定、圖庫(kù)、導(dǎo)入、導(dǎo)出、撤銷(xiāo)、恢復(fù)、縮放、保存、預(yù)覽。
- PC端：支web端網(wǎng)頁(yè)設(shè)計(jì)，頁(yè)面可設(shè)置多種分辨率。
- 移動(dòng)端：暫不支持，后期可以通過(guò)分享在移動(dòng)端查看。
- 基本組件：具備豐富的基礎(chǔ)組件，包括基本組件、基本形態(tài)、統(tǒng)計(jì)圖，可以更好的模擬工業(yè)場(chǎng)景。
- 圖庫(kù)：可以通過(guò)“圖庫(kù)管理”上傳素材，圖庫(kù)也提供了大量高級(jí)控件，可用于生動(dòng)展現(xiàn)各種場(chǎng)景。
- 畫(huà)布：通過(guò)把組件拖拽放置于此，多個(gè)組件組合，共同完成生動(dòng)的工業(yè)生產(chǎn)流程場(chǎng)景。
- 數(shù)據(jù)：可以通過(guò)mqtt或者h(yuǎn)ttp的形式為組件綁定數(shù)據(jù)來(lái)源實(shí)現(xiàn)交互功能。
- 樣式：編輯組件位置、大小、顏色等。
二、組件配置
1. 頁(yè)面配置
在畫(huà)布區(qū)域中點(diǎn)擊空白處，右側(cè)便會(huì)出現(xiàn)”頁(yè)面”配置欄設(shè)置。
- 背景名稱(chēng)：設(shè)置畫(huà)布背景的名稱(chēng)
- 分辨率：設(shè)置頁(yè)面畫(huà)布的大小，系統(tǒng)給出常見(jiàn)的尺寸，也支持自定義畫(huà)布尺寸。
- 背景顏色：給背景設(shè)置顏色，支持設(shè)置任何顏色。
- 背景圖片：可以添加背景圖片，增加界面設(shè)計(jì)感。
- 拖拽縮放：開(kāi)啟后可在預(yù)覽時(shí)對(duì)畫(huà)布進(jìn)行拖拽和縮放。
2. 樣式設(shè)置
設(shè)置組件在頁(yè)面中的樣式展示，包括位置尺寸、名稱(chēng)、文本、外觀等，不同組件配置的內(nèi)容可能不同，選中組件，右側(cè)便會(huì)出現(xiàn)”組件”配置欄設(shè)置。
位置和尺寸：設(shè)置組件在頁(yè)面畫(huà)布的顯示位置與尺寸，X坐標(biāo)和Y坐標(biāo)，分別以頁(yè)面左上角為起點(diǎn)坐標(biāo)[0,0]，設(shè)置X軸和Y軸的值，調(diào)整組件在頁(yè)面中的位置；寬度和寬度，就是組件的寬度和高度，用于調(diào)整組件尺寸。
組件名稱(chēng)：支持給畫(huà)布上的組件自定義設(shè)置名稱(chēng)，用于標(biāo)記組件的作用等，同時(shí)在組態(tài)預(yù)覽時(shí)不會(huì)顯示設(shè)置的標(biāo)題名稱(chēng)；
角度：以組件為中心，組件可以按順時(shí)針或者逆時(shí)針旋轉(zhuǎn)任意角度，在右上角“圓盤(pán)”旋轉(zhuǎn)，設(shè)置想要旋轉(zhuǎn)的角度即可。
基本樣式：可設(shè)置組件的外觀，包括不限于圖層高度、背景顏色、透明度、邊框圓角、陰影顏色、組件顯隱等
特定屬性：根據(jù)組件的不同，擁有不同的特有屬性，以“文本”為例，支持設(shè)置文本的文字、對(duì)齊方式、字體、大小、顏色、邊框、邊框顏色等
3. 數(shù)據(jù)綁定
支持對(duì)組件變量狀態(tài)、事件、動(dòng)畫(huà)效果、交互進(jìn)行配置，不同組件配置的內(nèi)容不同，不同組件的配置將在下面介紹，選中組件，右側(cè)便會(huì)出現(xiàn)”組件”配置欄設(shè)置，點(diǎn)擊“數(shù)據(jù)綁定”
參數(shù)綁定：組件展示數(shù)據(jù)的來(lái)源。選擇設(shè)備、選擇變量，所關(guān)聯(lián)的變量就是產(chǎn)生數(shù)據(jù)的來(lái)源。
a.先從頂部工具欄中綁定設(shè)備
b.選擇變量
事件：綁定組件的單擊事件，包含操作變量、跳轉(zhuǎn)外部鏈接、打開(kāi)已經(jīng)完成的組態(tài)頁(yè)面窗口等。
a.勾選“單擊” CheckBox，然后點(diǎn)擊編輯圖標(biāo)，進(jìn)入編輯狀態(tài)
b.根據(jù)需求自行配置動(dòng)作類(lèi)型（后期可擴(kuò)展）
動(dòng)畫(huà)效果：動(dòng)效有4種，分別為”顯隱”、”旋轉(zhuǎn)”、”閃爍” 和 ”滑動(dòng)”。
a.顯隱：勾選”顯隱”字段 CheckBox, 并點(diǎn)擊”編輯”圖標(biāo)，會(huì)出現(xiàn)設(shè)置的彈窗。選擇變量，設(shè)置綁定變量的范圍大小，為隱藏的觸發(fā)條件。
b.旋轉(zhuǎn)：勾選”旋轉(zhuǎn)”字段 CheckBox, 并點(diǎn)擊”編輯”圖標(biāo)，會(huì)出現(xiàn)設(shè)置的彈窗。選擇變量，設(shè)置綁定變量的范圍大小，為隱藏的觸發(fā)條，同時(shí)可選擇動(dòng)畫(huà)快慢。
c.閃爍：勾選”閃爍”字段 CheckBox, 并點(diǎn)擊”編輯”圖標(biāo)，會(huì)出現(xiàn)設(shè)置的彈窗。選擇變量，設(shè)置綁定變量的范圍大小，為隱藏的觸發(fā)條件。設(shè)置彈框和”顯隱”一樣。
d.閃爍：勾選”滑動(dòng)”字段 CheckBox, 并點(diǎn)擊”編輯”圖標(biāo)，會(huì)出現(xiàn)設(shè)置的彈窗。選擇變量，設(shè)置綁定變量的范圍大小，為隱藏的觸發(fā)條件,同時(shí)可設(shè)置滑動(dòng)周期和滑動(dòng)位置。
填充顏色：定義參數(shù)包括判斷條件、判斷值、填充色的配置
a.添加：點(diǎn)擊“加號(hào)”可新增填充條件，需要配置條件參數(shù)，和填充色。
b.刪除：點(diǎn)擊“刪除圖標(biāo)”可以由下向上一次刪除所添加的填充條件。
狀態(tài)開(kāi)關(guān)：定義參數(shù)包括判斷條件、判斷值、狀態(tài)圖片、填充色的配置
a.添加：點(diǎn)擊“加號(hào)”可新增狀態(tài)開(kāi)關(guān)條件，需要配置條件參數(shù)，狀態(tài)圖片和填充色。
b.刪除：點(diǎn)擊“刪除圖標(biāo)”可以由下向上一次刪除所添加的狀態(tài)開(kāi)關(guān)條件。
三、工具欄
工具欄為組件在畫(huà)布中提供了一些常用操作功能，從左到右功能依次如下
- 復(fù)制：在畫(huà)布中，復(fù)制多個(gè)相同配置的組件。
- 刪除：刪除單個(gè)或者多個(gè)畫(huà)布中的組件。
- 置頂：在多個(gè)組件堆疊的情況下，將選中組件移到最上面一層。
- 置底：在多個(gè)組件堆疊的情況下，將選中組件移到最下面一層。
- 旋轉(zhuǎn)：組件可以按順時(shí)針旋轉(zhuǎn)90°、逆時(shí)針旋轉(zhuǎn)90°、水平旋轉(zhuǎn)，垂直旋轉(zhuǎn)和自定義角度等。
- 對(duì)齊：將所選中的組件（包括圖片）按特定的方向?qū)R，包含左對(duì)齊、右對(duì)齊、上對(duì)齊、下對(duì)齊、水平等間隔和垂直等間隔等
- 組合：將多個(gè)組件編為一個(gè)組，便于同時(shí)對(duì)多個(gè)組件進(jìn)行操作，如復(fù)制、改變組件的位置等。
- 取消組合：取消多個(gè)組件組合，恢復(fù)組件獨(dú)立性。
- 鎖定：用于鎖定組件。組件鎖定后，該組件將不能被選中，不可改變組件顯示位置等。若要對(duì)組件進(jìn)行操作，需解鎖。
- 解鎖：用于解鎖被鎖定的組件，解鎖后的組件可進(jìn)行操作。
- 圖庫(kù)：用于給畫(huà)布中添加圖片，圖庫(kù)中可以收藏一些常用的圖片，若無(wú)法滿(mǎn)足需求還可以從本地上傳一些常用圖片到收藏夾中。
- 設(shè)備綁定：綁定設(shè)置，用于組件在畫(huà)布中的屬性綁定和交互。
- 導(dǎo)入：支持把導(dǎo)出的組態(tài)文件導(dǎo)入進(jìn)來(lái)，導(dǎo)入進(jìn)來(lái)組態(tài)文件的數(shù)據(jù)源與當(dāng)前組態(tài)不一致時(shí)只兼容界面設(shè)計(jì)。
- 導(dǎo)出：支持把組態(tài)工程導(dǎo)出，可用于存檔或者在新組態(tài)中應(yīng)用。
- 撤銷(xiāo)：撤銷(xiāo)上一步操作。
- 恢復(fù)：恢復(fù)已被撤銷(xiāo)的操作。
- 縮放：支持頁(yè)面的畫(huà)布按照比例進(jìn)行縮放顯示。
- 保存：對(duì)當(dāng)前的組態(tài)設(shè)計(jì)進(jìn)行保存，支持點(diǎn)擊“保存”按鈕手動(dòng)保存。
- 預(yù)覽：對(duì)當(dāng)前組態(tài)設(shè)計(jì)的效果預(yù)覽查看，點(diǎn)擊“預(yù)覽”，按鈕即可打開(kāi)當(dāng)前組態(tài)設(shè)畫(huà)面；
- 幫助：可以直接跳轉(zhuǎn)到我們的文檔說(shuō)明，參考文檔進(jìn)行操作。
四、組件庫(kù)
組件作為組態(tài)的重要組成部分，是組態(tài)的核心。通過(guò)拖拽所需的組件到畫(huà)布中，在配置組件的樣式和數(shù)據(jù)，實(shí)現(xiàn)組件直接的數(shù)據(jù)交換，共同構(gòu)建出各種工業(yè)場(chǎng)景。組件包括：基本組件、基本形狀、統(tǒng)計(jì)圖形、圖庫(kù)組件、圖表組件和更多組件等
1. 基本組件
基本組件包括：面板、文字、數(shù)顯框、數(shù)顯面板、狀態(tài)開(kāi)關(guān)、按鈕、水流、液位、螢石云視頻、直播視頻、通用視頻、時(shí)間、地圖、天氣、報(bào)警記錄、維修記錄、三維場(chǎng)景、VR場(chǎng)景、數(shù)據(jù)表格等
1.1 文字
用來(lái)表達(dá)和展示所指定的內(nèi)容，可在組件樣式中直接輸入文本。
在組件樣式中支持位置、尺寸、組件名稱(chēng)、圖層高度、背景顏色、透明度、邊框圓角、陰影長(zhǎng)度、陰影顏色、文字、對(duì)齊方式、字體類(lèi)型、字體樣式、字體粗細(xì)、字體大小、組件顏色、組件顯隱、邊框?qū)挾取⑦吙蝾伾?，詳情參?a class="route-link" href="/doc/pages/scadaEditer/#_2-%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE">樣式配置。
在數(shù)據(jù)綁定中支持該元件的事件、動(dòng)畫(huà)配置，詳情參考數(shù)據(jù)綁定。
1.2 數(shù)顯框
用來(lái)表達(dá)數(shù)字的變化，綁定參數(shù)后實(shí)時(shí)顯示當(dāng)前設(shè)備推送的數(shù)值。
在組件樣式中支持位置、尺寸、組件名稱(chēng)、圖層高度、背景顏色、透明度、邊框圓角、陰影長(zhǎng)度、陰影顏色、文字、對(duì)齊方式、字體類(lèi)型、字體大小、組件顏色、數(shù)據(jù)類(lèi)型、小數(shù)位數(shù)、組件顯隱，詳情參考樣式配置。
在數(shù)據(jù)綁定中支持該元件的參數(shù)綁定、事件、動(dòng)畫(huà)、填充條件配置，詳情參考數(shù)據(jù)綁定。
1.3 數(shù)顯面板
用于表示多個(gè)數(shù)顯框的組合，避免重復(fù)使用多個(gè)數(shù)顯框進(jìn)行組合搭建，由標(biāo)題和表格組成，可綁定多個(gè)參數(shù)，可設(shè)置標(biāo)題，可自定義展示列屬性。
在組件樣式中支持位置、尺寸、組件名稱(chēng)、圖層高度、背景顏色、透明度、邊框圓角、陰影長(zhǎng)度、陰影顏色、圖片選擇、對(duì)齊方式、字體大小、組件顏色、組件顯隱、邊框?qū)挾?、邊框顏色、?biāo)題大小、標(biāo)題顯隱，詳情參考樣式配置。
在數(shù)據(jù)綁定中支持該元件的參數(shù)綁定、標(biāo)題名稱(chēng)、表格配置。
1、綁定變量：點(diǎn)擊“編輯圖標(biāo)”可以進(jìn)行多個(gè)參數(shù)綁定選擇。
2、標(biāo)題名稱(chēng)：可修改標(biāo)題名稱(chēng)，也可以在組件樣式中隱藏掉標(biāo)題。
3、表格配置：配置表格要顯示的屬性列，和該列的字體顏色。
1.4 狀態(tài)開(kāi)關(guān)
用于元件點(diǎn)擊后切換開(kāi)關(guān)狀態(tài)，或者設(shè)備上下線(xiàn)，開(kāi)關(guān)狀態(tài)切換，可以在數(shù)據(jù)綁定中進(jìn)行配置。
在組件樣式中支持位置、尺寸、組件名稱(chēng)、圖層高度、背景顏色、透明度、陰影長(zhǎng)度、陰影顏色、圖片選擇、濾鏡/陰影、組件顏色、組件顯隱，詳情參考樣式配置。
在數(shù)據(jù)綁定中支持該元件的參數(shù)綁定、事件、狀態(tài)開(kāi)關(guān)配置。
1、參數(shù)綁定：在綁定參數(shù)中可以選擇綁定的是變量狀態(tài)還是設(shè)備狀態(tài)。如果選擇變量狀態(tài)，則“狀態(tài)開(kāi)關(guān)”將根據(jù)綁定的變量條件進(jìn)行狀態(tài)切換；如果選擇設(shè)備狀態(tài)，則“狀態(tài)開(kāi)關(guān)”將根據(jù)設(shè)備上下線(xiàn)狀態(tài)進(jìn)行狀態(tài)切換。
2、事件：設(shè)置點(diǎn)擊事件，實(shí)現(xiàn)點(diǎn)擊后狀態(tài)變化，詳情參考數(shù)據(jù)綁定。
3、狀態(tài)開(kāi)關(guān)：狀態(tài)類(lèi)型為變量狀態(tài)時(shí)可以進(jìn)行狀態(tài)條件配置（可先設(shè)置“點(diǎn)擊事件”，選擇“開(kāi)關(guān)控制”，并設(shè)置“狀態(tài)開(kāi)關(guān)”條件，當(dāng)點(diǎn)擊時(shí)組件會(huì)給設(shè)備發(fā)送數(shù)據(jù)，設(shè)備接受到數(shù)據(jù)后需給組件反饋數(shù)據(jù)，反饋數(shù)據(jù)如符合“狀態(tài)開(kāi)關(guān)”條件，就可以安裝狀態(tài)開(kāi)關(guān)條件設(shè)置的圖片或者顏色進(jìn)行切換），詳情參考數(shù)據(jù)綁定；狀態(tài)類(lèi)型為設(shè)備狀態(tài)時(shí)可進(jìn)行設(shè)備上下線(xiàn)配置。
1.5 按鈕
通過(guò)按鈕可通過(guò)對(duì)設(shè)備一些變量進(jìn)行指令下發(fā)控制，可設(shè)置密碼，如果密碼不正確無(wú)法下發(fā)指令。
在組件樣式中支持位置、尺寸、組件名稱(chēng)、圖層高度、背景顏色、透明度、陰影長(zhǎng)度、陰影顏色、圖片選擇、文字、對(duì)齊方式、字體類(lèi)型、字體大小、組件顏色、組件顯隱，詳情參考樣式配置。
在數(shù)據(jù)綁定中支持該元件的事件、組件密碼、動(dòng)畫(huà)配置，詳情參考數(shù)據(jù)綁定。
1、事件：參考數(shù)據(jù)綁定。
2、設(shè)置密碼：可給改組件點(diǎn)擊時(shí)配置密碼，密碼正確方可響應(yīng)點(diǎn)擊事件
3、動(dòng)畫(huà)：參考數(shù)據(jù)綁定。
1.6 水流
水流組件可以配合管道圖庫(kù)來(lái)使用，可自行設(shè)置組件樣式，可調(diào)整圖層高度，方可展示到其他圖片上方。
在組件樣式中支持位置、尺寸、組件名稱(chēng)、圖層高度、背景顏色、組件顏色、組件顯隱、線(xiàn)條寬度、線(xiàn)條高度、線(xiàn)條間隔、線(xiàn)條形狀、流動(dòng)方向、流動(dòng)速度、錨點(diǎn)個(gè)數(shù)，詳情參考樣式配置。
在數(shù)據(jù)綁定中支持該元件的變量綁定、流動(dòng)參數(shù)配置。
1、參數(shù)綁定：參考數(shù)據(jù)綁定。
2、流動(dòng)參數(shù)：可進(jìn)行兩組流動(dòng)方向條件配置，在滿(mǎn)足判斷條件下進(jìn)行流動(dòng)方向改變。
1.7 液位
液位組件可以配合一些箱體罐體圖庫(kù)來(lái)使用，用于顯示液體高度。
在組件樣式中支持位置、尺寸、組件名稱(chēng)、圖層高度、背景顏色、透明度、陰影長(zhǎng)度、陰影顏色、組件顯隱、液位形狀、波浪顏色、液位標(biāo)簽、字體大小、邊框?qū)挾?、邊框顏色，詳情參?a class="route-link" href="/doc/pages/scadaEditer/#_2-%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE">樣式配置。
在數(shù)據(jù)綁定中支持該元件的變量綁定。詳情參考數(shù)據(jù)綁定。
<
1.8 天氣
天氣組件，一個(gè)組態(tài)頁(yè)面只能有一個(gè)天氣組件，可在數(shù)據(jù)綁定選擇具體位置。
在組件樣式中支持位置、尺寸、組件名稱(chēng)、天氣樣式、圖層高度、背景顏色、透明度、邊框圓角、陰影長(zhǎng)度、陰影顏色、字體類(lèi)型、組件顏色、組件顯隱、邊框?qū)挾取⑦吙蝾伾?，詳情參?a class="route-link" href="/doc/pages/scadaEditer/#_2-%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE">樣式配置。
在數(shù)據(jù)綁定中支持該元件的位置選擇。
1.9 數(shù)據(jù)表格
數(shù)據(jù)表格展示實(shí)時(shí)數(shù)據(jù)或歷史數(shù)據(jù)的報(bào)表，支持?jǐn)?shù)據(jù)來(lái)源和表格列配置。 在組件樣式中支持位置、尺寸、組件名稱(chēng)、圖層高度、背景顏色、透明度、邊框圓角、字體大小、組件顏色、組件顯隱、邊框?qū)挾?、邊框顏色，詳情參?a class="route-link" href="/doc/pages/scadaEditer/#_2-%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE">樣式配置。
在數(shù)據(jù)綁定中支持該元件的參數(shù)綁定、表格類(lèi)型和表格配置。
1、表格類(lèi)型：該元件支持選擇實(shí)時(shí)數(shù)據(jù)表格或歷史數(shù)據(jù)表格。
2、表格配置：用于配置數(shù)據(jù)表格的展示列。
2. 基本形狀
基本形狀包括：三角、矩形、圓形、直線(xiàn)、箭頭線(xiàn)、曲線(xiàn)、豎線(xiàn)和表格等
2.1 表格
表格元件僅支持樣式配置，在組件樣式中支持位置、尺寸、組件名稱(chēng)、圖層高度、背景顏色、透明度、對(duì)齊方式、字體類(lèi)型、字體樣式、字體粗細(xì)、字體大小、組件顏色、組件顯隱，詳情參考樣式配置。
在數(shù)據(jù)綁定中支持該元件的動(dòng)畫(huà)配置。詳情參考數(shù)據(jù)綁定。
1、行數(shù)插入：選中表格元件，增加行數(shù)。
2、行數(shù)刪除：選中表格元件，減少行數(shù)。
3、列數(shù)插入：選中表格元件，增加列數(shù)。
4、列數(shù)刪除：選中表格元件，減少列數(shù)。
注意：雙擊表格元件后再單擊單個(gè)單元格，可以針對(duì)每個(gè)單元格設(shè)置文本，文本的設(shè)置是針對(duì)整個(gè)表格內(nèi)的所有內(nèi)容有效。
3. 統(tǒng)計(jì)圖形
基本形狀包括：曲線(xiàn)圖、折線(xiàn)圖、柱狀圖、餅形圖、儀表圖、溫度計(jì)、地圖和自定義圖形等
3.1 曲線(xiàn)圖
用于展示已綁定設(shè)備的屬性歷史數(shù)據(jù)，當(dāng)組件拖拽到編輯面板后可雙擊組件進(jìn)行數(shù)據(jù)綁定。
在組件樣式中支持位置、尺寸、組件名稱(chēng)、圖層高度、背景顏色、透明度、陰影長(zhǎng)度、陰影顏色、組件顏色、組件顯隱，詳情參考樣式配置。
在圖層中支持該元件鎖定、顯隱和名稱(chēng)編輯。
3.8 自定義
自定義組件默認(rèn)顯示柱狀圖，在“統(tǒng)計(jì)圖形”欄中的默認(rèn)圖形無(wú)法滿(mǎn)足的情況下，可以使用“自定義”進(jìn)行個(gè)性化定制。
在組件樣式中支持位置、尺寸、組件名稱(chēng)、圖層高度、背景顏色、透明度、陰影長(zhǎng)度、陰影顏色、組件顏色、組件顯隱，詳情參考樣式配置。
在圖層中支持該元件鎖定、顯隱和名稱(chēng)編輯。
1、自定義圖形：點(diǎn)擊布局，找到編輯，點(diǎn)擊編輯，可以參考案例編寫(xiě)Echart組件，操作同圖表組件 - 代碼視圖
2、數(shù)據(jù)綁定：點(diǎn)擊數(shù)據(jù)，找到編輯配置，點(diǎn)擊編輯配置，可以填寫(xiě)自定義url進(jìn)行數(shù)據(jù)請(qǐng)求，操作同圖表組件 - 數(shù)據(jù)請(qǐng)求
3、過(guò)濾器：當(dāng)數(shù)據(jù)請(qǐng)求成功后，如果發(fā)現(xiàn)相應(yīng)數(shù)據(jù)無(wú)法匹配定義組件所需的數(shù)據(jù)格式則可以新增“過(guò)濾器”對(duì)數(shù)據(jù)進(jìn)行處理以適配自定義組件的數(shù)據(jù)要求，操作同圖表組件 - 過(guò)濾器
4. 圖庫(kù)組件
圖庫(kù)組件包括“圖庫(kù)管理”中所有圖片
可以向畫(huà)布中添加任何“圖庫(kù)管理”中的圖片，支持組件樣式和數(shù)據(jù)綁定
表格元件僅支持樣式配置，在組件樣式中支持位置、尺寸、組件名稱(chēng)、圖層高度、背景顏色、透明度、圖片選擇、濾鏡/陰影、組件顏色、組件顯隱、邊框?qū)挾取⑦吙蝾伾⑿袛?shù)、列數(shù)，詳情參考樣式配置。
在數(shù)據(jù)綁定中支持該元件的參數(shù)綁定、事件、動(dòng)畫(huà)和狀態(tài)開(kāi)關(guān)配置。詳情參考數(shù)據(jù)綁定。
1、樣式設(shè)置：組件支持樣式修改，如在左側(cè)組件庫(kù)中的圖庫(kù)組件欄中找不到對(duì)應(yīng)的圖片，可以隨便拉一個(gè)圖片到編輯面板，然后通過(guò)布局中的圖片選擇屬性進(jìn)行圖片更換。
2、數(shù)據(jù)綁定：支持變量綁定、事件綁定、動(dòng)畫(huà)綁定和開(kāi)關(guān)狀態(tài)綁定，可以參考前面介紹的模塊綁定進(jìn)行自定義綁定。
5. 圖表組件
圖表組件包括“圖表管理”中所有自定義的圖表，支持echart圖表的擴(kuò)展。
表格元件僅支持樣式配置，在組件樣式中支持位置、尺寸、組件名稱(chēng)、圖層高度、背景顏色、透明度、組件顯隱、代碼視圖，詳情參考樣式配置。
在數(shù)據(jù)綁定中支持該元件的數(shù)據(jù)請(qǐng)求和函數(shù)過(guò)濾。
1、數(shù)據(jù)請(qǐng)求：配置請(qǐng)求的url，如果是系統(tǒng)中的url，只需要配置出前置地址之外的url便可，支持get、post、put請(qǐng)求方式；支持設(shè)置循環(huán)請(qǐng)求時(shí)間，單位為秒、分、時(shí)；支持 Params、Body 和 Headers 配置。
2、過(guò)濾器：可以添加過(guò)濾函數(shù)，對(duì)使用url請(qǐng)求獲取到的數(shù)據(jù)進(jìn)行，函數(shù)組合，生成圖表所需要的數(shù)據(jù)格式類(lèi)型。
3、代碼視圖：配置代碼視圖，默認(rèn)處理完后的數(shù)據(jù)對(duì)象為“echartData”。
注意：其他配置需結(jié)合echart參數(shù)配置進(jìn)行設(shè)置。
6. 更多組件
更多組件包括“組件管理”中所以自定義的組件
五、畫(huà)布
組態(tài)設(shè)計(jì)頁(yè)面區(qū)域，支持對(duì)畫(huà)布的尺寸、背景顏色等進(jìn)行設(shè)置
六、快捷操作
1. 拖轉(zhuǎn)縮放畫(huà)布
- 在預(yù)覽的狀態(tài)下，按住左鍵不放開(kāi)，可以拖拽
- 在預(yù)覽的狀態(tài)下，滑動(dòng)鼠標(biāo)可以進(jìn)行縮放
2. 畫(huà)布縮放
- 按住 TRL + COM，同時(shí)鼠標(biāo)滾輪，可以實(shí)現(xiàn)快速縮放。
3. 預(yù)覽
- 按F12可以進(jìn)行預(yù)覽
七、組件開(kāi)發(fā)擴(kuò)展
以Text組件為例
Warning
務(wù)必進(jìn)行的測(cè)試：
- 左邊導(dǎo)航欄
- 畫(huà)布
- 右側(cè)配置欄 -> 變量配置
- 預(yù)覽 -> 使用mqtt進(jìn)行數(shù)據(jù)綁定
- 1.首先在 scada 的文件夾里新增基礎(chǔ)配置文件
| 路徑 | 功能 |
|---|---|
| scada/topo/components/data-toolbox/base.json | 定義組件在左邊導(dǎo)航欄中的屬性和參數(shù) |
| scada/topo/components/control/ViewText.vue | 定義組件功能，數(shù)據(jù)綁定 |
| scada/topo/components/topoBase.vue | 導(dǎo)入組件 |
| scada/topo/components/topoProperties.vue | 定義右側(cè)配置欄樣式和參數(shù)屬性 |
| scada/topo/components/topoToolbox.vue | 對(duì)組件進(jìn)行分類(lèi) |
- 2.在 components/data-toolbox/base.json 中定義，組件的在導(dǎo)航欄中的屬性、位置、樣式
{
"title": "基本",
"icon": "base",
"opened": false,
"items": [
{
"text": "文字",
"icon": "base/word.png",
"type": "static",
"info": {
"type": "text",
"componentShow": ["單擊", "組件顏色", "動(dòng)畫(huà)"],
"action": [],
"dataBind": {
"djAction": false,
"action": "",
"productId": "",
"serialNumber": "",
"slaveId": "",
"identifier": "",
"modelName": "",
"modelValue": "",
"redirectUrl": ""
},
"dataAction": {
"xyAction": false,
"xzAction": false,
"ssAction": false,
"hdAction": false,
"serialNumber": "",
"identifier": "",
"modelName": "",
"paramJudge": "",
"paramJudgeData": "",
"rotationSpeed": "中",
"translateList": []
},
"style": {
"position": {
"x": 0,
"y": 0,
"w": 100,
"h": 30
},
"backColor": "#ff000000",
"foreColor": "#000",
"zIndex": 1,
"transform": 0,
"transformType": "rotate(0deg)",
"waterBorderWidth": 1,
"waterBorderColor": "rgba(255, 255, 255, 0)",
"text": "Test",
"textAlign": "center",
"fontSize": 14,
"fontFamily": "Arial"
}
}
},
]
}- 3.在 components/control 中定義組件，編寫(xiě)組件功能和參數(shù)通訊
<template>
<div
:style="{
fontSize: detail.style.fontSize + 'px',
fontFamily: detail.style.fontFamily,
color: detail.style.foreColor,
textAlign: detail.style.textAlign,
lineHeight: detail.style.position.h + 'px',
border: detail.style.waterBorderWidth + 'px solid !important',
borderRadius: detail.style.borderRadius + 'px !important',
borderColor: detail.style.waterBorderColor,
}"
:class="classStyle"
:id="detail.identifier"
>
{{ detail.style.text }}
<div v-show="false">{{ dataInit }}</div>
</div>
</template>
<script>
import { mapState } from 'vuex';
import BaseView from './View';
import topoUtil from '@/utils/topo/topo-util';
import { getAnimate } from '@/utils/topo/anime';
export default {
name: 'view-text',
extends: BaseView,
data() {
return {
classStyle: null,
};
},
computed: {
...mapState({
mqttData: (state) => state.topoEditor.mqttData,
}),
dataInit() {
if (this.mqttData) {
// 數(shù)顯款數(shù)值初始化
if (this.detail.dataBind.identifier && this.mqttData.serialNumber == this.detail.dataBind.serialNumber) {
const message = this.mqttData.message.find((item) => item.id === this.detail.dataBind.identifier);
if (message) {
let value = !message.value ? 0 : message.value;
if (this.detail.componentShow.indexOf('參數(shù)綁定') > -1) {
let unit = this.detail.dataBind.paramUnit == null ? '' : this.detail.dataBind.paramUnit;
this.detail.style.text = value + unit;
}
}
}
// 動(dòng)畫(huà)初始化
if (
this.detail.dataAction.serialNumber &&
this.detail.dataAction.identifier &&
this.detail.dataAction.paramJudge &&
this.detail.dataAction.paramJudgeData != undefined &&
this.mqttData.serialNumber == this.detail.dataAction.serialNumber
) {
const message = this.mqttData.message.find((item) => item.id === this.detail.dataAction.identifier);
if (message) {
let val = message.value;
let isGd = topoUtil.judgeSize(this.detail.dataAction.paramJudge, val, this.detail.dataAction.paramJudgeData);
if (isGd) {
if (this.detail.dataBind.xyAction) {
// 顯隱判斷
getAnimate().set(document.getElementById(this.detail.identifier), {
display: 'block',
});
}
if (this.animateView) {
this.animateView.play();
}
} else {
if (this.detail.dataBind.xyAction) {
// 顯隱判斷
getAnimate().set(document.getElementById(this.detail.identifier), {
display: 'none',
});
}
if (this.animateView) {
this.animateView.pause();
}
}
}
}
}
},
},
methods: {},
};
</script>
<style lang="scss" scoped>
.view-text {
height: 100%;
width: 100%;
}
</style>- 4.在 components/topoBase.vue 導(dǎo)入定義的組件
<script>
import ViewText from './control/ViewText';
export default {
name: 'TopoBase',
components: {
ViewText,
},
};
</script>- 5.在 components/topoProperties.vue 定義參數(shù)
- 6.如果需要對(duì)組件進(jìn)行歸類(lèi)或者新增類(lèi)型可在 components/topoToolbox.vue 添加類(lèi)別
