基于Echarts的智能車間數據可視化系統

鄭嘉怡 陳濤 齊世玲 朱東

摘要：隨著物聯網技術的在快速發展，越來越多的智能制造企業不斷地利用物聯網技術來提高企業的發展速度。智能車間數據可視化系統是基于ECharts對車間內傳感數據進行可視化的服務管理平臺，系統的前端開發所采取的是vue+Echarts的方式對后端傳遞的數據進行展示，同時車間管理者可根據所展示的數據實時查看車間的設備以及環境情況，后端使用Spring boot實現業務的分級管理。基于Echarts的前端可以實現對工廠情況的實時監測、設備狀態控制以及其他相關信息的分析并進行可視化展示，為車間提供更加安全、高效的生產環境。

關鍵詞：物聯網;智能車間;可視化;Echarts

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

文章編號：1009-3044（2021）25-0068-02

1引言

智能車間數據可視化系統是以生產車間為基礎，融入物聯網的特性，對生產車間的環境、設備以及相關信息以及其他功能進行有效的結合，可以對生產環境以及設備達到更高的集中控制。

智能車間利用物聯網技術對生產車間進行實時的狀態監測和設備管理，減少安全隱患，從而降低管理人員的工作量，極大提高產品的生產效率和質量。智能車間利用傳感技術以及其他技術對車間內的環境以及設備數據進行采集、分析、判斷、規劃，最后通過可視化的方式對數據進行展示。使用者可以通過可視化界面查看車間環境數據以及設備的在線狀態，通過可視化表的梳理以及整理，管理者可以更容易的分析車間的運作狀態是否正常，提高了管理者對車間的監管水平。本系統可視化功能綜合使用了vue和Echarts技術等技術，其中使用Echarts是由于它能夠提供豐富的交互功能以及直觀的可視化效果。而前端通過利用axios技術異步調用的方式可以動態讀取后端處理后的數據，再將數據以柱狀圖、折線圖等各種圖形界面展示。

2相關技術

2.1ECharts

2.2 Vue技術

Vue是一個漸進式開發框架，非常適用于構建用戶界面。Vue開發方式主要是從下往上的增量開發，主要關注于圖層的設計，這一點與其他重量級框架不同。由于Vue的ECMAScript 5特性是IE8無法模擬的，所以Vue不再對IE8及其以下的瀏覽器進行兼容。Vue不僅易于開發者開發以及相關操作還能夠與第三方庫以及其他項目進行融合。Vue最被推崇的是在瀏覽器上下載VueDevtools，當程序運行出現問題時也能夠在瀏覽器界面上進行相關的調試或者修改等工作。

2.3 axios技術

axios是基于promise的 HTTP庫，我們能夠在不同瀏覽器以及node.js 中輕松使用。axios還支持瀏覽器、node.js以及promise攔截請求和響應、能轉換請求和響應數據，以及能夠取消請求、自動轉換后端傳來的JSON數據、跨站請求偽造等。

3系統設計

3.1功能設計

本系統平臺主要對車間內的基本環境信息以及車間內的設備狀態進行實時的監測管理，車間內傳感器設備有溫度傳感器、位移傳感器、濕度傳感器、測速傳感器、角度傳感器、PM2.5等數據傳感信息，具體如圖2所示。傳感器設備獲取到相關的數據后，智能網關通過通信協議解析數據后上傳至云端數據庫，后端對云端數據進行分析后將數據打包成json數據傳給前端，前端再根據獲取到的后端數據通過儀表盤、數據集等方式對數據進行展現。

3.2 數據調用技術

本系統所采用的開發框架是基于Spring Boot開發的，本系統的開發設計不僅繼承了Spring框架原有框架的優點以及相關的特性，并且還通過簡化相關的配置來進一步優化整個項目的搭建以及開發過程。

本系統采用前后端分離模式的方式來進行系統開發，利用前后端分離開發的模式能夠在一定程度上減少開發的難度，還能夠減少數據的冗余提高系統的運行速率。本系統后端所使用的數據庫為MySQL，在前端視圖層中所采取axios和ECharts來完成前后端數據的交互以及數據的展示等功能。本系統前端的設計是基于最新的MVVM架構。MVVM 就是將架構中的View 的狀態、行為進行抽象化，這樣能夠使項目中的視圖UI與業務邏輯進行分開開發，同時開發者也能更好地進行系統開發以及系統的維護工作。它不僅融合了WPF的新特性而且還基于最開始的MVP框架，以便于能更好地應對日后客戶需求變化。開發者可以利用Vue.js雙向數據綁定的特點，可以快速提高前端平臺的開發效率。

4 系統實現

智能車間數據可視化服務平臺通過傳感器對車間內的相關環境參數以及設備參數進行采集，智能網關對傳感器所獲取到的數據進行解析并封裝成統一格式發送至云端，此時前端將通過可視化的方式對車間內的環境以及設備等相關數據進行展示，利用經典的圖例模型來展示所獲取到的數據。平臺利用傳感器設備對車間相關設備進行實時監控，例如可監測設備的位移、速度等以及車間溫度等。其中部分重要數據會通過圖表動態方式展示。智能車間數據可視化平臺如圖3所示。

5 結論

針對企業對智能車間監測系統的需求，給出了一套基于ECharts的車間數據可視化設計方案。在車間數據監測平臺中，首先根據企業的實際需求前端通過利用ECharts組件來完成折線圖、餅圖等多種形式對數據進行數據的展示，有利于管理者對工廠內各個監測數據信息進行實時的查看以及實時、有效地對車間進行管理。在智能車間數據可視化監控平臺中前端可視化開發綜合運用axios等技術，更好地滿足了應用需求。前端可以對數據進行展示，后端采用分層的方法進行設計使模塊之間的耦合性高，并且開發者后期可以更好地對項目進行維護，平臺總體運行穩定。

參考文獻：

[1] 鄭幸源，洪親，蔡堅勇，等.基于AJAX異步傳輸技術與Echarts3技術的動態數據繪圖實現[J].軟件導刊，2017，16（3）：143-145.

[2] 湯曉燕，劉文軍，朱東，等.基于ECharts的電動汽車監控可視化研究[J].現代信息科技，2018，2（12）：46-48.

[3] 邱銘.基于無人機移動邊緣計算的軟件定義網絡架構分析[J].電子世界，2020（5）：62-63.

[4] 胡玉蘭，張浩巖.基于ZigBee目標檢測物聯網網關設計研究[J].信息技術與信息化，2021（1）：183-185.

[5] 鄭菲，陳曉鳳，謝豆，等.基于ECharts的“綠色車間”監控可視化研究[J].電腦知識與技術，2020，16（18）：221-223.

[6] 林瀟.移動web端網站無障礙人工檢測系統的設計與實現[D].杭州：浙江大學，2018.

[7]周少波.基于SSM框架的數據采集系統的設計與實現[J].電腦知識與技術，2018，14（34）：45-47.

[8] 劉斌.基于物聯網的設施果蔬監控系統的設計與應用[D].長春：吉林農業大學，2019.

【通聯編輯：代影】