李昊 彭麗

摘? 要：移動APP因具有高便攜性和使用方便的特點(diǎn)，可以隨時(shí)隨地輔助領(lǐng)導(dǎo)決策和業(yè)務(wù)部署，逐漸成為重要的信息化支撐工具。隨著智慧水務(wù)工作的開展和全市水資源調(diào)度工作的推進(jìn)，建設(shè)支持多終端的系統(tǒng)工具已是大勢所趨，文章結(jié)合水資源調(diào)度APP的開發(fā)應(yīng)用案例，基于組件化構(gòu)建、調(diào)令智能關(guān)聯(lián)、視頻流整合等技術(shù)提出了相應(yīng)的思路和方案，為水務(wù)信息化建設(shè)提供了有力支撐。

關(guān)鍵詞：智慧水務(wù);水資源調(diào)度;HTML5

中圖分類號：TP311? ? ? ? ? ? ? ? ? 文獻(xiàn)標(biāo)識碼：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? 引? 言

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

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

1? 系統(tǒng)功能設(shè)計(jì)

全市水資源調(diào)度配置APP是一款用于輔助領(lǐng)導(dǎo)水資源調(diào)度決策的信息系統(tǒng)。系統(tǒng)設(shè)計(jì)以水資源調(diào)度配置規(guī)劃為主體，將感知數(shù)據(jù)、實(shí)時(shí)監(jiān)測數(shù)據(jù)、日報(bào)統(tǒng)計(jì)數(shù)據(jù)、規(guī)劃調(diào)度數(shù)據(jù)、視頻監(jiān)控?cái)?shù)據(jù)、GIS地圖數(shù)據(jù)等多源異構(gòu)數(shù)據(jù)有機(jī)地結(jié)合起來，滿足不同業(yè)務(wù)場景下的多種業(yè)務(wù)需求，如水資源配置、分流域調(diào)度、流域內(nèi)視頻監(jiān)控、水務(wù)工程總覽、信息快報(bào)查看等。使得相關(guān)領(lǐng)導(dǎo)和業(yè)務(wù)人員可以隨時(shí)隨地了解水資源配置情況和補(bǔ)水進(jìn)展情況，并及時(shí)采取相應(yīng)的對策。

系統(tǒng)的功能設(shè)計(jì)如圖1所示，通過對業(yè)務(wù)的梳理分析，系統(tǒng)的功能設(shè)計(jì)基于不同的業(yè)務(wù)場景，分為水源配置、流域調(diào)度、水務(wù)工程、數(shù)據(jù)查看、信息快報(bào)五大功能模塊。

1.1? 水源配置

以地圖和報(bào)表相結(jié)合的方式，分水源、分用途對全市水資源配置調(diào)度情況進(jìn)行全量展示。水資源配置總覽圖和水資源配置計(jì)劃與現(xiàn)狀對比表的聯(lián)動顯示，便于工作人員及時(shí)掌控各類水資源的配置動態(tài)。結(jié)合全市水資源配置歷程統(tǒng)計(jì)圖，以柱形圖的形式直觀清楚地展示出每日調(diào)度歷程，輔助領(lǐng)導(dǎo)第一時(shí)間掌握整體形勢。

1.2? 流域調(diào)度

將全市水資源調(diào)度內(nèi)容分為對永定河、潮白河、北運(yùn)河三個(gè)流域進(jìn)行信息聚合和展示。功能頁面基于GIS地圖進(jìn)行制作，在地圖上可清晰地看到各流域的調(diào)度范圍、相關(guān)河道及管網(wǎng)的貫通狀態(tài)、補(bǔ)水的最新水頭流經(jīng)情況等。頁面功能分為視頻監(jiān)控和站點(diǎn)總覽兩個(gè)模塊：

（1）視頻監(jiān)控。展示流域內(nèi)所有視頻監(jiān)測點(diǎn)的地理分布，以及對應(yīng)監(jiān)控視頻的在線觀看和云臺控制等，可幫助工作人員直觀地掌握各站點(diǎn)的運(yùn)轉(zhuǎn)情況。

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

1.3? 水務(wù)工程

對調(diào)度配置工作中涉及的重點(diǎn)水務(wù)工程（如密云水庫、官廳水庫等）進(jìn)行信息匯總展示，便于工作人員實(shí)時(shí)掌握水務(wù)工程狀況。頁面分為水情總覽、工程運(yùn)行、水環(huán)境、遙感影像、視頻監(jiān)控五個(gè)模塊：

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

（2）工程運(yùn)行。對水務(wù)工程運(yùn)行狀況進(jìn)行展示，包括運(yùn)行分析報(bào)告、監(jiān)測報(bào)告等文檔的在線瀏覽。

（3）水環(huán)境。以圖標(biāo)結(jié)合的形式展示水務(wù)工程的相關(guān)水環(huán)境監(jiān)測數(shù)據(jù)，包括水溫、pH酸堿度、溶解氧、電導(dǎo)率、濁度、總磷、總氮、COD、氨氮、葉綠素、藍(lán)綠藻等指標(biāo)。

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

（5）視頻監(jiān)控。展示水務(wù)工程自身相關(guān)的視頻監(jiān)測站點(diǎn)列表，包括監(jiān)控視頻的在線觀看和云臺控制等。

1.4? 數(shù)據(jù)查看

對永定河、潮白河、北運(yùn)河流域內(nèi)的水文監(jiān)測數(shù)據(jù)進(jìn)行展示，包括各個(gè)站點(diǎn)的每日統(tǒng)計(jì)數(shù)據(jù)和實(shí)時(shí)監(jiān)測數(shù)據(jù)。頁面分為地表水、地下水、視頻監(jiān)控三個(gè)模塊：

（1）地表水。以列表的形式展示流域內(nèi)重要斷面和口門的地表水?dāng)?shù)據(jù)，包括實(shí)時(shí)水位、每日8時(shí)水位、8時(shí)流量等。工作人員可以通過實(shí)時(shí)水位過程線圖，清楚地了解某點(diǎn)位水位的實(shí)時(shí)變化情況。

（2）地下水。以列表形式展示配置調(diào)度相關(guān)地下水監(jiān)測點(diǎn)的最新監(jiān)測數(shù)據(jù)，包括埋深和水位。

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

1.5? 信息快報(bào)

以列表的形式對水資源調(diào)度配置期間相關(guān)的文檔報(bào)告和信息動態(tài)進(jìn)行統(tǒng)一展示，包括調(diào)度令、調(diào)度動態(tài)、補(bǔ)水快報(bào)、地下水簡報(bào)四個(gè)模塊：

（1）調(diào)度令。通過文字截取功能，分析出調(diào)令中所涉及實(shí)施指導(dǎo)方面的調(diào)令內(nèi)容，并通過列表的形式進(jìn)行統(tǒng)一展示，便于工作人員及時(shí)查看最新調(diào)令和歷史調(diào)令。

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

（3）補(bǔ)水快報(bào)。永定河、潮白河、北運(yùn)河每日補(bǔ)水快報(bào)文檔列表，提供PDF文檔在線瀏覽功能。

（4）地下水簡報(bào)。全市平原區(qū)地下水動態(tài)月報(bào)列表查看，提供PDF文檔在線瀏覽功能。

2? 系統(tǒng)架構(gòu)設(shè)計(jì)

智慧水務(wù)的本質(zhì)是一種具有綜合性、整體性的行業(yè)信息化發(fā)展過程[2]?；谛滦蝿菹轮腔鬯畡?wù)的任務(wù)要求，即：“滿足建立微服務(wù)管理、運(yùn)營體系，實(shí)現(xiàn)數(shù)據(jù)功能化、業(yè)務(wù)服務(wù)化，為水務(wù)場景的建設(shè)、管理、服務(wù)、運(yùn)營提供統(tǒng)一的支撐”，以及“建立統(tǒng)一的移動端數(shù)據(jù)服務(wù)功能，提供統(tǒng)一的移動APP、應(yīng)用小程序集成運(yùn)行環(huán)境，針對安卓、H5等主流移動應(yīng)用提供無縫整合和集成能力”。結(jié)合移動開發(fā)技術(shù)從原生應(yīng)用轉(zhuǎn)向以HTML5標(biāo)準(zhǔn)為基礎(chǔ)的WebAPP[3]的技術(shù)路線。水資源調(diào)度APP采用最新的技術(shù)架構(gòu)，如圖2所示，系統(tǒng)選用HTML5+Vue+SpringCloud的技術(shù)棧作為基礎(chǔ)，融合了WebGis、Echarts、RabitMQ、Redis、MySQL等框架和工具。形成數(shù)據(jù)層、服務(wù)層、前端層的三層架構(gòu)。

數(shù)據(jù)層是系統(tǒng)的基礎(chǔ)部分，主要是將與水資源調(diào)度配置相關(guān)的多源異構(gòu)數(shù)據(jù)進(jìn)行統(tǒng)一存儲，通過MySQL、Redis和Mybatis的有機(jī)結(jié)合，滿足數(shù)據(jù)中心數(shù)倉建設(shè)要求。并充分運(yùn)用數(shù)據(jù)中心數(shù)據(jù)中臺能力，構(gòu)建APP數(shù)據(jù)總體框架、數(shù)據(jù)接入、數(shù)據(jù)應(yīng)用體系，按照數(shù)據(jù)中心管理統(tǒng)一納管要求，分配數(shù)據(jù)存儲及應(yīng)用空間。同時(shí)基于智慧水務(wù)數(shù)據(jù)中心、感知中心的平臺匯聚能力，對于感知類數(shù)據(jù)，通過數(shù)據(jù)接口定制和共享交換實(shí)現(xiàn)了各類數(shù)據(jù)的交換整合，滿足系統(tǒng)的數(shù)據(jù)需求。

服務(wù)層通過基于SpringCloud的水立方微服務(wù)平臺進(jìn)行系統(tǒng)功能的快速搭建，將整個(gè)系統(tǒng)分為若干個(gè)微小服務(wù)，服務(wù)之間互相協(xié)調(diào)、互相配合。每個(gè)服務(wù)運(yùn)行于獨(dú)立的進(jìn)程中，且都是圍繞著具體的業(yè)務(wù)構(gòu)建而成，能夠獨(dú)立地部署到生產(chǎn)環(huán)境中。通過Nacos對服務(wù)進(jìn)行注冊配置，結(jié)合前后端分離的開發(fā)模式，通過Nginx代理后供前端調(diào)用。整個(gè)服務(wù)層的架設(shè)滿足智慧水務(wù)基礎(chǔ)底座的技術(shù)架構(gòu)要求，豐富了基礎(chǔ)底座的使用場景和應(yīng)用經(jīng)驗(yàn)。

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

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

3.1? 基于Vue的頁面組件化設(shè)計(jì)和響應(yīng)式渲染

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

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

3.2? 基于Echarts的數(shù)據(jù)突變值獲取與智能調(diào)令關(guān)聯(lián)

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

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

3.3? 多源異構(gòu)視頻流整合及動態(tài)配置

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

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

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（）;

}

通過上述視頻解決方案，系統(tǒng)的視頻欄目接入了來自多家平臺的視頻圖像，各類視頻在調(diào)度工作期間均播放良好，如圖6所示，系統(tǒng)用戶通過視頻實(shí)時(shí)監(jiān)控，隨時(shí)隨地掌握著調(diào)度節(jié)點(diǎn)的最新通水情況、水位現(xiàn)狀、流量流速等信息?；诖颂追桨?，系統(tǒng)也支持根據(jù)相關(guān)需求隨時(shí)部署假設(shè)視頻站點(diǎn)，實(shí)現(xiàn)了視頻節(jié)點(diǎn)的快速接入和靈活覆蓋。

4? 結(jié)? 論

在智慧水務(wù)的整體框架下，北京水務(wù)系統(tǒng)的建設(shè)都要引用更能滿足要求的模式和方法，全市水資源調(diào)度配置APP自運(yùn)行以來，系統(tǒng)運(yùn)行平穩(wěn)，用戶反映良好。項(xiàng)目的建設(shè)提高了水資源調(diào)度的工作效率，節(jié)省了人力、物力和財(cái)力;通過輔助領(lǐng)導(dǎo)決策，提升管理精細(xì)化水平，減少人民的經(jīng)濟(jì)損失;搭建了架構(gòu)合理、功能完善，標(biāo)準(zhǔn)化、集約化、可擴(kuò)展的多終端系統(tǒng)框架，可有效避免系統(tǒng)的重復(fù)建設(shè)和投資。

參考文獻(xiàn)：

[1] 鄧?yán)?，張璇，楊永生，?流域水資源調(diào)度研究綜述 [J].水利經(jīng)濟(jì)，2011，29（6）：23-27+70.

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

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

[4] 黃永慧，陳程凱.HTML5在移動應(yīng)用開發(fā)上的應(yīng)用前景 [J].計(jì)算機(jī)技術(shù)與發(fā)展，2013，23（7）：207-210.

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

[6] 王子毅，張春海.基于ECharts的數(shù)據(jù)可視化分析組件設(shè)計(jì)實(shí)現(xiàn) [J].微型機(jī)與應(yīng)用，2016，35（14）：46-48+51.

[7] 王奎澎.Flv文件格式及其嵌入式應(yīng)用 [J].計(jì)算機(jī)系統(tǒng)應(yīng)用，2010，19（3）：190-193.

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