《工業(yè)可視化》課件 任務(wù)1.1 創(chuàng)建可視化項(xiàng)目 -知識(shí)準(zhǔn)備

《工業(yè)可視化》/工業(yè)互聯(lián)網(wǎng)系列課程湖南三一工業(yè)職業(yè)技術(shù)學(xué)院項(xiàng)目一：工業(yè)企業(yè)信息的可視化設(shè)計(jì)任務(wù)1.1創(chuàng)建可視化項(xiàng)目>>※知識(shí)準(zhǔn)備《工業(yè)可視化》/工業(yè)互聯(lián)網(wǎng)系列課程目錄1.項(xiàng)目及頁(yè)面2.可視化編輯器3.組件及其類型項(xiàng)目及頁(yè)面01—Part—《工業(yè)可視化》/工業(yè)互聯(lián)網(wǎng)系列課程1.項(xiàng)目及頁(yè)面云視界是服務(wù)于工業(yè)領(lǐng)域的云端可視化設(shè)計(jì)平臺(tái)，以生動(dòng)直觀的可視化圖表動(dòng)效，展示設(shè)備指標(biāo)參數(shù)、工況統(tǒng)計(jì)信息、遠(yuǎn)程監(jiān)控頁(yè)面等工業(yè)管理界面，便于工業(yè)領(lǐng)域的用戶和管理者，靈活便捷的查看設(shè)備指標(biāo)參數(shù)、直觀準(zhǔn)確的了解實(shí)時(shí)工況信息，最終實(shí)現(xiàn)進(jìn)行工業(yè)設(shè)備運(yùn)行分析進(jìn)而開展智能化工業(yè)管控。1.項(xiàng)目及頁(yè)面在云視界平臺(tái)中項(xiàng)目是可視化文件集，包含頁(yè)面、內(nèi)容、數(shù)據(jù)及相關(guān)文件。一個(gè)項(xiàng)目?jī)?nèi)可能含有多個(gè)展示頁(yè)面。通過(guò)配置各頁(yè)面內(nèi)的容器組件的屬性參數(shù)，設(shè)置連接數(shù)據(jù)源，選定相應(yīng)素材，可實(shí)現(xiàn)用戶對(duì)多種可視化展示效果的設(shè)定。例如，創(chuàng)建設(shè)備類型對(duì)應(yīng)的項(xiàng)目，可以統(tǒng)一管理這種類型設(shè)備的工況展示效果。1.項(xiàng)目及頁(yè)面頁(yè)面是可視化編輯的產(chǎn)物，每個(gè)項(xiàng)目可以包含多個(gè)展示頁(yè)面，如實(shí)時(shí)工況展示頁(yè)面、歷史數(shù)據(jù)統(tǒng)計(jì)頁(yè)面、設(shè)備控制流程頁(yè)面等。云視界可視化采用“項(xiàng)目—頁(yè)面—容器（組件）—組件”的方式實(shí)現(xiàn)工業(yè)數(shù)據(jù)和工況可視化應(yīng)用的布局及展現(xiàn)。1.項(xiàng)目及頁(yè)面屏幕尺寸：設(shè)置頁(yè)面的顯示大小，默認(rèn)為1920*1080。實(shí)際項(xiàng)目中，需要根據(jù)展示大屏的大小來(lái)設(shè)定尺寸；網(wǎng)格間隙：容器與頁(yè)面之間、容器與容器之間的邊距大小及角度樣式；

設(shè)置內(nèi)容云視界中內(nèi)置了頁(yè)面模板，頁(yè)面模板與空白頁(yè)面對(duì)應(yīng)，是系統(tǒng)為用戶創(chuàng)建的默認(rèn)可選頁(yè)面。在頁(yè)面模板中已設(shè)置一系列的容器及組件，可為用戶實(shí)現(xiàn)默認(rèn)的頁(yè)面展示效果。通過(guò)修改頁(yè)面中的元素屬性，用戶可以實(shí)現(xiàn)符合自己要求的可視化頁(yè)面效果。1.項(xiàng)目及頁(yè)面頁(yè)面主題：設(shè)置頁(yè)面顯示的主題效果；數(shù)據(jù)關(guān)聯(lián)：如需在頁(yè)面中的2個(gè)組件設(shè)置數(shù)據(jù)聯(lián)動(dòng)，則需要打開此開關(guān)；彈窗開關(guān)：如需頁(yè)面中的彈窗自動(dòng)啟用則需打開此開關(guān)；自動(dòng)保存：可以自動(dòng)保存頁(yè)面設(shè)計(jì)內(nèi)容，不建議開啟，對(duì)電腦的配置要求高。建議在使用過(guò)程中，定期手動(dòng)保存。1.項(xiàng)目及頁(yè)面顏色：設(shè)置背景顏色，支持漸變色，通過(guò)單擊“+”符號(hào)添加另一種顏色，從而達(dá)到兩種顏色的漸變效果，單擊“”符號(hào)可以修改顏色漸變的方向；壁紙：可以直接選擇系統(tǒng)中自帶的壁紙作為背景圖片；選擇圖片：通過(guò)把素材庫(kù)中的圖片拖拽到圖框中，來(lái)設(shè)置自定義顏色；填充方式：設(shè)置背景圖片在頁(yè)面的填充方式；透明度：設(shè)置背景圖片的透明度；頁(yè)面設(shè)置1.項(xiàng)目及頁(yè)面網(wǎng)格線：可選擇是否打開，打開后可設(shè)置網(wǎng)格線的顏色或者線間距。該設(shè)置主要是把頁(yè)面劃分為不同網(wǎng)格大小，便于調(diào)整容器組件尺寸時(shí)對(duì)齊網(wǎng)格線。頁(yè)面設(shè)置可視化編輯器02—Part—《工業(yè)可視化》/工業(yè)互聯(lián)網(wǎng)系列課程2.可視化編輯器云視界用戶在可視化編輯器中可以進(jìn)行項(xiàng)目的頁(yè)面編輯設(shè)計(jì)?？梢暬庉嬈髯髠?cè)導(dǎo)航欄第一個(gè)標(biāo)簽為“返回主頁(yè)”。單擊后將提示是否保存當(dāng)前頁(yè)面還是直接離開回到主頁(yè)。返回主頁(yè)2.可視化編輯器可視化編輯器左側(cè)導(dǎo)航欄第二個(gè)標(biāo)簽為“基礎(chǔ)組件”?；A(chǔ)組件包含：通用組件、圖表組件、地圖組件、工控組件、網(wǎng)頁(yè)組件五類。用戶可以選擇使用基礎(chǔ)組件庫(kù)中的通用、圖表、地圖、工控、網(wǎng)頁(yè)組件填充到畫布?；A(chǔ)組件2.可視化編輯器可視化編輯器左側(cè)導(dǎo)航欄第三個(gè)標(biāo)簽為“行業(yè)組件”。用戶可以選擇使用行業(yè)組件庫(kù)中的組件填充到畫布。行業(yè)組件2.可視化編輯器可視化編輯器左側(cè)導(dǎo)航欄第四個(gè)標(biāo)簽為“素材庫(kù)”。用戶可以選擇使用素材庫(kù)中的素材填充到畫布。素材庫(kù)包含系統(tǒng)素材庫(kù)、個(gè)人素材庫(kù)。素材庫(kù)2.可視化編輯器可視化編輯器左側(cè)導(dǎo)航欄第五個(gè)標(biāo)簽為“圖層”，圖層展示了頁(yè)面中所有的組件、頁(yè)面結(jié)構(gòu)及包含關(guān)系。圖層中以樹形結(jié)構(gòu)展示當(dāng)前頁(yè)面中的所有組件元素，根節(jié)點(diǎn)是頁(yè)面，子節(jié)點(diǎn)是容器，一直展開到組件元素或者容器節(jié)點(diǎn)；在樹形結(jié)構(gòu)表中逐一單擊展開結(jié)構(gòu)，選中某組件元素，則該組件在畫布區(qū)域顯示為選中狀態(tài)，用戶可對(duì)其進(jìn)行編輯、修改。圖層2.可視化編輯器可視化編輯器頂部導(dǎo)航欄第六個(gè)標(biāo)簽為“撤銷”與“恢復(fù)”，單擊對(duì)應(yīng)的標(biāo)簽，可以撤銷前一個(gè)操作或者恢復(fù)前一個(gè)操作。撤銷、恢復(fù)2.可視化編輯器用戶可以單擊頁(yè)面下拉標(biāo)簽進(jìn)行頁(yè)面切換，并可以新建頁(yè)面、編輯頁(yè)面名稱、復(fù)制或刪除頁(yè)面。在頁(yè)面下拉界面中，單擊各頁(yè)面名稱可進(jìn)行頁(yè)面的切換。鼠標(biāo)滑動(dòng)到某頁(yè)面名稱行，則可編輯頁(yè)面名稱、可復(fù)制或刪除此頁(yè)面。單擊“新建頁(yè)面”按鈕，可以創(chuàng)建一個(gè)新頁(yè)面。頁(yè)面2.可視化編輯器可視化編輯器右側(cè)導(dǎo)航欄第一個(gè)標(biāo)簽為“刷新”。編輯狀態(tài)下，系統(tǒng)不會(huì)主動(dòng)刷新數(shù)據(jù)，單擊“刷新”標(biāo)簽后即可進(jìn)行組態(tài)數(shù)據(jù)推送。這樣可以避免因?yàn)閿?shù)據(jù)自動(dòng)刷新帶來(lái)的編輯器卡頓。該功能不會(huì)影響發(fā)布后的頁(yè)面數(shù)據(jù)推送。刷新可視化編輯器右側(cè)導(dǎo)航欄第二個(gè)標(biāo)簽為“保存當(dāng)前頁(yè)”。用戶在進(jìn)行可視化編輯時(shí)，應(yīng)及時(shí)保存頁(yè)面設(shè)計(jì)操作。當(dāng)用戶完成頁(yè)面設(shè)計(jì)時(shí)，需先進(jìn)行保存，再預(yù)覽發(fā)布。保存當(dāng)前頁(yè)可視化編輯器右側(cè)導(dǎo)航欄第三個(gè)標(biāo)簽為“預(yù)覽”。用戶進(jìn)行可視化編輯時(shí)，可單擊“預(yù)覽”隨時(shí)查看當(dāng)前頁(yè)面的設(shè)計(jì)效果。設(shè)計(jì)完成的頁(yè)面，預(yù)覽無(wú)誤后，可發(fā)布頁(yè)面。預(yù)覽2.可視化編輯器組件及其類型03—Part—《工業(yè)可視化》/工業(yè)互聯(lián)網(wǎng)系列課程3.組件及其類型

組件是數(shù)據(jù)可視化的圖形化載體，通過(guò)選擇不同的組件，數(shù)據(jù)可以呈現(xiàn)多種展現(xiàn)方式。組件包含兩種特性：組件的屬性，通過(guò)組件屬性定義組件的圖形展示效果；組件的數(shù)據(jù)源，用于確定組件展示的數(shù)據(jù)，不同的組件可以關(guān)聯(lián)不同種類的數(shù)據(jù)連接。通用組件包含：頁(yè)面布局、基本組件。布局組件區(qū)，用以展示系統(tǒng)預(yù)設(shè)的多種頁(yè)面布局設(shè)計(jì)樣式，根據(jù)用戶頁(yè)面需求，可選擇一個(gè)容器或布局應(yīng)用到項(xiàng)目頁(yè)面；布局組件包括容器和大屏，容器可以用來(lái)盛放各個(gè)組件，大屏是容器的組合模板，包含多個(gè)容器，當(dāng)前有6種模板樣式可以選擇?；窘M件區(qū)，包含頁(yè)面組成所需的基本組件元素：語(yǔ)音警告、文本、iframe、視頻、表格、圖片。

基礎(chǔ)組件圖表組件可直觀展示統(tǒng)計(jì)信息屬性（時(shí)間性，數(shù)量性等），對(duì)知識(shí)挖掘和信息直觀生動(dòng)感受起關(guān)鍵作用的圖形結(jié)構(gòu)，是一種很好的將對(duì)象屬性數(shù)據(jù)直觀，形象的“可視化”的手段。圖表組件包含了多種圖表樣式及配套屬性設(shè)置，供用戶設(shè)計(jì)頁(yè)面使用。用戶可向頁(yè)面插入圖表組件，并根據(jù)需要調(diào)整圖表的屬性和關(guān)聯(lián)數(shù)據(jù)源。圖表組件3.組件及其類型地圖組件包含了多種地圖元素，用戶可選擇元素添加進(jìn)頁(yè)面中，并設(shè)置地圖元素的屬性和關(guān)聯(lián)數(shù)據(jù)源，主要用來(lái)展示與地理位置相關(guān)的數(shù)據(jù)?？丶M件包含工業(yè)控制相關(guān)的元素組件，如儀表盤、進(jìn)度條、指示器、數(shù)字翻牌、攝像頭、指令下發(fā)按鈕等。地圖組件控件組件3.組件及其類型網(wǎng)頁(yè)組件包含頁(yè)面設(shè)計(jì)常用的元素組件，如按鈕、數(shù)字圖標(biāo)卡片、圖片輪播等。網(wǎng)頁(yè)組件主要針