基于ECharts的“綠色車間”監控可視化研究

鄭菲 陳曉鳳 謝豆 劉文軍

摘要：隨著經濟發展方式的轉變和物聯網、云計算和人工智能技術的發展，傳統生產車間逐漸開始向“綠色車間”轉變?！熬G色車間”監控可視化系統是一種基于ECharts的車間大數據可視化服務平臺，采用Spring Boot實現業務分層，采用Ajax實現后端動態數據加載。通過ECharts實現對工廠情況監測、設備狀態控制、室溫數據讀取、氣體濃度統計分析等功能的動態可視化呈現，為工廠提供更具有綠色、安全、節能的生產工作環境。

關鍵詞：綠色車間;監控平臺;數據可視化;ECharts

中圖分類號：TP399 文獻標識碼：A

文章編號：1009-3044（2020）18-0221-03

開放科學（資源服務）標識碼（OSID）：

1 引言

綠色車間監測系統是以生產車間安全、高效、節能為設計目標，綜合運用物聯網技術、軟件開發和云計算大數據技術，融合軟硬件開發和設計，實現車間智能化監控的信息系統。采集的車間數據通過分析和合理的可視化手段進展展示能夠方便用戶查看歷史數據及實時數據。相關文獻給出了智能車間監測的前端實現方法。文獻[1]通過百度ECharts的特點及使用方法并分析在數據可視化中的應用，文獻[2-4]探索了ECharts平臺的可視化開發方法，展示了結合Ajax技術實現動態數據繪制，文獻[5]中介紹了可視化監控系統需求分析，數據的實時采集、分析和處理是可視化檢測的重要流程。

車間智能監控系統提供了良好的人機交互與展示界面，通過系統可以實現遠程監控。用戶可以設置環境質量標準，通過可視化界面遠程查看設備是否關閉，實現遠程控制（設備）開關。同時，可視化圖表梳理數據，更容易洞察數據效益，提升管理水平。基于ECharts豐富的圖表展示獲取車間的各種參數指標，可以直觀的反映出工廠實時情況，使管理者更好統籌工廠的生產經營狀況，有助于提升科學決策水平。

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

2 相關技術

2.1 ECharts

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

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

2.2 Vue技術

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

2.3 Ajax技術

Ajax是一種廣泛使用的用于創建快速動態交互式網頁的技術。Ajax提供異步通信功能，實現高效的數據請求和傳遞，在前臺頁面和后臺服務器之間進行數據交換，在不重新加載整個網頁情況下進行網頁部分更新，以此提供良好的用戶體驗。其主要工作流程如圖2所示下：

3 系統設計

3.1 功能設計

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

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

3.2 數據調用

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

1.NB-IoT數據采集節點，適合于對于需要遠程進行數據統計監控，且傳輸的數據量不高的情況，如儀表類監測。直接把數據發送到華為OceanConnect平臺，再把數據轉發到自定義服務器平臺。

2.RS485、Zigbee數據采集節點，主要采集環境監測傳感器的數據，將采集到的數據按照統一的數據通訊協議進行封裝后傳送到智能網關，最后傳輸到數據平臺。

3.視頻影像數據節點，主要獲取車間設備實時運轉和環境影像數據。通過4G/5G等方式進行傳輸。特別地，在本地完成數據的預處理以降低通信開銷。