一种高效灵活可配置的物联网平台设计概述

2021-03-19

科学与信息化 2021年5期

中国煤炭地质总局航测遥感局陕西西安 710199

引言

在各个省份物联网政策的不断发布的背景下，北京、上海、广东、浙江等省市也不断制定物联网相关的政策与规划以促进地区物联网的发展[1]。在物联网行业的蓬勃使得多个行业与物联网的关系更加的紧密。目前以华为、阿里为代表的互联网企业都在积极加入物联网市场，各大厂商的云平台都提供了方便快捷的设备接入管理服务。

1 灵活可配置的数据展示

平台将设备重新进行统一定义，将设备抽象为一种通用的设备类型描述，设备类型包含设备属性、设备事件和设备指令。设备属性定义了设备的功能特点，比如，检测空气质量的传感器的设备属性可以定义空气的二氧化硫浓度、PM2.5指数等各种空气污染指标；设备事件为设备发送的指令类型，如，设备定时发送的传感器上报事件，定位终端定时上报的地理位置信息等；设备指令为平台向设备发送指令，如，发送ping命令来判断设备是否在线。

设备属性可以制定属性的数据类型，可通过下拉框的方式选择字符串、整型、浮点型、日期型等类型。

在为平台添加设备时会需要让用户填写设备的名称、标识符、描述、设备类型、元数据，设备类型就是用户创建的抽象设备，元数据是设备的一些基础信息，用户可以任意填写，如，设备的制造商、设备的报废期限、设备的资产归属等。

当设备添加完成后，在设备管理界面能够以数据表格的方式展示出当前用户添加的设备，数据表格展示了设备的名称、设备类型、设备状态、创建时间。点击数据表格的“设备名称”时，页面会路由到设备的详情页面，如下图所示。

设备的详情页面分为上下两部分，上部分采用可折叠面板组件展示设备的基本信息和元数据，展开其中一个面板时另一个面板会收起，提高了页面空间利用率。下部分采用页签组件展示设备的运行状态、数据管理和服务调用。

运行状态为当前设备的设备类型配置的设备属性，通过卡片的方式直观展示了当前设备属性的实时数据，在页面通过轮询后台接口获取设备属性的最新数据并渲染。数据管理为设备发送的数据记录，采用数据表格的方式展示，可以使用时间类型和发送时间的维度来查询历史数据。服务调用记录了平台主动向设备发送的指令记录，通过数据表格的方式展示。

每当设备类型需要显示的属性发生了变化，所有设备类型相关的设备均会一同做出相应调整。

设备分组功能提供了多个管理设备的维度，将设备按照功能、生产厂商、资产归属等维度进行划分，让用户可以方便快捷的从各个角度管理设备。设备分组可以创建子分组，即使设备分布在不同的分组中用户依然能够及时了解设备状态。

平台还为设备的数据展示提供了大屏数据展示功能，将设备位置分布、设备的在线比例、设备的指令信息吞吐量、设备分组等信息直接展示在页面上，使系统管理员能直观地了解到设备的位置分布和运行状态。

2 高效的元素渲染

用我们传统的开发模式，原生JS或jQuery操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程。在一次操作中，如果需要更新10个DOM节点，浏览器收到第一个DOM请求后并不知道还有9次更新操作，因此会马上执行流程，最终执行10次。例如，第一次计算完，紧接着下一个DOM更新请求，这个节点的坐标值就变了，前一次计算为无用功。计算DOM节点坐标值等都是白白浪费的性能。即使计算机硬件一直在迭代更新，操作DOM的代价仍旧是昂贵的，频繁操作还是会出现页面卡顿，影响用户体验。

虚拟DOM就是为了解决浏览器性能问题而被设计出来的。如前文所述，若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性附加到DOM树上，再进行后续操作，避免大量无谓的计算量。所以，用JS对象模拟DOM节点的好处是，页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制。

平台采用前后端分离的开发方式，前端框架采用VUE[2]，VUE是一种数据驱动用于构建用户界面的渐进式框架。有别于传统操作页面DOM的方式来渲染数据，由于将数据和视图的双向绑定只要数据发生了改变，页面元素也就直接发生改变。

平台采用基于es6的Promise的异步编程，所有接口都采用并行方式请求。在过去，很多使用jQuery的页面在异步调用接口请求都是一个接口等另一个接口，一个接口在另一个接口的回调中出发这样引起的“无限嵌套”情况。