李 昊 馬 雪 李曉磊

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

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

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

1 HTML5技術(shù)概述

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

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

2 潮白河補(bǔ)水APP總體設(shè)計(jì)

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ù)層主要是將各個(gè)來(lái)源的補(bǔ)水相關(guān)數(shù)據(jù)進(jìn)行本地結(jié)構(gòu)化存儲(chǔ)，并通過(guò)redis和mybatis進(jìn)行數(shù)據(jù)的緩存和持久化。數(shù)據(jù)包括水情數(shù)據(jù)、水頭數(shù)據(jù)、視頻數(shù)據(jù)、日?qǐng)?bào)數(shù)據(jù)、互聯(lián)網(wǎng)媒體數(shù)據(jù)等。

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

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

2.2 功能設(shè)計(jì)

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

2.2.1 信息總覽

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

2.2.2 計(jì)劃方案

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

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

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

2.2.4 視頻圖像

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

2.2.5 信息快報(bào)

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

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

3.1 補(bǔ)水頁(yè)面動(dòng)態(tài)配置渲染

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

圖3 頁(yè)面動(dòng)態(tài)配置示意圖

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

3.2 多平臺(tái)補(bǔ)水視頻流整合

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

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

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

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

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

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

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

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

圖5 雙向綁定示意圖

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

4 運(yùn)行成果

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

5 結(jié) 語(yǔ)

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