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

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

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

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