《工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用》/

工業(yè)互聯(lián)網(wǎng)平臺數(shù)據(jù)應(yīng)用

工業(yè)設(shè)備數(shù)據(jù)可視化《工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用》/知識準(zhǔn)備任務(wù)實(shí)施目錄0102設(shè)置內(nèi)容設(shè)置圖示寬度：設(shè)置文本框的長寬。字體：設(shè)置文本字體。方向：文本組件內(nèi)的文字排版方向。字重：設(shè)置字體的粗細(xì)。顏色：設(shè)置字體顏色。字號：設(shè)置字體大小，直接輸入數(shù)值設(shè)置。行間距：設(shè)置文本框中字體的行間距。方向：設(shè)置文字對齊方式，包含左對齊、居中對齊、

右對齊。文本是比較常用的基本組件，可以展示輸入的固定文本內(nèi)容；當(dāng)文本組件的數(shù)據(jù)源為物模型的直連屬性時(shí)，也可以展示設(shè)備的實(shí)時(shí)采集值基礎(chǔ)組件文本工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用設(shè)置內(nèi)容設(shè)置圖示背景色：設(shè)置文本框的顏色，支持漸變，通過單擊

“+”符號添加另一種顏色，從而達(dá)到兩種顏色的漸

變效果。單擊“

”符號可以修改顏色漸變的方向。注意：設(shè)置文本框背景色時(shí)，需要調(diào)整背景色的透明

度大于0%

，文本框才會顯示出顏色。基礎(chǔ)組件文本工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用設(shè)置內(nèi)容設(shè)置圖示邊框：設(shè)置文本組件邊框線條顏色、類型

(實(shí)線、虛線、無邊框和粗細(xì)；可通過輸入

顏色值調(diào)整顏色，或者通過調(diào)色板選擇顏色

和透明度，邊框默認(rèn)設(shè)置為“無”，

需要選

擇實(shí)線或者虛線才會出現(xiàn)對應(yīng)的邊框樣式。基礎(chǔ)組件文本工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用設(shè)置內(nèi)容設(shè)置圖示圓角：調(diào)整文本框的角度樣式，默認(rèn)是零，

拉拽或輸入數(shù)值可改變圓角大小。文本：用來輸入需要在文本框內(nèi)顯示的文字

內(nèi)容。頁面列表：設(shè)置單擊跳轉(zhuǎn)的頁面，通過單擊

組件進(jìn)行頁面切換。鏈接地址：可以給組件鏈接網(wǎng)頁地址，在單

擊組件時(shí)跳轉(zhuǎn)到相應(yīng)網(wǎng)頁。基礎(chǔ)組件文本工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用設(shè)置內(nèi)容設(shè)置圖示文本彈框：彈框可以放置其他組件，

當(dāng)單擊或劃過組件時(shí)，

顯示彈框中的組件。當(dāng)勾選時(shí)，

會出現(xiàn)需要設(shè)置如下的參數(shù)：

觸發(fā)方式：彈框的觸發(fā)方式，包括劃過顯示和單擊顯示；

關(guān)閉方式：彈框的關(guān)閉方式，包括劃過關(guān)閉和電機(jī)關(guān)閉；

內(nèi)容來源：包括“在彈框上設(shè)置”或“鏈接頁面”；

播放方式：如果選擇內(nèi)容來源是“在彈框上設(shè)置”，則

需要設(shè)置彈框的播放方式(當(dāng)彈框內(nèi)容是視頻、滾動圖片時(shí)，

不同播放方式會有區(qū)別)。陰影：勾選顯示文本框的陰影并修改其陰影顏色，

取消勾選

則無陰影。基礎(chǔ)組件文本工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用設(shè)置內(nèi)容設(shè)置圖示位置尺寸：

XY是設(shè)置表格的高度和寬度，

單位為像素；

WH

是表格的寬度和高度主題：可以選擇主題顏色外觀：可以設(shè)置該組件的名稱，如有多個(gè)表格，組件名稱可

便于區(qū)分；表格組件是比較常用的基本組件，可以通過表格的形式展示多條數(shù)據(jù)內(nèi)容；當(dāng)表格組

件的數(shù)據(jù)源為物理模型的直連屬性時(shí)，也可以展示設(shè)備的實(shí)時(shí)采集值。基礎(chǔ)組件表格工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用設(shè)置內(nèi)容設(shè)置圖示表頭屬性：可以單獨(dú)設(shè)置表頭的字體、字號、樣式、對齊方

式、文字顏色、背景顏色；字體：可選擇字體樣式；字號：設(shè)置文字大小；樣式：可以設(shè)置文字加粗、斜體、刪除線、下劃線；對齊：設(shè)置文字的對齊方式，包括左對齊、居中對齊、右對

齊；文字顏色：設(shè)置表頭文字的顏色；背景顏色：設(shè)置表頭單元格的背景顏色；基礎(chǔ)組件表格工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用設(shè)置內(nèi)容設(shè)置圖示表格屬性：表格的屬性配置；每頁行數(shù)：設(shè)置表格的行數(shù)；字體：可選擇字體樣式；字號：設(shè)置文字大小；樣式：可以設(shè)置文字加粗、斜體、刪除線、下劃線；對齊：文字的對齊方式，包括左對齊、居中對齊、右對齊；文字顏色：表格文字的顏色；奇行顏色：奇數(shù)行表格的背景顏色；偶行顏色：偶數(shù)行表格的背景顏色；網(wǎng)格顏色：設(shè)置表格線框顏色；基礎(chǔ)組件表格工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用設(shè)置內(nèi)容設(shè)置圖示表格序號：勾選顯示序號列，否則不顯示；自動換行：勾選時(shí)單元格文本自動換行，不勾選則超出單元

格的內(nèi)容顯示為省略號；動畫屬性：勾選可進(jìn)行當(dāng)前表格的輪播；

時(shí)間(秒)：通過設(shè)置時(shí)間數(shù)值，改變當(dāng)前表格輪播速度。

輸入數(shù)值或點(diǎn)擊()可改變時(shí)間數(shù)值；重置主題樣式：一鍵還原為組件初始化的樣式；基礎(chǔ)組件表格工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用表格組件數(shù)據(jù)源可以設(shè)置為：無、物模型、數(shù)據(jù)源；如果選擇為無，則只能顯示默認(rèn)的文字內(nèi)容；如果關(guān)聯(lián)物模型，則顯示直連物模型的實(shí)時(shí)采集數(shù)據(jù)，下表為表格組件數(shù)據(jù)源的設(shè)置內(nèi)容數(shù)據(jù)源過濾：設(shè)置數(shù)據(jù)過濾的條件，

進(jìn)行過濾操作；條件篩選：可自定義條件，滿足條件進(jìn)行獲取，不滿足條件

的不進(jìn)行獲取；日期篩選：設(shè)置日期條件進(jìn)行篩選，

滿足日期條件的進(jìn)行獲

取，不滿足日期條件的不進(jìn)行獲取；排序篩選：設(shè)置排序規(guī)則進(jìn)行篩選；表格數(shù)據(jù)源圖示基礎(chǔ)組件工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用表格數(shù)據(jù)源圖示表格翻頁：設(shè)置表格分頁顯示的最大數(shù)據(jù)條數(shù)；取數(shù)限制：每次從數(shù)據(jù)源中獲取的最多數(shù)據(jù)條數(shù)；表格組件的數(shù)據(jù)源設(shè)置基礎(chǔ)組件工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用?柱狀圖是使用垂直或水平的柱子顯示類別之間的數(shù)值比較的圖表

組件，易于比較各組數(shù)據(jù)之間的

差別及走勢。?其中一個(gè)軸表示需要對比的分類維度，另一個(gè)軸代表相應(yīng)的數(shù)值。?使用時(shí)，從圖表組件中拖拽到頁面所需的位置即可柱狀圖圖表組件

工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用設(shè)置內(nèi)容設(shè)置圖示位置尺寸：

XY是設(shè)置表格的高度和寬度

，單位為像素；

WH是表格的寬度和高度主題：可以選擇主題顏色；外觀：

可以設(shè)置該組件的名稱

，

如有多個(gè)表格

，

組件名稱可便于區(qū)分；柱狀圖組件的屬性設(shè)置如表，其數(shù)據(jù)源設(shè)置與折線圖同柱狀圖圖表組件

工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用設(shè)置內(nèi)容設(shè)置圖示表頭屬性：可以單獨(dú)設(shè)置表頭的字體、

字號、樣式、

對

齊方式、文字顏色、背景顏色；字體：可選擇字體樣式；字號：設(shè)置文字大小；樣式：可以設(shè)置文字加粗、斜體、刪除線、下劃線；對齊：設(shè)置文字的對齊方式

，包括左對齊、

居中對齊、

右對齊；文字顏色：設(shè)置表頭文字的顏色；背景顏色：設(shè)置表頭單元格的背景顏色；柱狀圖圖表組件

工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用設(shè)置內(nèi)容設(shè)置圖示表格屬性：表格的屬性配置；每頁行數(shù)：設(shè)置表格的行數(shù)；字體：可選擇字體樣式；字號：設(shè)置文字大小；樣式：可以設(shè)置文字加粗、斜體、刪除線、下劃線；對齊：

文字的對齊方式

，包括左對齊、居中對齊、

右對齊；文字顏色：表格文字的顏色；奇行顏色：奇數(shù)行表格的背景顏色；偶行顏色：偶數(shù)行表格的背景顏色；網(wǎng)格顏色：設(shè)置表格線框顏色；柱狀圖圖表組件

工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用設(shè)置內(nèi)容設(shè)置圖示表格序號：勾選顯示序號列

，否則不顯示；自動換行：

勾選時(shí)單元格文本自動換行

，

不勾選則超出單

元格的內(nèi)容顯示為省略號；動畫屬性：勾選可進(jìn)行當(dāng)前表格的輪播；

時(shí)間

(秒)

：通過設(shè)置時(shí)間數(shù)值

，

改變當(dāng)前表格輪播速度。

輸入數(shù)值或點(diǎn)擊

()

可改變時(shí)間數(shù)值；重置主題樣式：一鍵還原為組件初始化的樣式；柱狀圖圖表組件

工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用設(shè)置內(nèi)容設(shè)置圖示表格序號：勾選顯示序號列

，否則不顯示；自動換行：

勾選時(shí)單元格文本自動換行

，

不勾選則超出單

元格的內(nèi)容顯示為省略號；動畫屬性：勾選可進(jìn)行當(dāng)前表格的輪播；

時(shí)間

(秒)

：通過設(shè)置時(shí)間數(shù)值

，

改變當(dāng)前表格輪播速度。

輸入數(shù)值或點(diǎn)擊

()

可改變時(shí)間數(shù)值；重置主題樣式：一鍵還原為組件初始化的樣式；柱狀圖圖表組件

工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用

餅圖屬于圖表組件，餅圖用于分析數(shù)據(jù)的簡單占比，用戶可以通過餅圖很直觀的看到每一個(gè)部分在整體中所占的比例，幫助用戶快速了解數(shù)據(jù)的占比分配

餅圖不適用于多分類的數(shù)據(jù)，因?yàn)殡S著分類的增多，每個(gè)切片就會變小，最后導(dǎo)致大小區(qū)分不明顯，每個(gè)切片看上去都差不多大小，這樣對于數(shù)據(jù)的對比

是沒有什么意義的

使用時(shí)，從圖表組件中拖拽餅圖到頁面的位置即可餅圖

圖表組件

工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用設(shè)置內(nèi)容設(shè)置圖示位置尺寸：

XY是設(shè)置組件的高度和寬度

，單位為像素；

W、

H是組件的寬度和高度可選擇實(shí)心餅圖或者環(huán)狀圖樣式屬性顯示：可選居中或填滿圖例、數(shù)值標(biāo)簽：可勾選顯示

，不勾選隱藏選擇主題：可選擇組件的主題顏色餅圖的屬性設(shè)置內(nèi)容餅圖

圖表組件

工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用設(shè)置內(nèi)容設(shè)置圖示圖表字體數(shù)值樣式：可選擇顯示百分比或者數(shù)值圖表字體：選擇字體字號：設(shè)置字體大小字重：設(shè)置字體粗細(xì)顏色：設(shè)置字體顏色圖表樣式半徑：可調(diào)節(jié)餅圖的半徑背景色：可為餅圖設(shè)置背景色如果想要重置屬性的參數(shù)

，可單擊

“重置主題樣式”恢復(fù)初始值餅圖的屬性設(shè)置內(nèi)容餅圖

圖表組件

工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用設(shè)置內(nèi)容設(shè)置圖示數(shù)據(jù)源：選擇需要關(guān)聯(lián)的數(shù)據(jù)表；度量：展示餅圖的組成數(shù)據(jù)源過濾：

單擊

“+”圖標(biāo)可彈出

“添加過濾”彈窗

，

可

設(shè)置“條件過濾”“日期過濾”“排序”參與組件過濾：

勾選時(shí)

，

本組件的數(shù)據(jù)源將參與本頁面的其它篩選器的篩選。餅圖的數(shù)據(jù)源設(shè)置內(nèi)容餅圖

圖表組件

工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用基礎(chǔ)儀表盤是工控組件的一種，可以反映設(shè)備各系統(tǒng)的工作狀況工控組件基礎(chǔ)儀表盤工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用設(shè)置內(nèi)容設(shè)置圖示儀表尺寸：包括組件的寬度和高度

，單位為像素。

可以輸入數(shù)值自定義大小。也可以通過拖拽的方式改變組件的寬高。基礎(chǔ)儀表盤有三種樣式可以選擇基礎(chǔ)儀表盤

工控組件

工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用設(shè)置內(nèi)容設(shè)置圖示儀表主題：

可以設(shè)置組件的主題顏色

，

當(dāng)前有五種主題色可

以選擇。統(tǒng)計(jì)顏色：文字的顏色。在顏色調(diào)色板中選擇顏色和透明度。手動輸入RGB、

HSL、

Hex數(shù)值

，改變顏色。數(shù)值顯示：設(shè)置數(shù)值的顯示樣式

，包括百分比和數(shù)值兩種。可以設(shè)置起始參數(shù)和最大參數(shù)。基礎(chǔ)儀表盤

工控組件

工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用設(shè)置內(nèi)容設(shè)置圖示數(shù)據(jù)源：選擇需要關(guān)聯(lián)的數(shù)據(jù)源或者數(shù)據(jù)表度量：展示餅圖的組成參與組件過濾：

勾選時(shí)

，本組件的數(shù)據(jù)源將參與本頁

面的其它篩選器的篩選。基礎(chǔ)儀表盤組件配置數(shù)據(jù)源時(shí)，度量展示為儀表的指針數(shù)基礎(chǔ)儀表盤

工控組件

工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用《工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用》/知識準(zhǔn)備任務(wù)實(shí)施目錄0102

01

如下圖所示，選中設(shè)備信息容器，在“綜合應(yīng)用素材”

中選擇“框-正方”的邊框圖片，將圖片拖拽到右側(cè)背景圖片中。當(dāng)作為容器的背景圖片時(shí)，在設(shè)備信息容器中不能對邊框圖片進(jìn)行圖片的大小和位置進(jìn)行調(diào)整。設(shè)置設(shè)備信息工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用

02

為容器添加內(nèi)容為“設(shè)備信息”標(biāo)題的文本組件，并設(shè)置文本的字重為“bold”

，顏色為“#0FF5F3”

，字號為24px

，文本居中對齊。文本框的寬為150像素，高為30像素。

在設(shè)置好文本框相關(guān)信息后，在右側(cè)屬性的上方選擇“水平居中對齊”

，使得文本組件在“設(shè)備信息”容器中居中分布。

03

為容器添加內(nèi)容為“設(shè)備名稱：工業(yè)機(jī)器人綜合實(shí)訓(xùn)平臺”、“設(shè)備編號：

GMI-ROBOT001”、“設(shè)備地

址：工業(yè)機(jī)器人產(chǎn)業(yè)基地”三個(gè)文本組件。依次對三個(gè)文本組件進(jìn)行設(shè)置，設(shè)置文本框的字重為“normal”顏色為“#F3F3F701”

，字號為24px

，文本對齊方式為“靠右對齊”

，并設(shè)置文本框的寬為400像素以及高為40像素。在設(shè)置好文本框相關(guān)信息后，將文本框拖拽至該容器的合適位置。設(shè)置設(shè)備信息工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用

4

對文本組件進(jìn)行排版。如下圖所示，按住“shift”鍵，依次選中設(shè)備名稱、設(shè)備編號、設(shè)備地址三個(gè)文本組件，在右側(cè)編輯欄的頂部選擇“左對齊”

，然后再選擇垂直平均分布，使組件的分布更為整齊美觀。設(shè)置設(shè)備信息工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用

01

為設(shè)備狀態(tài)容器設(shè)置“框-正方”邊框背景圖片，并為容器添加內(nèi)容為“設(shè)備狀態(tài)”的文本組件作為容器的標(biāo)題。設(shè)置該文本組件的信息與“設(shè)備信息”標(biāo)題相同的格式，并通過拖拽至合適的位置，點(diǎn)擊右側(cè)屬性上方“水平居

中對齊”進(jìn)行對齊。

2

設(shè)置設(shè)備狀態(tài)圖標(biāo)，依次將“綜合應(yīng)用素材”

中的“作業(yè)”

圖標(biāo)、“報(bào)警”

圖標(biāo)拖入設(shè)備狀態(tài)容器中，拖拽至合適的位置，并在屬性中設(shè)置寬為130像素，高為65像素。按住“shift”鍵選中兩個(gè)圖標(biāo)，在右側(cè)編輯欄中點(diǎn)擊“底對齊”

，使兩個(gè)圖標(biāo)分布在一條水平線上。

3

在“作業(yè)”圖標(biāo)和“報(bào)警”圖標(biāo)下方分別添加內(nèi)容為“工作狀態(tài)”和“報(bào)警/正常”的文本組件，并分別設(shè)置文

本組件的顏色為“#F3F3F701”

，字號為20px

，文本對齊方式為“居中對齊”

，寬為100像素

，高為40像素。

在完成設(shè)置后，拖拽兩個(gè)文本框至合適位置，并同時(shí)選中兩個(gè)文本組件，設(shè)置兩者為“底對齊”。設(shè)置設(shè)備狀態(tài)信息工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用

4

設(shè)置“作業(yè)”圖標(biāo)的數(shù)據(jù)源。選擇數(shù)據(jù)源，如下圖所示，在①處選擇“采集點(diǎn)數(shù)據(jù)”數(shù)據(jù)源，點(diǎn)擊②處進(jìn)行數(shù)據(jù)源設(shè)置。設(shè)置設(shè)備狀態(tài)信息工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用

4

設(shè)置數(shù)據(jù)源參數(shù)

，如下圖所示，模型類型選擇“物模型”

，物模型id選擇“工業(yè)機(jī)器人”

，設(shè)備id選擇“機(jī)器人綜合應(yīng)用”。其中，物模型id對應(yīng)物模型

，設(shè)備對應(yīng)物實(shí)例。說明：本書示例的物模型id選

擇“工業(yè)機(jī)器人”，設(shè)備id選擇

“機(jī)器人綜合應(yīng)用”。讀者需根據(jù)

實(shí)際創(chuàng)建的模型來配置數(shù)據(jù)源。設(shè)置設(shè)備狀態(tài)信息工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用

如圖所示，數(shù)據(jù)取值選擇“設(shè)備狀態(tài)”。

接下來進(jìn)行判斷條件設(shè)置，在條件1中，如果篩選等于1，等設(shè)備處于作業(yè)狀態(tài)，將素材庫中“作業(yè)”圖片拖拽至“圖片”

框中。

點(diǎn)擊④處加號

，添加判斷條件，如果篩選等于2，等設(shè)備處于待機(jī)狀態(tài)，將素材庫中“待機(jī)”圖片拖拽至“圖片”框

中。設(shè)置設(shè)備狀態(tài)信息工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用設(shè)置“報(bào)警”圖標(biāo)的數(shù)據(jù)源。重復(fù)“作業(yè)”

圖標(biāo)添加數(shù)據(jù)源的操作完成

“報(bào)警”圖標(biāo)數(shù)據(jù)源的添加，數(shù)據(jù)取值選擇“報(bào)警”

，然后進(jìn)行判斷條件設(shè)置。如果“報(bào)警”取值為0，素材庫中“正常”圖片拖拽至“圖片”框中；如果未滿足條件，設(shè)備處于報(bào)警狀態(tài)，將素材庫中“報(bào)警”圖片拖拽至“圖片”框中。設(shè)置完成之后點(diǎn)擊保存

，然后對頁面進(jìn)行刷新，此時(shí)圖標(biāo)呈現(xiàn)當(dāng)前的設(shè)備狀態(tài)和報(bào)警/正常狀態(tài)。效果圖如圖所示設(shè)置設(shè)備狀態(tài)信息工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用0506

01

為設(shè)備狀態(tài)容器設(shè)置“長橫框”邊框背景圖

片。

選中設(shè)備能效容器，在素材文件中選中“長橫框”

，將其拖拽到“背景圖片”處。

2

添加“基礎(chǔ)儀表盤”。

如下圖所示，點(diǎn)擊“基礎(chǔ)組件”

，在左側(cè)選擇“工控組件”，選擇“基礎(chǔ)儀表盤”

，將基礎(chǔ)儀表盤拖拽至設(shè)備能效容器的合適位置，再次添加兩個(gè)基

礎(chǔ)儀表盤。設(shè)置設(shè)備能效信息工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用

03

將三個(gè)基礎(chǔ)儀表盤的大小均設(shè)為寬為160像素，高為160像素

，儀表主題均選擇主題1，并將三個(gè)儀表盤拖拽至合適的位置。按住“shift”鍵選中三個(gè)儀表盤，在右側(cè)編輯欄頂部先選擇“底對齊”

，再選擇“水平平均分布”。

4

添加文本組件。

在三個(gè)儀表盤下方依次添加內(nèi)容為“今日開機(jī)率”、“今日作業(yè)率”、“今日利用率”的文本組

件。設(shè)置文本組件的顏色為“#F3F3F701”

，字號為20px

，方向選擇居中對齊

，寬度設(shè)置為寬120像素

，高40

像素。

將三個(gè)文本組件拖拽至合適的位置，按住“shift”鍵分別選中三個(gè)文本組件，在右側(cè)編輯欄頂部先選擇“底對齊”

，再選擇“水平平均分布”。設(shè)置設(shè)備能效信息工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用

04

設(shè)置“今日開機(jī)率”基礎(chǔ)儀表板數(shù)據(jù)源。如下圖所示，

選擇“采集點(diǎn)數(shù)據(jù)”數(shù)據(jù)源，然后進(jìn)行數(shù)據(jù)源參數(shù)設(shè)置。

模型類型選擇“物模型”

，物模型id選擇“工業(yè)機(jī)器人”

，設(shè)備id選擇“機(jī)器人綜

合應(yīng)用”。

在度量值選取“今日開機(jī)率”指標(biāo)，指標(biāo)的取值對應(yīng)于儀表盤上的數(shù)據(jù)。設(shè)置設(shè)備能效信息工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用

05

同樣地，依次添加“今日待機(jī)率”和“今日利用率”數(shù)據(jù)源，對應(yīng)的度量值分別選取指標(biāo)“今日待機(jī)率”和“今日利用率”。如下圖所示，對項(xiàng)目進(jìn)行保存刷新后的效果圖如所示。設(shè)置設(shè)備能效信息工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用06為設(shè)備容器設(shè)置“框-正方”邊框背景圖片。選中設(shè)生產(chǎn)備能效容器，在素材文件中選中“長橫框”

，將其拖拽到“背景圖片”處。為容器添加“生產(chǎn)信息”標(biāo)題，標(biāo)題的格式與“設(shè)備信息”文本相同。如下圖所示，添加內(nèi)容為“設(shè)備編號：

”、“設(shè)備類型：”的文本組件，設(shè)置文本屬性的顏色為“#F3F3F701”

，字號為24px

，方向?yàn)榭孔髮R

，寬為120，高為40。將兩個(gè)文本框拖拽至合適位置，按住“shift”鍵選擇兩個(gè)組件，在右側(cè)編輯欄頂部選擇“左對齊”。添加內(nèi)容為“DeviceNo”、“DeviceType”的文本組件，設(shè)置字重為“bold”

，顏色為“#F8E91401”

，字號為24px

，方向?yàn)榭孔髮R。

將兩個(gè)文本框拖拽至合適位置，同時(shí)選中，在右側(cè)編輯欄頂部選擇“左對齊”。設(shè)置設(shè)備生產(chǎn)信息工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用0102

03

設(shè)置文本框數(shù)據(jù)源。

如下圖所示，選中“DeviceNo”文本框，數(shù)據(jù)源類型設(shè)置選擇“數(shù)據(jù)源”類型，選擇“采集點(diǎn)數(shù)據(jù)”數(shù)據(jù)源，然后進(jìn)行數(shù)據(jù)源參數(shù)設(shè)置。

模型類型選擇“物模型”

，物模型id選擇“工業(yè)機(jī)器人”

，設(shè)備id選擇“機(jī)器人綜

合應(yīng)用”。

取值選擇“設(shè)備編碼”指標(biāo)，當(dāng)設(shè)備有填寫該指標(biāo)時(shí)，文字內(nèi)容會自動更新為上傳內(nèi)容。同樣地，對“DeviceType”文本組

件進(jìn)行數(shù)據(jù)源設(shè)置。說明：本書示例的物模型id

選擇“工業(yè)機(jī)器人”，設(shè)備id選

擇“機(jī)器人綜合應(yīng)用”。讀者需

根據(jù)實(shí)際創(chuàng)建的模型來配置數(shù)據(jù)

源。設(shè)置設(shè)備生產(chǎn)信息工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用

04

添加總產(chǎn)量、今日產(chǎn)量邊框和動畫。

在素材庫中選擇“轉(zhuǎn)盤567”素材，設(shè)置其寬和高均為180像素。

再在素材庫中選擇“daima2_iSpt”素材，將其拖拽至生產(chǎn)信息容器中，疊加在“轉(zhuǎn)盤567”素材上方。

同樣地，在添加相同的素材，并利用拖拽和對齊使得整體整齊美觀。

05

添加總產(chǎn)量和今日產(chǎn)量文本組件。

在總產(chǎn)量、今日產(chǎn)量邊框和動畫下分別添加內(nèi)容為“總產(chǎn)量”、“今日產(chǎn)量”的文本組件。

設(shè)置字號為18px

，方向?yàn)榫又袑R

，寬為160像素

，高為40像素。設(shè)置設(shè)備生產(chǎn)信息工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用

06

添加總產(chǎn)量數(shù)據(jù)、今日產(chǎn)量數(shù)據(jù)文本組件并設(shè)置數(shù)據(jù)源。

在“轉(zhuǎn)盤567”素材上添加文本組件，在右側(cè)編輯欄內(nèi)選擇數(shù)據(jù)源，數(shù)據(jù)源類型設(shè)置選擇“數(shù)據(jù)源”類型，選擇“采集點(diǎn)數(shù)據(jù)”數(shù)據(jù)源，設(shè)置數(shù)據(jù)源參數(shù)中的模型類型為“物模型”

，物模型id為“工業(yè)機(jī)器人”

，設(shè)備id選擇“機(jī)器人綜合應(yīng)用”。取值選擇“總產(chǎn)量”指標(biāo)。

同樣的在第二個(gè)“轉(zhuǎn)盤567”素材上添加內(nèi)容為“今日產(chǎn)量”的文本組件，并為其設(shè)置數(shù)據(jù)源和數(shù)據(jù)源參數(shù)

，取值

選擇“今日產(chǎn)量”指標(biāo)。設(shè)置設(shè)備生產(chǎn)信息工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用添加分組。

如下圖所示，在圖層中找到并選擇總產(chǎn)量數(shù)據(jù)文本框，右鍵點(diǎn)擊文本框，選擇“添加至分組”

，再點(diǎn)擊“新建分組”

，將新建分組的名字修改為總產(chǎn)量。設(shè)置設(shè)備生產(chǎn)信息工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用07如左圖所示，將總產(chǎn)量的底框和動畫添加到“總產(chǎn)量”分組中。同樣的，添加“今日產(chǎn)量”分組

，分組后的結(jié)果如右圖所示。設(shè)置設(shè)備生產(chǎn)信息工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用0809點(diǎn)擊保存刷新

，效果圖如圖所示。設(shè)置設(shè)備生產(chǎn)信息工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用

01

添加“柱狀圖”組件。

如下圖所示，在左側(cè)編輯框頂部選擇“基礎(chǔ)組件”

，選擇左側(cè)的“圖標(biāo)組件”

，選擇“柱

狀圖”

，并將“柱狀圖”拖拽至產(chǎn)量分析容器，通過拖拽的方式調(diào)整“柱狀圖”的大小和位置。添加產(chǎn)量分析信息工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用

2設(shè)置柱狀圖的數(shù)據(jù)源。

如下圖所示，在右側(cè)選擇“數(shù)據(jù)源”

，數(shù)據(jù)源選擇“output”

，維度選擇

“record_date”

，度量選擇“output”。添加產(chǎn)量分析信息工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用如下圖所示，點(diǎn)擊保存刷新

，可以看到效果圖如所示。添加產(chǎn)量分析信息工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用03

4

添加“餅圖”組件。

如下圖所示，在左側(cè)編輯框頂部選擇“基礎(chǔ)組件”

，選擇左側(cè)的“圖標(biāo)組件”

，選擇“餅圖”

，并將“餅圖”拖拽至歷史工況容器，通過拖拽的方式調(diào)整“餅圖”的大小和位置。添加歷史工況信息工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用

5

設(shè)置“餅圖”的數(shù)據(jù)源。

如下圖所示，選擇“采集點(diǎn)數(shù)據(jù)”數(shù)據(jù)源，然后進(jìn)行數(shù)據(jù)源參數(shù)設(shè)置。

在數(shù)據(jù)源參數(shù)設(shè)置中，模型類型選擇“物模型”

，物模型id選擇“工業(yè)機(jī)器人”

，設(shè)備id選擇“機(jī)器人綜合應(yīng)用”。

在度量選取“今日開機(jī)時(shí)長”、“今日作業(yè)時(shí)長”、“今日待機(jī)時(shí)長”、“今日報(bào)警時(shí)長”

四個(gè)指標(biāo)。說明：本書示例的物模型id選

擇“工業(yè)機(jī)器人”，設(shè)備id選擇

“機(jī)器人綜合應(yīng)用”。讀者需根據(jù)

實(shí)際創(chuàng)建的模型來配置數(shù)據(jù)源。添加歷史工況信息工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用

6

如下圖所示，點(diǎn)擊保存刷新，可以看到今日報(bào)警時(shí)長、今日作業(yè)時(shí)長、今日待機(jī)時(shí)長、今日開機(jī)時(shí)長的占比分布情況。添加歷史工況信息工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用

01

添加表格組件。

如下圖所示，在左側(cè)編輯框頂部選擇“基礎(chǔ)組件”

，選擇左側(cè)的“通用組件”

，選擇其中的基本

組件“表格”

，并將“表格”拖拽至報(bào)警信息容器中，

通過拖拽的方式調(diào)整“餅圖”的大小和位置。添加報(bào)警信息工業(yè)互聯(lián)網(wǎng)平臺綜合應(yīng)用

2

調(diào)整表格的尺寸。

如下圖所示，在右側(cè)的屬性編輯框中設(shè)置表格的組件尺寸寬為400像素，高為260