基于物聯(lián)網(wǎng)和Web技術(shù)的可視化火災(zāi)報(bào)警系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

關(guān)鍵詞：物聯(lián)網(wǎng)；Web技術(shù)；可視化；火災(zāi)報(bào)警系統(tǒng)；移動應(yīng)用

0 引言

火災(zāi)已成為一種頻發(fā)性災(zāi)害，對經(jīng)濟(jì)發(fā)展和社會穩(wěn)定構(gòu)成直接影響，嚴(yán)重威脅人民生命安全[1]。隨著城市建設(shè)規(guī)模不斷擴(kuò)大，火災(zāi)發(fā)生概率隨之上升[2]?；馂?zāi)報(bào)警系統(tǒng)在保護(hù)生命和財(cái)產(chǎn)安全方面發(fā)揮著至關(guān)重要的作用。傳統(tǒng)火災(zāi)報(bào)警系統(tǒng)雖然在一定程度上起到了火災(zāi)預(yù)警作用，但仍面臨諸多挑戰(zhàn)，如信息傳遞滯后，無法準(zhǔn)確快速掌握火災(zāi)時(shí)間、地點(diǎn)、實(shí)時(shí)火情等信息；缺乏統(tǒng)計(jì)功能，不利于管理部門進(jìn)行災(zāi)后分析和預(yù)警。

現(xiàn)有研究已探索將單片機(jī)、視頻識別技術(shù)和圖像識別技術(shù)應(yīng)用于火災(zāi)報(bào)警系統(tǒng)[3-5]，但這些系統(tǒng)存在功能單一、缺乏可視化、無法遠(yuǎn)程監(jiān)控等局限性。為彌補(bǔ)這些不足，本文設(shè)計(jì)了融合物聯(lián)網(wǎng)技術(shù)與Web技術(shù)的火災(zāi)報(bào)警系統(tǒng)，實(shí)現(xiàn)了火災(zāi)的實(shí)時(shí)遠(yuǎn)程監(jiān)控和可視化報(bào)警功能，為火災(zāi)防控提供了新的智能化解決方案。下文將從可視化火災(zāi)報(bào)警系統(tǒng)的系統(tǒng)需求分析、功能實(shí)現(xiàn)、系統(tǒng)測試三個(gè)方面進(jìn)行具體說明。

1 系統(tǒng)需求

1.1 功能需求設(shè)計(jì)

為提高火災(zāi)報(bào)警系統(tǒng)的智能化和可視化水平，需要在城市中布局火災(zāi)環(huán)境檢測設(shè)備，并將檢測數(shù)據(jù)進(jìn)行集中收集、整理和分析，通過可視化方式呈現(xiàn)給用戶。通過這種方式，用戶能夠直觀地了解當(dāng)前火災(zāi)風(fēng)險(xiǎn)情況，及時(shí)做出應(yīng)對措施。因此，系統(tǒng)應(yīng)具備以下功能：

1） 實(shí)時(shí)監(jiān)測環(huán)境動態(tài)。通過與各類環(huán)境監(jiān)測設(shè)備的聯(lián)通，系統(tǒng)可實(shí)時(shí)獲取各個(gè)檢測地區(qū)的傳感器數(shù)據(jù)和位置信息。

2） 將各傳感器數(shù)值、經(jīng)緯度等信息以可視化形式呈現(xiàn)在系統(tǒng)界面上，使用戶能夠清晰了解各地檢測數(shù)值及報(bào)警情況，以便在火災(zāi)發(fā)生時(shí)及時(shí)采取相應(yīng)措施。

3） 具備火災(zāi)任務(wù)管及時(shí)發(fā)布滅火任務(wù)，使消防員能夠根據(jù)可視化信息第一時(shí)間到達(dá)現(xiàn)場，并在處理完危情后及時(shí)更新火災(zāi)任務(wù)狀態(tài)。

4） 除火災(zāi)動態(tài)監(jiān)測和任務(wù)管理外，系統(tǒng)還提供其他功能。如為消防部門提供歷史火災(zāi)數(shù)據(jù)的統(tǒng)計(jì)分析報(bào)表，幫助其更好地找出潛在火災(zāi)風(fēng)險(xiǎn)，提前進(jìn)行預(yù)警。同時(shí)，系統(tǒng)還具備公告管理功能，用于發(fā)布重要通知。

根據(jù)以上分析，可視化火災(zāi)報(bào)警系統(tǒng)應(yīng)由物聯(lián)網(wǎng)采集模塊、可視化管理模塊、數(shù)據(jù)中心三大模塊組成，系統(tǒng)整體模塊如圖1所示。理功能。當(dāng)出現(xiàn)火災(zāi)報(bào)警時(shí)，

單片機(jī)電路配置有定位模塊和環(huán)境檢測模塊（包含煙霧氣敏傳感器、溫度傳感器、二氧化碳濃度傳感器），并在單片機(jī)中設(shè)置報(bào)警算法。單片機(jī)外接網(wǎng)絡(luò)模塊，將各傳感器數(shù)值、定位數(shù)據(jù)、報(bào)警狀態(tài)等數(shù)據(jù)上傳至阿里云平臺。由于此過程在傳統(tǒng)火災(zāi)報(bào)警系統(tǒng)[6]中應(yīng)用廣泛，在此不再贅述。

可視化管理模塊是本系統(tǒng)的重點(diǎn)，后臺從阿里云平臺實(shí)時(shí)獲取各個(gè)傳感器數(shù)值及GPS定位數(shù)據(jù)，并將其保存在數(shù)據(jù)庫中。系統(tǒng)結(jié)合高德地圖API，將這些數(shù)據(jù)顯示在Web前端的地圖上，實(shí)現(xiàn)數(shù)據(jù)可視化。為實(shí)現(xiàn)消防員出警時(shí)的可視化功能，系統(tǒng)增設(shè)Android App端，消防員可通過手機(jī)App查看地圖，以便更快捷地到達(dá)現(xiàn)場，并在App上更新火警任務(wù)狀態(tài)。此外，Web系統(tǒng)端還具有火警統(tǒng)計(jì)和管理公告功能，便于消防指揮中心對火災(zāi)報(bào)警進(jìn)行管理。

1.2 系統(tǒng)用例圖

根據(jù)1.1節(jié)分析，可視化系統(tǒng)主要包含管理者（消防指揮中心）和用戶（消防員）兩個(gè)角色。管理員通過Web端可進(jìn)行公告管理和任務(wù)管理。在“公告管理”頁面可添加、編輯公告；在“任務(wù)管理”頁面可進(jìn)行任務(wù)查看和任務(wù)統(tǒng)計(jì)。用戶打開App端后，可顯示“主頁”“公告”“我的”三個(gè)頁面。在“主頁”中可查看火災(zāi)任務(wù)列表并進(jìn)行危情處理，在“公告”頁面可查看Web 端下發(fā)的公告，在“我的”頁面可修改個(gè)人信息和密碼等。管理員和用戶角色的用例圖如圖2所示。

1.3 關(guān)鍵技術(shù)

通過分層架構(gòu)（前端層負(fù)責(zé)用戶界面和交互邏輯；后端層負(fù)責(zé)業(yè)務(wù)邏輯和與數(shù)據(jù)庫的交互；數(shù)據(jù)庫層存儲系統(tǒng)所需的所有數(shù)據(jù)）、模塊化開發(fā)等模式，結(jié)合前端框架、后端框架、數(shù)據(jù)庫框架和移動端框架的選擇，可以實(shí)現(xiàn)一個(gè)高效、可靠和可擴(kuò)展的火災(zāi)報(bào)警系統(tǒng)[7]。

選擇Vue作為Web前端框架，用于構(gòu)建用戶界面和交互邏輯。Vue體積小，加載速度快，適合開發(fā)輕量級的應(yīng)用。在Android開發(fā)中選用Kotlin語言，這是一種基于Java虛擬機(jī)的靜態(tài)類型程序設(shè)計(jì)語言，Kotlin 不僅可以在Java虛擬機(jī)上運(yùn)行，還可以編譯成JavaS? cript。系統(tǒng)使用OkHttp+RxJava 的組合作為Android 和Java開發(fā)的工具集，用于處理異步HTTP請求和響應(yīng)。將OkHttp和RxJava結(jié)合使用，可以將OkHttp的異步HTTP請求轉(zhuǎn)換為RxJava的Observable對象。選擇WebStorm作為前端開發(fā)工具，WebStorm是一款功能豐富的Web開發(fā)環(huán)境，該開發(fā)環(huán)境為開發(fā)者提供了許多簡單實(shí)用的工具和特性，提高了開發(fā)效率和代碼質(zhì)量。WebStorm 具有豐富的代碼編輯功能，支持HTML、JavaScript等多種編程語言，并且具有語法高亮功能，這樣可以讓代碼更加易讀易懂。后端框架采用SpringBoot，SpringBoot 框架內(nèi)嵌了Tomcat、Jetty 和Undertow服務(wù)器，并且可以自動化配置第三方庫，減少了開發(fā)人員的工作量，提高了程序的開發(fā)效率。后端開發(fā)工具選擇Idea，其提供了一個(gè)功能強(qiáng)大的代碼編輯器，支持智能代碼助手、代碼自動提示、代碼補(bǔ)全等功能，大大提高了編寫代碼的效率。數(shù)據(jù)庫則選擇MySQL，它是一個(gè)關(guān)系型數(shù)據(jù)庫，具有穩(wěn)定、高效的數(shù)據(jù)存儲和查詢功能。

1.4 數(shù)據(jù)庫設(shè)計(jì)

在系統(tǒng)開發(fā)的整個(gè)過程中，數(shù)據(jù)庫設(shè)計(jì)是至關(guān)重要的環(huán)節(jié)，數(shù)據(jù)庫具備靈活的數(shù)據(jù)操作能力，包括添加、刪除、修改和檢索火災(zāi)數(shù)據(jù)、用戶信息、地址定位和處理情況等數(shù)據(jù)庫的信息，從而確保系統(tǒng)能夠迅速響應(yīng)用戶的信息需求。

本系統(tǒng)數(shù)據(jù)庫中包含user表、task表、notice表3 張表。其中user表用于存儲用戶和管理員的賬戶信息，存儲用戶的基本信息和權(quán)限設(shè)置。主鍵“用戶ID”是int類型，該類型通常與索引一起使用，以提高數(shù)據(jù)的檢索速度。為保證實(shí)體完整性，user表中的“用戶ID”“賬戶”“密碼”均不可為空?！霸L問權(quán)限”用于區(qū)分普通用戶和管理員用戶，以保障系統(tǒng)的安全性。user 表的詳細(xì)定義如表1所示。

task表用于存儲火情任務(wù)信息，記錄從阿里云平臺獲取的火情數(shù)據(jù)以及在App端進(jìn)行危情處理后更新的數(shù)據(jù)。主鍵“任務(wù)ID”采用int類型，不可為空；外鍵“用戶ID”為負(fù)責(zé)處理火情的消防員用戶ID；“報(bào)警狀態(tài)”采用布爾類型變量。task表的詳細(xì)定義如表2所示。

notice表用于存儲公告信息，主鍵“公告ID”采用int類型，不可為空；其他屬性采用varchar類型，支持最大長度達(dá)255個(gè)字符，適合存儲長度可變的文本信息。notice表的詳細(xì)定義如表3所示。

2 可視化火災(zāi)報(bào)警系統(tǒng)功能實(shí)現(xiàn)

2.1 系統(tǒng)總體架構(gòu)

系統(tǒng)采用分層架構(gòu)，包括前端用戶界面、后端服務(wù)器和數(shù)據(jù)庫管理三大部分，系統(tǒng)總體架構(gòu)如圖3所示。前端用戶界面分為Web 界面和Android App 界面，分別實(shí)現(xiàn)管理員（消防指揮中心）和用戶（消防員）的功能需求。用戶通過Android App和PC機(jī)Web頁面訪問系統(tǒng)，前端網(wǎng)絡(luò)請求通過OKHttp、HTTP、Ajax 發(fā)送至后端，后端通過與MySQL和文件系統(tǒng)的交互完成相應(yīng)的業(yè)務(wù)請求和處理，并采用SpringBoot框架進(jìn)行開發(fā)。系統(tǒng)中的實(shí)時(shí)火情數(shù)據(jù)來源于硬件采集設(shè)備，單片機(jī)將環(huán)境傳感器采集的數(shù)據(jù)通過網(wǎng)絡(luò)模塊上傳至阿里云平臺，后端服務(wù)獲取阿里云平臺數(shù)據(jù)并保存至數(shù)據(jù)庫。整個(gè)系統(tǒng)的運(yùn)行需要高德地圖SDK和阿里云物聯(lián)網(wǎng)SDK的支持。

2.2 數(shù)據(jù)采集

數(shù)據(jù)采集模塊硬件組成如圖4所示，單片機(jī)模塊與外圍傳感器、GPS、傳輸模塊之間使用Urat串口傳輸協(xié)議，傳輸模塊與阿里云平臺通過無線MQTT協(xié)議傳輸。

阿里云物聯(lián)網(wǎng)平臺上注冊賬號并創(chuàng)建產(chǎn)品后，即可生成AccessKeyID、AccessKeySecret、ProductKey 三元組信息[8-9]。在產(chǎn)品下添加本系統(tǒng)所需要的物模型，包括二氧化碳濃度、煙霧濃度、溫度、GPS數(shù)據(jù)、報(bào)警狀態(tài)等信息。物模型是真實(shí)硬件設(shè)備到數(shù)據(jù)表示之間的映射[10]，例如二氧化碳濃度、煙霧濃度為單精度浮點(diǎn)數(shù)，與之相關(guān)的屬性為浮點(diǎn)數(shù)；報(bào)警狀態(tài)為Bool? ean類型，其中0表示無報(bào)警，1表示報(bào)警。

單片機(jī)模塊采用C語言編碼，編寫函數(shù)時(shí)首先使用三元組信息進(jìn)行身份驗(yàn)證，確保通信雙方的合法性；然后針對不同的ProductKey進(jìn)行訂閱主題、發(fā)布主題，實(shí)現(xiàn)各傳感器現(xiàn)場數(shù)據(jù)與阿里云物聯(lián)網(wǎng)云平臺的數(shù)據(jù)傳輸[11]。MQTT傳輸層使用TLS/SSL安全協(xié)議，可以對通信數(shù)據(jù)進(jìn)行加密，防止數(shù)據(jù)被竊聽和篡改。

2.3 獲取云數(shù)據(jù)

三元組信息也是使用程序訪問阿里云IoT的唯一認(rèn)證，后端認(rèn)證通過后，按照物模型的數(shù)據(jù)結(jié)構(gòu)獲取各參數(shù)數(shù)值[12]，并保存到task數(shù)據(jù)表中。后端從阿里云平臺獲取數(shù)據(jù)是通過AMQP協(xié)議實(shí)現(xiàn)的，阿里云物聯(lián)網(wǎng)平臺已提供功能完備的SDK以便于快速開發(fā)。系統(tǒng)后端每間隔1分鐘向阿里云平臺發(fā)送消息，并從返回消息中提取出多個(gè)關(guān)鍵參數(shù)，包括二氧化碳濃度、溫度、煙霧濃度、經(jīng)緯度、地址、日期、類型、描述、報(bào)警狀態(tài)等參數(shù)，并且將這些參數(shù)存儲在變量中，以供后續(xù)使用和處理。如果某個(gè)參數(shù)不存在，就會使用默認(rèn)值（例如，如果“uid”參數(shù)不存在，就會使用“0”作為默認(rèn)值）。然后，該代碼在數(shù)據(jù)庫事務(wù)中插入一個(gè)新的記錄到task表中，這個(gè)新記錄的各個(gè)字段的值就是之前從請求中獲取的參數(shù)值。

2.4 火災(zāi)任務(wù)可視化

Android App可以調(diào)用高德地圖，將火災(zāi)任務(wù)的位置以及火災(zāi)信息展示在地圖上。地圖上還會顯示用戶自身的定位，用戶可以根據(jù)這兩個(gè)位置規(guī)劃出到達(dá)火災(zāi)現(xiàn)場的最優(yōu)路線。App的“附近地圖”頁面如圖5所示。

App端“附近地圖”中火災(zāi)任務(wù)點(diǎn)功能開發(fā)所需的代碼定義了一個(gè)名為“l(fā)oad”的函數(shù)。該函數(shù)使用“HttpUtils.newInstance（）”創(chuàng)建一個(gè)新的HTTP請求實(shí)例，并添加了兩個(gè)參數(shù)：“zt”和“uid”。其中，“zt”的值為“待處理”，而“uid”的值則來自“LocalBeanInfo.user? Info？.id.toString（）”。接下來，通過調(diào)用“post”方法向服務(wù)器的“getRwList”接口發(fā)送POST請求。在請求成功時(shí)，會執(zhí)行“onSuccess”回調(diào)函數(shù)，將返回的字符串?dāng)?shù)據(jù)轉(zhuǎn)換為“RwBean”對象列表，并清空地圖上的標(biāo)記。遍歷各“RwBean”對象，為每一個(gè)“RwBean”數(shù)據(jù)創(chuàng)建一 個(gè) MarkerOption 對 象 ，使 用 AMapUtil. convert? pToosLiatitoLnn，g同（）方時(shí)法將轉(zhuǎn)煙換霧經(jīng)濃緯度度、二坐氧標(biāo)化并碳存入濃度ma和rk溫erO度pt等ion相s.關(guān)信息存入markerOption.title，通過mapview.map.add? Marker（）方法將位置、數(shù)據(jù)信息顯示在地圖上。

2.5 危情處理

用戶到達(dá)現(xiàn)場并完成危情處理后，可以使用An? droid App進(jìn)行火情狀態(tài)更新。用戶選擇案件編號，點(diǎn)擊編輯危情，危情處理操作界面如圖6所示。用戶輸入當(dāng)前狀態(tài)（包括添加火災(zāi)描述、火災(zāi)圖片、添加自身定位）并提交，頁面中的所有數(shù)據(jù)會發(fā)送至后端，實(shí)現(xiàn)火災(zāi)任務(wù)數(shù)據(jù)表的更新。

App端“危情處理”模塊開發(fā)所需代碼的功能如下：首先調(diào)用“super.onCreate（savedInstanceState） ”方法，設(shè)置布局文件為“activity_task”；再設(shè)置導(dǎo)航欄標(biāo)題為“危情處理”；然后更新高德地圖定位客戶端的隱私協(xié)議同意狀態(tài)和隱私顯示狀態(tài)；接著設(shè)置導(dǎo)航欄右側(cè)按鈕的文本為“提交”；最后為導(dǎo)航欄右側(cè)按鈕設(shè)置點(diǎn)擊事件監(jiān)聽器，當(dāng)點(diǎn)擊時(shí)創(chuàng)建一個(gè)HttpUtils實(shí)例。之后添加請求參數(shù)，包括描述、圖片、經(jīng)緯度、地址、任務(wù)ID和狀態(tài)，并發(fā)送POST請求至“updateRw”接口，同時(shí)實(shí)現(xiàn)成功和失敗的回調(diào)函數(shù)。成功回調(diào)函數(shù)顯示“提交成功！”的提示信息，并結(jié)束當(dāng)前Activity；失敗回調(diào)函數(shù)則顯示錯(cuò)誤信息的提示。

火情任務(wù)狀態(tài)更新數(shù)據(jù)流轉(zhuǎn)如圖7所示。當(dāng)客戶端向服務(wù)器發(fā)送一個(gè)POST請求到“/updateRw”路徑時(shí)，后臺將執(zhí)行以下指令：首先，此代碼從請求中獲取參數(shù)，并將這些參數(shù)存儲在變量中；然后會開始一個(gè)數(shù)據(jù)庫事務(wù)，嘗試更新名為task的表中與給定rwid匹配的記錄。該代碼將一些字段設(shè)置為從請求中獲取的值，包括日期、類型、描述、狀態(tài)、圖片、經(jīng)緯度、地址、二氧化碳濃度、溫度和煙霧濃度。如果更新成功，則會返回一個(gè)表示成功的常量。

3 系統(tǒng)測試

3.1 測試環(huán)境

測試環(huán)境采用Windows 10操作系統(tǒng)、Chrome 瀏覽器、Android 14操作系統(tǒng)。

3.2 測試記錄

系統(tǒng)測試的核心目的是確保系統(tǒng)的各項(xiàng)功能都能達(dá)到預(yù)期的效果，包括火災(zāi)報(bào)警的接收與展示、任務(wù)數(shù)據(jù)的收集與可視化以及用戶和系統(tǒng)的交互功能等多個(gè)方面。測試用例采用場景設(shè)計(jì)法，對上述功能進(jìn)行測試并記錄?？梢暬馂?zāi)報(bào)警系統(tǒng)Android App 端測試記錄和Web端測試記錄如表4、表5所示。

3.3 測試結(jié)果分析

經(jīng)過嚴(yán)格的功能測試，本火災(zāi)報(bào)警系統(tǒng)的所有功能模塊均可正常使用，且能保證穩(wěn)定運(yùn)行。因此，基于物聯(lián)網(wǎng)和Web技術(shù)的可視化火災(zāi)報(bào)警系統(tǒng)已基本實(shí)現(xiàn)數(shù)據(jù)可視化、管理智能化的目標(biāo)。

4 結(jié)論

針對當(dāng)前火災(zāi)報(bào)警系統(tǒng)的不足，本文成功設(shè)計(jì)了一個(gè)功能全面的火災(zāi)報(bào)警系統(tǒng)。該系統(tǒng)以物聯(lián)網(wǎng)技術(shù)、Web技術(shù)為核心，是一款集實(shí)時(shí)數(shù)據(jù)采集、智能報(bào)警、環(huán)境數(shù)據(jù)可視化、危情處理移動化等特點(diǎn)為一體的新型火災(zāi)報(bào)警系統(tǒng)。針對消防指揮中心的管理用戶和執(zhí)行危情處理的普通消防員用戶，分別開發(fā)了Web可視化操作端和Android App可視化操作端。經(jīng)測試，各項(xiàng)功能的實(shí)際測試結(jié)果均達(dá)到預(yù)期效果。系統(tǒng)技術(shù)成熟、可行性強(qiáng)，具有廣闊的應(yīng)用前景。展望未來，該系統(tǒng)可在融入更加智能化的火災(zāi)預(yù)警算法、與其他智能消防系統(tǒng)集成等方面進(jìn)行新的探索，為保障人民生命財(cái)產(chǎn)安全做出更加顯著的貢獻(xiàn)。