基于智慧水務的水源調配APP關鍵技術研究應用

李昊 彭麗

摘? 要：移動APP因具有高便攜性和使用方便的特點，可以隨時隨地輔助領導決策和業務部署，逐漸成為重要的信息化支撐工具。隨著智慧水務工作的開展和全市水資源調度工作的推進，建設支持多終端的系統工具已是大勢所趨，文章結合水資源調度APP的開發應用案例，基于組件化構建、調令智能關聯、視頻流整合等技術提出了相應的思路和方案，為水務信息化建設提供了有力支撐。

關鍵詞：智慧水務;水資源調度;HTML5

中圖分類號：TP311? ? ? ? ? ? ? ? ? 文獻標識碼：A文章編號：2096-4706（2021）19-0007-06

Research and Application of Key Technologies of Water Source Allocation APP Based on Smart Water

LI Hao， PENG Li

（Beijing Research Institute of Smart Water， Beijing? 100036， China）

Abstract： Because of its high portability and convenient use， mobile APP can assist leaders decision-making and business deployment anytime and anywhere， and has gradually become an important informatization support tool. With the development of smart water affairs and the promotion of water resources dispatching in the city， it is a general trend to build a system tool supporting multi terminals. Combined with the development and application case of water resources dispatching APP， this paper puts forward corresponding ideas and schemes based on component construction， dispatching intelligent association， video stream integration and other technologies， which provides a strong support for the construction of water affairs informatization.

Keywords： smart water; water resources dispatching; HTML5

0? 引? 言

河湖水系是水資源的載體，是生態環境的重要組成部分，也是經濟社會發展的重要支撐。2021年北京市降水偏豐，地表水資源相對豐沛。截至目前，密云水庫蓄水量充足、水質優良，比較適宜利用其豐足的蓄水量系統性地實施生態補水。依據領導指示，我們要抓住今年地表水資源相對豐沛的難得機遇，統籌推進山水林田湖草沙綜合治理，堅持上下游、干支流、左右岸共同發力，最大限度優化配置調度，最大范圍實現地表水、地下水協同修復。在保障全市供水安全和密云水庫運行安全的基礎上，統籌實施多水源生態補水，進一步擴大地下水回補區域和地表水河網受水范圍。充分利用河網、蓄滯洪區、坑塘、濕地、農田渠系回補地下水，實現“藏水于地”、三大流域貫通入海，推動京津冀協同發展。

水資源調度是水資源管理工作的重要內容之一，是水資源管理決策由規劃、計劃和方案到水資源實施、配置的具體手段，是落實江河流域水量分配方案并配置到具體用水戶的管理過程[1]。本次水資源調度涉及全市多區縣、多流域，在具體工作的開展中，如何優化調度方案、科學量化效益成為亟待解決的重要問題。采用信息化技術來解決這些問題，是一種行之有效的方法。由于移動端APP具有高便攜性和使用方便的特點，可以更好地支撐水資源調度配置工作，便于工作人員在調度期間對各項信息的獲取、展示，隨時隨地支撐領導決策和業務部署。這就需要技術部門充分結合智慧水務基礎底座能力，快速開發一款滿足業務需求、兼容多終端的調度配置APP，在最短的時間內為全市水資源的調度配置工作提供信息化支撐。

1? 系統功能設計

全市水資源調度配置APP是一款用于輔助領導水資源調度決策的信息系統。系統設計以水資源調度配置規劃為主體，將感知數據、實時監測數據、日報統計數據、規劃調度數據、視頻監控數據、GIS地圖數據等多源異構數據有機地結合起來，滿足不同業務場景下的多種業務需求，如水資源配置、分流域調度、流域內視頻監控、水務工程總覽、信息快報查看等。使得相關領導和業務人員可以隨時隨地了解水資源配置情況和補水進展情況，并及時采取相應的對策。

系統的功能設計如圖1所示，通過對業務的梳理分析，系統的功能設計基于不同的業務場景，分為水源配置、流域調度、水務工程、數據查看、信息快報五大功能模塊。

1.1? 水源配置

以地圖和報表相結合的方式，分水源、分用途對全市水資源配置調度情況進行全量展示。水資源配置總覽圖和水資源配置計劃與現狀對比表的聯動顯示，便于工作人員及時掌控各類水資源的配置動態。結合全市水資源配置歷程統計圖，以柱形圖的形式直觀清楚地展示出每日調度歷程，輔助領導第一時間掌握整體形勢。

1.2? 流域調度

將全市水資源調度內容分為對永定河、潮白河、北運河三個流域進行信息聚合和展示。功能頁面基于GIS地圖進行制作，在地圖上可清晰地看到各流域的調度范圍、相關河道及管網的貫通狀態、補水的最新水頭流經情況等。頁面功能分為視頻監控和站點總覽兩個模塊：

（1）視頻監控。展示流域內所有視頻監測點的地理分布，以及對應監控視頻的在線觀看和云臺控制等，可幫助工作人員直觀地掌握各站點的運轉情況。

（2）站點總覽。以圖表結合的方式，展示流域內關鍵調度節點的地理分布和關鍵指標數據，如流量、水位、水量等，所有數據均基于實時監測數據和每日調度快報進行動態更新。同時根據新形勢下智慧水務對于數據匯聚和展示的要求，將圖、數、多媒體相結合，即在地圖上點擊對應站點后，可進入該站點的詳情頁面，匯總展示站點相關的視頻監控信息、最新水情信息、周邊地下水埋深及各類過程線圖，實現針對性地“一屏總覽，一手掌握”。通過技術整合各類多源異構數據，實現靜態數據+動態數據+空間數據+多媒體數據的“一網全收”。

1.3? 水務工程

對調度配置工作中涉及的重點水務工程（如密云水庫、官廳水庫等）進行信息匯總展示，便于工作人員實時掌握水務工程狀況。頁面分為水情總覽、工程運行、水環境、遙感影像、視頻監控五個模塊：

（1）水情總覽。主要展示水務工程的最新水情信息，如水位、蓄水量、庫容、每日入庫水量、出庫水量、年內累計水量以及降雨等信息。通過動態水球圖和表格欄目相結合的方式，增加數據的可讀性。

（2）工程運行。對水務工程運行狀況進行展示，包括運行分析報告、監測報告等文檔的在線瀏覽。

（3）水環境。以圖標結合的形式展示水務工程的相關水環境監測數據，包括水溫、pH酸堿度、溶解氧、電導率、濁度、總磷、總氮、COD、氨氮、葉綠素、藍綠藻等指標。

（4）遙感影像。將水務工程歷年重要的遙感影像圖（如密云水庫高水位運行影像圖）進行圖像整合，并且通過頁面滑塊拖拽的方式，以時間軸漸變形式展示遙感影像的逐年變化。

（5）視頻監控。展示水務工程自身相關的視頻監測站點列表，包括監控視頻的在線觀看和云臺控制等。

1.4? 數據查看

對永定河、潮白河、北運河流域內的水文監測數據進行展示，包括各個站點的每日統計數據和實時監測數據。頁面分為地表水、地下水、視頻監控三個模塊：

（1）地表水。以列表的形式展示流域內重要斷面和口門的地表水數據，包括實時水位、每日8時水位、8時流量等。工作人員可以通過實時水位過程線圖，清楚地了解某點位水位的實時變化情況。

（2）地下水。以列表形式展示配置調度相關地下水監測點的最新監測數據，包括埋深和水位。

（3）視頻監控：以列表的形式按類別展示流域內所有視頻監控站點情況，如潮白河流域的入流監控點、支流節點監控點、干流節點監控點等，并提供所有監控視頻的在線觀看功能。

1.5? 信息快報

以列表的形式對水資源調度配置期間相關的文檔報告和信息動態進行統一展示，包括調度令、調度動態、補水快報、地下水簡報四個模塊：

（1）調度令。通過文字截取功能，分析出調令中所涉及實施指導方面的調令內容，并通過列表的形式進行統一展示，便于工作人員及時查看最新調令和歷史調令。

（2）調度動態。以列表的形式展示每日水資源調度動態，點擊后可查看動態詳情，包括補水相關信息、團城湖樞紐信息、水庫水源地信息、南水信息、新增有水河湖、五大流域出境水量、自來水廠取供水等動態，可供工作人員宏觀掌控全市調度動態，支撐其業務決策。

（3）補水快報。永定河、潮白河、北運河每日補水快報文檔列表，提供PDF文檔在線瀏覽功能。

（4）地下水簡報。全市平原區地下水動態月報列表查看，提供PDF文檔在線瀏覽功能。

2? 系統架構設計

智慧水務的本質是一種具有綜合性、整體性的行業信息化發展過程[2]。基于新形勢下智慧水務的任務要求，即：“滿足建立微服務管理、運營體系，實現數據功能化、業務服務化，為水務場景的建設、管理、服務、運營提供統一的支撐”，以及“建立統一的移動端數據服務功能，提供統一的移動APP、應用小程序集成運行環境，針對安卓、H5等主流移動應用提供無縫整合和集成能力”。結合移動開發技術從原生應用轉向以HTML5標準為基礎的WebAPP[3]的技術路線。水資源調度APP采用最新的技術架構，如圖2所示，系統選用HTML5+Vue+SpringCloud的技術棧作為基礎，融合了WebGis、Echarts、RabitMQ、Redis、MySQL等框架和工具。形成數據層、服務層、前端層的三層架構。

數據層是系統的基礎部分，主要是將與水資源調度配置相關的多源異構數據進行統一存儲，通過MySQL、Redis和Mybatis的有機結合，滿足數據中心數倉建設要求。并充分運用數據中心數據中臺能力，構建APP數據總體框架、數據接入、數據應用體系，按照數據中心管理統一納管要求，分配數據存儲及應用空間。同時基于智慧水務數據中心、感知中心的平臺匯聚能力，對于感知類數據，通過數據接口定制和共享交換實現了各類數據的交換整合，滿足系統的數據需求。

服務層通過基于SpringCloud的水立方微服務平臺進行系統功能的快速搭建，將整個系統分為若干個微小服務，服務之間互相協調、互相配合。每個服務運行于獨立的進程中，且都是圍繞著具體的業務構建而成，能夠獨立地部署到生產環境中。通過Nacos對服務進行注冊配置，結合前后端分離的開發模式，通過Nginx代理后供前端調用。整個服務層的架設滿足智慧水務基礎底座的技術架構要求，豐富了基礎底座的使用場景和應用經驗。

前端層是系統APP部分的建設和整體的交互模塊，為了實現與北京水務APP已有架構的無縫銜接，滿足其他終端跨平臺支持的技術需求，以及滿足系統快速迭代和組件通用的業務需求，系統前端層采用基于HTML5的開發模式，選擇Vue作為技術框架，引入HTML5技術新特性[4]、WebGis、Echarts和流媒體播放等前端技術，輔以組件化、模塊化、自適應的前端開發理念。圖表、地圖、視頻、文檔等多結構多模式頁面功能的引入，滿足了新形勢下智慧水務APP開發所需的各項能力。

3? 關鍵技術研究與應用

3.1? 基于Vue的頁面組件化設計和響應式渲染

在地圖上點擊站點后會打開對應站點的詳情頁面，把各類多源異構數據通過技術整合，實現靜態數據+動態數據+空間數據+多媒體數據的“一網打盡”，用戶除了在頁面總體查看地理信息和調度報告外，還可以通過點擊對應站點，查看與該站點對應的監控視頻、最新水位流量數據、各類信息過程線（水位、流量、水量、地下水），以及查看站點附近是否有對應的地下水監測站、其對比調度工作前的埋深變幅等。

針對該頁面需求，傳統的頁面開發模式是基于DOM進行操作，DOM即是文檔對象模型，它是一種與平臺和語言無關的應用程序接口，可以動態地訪問程序和腳本，更新其內容。如圖3所示，以往的展現流程是：點擊站點—后臺返回站點對應數據—頁面根據數據生成DOM元素—掛載到頁面上，每一個功能模塊都需要重新渲染頁面的DOM元素，才能進行刪除、添加的操作，以這種形式渲染頁面速度較慢，且不能靈活配置，必須借助js代碼反復判斷，代碼量冗長。通過Vue可以很好地解決該問題，Vue是基于MVVM模式的輕量級響應式框架[5]，其渲染頁面的機制是虛擬DOM（即先將數據模型進行數據對比，然后根據配置的邏輯進行虛擬DOM的變更，之后再渲染到頁面上），這種模式渲染頁面次數少、響應快、代碼清晰，并且通過Vue開發的頁面可以進行組件化封裝，提高功能的復用性。

3.2? 基于Echarts的數據突變值獲取與智能調令關聯

在站點信息匯總頁面中存在各類信息的過程線，以流量為例，通過流量過程線用戶可以了解到調度期間該站點的流量變化，從而得知站點目前水情狀況。但在實際工作中，根據不同時期調度令的變化，部分站點可能會存在大幅度的流量變動，如調度令指示要打開第三溢洪道，并且將流量調至100 m?/s，屆時該處過程線就會有高達100 m?/s的突變值出現。對于不了解調令的用戶，會對大幅的突變感到不解，對于關心調令的用戶，也不能刻板地將過程線的所有突變值皆視為由調令所致。針對這種情況，系統采用基于Echarts的數據突變值獲取與智能調令關聯的方法。

Echarts是一款非常優秀的可視化圖表空間，它是使用JavaScript實現的開源可視化庫，涵蓋各行各業的圖表，滿足各種各樣的需求，其兼容當前絕大部分瀏覽器及多種設備。Echarts的設計是面向數據的，基于數據來驅動圖形的生成，通過改變數據來改變圖表的表現形式[6]。在Echarts一組過程線圖的渲染中，是不能對部分點位進行特殊渲染的，但可以在同一個頁面的同一個實例中渲染多個系列（series），系列是指一組數值以及他們映射成的圖。對此，可采用圖4所示的邏輯流程進行設計，即系統將涉及突變值的過程線圖，分別渲染兩個系列，即series01——常規流量線圖，series02——涉及突變值的點位線圖。再將兩者疊加，就能實現一條線段中突變值變大閃爍的效果。再通過對突變值所在點位綁定Echarts的click事件，傳入對應的時間、名稱等參數，即可實現點擊后的邏輯處理。了解到這個方法，再加上渲染前的數據處理和點擊后的調令查詢，即可實現點擊過程線中的突變值，查詢匹配出對應調令的功能，即：將流量過程線進行數組化處理、循環判斷數組中下一項變化幅度大于一定百分比和絕對值的坐標，進行記錄。Echarts中生成兩個series，一個數據源是常規數組，一個數據源是突變數組和相關樣式，綁定突變點位的點擊事件，點擊后根據參數查出該日期前若干天是否有該點位的調令，有則展示，無則跳過。最終達成的應用效果如圖5所示。

3.3? 多源異構視頻流整合及動態配置

執行調度業務需要查看各流域內許多重要節點的視頻監控圖像（需要提供在線監控），并且根據水源配置時要滿足隨時新增視頻點的要求，APP對于視頻圖像功能的支持是十分必要的。系統中的圖像來自多個視頻流提供平臺（如騰訊云、螢石云、海康云等），需要對這些多源異構的視頻流進行統一整合及動態配置。對于自帶播放頁面的平臺，可通過調用平臺H5播放頁面的形式進行視頻播放。對于支持視頻流接口的平臺，可在前端頁面中對相關接口按需調用，獲取對應的格式視頻流，再引入頁面播放器組件來實現視頻的在線播放功能。

基于水務實時監控的業務需求，系統視頻流要滿足高清晰、低延遲的標準。當前主要視頻流格式分為hls、flv、rtmp等幾種，flv憑借其體積小巧、CPU占有率低、視頻質量良好等特點而在網絡上盛行[7]。通過對比，本系統選用flv作為視頻流的傳輸格式。頁面播放器組件使用flv.js來實現。flv.js視頻播放器是采用純原生JavaScript開發，沒有用到Flash，有著良好的兼容性和低開銷，且支持分段視頻播放、低延遲直播流實時播放。系統中調用該組件的部分代碼示例如下：

function flv_load（） {

var urlinput = document.getElementsByName（'urlinput'）[0];

var xhr = new XMLHttpRequest（）;

xhr.open（'GET'， urlinput.value， true）;

xhr.onload = function （e） {

var player;

var element = document.getElementsByName（'videoElement'）[0];

if （typeof player ！== "undefined"） {

if （player ！= null） {

player.unload（）;

player.detachMediaElement（）;

player.destroy（）;

player = null;

}

}

player = flvjs.createPlayer（{

type： 'mp4'，

url： urlinput.value

}）;

player.attachMediaElement（element）;

player.load（）;

}

xhr.send（）;

}

通過上述視頻解決方案，系統的視頻欄目接入了來自多家平臺的視頻圖像，各類視頻在調度工作期間均播放良好，如圖6所示，系統用戶通過視頻實時監控，隨時隨地掌握著調度節點的最新通水情況、水位現狀、流量流速等信息。基于此套方案，系統也支持根據相關需求隨時部署假設視頻站點，實現了視頻節點的快速接入和靈活覆蓋。

4? 結? 論

在智慧水務的整體框架下，北京水務系統的建設都要引用更能滿足要求的模式和方法，全市水資源調度配置APP自運行以來，系統運行平穩，用戶反映良好。項目的建設提高了水資源調度的工作效率，節省了人力、物力和財力;通過輔助領導決策，提升管理精細化水平，減少人民的經濟損失;搭建了架構合理、功能完善，標準化、集約化、可擴展的多終端系統框架，可有效避免系統的重復建設和投資。

參考文獻：

[1] 鄧坤，張璇，楊永生，等.流域水資源調度研究綜述 [J].水利經濟，2011，29（6）：23-27+70.

[2] 張小娟，唐錨，劉梅，等.北京市智慧水務建設構想 [J].水利信息化，2014（1）：64-68.

[3] 黃悅深.基于HTML5的移動WebApp開發 [J].圖書館雜志，2014（07）：72-77.

[4] 黃永慧，陳程凱.HTML5在移動應用開發上的應用前景 [J].計算機技術與發展，2013，23（7）：207-210.

[5] 朱二華.基于Vue.js的Web前端應用研究 [J].科技與創新，2017（20）：119-121.

[6] 王子毅，張春海.基于ECharts的數據可視化分析組件設計實現 [J].微型機與應用，2016，35（14）：46-48+51.

[7] 王奎澎.Flv文件格式及其嵌入式應用 [J].計算機系統應用，2010，19（3）：190-193.

作者簡介：李昊（1990—），男，漢族，河北石家莊人，工程師，學士學位，研究方向：水務信息化;彭麗（1996—），女，漢族，北京人，助理工程師，學士學位，研究方向：水務信息化。