組態(tài)編輯器

fastbee大約 23 分鐘

一、概述

提示

FastBee組態(tài)編輯器主要由頂部工具欄、左側(cè)導(dǎo)航欄、畫布、右側(cè)配置欄組成。

工具欄：常見的執(zhí)行操作，例如復(fù)制、刪除、置頂、置底、旋轉(zhuǎn)、對齊、組合、鎖定、圖庫、導(dǎo)入、導(dǎo)出、撤銷、恢復(fù)、縮放、保存、預(yù)覽。
PC端：支web端網(wǎng)頁設(shè)計(jì)，頁面可設(shè)置多種分辨率。
移動端：暫不支持，后期可以通過分享在移動端查看。
基本組件：具備豐富的基礎(chǔ)組件，包括基本組件、基本形態(tài)、統(tǒng)計(jì)圖，可以更好的模擬工業(yè)場景。
圖庫：可以通過“圖庫管理”上傳素材，圖庫也提供了大量高級控件，可用于生動展現(xiàn)各種場景。
畫布：通過把組件拖拽放置于此，多個組件組合，共同完成生動的工業(yè)生產(chǎn)流程場景。
數(shù)據(jù)：可以通過mqtt或者h(yuǎn)ttp的形式為組件綁定數(shù)據(jù)來源實(shí)現(xiàn)交互功能。
樣式：編輯組件位置、大小、顏色等。

二、組件配置

1. 頁面配置

在畫布區(qū)域中點(diǎn)擊空白處，右側(cè)便會出現(xiàn)”頁面”配置欄設(shè)置。

背景名稱：設(shè)置畫布背景的名稱
分辨率：設(shè)置頁面畫布的大小，系統(tǒng)給出常見的尺寸，也支持自定義畫布尺寸。
背景顏色：給背景設(shè)置顏色，支持設(shè)置任何顏色。
背景圖片：可以添加背景圖片，增加界面設(shè)計(jì)感。
拖拽縮放：開啟后可在預(yù)覽時對畫布進(jìn)行拖拽和縮放。

2. 樣式設(shè)置

設(shè)置組件在頁面中的樣式展示，包括位置尺寸、名稱、文本、外觀等，不同組件配置的內(nèi)容可能不同，選中組件，右側(cè)便會出現(xiàn)”組件”配置欄設(shè)置。

位置和尺寸：設(shè)置組件在頁面畫布的顯示位置與尺寸，X坐標(biāo)和Y坐標(biāo)，分別以頁面左上角為起點(diǎn)坐標(biāo)[0,0]，設(shè)置X軸和Y軸的值，調(diào)整組件在頁面中的位置；寬度和寬度，就是組件的寬度和高度，用于調(diào)整組件尺寸。
組件名稱：支持給畫布上的組件自定義設(shè)置名稱，用于標(biāo)記組件的作用等，同時在組態(tài)預(yù)覽時不會顯示設(shè)置的標(biāo)題名稱；
角度：以組件為中心，組件可以按順時針或者逆時針旋轉(zhuǎn)任意角度，在右上角“圓盤”旋轉(zhuǎn)，設(shè)置想要旋轉(zhuǎn)的角度即可。

基本樣式：可設(shè)置組件的外觀，包括不限于圖層高度、背景顏色、透明度、邊框圓角、陰影顏色、組件顯隱等
特定屬性：根據(jù)組件的不同，擁有不同的特有屬性，以“文本”為例，支持設(shè)置文本的文字、對齊方式、字體、大小、顏色、邊框、邊框顏色等

3. 數(shù)據(jù)綁定

支持對組件變量狀態(tài)、事件、動畫效果、交互進(jìn)行配置，不同組件配置的內(nèi)容不同，不同組件的配置將在下面介紹，選中組件，右側(cè)便會出現(xiàn)”組件”配置欄設(shè)置，點(diǎn)擊“數(shù)據(jù)綁定”

參數(shù)綁定：組件展示數(shù)據(jù)的來源。選擇設(shè)備、選擇變量，所關(guān)聯(lián)的變量就是產(chǎn)生數(shù)據(jù)的來源。
a.先從頂部工具欄中綁定設(shè)備
b.選擇變量
事件：綁定組件的單擊事件，包含操作變量、跳轉(zhuǎn)外部鏈接、打開已經(jīng)完成的組態(tài)頁面窗口等。
a.勾選“單擊” CheckBox，然后點(diǎn)擊編輯圖標(biāo)，進(jìn)入編輯狀態(tài)
b.根據(jù)需求自行配置動作類型（后期可擴(kuò)展）
動畫效果：動效有4種，分別為”顯隱”、”旋轉(zhuǎn)”、”閃爍” 和 ”滑動”。
a.顯隱：勾選”顯隱”字段 CheckBox, 并點(diǎn)擊”編輯”圖標(biāo)，會出現(xiàn)設(shè)置的彈窗。選擇變量，設(shè)置綁定變量的范圍大小，為隱藏的觸發(fā)條件。
b.旋轉(zhuǎn)：勾選”旋轉(zhuǎn)”字段 CheckBox, 并點(diǎn)擊”編輯”圖標(biāo)，會出現(xiàn)設(shè)置的彈窗。選擇變量，設(shè)置綁定變量的范圍大小，為隱藏的觸發(fā)條，同時可選擇動畫快慢。
c.閃爍：勾選”閃爍”字段 CheckBox, 并點(diǎn)擊”編輯”圖標(biāo)，會出現(xiàn)設(shè)置的彈窗。選擇變量，設(shè)置綁定變量的范圍大小，為隱藏的觸發(fā)條件。設(shè)置彈框和”顯隱”一樣。
d.閃爍：勾選”滑動”字段 CheckBox, 并點(diǎn)擊”編輯”圖標(biāo)，會出現(xiàn)設(shè)置的彈窗。選擇變量，設(shè)置綁定變量的范圍大小，為隱藏的觸發(fā)條件,同時可設(shè)置滑動周期和滑動位置。
填充顏色：定義參數(shù)包括判斷條件、判斷值、填充色的配置
a.添加：點(diǎn)擊“加號”可新增填充條件，需要配置條件參數(shù)，和填充色。
b.刪除：點(diǎn)擊“刪除圖標(biāo)”可以由下向上一次刪除所添加的填充條件。
狀態(tài)開關(guān)：定義參數(shù)包括判斷條件、判斷值、狀態(tài)圖片、填充色的配置
a.添加：點(diǎn)擊“加號”可新增狀態(tài)開關(guān)條件，需要配置條件參數(shù)，狀態(tài)圖片和填充色。
b.刪除：點(diǎn)擊“刪除圖標(biāo)”可以由下向上一次刪除所添加的狀態(tài)開關(guān)條件。

三、工具欄

工具欄為組件在畫布中提供了一些常用操作功能，從左到右功能依次如下

復(fù)制：在畫布中，復(fù)制多個相同配置的組件。
刪除：刪除單個或者多個畫布中的組件。
置頂：在多個組件堆疊的情況下，將選中組件移到最上面一層。
置底：在多個組件堆疊的情況下，將選中組件移到最下面一層。
旋轉(zhuǎn)：組件可以按順時針旋轉(zhuǎn)90°、逆時針旋轉(zhuǎn)90°、水平旋轉(zhuǎn)，垂直旋轉(zhuǎn)和自定義角度等。
對齊：將所選中的組件（包括圖片）按特定的方向?qū)R，包含左對齊、右對齊、上對齊、下對齊、水平等間隔和垂直等間隔等
組合：將多個組件編為一個組，便于同時對多個組件進(jìn)行操作，如復(fù)制、改變組件的位置等。
取消組合：取消多個組件組合，恢復(fù)組件獨(dú)立性。
鎖定：用于鎖定組件。組件鎖定后，該組件將不能被選中，不可改變組件顯示位置等。若要對組件進(jìn)行操作，需解鎖。
解鎖：用于解鎖被鎖定的組件，解鎖后的組件可進(jìn)行操作。
圖庫：用于給畫布中添加圖片，圖庫中可以收藏一些常用的圖片，若無法滿足需求還可以從本地上傳一些常用圖片到收藏夾中。
設(shè)備綁定：綁定設(shè)置，用于組件在畫布中的屬性綁定和交互。
導(dǎo)入：支持把導(dǎo)出的組態(tài)文件導(dǎo)入進(jìn)來，導(dǎo)入進(jìn)來組態(tài)文件的數(shù)據(jù)源與當(dāng)前組態(tài)不一致時只兼容界面設(shè)計(jì)。
導(dǎo)出：支持把組態(tài)工程導(dǎo)出，可用于存檔或者在新組態(tài)中應(yīng)用。
撤銷：撤銷上一步操作。
恢復(fù)：恢復(fù)已被撤銷的操作。
縮放：支持頁面的畫布按照比例進(jìn)行縮放顯示。
保存：對當(dāng)前的組態(tài)設(shè)計(jì)進(jìn)行保存，支持點(diǎn)擊“保存”按鈕手動保存。
預(yù)覽：對當(dāng)前組態(tài)設(shè)計(jì)的效果預(yù)覽查看，點(diǎn)擊“預(yù)覽”，按鈕即可打開當(dāng)前組態(tài)設(shè)畫面；
幫助：可以直接跳轉(zhuǎn)到我們的文檔說明，參考文檔進(jìn)行操作。

四、組件庫

組件作為組態(tài)的重要組成部分，是組態(tài)的核心。通過拖拽所需的組件到畫布中，在配置組件的樣式和數(shù)據(jù)，實(shí)現(xiàn)組件直接的數(shù)據(jù)交換，共同構(gòu)建出各種工業(yè)場景。組件包括：基本組件、基本形狀、統(tǒng)計(jì)圖形、圖庫組件、圖表組件和更多組件等

1. 基本組件

基本組件包括：面板、文字、數(shù)顯框、數(shù)顯面板、狀態(tài)開關(guān)、按鈕、水流、液位、螢石云視頻、直播視頻、通用視頻、時間、地圖、天氣、報(bào)警記錄、維修記錄、三維場景、VR場景、數(shù)據(jù)表格等

用來表達(dá)和展示所指定的內(nèi)容，可在組件樣式中直接輸入文本。
在組件樣式中支持位置、尺寸、組件名稱、圖層高度、背景顏色、透明度、邊框圓角、陰影長度、陰影顏色、文字、對齊方式、字體類型、字體樣式、字體粗細(xì)、字體大小、組件顏色、組件顯隱、邊框?qū)挾?、邊框顏色，詳情參?a class="route-link" href="/doc/manual/scada_edit.html#_2-%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE">樣式配置。
在數(shù)據(jù)綁定中支持該元件的事件、動畫配置，詳情參考數(shù)據(jù)綁定。

1.2 數(shù)顯框

用來表達(dá)數(shù)字的變化，綁定參數(shù)后實(shí)時顯示當(dāng)前設(shè)備推送的數(shù)值。
在組件樣式中支持位置、尺寸、組件名稱、圖層高度、背景顏色、透明度、邊框圓角、陰影長度、陰影顏色、文字、對齊方式、字體類型、字體大小、組件顏色、數(shù)據(jù)類型、小數(shù)位數(shù)、組件顯隱，詳情參考樣式配置。
在數(shù)據(jù)綁定中支持該元件的參數(shù)綁定、事件、動畫、填充條件配置，詳情參考數(shù)據(jù)綁定。

1.3 數(shù)顯面板

用于表示多個數(shù)顯框的組合，避免重復(fù)使用多個數(shù)顯框進(jìn)行組合搭建，由標(biāo)題和表格組成，可綁定多個參數(shù)，可設(shè)置標(biāo)題，可自定義展示列屬性。
在組件樣式中支持位置、尺寸、組件名稱、圖層高度、背景顏色、透明度、邊框圓角、陰影長度、陰影顏色、圖片選擇、對齊方式、字體大小、組件顏色、組件顯隱、邊框?qū)挾?、邊框顏色、?biāo)題大小、標(biāo)題顯隱，詳情參考樣式配置。
在數(shù)據(jù)綁定中支持該元件的參數(shù)綁定、標(biāo)題名稱、表格配置。

1、綁定變量：點(diǎn)擊“編輯圖標(biāo)”可以進(jìn)行多個參數(shù)綁定選擇。
2、標(biāo)題名稱：可修改標(biāo)題名稱，也可以在組件樣式中隱藏掉標(biāo)題。

3、表格配置：配置表格要顯示的屬性列，和該列的字體顏色。

1.4 狀態(tài)開關(guān)

用于元件點(diǎn)擊后切換開關(guān)狀態(tài)，或者設(shè)備上下線，開關(guān)狀態(tài)切換，可以在數(shù)據(jù)綁定中進(jìn)行配置。
在組件樣式中支持位置、尺寸、組件名稱、圖層高度、背景顏色、透明度、陰影長度、陰影顏色、圖片選擇、濾鏡/陰影、組件顏色、組件顯隱，詳情參考樣式配置。
在數(shù)據(jù)綁定中支持該元件的參數(shù)綁定、事件、狀態(tài)開關(guān)配置。

1、參數(shù)綁定：在綁定參數(shù)中可以選擇綁定的是變量狀態(tài)還是設(shè)備狀態(tài)。如果選擇變量狀態(tài)，則“狀態(tài)開關(guān)”將根據(jù)綁定的變量條件進(jìn)行狀態(tài)切換；如果選擇設(shè)備狀態(tài)，則“狀態(tài)開關(guān)”將根據(jù)設(shè)備上下線狀態(tài)進(jìn)行狀態(tài)切換。
2、事件：設(shè)置點(diǎn)擊事件，實(shí)現(xiàn)點(diǎn)擊后狀態(tài)變化，詳情參考數(shù)據(jù)綁定。
3、狀態(tài)開關(guān)：狀態(tài)類型為變量狀態(tài)時可以進(jìn)行狀態(tài)條件配置（可先設(shè)置“點(diǎn)擊事件”，選擇“開關(guān)控制”，并設(shè)置“狀態(tài)開關(guān)”條件，當(dāng)點(diǎn)擊時組件會給設(shè)備發(fā)送數(shù)據(jù)，設(shè)備接受到數(shù)據(jù)后需給組件反饋數(shù)據(jù)，反饋數(shù)據(jù)如符合“狀態(tài)開關(guān)”條件，就可以安裝狀態(tài)開關(guān)條件設(shè)置的圖片或者顏色進(jìn)行切換），詳情參考數(shù)據(jù)綁定；狀態(tài)類型為設(shè)備狀態(tài)時可進(jìn)行設(shè)備上下線配置。

1.5 按鈕

通過按鈕可通過對設(shè)備一些變量進(jìn)行指令下發(fā)控制，可設(shè)置密碼，如果密碼不正確無法下發(fā)指令。
在組件樣式中支持位置、尺寸、組件名稱、圖層高度、背景顏色、透明度、陰影長度、陰影顏色、圖片選擇、文字、對齊方式、字體類型、字體大小、組件顏色、組件顯隱，詳情參考樣式配置。
在數(shù)據(jù)綁定中支持該元件的事件、組件密碼、動畫配置，詳情參考數(shù)據(jù)綁定。

1、事件：參考數(shù)據(jù)綁定。
2、設(shè)置密碼：可給改組件點(diǎn)擊時配置密碼，密碼正確方可響應(yīng)點(diǎn)擊事件

3、動畫：參考數(shù)據(jù)綁定。

1.6 水流

水流組件可以配合管道圖庫來使用，可自行設(shè)置組件樣式，可調(diào)整圖層高度，方可展示到其他圖片上方。
在組件樣式中支持位置、尺寸、組件名稱、圖層高度、背景顏色、組件顏色、組件顯隱、線條寬度、線條高度、線條間隔、線條形狀、流動方向、流動速度、錨點(diǎn)個數(shù)，詳情參考樣式配置。
在數(shù)據(jù)綁定中支持該元件的變量綁定、流動參數(shù)配置。

1、參數(shù)綁定：參考數(shù)據(jù)綁定。
2、流動參數(shù)：可進(jìn)行兩組流動方向條件配置，在滿足判斷條件下進(jìn)行流動方向改變。

1.7 液位

液位組件可以配合一些箱體罐體圖庫來使用，用于顯示液體高度。
在組件樣式中支持位置、尺寸、組件名稱、圖層高度、背景顏色、透明度、陰影長度、陰影顏色、組件顯隱、液位形狀、波浪顏色、液位標(biāo)簽、字體大小、邊框?qū)挾?、邊框顏色，詳情參?a class="route-link" href="/doc/manual/scada_edit.html#_2-%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE">樣式配置。
在數(shù)據(jù)綁定中支持該元件的變量綁定。詳情參考數(shù)據(jù)綁定。
<

1.8 天氣

天氣組件，一個組態(tài)頁面只能有一個天氣組件，可在數(shù)據(jù)綁定選擇具體位置。
在組件樣式中支持位置、尺寸、組件名稱、天氣樣式、圖層高度、背景顏色、透明度、邊框圓角、陰影長度、陰影顏色、字體類型、組件顏色、組件顯隱、邊框?qū)挾?、邊框顏色，詳情參?a class="route-link" href="/doc/manual/scada_edit.html#_2-%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE">樣式配置。
在數(shù)據(jù)綁定中支持該元件的位置選擇。

1.9 數(shù)據(jù)表格

數(shù)據(jù)表格展示實(shí)時數(shù)據(jù)或歷史數(shù)據(jù)的報(bào)表，支持?jǐn)?shù)據(jù)來源和表格列配置。在組件樣式中支持位置、尺寸、組件名稱、圖層高度、背景顏色、透明度、邊框圓角、字體大小、組件顏色、組件顯隱、邊框?qū)挾?、邊框顏色，詳情參?a class="route-link" href="/doc/manual/scada_edit.html#_2-%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE">樣式配置。
在數(shù)據(jù)綁定中支持該元件的參數(shù)綁定、表格類型和表格配置。
1、表格類型：該元件支持選擇實(shí)時數(shù)據(jù)表格或歷史數(shù)據(jù)表格。

2、表格配置：用于配置數(shù)據(jù)表格的展示列。

2. 基本形狀

基本形狀包括：三角、矩形、圓形、直線、箭頭線、曲線、豎線和表格等

2.1 表格

表格元件僅支持樣式配置，在組件樣式中支持位置、尺寸、組件名稱、圖層高度、背景顏色、透明度、對齊方式、字體類型、字體樣式、字體粗細(xì)、字體大小、組件顏色、組件顯隱，詳情參考樣式配置。
在數(shù)據(jù)綁定中支持該元件的動畫配置。詳情參考數(shù)據(jù)綁定。
1、行數(shù)插入：選中表格元件，增加行數(shù)。
2、行數(shù)刪除：選中表格元件，減少行數(shù)。
3、列數(shù)插入：選中表格元件，增加列數(shù)。
4、列數(shù)刪除：選中表格元件，減少列數(shù)。
注意：雙擊表格元件后再單擊單個單元格，可以針對每個單元格設(shè)置文本，文本的設(shè)置是針對整個表格內(nèi)的所有內(nèi)容有效。

3. 統(tǒng)計(jì)圖形

基本形狀包括：曲線圖、折線圖、柱狀圖、餅形圖、儀表圖、溫度計(jì)、地圖和自定義圖形等

3.1 曲線圖

以曲線圖的形式展示已綁定設(shè)備的屬性歷史數(shù)據(jù)，當(dāng)組件拖拽到編輯面板后可雙擊組件進(jìn)行數(shù)據(jù)綁定。
在組件樣式中支持位置、尺寸、組件名稱、圖層高度、背景顏色、透明度、陰影長度、陰影顏色、組件顏色、組件顯隱，詳情參考樣式配置。
在圖層中支持該元件鎖定、顯隱和名稱編輯。

3.2 折線圖

以折線圖形式展示已綁定設(shè)備的屬性歷史數(shù)據(jù)，當(dāng)組件拖拽到編輯面板后可雙擊組件進(jìn)行數(shù)據(jù)綁定。
在組件樣式中支持位置、尺寸、組件名稱、圖層高度、背景顏色、透明度、陰影長度、陰影顏色、組件顏色、組件顯隱，詳情參考樣式配置。
在圖層中支持該元件鎖定、顯隱和名稱編輯。

3.3 柱狀圖

以柱狀圖形式展示已綁定設(shè)備的屬性歷史數(shù)據(jù)，當(dāng)組件拖拽到編輯面板后可雙擊組件進(jìn)行數(shù)據(jù)綁定。
在組件樣式中支持位置、尺寸、組件名稱、圖層高度、背景顏色、透明度、陰影長度、陰影顏色、組件顏色、組件顯隱，詳情參考樣式配置。
在圖層中支持該元件鎖定、顯隱和名稱編輯。

3.8 自定義

自定義組件默認(rèn)顯示柱狀圖，在“統(tǒng)計(jì)圖形”欄中的默認(rèn)圖形無法滿足的情況下，可以使用“自定義”進(jìn)行個性化定制。
在組件樣式中支持位置、尺寸、組件名稱、圖層高度、背景顏色、透明度、陰影長度、陰影顏色、組件顏色、組件顯隱，詳情參考樣式配置。
在圖層中支持該元件鎖定、顯隱和名稱編輯。

1、自定義圖形：點(diǎn)擊布局，找到編輯，點(diǎn)擊編輯，可以參考案例編寫Echart組件，操作同圖表組件 - 代碼視圖
2、數(shù)據(jù)綁定：點(diǎn)擊數(shù)據(jù)，找到編輯配置，點(diǎn)擊編輯配置，可以填寫自定義url進(jìn)行數(shù)據(jù)請求，操作同圖表組件 - 數(shù)據(jù)請求
3、過濾器：當(dāng)數(shù)據(jù)請求成功后，如果發(fā)現(xiàn)相應(yīng)數(shù)據(jù)無法匹配定義組件所需的數(shù)據(jù)格式則可以新增“過濾器”對數(shù)據(jù)進(jìn)行處理以適配自定義組件的數(shù)據(jù)要求，操作同圖表組件 - 過濾器

4. 圖庫組件

圖庫組件包括“圖庫管理”中所有圖片
可以向畫布中添加任何“圖庫管理”中的圖片，支持組件樣式和數(shù)據(jù)綁定
表格元件僅支持樣式配置，在組件樣式中支持位置、尺寸、組件名稱、圖層高度、背景顏色、透明度、圖片選擇、濾鏡/陰影、組件顏色、組件顯隱、邊框?qū)挾?、邊框顏色、行?shù)、列數(shù)，詳情參考樣式配置。
在數(shù)據(jù)綁定中支持該元件的參數(shù)綁定、事件、動畫和狀態(tài)開關(guān)配置。詳情參考數(shù)據(jù)綁定。

1、樣式設(shè)置：組件支持樣式修改，如在左側(cè)組件庫中的圖庫組件欄中找不到對應(yīng)的圖片，可以隨便拉一個圖片到編輯面板，然后通過布局中的圖片選擇屬性進(jìn)行圖片更換。

2、數(shù)據(jù)綁定：支持變量綁定、事件綁定、動畫綁定和開關(guān)狀態(tài)綁定，可以參考前面介紹的模塊綁定進(jìn)行自定義綁定。

5. 圖表組件

圖表組件包括“圖表管理”中所有自定義的圖表，支持echart圖表的擴(kuò)展。
圖表元件支持樣式配置，在組件樣式中支持位置、尺寸、組件名稱、圖層高度、背景顏色、透明度、組件顯隱、代碼視圖，詳情參考樣式配置。
在數(shù)據(jù)綁定中支持該元件的數(shù)據(jù)請求和函數(shù)過濾。

1、數(shù)據(jù)請求：配置請求的url，如果是系統(tǒng)中的url，只需要配置出前置地址之外的url便可，支持get、post、put請求方式；支持設(shè)置循環(huán)請求時間，單位為秒、分、時；支持 Params、Body 和 Headers 配置。

2、過濾器：可以添加過濾函數(shù)，對使用url請求獲取到的數(shù)據(jù)進(jìn)行，函數(shù)組合，生成圖表所需要的數(shù)據(jù)格式類型。

3、代碼視圖：配置代碼視圖，默認(rèn)處理完后的數(shù)據(jù)對象為“echartData”。

注意：其他配置需結(jié)合echart參數(shù)配置進(jìn)行設(shè)置。

在預(yù)覽的狀態(tài)下，按住左鍵不放開，可以拖拽
在預(yù)覽的狀態(tài)下，滑動鼠標(biāo)可以進(jìn)行縮放

2. 畫布縮放

按住 TRL + COM，同時鼠標(biāo)滾輪，可以實(shí)現(xiàn)快速縮放。

3. 預(yù)覽

按F12可以進(jìn)行預(yù)覽

七、組件開發(fā)擴(kuò)展

以Text組件為例

注意

務(wù)必進(jìn)行的測試：

左邊導(dǎo)航欄
畫布
右側(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	對組件進(jìn)行分類

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": ["單擊", "組件顏色", "動畫"],
                "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 中定義組件，編寫組件功能和參數(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;
                        }
                    }
                }
                // 動畫初始化
                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.如果需要對組件進(jìn)行歸類或者新增類型可在 components/topoToolbox.vue 添加類別

日本一区二区三区影视-人操视频精品97视频-日本熟妇bbwxx视频-亚洲精品免费一期二期