鄭嘉怡 陳濤 齊世玲 朱東
摘要:隨著物聯(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)編輯:代影】