基于HTML5的潮白河補水APP關(guān)鍵技術(shù)研究與應(yīng)用

李 昊 馬 雪 李曉磊

(北京市智慧水務(wù)發(fā)展研究院，北京 100036)

按照京津冀協(xié)同發(fā)展和北京城市總體規(guī)劃的要求，需進(jìn)一步修復(fù)潮白河流域水生態(tài)環(huán)境，提升改善潮白河流域密云水庫、懷柔水庫以下河道水生態(tài)和水環(huán)境現(xiàn)狀，實現(xiàn)多條河道同步恢復(fù)水流、地表和地下協(xié)同生態(tài)修復(fù)目標(biāo)。

根據(jù)全市“十四五”水務(wù)發(fā)展規(guī)劃和市水務(wù)局 2021年重點任務(wù)安排，于 2021 年 3 月中旬至 5 月下旬實施春季潮白河試驗性生態(tài)補水調(diào)度工作。本次補水過程涉及區(qū)域廣、水文要素演變復(fù)雜，如何優(yōu)化補水調(diào)度方案、科學(xué)量化補水效益成為亟待解決的重要問題。研究表明利用信息化手段解決這些問題，是行之有效的手段之一。以往補水進(jìn)展僅借助PC端網(wǎng)頁查看，不便于隨時便攜地獲取信息，故通過移動APP的形式可更好地支撐補水工作和用戶業(yè)務(wù)部署。本文基于北京水務(wù)移動平臺對接的規(guī)則要求，以及系統(tǒng)快速迭代和組件通用的業(yè)務(wù)需求，在各類開發(fā)架構(gòu)中，選用了更能滿足以上標(biāo)準(zhǔn)的HTML5移動開發(fā)架構(gòu)，通過統(tǒng)一樣式和豐富的組件引用，結(jié)合流媒體播放組件等技術(shù)，實現(xiàn)補水APP的開發(fā)。

1 HTML5技術(shù)概述

HTML5是互聯(lián)網(wǎng)的下一代標(biāo)準(zhǔn)，是構(gòu)建以及呈現(xiàn)互聯(lián)網(wǎng)內(nèi)容的一種語言方式，被認(rèn)為是互聯(lián)網(wǎng)的核心技術(shù)之一，其已經(jīng)在互聯(lián)網(wǎng)中得到廣泛應(yīng)用。與傳統(tǒng)的技術(shù)相比，HTML5的語法特征更加明顯，且支持離線訪問、全媒體內(nèi)容展示、交互式的 2D/3D 圖像渲染，提供豐富的 API以調(diào)用移動設(shè)備的硬件，相比傳統(tǒng)APP開發(fā)模式，具有更優(yōu)越的安全性、跨平臺訪問性。

HTML5允許程序通過Web瀏覽器運行，并且將視頻等目前需要插件以及其他平臺才能使用的多媒體內(nèi)容也納入其中，這將使瀏覽器成為一種通用的平臺，用戶通過瀏覽器就能完成任務(wù)，為用戶帶來更便捷的體驗。HTML5包括智能表單、繪圖畫布、多媒體、地理定位、數(shù)據(jù)存儲、多線程等新特性，不僅能夠提升Web端的操作體驗，同時可以支持移動端的頁面展示，統(tǒng)一移動端網(wǎng)頁標(biāo)準(zhǔn)。

2 潮白河補水APP總體設(shè)計

2.1 技術(shù)架構(gòu)

本APP采用Vue+Html5+SpringCloud的前后端開發(fā)架構(gòu)進(jìn)行開發(fā)，系統(tǒng)形成了數(shù)據(jù)層、服務(wù)層、前端層的3層架構(gòu)，見圖1。

圖1 APP技術(shù)架構(gòu)

數(shù)據(jù)層主要是將各個來源的補水相關(guān)數(shù)據(jù)進(jìn)行本地結(jié)構(gòu)化存儲，并通過redis和mybatis進(jìn)行數(shù)據(jù)的緩存和持久化。數(shù)據(jù)包括水情數(shù)據(jù)、水頭數(shù)據(jù)、視頻數(shù)據(jù)、日報數(shù)據(jù)、互聯(lián)網(wǎng)媒體數(shù)據(jù)等。

服務(wù)層是基于最新的水立方平臺搭建的。通過微服務(wù)云架構(gòu)開發(fā)框架，實現(xiàn)系統(tǒng)功能的快速開發(fā)，并配置成為對應(yīng)的服務(wù)，通過Nacos進(jìn)行服務(wù)注冊和管理，并結(jié)合前后端分離的開發(fā)模式，統(tǒng)一聯(lián)調(diào)使用。通過Nginx代理后供前端引用。

前端層基于HTML5的形式，采用Vue為前端框架，結(jié)合Echarts、Openlayers、Vant、flv.js等前端框架，實現(xiàn)了系統(tǒng)的頁面設(shè)計、地圖渲染、圖表展示、視頻播放等功能。

2.2 功能設(shè)計

結(jié)合本次潮白河補水的業(yè)務(wù)需求和用戶使用體驗，將APP功能主要分為信息總覽、計劃方案、水情數(shù)據(jù)、視頻圖像、信息快報五大模塊，見圖2。

2.2.1 信息總覽

信息總覽為APP打開的默認(rèn)頁面，是補水情況的一個匯總展示，頁面包括當(dāng)前補水情況、水頭流經(jīng)位置、補水重要節(jié)點的地理位置、放水時間、溢流時間、補水量、流量、水位、偵察兵cod值等信息，以及點擊后可打開的關(guān)鍵點位視頻和補水動態(tài)時間軸。

2.2.2 計劃方案

計劃方案主要為支撐補水調(diào)度工作需求，提供補水調(diào)度方案和保障方案的信息查閱，保障方案中聯(lián)系人通信錄的電話快速撥打。

2.2.3 水情數(shù)據(jù)

水情數(shù)據(jù)包括補水期間每日地表水重要斷面的水情數(shù)據(jù)、流域地下水監(jiān)測點的埋深水位數(shù)據(jù)、重要水質(zhì)監(jiān)測點的水質(zhì)評價數(shù)據(jù)、水環(huán)境偵察兵實時水質(zhì)數(shù)據(jù)。

2.2.4 視頻圖像

視頻圖像主要提供補水沿線重要視頻監(jiān)控點的地理分布和在線視頻觀看，包括潮白河管理處視頻、自動化所快速部署站視頻和AI智能識別水位視頻點，提供AI智能識別水位和人工校核每日對比和評價信息。

2.2.5 信息快報

信息快報展示補水期間每日補水快報信息、補水相關(guān)社會媒體信息等。

3 關(guān)鍵技術(shù)研究與應(yīng)用

3.1 補水頁面動態(tài)配置渲染

補水過程是一個實時變化過程，相應(yīng)的監(jiān)測數(shù)據(jù)、站點圖像、地圖信息在不斷變化，這就要求系統(tǒng)能夠?qū)崟r跟進(jìn)補水最新情況，展現(xiàn)最新的補水動態(tài)。結(jié)合以往補水工作經(jīng)驗和APP開發(fā)技術(shù)積累，本次系統(tǒng)將前端智能化理念應(yīng)用在更多頁面的開發(fā)工作中，對相關(guān)前端頁面進(jìn)行頁面解構(gòu)和頁面配置，實現(xiàn)“可拆卸、可拼裝”的頁面組成模式，對于需求靈活多變的頁面，采用前后端聯(lián)動配置的形式，見圖3，結(jié)合數(shù)據(jù)庫的動態(tài)適配，實現(xiàn)“具體模塊，具體展示”的頁面渲染方式，最大限度地減少了系統(tǒng)的迭代。如信息總覽頁面，需要根據(jù)補水的動態(tài)實時更新水頭以及地圖關(guān)鍵節(jié)點的水量、水位、流速等數(shù)據(jù)，并且根據(jù)水頭位置控制圖層氣泡的展示方向，避免彼此遮蓋，該系統(tǒng)將這些信息指標(biāo)都解構(gòu)為對應(yīng)的key-value鍵值對，通過數(shù)據(jù)庫對應(yīng)字段進(jìn)行存儲，頁面訪問時，通過讀取對應(yīng)鍵值對，就可隨時根據(jù)后臺配置的字段信息進(jìn)行頁面的重新渲染，實現(xiàn)了“隨時說、立刻改、馬上變”的迭代效果，如補水水頭經(jīng)過部分水面實時渲染為深色、補水節(jié)點的懸浮窗數(shù)據(jù)實時變更等。

圖3 頁面動態(tài)配置示意圖

動態(tài)配置技術(shù)應(yīng)用于本次補水工作全流程，補水開始后，各級用戶均對補水工作格外關(guān)注，由于各級用戶關(guān)注點不盡相同，所以對于APP的內(nèi)容展示需求也在不斷變化，無論是每天頁面數(shù)據(jù)的更新，還是隨著補水工作層層遞進(jìn)而進(jìn)行擴充的水位、水質(zhì)數(shù)據(jù)項，以及地圖和水頭信息的實時更新渲染，均通過動態(tài)配置模式實現(xiàn)了用戶需求提出后最快速度實現(xiàn)頁面迭代，隨說隨改，免去了等待頁面開發(fā)和服務(wù)器部署的時間，提高了補水信息的更新效率。

3.2 多平臺補水視頻流整合

本次生態(tài)補水APP新增多處視頻監(jiān)測站點，在APP中可以觀看和控制對應(yīng)站點的視頻圖像。圖像來自多個視頻流提供平臺，對于部分帶有播放頁面的平臺，可通過API接口獲取平臺中對應(yīng)視頻的H5播放頁面，通過網(wǎng)頁層面接入APP中。對于沒有播放頁面的平臺，采用接口獲取對應(yīng)圖像的視頻流地址，再通過H5視頻播放插件來播放對應(yīng)視頻流，實現(xiàn)視頻的接入。實現(xiàn)多平臺多源視頻流的整合匯總，最終通過統(tǒng)一接口進(jìn)行在線播放，見圖4。

圖4 APP視頻流整合功能示例

當(dāng)前主要視頻流格式分為hls、flv、rtmp，通過對比后發(fā)現(xiàn)，flv視頻流播放時的延遲最低，故在API接口中選用flv格式視頻流，前端頁面通過flv.js組件實現(xiàn)視頻的播放和控制。flv.js是HTML5 Flash視頻(FLV)播放器，工作原理是將FLV文件流轉(zhuǎn)換為ISO BMFF(分段MP4)片段，然后通過媒體源擴展API將MP4片段提供給HTML5元素。其特征是具有H.264+AAC/MP3編解碼器播放功能的FLV容器，支持多部分分段視頻播放、低延遲直播流實時流播放，與Chrome、FireFox、Safari10、IE11和Edge等瀏覽器都能很好地兼容。通過npm下載后，頁面按需引用即可，部分代碼示例如下：

通過多平臺補水視頻流的整合應(yīng)用，潮白河補水APP在補水期間共接入來自多家平臺的共計32路視頻圖像，全部實現(xiàn)整合后統(tǒng)一入口訪問，并且接入了AI水位識別視頻流，各級用戶通過APP的視頻播放，可隨時、直觀地掌握補水關(guān)鍵節(jié)點的情況。對于部分無視頻站點但比較關(guān)注的位置，在業(yè)務(wù)人員提出相關(guān)需求后，結(jié)合視頻快速部署站的架設(shè)，通過視頻流統(tǒng)一整合后可快速接入平臺，補水期間系統(tǒng)視頻功能的穩(wěn)定性、實時性、直觀性保障良好，有力地支撐了補水期間實時監(jiān)控的調(diào)度需求。

3.3 多源補水?dāng)?shù)據(jù)異步加載

基于潮白河補水業(yè)務(wù)的相關(guān)需求，需要用最少的頁面來展示最豐富、最清晰、最直觀的數(shù)據(jù)內(nèi)容。因此在信息總覽頁面需要接入很多數(shù)據(jù)信息，包括地圖點位、節(jié)點放水時間、水量、流量、水質(zhì)COD值、水位、補水動態(tài)簡介等，同時還要實現(xiàn)對應(yīng)點位的視頻圖像點選以及水頭信息的實時渲染。

對于多源數(shù)據(jù)接口獲取的頁面數(shù)據(jù)，選擇合適的頁面加載方式顯得尤為重要。傳統(tǒng)的頁面加載方式是同步加載，即分別讀取各類數(shù)據(jù)信息，都讀取之后統(tǒng)一生成頁面，這樣的好處是頁面所有內(nèi)容展示是同步的，缺點是如果有某類數(shù)據(jù)接口獲取比較慢，頁面就需要等待其獲取完畢后再渲染。考慮到補水APP數(shù)據(jù)來源復(fù)雜，部分?jǐn)?shù)據(jù)可能獲取較慢，不能保證全部數(shù)據(jù)同時加載完成，因此采用異步加載頁面的技術(shù)結(jié)合vue.js的雙向綁定技術(shù)，可以很好地實現(xiàn)該需求。

異步加載渲染是基于MVVM框架的動態(tài)綁定技術(shù)實現(xiàn)的，見圖5，它有兩個方向：一是將模型轉(zhuǎn)化成視圖，即將后端傳遞的數(shù)據(jù)轉(zhuǎn)化成所看到的頁面，實現(xiàn)的方式是數(shù)據(jù)綁定；二是將視圖轉(zhuǎn)化成模型，即將所看到的頁面轉(zhuǎn)化成后端的數(shù)據(jù)，實現(xiàn)的方式是DOM事件監(jiān)聽，這兩個方向都實現(xiàn)的，稱之為數(shù)據(jù)的雙向綁定。

圖5 雙向綁定示意圖

在信息總覽頁面中，將頁面數(shù)據(jù)根據(jù)類別分為不同的數(shù)據(jù)模塊，各模塊的接口各自獨立，異步執(zhí)行。對于部分外部共享的數(shù)據(jù)，待其獲取完畢后，再通過動態(tài)綁定的方式加載進(jìn)來，各模塊讀取后臺數(shù)據(jù)后，通過動態(tài)渲染修改本體視圖中的數(shù)據(jù)。對于系統(tǒng)用戶來說，訪問時不會因為某個接口響應(yīng)慢而進(jìn)行等待，優(yōu)化了用戶體驗。對于瀏覽器而言，也免去了頁面的多次重載和阻塞，大幅提高了頁面加載速度。

4 運行成果

潮白河補水APP是北京水務(wù)補水調(diào)度以來第一次結(jié)合補水調(diào)度數(shù)據(jù)、實時監(jiān)測數(shù)據(jù)、在線視頻流數(shù)據(jù)、互聯(lián)網(wǎng)爬取數(shù)據(jù)等多源異構(gòu)數(shù)據(jù)融合，形成的多形式、多角度、多功能的補水調(diào)度移動系統(tǒng)。系統(tǒng)自運行以來表現(xiàn)穩(wěn)定，服務(wù)了眾多補水業(yè)務(wù)工作人員，用戶反映良好。在潮白河生態(tài)補水期間，借助移動端APP高便攜性和應(yīng)用輕便等特點，結(jié)合AI視頻智能識別的高效水情信息獲取，以更便捷、更直觀的方式服務(wù)于生態(tài)補水各相關(guān)單位，為潮白河生態(tài)補水工作的調(diào)度和決策提供了重要支撐。

5 結(jié) 語

潮白河補水APP的項目建設(shè)提高了潮白河生態(tài)補水的工作效率，節(jié)省了人力和行政經(jīng)費支出。通過輔助用戶決策，提升生態(tài)補水管理精細(xì)化水平，減少人民的經(jīng)濟損失。搭建了架構(gòu)合理、功能完善、標(biāo)準(zhǔn)化、集約化、可擴展的潮白河生態(tài)補水信息服務(wù)平臺，有效避免了系統(tǒng)的重復(fù)建設(shè)和投資。項目中新技術(shù)的應(yīng)用也獲得了良好成效，為后續(xù)水務(wù)信息化更好地支撐業(yè)務(wù)工作打下了基礎(chǔ)。