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

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

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

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

關閉方式：彈框的關閉方式，包括劃過關閉和電機關閉；

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

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

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

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

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

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

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