整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
HTML5崗位技能技術(shù)是計(jì)算機(jī)類專業(yè)重要的核心課程，課程所包含的教學(xué)內(nèi)容多，實(shí)踐性強(qiáng)，并且相關(guān)技術(shù)更新快。傳統(tǒng)的課堂講授模式以教師為中心，學(xué)生被動(dòng)式接收，難以調(diào)動(dòng)學(xué)生學(xué)習(xí)的積極性和主動(dòng)性。混合式教學(xué)結(jié)合線上線下教學(xué)模式，以學(xué)生為中心，變被動(dòng)為主動(dòng)，充分調(diào)動(dòng)學(xué)生學(xué)習(xí)的積極性，提升課程的教學(xué)效果。
HTML5崗位技能是指構(gòu)建 Web 應(yīng)用程序用戶界面的過(guò)程。它涵蓋了網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)頁(yè)制作以及網(wǎng)站的前端開(kāi)發(fā)等方面。HTML5崗位技能是屬于互聯(lián)網(wǎng)技術(shù)領(lǐng)域中的一項(xiàng)重要工作。
作為 HTML5崗位技能人員，我們的主要任務(wù)是將設(shè)計(jì)師提供的網(wǎng)頁(yè)設(shè)計(jì)圖轉(zhuǎn)化為網(wǎng)頁(yè)前端代碼，然后通過(guò)瀏覽器展示給用戶。在這個(gè)過(guò)程中，我們需要使用 HTML、CSS和JavaScript 等技術(shù)來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的布局、樣式和交互效果。
在Web前端開(kāi)發(fā)中，我們還需要掌握一些常用的前端框架和工具例如，Bootstrap 是一個(gè)流行的前端框架，它提供了一套響應(yīng)式的網(wǎng)頁(yè)模板和組件，可以快速搭建出適配不同設(shè)備的網(wǎng)頁(yè)。另外，還有Vue.js和 React等JavaScript 框架，它們可以幫助我們構(gòu)建復(fù)雜的單頁(yè)應(yīng)用。
除了以上提到的技術(shù)和工具，作為 HTML5崗位技能人員，我們還需要了解和應(yīng)用一些 Web 標(biāo)準(zhǔn)和最佳實(shí)踐。比如，響應(yīng)式設(shè)計(jì)是一種設(shè)計(jì)方法，可以使網(wǎng)頁(yè)在不同設(shè)備上都能夠良好地展示和使用。此外，還需要關(guān)注網(wǎng)頁(yè)的性能優(yōu)化，包括減少 HTTP 請(qǐng)求、壓縮文件、使用緩存等方面的技巧來(lái)提升網(wǎng)頁(yè)的加載速度和用戶體驗(yàn)。
HTML5崗位技能實(shí)訓(xùn)室的培養(yǎng)目標(biāo)是培養(yǎng)掌握Web前端基礎(chǔ)理論知識(shí)、掌握前端開(kāi)發(fā)技術(shù)、掌握移動(dòng)端開(kāi)發(fā)技術(shù)、掌握Web測(cè)試技術(shù)和掌握數(shù)據(jù)庫(kù)技術(shù)等知識(shí)和技能、動(dòng)手能力強(qiáng)、適應(yīng)各種崗位工作的復(fù)合應(yīng)用型人才，從事Web前端開(kāi)發(fā)、移動(dòng)端開(kāi)發(fā)、軟件測(cè)試、系統(tǒng)維護(hù)、解決方案設(shè)計(jì)等工作。
HTML5崗位技能實(shí)訓(xùn)室是一個(gè)旨在提供實(shí)踐環(huán)境和教學(xué)資源的綜合實(shí)訓(xùn)室。HTML5崗位技能實(shí)訓(xùn)室的目標(biāo)是為學(xué)生提供一個(gè)真實(shí)的HTML5崗位技能環(huán)境，使他們能夠?qū)W習(xí)并實(shí)踐HTML5崗位技能的相關(guān)技術(shù)和方法。
HTML5崗位技能實(shí)訓(xùn)室建設(shè)方案系統(tǒng)是一個(gè)集硬件、軟件和教學(xué)資源于一體的綜合實(shí)訓(xùn)室，HTML5崗位技能實(shí)訓(xùn)室的建設(shè)旨在為學(xué)生提供一個(gè)實(shí)踐和交流的平臺(tái)，讓他們通過(guò)實(shí)際項(xiàng)目的開(kāi)發(fā)來(lái)應(yīng)用所學(xué)的知識(shí)，培養(yǎng)解決問(wèn)題和合作的能力，同時(shí)也促進(jìn)創(chuàng)新和創(chuàng)業(yè)精神的培養(yǎng)。這樣的實(shí)訓(xùn)室可以提升學(xué)生的實(shí)踐能力，并為他們將來(lái)投身HTML5崗位技能行業(yè)做好準(zhǔn)備。
HTML5崗位技能實(shí)訓(xùn)室以HTML5崗位技能領(lǐng)域?qū)W習(xí)者的職業(yè)生涯發(fā)展及終身學(xué)習(xí)需求為依據(jù)，重點(diǎn)滿足職業(yè)院校在校學(xué)生、進(jìn)修教師、企業(yè)員工、社會(huì)自學(xué)者四類對(duì)象不同層次的學(xué)習(xí)需求，聯(lián)合全國(guó)高水平院校以及企業(yè)，建設(shè)HTML5崗位技能專業(yè)優(yōu)質(zhì)專業(yè)資源、課程資源、認(rèn)證資源、競(jìng)賽資源。企業(yè)資源等內(nèi)容:優(yōu)化資源庫(kù)平臺(tái)，在“能學(xué)、輔教”的基礎(chǔ)上，滿足個(gè)性化學(xué)習(xí)者私人定制的實(shí)際需要，并完善平臺(tái)的運(yùn)行機(jī)制，保證平臺(tái)內(nèi)容的持續(xù)更新: 依托資源庫(kù)平臺(tái)，實(shí)現(xiàn)學(xué)生學(xué)習(xí)效果評(píng)價(jià)，能夠?yàn)槠髽I(yè)出具學(xué)生能力分析報(bào)告，指導(dǎo)企業(yè)招聘和學(xué)生就業(yè)。
3.1HTML5崗位技能教學(xué)平臺(tái)
平臺(tái)基于spring cloud微服務(wù)架構(gòu)，提供便捷的SSO單點(diǎn)登錄，采用kubernetes進(jìn)行部署，可支持公有云、混合云、私有云的安裝模式，數(shù)據(jù)層使用MySQL集群和MongoDB集群，實(shí)現(xiàn)了全流程EdvOps自動(dòng)化運(yùn)維，具有高內(nèi)聚、松耦合、業(yè)務(wù)單一、高性能、高并發(fā)、高可能、跨平臺(tái)、跨語(yǔ)言等特點(diǎn)。主要模塊有課程制作工具、云盤(pán)、共享課、我的課、云優(yōu)選課、云視頻庫(kù)、3D模型庫(kù)。
課程制作工具：由平臺(tái)提供專用的微服務(wù)模塊進(jìn)行支撐，采用websocket雙向通信技術(shù)，底層存儲(chǔ)采用三層遞進(jìn)的緩存方式，目的就是為了加快課程資源的加載速度。自主研發(fā)視頻轉(zhuǎn)碼，在線視頻剪輯功能。支持由word文檔直接導(dǎo)入，并且根據(jù)標(biāo)題類型自動(dòng)生成目錄，方便快捷。同時(shí)支持ppt、excel、圖片、超鏈接、視頻、音頻、3D模型、章節(jié)測(cè)驗(yàn)等內(nèi)容的插入，實(shí)現(xiàn)多個(gè)超文本文件的同屏展示。
共享課：使用訂單配發(fā)或校內(nèi)共享的概念，讓課程資源更大程度的進(jìn)行共享。
我的課：支持從共享課資源中直接進(jìn)行“生成副本”，導(dǎo)入進(jìn)我的課中，并且同時(shí)支持自行創(chuàng)建。所有的課程資源支持導(dǎo)出功能，可導(dǎo)出為本地的離線文件，導(dǎo)出文件為后綴名為wz的加密文件，在使用平臺(tái)進(jìn)行二次導(dǎo)入直接生成課程資源，便于線上傳播。
云優(yōu)選課：由行業(yè)資深從業(yè)人員在互聯(lián)網(wǎng)上收集整理的學(xué)習(xí)資源，包括系列類學(xué)習(xí)視頻和知識(shí)點(diǎn)類學(xué)習(xí)視頻，供教師和學(xué)生進(jìn)行自主學(xué)習(xí)。
云視頻庫(kù)：平臺(tái)提供數(shù)百個(gè)包含各專業(yè)的微課視頻，可直接引用到課程資源中。
3D模型庫(kù)：采用three。js技術(shù)，實(shí)現(xiàn)在線加載3D模型，提供更加直觀形象的教學(xué)體驗(yàn)。
題庫(kù)：題庫(kù)支持通用題目（單選題、多選題、判斷題、填空題、主觀題）以及實(shí)訓(xùn)題目（編程題、web前端題、虛擬化題等）；對(duì)于通用類題目可采用excel模板批量導(dǎo)入，采用瀑布流的展示方式，可共享到校內(nèi)供其他教師進(jìn)行使用。
作業(yè)：支持手動(dòng)建題和從題庫(kù)中選題兩種模式創(chuàng)建作業(yè)，提供作業(yè)庫(kù)模塊，作業(yè)庫(kù)內(nèi)的作業(yè)可多次發(fā)放給學(xué)生，對(duì)于作業(yè)平臺(tái)提供自動(dòng)評(píng)測(cè)，包括單選題、多選題、判斷題、填空題、編程題、虛擬化題。
考試：支持導(dǎo)入試卷、手動(dòng)創(chuàng)建、題庫(kù)選題三種創(chuàng)建方式，同時(shí)支持系統(tǒng)隨機(jī)組卷功能；提供試卷庫(kù)模塊，試卷庫(kù)內(nèi)的試卷可多次發(fā)放給學(xué)生，支持試卷的自動(dòng)判分。
課堂活動(dòng)：平臺(tái)支持多種課堂活動(dòng)，如：簽到、主題討論、提問(wèn)、分組任務(wù)、投票、問(wèn)卷、計(jì)時(shí)器等，提高課堂的趣味性和參與性。
個(gè)人云盤(pán)：平臺(tái)將用戶在備課，教學(xué)等過(guò)程中使用的文件，保存在個(gè)人云盤(pán)空間，支持二次直接使用和存檔，實(shí)現(xiàn)云文件的保存。
3.2HTML5崗位技能實(shí)訓(xùn)平臺(tái)
平臺(tái)采用B/S結(jié)構(gòu)，運(yùn)用spring cloud微服務(wù)技術(shù)，構(gòu)建多個(gè)穩(wěn)定、高效的服務(wù)模塊，提供SSO單點(diǎn)登錄服務(wù)，并使用統(tǒng)一的身份認(rèn)證鑒權(quán)。平臺(tái)基于k8s實(shí)現(xiàn)公有云、混合云、私有云多種部署方式，提供在線HTML5崗位技能的運(yùn)行環(huán)境，并內(nèi)置代碼運(yùn)行結(jié)果檢測(cè)，自動(dòng)進(jìn)行測(cè)評(píng)統(tǒng)計(jì)，實(shí)現(xiàn)真正的云開(kāi)發(fā)，開(kāi)箱即用，主要模塊有課程制作工具、作業(yè)、活動(dòng)、云盤(pán)、共享課、我的課、云優(yōu)選課。
便捷的實(shí)驗(yàn)制作工具：讓教師輕松實(shí)現(xiàn)pdf、ppt、word、excel等不同格式的文本、圖片、音頻、視頻、超鏈接等進(jìn)行混合編排，并自動(dòng)生成動(dòng)態(tài)實(shí)驗(yàn)?zāi)夸洠瑥亩鴮?shí)現(xiàn)不同實(shí)訓(xùn)資源同屏展示。
智能代碼評(píng)測(cè)，助力HTML5崗位技能實(shí)訓(xùn)：平臺(tái)支持在線對(duì)學(xué)生提交的實(shí)驗(yàn)代碼進(jìn)行評(píng)測(cè)，將評(píng)測(cè)結(jié)果統(tǒng)計(jì)分析后展示給教師，提高教師的教學(xué)效率，方便學(xué)生的學(xué)習(xí)過(guò)程。
提交代碼查重，防止抄襲：對(duì)于學(xué)生提交并且通過(guò)測(cè)評(píng)的HTML5崗位技能實(shí)訓(xùn)代碼進(jìn)行代碼的查重，防止學(xué)生互相抄襲代碼。
在線問(wèn)答，及時(shí)解答學(xué)生疑問(wèn)：平臺(tái)提供HTML5崗位技能實(shí)訓(xùn)的在線問(wèn)題，學(xué)生在HTML5崗位技能實(shí)訓(xùn)過(guò)程中，通過(guò)在線問(wèn)答及時(shí)與老師進(jìn)行溝通，提高學(xué)習(xí)效率。
可記錄學(xué)習(xí)情況的實(shí)驗(yàn)筆記：平臺(tái)為用戶在HTML5崗位技能實(shí)訓(xùn)頁(yè)面提供實(shí)驗(yàn)筆記功能，用戶可在實(shí)驗(yàn)過(guò)程中記錄下自己的筆記。
實(shí)驗(yàn)題解，幫助學(xué)生掌握實(shí)驗(yàn)知識(shí)點(diǎn)：平臺(tái)會(huì)在每個(gè)HTML5崗位技能實(shí)訓(xùn)題目后面，提供相應(yīng)的實(shí)驗(yàn)題解，教師可改變其是否展示給學(xué)生。從而讓學(xué)生在實(shí)驗(yàn)完成之后進(jìn)行學(xué)習(xí)，更好的掌握實(shí)驗(yàn)的知識(shí)點(diǎn)。
支持高并發(fā)的評(píng)測(cè)服務(wù)：平臺(tái)采用kafka消息隊(duì)列來(lái)處理評(píng)測(cè)的請(qǐng)求，并內(nèi)置高配置的底層沙箱服務(wù)，支持高并發(fā)的用戶同時(shí)使用。
學(xué)生測(cè)評(píng)結(jié)果自動(dòng)統(tǒng)計(jì)：平臺(tái)將課堂內(nèi)的用戶的評(píng)測(cè)結(jié)果進(jìn)行統(tǒng)計(jì)，按照消耗內(nèi)存、消耗時(shí)間兩個(gè)維度進(jìn)行展示，從而直觀的展示該實(shí)驗(yàn)的整體評(píng)測(cè)數(shù)據(jù)。
支持公共資源課程，便于老師教學(xué)：HTML5崗位技能實(shí)訓(xùn)平臺(tái)可內(nèi)置完整的實(shí)訓(xùn)資源，其中包括實(shí)訓(xùn)文檔以及在線資源包，用戶可以直接進(jìn)行使用。
個(gè)人云盤(pán)，資源不丟失：平臺(tái)會(huì)為用戶提供云盤(pán)服務(wù)，云盤(pán)內(nèi)所有文件都會(huì)按照不同的文件類型進(jìn)行分開(kāi)，便于用戶查看和操作。
平臺(tái)支持Web前端應(yīng)用程序開(kāi)發(fā)、web企業(yè)級(jí)開(kāi)發(fā)、數(shù)據(jù)庫(kù)設(shè)計(jì)等實(shí)驗(yàn)。
3.3HTML5崗位技能教學(xué)資源包
HTML5崗位技能教學(xué)資源包包含專業(yè)基礎(chǔ)課程： 計(jì)算機(jī)應(yīng)用基礎(chǔ)、靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)與制作、C語(yǔ)言程序設(shè)計(jì)、數(shù)據(jù)結(jié)構(gòu)、HTML5 + CSS3 Web 前端開(kāi)發(fā)技術(shù)、計(jì)算機(jī)專業(yè)英語(yǔ)等。專業(yè)核心課程：HTMI5 與 JavaSeript 程序設(shè)計(jì)、UI 設(shè)計(jì)基礎(chǔ)、美學(xué)基礎(chǔ)、Bootstrap 應(yīng)用開(kāi)發(fā)、NodeJS 應(yīng)用開(kāi)發(fā)、Vue 應(yīng)用程序開(kāi)發(fā)、Web 前端綜合實(shí)戰(zhàn)等。
3.4HTML5崗位技能實(shí)訓(xùn)資源包
對(duì)接真實(shí)職業(yè)場(chǎng)景或工作情境，在校內(nèi)外進(jìn)行HTML5崗位技能實(shí)訓(xùn)。使學(xué)生掌握網(wǎng)頁(yè)設(shè)計(jì)與制作的技術(shù)，能夠利用HTML5、CSS3等技術(shù)進(jìn)行網(wǎng)頁(yè)布局，基于項(xiàng)目化教學(xué)的模式培養(yǎng)學(xué)生實(shí)踐動(dòng)手能力；使學(xué)生了解JavaScript的基本語(yǔ)法，具備JavaScript的編程技巧和編程步驟；掌握常用的前端框架技術(shù)主要包含JQuery框架、Bootstrap框架、React框架、Vue框架、Angular框架等。利用數(shù)據(jù)庫(kù)管理系統(tǒng)和數(shù)據(jù)挖掘系統(tǒng)設(shè)計(jì)出能夠?qū)崿F(xiàn)對(duì)數(shù)據(jù)庫(kù)中的數(shù)據(jù)進(jìn)行添加、修改、刪除、處理、分析、理解、報(bào)表和打印等多種功能的數(shù)據(jù)管理和數(shù)據(jù)挖掘應(yīng)用系統(tǒng)；并利用應(yīng)用管理系統(tǒng)最終實(shí)現(xiàn)對(duì)數(shù)據(jù)的處理、分析和理解。
培養(yǎng)具有良好職業(yè)道德和人文素養(yǎng)，掌握web前后端數(shù)據(jù)交互、響應(yīng)式開(kāi)發(fā)等知識(shí)，具備動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)、開(kāi)發(fā)、調(diào)試、維護(hù)等能力，能從事web前端軟件編程、軟件測(cè)試、軟件技術(shù)服務(wù)、智能終端界面開(kāi)發(fā)等工作的中級(jí)技術(shù)技能人才。
3.5HTML5崗位技能實(shí)訓(xùn)室配套設(shè)施
HTML5崗位技能實(shí)訓(xùn)室配套設(shè)置包含實(shí)訓(xùn)室硬件設(shè)施、HTML5崗位技能軟件和工具等內(nèi)容，其中硬件設(shè)施如智慧黑板、教師講臺(tái)、多媒體設(shè)備、學(xué)生實(shí)訓(xùn)電腦、桌椅、服務(wù)器、交換機(jī)、機(jī)柜及HTML5崗位技能實(shí)訓(xùn)室裝修和HTML5崗位技能文化建設(shè)。HTML5崗位技能軟件和工具應(yīng)包含常用的HTML5崗位技能軟件和工具,這些HTML5崗位技能軟件和工具可以幫助學(xué)生進(jìn)行應(yīng)用程序的編寫(xiě)、測(cè)試和調(diào)試。
HTML5崗位技能實(shí)訓(xùn)室建設(shè)圖
6.1專業(yè)教學(xué)支撐
6.2教材聯(lián)合開(kāi)發(fā)教材
聯(lián)合各院校教授專家，開(kāi)發(fā)HTML5崗位技能專業(yè)系列教材，為院校專業(yè)實(shí)驗(yàn)課程開(kāi)展和教學(xué)提供參考。
6.3 產(chǎn)學(xué)研支撐平臺(tái)
平臺(tái)采用spring cloud微服務(wù)開(kāi)發(fā)架構(gòu)，各服務(wù)模塊單獨(dú)運(yùn)行并提供服務(wù)接口；可提供穩(wěn)定、快速、高效的服務(wù)；平臺(tái)整體采用前后端分離和分布式微服務(wù)的彈性計(jì)算架構(gòu)實(shí)現(xiàn)，后端主要基于Java的Spring cloud實(shí)現(xiàn)，前端vue實(shí)現(xiàn)等，具有高內(nèi)聚、松耦合、業(yè)務(wù)單一、高性能、高并發(fā)、高可能、跨平臺(tái)、跨語(yǔ)言等特點(diǎn)。
平臺(tái)提供SSO單點(diǎn)登錄，多個(gè)應(yīng)用系統(tǒng)統(tǒng)一登錄，統(tǒng)一的用戶管理，一個(gè)賬戶可登錄驗(yàn)證教學(xué)全場(chǎng)景以及數(shù)字技術(shù)專業(yè)群實(shí)踐教學(xué)等所有應(yīng)用模塊系統(tǒng)。
平臺(tái)采用kubernetes技術(shù)進(jìn)行部署，支持公有云、私有云、混合云模式安裝；平臺(tái)支持多數(shù)據(jù)源從而保證技術(shù)的一致性；確保服務(wù)的穩(wěn)定、可擴(kuò)展、彈性擴(kuò)容；每個(gè)獨(dú)立服務(wù)支持分布式集群部署，理論上可以無(wú)限橫向擴(kuò)展，提高系統(tǒng)處理能力，支持大規(guī)模并發(fā)教學(xué)全場(chǎng)景和數(shù)字化專業(yè)群教學(xué)實(shí)踐應(yīng)用。
基礎(chǔ)虛擬化服務(wù)由docker和kvm兩種虛擬化技術(shù)根據(jù)學(xué)科性質(zhì)進(jìn)行選擇性支撐，可滿足不同的虛擬化需求，提供穩(wěn)定、可自行配置的虛擬機(jī)器。
基于全流程DevOps自動(dòng)化運(yùn)維，支持持續(xù)集成、分析、服務(wù)注冊(cè)與發(fā)現(xiàn)、系統(tǒng)監(jiān)控、性能監(jiān)控、日志管理、預(yù)警、持續(xù)部署(基于docker的鏡像倉(cāng)庫(kù)，Kubernetes的容器云管理調(diào)度平臺(tái)，在線可視化管理、監(jiān)控、調(diào)度容器)。
基礎(chǔ)持久化層支持RDS和NoSQL兩種方式，采用MySQL集群和MongoDB集群搭建，支持基于CQRS的分布式事務(wù)處理，支持?jǐn)?shù)據(jù)自動(dòng)備份，同時(shí)使用于Redis集群對(duì)熱點(diǎn)數(shù)據(jù)進(jìn)行緩存，支持大并發(fā)；支持純本地化數(shù)據(jù)源。
基礎(chǔ)服務(wù)層支持在線驗(yàn)證碼服務(wù)、基礎(chǔ)文件服務(wù)、消息隊(duì)列服務(wù)、OSS對(duì)象存儲(chǔ)服務(wù)、用戶/鑒權(quán)服務(wù)、個(gè)人云盤(pán)服務(wù)、WebSocket服務(wù)等，保證平臺(tái)的通用性。用戶基礎(chǔ)信息管理：對(duì)訂單實(shí)行按業(yè)務(wù)方向進(jìn)行配置，對(duì)班級(jí)、教師、學(xué)生相關(guān)信息進(jìn)行新增、修改、刪除以及數(shù)據(jù)權(quán)限進(jìn)行配置。
6.4 技能大賽支撐
6.5 1+X認(rèn)證服務(wù)
日常項(xiàng)目建設(shè)和實(shí)施過(guò)程中，經(jīng)常會(huì)遇到類似數(shù)據(jù)可視化的實(shí)現(xiàn)場(chǎng)景。對(duì)于數(shù)據(jù)可視化已經(jīng)從簡(jiǎn)單的統(tǒng)計(jì)圖表展現(xiàn)，擴(kuò)展到類似監(jiān)控大屏，拓?fù)鋱D，流程編排圖，集成架構(gòu)圖等方面的呈現(xiàn)。而這些往往不是簡(jiǎn)單的使用圖表就能夠解決的。
因此今天總結(jié)下對(duì)于數(shù)據(jù)可視化和圖形繪制方面的工具整理。
推薦首先閱讀知乎的關(guān)于有哪些可視化工具推薦的回答，內(nèi)容已經(jīng)相當(dāng)全面了
https://www.zhihu.com/question/19929609
要注意的是當(dāng)前主流的仍然是基于javasrcirpt開(kāi)發(fā)的圖表庫(kù)，對(duì)于偏重的flex不應(yīng)該作為選擇的基礎(chǔ)。下面對(duì)一些選擇的思路做些簡(jiǎn)單的說(shuō)明。
首先可選的主流圖表庫(kù)包括了百度的Echart，Highchart，D3.js這三個(gè)。
這三個(gè)可視化圖表庫(kù)的使用客戶也相當(dāng)多，能夠應(yīng)對(duì)的常見(jiàn)可視化場(chǎng)景也足夠。對(duì)于百度的Echart又推出有新的V4.0版本，雖然支撐的圖表擴(kuò)展沒(méi)有大的變化，但是在性能上有明顯改進(jìn)。當(dāng)然從支持的圖表類型種類和開(kāi)放性來(lái)談，最強(qiáng)大的還是D3.js，但是前面兩種已經(jīng)能夠基本滿足實(shí)際的圖表層面使用的需要。
對(duì)于百度Echart，對(duì)里面的關(guān)系圖做了詳細(xì)分析后，實(shí)際上沒(méi)有找到用來(lái)做網(wǎng)絡(luò)拓?fù)鋱D的工具，系統(tǒng)集成關(guān)系圖的組件。當(dāng)然百度Echart里面有的關(guān)系圖，桑基圖，地圖，熱力圖遷徙圖，矩陣圖，日歷圖，樹(shù)圖等功能已經(jīng)足夠強(qiáng)大。
采用百度Echart也很容易自己來(lái)實(shí)現(xiàn)類似監(jiān)控大屏這種前端應(yīng)用。
對(duì)于網(wǎng)絡(luò)關(guān)系圖，在可視化里面常見(jiàn)的一種類型，其中主流的應(yīng)該是Gephi，Gephi是一款開(kāi)源免費(fèi)跨平臺(tái)基于JVM的復(fù)雜網(wǎng)絡(luò)分析軟件, 其主要用于各種網(wǎng)絡(luò)和復(fù)雜系統(tǒng)，動(dòng)態(tài)和分層圖的交互可視化與探測(cè)開(kāi)源工具。其次是R語(yǔ)言中的iGraph和networkD3包，功能也足夠強(qiáng)大。還有就是基于python語(yǔ)言實(shí)現(xiàn)的networkx，是專門(mén)進(jìn)行網(wǎng)絡(luò)可視化呈現(xiàn)的一個(gè)小工具。
Gephi地址和例子參考：https://gephi.org/
對(duì)于商用的圖表和可視化工具當(dāng)然是Tableau，據(jù)Gartner魔力象限，2014年的測(cè)評(píng)，tableau可執(zhí)行速度最快，整體市場(chǎng)表現(xiàn)也在前列。在Tableau官方網(wǎng)站可以免費(fèi)下載到桌面試用版進(jìn)行試用。
如果僅僅是提供常用的畫(huà)圖API接口，自己完全根據(jù)需要繪制SVG渲染圖，對(duì)于這種場(chǎng)景你仍然可以選擇Echart和Highcharts來(lái)實(shí)現(xiàn)，在官方網(wǎng)站也有制作SVG渲染圖的例子。
當(dāng)然還有一類即經(jīng)常用于網(wǎng)管類，日志類監(jiān)控分析的前端圖表展示軟件，在ELK日志分析系統(tǒng) Logstash+ElasticSearch+Kibana4里面會(huì)使用Kibana4進(jìn)行前端圖表展現(xiàn)。
Grafana是另外一個(gè)基于JavaScript的前端展示工具，Grafana provides a powerful and elegant way to create, explore, and share dashboards and data with your team and the world。對(duì)于Grafana支持Graphite, Elasticsearch, Prometheus, InfluxDB, OpenTSDB and KairosDB各種數(shù)據(jù)采集源。
對(duì)于Grafana當(dāng)前和類似InfluxDB時(shí)序數(shù)據(jù)庫(kù)結(jié)合的很緊密，可以很容易是基于時(shí)序數(shù)據(jù)的可視化圖表展示，包括當(dāng)前在Kurbernetes里面用的很多的Prometheus監(jiān)控方案，仍然是基于時(shí)序數(shù)據(jù)庫(kù)和Grafana來(lái)實(shí)現(xiàn)資源性能監(jiān)控。
Grafana的官方地址：https://grafana.com/
最后說(shuō)下Processing，功能相當(dāng)強(qiáng)大，但是要有一定的開(kāi)發(fā)基礎(chǔ)和學(xué)習(xí)門(mén)檻，Processing 在 2001 年誕生于麻省理工學(xué)院（MIT）的媒體實(shí)驗(yàn)室，主創(chuàng)者為 Ben Fry 和 Casey Reas，當(dāng)然還有來(lái)自 Carnegie Mellon、洛杉磯的加利福尼亞大學(xué)以及邁阿密大學(xué)等的貢獻(xiàn)。
具體例子可以參考：https://processing.org/examples/
數(shù)據(jù)可視化和圖表僅僅是前端呈現(xiàn)的工具，對(duì)于數(shù)據(jù)可視化最重要的還是首先要搞清楚你當(dāng)前有哪些數(shù)據(jù)，數(shù)據(jù)本身的結(jié)構(gòu)和數(shù)據(jù)間關(guān)系是如何的？其次搞清楚數(shù)據(jù)呈現(xiàn)的場(chǎng)景和模式，其次才是呈現(xiàn)問(wèn)題。
對(duì)于ESB服務(wù)總線，特別是涉及到兩級(jí)架構(gòu)集成的時(shí)候，采用類似拓?fù)鋱D的可視化思路來(lái)進(jìn)行集成架構(gòu)和部署架構(gòu)圖的可視化是一個(gè)可選的方案。基于拓?fù)鋱D可視化為關(guān)鍵字搜索，搜索到兩個(gè)可視化工具軟件，雖然都是付費(fèi)軟件，但是對(duì)于拓?fù)鋱D，部署架構(gòu)，集成關(guān)系圖等方面的展示能力還是相當(dāng)強(qiáng)。
TWaver工具：http://www.servasoft.com/
TWaver關(guān)注于數(shù)據(jù)的圖形展示，它是面向開(kāi)發(fā)人員的，需要進(jìn)行二次開(kāi)發(fā)。
TWaver的圖形組件庫(kù)中提供了拓?fù)浣M件、地圖組件、設(shè)備圖組件，以及表格、樹(shù)圖、屬性表、圖表等豐富的通用圖形界面組件，為電信運(yùn)營(yíng)支撐系統(tǒng)（OSS）的開(kāi)發(fā)提供“一站式”的組件產(chǎn)品和解決方案，是快速設(shè)計(jì)、開(kāi)發(fā)和部署OSS的利器。
可以看到TWaver本身的功能相對(duì)強(qiáng)大，完全可以勝任復(fù)雜的資源拓?fù)鋱D的設(shè)計(jì)，但是如果僅僅用于拓?fù)鋱D展示的話有點(diǎn)大材小用。
對(duì)于TWaver，實(shí)際上可以看到對(duì)于數(shù)據(jù)中心資源和資產(chǎn)的全三維可視化建模是另外一個(gè)做的相當(dāng)好的地方。這個(gè)軟件可以實(shí)現(xiàn)數(shù)據(jù)中心內(nèi)所有設(shè)備對(duì)象的虛擬仿真，以完全3D模式構(gòu)建整個(gè)數(shù)據(jù)中心環(huán)境，并將數(shù)據(jù)中心內(nèi)的監(jiān)控子系統(tǒng)，如視頻、動(dòng)環(huán)、門(mén)禁等，納入到可視化機(jī)房管理平臺(tái)中來(lái)，實(shí)時(shí)分析查看監(jiān)控信息。 軟件采用B/S架構(gòu)，無(wú)需安裝任何插件即可在瀏覽器中流暢漫游數(shù)據(jù)中心三維場(chǎng)景,實(shí)現(xiàn)數(shù)據(jù)中心級(jí)、機(jī)房級(jí)、機(jī)柜級(jí)、設(shè)備級(jí)和端口級(jí)管理和監(jiān)控。
類似下圖：
Qunee工具：http://qunee.com/
Qunee是一套基于HTML5的網(wǎng)絡(luò)圖組件。其使用HTML5 Canvas技術(shù)，繪制清新、流暢的網(wǎng)絡(luò)圖，可用于社交網(wǎng)絡(luò)圖、拓?fù)鋱D、流程圖、地圖等需求， JS組件封裝，藏繁瑣于簡(jiǎn)潔，輕松構(gòu)建優(yōu)雅的互聯(lián)網(wǎng)應(yīng)用與企業(yè)應(yīng)用，讓數(shù)據(jù)的在線可視化變得容易。
在網(wǎng)站上有詳細(xì)的例子可以參考，可以看到Qunee相對(duì)來(lái)說(shuō)輕量些，用于實(shí)現(xiàn)一些簡(jiǎn)單的網(wǎng)絡(luò)拓?fù)洌杉軜?gòu)圖展示完全可以滿足去。
類似上圖，可以很方便的通過(guò)Qunee提供的可視化設(shè)計(jì)工具實(shí)現(xiàn)。
基于這些可視化拓?fù)湓O(shè)計(jì)工具，結(jié)合ESB服務(wù)總線集成實(shí)際的集成場(chǎng)景來(lái)說(shuō)，初步考慮可以應(yīng)用的點(diǎn)包括如下。
1. 實(shí)現(xiàn)兩級(jí)架構(gòu)的拓?fù)鋱D效果展示和接口服務(wù)集成監(jiān)控。
布局原來(lái)一直太強(qiáng)調(diào)結(jié)合地圖進(jìn)行展示，實(shí)際上效果并不一定太好。這里可以直接自己定義布局模式，初步想法就是中心為集團(tuán)，四邊方框來(lái)線上各個(gè)省或子公司。形成完整的兩級(jí)集團(tuán)展示效果。這種展示方式也方便直接線上到大屏上去。
2. 對(duì)于當(dāng)前ESB平臺(tái)本身的資源和服務(wù)狀態(tài)監(jiān)控可視化
這套可視化工具很容易實(shí)現(xiàn)這點(diǎn)，我們只需要先可視化的設(shè)計(jì)出部署架構(gòu)布局，然后再將實(shí)際對(duì)數(shù)據(jù)庫(kù)，應(yīng)用中間件資源，包括服務(wù)運(yùn)行的各種狀態(tài)信息，異常信息直接顯示到整體部署邏輯架構(gòu)圖上即可。這樣可以更加可視化的監(jiān)控到資源當(dāng)前的運(yùn)行狀態(tài)和異常發(fā)生情況。
3. 服務(wù)集成架構(gòu)展示
在最早我們做自研ESB產(chǎn)品的時(shí)候，采用Flash實(shí)現(xiàn)了一個(gè)集成架構(gòu)的展示效果，但是整體效果并不是很好。而通過(guò)這套可視化工具，可以用來(lái)實(shí)現(xiàn)這種集成架構(gòu)的效果展示。同時(shí)可以展示出兩級(jí)架構(gòu)的集成效果。即可以分層展開(kāi)效果。
集成架構(gòu)不需要提前進(jìn)行設(shè)計(jì)，而是需要在后臺(tái)提取了集成關(guān)系后，自動(dòng)進(jìn)行拓?fù)渖珊妥詣?dòng)化布局。集成架構(gòu)中的連線可以用來(lái)表示當(dāng)前系統(tǒng)間的接口服務(wù)連通性和接口服務(wù)調(diào)用流量等信息。但是上圖實(shí)際上離我們需要的集成架構(gòu)圖可視化設(shè)計(jì)仍然有具體，具體見(jiàn)后面集成架構(gòu)圖設(shè)計(jì)部分的一些思考。
4. 端到端流程監(jiān)控可視化設(shè)計(jì)
基于服務(wù)間的集成關(guān)系和調(diào)用先后順序來(lái)實(shí)現(xiàn)端到端的流程監(jiān)控，這個(gè)我在博客前面多次提到，也一直在尋找比較好的前端設(shè)計(jì)工具來(lái)做。比如對(duì)我們已有的流程平臺(tái)流程建模工具前端進(jìn)行適度改進(jìn)來(lái)支持等。
對(duì)于這類需求也可以用前面提到的工具來(lái)實(shí)現(xiàn)，先進(jìn)行端到端監(jiān)控流程圖的設(shè)計(jì)，然后在進(jìn)行運(yùn)行展示。其中最主要的還是在運(yùn)行態(tài)的各類信息，比如運(yùn)行狀態(tài)，數(shù)量，是否有異常等是否很容易疊加到已有的設(shè)計(jì)圖上。只要能夠解決這個(gè)問(wèn)題，那么就能夠很好的應(yīng)用到端到端流程監(jiān)控的可視化設(shè)計(jì)中。
對(duì)于集成架構(gòu)圖的繪制一直是我關(guān)注的一個(gè)點(diǎn)，也看了類似百度Echart，D3和HighChart等，基本都沒(méi)有發(fā)現(xiàn)適合用來(lái)做類似集成架構(gòu)圖繪制的工具。同時(shí)集成架構(gòu)圖往往都不是自動(dòng)繪制，而需要提前進(jìn)行集成架構(gòu)的圖形布局設(shè)計(jì)，布局好后才能夠用JS去繪制。
因此更多我們需要的是一個(gè)JS繪圖工具庫(kù)，能夠匯總線條，矩陣，圓等基礎(chǔ)圖形形狀即可。我們可以看下一個(gè)簡(jiǎn)單的集成架構(gòu)圖，經(jīng)過(guò)設(shè)計(jì)排版后布局可能如下：
對(duì)于這類圖可以看到實(shí)際上各類可視化圖表庫(kù)并不太容易實(shí)現(xiàn)。原來(lái)我們采用過(guò)Flash來(lái)進(jìn)行集成架構(gòu)圖的繪制，但是Flash相對(duì)偏重不太合適。因此還是需要找一個(gè)JS繪圖庫(kù)來(lái)實(shí)現(xiàn)這種簡(jiǎn)單的集成架構(gòu)圖的繪制工作。
基于這個(gè)思路我們?cè)诰W(wǎng)上找了下比較好的一些JS繪制工具庫(kù)。
jsPlumb開(kāi)源流程圖繪制工具庫(kù)
那么如果你應(yīng)該使用它取決于你想用jsPlumb做什么。該框架適用于必須繪制圖表的Web應(yīng)用程序，例如類似于Visio的應(yīng)用程序或工作流程設(shè)計(jì)器等。由于圖表項(xiàng)目和連接的所有參數(shù)都是非常精細(xì)可控的，因此您可以繪制您可以想到的任何類型的圖表。
該開(kāi)源庫(kù)的GitHub地址為：https://github.com/wangduanduan/jsplumb-chinese-tutorial
在該地址也有詳細(xì)的中文使用教程，根據(jù)教程的一些截圖可以看到，該工具庫(kù)很適合用來(lái)繪制我們上面的集成架構(gòu)圖，因?yàn)檫@種圖本身也就是形狀和線條的一些簡(jiǎn)單組合，而且來(lái)拖拽功能都不需要。
當(dāng)然基于該工具庫(kù)，我們也可以用來(lái)實(shí)現(xiàn)更加復(fù)雜的集成架構(gòu)圖，即將兩個(gè)業(yè)務(wù)系統(tǒng)間的所有關(guān)鍵集成接口全部以連線的方式表示出來(lái)。這種集成架構(gòu)圖也是無(wú)法自動(dòng)生成，需要首先進(jìn)行整體部版設(shè)計(jì)，然后再通過(guò)jsPlumb工具庫(kù)進(jìn)行繪制即可。
如果要連接多條線條，需要整個(gè)節(jié)點(diǎn)作為source或者target， 并且將錨點(diǎn)設(shè)置成Continuous，那么錨點(diǎn)就會(huì)隨著節(jié)點(diǎn)的位置改變而改變自己的位置。這個(gè)功能特性可以很方便我進(jìn)行多線條設(shè)置。
注意在這個(gè)網(wǎng)址，https://jsplumbtoolkit.com/community/doc/anchors.html， 這個(gè)工具庫(kù)是存在License費(fèi)用的，因此如果這個(gè)工具庫(kù)用于商業(yè)用途，按道理會(huì)涉及到License的購(gòu)買(mǎi)問(wèn)題。
一篇關(guān)于該工具庫(kù)的使用參考：https://www.cnblogs.com/xcj26/p/9870734.html
另外一個(gè)用該工具庫(kù)實(shí)現(xiàn)的流程設(shè)計(jì)器和表單設(shè)計(jì)器： http://formdesign.leipi.org/
付費(fèi)JS繪制工具庫(kù)：GoJS
GoJS是一套基于JavaScript的付費(fèi)圖形繪制工具庫(kù)，地址：https://gojs.net/latest/index.html
這套工具庫(kù)有免費(fèi)版本，也有收費(fèi)版本，收費(fèi)版本比jsPlumb工具庫(kù)來(lái)說(shuō)就強(qiáng)大了很多，特別是動(dòng)態(tài)Port圖和動(dòng)態(tài)分組圖，這兩個(gè)用來(lái)繪制我們集成架構(gòu)圖，應(yīng)用架構(gòu)圖等都相當(dāng)有用。
所有Demo演示地址參考：https://gojs.net/latest/samples/regrouping.html
JointJS工具庫(kù)
這個(gè)也是常用的繪圖工具庫(kù)，地址在：https://www.jointjs.com/
這個(gè)庫(kù)官方介紹的例子都感覺(jué)比較重，而實(shí)際其它搜索到的一些使用介紹來(lái)看，用于簡(jiǎn)單從集成架構(gòu)圖，流程圖類繪制還是沒(méi)有太大問(wèn)題的。基本還是標(biāo)準(zhǔn)的新建畫(huà)板，畫(huà)布，然后進(jìn)行各種圖形的定義和繪制。
jointJS是一個(gè)基于svg的圖形化工具庫(kù)，在畫(huà)布上畫(huà)出支持拖動(dòng)的svg圖形，而且可以導(dǎo)出JSON，也能通過(guò)JSON配置導(dǎo)入直接生成圖形。由于這個(gè)工具庫(kù)是基于SVG的，因此也不太推薦使用。
一篇使用參考：https://segmentfault.com/a/1190000015972176
Quick V 是一套數(shù)據(jù)可視化大屏展示方案。在大數(shù)據(jù)時(shí)代，Quick V 將數(shù)據(jù)全面、直觀地呈現(xiàn)在用戶眼前，幫助管理者在面臨業(yè)務(wù)復(fù)雜度的急劇變化時(shí)，即刻擁有海量有序的決策支持信息，滿足會(huì)議展覽、業(yè)務(wù)監(jiān)控、風(fēng)險(xiǎn)預(yù)警、地理信息分析等多種業(yè)務(wù)的展示需求。
參考：http://www.uileader.com/quickui_display.html
大家可以先看下上面這個(gè)大屏可視化效果，感覺(jué)整體還是做的相當(dāng)不錯(cuò)。這個(gè)工具本身商用收費(fèi)，比較好的就是對(duì)于我們常見(jiàn)的大屏監(jiān)控已經(jīng)固化為各種模板，基本都可以直接使用。
基于百度Echart自己實(shí)現(xiàn)可配置的監(jiān)控大屏
在前面我也談到，實(shí)際上對(duì)于監(jiān)控大屏實(shí)現(xiàn)，當(dāng)前我們完全可以采用百度Echart來(lái)定制實(shí)現(xiàn)，而這篇文章主要想談下如何對(duì)監(jiān)控大屏可視化做到靈活可配置。
首先我們看到監(jiān)控大屏可視化，實(shí)際上跟我們前面談到的自定義報(bào)表相當(dāng)類似，其核心仍然是單面板設(shè)計(jì)，多面板組合。基于這個(gè)思路我們逐一展開(kāi)進(jìn)行描述。
在講自定義報(bào)表的時(shí)候，我們單面板設(shè)計(jì)數(shù)據(jù)集和實(shí)際的數(shù)據(jù)呈現(xiàn)是耦合在一起的，而實(shí)際上更好的思路是數(shù)據(jù)集和數(shù)據(jù)呈現(xiàn)進(jìn)行分離。基于這個(gè)思路，逐一展開(kāi)講關(guān)鍵功能點(diǎn)實(shí)現(xiàn)。
數(shù)據(jù)集設(shè)計(jì)
數(shù)據(jù)源定義，對(duì)于數(shù)據(jù)源定義，最好也進(jìn)行獨(dú)立，一個(gè)報(bào)表前端呈現(xiàn)本身也可能涉及到多個(gè)數(shù)據(jù)源。數(shù)據(jù)集設(shè)計(jì)，即返回一個(gè)二維的數(shù)據(jù)集合，可以有多列。我們需要通過(guò)配置的方式來(lái)實(shí)現(xiàn)，即首先選擇數(shù)據(jù)源，然后自定義Sql語(yǔ)句，然后返回具體的數(shù)據(jù)集對(duì)象。在sql過(guò)程中我們可以對(duì)字段標(biāo)題名稱等進(jìn)行轉(zhuǎn)義。
更加解耦的方法是數(shù)據(jù)集可以直接選擇具體的WS服務(wù)，由服務(wù)返回一個(gè)二維的數(shù)據(jù)集對(duì)象。這種方式可以進(jìn)一步實(shí)現(xiàn)報(bào)表平臺(tái)和底層數(shù)據(jù)庫(kù)的解耦。
單面板設(shè)計(jì)
單面板設(shè)計(jì)簡(jiǎn)單來(lái)說(shuō)就是將前端的呈現(xiàn)方式，究竟是折線圖，餅圖還是雷達(dá)圖等，和后端的數(shù)據(jù)集進(jìn)行綁定。在這個(gè)過(guò)程中重點(diǎn)是要確認(rèn)具體的圖表呈現(xiàn)的一些關(guān)鍵配置，包括X，Y軸顯示，圖表名稱，圖例是否顯示等關(guān)鍵配置，都需要在單面板設(shè)計(jì)的是配置完成。
單面板設(shè)計(jì)完成后，最好提供預(yù)覽功能按鈕，可以馬上體驗(yàn)到單面板展示的效果。
大屏設(shè)計(jì)
對(duì)于大屏設(shè)計(jì)，實(shí)際上里面有幾個(gè)關(guān)鍵點(diǎn)，首先就是大屏展示需要有一個(gè)CSS模板，這個(gè)模板決定了所有的單面板圖表的配色風(fēng)格，包括具體的底色，前端的色系選擇等。選擇模板就是確保最終的大屏展示各個(gè)單面板風(fēng)格能夠完全保持一致。
大屏版面設(shè)計(jì)，仍然采用標(biāo)準(zhǔn)的Grid布局模式即可，可以看到所有的大屏展示基本都采用Grid布局模式。每個(gè)單面板你唯一要確定的就是橫向跨幾行，縱向跨幾列即可。類似上面的圖，我們采用4*4Grid進(jìn)行布局，中間的地圖展示則是橫向跨3行，縱向跨兩列。
大屏整體的展示動(dòng)態(tài)刷新能力
在以上設(shè)計(jì)完成后，我們整個(gè)大屏展示效果也就出來(lái)了。在該大屏設(shè)計(jì)中我們沒(méi)有考慮動(dòng)態(tài)查詢功能。但是大屏監(jiān)控仍然需要?jiǎng)討B(tài)進(jìn)行刷新。因此在設(shè)計(jì)大屏的時(shí)候需要具備動(dòng)態(tài)刷新能力，為了考慮后續(xù)具備一定的擴(kuò)展性，我們需要能夠?qū)㈥P(guān)鍵的一些變量參數(shù)傳遞到圖表展示中。
最關(guān)鍵的參數(shù)就是當(dāng)前時(shí)間，當(dāng)前的時(shí)間需要能夠傳遞到每一個(gè)數(shù)據(jù)集Sql中，方便我們根據(jù)時(shí)間進(jìn)行數(shù)據(jù)過(guò)濾。同時(shí)對(duì)于大屏我們需要配置定時(shí)刷新頻率，基于該頻率對(duì)展示內(nèi)容進(jìn)行動(dòng)態(tài)刷新。
IDC（Internet Data Center，指互聯(lián)網(wǎng)數(shù)據(jù)中心）行業(yè)有這樣一句操作效率的名言："你無(wú)法控制沒(méi)有經(jīng)過(guò)測(cè)量的事物。"言外之意：要想減少能源浪費(fèi)情況就必須從最基本的測(cè)量開(kāi)始。但如果無(wú)法得知能源都用到了什么地方的話，管理人員就無(wú)法知悉將重點(diǎn)放哪。
本文介紹通過(guò) HT 打造一個(gè)完整的三維數(shù)據(jù)中心可視化系統(tǒng)。在實(shí)現(xiàn)傳統(tǒng)的數(shù)據(jù)中心監(jiān)控可視化的功能外，添加了極具圖撲特色的設(shè)計(jì)元素，將中國(guó)的水墨畫(huà)融合進(jìn)了平時(shí)枯燥的運(yùn)維監(jiān)控系統(tǒng)中，為枯燥的場(chǎng)景增添了一抹獨(dú)特的節(jié)奏與氣韻。
宏觀到微觀，逐級(jí)下鉆
利用三維虛擬仿真技術(shù)對(duì)三維地球進(jìn)行立體全景展示，通過(guò)采用 HT 的球體模型加以匹配地理環(huán)球貼圖來(lái)實(shí)現(xiàn)該效果。并可通過(guò)接入各個(gè)數(shù)據(jù)中心的經(jīng)緯度信息自動(dòng)生成坐標(biāo)點(diǎn)的位置，直觀展示分布在全球各地的數(shù)據(jù)中心。雖然 HT 也整合了開(kāi)源 Cesuim 的方案實(shí)現(xiàn) GIS 的功能，該方式完全不必采用 WebGIS 相關(guān)功能模塊，而是通過(guò)簡(jiǎn)單的三角函數(shù)進(jìn)行球體坐標(biāo)算法運(yùn)算來(lái)實(shí)現(xiàn)預(yù)期效果，相比之下采用該方案來(lái)實(shí)現(xiàn)會(huì)更加輕量快捷，甚至不需要建模的介入就可以完成，極大降低了實(shí)施成本和周期。
雖然無(wú)法通過(guò) LOD 動(dòng)態(tài)加載出地圖細(xì)節(jié)，但場(chǎng)景交互設(shè)計(jì)還能夠更加自由發(fā)揮出各種視覺(jué)效果，例如通過(guò)交互、切換場(chǎng)景等實(shí)現(xiàn)逐級(jí)下鉆，實(shí)現(xiàn)了從地球-區(qū)域-園區(qū)-機(jī)房-機(jī)柜設(shè)備的逐級(jí)下鉆的功能，場(chǎng)景過(guò)度順滑自然。
通過(guò)點(diǎn)擊對(duì)應(yīng)區(qū)域，逐層下鉆到數(shù)據(jù)中心的園區(qū)外景。整體場(chǎng)景采用了輕量化建模的方式，對(duì)數(shù)據(jù)中心所在園區(qū)、樓宇樣貌進(jìn)行高精度建模還原，支持 360 度觀察虛擬園區(qū)，通過(guò) HT 自帶交互，即可實(shí)現(xiàn)鼠標(biāo)的旋轉(zhuǎn)、平移、拉近拉遠(yuǎn)操作，同時(shí)也實(shí)現(xiàn)了觸屏設(shè)備的單指旋轉(zhuǎn)、雙指縮放、三指平移操作不必再為跨平臺(tái)的不同交互模式而煩惱。
這是個(gè)問(wèn)答小模塊
—— 很多未做過(guò)可視化項(xiàng)目的會(huì)有疑問(wèn)？
1、如何完成這樣一個(gè)園區(qū)的三維建模？
常規(guī)情況下可通過(guò)提供衛(wèi)星云圖、效果圖、鳥(niǎo)瞰圖、CAD圖、現(xiàn)場(chǎng)照片等資料，由設(shè)計(jì)師進(jìn)行輕量化建模。
2、目前手頭有 BIM 的模型信息，是否能夠直接用于這個(gè)場(chǎng)景的展示？
BIM 模型除了包含基本模型形狀外，還包含了大量業(yè)務(wù)和層次結(jié)構(gòu)信息，所以一般 BIM 文件都非常大，幾百 MB 到上 GB 的都有，這對(duì)于采用所有展示內(nèi)容都是實(shí)時(shí)加載的 Web 便是最大的困難點(diǎn)。雖然 HT 也提供了讀取 BIM IFC 格式的內(nèi)容，通過(guò)動(dòng)態(tài)加載部分信息再在 Web 上進(jìn)行實(shí)時(shí)渲染展示，但是在實(shí)際的項(xiàng)目執(zhí)行過(guò)程中，還需要考慮各方因素，需要具體分析能否直接使用。大多數(shù)BIM都是工程使用，主要以呈現(xiàn)工程細(xì)節(jié)為主，在美觀效果上還是重新建模能達(dá)到更好的效果。
3、除了人工建模，是否還有其它方式？
目前可以通過(guò)無(wú)人機(jī)航拍生成傾斜攝影模型，再通過(guò) GIS 方案展示出來(lái)。當(dāng)然航拍的方式一般風(fēng)格比較固定，該是什么樣，拍出來(lái)不會(huì)有太大差距，如遇到一些老舊廠區(qū)，跟之前頁(yè)面效果可能格格不入，包括 BIM 的方式，也大部分是比較丑的，所以輕量化重新建模的方式，設(shè)計(jì)師就有“設(shè)計(jì)”的發(fā)揮空間，創(chuàng)造更多美學(xué)上的都關(guān)系，如這個(gè)有山有水的園區(qū)，一眼必是“中國(guó)造”的。
動(dòng)力監(jiān)控可視化
IDC 能耗與管控系統(tǒng)作為一個(gè)大型整體的數(shù)據(jù)中心展示系統(tǒng)，在宏觀使用場(chǎng)景下，將會(huì)更加關(guān)注整體數(shù)據(jù)。通過(guò)對(duì)接區(qū)域內(nèi)的數(shù)據(jù)中心數(shù)量信息、能耗情況、節(jié)能信息、節(jié)能同比等，最大限度地幫助決策者觀察到各類的對(duì)象，為決策者貼心打造數(shù)據(jù)智能決策平臺(tái)。
同時(shí)作為一個(gè)監(jiān)控系統(tǒng)，預(yù)警、告警不可少。對(duì)接感知網(wǎng)絡(luò)數(shù)據(jù)，通過(guò)事件列表展示后臺(tái)實(shí)時(shí)推送的數(shù)據(jù)信息，實(shí)現(xiàn)顯示數(shù)據(jù)實(shí)時(shí)感知，設(shè)定預(yù)警閥值實(shí)現(xiàn)數(shù)據(jù)監(jiān)測(cè)預(yù)警，有效監(jiān)控監(jiān)測(cè)數(shù)據(jù)業(yè)務(wù)數(shù)據(jù)運(yùn)行態(tài)勢(shì)。 PUE （Power Usage Effectiveness），作為評(píng)價(jià)數(shù)據(jù)中心能源效率的指標(biāo)，通過(guò)數(shù)據(jù)面板直觀展示。
資產(chǎn)管理可視化
資產(chǎn)可視化模塊將會(huì)隨著層級(jí)關(guān)系的遞進(jìn)查看不同下鉆層級(jí)的資產(chǎn)狀況。資產(chǎn)管理模塊具備全生命周期管理功能，通過(guò)后臺(tái)數(shù)據(jù)接口實(shí)現(xiàn)了自動(dòng)上下架，無(wú)需人工手動(dòng)操作，以接口數(shù)據(jù)來(lái)保證展示內(nèi)容的準(zhǔn)確性，最終集成了平臺(tái)上的所有設(shè)施設(shè)備。通過(guò) 3D 視圖進(jìn)行關(guān)鍵信息查看，如虛擬機(jī)、系統(tǒng)進(jìn)程、磁盤(pán)空間占用以及其他實(shí)時(shí)的數(shù)據(jù)監(jiān)控。可呈現(xiàn)資產(chǎn)的信息，包括但不限于設(shè)備類型、型號(hào)、采購(gòu)及上架日期、位置、維保等信息，并自動(dòng)刷新設(shè)備現(xiàn)有位置信息。
模塊中支持對(duì)場(chǎng)景內(nèi)的設(shè)備進(jìn)行模糊查找和定位，鏡頭自動(dòng)移動(dòng)到定位設(shè)備的當(dāng)前位置，點(diǎn)擊即可彈出相關(guān)設(shè)備信息，輔助運(yùn)維管理人員快速查找所需的設(shè)備。滿足不同類型資產(chǎn)的運(yùn)維管理特性，確保資產(chǎn)信息完整無(wú)誤且有據(jù)可循。
容量管理可視化
可視化不僅僅能將肉眼所見(jiàn)的對(duì)象用圖像描繪出來(lái)，也能將設(shè)備的信息狀態(tài)形式表達(dá)出來(lái)。通過(guò)機(jī)位、U位、承重、功耗等各種可視化圖表，機(jī)房運(yùn)維人員將更加清晰地掌握當(dāng)前的容量情況，如當(dāng)前機(jī)房的電力負(fù)載、機(jī)柜剩余空間、機(jī)房各區(qū)域承重情況以及存儲(chǔ)的容量情況，都可以形象直觀的表達(dá)出來(lái)，有效管理機(jī)房的容量資源，讓機(jī)房的各類資源負(fù)載倍加均衡。
容量可視化管理功能還支持通過(guò)空間搜索功能，對(duì)于已用空間和可用空間進(jìn)行精確統(tǒng)計(jì)和展現(xiàn)。協(xié)助人員迅速找到合適新增設(shè)備的上架空間，精確定位所需空間。主要功能介紹如下：
當(dāng)與監(jiān)控可視化相結(jié)合時(shí)，便實(shí)現(xiàn)了與動(dòng)環(huán)監(jiān)控系統(tǒng)的PDU（Power Distribution Unit，電源分配單元）監(jiān)控集成，機(jī)柜實(shí)時(shí)功率分布統(tǒng)計(jì)和機(jī)房PUE（Power Usage Effectiveness）的展示。能按不同區(qū)域查看能耗的用量，如樓層、房間、機(jī)柜進(jìn)行查找和統(tǒng)計(jì)。運(yùn)維人員不再需要通過(guò)原始數(shù)據(jù)去推理建立心理形象，而是直接用感官快速理解情況。
管線可視化
管線可視化內(nèi)容通常分為網(wǎng)絡(luò)鏈路可視化、暖通管道可視化、電氣線路可視化等管線類型的可視化展示。如果使用傳統(tǒng)的人工建模方式，通常成本費(fèi)用較高、實(shí)施周期較長(zhǎng)，且搭建出來(lái)的可視化內(nèi)容在場(chǎng)景中的使用意義不大，并且可視化的方向在于監(jiān)管業(yè)務(wù)數(shù)據(jù)，而非真實(shí)意義上的管線排布。
因此 HT 推出基于管線可視化的獨(dú)特算法用于生成設(shè)備與設(shè)備之間相連的管線生成，包括網(wǎng)絡(luò)接口、暖通管線（水冷空調(diào)、水塔、冷水機(jī)組、冷卻泵、恒濕機(jī)）人工建模或數(shù)據(jù)生成）、電氣管線（變壓器、配電箱、電池組、電池柜、電力監(jiān)控通訊柜、開(kāi)關(guān)柜、主控柜）等鏈路可視化功能。系統(tǒng)可與網(wǎng)絡(luò)線路、電氣、暖通自控系統(tǒng)進(jìn)行數(shù)據(jù)對(duì)接，通過(guò)算法自動(dòng)排布生成管線，以可視化及動(dòng)畫(huà)形式展現(xiàn)設(shè)備的運(yùn)行狀態(tài)和連接狀態(tài)，因此連接關(guān)系和鏈路走向都能讓運(yùn)維人員了然于目。
動(dòng)環(huán)監(jiān)控可視化
3D 空間內(nèi)展現(xiàn)了對(duì)整個(gè)數(shù)據(jù)中心動(dòng)環(huán)資源實(shí)時(shí)的管理與監(jiān)控（包括UPS、自動(dòng)旁路、空調(diào)送風(fēng)等狀態(tài)），對(duì)設(shè)備資源進(jìn)行狀態(tài)查詢、參數(shù)監(jiān)測(cè)、預(yù)警告警等智能監(jiān)測(cè)功能。以壓縮機(jī)、冷凝器、列頭柜各回路參數(shù)（電壓、電流、功率因數(shù)）等設(shè)備為主要監(jiān)測(cè)，監(jiān)視設(shè)備開(kāi)關(guān)狀態(tài)以及設(shè)備參數(shù)變化的記錄和報(bào)警處理。
（1）UPS 監(jiān)控
監(jiān)測(cè)設(shè)備的參數(shù)和狀態(tài)，參數(shù)包括輸入輸出電壓、電流、功率、蓄電池組的電壓、溫度等；狀態(tài)包括整流器、逆變器、電池、負(fù)載等部件的狀態(tài)，顯示和記錄各參數(shù)的變化曲線，并對(duì)各類報(bào)警狀態(tài)進(jìn)行記錄和報(bào)警處理。可實(shí)現(xiàn)機(jī)柜實(shí)時(shí)功率分布統(tǒng)計(jì)并按不同區(qū)域（樓層、房間、機(jī)柜）查看和統(tǒng)計(jì)設(shè)備能耗的用量。
（2）三維熱力云圖
通過(guò)對(duì)接數(shù)據(jù)中心內(nèi)的物聯(lián)網(wǎng)設(shè)備（溫濕度傳感器），獲取到場(chǎng)景中的溫度點(diǎn)位信息，渲染出三維的熱力云圖效果。目前很多數(shù)據(jù)中心已經(jīng)垂直安裝使用了低中高垂直方向的傳感器，傳統(tǒng)的熱力云圖是將將渲染出來(lái)的圖片貼合到平面地板上，使用三維的熱力云圖，可以帶來(lái)更直觀的視覺(jué)體驗(yàn)，可以更快定位每個(gè)機(jī)柜上的設(shè)備發(fā)熱情況。
（3）氣流感知模擬
依照溫濕度傳感器傳達(dá)的數(shù)據(jù)，形成實(shí)時(shí)氣流組織分布圖 CFD （Computational Fluid Dynamics），使其清晰地看到機(jī)房?jī)?nèi)冷熱氣流流向和分布情況。
（4）節(jié)能監(jiān)控
當(dāng)前，降低制冷系統(tǒng)的能耗是數(shù)據(jù)中心規(guī)劃建設(shè)的基本準(zhǔn)則，且影響著數(shù)據(jù)中心建設(shè)效益。采用可視化節(jié)能策略，利用系統(tǒng)提供的智能算法，計(jì)算當(dāng)前設(shè)備和環(huán)境溫度,自動(dòng)給出各個(gè)制冷設(shè)備的最佳功率。優(yōu)化數(shù)據(jù)中心空調(diào)氣流，達(dá)到降低能耗，有效制冷的科學(xué)應(yīng)用。
實(shí)時(shí)統(tǒng)計(jì)全年節(jié)能電量以及節(jié)能收益情況。
（5）門(mén)禁監(jiān)控
三維可視化在門(mén)禁監(jiān)控層面主要是與視頻安防監(jiān)控系統(tǒng)及門(mén)禁系統(tǒng)進(jìn)行集成，能展示所有視頻安防監(jiān)控點(diǎn)和門(mén)禁的位置，能查看人員歷史進(jìn)出信息、攝像頭實(shí)時(shí)視頻，對(duì)于故障和預(yù)警的設(shè)備還可以清楚直觀的在場(chǎng)景中展示出來(lái)。其中對(duì)于視頻流監(jiān)控 HTML5 原生僅支持 MP4、OGG等，并不能支持目前實(shí)時(shí)視頻流的 RTSP 等視頻的播放，常見(jiàn)的解決方式是可通過(guò)轉(zhuǎn)碼服務(wù)來(lái)實(shí)現(xiàn)在網(wǎng)頁(yè)上播放視頻。同時(shí)視門(mén)禁監(jiān)控還可以支持人臉識(shí)別（識(shí)別錯(cuò)誤抓拍記錄）進(jìn)出、刷卡進(jìn)出（非法刷卡抓拍記錄）乃至新興的視頻融合技術(shù)（采用貼圖+算法處理不規(guī)則形狀、視頻校正、色彩校正的方式實(shí)現(xiàn)），以此來(lái)達(dá)到場(chǎng)景中虛實(shí)結(jié)合一體化監(jiān)控的效果。
（6）預(yù)警告警
系統(tǒng)內(nèi)具有完善的故障預(yù)警告警、事件自診斷、分析等功能，對(duì)于超過(guò)性能閾值的性能指標(biāo)系統(tǒng)，能夠進(jìn)行故障告警或預(yù)警并通知相應(yīng)的運(yùn)維管理人員，并做到保存歷史信息和報(bào)警事件。
動(dòng)環(huán)監(jiān)控系統(tǒng)目的是為了將上述各自獨(dú)立又或部分關(guān)聯(lián)的設(shè)備監(jiān)控起來(lái)，實(shí)現(xiàn)了機(jī)房設(shè)備的集中統(tǒng)一管理。
圖撲軟件（Hightopo）的數(shù)據(jù)中心 3D 可視化系統(tǒng)將多種復(fù)雜的管理系統(tǒng)信息聚集在虛擬仿真環(huán)境下，以人類最直觀的理解形式展現(xiàn)，大幅度提升了信息交互和操控的效率，減少時(shí)間損耗和信息的浪費(fèi)，保證信息的及時(shí)性和準(zhǔn)確性。
繼而實(shí)現(xiàn)了數(shù)據(jù)中心端到端的 IT 可視化，強(qiáng)化 IT 管制手段和管理水平，包括縮短響應(yīng)時(shí)間加速排障，提升資源利用率和運(yùn)營(yíng)效率過(guò)程，最終完成對(duì)數(shù)據(jù)中心高效綠色智能化運(yùn)營(yíng)。由此為數(shù)據(jù)中心科學(xué)決策有效管理打下夯實(shí)的基礎(chǔ)。
當(dāng)然我們也更新了數(shù)百個(gè)2D/3D 可視化案例集，在這里你能發(fā)現(xiàn)許多新奇的實(shí)例：《分享數(shù)百個(gè) HT 工業(yè)互聯(lián)網(wǎng) 2D 3D 可視化應(yīng)用案例 》，有興趣的可以到 圖撲軟件 - 構(gòu)建先進(jìn) 2D 和 3D 可視化所需要的一切 官網(wǎng)查看更多行業(yè)可視化案例與申請(qǐng)?jiān)囉脋
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
