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

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

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