基于HTML5的潮白河補水APP關鍵技術研究與應用

李 昊 馬 雪 李曉磊

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

按照京津冀協同發展和北京城市總體規劃的要求，需進一步修復潮白河流域水生態環境，提升改善潮白河流域密云水庫、懷柔水庫以下河道水生態和水環境現狀，實現多條河道同步恢復水流、地表和地下協同生態修復目標。

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

1 HTML5技術概述

HTML5是互聯網的下一代標準，是構建以及呈現互聯網內容的一種語言方式，被認為是互聯網的核心技術之一，其已經在互聯網中得到廣泛應用。與傳統的技術相比，HTML5的語法特征更加明顯，且支持離線訪問、全媒體內容展示、交互式的 2D/3D 圖像渲染，提供豐富的 API以調用移動設備的硬件，相比傳統APP開發模式，具有更優越的安全性、跨平臺訪問性。

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

2 潮白河補水APP總體設計

2.1 技術架構

本APP采用Vue+Html5+SpringCloud的前后端開發架構進行開發，系統形成了數據層、服務層、前端層的3層架構，見圖1。

圖1 APP技術架構

數據層主要是將各個來源的補水相關數據進行本地結構化存儲，并通過redis和mybatis進行數據的緩存和持久化。數據包括水情數據、水頭數據、視頻數據、日報數據、互聯網媒體數據等。

服務層是基于最新的水立方平臺搭建的。通過微服務云架構開發框架，實現系統功能的快速開發，并配置成為對應的服務，通過Nacos進行服務注冊和管理，并結合前后端分離的開發模式，統一聯調使用。通過Nginx代理后供前端引用。

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

2.2 功能設計

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

2.2.1 信息總覽

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

2.2.2 計劃方案

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

2.2.3 水情數據

水情數據包括補水期間每日地表水重要斷面的水情數據、流域地下水監測點的埋深水位數據、重要水質監測點的水質評價數據、水環境偵察兵實時水質數據。

2.2.4 視頻圖像

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

2.2.5 信息快報

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

3 關鍵技術研究與應用

3.1 補水頁面動態配置渲染

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

圖3 頁面動態配置示意圖

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

3.2 多平臺補水視頻流整合

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

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

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

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

3.3 多源補水數據異步加載

基于潮白河補水業務的相關需求，需要用最少的頁面來展示最豐富、最清晰、最直觀的數據內容。因此在信息總覽頁面需要接入很多數據信息，包括地圖點位、節點放水時間、水量、流量、水質COD值、水位、補水動態簡介等，同時還要實現對應點位的視頻圖像點選以及水頭信息的實時渲染。

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

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

圖5 雙向綁定示意圖

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

4 運行成果

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

5 結 語

潮白河補水APP的項目建設提高了潮白河生態補水的工作效率，節省了人力和行政經費支出。通過輔助用戶決策，提升生態補水管理精細化水平，減少人民的經濟損失。搭建了架構合理、功能完善、標準化、集約化、可擴展的潮白河生態補水信息服務平臺，有效避免了系統的重復建設和投資。項目中新技術的應用也獲得了良好成效，為后續水務信息化更好地支撐業務工作打下了基礎。