《工業(yè)可視化》課件 任務(wù)1.1 創(chuàng)建可視化項(xiàng)目 -任務(wù)實(shí)施

項(xiàng)目一：工業(yè)企業(yè)信息的可視化設(shè)計(jì)任務(wù)1.1創(chuàng)建可視化項(xiàng)目>>※任務(wù)實(shí)施《工業(yè)可視化》/工業(yè)互聯(lián)網(wǎng)系列課程湖南三一工業(yè)職業(yè)技術(shù)學(xué)院《工業(yè)可視化》/工業(yè)互聯(lián)網(wǎng)系列課程目錄1.頁面規(guī)劃2.登錄平臺(tái)3.準(zhǔn)備素材4.創(chuàng)建項(xiàng)目5.設(shè)計(jì)布局1.頁面規(guī)劃（1）

任務(wù)分析

在項(xiàng)目背景中，甲方公司需要展示的企業(yè)信息內(nèi)容包括：公司簡(jiǎn)介、介紹視頻、公司產(chǎn)品圖片、研發(fā)實(shí)力、辦公大樓、當(dāng)前日期和時(shí)間等。相關(guān)內(nèi)容展示需要用的組件如下：展示內(nèi)容條目名稱使用組件數(shù)據(jù)源備注公司介紹公司簡(jiǎn)介文本組件無客戶提供文字宣傳視頻視頻組件無客戶提供視頻公司產(chǎn)品圖片輪播組件無客戶提供圖片公司實(shí)力研發(fā)實(shí)力圖片組件無客戶提供圖片集團(tuán)大樓圖片組件無客戶提供圖片其他當(dāng)前日期和時(shí)間文本組件系統(tǒng)時(shí)間日期無任務(wù)分析1.頁面規(guī)劃

在進(jìn)行頁面設(shè)計(jì)之前，先規(guī)劃草圖，將需要展示的內(nèi)容在頁面上完成布局。公司簡(jiǎn)介（文本組件）宣傳視頻（視頻組件）公司名稱（文本組件）集團(tuán)大樓（圖片組件）當(dāng)前日期和時(shí)間（文本組件）研發(fā)實(shí)力（圖片組件）公司產(chǎn)品（圖片輪播組件）規(guī)劃頁面草圖2.登錄平臺(tái)登錄云視界（1）打開可視化設(shè)計(jì)平臺(tái)——云視界的地址，并輸入注冊(cè)的手機(jī)號(hào)和密碼。云視界的登錄的地址為：/view/login。2.登錄平臺(tái)登錄云視界（2）登錄云視界后，可以單擊“幫助文檔”或“幫助視頻”的標(biāo)簽可以進(jìn)入云視界用戶手冊(cè)頁面，里面有對(duì)云視界使用的詳細(xì)說明。3.準(zhǔn)備素材云視界有系統(tǒng)自帶的素材，截止版本號(hào)為4.6.18的系統(tǒng)素材中，預(yù)置了設(shè)備、圖標(biāo)、裝飾、背景4大分類設(shè)計(jì)素材，用戶可以直接使用。如果用戶擅長設(shè)計(jì)，也可以根據(jù)設(shè)計(jì)需求制作素材上傳云視界使用，文件格式支持jpg，png，gif，svg，mp4，mp3，mpeg，webp等，文件大小限制100MB以內(nèi)。

（1）在云視界的左邊導(dǎo)航欄，選擇“資源庫”下的“素材庫”標(biāo)簽，進(jìn)入素材庫頁面。

3.準(zhǔn)備素材新建文件夾（2）切換到“我的素材庫”標(biāo)簽，單擊“新建文件夾”，在彈出來的對(duì)話框中，輸入文件夾名稱（可自定義），最后單擊“確認(rèn)”按鈕。文件夾下還可以創(chuàng)建子文件夾“項(xiàng)目1素材”。3.準(zhǔn)備素材上傳素材（3）單擊創(chuàng)建好的素材文件夾，如圖1-1-12所示。進(jìn)入文件夾后，單擊“上傳文件”，找到素材存放的位置，選擇并單擊“打開”按鈕，即可完成素材上傳。4.創(chuàng)建項(xiàng)目

（1）在云視界首頁，創(chuàng)建項(xiàng)目有兩種方式：第一種，以空白模板創(chuàng)建新的項(xiàng)目。操作步驟如下：?jiǎn)螕簟皠?chuàng)建項(xiàng)目”標(biāo)簽，在彈框中輸入自定義項(xiàng)目名稱，選擇所需的模板，最后單擊“創(chuàng)建”按鈕完成創(chuàng)建項(xiàng)目。4.創(chuàng)建項(xiàng)目

（1）在云視界首頁，創(chuàng)建項(xiàng)目有兩種方式：第二種，通過導(dǎo)入項(xiàng)目ID創(chuàng)建新的項(xiàng)目。操作步驟如下：?jiǎn)螕簟皠?chuàng)建項(xiàng)目”，在彈窗中單擊“導(dǎo)入項(xiàng)目ID”，在新彈窗中輸入項(xiàng)目ID、授權(quán)碼、項(xiàng)目名稱，單擊“導(dǎo)入”按鈕。這種方式相當(dāng)于復(fù)制已有的其他項(xiàng)目。說明：本書示例輸入的項(xiàng)目ID數(shù)值不是固定的，是根據(jù)實(shí)際需要復(fù)制的項(xiàng)目的ID而定，項(xiàng)目的授權(quán)碼默認(rèn)為“123456”。4.創(chuàng)建項(xiàng)目創(chuàng)建項(xiàng)目（2）創(chuàng)建項(xiàng)目完成后，頁面自動(dòng)跳轉(zhuǎn)到可視化編輯頁面，在編輯區(qū)可以通過拖動(dòng)下方的比例圖標(biāo)來調(diào)節(jié)頁面在編輯區(qū)的顯示比例。4.創(chuàng)建項(xiàng)目修改頁面名稱（3）修改頁面名稱。先單擊頁面切換圖標(biāo)，出現(xiàn)的彈框中，單擊修改圖標(biāo)，把頁面名稱改為“集團(tuán)信息展示”（注：名稱可自定義，但是建議按照一定的規(guī)范進(jìn)行修改，便于其他工程師運(yùn)維），單擊“確定”按鈕完成修改，操作順序如下。說明：建議用戶在頁面編輯過程中，應(yīng)及時(shí)手動(dòng)保存頁面設(shè)計(jì)。5.設(shè)計(jì)布局頁面尺寸設(shè)計(jì)1）根據(jù)展示大屏的大小設(shè)置可視化項(xiàng)目的頁面尺寸，本任務(wù)使用的尺寸為默認(rèn)的1980px*1080px5.設(shè)計(jì)布局設(shè)置頁面背景2）在可視化編輯器的頂部導(dǎo)航欄，單擊選擇“素材庫”圖標(biāo)，選擇本書配套的任務(wù)1.1中的“背景圖”素材，拖拽到右側(cè)屬性欄下的“選擇圖片”框中，如圖所示。本步驟也可以選擇系統(tǒng)素材庫中的“背景”文件下合適的圖片作為頁面背景。5.設(shè)計(jì)布局使用容器布局3）完成背景設(shè)置之后，在頁面用容器進(jìn)行布局。首先單擊頂部導(dǎo)航欄的“基本組件”按鈕，單擊“容器”圖標(biāo)，頁面上會(huì)出現(xiàn)容器的圖框，可以通過拖拽容器邊框的方式來調(diào)整容器大小，如圖所示。5.設(shè)計(jì)布局使用容器布局4）選中容器，打開容器的“鎖定縱橫比”；在素材庫中找到合適的圖片，本示例中使用的本書配套資源“任務(wù)1.1”文件夾下的“標(biāo)題”圖片；將選中的圖片拖拽到容器屬性的“背景圖片”框中；如圖所示。5.設(shè)計(jì)布局使用容器布局5）重復(fù)前“3）至4）”這2個(gè)步驟的操作，添加其他容器并更改容器背景，完成整個(gè)頁面的布局設(shè)置，如圖所示。本示例新增容器使用的容器背景均是本書配套的“任務(wù)1.1”文件夾下的“裝飾框”圖片，也可以自定義使用系統(tǒng)素材中的“裝飾→邊框”文件下合適的邊框圖片。5.設(shè)計(jì)布局說明容器在手機(jī)端的顯示順序是按照?qǐng)D層中的容器順序來定，因此可以在圖層中選中某個(gè)容器，通過調(diào)整其排列順序來調(diào)整