郑嘉怡 陈涛 齐世玲 朱东

摘要：随着物联网技术的在快速发展，越来越多的智能制造企业不断地利用物联网技术来提高企业的发展速度。智能车间数据可视化系统是基于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.

【通联编辑：代影】