《工業(yè)可視化》課件 任務(wù)5.1 創(chuàng)建及規(guī)劃大屏首頁 -任務(wù)實施

《工業(yè)可視化》/工業(yè)互聯(lián)網(wǎng)系列課程項目五：集成及發(fā)布工業(yè)可視化大屏任務(wù)5.1創(chuàng)建及規(guī)劃大屏首頁>>※任務(wù)實施《工業(yè)可視化》/工業(yè)互聯(lián)網(wǎng)系列課程1.任務(wù)分析2.準(zhǔn)備數(shù)據(jù)源及素材3.創(chuàng)建空白模板項目4.規(guī)劃頁面布局5.設(shè)計集團概覽區(qū)域6.設(shè)計設(shè)備駕駛艙區(qū)域7.設(shè)計生產(chǎn)車間區(qū)域8.設(shè)計租賃經(jīng)營區(qū)域9.設(shè)計營銷業(yè)務(wù)區(qū)域10.設(shè)計后市場服務(wù)區(qū)域11.設(shè)計集團大事記目錄1.任務(wù)分析本任務(wù)的主要目的是設(shè)計數(shù)字化平臺的首頁，展示集團幾個重要的模塊概況，包括集團概況、設(shè)備駕駛艙、生產(chǎn)車間、租賃經(jīng)營、營銷業(yè)務(wù)、后市場服務(wù)、集團大事記等;具體展示數(shù)據(jù)和顯示組件分析結(jié)果如表所示：展示模塊具體內(nèi)容使用組件數(shù)據(jù)源集團概況研發(fā)中心文本組件、圖片組件無發(fā)明專利文本組件、圖片組件研發(fā)投入文本組件、圖片組件軟件著作權(quán)文本組件、圖片組件設(shè)備駕駛艙總設(shè)備數(shù)數(shù)字圖標(biāo)卡片在線設(shè)備數(shù)字圖表卡片MYSQL數(shù)據(jù)庫-設(shè)備駕駛艙-在線數(shù)總開機率半儀表盤MYSQL數(shù)據(jù)庫-設(shè)備駕駛艙-開機率總作業(yè)率半儀表盤MYSQL數(shù)據(jù)庫-設(shè)備駕駛艙-作業(yè)率任務(wù)分析1.任務(wù)分析展示模塊具體內(nèi)容使用組件數(shù)據(jù)源生產(chǎn)車間訂單完成度直線進度條物模型-生產(chǎn)車間-生產(chǎn)進度今日產(chǎn)量直線進度條物模型-生產(chǎn)車間-今日產(chǎn)量租賃經(jīng)營分析本月出租設(shè)備數(shù)、本月租金收入、今年累計租戶、今年累計租金”文本組件、圖片組件MYSQL數(shù)據(jù)庫-本年度累計租賃指標(biāo)營銷業(yè)務(wù)簽單完成率折線圖組件MYSQL數(shù)據(jù)庫-月度簽單完成率后市場服務(wù)設(shè)備保修狀態(tài)餅狀圖組件MYSQL數(shù)據(jù)庫-設(shè)備保修狀態(tài)統(tǒng)計集團大事記成立至今大事文本組件無任務(wù)分析2.準(zhǔn)備數(shù)據(jù)源及素材本任務(wù)使用的數(shù)據(jù)源，可以在本書配套資源中獲取，所需的全部數(shù)據(jù)源如任務(wù)分析中表所示的數(shù)據(jù)源列。也可以使用自有數(shù)據(jù)庫作為數(shù)據(jù)源。（1）準(zhǔn)備數(shù)據(jù)源（2）準(zhǔn)備素材本任務(wù)使用的素材，可以在本書配套資源中獲取并上傳，所需的全部素材如下圖所示，也可以使用自有素材。3.創(chuàng)建空白模板項目（1）創(chuàng)建項目。登錄云視界平臺，在云視界首頁選擇“概覽”；單擊“創(chuàng)建項目”；在彈框中輸入項目名稱，本項目示例名稱為“數(shù)字化平臺”；類型選擇“網(wǎng)頁”；選擇空白頁面；最后單擊“創(chuàng)建”按鈕。創(chuàng)建項目3.創(chuàng)建空白模板項目（1）

任務(wù)分析（2）創(chuàng)建完成后，頁面自動跳轉(zhuǎn)到可視化編輯頁面，如圖所示。創(chuàng)建項目3.創(chuàng)建空白模板項目（1）

任務(wù)分析（3）修改頁面名稱。在導(dǎo)航欄打開頁面的名稱，修改其名稱為“數(shù)字化平臺首頁”，如圖所示。修改頁面名稱4.規(guī)劃頁面布局（1）規(guī)劃草圖。根據(jù)數(shù)字化平臺首頁需要展示的內(nèi)容，頁面布局的草圖規(guī)劃如圖所示。規(guī)劃草圖4.規(guī)劃頁面布局（1）

任務(wù)分析（2）設(shè)置背景。在可視化編輯器的左上角導(dǎo)航欄，單擊選擇“素材庫”圖標(biāo)；在左側(cè)導(dǎo)航欄單擊選擇“我的”；在“工業(yè)可視化課程素材”文件夾下選擇“任務(wù)5_1”，找到背景圖拖拽到頁面的背景處的“選擇圖片”框中，如圖所示。設(shè)置背景4.規(guī)劃頁面布局（1）

任務(wù)分析（3）添加容器。完成背景設(shè)置之后，在頁面用容器進行布局。首先單擊左導(dǎo)航欄的“基本組件”按鈕，單擊“容器”圖標(biāo)，頁面上會出現(xiàn)容器的圖框。添加容器4.規(guī)劃頁面布局（1）

任務(wù)分析（4）調(diào)整容器大小。通過拖拽方式，調(diào)整容器大小，調(diào)整后的容器行列數(shù)為2*24。設(shè)置容器4.規(guī)劃頁面布局（1）

任務(wù)分析（5）修改容器名稱。切換至圖層，選中容器的情況下，單擊其后的編輯圖標(biāo)，修改容器名稱為“主標(biāo)題”，最后單擊確定完成修改。設(shè)置容器4.規(guī)劃頁面布局（1）

任務(wù)分析（6）設(shè)置容器背景。選中容器狀態(tài)下，在素材庫的“任務(wù)5_1”文件夾下找到“標(biāo)題圖”圖片；將圖片拖拽到容器屬性的“背景圖片”框中；打開容器“鎖定比例”開關(guān)。設(shè)置容器說明：容器打開“鎖定比例”后，在不同屏幕（（app客戶端/web網(wǎng)頁/大屏幕））下可以保持縱橫比而不變形。4.規(guī)劃頁面布局（1）

任務(wù)分析（7）重復(fù)前面（2）（3）步驟的操作方法，在主標(biāo)題容器下添加并列的3個容器，其行列數(shù)量都為22*8，容器名稱可自定義，需要打開容器“鎖定比例”開關(guān)。設(shè)置其他容器4.規(guī)劃頁面布局（1）

任務(wù)分析（8）裝飾左側(cè)容器背景。在素材庫的“任務(wù)5_1”文件夾下找到“框左1、框左2、框左3”的圖片；將該圖片拖拽到頁面左側(cè)的容器中，本項目只需拖拽圖片位置，圖片大小無需調(diào)整，采用默認(rèn)大小。設(shè)置其他容器4.規(guī)劃頁面布局（1）

任務(wù)分析（9）裝飾右側(cè)容器背景。重復(fù)上個步驟，分別將“框右1、框右2、框右3”圖片拖拽到右側(cè)容器合適的位置，均無需調(diào)整圖片大小，只需調(diào)整位置即可，完成的效果如圖所示。設(shè)置其他容器4.規(guī)劃頁面布局（1）

任務(wù)分析（10）設(shè)計頁面標(biāo)題。使用拖拽的方式，把文本組件添加到頁面的標(biāo)題位置，自定義其屬性參數(shù)，如圖所示。設(shè)置其他容器4.規(guī)劃頁面布局（1）

任務(wù)分析（11）按照上步驟的操作，完成其他區(qū)域標(biāo)題文本設(shè)置，文字屬性可自定義調(diào)整，如圖所示。設(shè)置其他容器5.設(shè)計集團概覽區(qū)域（1）

任務(wù)分析（1）在素材庫的“任務(wù)5_1”文件夾下找到“圖標(biāo)-建筑”的圖片；將該圖片拖拽到“集團概覽”內(nèi)；并設(shè)置該圖片的屏幕大小。設(shè)置集團概覽5.設(shè)計集團概覽區(qū)域（1）

任務(wù)分析（2）使用兩個文本組件分別設(shè)置顯示“研發(fā)中心”“5”“個”的文字，文字屬性可自定義調(diào)整，排版位置如圖所示。設(shè)置文本5.設(shè)計集團概覽區(qū)域（1）

任務(wù)分析（3）重復(fù)前兩步的操作，分別設(shè)置“發(fā)明專利”“研發(fā)投入”“軟件著作權(quán)”的展示內(nèi)容。設(shè)置其他文本5.設(shè)計集團概覽區(qū)域（1）

任務(wù)分析重復(fù)前兩步的操作，分別設(shè)置“發(fā)明專利”“研發(fā)投入”“軟件著作權(quán)”的展示內(nèi)容步驟也可以通過多選并用快捷鍵復(fù)制粘貼的形式，快速設(shè)置所需的文本內(nèi)容，如下圖所示：設(shè)置其他文本6.設(shè)計設(shè)備駕駛艙區(qū)域（1）

任務(wù)分析（1）從網(wǎng)頁組件中拖拽數(shù)字圖標(biāo)卡片到設(shè)備駕駛艙區(qū)域的合適位置，標(biāo)題文本輸入“總設(shè)備數(shù)”，其他屬性設(shè)置可自定義。設(shè)置設(shè)備駕駛艙6.設(shè)計設(shè)備駕駛艙區(qū)域（1）

任務(wù)分析（2）在選中“數(shù)字圖標(biāo)卡片”組件情況下，切換至數(shù)據(jù)源配置，數(shù)據(jù)源選擇“設(shè)備駕駛艙_示例”，度量選擇“總數(shù)”，如圖所示。本步驟使用的數(shù)據(jù)源與“2.3.3任務(wù)實施→4.設(shè)置設(shè)備狀態(tài)數(shù)”的數(shù)據(jù)源同，也可以使用自行創(chuàng)建的數(shù)據(jù)源。設(shè)置數(shù)據(jù)源6.設(shè)計設(shè)備駕駛艙區(qū)域（1）

任務(wù)分析（3）通過使用復(fù)制粘貼的快捷方式，設(shè)計另一個數(shù)字圖標(biāo)卡片，修改其標(biāo)題文字為“在線設(shè)備數(shù)”，數(shù)據(jù)源選擇“設(shè)備駕駛艙_示例”，度量選擇“總數(shù)”。設(shè)置其他卡片6.設(shè)計設(shè)備駕駛艙區(qū)域（1）

任務(wù)分析（4）從工控組件區(qū)中，使用拖拽的方式把“半儀表盤”添加到“車間設(shè)備駕駛艙”合適位置；屬性設(shè)置可自定義。添加半儀表盤6.設(shè)計設(shè)備駕駛艙區(qū)域（1）

任務(wù)分析（5）選中“半儀表盤”，切換到數(shù)據(jù)源設(shè)置，數(shù)據(jù)源選擇“設(shè)備駕駛艙_示例”，度量選擇“開機率”。設(shè)置數(shù)據(jù)源6.設(shè)計設(shè)備駕駛艙區(qū)域（1）

任務(wù)分析（6）復(fù)制前一步驟設(shè)置好的“半儀表盤”；屬性設(shè)置中，樣式選擇“右儀表盤”，主標(biāo)題文本修改為“作業(yè)率”，副標(biāo)題文本修改為“WorkingRate”；數(shù)據(jù)源選擇“設(shè)備駕駛艙_示例”，度量選擇“作業(yè)率”，如圖所示，最后保存刷新。設(shè)置其他半儀表板7.設(shè)計生產(chǎn)車間區(qū)域（1）

任務(wù)分析（1）使用拖拽的方式，把工控組件中的“直線進度條”添加到“生產(chǎn)車間”區(qū)域合適的位置；圖表字體的標(biāo)題改為“訂單完成進度”，其他屬性可自定義，如圖所示。添加控件7.設(shè)計生產(chǎn)車間區(qū)域（1）

任務(wù)分析（2）選中直線進度條組件的狀態(tài)下，切換到數(shù)據(jù)源設(shè)置。數(shù)據(jù)源選擇“采集點數(shù)據(jù)”，然后單擊采集點數(shù)據(jù)后的設(shè)置圖標(biāo)，在彈窗中設(shè)置物模型id和設(shè)備id，最后確認(rèn)完成配置，如圖所示。本步驟設(shè)置的數(shù)據(jù)源與“2.2.3任務(wù)實施→4.設(shè)計訂單完成進度”的數(shù)據(jù)源同。設(shè)置數(shù)據(jù)源7.設(shè)計生產(chǎn)車間區(qū)域（1）

任務(wù)分析（2）選中直線進度條組件的狀態(tài)下，切換到數(shù)據(jù)源設(shè)置。數(shù)據(jù)源選擇“采集點數(shù)據(jù)”，然后單擊采集點數(shù)據(jù)后的設(shè)置圖標(biāo)，在彈窗中設(shè)置物模型id和設(shè)備id，最后確認(rèn)完成配置，如圖所示。本步驟設(shè)置的數(shù)據(jù)源與“2.2.3任務(wù)實施→4.設(shè)計訂單完成進度”的數(shù)據(jù)源同。設(shè)置數(shù)據(jù)源7.設(shè)計生產(chǎn)車間區(qū)域（1）

任務(wù)分析（3）完成后物模型id和設(shè)備id的設(shè)置后，度量選擇“生產(chǎn)進度”，如圖所示。設(shè)置數(shù)據(jù)源7.設(shè)計生產(chǎn)車間區(qū)域（1）

任務(wù)分析（4）用復(fù)制粘貼的快捷方式，復(fù)制另一個直線進度條組件，修改其圖表字體的標(biāo)題為“今日產(chǎn)量”，圖表樣式的數(shù)值顯示為“數(shù)值”，值域為“0-1000”，如圖所示。添加組件7.設(shè)計生產(chǎn)車間區(qū)域（1）

任務(wù)分析（5）切換至數(shù)據(jù)源，使用采集點數(shù)據(jù)，物模型id和設(shè)備id與訂單完成進度的同，度量選擇“今日產(chǎn)量”，如圖所示。設(shè)置數(shù)據(jù)源8.設(shè)計租賃經(jīng)營區(qū)域（1）

任務(wù)分析（1）本區(qū)域的設(shè)計與本書的“4.1.3任務(wù)實施→3.設(shè)計累計租賃數(shù)據(jù)”的設(shè)計方法及數(shù)據(jù)源同，不展開描述。設(shè)置效果如圖所示。設(shè)置頁面9.設(shè)計營銷業(yè)務(wù)區(qū)域（1）

任務(wù)分析（1）從圖表組件去將柱狀圖組件拖拽至“營銷分析”區(qū)域內(nèi)；設(shè)置“柱狀圖”的屬性的時間格式為“月”，圖表選項可參考圖，也可自定義添加組件9.設(shè)計營銷業(yè)務(wù)區(qū)域（1）

任務(wù)分析（2）選中“柱狀圖”的狀態(tài)下，切換到數(shù)據(jù)源設(shè)置；①“數(shù)據(jù)源”選擇“月度簽單完成率”；②“維度”選擇“日期”，“度量”選擇“簽單完成率”；③打開數(shù)據(jù)源過濾的“+”圖標(biāo)；④在彈框中切換到日期篩選；⑤單擊“添加條件”標(biāo)簽，如圖所示。添加數(shù)據(jù)源9.設(shè)計營銷業(yè)務(wù)區(qū)域（1）

任務(wù)分析（3）在添加過濾彈框中，①選擇“日期”作為篩選維度，②設(shè)定日期篩選的條件為“2022年1月1日至2022年12月31日”；③篩選器名稱可自定義，本示例為“篩選2022年度完成率”，④最后保存完成設(shè)置，如圖所示。添加過濾器9.設(shè)計營銷業(yè)務(wù)區(qū)域（1）

任務(wù)分析（4）完成數(shù)據(jù)源過濾配置并保存刷新后，效果如圖所示。頁面效果10.設(shè)計后市場服務(wù)區(qū)域（1）

任務(wù)分析（1）在左側(cè)導(dǎo)航欄的圖表組件中，將餅圖拖拽至“后市場服務(wù)”區(qū)域內(nèi)；設(shè)置“柱狀圖”的屬性，如圖所示，也可自定義。添加組件10.設(shè)計后市場服務(wù)區(qū)域（1）

任務(wù)分析（2）為餅圖設(shè)置數(shù)據(jù)源為“設(shè)備保修狀態(tài)統(tǒng)計”，度量選擇“保內(nèi)設(shè)備數(shù)、保外設(shè)備數(shù)、本月續(xù)保設(shè)備數(shù)、即將過保設(shè)備數(shù)”，如圖所示。添加數(shù)據(jù)源11.設(shè)計集團大事記（