《工業(yè)可視化》課件 任務(wù)1.2 設(shè)計工業(yè)企業(yè)信息頁面 -知識準(zhǔn)備

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

設(shè)置內(nèi)容設(shè)置文本框的顏色，支持漸變，通過單擊“+”符號添加另一種顏色，從而達(dá)到兩種顏色的漸變效果。單擊“”符號可以修改顏色漸變的方向。注意：設(shè)置文本框背景色時，需要調(diào)整背景色的透明度大于0%，文本框才會顯示出顏色。背景色1.基礎(chǔ)組件-文本設(shè)置文本組件邊框線條顏色、類型（實(shí)線、虛線、無邊框和粗細(xì)；可通過輸入顏色值調(diào)整顏色，或者通過調(diào)色板選擇顏色和透明度，邊框默認(rèn)設(shè)置為“無”，需要選擇實(shí)線或者虛線才會出現(xiàn)對應(yīng)的邊框樣式。邊框1.基礎(chǔ)組件-文本圓角：調(diào)整文本框的角度樣式，默認(rèn)是零，拉拽或輸入數(shù)值可改變圓角大小。文本：用來輸入需要在文本框內(nèi)顯示的文字內(nèi)容。頁面列表：設(shè)置單擊跳轉(zhuǎn)的頁面，通過單擊組件進(jìn)行頁面切換。鏈接地址：可以給組件鏈接網(wǎng)頁地址，在單擊組件時跳轉(zhuǎn)到相應(yīng)網(wǎng)頁。設(shè)置內(nèi)容1.基礎(chǔ)組件-文本當(dāng)勾選時，會出現(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)容是視頻、滾動圖片時，不同播放方式會有區(qū)別）。文本彈框：彈框可以放置其他組件，當(dāng)單擊或劃過組件時，顯示彈框中的組件。陰影：勾選顯示文本框的陰影并修改其陰影顏色，取消勾選則無陰影。1.基礎(chǔ)組件-文本1.文本組件的數(shù)據(jù)源文本組件的數(shù)據(jù)源類型選擇“數(shù)據(jù)源”時，會顯示如右側(cè)圖片所示的內(nèi)容；

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

設(shè)置內(nèi)容1.文本組件的數(shù)據(jù)源舉例：如右圖所示設(shè)置文本組件的數(shù)據(jù)源為采集點(diǎn)的“急?！睂傩裕坏┘蓖Ｐ盘柌杉降闹禐?時，文本顯示“報警，請注意”的紅色字體，否則不顯示信息?！豆I(yè)可視化》/工業(yè)互聯(lián)網(wǎng)系列課程目錄基礎(chǔ)組件-文本01基礎(chǔ)組件-視頻02基礎(chǔ)組件-圖片03網(wǎng)頁組件-圖片輪播043.基礎(chǔ)組件-圖片

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

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

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

設(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)頁組件-圖片輪播044.網(wǎng)頁組件-圖片輪播圖片輪播是網(wǎng)頁組件的一種，可以用來輪播展示本地或者網(wǎng)絡(luò)圖片，該組件沒有數(shù)據(jù)源配置。位置尺寸：設(shè)置圖片輪播組件的長寬尺寸和位置。對稱：可對組件進(jìn)行上下、左右對稱翻轉(zhuǎn)。填充方式：圖片填充方式包括拉伸、填充、覆蓋、居中。邊框：可設(shè)置組件的邊框類型，包括實(shí)線、虛線、無邊框設(shè)置內(nèi)容透明度：組件的透明度。取值范圍為0~100%。為0時，組件隱藏；為100%時，組件全部顯示。默認(rèn)為100%。拉拽或輸入數(shù)值可改變其透明度。鏈接地址：可以給組件鏈接網(wǎng)頁地址，在單擊組件時跳轉(zhuǎn)到相應(yīng)網(wǎng)頁。頁面列表：可以設(shè)置單擊跳轉(zhuǎn)的頁面，通過單擊組件進(jìn)行頁面切換。輪播速度：設(shè)置圖片輪播切換速度，有5種速度選擇。設(shè)置內(nèi)容4.網(wǎng)頁組件-圖片輪播4.網(wǎng)頁組件-圖片輪播配置選項：當(dāng)前有左右移動、圖層導(dǎo)航兩種選項，可以通過勾選，選擇顯示或隱藏。背景陰影：勾選顯示組