基于物联网和Web技术的可视化火灾报警系统设计与实现

关键词：物联网；Web技术；可视化；火灾报警系统；移动应用

0 引言

火灾已成为一种频发性灾害，对经济发展和社会稳定构成直接影响，严重威胁人民生命安全[1]。随着城市建设规模不断扩大，火灾发生概率随之上升[2]。火灾报警系统在保护生命和财产安全方面发挥着至关重要的作用。传统火灾报警系统虽然在一定程度上起到了火灾预警作用，但仍面临诸多挑战，如信息传递滞后，无法准确快速掌握火灾时间、地点、实时火情等信息；缺乏统计功能，不利于管理部门进行灾后分析和预警。

现有研究已探索将单片机、视频识别技术和图像识别技术应用于火灾报警系统[3-5]，但这些系统存在功能单一、缺乏可视化、无法远程监控等局限性。为弥补这些不足，本文设计了融合物联网技术与Web技术的火灾报警系统，实现了火灾的实时远程监控和可视化报警功能，为火灾防控提供了新的智能化解决方案。下文将从可视化火灾报警系统的系统需求分析、功能实现、系统测试三个方面进行具体说明。

1 系统需求

1.1 功能需求设计

为提高火灾报警系统的智能化和可视化水平，需要在城市中布局火灾环境检测设备，并将检测数据进行集中收集、整理和分析，通过可视化方式呈现给用户。通过这种方式，用户能够直观地了解当前火灾风险情况，及时做出应对措施。因此，系统应具备以下功能：

1） 实时监测环境动态。通过与各类环境监测设备的联通，系统可实时获取各个检测地区的传感器数据和位置信息。

2） 将各传感器数值、经纬度等信息以可视化形式呈现在系统界面上，使用户能够清晰了解各地检测数值及报警情况，以便在火灾发生时及时采取相应措施。

3） 具备火灾任务管及时发布灭火任务，使消防员能够根据可视化信息第一时间到达现场，并在处理完危情后及时更新火灾任务状态。

4） 除火灾动态监测和任务管理外，系统还提供其他功能。如为消防部门提供历史火灾数据的统计分析报表，帮助其更好地找出潜在火灾风险，提前进行预警。同时，系统还具备公告管理功能，用于发布重要通知。

根据以上分析，可视化火灾报警系统应由物联网采集模块、可视化管理模块、数据中心三大模块组成，系统整体模块如图1所示。理功能。当出现火灾报警时，

单片机电路配置有定位模块和环境检测模块（包含烟雾气敏传感器、温度传感器、二氧化碳浓度传感器），并在单片机中设置报警算法。单片机外接网络模块，将各传感器数值、定位数据、报警状态等数据上传至阿里云平台。由于此过程在传统火灾报警系统[6]中应用广泛，在此不再赘述。

可视化管理模块是本系统的重点，后台从阿里云平台实时获取各个传感器数值及GPS定位数据，并将其保存在数据库中。系统结合高德地图API，将这些数据显示在Web前端的地图上，实现数据可视化。为实现消防员出警时的可视化功能，系统增设Android App端，消防员可通过手机App查看地图，以便更快捷地到达现场，并在App上更新火警任务状态。此外，Web系统端还具有火警统计和管理公告功能，便于消防指挥中心对火灾报警进行管理。

1.2 系统用例图

根据1.1节分析，可视化系统主要包含管理者（消防指挥中心）和用户（消防员）两个角色。管理员通过Web端可进行公告管理和任务管理。在“公告管理”页面可添加、编辑公告；在“任务管理”页面可进行任务查看和任务统计。用户打开App端后，可显示“主页”“公告”“我的”三个页面。在“主页”中可查看火灾任务列表并进行危情处理，在“公告”页面可查看Web 端下发的公告，在“我的”页面可修改个人信息和密码等。管理员和用户角色的用例图如图2所示。

1.3 关键技术

通过分层架构（前端层负责用户界面和交互逻辑；后端层负责业务逻辑和与数据库的交互；数据库层存储系统所需的所有数据）、模块化开发等模式，结合前端框架、后端框架、数据库框架和移动端框架的选择，可以实现一个高效、可靠和可扩展的火灾报警系统[7]。

选择Vue作为Web前端框架，用于构建用户界面和交互逻辑。Vue体积小，加载速度快，适合开发轻量级的应用。在Android开发中选用Kotlin语言，这是一种基于Java虚拟机的静态类型程序设计语言，Kotlin 不仅可以在Java虚拟机上运行，还可以编译成JavaS⁃ cript。系统使用OkHttp+RxJava 的组合作为Android 和Java开发的工具集，用于处理异步HTTP请求和响应。将OkHttp和RxJava结合使用，可以将OkHttp的异步HTTP请求转换为RxJava的Observable对象。选择WebStorm作为前端开发工具，WebStorm是一款功能丰富的Web开发环境，该开发环境为开发者提供了许多简单实用的工具和特性，提高了开发效率和代码质量。WebStorm 具有丰富的代码编辑功能，支持HTML、JavaScript等多种编程语言，并且具有语法高亮功能，这样可以让代码更加易读易懂。后端框架采用SpringBoot，SpringBoot 框架内嵌了Tomcat、Jetty 和Undertow服务器，并且可以自动化配置第三方库，减少了开发人员的工作量，提高了程序的开发效率。后端开发工具选择Idea，其提供了一个功能强大的代码编辑器，支持智能代码助手、代码自动提示、代码补全等功能，大大提高了编写代码的效率。数据库则选择MySQL，它是一个关系型数据库，具有稳定、高效的数据存储和查询功能。

1.4 数据库设计

在系统开发的整个过程中，数据库设计是至关重要的环节，数据库具备灵活的数据操作能力，包括添加、删除、修改和检索火灾数据、用户信息、地址定位和处理情况等数据库的信息，从而确保系统能够迅速响应用户的信息需求。

本系统数据库中包含user表、task表、notice表3 张表。其中user表用于存储用户和管理员的账户信息，存储用户的基本信息和权限设置。主键“用户ID”是int类型，该类型通常与索引一起使用，以提高数据的检索速度。为保证实体完整性，user表中的“用户ID”“账户”“密码”均不可为空。“访问权限”用于区分普通用户和管理员用户，以保障系统的安全性。user 表的详细定义如表1所示。

task表用于存储火情任务信息，记录从阿里云平台获取的火情数据以及在App端进行危情处理后更新的数据。主键“任务ID”采用int类型，不可为空；外键“用户ID”为负责处理火情的消防员用户ID；“报警状态”采用布尔类型变量。task表的详细定义如表2所示。

notice表用于存储公告信息，主键“公告ID”采用int类型，不可为空；其他属性采用varchar类型，支持最大长度达255个字符，适合存储长度可变的文本信息。notice表的详细定义如表3所示。

2 可视化火灾报警系统功能实现

2.1 系统总体架构

系统采用分层架构，包括前端用户界面、后端服务器和数据库管理三大部分，系统总体架构如图3所示。前端用户界面分为Web 界面和Android App 界面，分别实现管理员（消防指挥中心）和用户（消防员）的功能需求。用户通过Android App和PC机Web页面访问系统，前端网络请求通过OKHttp、HTTP、Ajax 发送至后端，后端通过与MySQL和文件系统的交互完成相应的业务请求和处理，并采用SpringBoot框架进行开发。系统中的实时火情数据来源于硬件采集设备，单片机将环境传感器采集的数据通过网络模块上传至阿里云平台，后端服务获取阿里云平台数据并保存至数据库。整个系统的运行需要高德地图SDK和阿里云物联网SDK的支持。

2.2 数据采集

数据采集模块硬件组成如图4所示，单片机模块与外围传感器、GPS、传输模块之间使用Urat串口传输协议，传输模块与阿里云平台通过无线MQTT协议传输。

阿里云物联网平台上注册账号并创建产品后，即可生成AccessKeyID、AccessKeySecret、ProductKey 三元组信息[8-9]。在产品下添加本系统所需要的物模型，包括二氧化碳浓度、烟雾浓度、温度、GPS数据、报警状态等信息。物模型是真实硬件设备到数据表示之间的映射[10]，例如二氧化碳浓度、烟雾浓度为单精度浮点数，与之相关的属性为浮点数；报警状态为Bool⁃ ean类型，其中0表示无报警，1表示报警。

单片机模块采用C语言编码，编写函数时首先使用三元组信息进行身份验证，确保通信双方的合法性；然后针对不同的ProductKey进行订阅主题、发布主题，实现各传感器现场数据与阿里云物联网云平台的数据传输[11]。MQTT传输层使用TLS/SSL安全协议，可以对通信数据进行加密，防止数据被窃听和篡改。

2.3 获取云数据

三元组信息也是使用程序访问阿里云IoT的唯一认证，后端认证通过后，按照物模型的数据结构获取各参数数值[12]，并保存到task数据表中。后端从阿里云平台获取数据是通过AMQP协议实现的，阿里云物联网平台已提供功能完备的SDK以便于快速开发。系统后端每间隔1分钟向阿里云平台发送消息，并从返回消息中提取出多个关键参数，包括二氧化碳浓度、温度、烟雾浓度、经纬度、地址、日期、类型、描述、报警状态等参数，并且将这些参数存储在变量中，以供后续使用和处理。如果某个参数不存在，就会使用默认值（例如，如果“uid”参数不存在，就会使用“0”作为默认值）。然后，该代码在数据库事务中插入一个新的记录到task表中，这个新记录的各个字段的值就是之前从请求中获取的参数值。

2.4 火灾任务可视化

Android App可以调用高德地图，将火灾任务的位置以及火灾信息展示在地图上。地图上还会显示用户自身的定位，用户可以根据这两个位置规划出到达火灾现场的最优路线。App的“附近地图”页面如图5所示。

App端“附近地图”中火灾任务点功能开发所需的代码定义了一个名为“load”的函数。该函数使用“HttpUtils.newInstance（）”创建一个新的HTTP请求实例，并添加了两个参数：“zt”和“uid”。其中，“zt”的值为“待处理”，而“uid”的值则来自“LocalBeanInfo.user⁃ Info？.id.toString（）”。接下来，通过调用“post”方法向服务器的“getRwList”接口发送POST请求。在请求成功时，会执行“onSuccess”回调函数，将返回的字符串数据转换为“RwBean”对象列表，并清空地图上的标记。遍历各“RwBean”对象，为每一个“RwBean”数据创建一 个 MarkerOption 对 象 ，使 用 AMapUtil. convert⁃ pToosLiatitoLnn，g同（）方时法将转烟换雾经浓纬度度、二坐氧标化并碳存入浓度ma和rk温erO度pt等ion相s.关信息存入markerOption.title，通过mapview.map.add⁃ Marker（）方法将位置、数据信息显示在地图上。

2.5 危情处理

用户到达现场并完成危情处理后，可以使用An⁃ droid App进行火情状态更新。用户选择案件编号，点击编辑危情，危情处理操作界面如图6所示。用户输入当前状态（包括添加火灾描述、火灾图片、添加自身定位）并提交，页面中的所有数据会发送至后端，实现火灾任务数据表的更新。

App端“危情处理”模块开发所需代码的功能如下：首先调用“super.onCreate（savedInstanceState） ”方法，设置布局文件为“activity_task”；再设置导航栏标题为“危情处理”；然后更新高德地图定位客户端的隐私协议同意状态和隐私显示状态；接着设置导航栏右侧按钮的文本为“提交”；最后为导航栏右侧按钮设置点击事件监听器，当点击时创建一个HttpUtils实例。之后添加请求参数，包括描述、图片、经纬度、地址、任务ID和状态，并发送POST请求至“updateRw”接口，同时实现成功和失败的回调函数。成功回调函数显示“提交成功！”的提示信息，并结束当前Activity；失败回调函数则显示错误信息的提示。

火情任务状态更新数据流转如图7所示。当客户端向服务器发送一个POST请求到“/updateRw”路径时，后台将执行以下指令：首先，此代码从请求中获取参数，并将这些参数存储在变量中；然后会开始一个数据库事务，尝试更新名为task的表中与给定rwid匹配的记录。该代码将一些字段设置为从请求中获取的值，包括日期、类型、描述、状态、图片、经纬度、地址、二氧化碳浓度、温度和烟雾浓度。如果更新成功，则会返回一个表示成功的常量。

3 系统测试

3.1 测试环境

测试环境采用Windows 10操作系统、Chrome 浏览器、Android 14操作系统。

3.2 测试记录

系统测试的核心目的是确保系统的各项功能都能达到预期的效果，包括火灾报警的接收与展示、任务数据的收集与可视化以及用户和系统的交互功能等多个方面。测试用例采用场景设计法，对上述功能进行测试并记录。可视化火灾报警系统Android App 端测试记录和Web端测试记录如表4、表5所示。

3.3 测试结果分析

经过严格的功能测试，本火灾报警系统的所有功能模块均可正常使用，且能保证稳定运行。因此，基于物联网和Web技术的可视化火灾报警系统已基本实现数据可视化、管理智能化的目标。

4 结论

针对当前火灾报警系统的不足，本文成功设计了一个功能全面的火灾报警系统。该系统以物联网技术、Web技术为核心，是一款集实时数据采集、智能报警、环境数据可视化、危情处理移动化等特点为一体的新型火灾报警系统。针对消防指挥中心的管理用户和执行危情处理的普通消防员用户，分别开发了Web可视化操作端和Android App可视化操作端。经测试，各项功能的实际测试结果均达到预期效果。系统技术成熟、可行性强，具有广阔的应用前景。展望未来，该系统可在融入更加智能化的火灾预警算法、与其他智能消防系统集成等方面进行新的探索，为保障人民生命财产安全做出更加显著的贡献。