近年来, 随着国家经济结构的转型, 推动经济高质量发展, 对于环境问题越来越重视. 而空气污染依旧经是环境保护中的一个顽疾, 空气质量的优劣直接关系到人民的日常生活, 对人们的健康有着直接的影响, 能否获取空气质量相关最新的信息, 对人们来说越来越重要^[1]. 许多国内外学者进行了相关系统的开发与研究分析. 史姣姣等建立了基于物联网的PM_2.5监测系统, 实现了硬件设计与针对PM_2.5在线监测Web平台, 实现了手机实时查看与统计分析^[2]. 程家盼实现了基于GIS技术的空气质量数据可视化, 采用先进的AcrGIS平台对空气质量监测数据进行可视化研究^[3]. 周剑等设计并实现了基于多种交互方式的分布式空气质量监测系统, 构建了云端数据交互、三维可视化交互等模块^[4]. 然而这些空气数据监测或可视化系统要么数据过于单一, 要么对于数据未能实时可视化.

同时, 各种软件架构更新迭代造成了巨大的资源浪费, 为了降低软件产品的耦合性, 各种微服务框架应运而生^[5]. 因此采用了目前国内外最流行的微服务框架Spring Boot来进行本系统的搭建. 同时系统使用Vue来实现前端页面开发, Vue支持双向数据绑定, 可以使用Axios实现复杂的逻辑交互, 实现了系统对于数据实时监控管理与实时可视化的需求^[6].

本系统主要针对传输到云端的空气数据的进行监控管理与可视化开发而搭建. 数据由空气监测无线传感器设备进行在线采集, 采用自定义协议长连接实现传输, 云端再接收、读取、解析. 将解析完的最新数据缓存到Redis数据库, 每天固定时间再存储到MySQL数据库中. 如发生失误导致信息未能及时上传, 恢复通信后也会补传数据. Redis数据库与MySQL数据库结合作为数据存储的载体, 不仅保证数据的不丢失、不冗余, 同时也是本系统业务逻辑的承载体, 是系统的核心组成部分^[7]. 系统数据库解析存储的空气数据有: 细颗粒物(PM_2.5)、可吸入颗粒物(PM₁₀)、二氧化硫(SO₂)、二氧化氮(NO₂)、一氧化碳(CO)、臭氧(O₃)、温度、湿度、甲醛等. 空气质量数据库表设计如表1.

表 1(Table 1)

表 1 空气质量数据库表设计 名 类型 注释 DEVICE_CODE varchar 设备标识码 COLLECT_TIME datetime 采集时间 SIM varchar SIM卡号 PM1_0 int PM1.0 PM2_5 int PM2.5 PM10 int PM10 FORMALDEHYDE float 甲醛0.00–9.99 TEMPERATURE int 温度 HUMIDITY int 湿度 CO int 一氧化碳 CO2 int 二氧化碳 NO int 一氧化氮 NO2 int 二氧化氮 O3 int 臭氧留 SO2 int 二氧化硫 TVOC int 有机气态物质 WIND_SPEED int 风速 WIND_DIRECTION int 风向 LONGITUDE float 经度 LATITUDE float 纬度 ELECTRICITY int 太阳能电源电量

表 1 空气质量数据库表设计

Spring Boot微服务实际上是大量开源库的集合, 自配Tomcat, Jetty容器, 无需部署WAR包只需在pom.xml中写好相关依赖, 减少了系统开发的繁琐^[8]. Spring Boot框架下有着完善的MVC设计模型支持, 对于项目的配置工作采用自动化配置的方式, 使得在Spring Boot环境下进行MVC模式的开发变得尤为简单^[9]. Spring Boot还提供REST获取进程运作期参数来进行监控, 本系统主要为GET、POST、DELETE等分别用于获取资源、新建资源、删除资源等. 本系统需要对MySQL数据库的增删查等操作, 所以系统使用MyBatis编写SQL语句来实现, 采用JDBC与数据库建立连接^[10].

前端Vue框架是一款渐进式MVVM框架, 使用node.js技术, 安卓vue-cli脚手架构建工具, 由vue-router配置路由, 使用Axios插件封装的Ajax进行数据交互, 实现数据持久化, 保证良好的用户交互体验^[11].

目前国内外各大互联网公司均推出了各自的地理信息服务平台, 如高德地图、百度地图、谷歌地图等^[12]. 考虑本系统开发环境、功能需求等因素, 采用百度地图作为数据可视化开发的重要平台. 百度地图API是百度公司免费开放的一系列地图服务接口, 开发者在获得接口使用权限后即可在自己的系统中使用地图服务^[13]. 本系统可视化开发需要百度地图API提供的热力图、覆盖物类等功能来完成.

在阿里云官网上申请账号, 就能拥有自己的云主机, 并可以进行属于自己的相关部署, 例如安全规则等, 然后就可以对外服务. 通过MobaXterm工具连接阿里云服务器, 安装JDK、Tomacat等相关配置, 搭建好的Web项目, 将打包好的.war文件上传到Tomcat的webapps文件夹下, 在浏览器中连接公网IP, 即可访问已部署好的Web项目^[14].

本系统的前端实现数据监控下载、报警管理、百度地图可视化的页面. 后端主要包括API接口、数据库操作模块、采集到的云端数据. 用户可以直接通过node.js发出各种指令, 如: 查询数据、删除数据等. 后端根据请求内容对存储在数据库中的云端空气质量数据进行读写操作, 并将请求结果返回页面, 然后页面进行更新. 通过Axios封装的Ajax技术作为中间层实现前后端请求响应与数据交互, 使用JavaScript向后端发出请求并处理响应, 通过XML与HTTPRequest对象可以在不重载页面的情况下实现前后端数据交互^[15]. 中间层的存在, 实现了前后端分离. 系统总体框架如图1.

本系统中数据交互模块是非常重要的一部分, Axios插件中封装的Ajax技术使用前端技术来实现数据交互(请求-获取-处理的过程), 在实现前后端分离后, 后端更专注于业务逻辑和数据处理^[16]. Spring Boot框架完全支持REST开发规范, 通过“@RestController”注解的使用即可实现对控制器的声明和响应, 将系统的数据格式自动转化为JSON格式^[17]. 数据真正的交互在于这个JSON数据的请求和返回. JSON的本质是JS对象以键值对呈现的字符串. 而“@RequestMapping(value="/device", method={RequestMethod.DELETE, RequestMethod.GET, RequestMethod.POST, RequestMethod.PUT}, produces={"application/json;charset=UTF-8"})”注释是用来限制整个类中的请求方法和定义类的URL. 表2为本系统定义的部分API接口信息列表.

图 1

Fig. 1

图 1 系统总体框架图

Ajax以轮询的方式实现使用异步调用, 传递数据方式主要有两种: GET是从后端获取要渲染的数据, 而POST则是向后端传递要添加或者处理过的数据. 前端拿到传递过来的JSON数据, 因为后端有一个对象转化为JSON字符串的过程, 所以JSON数据传递到前端后, 也有一个数据解析/解读的过程^[18]. 应用解析好的数据, 页面进行内容填充或者局部动态更新. 反过来前端向后端传递改变的数据, 也会打包成JSON字符串形式, 后端再进行响应与数据解析, 再完成对数据库的读写操作.

表 2(Table 2)

表 2 部分API接口信息表 Controller接口 URL 功能 DeviceController /device/getAllLatestDevice 查询Device表最新 上报数据 DeviceController /device/deleteOneDevice/{id} 删除在Device表此 id的全部数据 DeviceController /device/insertOneDevice 在Device表增加 一组数据 DeviceController /device/queryDeviceByUser AndTime 在Device表根据用户名和时间查询 设备信息 ReportController /report/getAllReportBy DeviceCode 根据设备号查询 全部数据 DayController /day/queryOneDay 查询最新15条日均值 HourController /hour/queryOneHour 查询最新15条时均值

表 2 部分API接口信息表

出于对业务需求的分析, 系统需要实现多个功能来完成对数据的实时监控管理与可视化开发. 主要实现的功能为: 数据监控下载、报警管理以及百度地图可视化. 在浏览器中连接相应的公网IP地址, 用户就可以看到系统功能页面的实现, 从而进行使用.

(1)数据监控实现

系统需要对云端的数据实现监控管理, 输入想要查看的设备号, 前端通过GET请求获取到全部云端空气质量数据, 在浏览器的页面通过表格的样式进行渲染, 表格随的数据更新不断刷新. 使得用户更加清晰观察数据更新状态. 实现效果如图2所示.

图 2

Fig. 2

图 2 数据监控图

(2)数据下载实现

系统拥有对云端的数据进行备份下载的功能, 输入要下载数据信息(即设备号、时间段), 查看点击确定后便可选择下载, 页面实现效果如图3所示.

(3)报警管理实现

系统需要对上传云端数据状态进行监控, 通过查询设备最新数据上传的时间与上一次上传的之间间隔确定上传数据的状态, 如果超过15分钟依然未有新的上传数据, 该设备ID将被标红. 用户可以对报警的设备进行管理, 可以删除或许修改信息. 页面每隔3分钟刷新一次, 实现方法为: window.setInterval(code, 180 000). 实现效果如图4所示.

图 3

Fig. 3

图 3 数据下载图

图 4

Fig. 4

图 4 报警管理图

(4)百度地图可视化实现

百度地图可视化是本系统主要的可视化展示方式, 百度地图API提供了向地图添加自定义标注覆盖物的功能^[19]. 开发通过移除旧标注的“removeOverlay方法”和添加新标注的“addOverlay方法”来实现设备与数据值报警百度地图可视化. 用标注颜色来反映设备上传数据的状态或监测的数据超标情况, 页面也是每隔3分钟刷新一次. 百度地图报警可视化页面如图5所示.

同时百度地图提供了热力图这一非常流行的地图可视化功能, 其主要就是将要素密集程度用特殊而高亮的方式来展示, 叠加在网络地图上的不同颜色来描述该地区中空气污染分布情况^[20], 本系统中紫色表示空气污染程度最深、橙色次之、绿色表示程度最轻, 每隔3分钟刷新一次页面. 其中PM_2.5热力图可视化页面实现效果如图6所示.

图 5

Fig. 5

图 5 地图报警可视化

图 6

Fig. 6

图 6 PM2.5热力图可视化

本文虽然初步搭建起了对云端数据实时监控管理与可视化应用系统, 但本系统对采集的空气数据可视化处理还不够完善, 可以尝试使用R语言或Python等强大的数据处理分析语言进行更多的可视化分析. 该系统是一项网络化、高效化、现代化的数据管理与可视化展示平台, 在其构建并成功运行的过程中, 认识学习了很多相关技术知识, 为后续开发工作打下基础.