基于Echarts的智能車間數(shù)據(jù)可視化系統(tǒng)

鄭嘉怡 陳濤 齊世玲 朱東

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

關鍵詞：物聯(lián)網(wǎng);智能車間;可視化;Echarts

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

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

1引言

智能車間數(shù)據(jù)可視化系統(tǒng)是以生產(chǎn)車間為基礎，融入物聯(lián)網(wǎng)的特性，對生產(chǎn)車間的環(huán)境、設備以及相關信息以及其他功能進行有效的結合，可以對生產(chǎn)環(huán)境以及設備達到更高的集中控制。

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

2相關技術

2.1ECharts

2.2 Vue技術

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

2.3 axios技術

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

3系統(tǒng)設計

3.1功能設計

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

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

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

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

4 系統(tǒng)實現(xiàn)

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

5 結論

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

參考文獻：

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

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

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

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

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

[6] 林瀟.移動web端網(wǎng)站無障礙人工檢測系統(tǒng)的設計與實現(xiàn)[D].杭州：浙江大學，2018.

[7]周少波.基于SSM框架的數(shù)據(jù)采集系統(tǒng)的設計與實現(xiàn)[J].電腦知識與技術，2018，14（34）：45-47.

[8] 劉斌.基于物聯(lián)網(wǎng)的設施果蔬監(jiān)控系統(tǒng)的設計與應用[D].長春：吉林農(nóng)業(yè)大學，2019.

【通聯(lián)編輯：代影】