智能室内空气质量监测预警系统小程序设计说明书

• 一、应用功能与系统设计

（一） 应用功能

该小程序设计的目的是为了配合环境监测吸顶灯,Mini空气监测仪等硬件设备实时数据展示与远程设备控制等功能，系统框架图如图1-1所示。用户可以从小程序查看各个监测设备采集到的空气质量参数，如温度、湿度、二氧化碳、甲醛、TVOC浓度等，并以图表或者仪表盘等形式展示。用户可以对各个监测设备进行远程控制，如开关设备、调节灯光、调节散热风扇以提高检测空气的精准度等。

图1-1  系统框架图

（二）系统设计

图1-2展示了本应用系统小程序的系统框架，系统由一个一级页面和两个二级页面组成，主页面用于显示系统运行状态、空气质量评定和空气质量数据、跳转页面以及Mini空气质量监测仪的电量，并且可以直接对吸顶灯进行控制调节；吸顶灯控制页面用于显示历史数据和实时数据，控制、调节吸顶灯；子设备页面主要用显示Mini空气质量监测仪的空气质量数据。

图1-2 系统框架

• 二、界面设计

本项目的主要UI界面有以下三个：

1、主界面

2、吸顶灯控制界面

3、子设备界面

界面图片如下图所示。

                                                                

图2-1 主界面上部分                                                  图2-2 主界面下部分                ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        

图2-3 吸顶灯控制界面上                                                                           图2-4 吸顶灯控制界面下

        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        

图2-5 子设备控制界面上                                                                图2-6 子设备控制界面下

• 三 、应用页面说明

3.1 主界面

打开小程序既进入主界面时系统自动获取MQTT服务器数据进行数据更新，并判断对应空气质量状态赋予指示的颜色和显示设备状态。

在开启小程序时，会先判断吸顶灯的开启状态，已开启则直观显示亮灯状态，反正是灭灯状态，点击顶部的吸顶灯图标，可直接控制设备进行开关灯。

           ​​​​​​​        

                图3-1 吸顶灯亮灯状态                                          图3-2 吸顶灯灭灯状态

拖动亮度滑块调整亮度，若是关灯状态，直接拖动亮度滑块会直接开启灯

                       

                                                        图3-3 吸顶灯调节亮度

点击中部实时数据部分、子设备部分可实现页面跳转。

        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        

图3-4 显示设备状态及数据

子设备部分显示温度、空气质量与电量这类关键数据改变时，可以实时根据不同阈值改变样式。在低于20电量时，具体电量数值会如上图显示出来。​​​​​​​​​​​​​​        ​​​​​​​                                     ​​​​​       ​​​​​​​                        ​​​​​​​        ​​​​​​​   ​​​​​​​    

图3-5 数据改变同时设备状态也会改变

3.2 吸顶灯控制界面

点击主界面实时数据区域跳转到吸顶灯控制界面，进入界面即会连接服务器，同时显示加载中，此时会获取MQTT服务器数据，然后进行数据处理，再通过Echarts渲染图表。​​​​​​​                                                        

图3-5 ‘等待’图片

加载结束后会显示显示2个部分：

1. 实时空气质量监测和状态、数据显示，包括控制灯开关与亮度

 

图3-6 实时数据显示与灯控按钮

1. 数据显示图表部分，其中温度是柱状图，湿度是折线图，左边侧y坐标对应相应颜色的湿度，右侧y坐标对应相应颜色温度，上测x坐标对应获取数据次数，下侧x坐标对应此次获取时的时间。        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​

      图3-7 温湿度显示图表

其中触碰屏幕能够获取相应详细数据，单击上部分数据类型可进行筛选

                                 

                图3-8 显示相对应数据         ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​                         图3-9 筛选单个数据

其中右上角部分可对数据图标进行文本查看、刷新以及保存图片操作

        ​​​​​​​        ​​​​​​​        ​​​​​​​        

                                图3-10、3-11、3-12 文本查看、刷新以及保存图片操作

3.3 子设备界面-Mini空气质量检测仪

点击主界面子设备栏目中的子设备跳转到Mini质量检测仪数据监测界面，进入界面即会连接MQTT服务器，同时显示加载中，此时会获取设备数据，然后进行数据处理，再通过Echarts渲染图表。​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        

图3-13 ‘等待’图片

加载结束后会显示显示2个部分：

1、实时空气质量监测和状态、数据显示

        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​ ​​​​​​  ​​​​​​​

图3-14 实时数据显示

2、数据显示图表部分，同样也可以图标进行筛选、获取相应详细数据等操作，这里不做过多演示。        

        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        

图3-15 甲醛、TVOC显示图表

3.4 子设备界面-六合一检测仪

点击主界面子设备栏目中的子设备跳转到六合一检测仪数据监测界面，进入界面即会连接MQTT服务器，同时显示加载中，此时会获取设备数据，然后进行数据处理，再通过Echarts渲染图表。​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​           

图3-16 ‘等待’图片

加载结束后会显示显示2个部分：

1、实时空气质量监测和状态、数据显示

        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​     

图3-17 实时数据显示

2、数据显示图表部分，同样也可以图标进行筛选、获取相应详细数据等操作，这里不做过多演示。

        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        

图3-18 CO2浓度、空气等级显示图表