《工業(yè)可視化》課件 任務2.2 設計生產(chǎn)車間信息頁面 -知識準備

《工業(yè)可視化》/工業(yè)互聯(lián)網(wǎng)系列課程湖南三一工業(yè)職業(yè)技術(shù)學院項目二：生產(chǎn)制造的可視化設計任務2.2設計生產(chǎn)車間信息頁面>>※知識準備《工業(yè)可視化》/工業(yè)互聯(lián)網(wǎng)系列課程目錄控件組件-倒計時01控件組件-直線進度條02控件組件-立體儀表盤03網(wǎng)頁組件-卡片04組件彈窗051.控件組件-倒計時倒計時組件屬于指示器，可以顯示倒計的天數(shù)、時分秒、天數(shù)+時分秒。倒計時組件配置數(shù)據(jù)源時，度量展示為倒計時的讀數(shù)。數(shù)據(jù)源有自動獲取和手動獲取兩種形式，自動獲取需要和相關數(shù)據(jù)源連接，如物模型或數(shù)據(jù)庫。手動獲取的計算邏輯有正序和倒序，正序的目標日期要小于當前時間，例如已經(jīng)設備已上線100天；倒序的目標日期大于當前時間，例如距離高考還剩100天。

倒計時組件數(shù)據(jù)源使用倒計時組件時，可以通過在“控件組件-指示器-倒計時”路徑找到，將倒計時拖拽到畫布即可。1.控件組件-倒計時位置尺寸：設置組件的長寬尺寸和位置。XY是設置組件的高度和寬度，單位為像素。WH是組件的寬度和高度。屬性設置1.控件組件-倒計時屬性設置主題：可以設置組件的主題顏色，當前有六種主題色可以選擇。字體：可選擇字體樣式。字號：文字的大小。字體顏色：文字的顏色。在顏色調(diào)色板中選擇顏色和透明度。手動輸入RGB、HSL、Hex數(shù)值，改變顏色。背景顏色：組件的背景顏色。在顏色調(diào)色板中選擇顏色和透明度。手動輸入RGB、HSL、Hex數(shù)值，改變顏色翻牌效果：包括向下翻、向上翻、無三種翻牌效果可以選擇。時間格式：包括天、時分秒、全顯示三種時間格式可以選擇。1.控件組件-倒計時過期效果，用于提示如果超過了倒計時時間顯示的提示和效果。過期提示：在輸入框輸入提示文字。顯示內(nèi)容：有天數(shù)和時間兩種選項，可以通過勾選，選擇顯示或隱藏；字號：設置文字的大小；字體顏色：設置文字的顏色；背景顏色：設置過期提示下組件的背景顏色。屬性設置1.控件組件-倒計時數(shù)據(jù)源：可設置自動獲取或者手動獲取計算邏輯：可設置正序或者倒序。目標日期：根據(jù)日歷選擇截止日期。正序的目標日期要小于當前時間。倒序的目標日期大于當前時間。數(shù)據(jù)源設置2.控件組件-直線進度條直線進度條可以顯示數(shù)值所占比例，多用于完成進度、指標及趨勢等場景，重點突出企業(yè)/業(yè)務，可通過指標的變化快速判斷是否有經(jīng)營異常。使用直線進度條組件時，可以通過在“控件組件-進度條-直線進度條”路徑找到，將組件拖拽到畫布即可。2.控件組件-直線進度條位置尺寸：XY是設置組件的高度和寬度，單位為像素；WH是組件的寬度和高度，單位為像素；可以輸入數(shù)值自定義大小，也可以通過拖拽的方式改變組件的寬高；屬性設置2.控件組件-直線進度條顯示：包括居中、填滿兩種顯示方式可以選擇；圖表選項：當前有標題一種選項，可以通過勾選，選擇顯示或隱藏；圖標主題：顯示組件的主題顏色；背景顏色：可設置組件的背景色；屬性2.控件組件-直線進度條標題：在此處輸入自定義標題名稱；字體：可選擇字體樣式；字重：設置文字粗細；顏色：文字的顏色，可以在顏色調(diào)色板中選擇顏色和透明度;也可以手動輸入RGB、HSL、Hex數(shù)值，改變顏色；字號：文字的大?。婚g距：進度條色塊之間的距離；圖表字體圖表樣式粗細：進度條的粗細。拉拽或輸入數(shù)值或點擊粗細進度條可改變環(huán)寬度。方向：組件方向，包括橫向和縱向。顏色：進度條色塊的顏色。數(shù)值顯示：設置數(shù)值的顯示樣式，包括百分比和數(shù)值兩種。值域：輸入顯示數(shù)值的范圍，可以設置起始參數(shù)和最大參數(shù)；2.控件組件-直線進度條2.控件組件-直線進度條程度標記，通過單擊圖標添加程度標記，單擊可以刪除標記。選擇條件：設定程度篩選條件，選擇“＜”，輸入篩選數(shù)值。顏色：程度顯示顏色；左圖中的設置表示，當進度小于50%時，顯示進度條顏色為綠色。2.控件組件-直線進度條直線進度條組件配置數(shù)據(jù)源時，度量展示為進度條的讀數(shù)；數(shù)據(jù)源有物模型和用戶創(chuàng)建的數(shù)據(jù)源兩種；直線進度條的數(shù)據(jù)源配置內(nèi)容如下：數(shù)據(jù)源為物模型：打開物模型物模型：選擇需要連接的物模型；數(shù)據(jù)源：有歷史數(shù)據(jù)、采集數(shù)據(jù)和報警數(shù)據(jù)當選擇了數(shù)據(jù)源之后，會出現(xiàn)度量，通過單擊“+”圖標來選擇進度條需要顯示的度量內(nèi)容；

設置內(nèi)容2.控件組件-直線進度條數(shù)據(jù)源為其他數(shù)據(jù)源：關閉物模型數(shù)據(jù)源：選擇用戶創(chuàng)建的數(shù)據(jù)源數(shù)據(jù)源設置3.控件組件-立體儀表盤立體儀表盤可以直觀的表現(xiàn)出某個指標的進度或?qū)嶋H情況，比如反映設備的運行速度、生產(chǎn)溫度、電量使用情況等，儀表盤的好處在于它能跟人們的常識結(jié)合，使大家馬上能理解看什么、怎么看，比單純的文字展示更直觀易于理解。該組件在編輯器中的位置和添加方式如下所示。3.控件組件-立體儀表盤位置尺寸：設置組件的長寬尺寸和位置，XY是設置組件的高度和寬度，單位為像素；WH是組件的寬度和高度。屬性設置3.控件組件-立體儀表盤圖表主題：可以設置組件的主題顏色，當前有6種主題色可以選擇；數(shù)值顯示：設置數(shù)值的顯示樣式，包括百分比和數(shù)值兩種；值域：輸入儀表盤顯示數(shù)值的范圍；字號：文字的大小；字體樣式：可選擇字體樣式；字重：設置文字粗細；字體顏色：文字的顏色；字體位置：設置文字的位置；字體屬性3.控件組件-立體儀表盤單位輸入：自定義輸入數(shù)值單位；單位大小：單位的文字大??；單位樣式：可選擇單位的字體樣式；單位字重：設置文字粗細；單位顏色：設置單位的文字顏色；單位位置：設置單位顯示的位置；單位屬性立體儀表盤組件配置數(shù)據(jù)源時，度量展示為儀表的指針數(shù)值。數(shù)據(jù)源有物模型和其他數(shù)據(jù)源兩種。數(shù)據(jù)源連接方法與進度條相似，只是選擇的度量參數(shù)不同。4.網(wǎng)頁組件-卡片卡片組件可以用來展示具有多個參數(shù)的某個主題，比如一個設備部件的多個關鍵參數(shù)同時實時展示，卡片組件的參數(shù)個數(shù)可以自己設定，該組件在編輯器中的位置和添加方式見圖。4.網(wǎng)頁組件-卡片組件尺寸：包括組件的寬度和高度，單位為像素。組件樣式選擇：有五個樣式可選擇，每個樣式的參數(shù)個數(shù)和展示形式不同。屬性設置組件名稱：在此處輸入組件名稱。主題：可以設置組件的主題顏色，當前有5種主題色可以選擇。設置：設置參數(shù)的行數(shù)、列數(shù)及行列之間的間距值。標題排列：從下拉框中選擇所需的樣式；背景填充方式：有居中、拉伸、覆蓋、填充四種方式；背景位置：從下拉框中選擇所需的樣式；文本對齊：設置文本對齊方式；基礎設置4.網(wǎng)頁組件-卡片標題字體：可選擇標題字體樣式。顏色：可設置標題字體的顏色；樣式：設置標題字體的樣式。方向：設置標題字體的方向。水平位置：設置標題字體的水平位置，可以滑動移動條也可以直接輸入數(shù)據(jù)。垂直位置：設置標題字體的垂直位置，可滑動移動條也可直接輸入數(shù)值標題字體設置4.網(wǎng)頁組件-卡片數(shù)值的字體設置方法與標題相同，不展開闡述。4.網(wǎng)頁組件-卡片顏色：設置數(shù)值1/數(shù)值2/數(shù)值3/數(shù)值4/數(shù)值5/數(shù)值6的字體顏色單位：勾選為單位關閉即不顯示。背景圖片：數(shù)值的背景圖片設置。數(shù)值字體單個設置4.網(wǎng)頁組件-卡片數(shù)據(jù)源設置卡片組件配置數(shù)據(jù)源時，選擇了數(shù)據(jù)源后，會出現(xiàn)選擇字段，根據(jù)卡片組件的參數(shù)選擇字段，點擊“+”圖標即可添加。名稱：在卡片組件上顯示的內(nèi)容；Key：數(shù)據(jù)源的數(shù)據(jù)項名稱；4.網(wǎng)頁組件-卡片控制單元：表示該條件對卡片組件中哪個序號的卡片進行判斷；篩選條件：設置比較符號和對應的內(nèi)容來進行條件篩選；文本：滿足篩選條件，顯示的文本內(nèi)容；字體顏色：滿足篩選條件，顯示的字體顏色；背景：滿足篩選條件，顯示的背景內(nèi)容。

設置內(nèi)容判斷條件也可為卡片組件增加判斷條件，實現(xiàn)不同判斷結(jié)果時展示不同內(nèi)容；5.組件彈框圖片組件、文本組件等是可以設置彈框，組件彈框主要用來顯示在頁面中未詳盡展示的內(nèi)容，比如在某個設備名稱或者設備圖片設置彈框，當鼠標滑過或者單擊的時候，可以顯示該設備的名稱、負責人、運行狀態(tài)等詳細信息；比如在車間整體布局中，無法全部展示所有工藝段的工況，則在每個工段可設置彈框顯示工段更詳細的信息。本任務以設置圖片組件的彈框進行示例說明，當需要設置圖片的彈框時，如右圖所示：選中待添加圖片彈框功能的圖片；打開圖片屬性中的圖片彈框功能，此時會出現(xiàn)彈框；選中彈框，即可設置彈框顯示內(nèi)容的屬性。5.組件彈框蒙層背景：勾選后的效果是，顯示彈框時頁面會被蒙層遮住，以突出彈框內(nèi)容；內(nèi)容來源：有兩種來源，一種是頁面連接，一種是在彈框上設置；彈框類型：有“panel中顯示”和“panel外顯示”兩種類型可選；位置設置：有拖動、跟隨組件、頁面居中的方式，分別表示可以拖動彈框、或者跟隨組件位置、或者在頁面居中顯示；觸發(fā)方式：有點擊和劃過兩種觸發(fā)方式，點擊表示需要單擊組件才會出現(xiàn)彈框，劃過是只要鼠標劃過組件即可出現(xiàn)彈框關閉方式：有點擊和劃過兩種關閉方式；播放方式：有繼續(xù)播放和從頭播放兩種方式。彈窗設置5.組件彈框?qū)傩栽O置位置尺寸：設置彈框的長寬尺寸和位置，XY是設置組件的高度和寬度，單位為像素；WH是組件的寬度和高度。壁紙：有6種壁紙可以選擇；標題：輸入彈框的標題名稱；邊框主題：有6種邊框主題；