《工業(yè)可視化》/工業(yè)互聯(lián)網(wǎng)系列課程湖南三一工業(yè)職業(yè)技術(shù)學(xué)院項(xiàng)目一：工業(yè)企業(yè)信息的可視化設(shè)計(jì)任務(wù)1.2設(shè)計(jì)可視化頁(yè)面>>※知識(shí)準(zhǔn)備《工業(yè)可視化》/工業(yè)互聯(lián)網(wǎng)系列課程目錄基礎(chǔ)組件-文本01基礎(chǔ)組件-視頻02基礎(chǔ)組件-圖片03網(wǎng)頁(yè)組件-圖片輪播041.基礎(chǔ)組件-文本文本是比較常用的基本組件，可以展示輸入的固定文本內(nèi)容；當(dāng)文本組件的數(shù)據(jù)源為物模型的直連屬性時(shí)，也可以展示設(shè)備的實(shí)時(shí)采集值。位置尺寸：設(shè)置組件的長(zhǎng)寬尺寸和位置，XY是設(shè)置組件的高度和寬度，單位為像素；WH是組件的寬度和高度。可以輸入數(shù)值自定義大小，也可以通過(guò)拖拽的方式改變組件的寬高，后續(xù)介紹的其他組件也是可以通過(guò)這兩種方式調(diào)整大小。字體：設(shè)置文本字體。方向：文本組件內(nèi)的文字排版方向。字重：設(shè)置字體的粗細(xì)。顏色：設(shè)置字體顏色。字號(hào)：設(shè)置字體大小，直接輸入數(shù)值設(shè)置。行間距：設(shè)置文本框中字體的行間距。方向：設(shè)置文字對(duì)齊方式，包含左對(duì)齊、居中對(duì)齊、右對(duì)齊。

設(shè)置內(nèi)容設(shè)置文本框的顏色，支持漸變，通過(guò)單擊“+”符號(hào)添加另一種顏色，從而達(dá)到兩種顏色的漸變效果。單擊“”符號(hào)可以修改顏色漸變的方向。注意：設(shè)置文本框背景色時(shí)，需要調(diào)整背景色的透明度大于0%，文本框才會(huì)顯示出顏色。背景色1.基礎(chǔ)組件-文本設(shè)置文本組件邊框線(xiàn)條顏色、類(lèi)型（實(shí)線(xiàn)、虛線(xiàn)、無(wú)邊框和粗細(xì)；可通過(guò)輸入顏色值調(diào)整顏色，或者通過(guò)調(diào)色板選擇顏色和透明度，邊框默認(rèn)設(shè)置為“無(wú)”，需要選擇實(shí)線(xiàn)或者虛線(xiàn)才會(huì)出現(xiàn)對(duì)應(yīng)的邊框樣式。邊框1.基礎(chǔ)組件-文本圓角：調(diào)整文本框的角度樣式，默認(rèn)是零，拉拽或輸入數(shù)值可改變圓角大小。文本：用來(lái)輸入需要在文本框內(nèi)顯示的文字內(nèi)容。頁(yè)面列表：設(shè)置單擊跳轉(zhuǎn)的頁(yè)面，通過(guò)單擊組件進(jìn)行頁(yè)面切換。鏈接地址：可以給組件鏈接網(wǎng)頁(yè)地址，在單擊組件時(shí)跳轉(zhuǎn)到相應(yīng)網(wǎng)頁(yè)。設(shè)置內(nèi)容1.基礎(chǔ)組件-文本當(dāng)勾選時(shí)，會(huì)出現(xiàn)需要設(shè)置如下的參數(shù)：

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

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

內(nèi)容來(lái)源：包括“在彈框上設(shè)置”或“鏈接頁(yè)面”；播放方式：如果選擇內(nèi)容來(lái)源是“在彈框上設(shè)置”，則需要設(shè)置彈框的播放方式（當(dāng)彈框內(nèi)容是視頻、滾動(dòng)圖片時(shí)，不同播放方式會(huì)有區(qū)別）。文本彈框：彈框可以放置其他組件，當(dāng)單擊或劃過(guò)組件時(shí)，顯示彈框中的組件。陰影：勾選顯示文本框的陰影并修改其陰影顏色，取消勾選則無(wú)陰影。1.基礎(chǔ)組件-文本1.文本組件的數(shù)據(jù)源文本組件的數(shù)據(jù)源類(lèi)型選擇“數(shù)據(jù)源”時(shí)，會(huì)顯示如右側(cè)圖片所示的內(nèi)容；

設(shè)置內(nèi)容文本組件的數(shù)據(jù)源包括：無(wú)、數(shù)據(jù)源、系統(tǒng)時(shí)間。在進(jìn)行文本組件數(shù)據(jù)源配置時(shí)，可直接顯示數(shù)據(jù)表中的數(shù)據(jù)、物模型的直連屬性對(duì)應(yīng)的實(shí)時(shí)采集值等。1.文本組件的數(shù)據(jù)源數(shù)據(jù)源設(shè)置類(lèi)型：可以選擇“無(wú)、數(shù)據(jù)源、系統(tǒng)時(shí)間日期”數(shù)據(jù)源數(shù)據(jù)源右圖所示的物模型有個(gè)開(kāi)關(guān)按鈕，如果打開(kāi)表示該文本組件直接引用頁(yè)面所綁定的物模型，如果關(guān)閉則需要自行配置；取值文本組件顯示的數(shù)據(jù)值；判斷條件設(shè)置不同條件展示不同的文本內(nèi)容參與組件過(guò)濾勾選此項(xiàng)后，本組件的數(shù)據(jù)源將參與本頁(yè)面的其它篩選器的篩選。例如本頁(yè)面中有“日期篩選器”對(duì)某一數(shù)據(jù)源進(jìn)行日期篩選，則本組件用到同一個(gè)數(shù)據(jù)源時(shí)將只能讀取到經(jīng)“日期篩選器”篩選后的數(shù)據(jù)。設(shè)置內(nèi)容數(shù)據(jù)源的來(lái)源有三種：根云平臺(tái)的物模型數(shù)據(jù)，包括：報(bào)警數(shù)據(jù)、采集點(diǎn)數(shù)據(jù)、歷史數(shù)據(jù)；是iFSM系統(tǒng)的數(shù)據(jù)；用戶(hù)創(chuàng)建的數(shù)據(jù)源，包括數(shù)據(jù)庫(kù)、本地文件、自定義表等；前兩種數(shù)據(jù)是云視界與工業(yè)互聯(lián)網(wǎng)平臺(tái)（根云平臺(tái)）和iFSM系統(tǒng)做了系統(tǒng)對(duì)接，可自動(dòng)獲取，只要用戶(hù)在這兩個(gè)系統(tǒng)中有數(shù)據(jù)即可自動(dòng)獲取得到。而用戶(hù)創(chuàng)建的數(shù)據(jù)源，創(chuàng)建后才會(huì)在列表顯示，否則無(wú)顯示。本書(shū)重點(diǎn)介紹和使用工業(yè)互聯(lián)網(wǎng)平臺(tái)及數(shù)據(jù)庫(kù)的數(shù)據(jù)源。數(shù)據(jù)源來(lái)源1.文本組件的數(shù)據(jù)源1.文本組件的數(shù)據(jù)源如果數(shù)據(jù)源選用物模型的數(shù)據(jù)，如采集點(diǎn)數(shù)據(jù)，則需要單擊數(shù)據(jù)源下拉框右側(cè)的設(shè)置圖標(biāo)，并在之后的彈框中設(shè)置具體物模型id和設(shè)備id,如右圖所示。設(shè)置內(nèi)容取值：表示該文本需要展示數(shù)據(jù)源中的哪個(gè)字段的數(shù)據(jù)判斷條件：可以通過(guò)單擊“+”圖標(biāo)為文本組件增加判斷條件，實(shí)現(xiàn)不同判斷結(jié)果時(shí)展示不同的文本內(nèi)容。篩選條件：可以設(shè)置多種關(guān)系運(yùn)算符（>、>=、<、<=、≠）以及“區(qū)間”；文本：符合篩選條件時(shí)顯示的文本內(nèi)容；字體顏色：符合篩選條件時(shí)顯示的文字顏色；背景顏色：符合篩選條件時(shí)顯示的文本框顏色；

設(shè)置內(nèi)容1.文本組件的數(shù)據(jù)源舉例：如右圖所示設(shè)置文本組件的數(shù)據(jù)源為采集點(diǎn)的“急?！睂傩?，一旦急停信號(hào)采集到的值為1時(shí)，文本顯示“報(bào)警，請(qǐng)注意”的紅色字體，否則不顯示信息。《工業(yè)可視化》/工業(yè)互聯(lián)網(wǎng)系列課程目錄基礎(chǔ)組件-文本01基礎(chǔ)組件-視頻02基礎(chǔ)組件-圖片03網(wǎng)頁(yè)組件-圖片輪播043.基礎(chǔ)組件-圖片

圖片組件是基本組件的一種，可以用來(lái)展示本地或者網(wǎng)絡(luò)圖片。位置尺寸：設(shè)置圖片組件的長(zhǎng)寬尺寸和位置。圖片組件可以選擇普通圖片（左）和設(shè)備圖片（右）兩種，設(shè)備圖片即通過(guò)圖片傳遞當(dāng)前設(shè)備的相關(guān)信息，如：設(shè)備ID。對(duì)稱(chēng)：可對(duì)組件進(jìn)行上下、左右對(duì)稱(chēng)翻轉(zhuǎn)。單擊左右翻轉(zhuǎn)（）圖標(biāo)，控制組件左右翻轉(zhuǎn)樣式。單擊上下翻轉(zhuǎn)（）圖標(biāo)，控制組件上下翻轉(zhuǎn)樣式。旋轉(zhuǎn)：將圖片做旋轉(zhuǎn)處理，可以通過(guò)滑動(dòng)條調(diào)整，也可以直接輸入角度值。圖片：可將素材庫(kù)中圖片拖拽到此處進(jìn)行替換。填充方式：圖片填充方式包括拉伸、填充、覆蓋、居中。邊框：可設(shè)置組件的邊框類(lèi)型，包括實(shí)線(xiàn)、虛線(xiàn)、無(wú)邊框。手動(dòng)輸入數(shù)值或單擊（）按鍵，改變邊框粗細(xì)。屬性設(shè)置3.基礎(chǔ)組件-圖片組件邊框的顏色。在顏色調(diào)色板中選擇顏色和透明度；手動(dòng)輸入RGB、HSL、Hex數(shù)值，改變顏色。邊框顏色3.基礎(chǔ)組件-圖片透明度：圖片組件的透明度。取值范圍為0~100%。為0時(shí)，圖片隱藏；為100%時(shí)，圖片全部顯示。默認(rèn)為100%。鏈接地址：如果設(shè)置鏈接網(wǎng)頁(yè)地址，單擊組件時(shí)跳轉(zhuǎn)到相應(yīng)網(wǎng)頁(yè)。頁(yè)面列表：可以設(shè)置單擊跳轉(zhuǎn)的頁(yè)面，通過(guò)單擊組件進(jìn)行頁(yè)面切換。圖片彈框：與文本彈框的設(shè)置同。背景陰影：與文本彈框的設(shè)置同。設(shè)置內(nèi)容3.基礎(chǔ)組件-圖片背景陰影：勾選顯示組件的背景陰影并需要設(shè)置如下參數(shù)，取消勾選則無(wú)陰影。陰影：設(shè)置陰影的顏色?？梢栽谡{(diào)色板中選擇顏色和透明度；也可以手動(dòng)輸入RGB、HSL、Hex數(shù)值，改變顏色。設(shè)置內(nèi)容3.基礎(chǔ)組件-圖片鼠標(biāo)懸停效果：勾選添加鼠標(biāo)懸停效果，通過(guò)添加圖片，當(dāng)鼠標(biāo)懸停于圖片位置時(shí)，顯示添加的圖片，取消勾選則無(wú)此效果。鼠標(biāo)按下效果：勾選添加鼠標(biāo)按下效果，通過(guò)添加圖片，當(dāng)鼠標(biāo)在圖片位置按下時(shí)，顯示添加的圖片，取消勾選則無(wú)此效果。屬性設(shè)置3.基礎(chǔ)組件-圖片圖片組件的數(shù)據(jù)源選擇及取值等與文本組件的數(shù)據(jù)源設(shè)置同。不展開(kāi)闡述。

設(shè)置內(nèi)容2.圖片組件的數(shù)據(jù)源2.圖片組件的數(shù)據(jù)源設(shè)置內(nèi)容在進(jìn)行圖片組件數(shù)據(jù)源配置時(shí)，可為展示圖片增設(shè)置判斷條件，實(shí)現(xiàn)不同結(jié)果時(shí)展示不同圖片。例如，右圖所示的設(shè)置中，取值為物模型的報(bào)警屬性，當(dāng)報(bào)警屬性采集到的信號(hào)值為1時(shí)，顯示報(bào)警圖片，否則為空?！豆I(yè)可視化》/工業(yè)互聯(lián)網(wǎng)系列課程目錄基礎(chǔ)組件-文本01基礎(chǔ)組件-視頻02基礎(chǔ)組件-圖片03網(wǎng)頁(yè)組件-圖片輪播042.基礎(chǔ)組件-視頻視頻組件是基本組件的一種，可以用來(lái)展示本地或者網(wǎng)絡(luò)視頻。視頻組件無(wú)數(shù)據(jù)源。視頻大?。喊ńM件的寬度和高度，單位為像素?？梢暂斎霐?shù)值自定義大??；也可以通過(guò)拖拽的方式改變組件的寬高。

設(shè)置內(nèi)容視頻來(lái)源：選擇素材庫(kù)中的視頻或者網(wǎng)址中的引用視頻。排布：包括居中和填滿(mǎn)。本地：可以選擇已上傳到素材庫(kù)的本地視頻進(jìn)行展示。網(wǎng)址：輸入視頻網(wǎng)址，可以展示網(wǎng)絡(luò)視頻。自動(dòng)播放：可以選擇是否自動(dòng)播放。聲音設(shè)置：默認(rèn)是靜音，可以選擇視頻播放時(shí)聲音是否開(kāi)啟。

設(shè)置內(nèi)容2.基礎(chǔ)組件-視頻視頻半透明：選擇視頻是否半透明，并可以設(shè)置視頻背景。重置主題樣式：可以重新設(shè)置組件的主題樣式為默認(rèn)。設(shè)置內(nèi)容2.基礎(chǔ)組件-視頻《工業(yè)可視化》/工業(yè)互聯(lián)網(wǎng)系列課程目錄基礎(chǔ)組件-文本01基礎(chǔ)組件-視頻02基礎(chǔ)組件-圖片03網(wǎng)頁(yè)組件-圖片輪播044.網(wǎng)頁(yè)組件-圖片輪播圖片輪播是網(wǎng)頁(yè)組件的一種，可以用來(lái)輪播展示本地或者網(wǎng)絡(luò)圖片，該組件沒(méi)有數(shù)據(jù)源配置。位置尺寸：設(shè)置圖片輪播組件的長(zhǎng)寬尺寸和位置。對(duì)稱(chēng)：可對(duì)組件進(jìn)行上下、左右對(duì)稱(chēng)翻轉(zhuǎn)。填充方式：圖片填充方式包括拉伸、填充、覆蓋、居中。邊框：可設(shè)置組件的邊框類(lèi)型，包括實(shí)線(xiàn)、虛線(xiàn)、無(wú)邊框設(shè)置內(nèi)容透明度：組件的透明度。取值范圍為0~100%。為0時(shí)，組件隱藏；為100%時(shí)，組件全部顯示。默認(rèn)為100%。拉拽或輸入數(shù)值可改變其透明度。鏈接地址：可以給組件鏈接網(wǎng)頁(yè)地址，在單擊組件時(shí)跳轉(zhuǎn)到相應(yīng)網(wǎng)頁(yè)。頁(yè)面列表：可以設(shè)置單擊跳轉(zhuǎn)的頁(yè)面，通過(guò)單擊組件進(jìn)行頁(yè)面切換。輪播速度：設(shè)置圖片輪播切換速度，有5種速度選擇。設(shè)置內(nèi)容4.網(wǎng)頁(yè)組件-圖片輪播4.網(wǎng)頁(yè)組件-圖片輪播配置選項(xiàng)：當(dāng)前有左右移動(dòng)、圖層導(dǎo)航兩種選項(xiàng)，可以通過(guò)勾選，選擇顯示或隱藏。背景陰影：勾選顯示組