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

鄭嘉怡 陳濤 齊世玲 朱東

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

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

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

文章編號(hào)：1009-3044（2021）25-0068-02

1引言

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

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

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

2.1ECharts

2.2 Vue技術(shù)

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

2.3 axios技術(shù)

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

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

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

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

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

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

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

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

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

5 結(jié)論

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

參考文獻(xiàn)：

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

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

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

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

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

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

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

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

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