后市場服務的可視化設計1設計設備遠程運維頁面>>※任務實施《工業可視化》/《工業可視化》/目錄1.任務分析2.導入項目3.設計設備工作狀態4.設計設備健康評分5.設計維保記錄信息6.設計配件故障預測7.設計故障處理記錄8.設計設備實時工況9.預覽驗證頁面效果1.任務分析本任務的主要目的是設計設備的健康信息，便于設備維修工程師和設備用戶能實時查看設備的健康情況，具體展示數據和顯示組件分析結果如分析結果如下表所示：展示模塊具體內容使用組件數據源設備信息設備編碼、設備位置文本組件無設備工作狀態設備圖片圖片組件無設備工作狀態圖片組件物模型-工程機械車-作業/收車設備健康評分健康狀態文本組件物模型-工程機械車-設備健康評分健康評分立體儀表盤維保記錄驚喜工單日期、維保類型、工單狀態表格組件MYSQL數據庫-維保記錄配件故障預測配件名稱、故障編碼、故障概率、預測周期表格組件MYSQL數據庫-配件故障預測故障處理記錄故障類型、故障原因、處理日期、處理狀態表格組件MYSQL數據庫-故障記錄設備實時工況油位百分比立體儀表盤物模型-工程機械車-油位冷卻水溫度立體儀表盤物模型-工程機械車-水溫轉速立體儀表盤物模型-工程機械車-轉速負載立體儀表盤物模型-工程機械車-實際負載任務分析2.導入項目（1）登錄云視界，在云視界首頁單擊“創建項目”，在彈窗中單擊“導入項目ID”，然后在新彈窗中輸入項目ID、項目名稱（自定義），最后單擊“導入”按鈕。創建項目2.導入項目（1）

任務分析（2）創建完成后，頁面自動跳轉到可視化編輯頁面。創建項目2.導入項目（3）修改頁面名稱。先單擊頁面切換圖標，出現的彈框中，單擊編輯圖標，把頁面名稱改為“設備健康信息”（注：名稱可自定義，但是建議按照一定的規范進行修改，便于其他工程師運維），單擊“確定”按鈕完成修改。修改頁面名稱3.設計設備工作狀態（1）從“素材庫→我的→工業可視化課程素材→任務3_1”文件中，找到設備圖片拖拽到頁面中間如圖所示的位置，也可以自己上傳素材使用。導入素材3.設計設備工作狀態（2）從“素材庫→我的→工業可視化課程素材→任務3_1”文件中，找到狀態圖片拖拽到設備圖片右上角，并切換到數據源設置，打開“物模型”開關，選擇數據源為“采集點數據”，取值為“N工作/收車”。設置數據源3.設計設備工作狀態（3）設置圖片組件關聯的數據，根據其采集到的狀態值變化，顯示為對應的狀態圖片。由于圖片組件關聯的“工作/收車信號”是布爾量，只有true（值為1）和false（值為0）兩種狀態，因此設置其篩選條件為“=0”的時候，顯示的圖片為灰色關機圖標，表示設備不是作業（關機）狀態；設置其篩選條件為“=1”的時候，即設備在作業狀態的時候，顯示的圖片為綠色作業圖標。設置關聯數據4.設計設備健康評分（1）從控件組件中，把立體儀表盤組件拖拽到如圖所示的位置，并設置其屬性，本示例字號改為“40”，字體位置改為“25”，單位輸入改為“分”，用來表示設備的健康得分。設計健康評分4.設計設備健康評分（2）從基礎組件中，選擇文本組件拖拽到設備健康評分區域，并設置其屬性如圖所示。設計屬性4.設計設備健康評分（3）切換到數據源編輯區，把“數據源”的“物模型”開關打開，“物模型”選擇前面任務創建的“工程機械車”，“數據源”選擇“采集點數據”，單擊“取值”后面的“+”圖標，再從出現的下拉列表中選擇“N設備健康評分”，完成文本組件和數據關聯。設置數據源4.設計設備健康評分（4）設置文本組件數據源的判斷條件，使之在不同條件下不同的文字內容。由于文本組件關聯的“設備健康評分”是連續性的離散量，數值區間[0,100]，因此設置其篩選條件1為“>=90”的時候，顯示的文字內容為“設備處于良好的狀態”，文字顏色為綠色；否則滿足篩選條件2為“區間60至89.99之間”的時候，顯示的文字內容為“使用意見：繼續使用，閑時保養”，文字顏色為黃色；未滿足條件的情況下，顯示的文本內容為“注意！請及時對設備進行檢修保養”，文字顏色設置為紅色。設置判斷條件5.設計維保記錄信息（1）使用拖拽的方式，把表格組件添加到維保記錄區域位置并調整大小，并設置其組件名稱為“維保記錄”。設置維保記錄5.設計維保記錄信息（2）按照圖中所示的線框內的參數，修改維保記錄的表格屬性，其他采用默認設置。設置屬性說明：本書的示例參數僅供參考，實際需可以根據用戶的審美偏向進行調整。5.設計維保記錄信息（3）完成創建表格組件之后，切換到表格組件數據源編輯區，“數據源”選擇“維保記錄”，依次單擊“取值”后的“+”圖標，再出現的下拉列表中選擇“工單日期”、“維保類型”、“工單狀態”，完成表格組件和數據關聯，其他無需修改。設置數據源6.設計配件故障預測（1）把表格組件拖拽到配件故障預測的區域內，按照“5.設計維保記錄信息”的操作步驟設置其屬性，并設置其數據源為“配件故障預測”，維度選擇“配件名稱、故障編碼、故障概率、預測周期”。設計故障預測7.設計故障處理記錄（1）把表格組件拖拽到配件故障預測的區域內，按照“5.設計維保記錄信息”的操作步驟設置其屬性，不勾選動畫效果；并設置其數據源為“故障記錄”，維度選擇“維修日期、故障類型、故障原因、服務狀態”，勾選表格翻頁選項。設計故障記錄8.設計設備實時工況（1）使用拖拽的方式，把立體儀表盤組件添加到實時工況區域，調整其大小，其他屬性不需要調整，字號改為40，字體位置改為35，單位輸入“%”，其他參數可無需修改。設計油位工況8.設計設備實時工況（2）修改完成后，切換到數據源編輯區，把“數據源”的“物模型”開關打開，“物模型”選擇前面任務創建的“工程機械車”，“數據源”選擇“采集點數據”，單擊“取值”后面的“+”圖標，再從出現的下拉列表中選擇“油位”，完成立體儀表盤組件和數據源關聯如圖所示。設置數據源8.設計設備實時工況（3）在立體儀表盤下方，添加文本組件，屬性根據用戶審美偏好進行設置，文本內容輸入“油位百分比”。設置文本8.設計設備實時工況（4）重復前三步的操作，分別設計冷卻水溫度、轉速、負載立體儀表盤的屬性和數據源以及對應的顯示文本內容，如圖1和圖2、圖3所示。設計其他工況圖1圖2圖39.預覽驗證頁面效果（1）完成所有內容的設計及數據源配置之后，單擊“保存當前頁”，然后進行預覽。預覽效果9.預覽驗證頁面效果（2）預覽出來的效果，預覽效果分為網頁預覽、大屏預覽、手機預覽，可分別點擊查看。預覽效果25THANKYOU

《工業可視化》/后市場服務的可視化設計1設計設備遠程運維頁面>>※任務說明《工業可視化》/任務描述01學習目標02目錄01任務描述本任務需要使用可視化設計平臺來設計設備健康信息的展示頁面，以挖掘機為例，展示其基本信息、健康評分、維保記錄、配件故障預測、故障處理記錄和關鍵參數實時工況。02學習目標知識目標技能目標了解后市場服務的概念。熟悉表格組件的屬性設置和數據源方法。會配置表格組件的屬性和數據源。會配置表格組件的翻頁滾動和分頁設置，使表格內容可以滾動呈現或者分頁呈現。會設置文本組件數據源的條件判斷，使之根據不同的判斷條件顯示不同的文本內容。《工業可視化》/后市場服務的可視化設計1設計設備遠程運維頁面>>※知識準備1.后市場服務后市場服務是指產品銷售以后，圍繞產品使用過程中的各種衍生服務。它涵蓋了產品從售出到報廢的全過程，圍繞產品售后服務和使用環節客戶需求的各種后續服務，從而產生的一系列交易活動的總稱。主要包括：維修、保養、配件供應、金融服務、保險、租賃、二手產品、大修和再制造等。后市場服務維修保養配件供應金融服務保險……隨著整個制造產業的數字化和智能化水平不斷提升，以及產品的差異化逐漸縮小，越來越多的企業為提升產品的競爭力，開始在增值服務上下功夫，用個性化和高水平服務來增加用戶的滿意度并提升用戶體驗。2.圖表組件-表格表格組件是可視化比較常用的基本組件，可以通過表格的形式展示多條數據內容；當表格組件的數據源為工業互聯網平臺對應的物模型時，也可以展示設備的實時采集值或者報警數據。位置尺寸：XY是設置表格的高度和寬度，單位為像素；WH是表格的寬度和高度主題：可以選擇主題顏色；外觀：可以設置該組件的名稱，如有多個表格，組件名稱可便于區分；

屬性設置2.圖表組件-表格表格組件是比較常用的基本組件，可以通過表格的形式展示多條數據內容；當表格組件的數據源為物理模型的直連屬性時，也可以展示設備的實時采集值。位置尺寸：XY是設置表格的高度和寬度，單位為像素；WH是表格的寬度和高度主題：可以選擇主題顏色；外觀：可以設置該組件的名稱，如有多個表格，組件名稱可便于區分；

屬性設置2.圖表組件-表格表頭屬性：可以單獨設置表頭的字體、字號、樣式、對齊方式、文字顏色、背景顏色；字體：可選擇字體樣式；字號：設置文字大小；樣式：可以設置文字加粗、斜體、刪除線、下劃線；對齊：設置文字的對齊方式，包括左對齊、居中對齊、右對齊；文字顏色：設置表頭文字的顏色；背景顏色：設置表頭單元格的背景顏色；屬性設置2.圖表組件-表格表格屬性：表格的屬性設置。每頁行數：設置表格的行數。字體：可選擇字體樣式。字號：設置文字大小。樣式：可以設置文字加粗、斜體、刪除線、下劃線。對齊：文字的對齊方式，包括左對齊、居中對齊、右對齊。文字顏色：表格文字的顏色。奇行顏色：奇數行表格的背景顏色。偶行顏色：偶數行表格的背景顏色。網格顏色：設置表格線框顏色。屬性設置2.圖表組件-表格表格序號：勾選顯示序號列，否則不顯示；自動換行：勾選時單元格文本自動換行，不勾選則超出單元格的內容顯示為省略號；屬性設置2.圖表組件-表格動畫屬性：勾選可進行當前表格的輪播；時間（秒）：通過設置時間數值，改變當前表格輪播速度。輸入數值或點擊（）可改變時間數值；重置主題樣式：一鍵還原為組件初始化的樣式；屬性設置2.圖表組件-表格雙擊表頭某一列，可以單獨設置該列的屬性。表頭屬性：設置同前面表格。表格屬性：設置同前面表格。屬性設置2.圖表組件-表格表格排序：可以勾選是否表格排序，如果是本地上傳的Excel表格，則無需填寫下方的入參值、升序、降序，如果是通過API連接進來的數據，則需要根據實際的API接口需要進行填寫。呈現方式：可以選擇默認或者文本，默認是指直接顯示原始數據，文本是指可以添加判斷條件，根據不同判斷條件的篩選結果，呈現自定義的圖片和文本，可以設置圖標的尺寸、文字顏色、背景顏色及篩選出來的此行表格的樣色。重置主題樣式：如果對設置的內容不滿意，想恢復默認設置也可以重置主題樣式。屬性設置2.圖表組件-表格表格組件數據源可以設置為：無、物模型、數據源；如果選擇為無，則只能顯示默認的文字內容；如果關聯物模型，則顯示直連物模型的實時采集數據；如果選擇為數據源，則數據源設置內容詳見下：數據源過濾：設置數據過濾的條件，進行過濾操作；

設置內容條件篩選：可自定義條件，滿足條件進行獲取，不滿足條件的不進行獲取；日期篩選：設置日期條件進行篩選，滿足日期條件的進行獲取，不滿足日期條件的不進行獲取；排序篩選：設置排序規則進行篩選；2.圖表組件-表格設置表格分頁顯示的最大數據條數；每次從數據源中獲取的最多數據條數；表格翻頁取數限制42THANKYOU

后市場服務的可視化設計2設計售后服務信息頁面>>※任務實施《工業可視化》/《工業可視化》/目錄1.任務分析2.導入項目3.設計工單狀態統計4.設計服務響應時間5.設計配件庫存信息6.設計設備保修狀態統計7.設計巡檢信息8.設計售后工單趨勢9.設計滿意度統計10.預覽驗證頁面效果1.任務分析本任務的主要目的是設計售后服務信息，便于管理者了解售后服務的滿意度、工單增長狀態、設備保修期內外的統計、設備巡檢信息等，具體展示數據和顯示組件分析結果如表所示：展示模塊具體內容使用組件數據源工單狀態今日新增工單、今日完成工單、進行中工單、已超時工單卡片組件MYSQL數據庫-工單狀態統計服務響應時間平均響應時間力矩百分比組件MYSQL數據庫-服務工單響應時間最快響應時間力矩百分比組件MYSQL數據庫-服務工單響應時間配件庫存配件庫存表格組件MYSQL數據庫-零配件庫存設備保修狀態統計設備保修狀態統計餅狀圖組件MYSQL數據庫-設備保修狀態統計巡檢信息周巡檢完成率折線圖組件MYSQL數據庫-周巡檢完成率月巡檢完成率折線圖組件MYSQL數據庫-周巡檢完成率切換標簽標簽頁組件無售后工單趨勢售后工單趨勢折線圖組件MYSQL數據庫-售后工單趨勢日歷篩選器MYSQL數據庫-售后工單趨勢滿意度統計售后部滿意度統計表格組件MYSQL數據庫-售后部滿意度調查日歷篩選器MYSQL數據庫-售后部滿意度調查任務分析2.導入項目（1）登錄云視界首頁，單擊“創建項目”，在彈出來的對話框中，點擊“導入項目ID”，然后，在彈出來的對話框中，輸入項目ID（注：項目ID可根據實際需要導入項目情況而定）、項目名稱“售后服務信息”（注：名稱可自定義，但是建議按照一定的規范進行修改，便于其他工程師運維），最后單擊“導入”按鈕。創建項目2.導入項目（1）

任務分析（2）創建完成后，頁面自動跳轉到可視化編輯頁面。創建項目3.設計工單狀態統計（1）添加卡片組件在售后服務頁面的工單狀態統計區域內，如圖所示。設計工單狀態3.設計工單狀態統計其屬性設置如下圖所示，其他屬性可無需調整。設計工單狀態3.設計工單狀態統計（2）選中卡片組件的狀態下，切換到數據源進行設置，數據源“工單狀態統計_日”，具體參數如圖所示，完成后保存刷新。設置數據源4.設計服務響應時間（1）從控件組件去中，把“力矩百分比”拖拽到服務響應時間區域內，并調整其尺寸，把標題改為“評價響應時長（單位：小時）”，字號改為16，從“數值顯示”下拉框中選擇“數值”。設計響應時間4.設計服務響應時間（2）選中組件的狀態下，切換至數據源，數據源選擇“服務工單響應時間”，度量選擇“平均響應時長”。設置數據源4.設計服務響應時間（3）按照前兩步的操作，設置“最快響應時間”的力矩百分組件，標題改為“最快響應時間（單位：分鐘）”，數據源選擇“服務工單響應時間”，度量選擇“最快響應時長”。設計響應時間5.設計配件庫存信息（1）拖拽表格組件到配件庫存區域，并根據區域大小調整其尺寸位置，設置表頭屬性的字號為16，加粗居中顯示；表格屬性的字號為14，居中顯示；動畫屬性設置3秒鐘進行滾動，其他設置可不調整。設計配件庫存5.設計配件庫存信息（2）設置表格組件的數據源如圖所示，數據源選擇“零配件庫存”，維度選擇“配件名稱”“剩余數量”。配置數據源6.設計設備保修狀態統計（1）從圖表組件中，拖拽餅狀圖到設備保修狀態統計區域內居中，并調整其到合適的尺寸大小；其數值樣式選擇“數值”，字號改為16，其余參數可無需調整。設置餅狀圖6.設計設備保修狀態統計（2）切換到餅狀圖組件的數據源設置，數據源選擇“設備保修狀態統計”，度量選擇“保內設備數”“保外設備數”“即將過保設備數”“本月續保設備數”。設置數據源7.設計巡檢信息（1）添加標簽頁組件。從網頁組件中，把標簽頁組件拖拽到巡檢信息區域內，調整其大小和位置，并設置標簽1文本為“周巡檢完成率”，標簽2文本為“月巡檢完成率”，其他設置可不修改，也可根據審美偏好調整。添加標簽頁組件7.設計巡檢信息（2）添加折線圖組件。添加折線圖到巡檢信息區域內，并調整其位置及大小，時間格式選擇“日”屬性的圖表選項可參考圖中的設置，其他設置根據用戶審美進行調整。添加折線圖組件7.設計巡檢信息（3）設置折線圖數據源。設置曲線圖的數據源如圖所示，數據源選擇“巡檢完成率_周”，維度選擇“日期”，度量選擇“周巡檢完成率”。設置數據源7.設計巡檢信息（4）標簽頁關聯折線圖。完成折線圖的設置后，重新選中巡檢信息區域內的標簽頁，切換到關聯組件，打開“選中關聯”后的開關，此時頁面中所有的組件出現圓形的可選擇圖標，勾選巡檢信息區域內的折線圖，完成“周巡檢完成率”標簽的關聯組件。標簽頁關聯折線圖7.設計巡檢信息（5）設置標簽頁的標簽2。標簽頁的第一個標簽關聯組件完成后，重新再單擊一次選中，在屬性設置中，選中“標簽2”，此時標簽1關聯的折線圖不可見。設置標簽27.設計巡檢信息（6）把折線圖組件拖拽到巡檢信息區域中，并設置日屬性如圖所示。添加折線圖組件7.設計巡檢信息（7）設置第二個折線圖的數據源如圖所示，數據源選擇“巡檢完成率_月”，維度選擇“日期”，度量選擇“月巡檢完成率”。設置數據源7.設計巡檢信息（8）重新選擇標簽頁，選中“標簽2”的情況下，單擊“選中關聯”的開關，勾選月巡檢完成率的選擇圖標。重新選擇標簽頁8.設計售后工單趨勢（1）拖拽折線圖組件到售后工單趨勢區域內，時間格式選擇“月”，圖表選項設置如圖所示，其他參數可使用默認設置。設計工單趨勢8.設計售后工單趨勢（2）設置折線圖的數據源如圖所示，數據源選擇“售后工單趨勢”，維度選擇“日期”，度量選擇“新增工單”“完成工單”。設置數據源8.設計售后工單趨勢（3）拖拽日歷篩選器到售后工單趨勢區域，修改組件名稱為“售后工單篩選日歷”，去掉時間范圍的勾選。添加篩選日歷8.設計售后工單趨勢“售后工單篩選日歷”其標題設置及日期樣式的設置如下圖所示。添加篩選日歷8.設計售后工單趨勢（4）設置日歷篩選器的數據源如圖所示，數據源1的名稱選擇“售后工單趨勢”，度量選擇“日期”。設置數據源9.設計滿意度統計（1）拖拽組件到滿意度統計區域內，按用戶審美設置其屬性。設計滿意度統計9.設計滿意度統計（2）設置滿意度統計的表格組件的數據源如圖所示，數據源選擇“售后部滿意度調查”，維度選擇“售后部”“滿意度”。設置數據源9.設計滿意度統計（3）拖拽日歷篩選器到滿意度統計區域內，并調整位置及大小，設置組件名稱為“滿意度篩選日歷”，去掉時間范圍的勾選。添加日歷篩選器9.設計滿意度統計滿意度統計區域其標題設置及日期樣式如圖所示。添加日歷篩選器9.設計滿意度統計（4）設置滿意度統計區域的日歷篩選器如圖所示，數據源1的名稱選擇“售后部滿意度調查”，度量選擇“日期”。設置數據源10.預覽驗證頁面效果（1）完成了所有組件的設計與數據源配置之后，單擊“保存當前頁”，最后單擊“預覽”標簽。預覽效果10.預覽驗證頁面效果（2）選擇全屏預覽效果，如圖所示，分別檢查標簽頁、日歷篩選器是否符合設置預期，如果不符合則可返回修改。預覽效果78THANKYOU

《工業可視化》/后市場服務的可視化設計2設計售后服務信息頁面>>※任務說明《工業可視化》/任務描述01學習目標02目錄01任務描述本任務需要使用云視界平臺工具，設計公司的售后服務信息可視化大屏，大屏上需要展示的內容包含：工單狀態統計、設備狀態統計、工單趨勢、售后維修工程師的服務派工排名、設備巡檢信息展示、售后服務的滿意度統計、零配件庫存統計等。02學習目標知識目標技能目標熟悉力矩百分比組件的屬性和數據源配置方法；熟悉力餅圖組件的屬性和數據源配置方法；熟悉標簽頁組件的屬性和數據源配置方法；了解售后服務關注的服務響應時間、滿意度統計等內容；會配置力矩百分比組件的屬性和數據源，使之呈現服務響應時間的數值；會配置餅圖組件的屬性和數據源，使之呈現不同數量的占比；會配置標簽頁組件的屬性和關聯組件，使之可以切換顯示不同的頁面內容；會驗證標簽頁的設置是否符合預期要求；《工業可視化》/后市場服務的可視化設計2設計售后服務信息頁面>>※知識準備《工業可視化》/目錄控件組件-力矩百分比01圖表組件-餅圖02網頁組件-標簽頁031.控件組件-力矩百分比力矩百分比可以顯示數值所占比例，或者某個信息的數值，如速度、溫度等；其在控件組件下，使用時直接拖拽到頁面即可，如下圖所示，力矩百分比的屬性設置內容如所示，數據源設置同直線進度條。1.控件組件-力矩百分比位置尺寸：XY是設置組件的高度和寬度，單位為像素；WH是組件的寬度和高度；

設置內容屬性顯示：可選居中或填滿標題、百分比：可勾選顯示，不勾選隱藏選擇主題：可選擇組件的主題顏色標題：標題顯示的內容，可自定義修改字體：選擇字體方向：字體的排列方向字重：字體粗細顏色：字體顏色1.控件組件-力矩百分比屬性設置數值顯示：可選擇百分比或者數值，如果選擇百分比，則數據后會有“%”符號；顯示：可設置組件數據的最小值和最大值顏色：可設置組件顯示的顏色，可設置漸變色邊框：設置組件的邊框，可以選擇無、虛線、實線程度標記：可設置條件，當數值在大于某個閾值時，顯示提示顏色2.圖表組件-餅圖餅圖屬于圖表組件，餅圖用于分析數據的簡單占比，用戶可以通過餅圖很直觀的看到每一個部分在整體中所占的比例，幫助用戶快速了解數據的占比分配。使用時，從圖表組件中拖拽餅圖到頁面的位置即可，如圖所示。餅圖不適用于多分類的數據，因為隨著分類的增多，每個切片就會變小，最后導致大小區分不明顯，每個切片看上去都差不多大小，這樣對于數據的對比是沒有什么意義的。所以餅圖不適合用于數據量大且分類很多的場景。2.圖表組件-餅圖位置尺寸：XY是設置組件的高度和寬度，單位為像素；WH是組件的寬度和高度可選擇實心餅圖或者環狀圖樣式設置內容2.圖表組件-餅圖顯示：可選居中或填滿圖例、數值標簽：可勾選顯示，不勾選隱藏選擇主題：可選擇組件的主題顏色數值樣式：可選擇顯示百分比或者數值。圖表字體：選擇字體。字號：設置字體大小。字重：設置字體粗細。顏色：設置字體顏色。屬性2.圖表組件-餅圖半徑：可調節餅圖的半徑背景色：可為餅圖設置背景色如果想要重置屬性的參數，可單擊“重置主題樣式”恢復初始值。圖表樣式2.圖表組件-餅圖數據源設置數據源：選擇需要關聯的數據表；度量：展示餅圖的組成數據源過濾：單擊“+”圖標可彈出“添加過濾”彈窗，可設置“條件過濾”“日期過濾”“排序”參與組件過濾：勾選時，本組件的數據源將參與本頁面的其它篩選器的篩選。3.網頁組件-標簽頁標簽頁組件是比較常用的網頁組件之一，方便用戶在一個頁面中對多個報表頁面進行集中查看。標簽頁組件通過配置選項卡切換，滿足企業人員對業務平級內容切換展示。標簽組件可以在“基礎組件→