《工業(yè)可視化》課件 任務(wù)2.3 設(shè)計設(shè)備駕駛艙頁面 -任務(wù)實施

項目二：生產(chǎn)制造的可視化設(shè)計任務(wù)2.3設(shè)計設(shè)備駕駛艙頁面>>※任務(wù)實施《工業(yè)可視化》/工業(yè)互聯(lián)網(wǎng)系列課程《工業(yè)可視化》/工業(yè)互聯(lián)網(wǎng)系列課程目錄1.任務(wù)分析2.創(chuàng)建數(shù)據(jù)源3.創(chuàng)建項目4.設(shè)置設(shè)備狀態(tài)數(shù)5.設(shè)置折線圖數(shù)據(jù)6.設(shè)置日歷篩選器7.設(shè)置分段篩選器8.預(yù)覽驗證頁面效果1.任務(wù)分析根據(jù)任務(wù)描述，在已有項目模板的基礎(chǔ)上，要完成“車間設(shè)備駕駛艙”可視化展示大屏設(shè)計，還需要完成的工作分析如下：創(chuàng)建數(shù)據(jù)源，需要創(chuàng)建“生產(chǎn)設(shè)備駕駛艙”所有展示數(shù)據(jù)的數(shù)據(jù)源；設(shè)備效率指標(biāo)已經(jīng)由由工業(yè)大數(shù)據(jù)工程師計算處理完成并落盤到到數(shù)據(jù)庫，數(shù)據(jù)庫信息已給出，源數(shù)據(jù)庫中的表包含：生產(chǎn)設(shè)備駕駛艙、鏜床設(shè)備指標(biāo)、銑床設(shè)備指標(biāo)、焊接機(jī)器人設(shè)備指標(biāo)、生產(chǎn)耗電費(fèi)用、生產(chǎn)耗電量、總產(chǎn)量等；創(chuàng)建項目，通過導(dǎo)入生產(chǎn)設(shè)備駕駛艙模板的項目ID創(chuàng)建項目，將模板畫面中的組件關(guān)聯(lián)對應(yīng)的數(shù)據(jù)源，完成車間設(shè)備工作狀態(tài)數(shù)據(jù)的展示。添加日歷篩選器組件，并進(jìn)行屬性設(shè)置、關(guān)聯(lián)對應(yīng)的數(shù)據(jù)源，利用日歷篩選器組件實現(xiàn)生產(chǎn)設(shè)備數(shù)據(jù)能按某個選中的日期進(jìn)行篩選展示。添加分段篩選器組件，并進(jìn)行屬性設(shè)置、關(guān)聯(lián)對應(yīng)的數(shù)據(jù)源，利用分段篩選器組件實現(xiàn)生產(chǎn)設(shè)備效率指標(biāo)和生產(chǎn)能耗數(shù)據(jù)能按時間段進(jìn)行趨勢展示。操作步驟2.創(chuàng)建數(shù)據(jù)源（1）

任務(wù)分析連接數(shù)據(jù)庫步驟1：登錄云視界平臺后，選擇左側(cè)“數(shù)據(jù)源”進(jìn)入數(shù)據(jù)源管理頁面，并單擊“+創(chuàng)建數(shù)據(jù)源”標(biāo)簽，如圖所示。2.創(chuàng)建數(shù)據(jù)源連接數(shù)據(jù)庫步驟2：進(jìn)入“創(chuàng)建數(shù)據(jù)源”頁面后，本任務(wù)使用“連接MySQL數(shù)據(jù)庫”創(chuàng)建數(shù)據(jù)源，在“數(shù)據(jù)庫”中單擊“連接MySQL數(shù)據(jù)庫”標(biāo)簽；2.創(chuàng)建數(shù)據(jù)源連接數(shù)據(jù)庫步驟3：在出現(xiàn)的“連接數(shù)據(jù)庫”彈窗中，輸入需要創(chuàng)建的數(shù)據(jù)源名稱及連接的數(shù)據(jù)庫信息如下：2.創(chuàng)建數(shù)據(jù)源（1）

任務(wù)分析連接數(shù)據(jù)庫名稱：可自定義名稱，但不能與“已連接數(shù)據(jù)庫”中的名稱相同，本書示例使用“設(shè)備駕駛艙”的名稱，但是建議在規(guī)模教學(xué)時，不同學(xué)員或讀者在可在該名稱后加自己的名字或其他編號做后綴，避免命名沖突；服務(wù)器：輸入需要連接的數(shù)據(jù)庫所在服務(wù)器的地址；端口：輸入服務(wù)器對應(yīng)的端口號，MySQL數(shù)據(jù)庫默認(rèn)的端口號為3306；數(shù)據(jù)庫：輸入要連接的數(shù)據(jù)庫名，按實際情況填寫，本書示例使用的“Production_Department”僅供參考；用戶：輸入該數(shù)據(jù)庫的用戶名；密碼：輸入用戶對應(yīng)的密碼。2.創(chuàng)建數(shù)據(jù)源（1）

任務(wù)分析連接數(shù)據(jù)庫步驟4：單擊“測試”標(biāo)簽，如果測試成功會有成功的提示，如圖所示，最后單擊“連接數(shù)據(jù)庫”完成數(shù)據(jù)源的創(chuàng)建。2.創(chuàng)建數(shù)據(jù)源創(chuàng)建數(shù)據(jù)表步驟1：成功創(chuàng)建“連接數(shù)據(jù)庫”后，在下方“已連接數(shù)據(jù)庫”中會顯示前面步驟創(chuàng)建的“設(shè)備駕駛艙”數(shù)據(jù)庫，單擊打開“設(shè)備駕駛艙”數(shù)據(jù)庫。2.創(chuàng)建數(shù)據(jù)源（1）

任務(wù)分析創(chuàng)建數(shù)據(jù)表步驟2：在“測試數(shù)據(jù)庫”彈窗中，可以看到連接的數(shù)據(jù)庫中的表；單擊左側(cè)某個表，在中間的預(yù)覽區(qū)可以看到該數(shù)據(jù)表的名稱及表中的數(shù)據(jù)，可以對“數(shù)據(jù)表名稱”進(jìn)行修改。2.創(chuàng)建數(shù)據(jù)源創(chuàng)建數(shù)據(jù)表步驟3：本任務(wù)選擇創(chuàng)建“總產(chǎn)量”“生產(chǎn)耗電費(fèi)用”“銑床設(shè)備指標(biāo)”“焊接機(jī)器人設(shè)備指標(biāo)”“設(shè)備駕駛艙”“鏜床設(shè)備指標(biāo)”“生產(chǎn)耗電量”的數(shù)據(jù)表表；并分別對應(yīng)一一修改其數(shù)據(jù)表名稱，建議以讀者或?qū)W員姓名或編號做后綴，避免名稱沖突。2.創(chuàng)建數(shù)據(jù)源（1）

任務(wù)分析創(chuàng)建數(shù)據(jù)表步驟4：把“自動更新”后的切換按鈕切換到“啟動”標(biāo)簽狀態(tài)；單擊配置更新標(biāo)簽，在“更新配置”彈窗中編輯數(shù)據(jù)表的更新方式和更新時間，如圖所示，本書示例使用“增量更新”方式，固定20:00更新。2.創(chuàng)建數(shù)據(jù)源創(chuàng)建數(shù)據(jù)表步驟5：完成配置后，單擊關(guān)閉“更新配置”彈窗的“X”符號，并單擊“新建”按鈕完成數(shù)據(jù)源的創(chuàng)建。2.創(chuàng)建數(shù)據(jù)源創(chuàng)建數(shù)據(jù)表步驟6：新建數(shù)據(jù)源完成后，會自動跳轉(zhuǎn)出來數(shù)據(jù)源詳情，用戶可以在該頁中單擊右上角的“”標(biāo)簽，維護(hù)該數(shù)據(jù)源的信息。2.創(chuàng)建數(shù)據(jù)源創(chuàng)建數(shù)據(jù)表說明：如果數(shù)據(jù)源的表頭的數(shù)據(jù)類型導(dǎo)入錯誤，可以手動進(jìn)行調(diào)整修改，如上圖所示，包含數(shù)字、字符、日期這三種數(shù)據(jù)類型。2.創(chuàng)建數(shù)據(jù)源創(chuàng)建數(shù)據(jù)表步驟7：單擊數(shù)據(jù)源詳情頁上的“數(shù)據(jù)源”標(biāo)簽，返回到數(shù)據(jù)源列表。2.創(chuàng)建數(shù)據(jù)源創(chuàng)建數(shù)據(jù)表步驟8：回到數(shù)據(jù)源列表，可以查看所有用戶已經(jīng)創(chuàng)建或別人授權(quán)的數(shù)據(jù)源，如圖所示，可以在操作列單擊“”，會彈出操作內(nèi)容框，可以對數(shù)據(jù)源進(jìn)行刪除、重命名、權(quán)限設(shè)置、查看數(shù)據(jù)源引用，其中查看數(shù)據(jù)源引用可以查看到該數(shù)據(jù)源被哪些頁面引用。3.創(chuàng)建項目創(chuàng)建項目（1）切換返回到云視界概覽頁面，單擊“創(chuàng)建項目”，在彈框中單擊“導(dǎo)入項ID”。3.創(chuàng)建項目（1）

任務(wù)分析導(dǎo)入項目（2）在“導(dǎo)入項目”彈窗中，輸入“項目ID”“授權(quán)碼”“項目名稱”等信息，如圖所示。建議在規(guī)模教學(xué)時，不同學(xué)員在可在“項目名稱”后加自己的名字或其他編號做后綴，避免命名沖突。3.創(chuàng)建項目導(dǎo)入項目（3）導(dǎo)入項目后會直接跳轉(zhuǎn)到編輯界面。4.設(shè)置設(shè)備狀態(tài)數(shù)設(shè)置狀態(tài)數(shù)（1）頁面切換到圖層，找到“各狀態(tài)設(shè)備數(shù)→在線數(shù)”的文本，切換到數(shù)據(jù)源，類型選擇數(shù)據(jù)源，數(shù)據(jù)源選擇“設(shè)備駕駛艙_示例”，取值選擇“在線數(shù)”完成數(shù)據(jù)源的配置，如圖所示。用同樣的操作方法，設(shè)置“開機(jī)數(shù)”“作業(yè)數(shù)”“停機(jī)數(shù)”等不同設(shè)備狀態(tài)下的數(shù)量。注意：如果在創(chuàng)建數(shù)據(jù)源時，沒有把對應(yīng)的取值數(shù)據(jù)改為“N數(shù)字”類型，則無法在取值框中呈現(xiàn)。4.設(shè)置設(shè)備狀態(tài)數(shù)（1）

任務(wù)分析設(shè)置儀表盤數(shù)據(jù)源（2）從圖層中選中“總開機(jī)率儀表盤”，切換到數(shù)據(jù)源，數(shù)據(jù)源選擇“設(shè)備駕駛艙_示例”，度量選擇“開機(jī)率”，如圖所示。并按照同樣的操作方法，設(shè)置“總作業(yè)率”“總利用率”等其他儀表盤的數(shù)據(jù)源。4.設(shè)置設(shè)備狀態(tài)數(shù)（1）

任務(wù)分析設(shè)置數(shù)據(jù)源（3）按照同樣的操作步驟，對應(yīng)設(shè)置銑床、鏜床、焊接機(jī)器人區(qū)域的指標(biāo)的數(shù)據(jù)源。5.設(shè)置折線圖數(shù)據(jù)（1）

任務(wù)分析設(shè)置折線圖數(shù)據(jù)源（1）設(shè)置頁面中右上角折線圖的數(shù)據(jù)源，數(shù)據(jù)源選擇“生產(chǎn)耗電量_示例”，維度選擇日期，度量選擇鏜床耗電量、銑床耗電量、機(jī)器人耗電量。5.設(shè)置折線圖數(shù)據(jù)（1）

任務(wù)分析設(shè)置折線圖數(shù)據(jù)源（2）用同樣的操作方法，設(shè)置另外2個折線圖的數(shù)據(jù)源，分別選擇展示“生產(chǎn)耗電費(fèi)用_示例”“總產(chǎn)量_示例”的數(shù)據(jù)，如下圖所示。設(shè)置完成后，記得保存，刷新數(shù)據(jù)可看到顯示效果。６.

設(shè)置日歷篩選圖為展示頁面添加日歷“篩選器”組件，可以實現(xiàn)通過日歷篩選器選擇查看某日的車間設(shè)備駕駛艙情況。設(shè)計日歷篩選器（1）切換到“網(wǎng)頁組件”；找到“篩選器”中的“日歷”，單擊拖拽到大屏的合適位置設(shè)置屬性（2）設(shè)置日歷篩選器的屬性如圖所示，注意設(shè)置背景色時，需要把透明度調(diào)為100%才會顯示。６.

設(shè)置日歷篩選圖設(shè)置數(shù)據(jù)源（3）選中日歷篩選器的狀態(tài)下，切換到數(shù)據(jù)源進(jìn)行數(shù)據(jù)源設(shè)置，如圖所示，“影響范圍”選擇“當(dāng)前頁面”；通過單擊“+”圖標(biāo)來增加數(shù)據(jù)源。６.

設(shè)置日歷篩選圖設(shè)置數(shù)據(jù)源本步驟使用的數(shù)據(jù)源是“設(shè)備駕駛艙_示例、銑床設(shè)備指標(biāo)_示例、鏜床設(shè)備指標(biāo)_示例、焊接機(jī)器人設(shè)備指標(biāo)_示例”，4個數(shù)據(jù)源的度量全部選擇“日期”如下圖所示，設(shè)置完成記得保存。６.

設(shè)置日歷篩選圖設(shè)計分段篩選器（1）切換到“網(wǎng)頁組件”；找到“篩選器”中的“分段篩選器”，單擊拖拽到大屏的合適位置，根據(jù)審美偏好進(jìn)行屬性設(shè)置。7.設(shè)置分段篩選圖設(shè)計分段篩選器（2）選中分段篩選器的狀態(tài)下，切換到數(shù)據(jù)源進(jìn)行數(shù)據(jù)源設(shè)置，“影響范圍”選擇“當(dāng)前頁面”，如圖所示；通過單擊“+”圖標(biāo)來增加數(shù)據(jù)源。7.設(shè)置分段篩選圖設(shè)計分段篩選器本步驟使用的數(shù)據(jù)源是“生產(chǎn)耗電量_示例、生產(chǎn)耗電費(fèi)用_示例、總產(chǎn)量_示例”，3個數(shù)據(jù)源的度量全部選擇“日期”如圖所示，設(shè)置完成記得保存。7.設(shè)置分段篩選圖預(yù)覽效果（1）保存頁面之后，單擊“預(yù)覽”標(biāo)簽，出現(xiàn)預(yù)覽頁面后可看到由于尺寸不符合，頁面會出現(xiàn)變形狀態(tài)，因此單擊選擇全屏模式。8.預(yù)覽驗證頁面效果預(yù)覽效果（2）全屏顯示“生產(chǎn)設(shè)備駕駛艙”畫面后，單擊“查詢?nèi)掌凇焙蟮娜諝v標(biāo)簽選擇某一日期，如2022年7月15日，屏幕左側(cè)呈現(xiàn)即為2022年