基于Web的吸油烟机能效计量测试软件的设计与实现

杨雷 刘汉阳 王奎 孔繁海 / 山东省计量科学研究院

0 引言

随着大数据和物联网技术的发展，测试设备的远程连接、集中管理以及数据可视化成为一个趋势。家电能效计量实验室涉及的检测项目多，设备功能差异大，实验室检测过程智能化中面临着设备接口和数据格式不统一等问题，进而造成了业务受理与样品管理、样品测试的脱节，实验室电子原始数据往往无法纳入机构内部控制系统中。

为了解决上述问题，本文以吸油烟机能效计量测试系统为突破口，采用B/S架构对现有测试设备软件重新设计开发。在实现基本测试功能前提下，拓展设备的网络控制功能，具有良好的人机界面和数据交互能力，为家电性能检测实验室的多系统数据融合和检测过程智能化提供思路和可行的技术方案。

1 系统架构设计

空气性能试验是吸油烟机能效计量的一个重要项目，也是吸油烟机能效标识中全压效率的数据来源。目前,国内的主要测试设备均使用基于计算机的专用软件进行设备的数据采集和计算，功能较为单一。主要测量参数包括电压、电流、功率、温度、湿度、大气压力和筒内静压。根据上述7个参数的测量结果，配合孔板参数、设备系数、拟合算法，最终计算出被测样品的风量和全压效率等技术指标。系统硬件结构如图1所示。由多路显示仪与电参表将测量参数通过串口传输给计算机。

图1 系统硬件结构

新的测试软件使用Web技术开发,整体架构如图2所示，主要包括三个部分：Web客户端、服务器端和测试设备端。三部分通过网络连接进行信息数据交互。其中Web客户端作为人机接口，主要进行设备参数的配置和运行控制，同时进行实时/历史数据的展示渲染。

图2 基于web的测量系统原理

为了降低服务器端的负担，切分视图与业务逻辑间的关联，防止个别测试设备故障造成系统下线，将服务器端分为三个模块：Web服务、测控服务和数据库。为了降低开发难度，Web服务使用Flask框架，一方面向前端提供页面数据，另一方面作为中介，转发前端与测控服务间的交互数据。测控服务主要负责测试设备运行、数据采集处理、存储等功能，同时对前端发送的指令进行响应。两个服务之间也是通过网络协议进行双向数据通信。

本系统中，数据库使用了MySQL进行采样数据的存储，同时，前端通过Web服务进行数据库的维护和信息管理。

采用图2中的架构，可以方便地组织各功能模块，数据库、Web服务和测控服务可以部署在同一台计算机上，也可以根据现场需求，部署在不同的计算机上，利于功能扩展和系统稳定性。同时本系统基于B/S架构，所有应用功能，都通过浏览器网页呈现，具有无需安装、平台无关性的优点，因此，通过任意操作系统，终端都可以访问本系统进行相关操作。

2 前、后端功能设计及实现

为了实现上述架构，主要的开发工作集中在各业务功能的实现、数据传输和存储格式设计，以及各功能模块的信息交互等三个方面。系统开发采用前、后端分离模式。按照功能划分，前端分为4个模块，后端分为两个模块，具体划分方式如图3所示。

图3 前、后端功能划分

前端功能是实现人机界面，向操作人员提供仪器控制的图形接口，并进行数据展示。为了拓展系统使用范围，增加了用户登录功能，可根据不同用户权限，展示不同的操作页面，操作不同的测量设备等。前端功能的实现使用了Vue框架，配合Element组件库实现页面布局和数据渲染，使用ECharts可视化图表库进行数据曲线的绘制，并使用socket.io-client，接收WebSocket（是一种在单个TCP连接上进行全双工通信的协议）数据。

后端Web服务主要功能是实现简单的页面路由和数据中转，并对用户权限进行验证和管理。本系统采用了轻量级的Flask框架进行开发，配合Flask-SocketIO模块，实现WebSocket的双向通信功能。为了保证每一个设备同时由一名人员进行操作，采用“先入为主”的控制逻辑，第一个具有操作权限的人员控制该设备后，后续登录的其他人员只能以观察者的身份监控设备状态，而不能操作。操作者、观察者及设备注册到相同的Room中，保证不同测试项目间数据交互的隔离。

测控服务主要功能为控制测试主流程、维护设备配置参数、数据推送。该部分使用python语言编写，采用多线程技术实现系统控制、数据采集、通信三个主要功能。软件启动后，首先进行初始参数的设置，包括设备默认参数的加载、全局数据队列的初始化等。然后软件开始启动Socket.IO客户端并尝试连接Web服务，如果连接成功，系统向Web服务发送设备信息，并进入就绪等待状态；如连接不成功，输出程序启动错误信息。测控服务启动流程如图4所示。

图4 测控服务启动流程

进入就绪状态后，测控服务监听Web服务发送的消息，并根据消息进行相应操作，包括数据的采集和测试状态维护两个主要功能，其流程如图5所示。本系统的数据采集功能是循环读取两个串口设备。电参表和多路显示仪均使用了Modbus协议，python中有专门的库进行操作。

图5 测试功能流程

系统在进入指令等待状态后，如果前端操作员登录，并选择该设备，前端将向测控服务发送“测试加载”指令，测控服务会开启一个线程，对串口数据进行采集，并验证该设备是否联机正常。若数据正常，开始循环采集，并将采集的数据按照自定义的格式存入全局变量。当测控服务收到“开始测试”指令时首先将前端发送来的配置参数进行设置，然后按照采样周期，定时循环读取采集的数据变量，并将数据添加时间戳后存入数据库，同时向前端推送该数据。其流程如图5所示。

3 前后端通信及测控服务通信的实现

系统中各模块之间的数据交互是重点开发内容之一。包括前端与Web服务间的通信、Web服务与测控服务间的通信、后端服务与数据库间的通信、测控服务与测量设备间的通信。其中，与数据库的通信本质为socket通信，测控服务与测量设备间的通信采用Modbus协议，也相对简单。前两项由于可选择的技术方案较多，数据格式需要自定义，且需双向通信，情况比较复杂。

前后端之间进行通信一般采用网页端发出AJAX请求，服务器端做出响应。在本系统中，除了前端请求数据，后端也需要主动将实时采集的数据发送到前端。为了实现网页与服务端实时双向通信，一般有两种方式：一是不断通过客户端发送请求，服务端响应，且性能较低。另外一种即使用WebSocket通信技术。浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，允许服务端主动向客户端推送数据，实时性更强，有超时重连和心跳机制，数据传输更加稳定可靠，并且支持二进制传输。连接创建后，WebSocket客户端、服务端进行数据交换时，协议控制的数据包头部较小。在不包含头部的情况下，服务端到客户端的帧头只有2～10字节，客户端到服务端需要加上额外的4字节的掩码。控制开销小，传输效率高。

为了满足本系统的需求，服务器与前端之间，使用WebSocket与axios进行页面数据请求与测试数据的推送。

前端在Vue框架下，虽然支持WebSocket的原生方法，在后端Flask框架下，一般使用Socket.IO作为WebSocket的实现。但Socket.IO只是将WebSocket和轮询机制以及其他的实时通信方式封装成了通用的接口，并且在服务端实现了这些实时机制的相应代码。因此，WebSocket客户端连接不上Socket.IO服务端，同样Socket.IO客户端也连接不上WebSocket服务端。因此，为了能够实现前、后端通信，前端必须使用vue-socket.io插件。

4 软件界面布局及主要功能

根据前端功能要求，使用Element组件库进行了页面开发。页面如图6所示。为了降低开发难度，本页面采用常规后台管理系统的页面结构，对显示内容进行了简单布局。

图6 测试系统页面

目前，本系统仅开发了测试功能页面，后期将在测试功能完善的基础上，对接上下游业务，实现检测业务的全流程一体化平台。

5 结语

本系统在吸油烟机空气性能测试实验中，能够实现全部测试功能，前、后端数据交互流畅，界面操作简单稳定，且跨平台使用十分简便。系统的各软件功能耦合性低、复用性强，后期可以在此框架下仅增加测控服务的功能，就可以实现更多测试项目。同时也可以扩展前端功能，实现与任务受理、报告出具等业务的无缝衔接。