素材和版本
tb-release:3.2.2
ThingsBoard 小部件是附加的 UI 模塊,可以輕松集成到任何IoT 儀表板中。它們提供最終用戶功能,例如數(shù)據(jù)可視化、遠(yuǎn)程設(shè)備控制、警報(bào)管理和靜態(tài)自定義 html 內(nèi)容的顯示。根據(jù)提供的功能,每個(gè)小部件定義代表一個(gè)特定的小部件類型。

目標(biāo)
分析widget實(shí)現(xiàn)的原理,怎么開(kāi)發(fā)自己的widget
部件編輯器分為四部分:

資源/ HTML / CSS窗口。(可在資源窗口cdn引入外部資源)
JavaScript窗口(Widget API的所有與窗口小部件相關(guān)的JavaScript代碼)
設(shè)置窗口。(用于為使用react-schema-form builder生成的UI表單自動(dòng)指定小部件設(shè)置的json模式。生成的UI表單顯示在窗口小部件設(shè)置的“ 高級(jí)”選項(xiàng)卡中。通過(guò)此模式序列化的Settings對(duì)象用于存儲(chǔ)特定的窗口小部件設(shè)置,并且可以從窗口小部件JavaScript代碼訪問(wèn))
小部件預(yù)覽窗口。(預(yù)覽部件)
添加widget入口
一般從屬性數(shù)據(jù)和遙感數(shù)據(jù)中選擇數(shù)據(jù)后,再選擇“在部件上顯示”然后進(jìn)行建立數(shù)據(jù)源和部件的關(guān)系。


添加widget,需要建立widget和dashboard的一個(gè)關(guān)聯(lián)關(guān)系
涉及的代碼頁(yè)面:
srcappmoduleshomecomponentsattributeattribute-table.component.html
srcappmoduleshomecomponentsattributeattribute-table.component.ts
widget的數(shù)據(jù)顯示邏輯
所有與小部件相關(guān)的代碼都位于JavaScript 部分。作為對(duì)小部件實(shí)例的引用的內(nèi)置變量self也是可用的。每個(gè)小部件函數(shù)都應(yīng)該定義為self變量的一個(gè)屬性。 self變量具有WidgetContext類型的屬性ctx - 對(duì)具有小部件實(shí)例使用的所有必要 API 和數(shù)據(jù)的小部件上下文的引用。以下是小部件上下文屬性的簡(jiǎn)要說(shuō)明:

訂閱對(duì)象?
Subscription object
小部件訂閱對(duì)象是IWidgetSubscription 的實(shí)例,根據(jù)小部件類型包含所有訂閱信息,包括當(dāng)前數(shù)據(jù)。根據(jù)小部件類型,訂閱對(duì)象提供不同的數(shù)據(jù)結(jié)構(gòu)。對(duì)于最新值和時(shí)間序列小部件類型,它提供以下屬性:
datasources?-此訂閱使用的數(shù)據(jù)源數(shù)組 (Array<?Datasource?>),使用以下結(jié)構(gòu):

data?-在此訂閱范圍內(nèi)收到的最新數(shù)據(jù)數(shù)組 (Array<?DatasourceData?>),使用以下結(jié)構(gòu):
