基于ECharts的“綠色車間”監(jiān)控可視化研究

鄭菲 陳曉鳳 謝豆 劉文軍

摘要：隨著經(jīng)濟(jì)發(fā)展方式的轉(zhuǎn)變和物聯(lián)網(wǎng)、云計(jì)算和人工智能技術(shù)的發(fā)展，傳統(tǒng)生產(chǎn)車間逐漸開始向“綠色車間”轉(zhuǎn)變。“綠色車間”監(jiān)控可視化系統(tǒng)是一種基于ECharts的車間大數(shù)據(jù)可視化服務(wù)平臺(tái)，采用Spring Boot實(shí)現(xiàn)業(yè)務(wù)分層，采用Ajax實(shí)現(xiàn)后端動(dòng)態(tài)數(shù)據(jù)加載。通過ECharts實(shí)現(xiàn)對(duì)工廠情況監(jiān)測、設(shè)備狀態(tài)控制、室溫?cái)?shù)據(jù)讀取、氣體濃度統(tǒng)計(jì)分析等功能的動(dòng)態(tài)可視化呈現(xiàn)，為工廠提供更具有綠色、安全、節(jié)能的生產(chǎn)工作環(huán)境。

關(guān)鍵詞：綠色車間;監(jiān)控平臺(tái);數(shù)據(jù)可視化;ECharts

中圖分類號(hào)：TP399 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2020）18-0221-03

開放科學(xué)（資源服務(wù)）標(biāo)識(shí)碼（OSID）：

1 引言

綠色車間監(jiān)測系統(tǒng)是以生產(chǎn)車間安全、高效、節(jié)能為設(shè)計(jì)目標(biāo)，綜合運(yùn)用物聯(lián)網(wǎng)技術(shù)、軟件開發(fā)和云計(jì)算大數(shù)據(jù)技術(shù)，融合軟硬件開發(fā)和設(shè)計(jì)，實(shí)現(xiàn)車間智能化監(jiān)控的信息系統(tǒng)。采集的車間數(shù)據(jù)通過分析和合理的可視化手段進(jìn)展展示能夠方便用戶查看歷史數(shù)據(jù)及實(shí)時(shí)數(shù)據(jù)。相關(guān)文獻(xiàn)給出了智能車間監(jiān)測的前端實(shí)現(xiàn)方法。文獻(xiàn)[1]通過百度ECharts的特點(diǎn)及使用方法并分析在數(shù)據(jù)可視化中的應(yīng)用，文獻(xiàn)[2-4]探索了ECharts平臺(tái)的可視化開發(fā)方法，展示了結(jié)合Ajax技術(shù)實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)繪制，文獻(xiàn)[5]中介紹了可視化監(jiān)控系統(tǒng)需求分析，數(shù)據(jù)的實(shí)時(shí)采集、分析和處理是可視化檢測的重要流程。

車間智能監(jiān)控系統(tǒng)提供了良好的人機(jī)交互與展示界面，通過系統(tǒng)可以實(shí)現(xiàn)遠(yuǎn)程監(jiān)控。用戶可以設(shè)置環(huán)境質(zhì)量標(biāo)準(zhǔn)，通過可視化界面遠(yuǎn)程查看設(shè)備是否關(guān)閉，實(shí)現(xiàn)遠(yuǎn)程控制（設(shè)備）開關(guān)。同時(shí)，可視化圖表梳理數(shù)據(jù)，更容易洞察數(shù)據(jù)效益，提升管理水平?；贓Charts豐富的圖表展示獲取車間的各種參數(shù)指標(biāo)，可以直觀的反映出工廠實(shí)時(shí)情況，使管理者更好統(tǒng)籌工廠的生產(chǎn)經(jīng)營狀況，有助于提升科學(xué)決策水平。

系統(tǒng)可視化呈現(xiàn)綜合使用Vue和ECharts技術(shù)，Vue的使用實(shí)現(xiàn)了前后端分離，在代碼上做到更好的控制和流暢，ECharts的使用提供了豐富的交互功能和直觀生動(dòng)可視化效果。在數(shù)據(jù)流方面，前端通過Ajax技術(shù)異步調(diào)用方式動(dòng)態(tài)讀取數(shù)據(jù)庫，將數(shù)據(jù)以儀表盤、柱形圖等各種圖形界面呈現(xiàn)在頁面中。此外，為了提升開發(fā)效率，通過第三方視頻平臺(tái)接人視頻流，將工廠實(shí)時(shí)監(jiān)控接人平臺(tái)。利用視覺對(duì)圖形、顏色的快速感知，為用戶提供更高效的信息獲取方式。

2 相關(guān)技術(shù)

2.1 ECharts

ECharts是一款流行的開源可視化圖表設(shè)計(jì)工具，由百度公司推出，具有易于使用，輕便靈活，表現(xiàn)力強(qiáng)等典型特點(diǎn)。ECharts的使用首先在官網(wǎng)上選擇合適的下載版本，隨后引入echarts文件，即。其次，繪制一個(gè)簡單的圖表，即準(zhǔn)備一個(gè)DOM容器，如

。最后，編寫Javas-cript腳本，通過該腳本完成以下工作，其繪制過程如圖l所示。

2.2 Vue技術(shù)

Vue是一種基于JavaScript的用于構(gòu)建分層開發(fā)中構(gòu)建Web頁面的漸進(jìn)式框架。Vue采用自底向上的設(shè)計(jì)思想，特別關(guān)注視圖層，通過與其他第三方框架組合使用，提供快速構(gòu)建前端頁面的能力。Vue的使用首先推薦在瀏覽器上下載VueDevtools，在運(yùn)行出問題的時(shí)候可以在界面上更好的審查和調(diào)試。由于Vue項(xiàng)目依賴node.js npm需要先安裝，再安裝Vue，即cnpm install -g vue-cli，這里的安裝使用了淘寶鏡像來加快安裝速度。最后通過vue init webpack my-vue完成項(xiàng)目創(chuàng)建。

2.3 Ajax技術(shù)

Ajax是一種廣泛使用的用于創(chuàng)建快速動(dòng)態(tài)交互式網(wǎng)頁的技術(shù)。Ajax提供異步通信功能，實(shí)現(xiàn)高效的數(shù)據(jù)請(qǐng)求和傳遞，在前臺(tái)頁面和后臺(tái)服務(wù)器之間進(jìn)行數(shù)據(jù)交換，在不重新加載整個(gè)網(wǎng)頁情況下進(jìn)行網(wǎng)頁部分更新，以此提供良好的用戶體驗(yàn)。其主要工作流程如圖2所示下：

3 系統(tǒng)設(shè)計(jì)

3.1 功能設(shè)計(jì)

該數(shù)據(jù)平臺(tái)功能包括實(shí)時(shí)運(yùn)行工況、在線操作設(shè)備、現(xiàn)場監(jiān)測和環(huán)境監(jiān)測，其中在線操作可控制通風(fēng)扇、聲光報(bào)警器、照明燈等設(shè)備開關(guān)以及查看攝像頭等設(shè)備所在狀態(tài);現(xiàn)場監(jiān)測包括視頻數(shù)據(jù)及氣體流量傳感器、壓力傳感器、位移傳感器、溫度傳感器、測速傳感器、角度傳感器、液位傳感器等設(shè)備信息;環(huán)境監(jiān)測則包括車間中溫濕度傳感器、可燃性氣體傳感器、光照傳感器、PM2.5等數(shù)據(jù)信息。具體如圖3所示。

這些功能通過儀表盤、數(shù)據(jù)集、象柱狀圖等多種方式呈現(xiàn)，提供給用戶一種友好的交互界面。

3.2 數(shù)據(jù)調(diào)用

本文“綠色車間”監(jiān)控可視化服務(wù)平臺(tái)基于Spring Boot框架開發(fā)，采用前后端分離模式使對(duì)服務(wù)器的壓力減小到最小，后臺(tái)錯(cuò)誤也不會(huì)直接影響到前臺(tái)，這種前后端各盡其職能最大程度上減少開發(fā)難度，降低維護(hù)成本。采集的車間數(shù)據(jù)需要長久保存以方便進(jìn)行即時(shí)查詢?cè)L問和后期的趨勢分析，根據(jù)實(shí)際需要可以采用關(guān)系型數(shù)據(jù)庫，如SQL Server.或文件式數(shù)據(jù)庫，如JSon。在視圖層組合使用Ajax和ECharts來實(shí)現(xiàn)前后端數(shù)據(jù)的交互并完成各種圖表的頁面呈現(xiàn)。此系統(tǒng)數(shù)據(jù)采集節(jié)點(diǎn)實(shí)現(xiàn)方法分三類：

1.NB-IoT數(shù)據(jù)采集節(jié)點(diǎn)，適合于對(duì)于需要遠(yuǎn)程進(jìn)行數(shù)據(jù)統(tǒng)計(jì)監(jiān)控，且傳輸?shù)臄?shù)據(jù)量不高的情況，如儀表類監(jiān)測。直接把數(shù)據(jù)發(fā)送到華為OceanConnect平臺(tái)，再把數(shù)據(jù)轉(zhuǎn)發(fā)到自定義服務(wù)器平臺(tái)。

2.RS485、Zigbee數(shù)據(jù)采集節(jié)點(diǎn)，主要采集環(huán)境監(jiān)測傳感器的數(shù)據(jù)，將采集到的數(shù)據(jù)按照統(tǒng)一的數(shù)據(jù)通訊協(xié)議進(jìn)行封裝后傳送到智能網(wǎng)關(guān)，最后傳輸?shù)綌?shù)據(jù)平臺(tái)。

3.視頻影像數(shù)據(jù)節(jié)點(diǎn)，主要獲取車間設(shè)備實(shí)時(shí)運(yùn)轉(zhuǎn)和環(huán)境影像數(shù)據(jù)。通過4G/5G等方式進(jìn)行傳輸。特別地，在本地完成數(shù)據(jù)的預(yù)處理以降低通信開銷。