《工業(yè)可視化》課件 任務(wù)3.2 設(shè)計售后服務(wù)信息頁面 -任務(wù)實施

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

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