【摘要】：智能監(jiān)控應(yīng)用的快速發(fā)展實(shí)現(xiàn)了從傳統(tǒng)粗放的管理方式向現(xiàn)代智能化、科學(xué)化的精準(zhǔn)管理方式的轉(zhuǎn)變。實(shí)時監(jiān)視管理系統(tǒng)構(gòu)筑于Web之上,前端是其不可或缺的一部分,Web前端的展示效果對監(jiān)控管理系統(tǒng)的使用體驗起著至關(guān)重要的作用,也是當(dāng)前研究的熱點(diǎn)。雖然目前的監(jiān)控管理系統(tǒng)已經(jīng)在在不同領(lǐng)域有了應(yīng)用,但是隨著系統(tǒng)需求的日益復(fù)雜,監(jiān)控管理系統(tǒng)的Web前端仍存在以下問題:Web前端開發(fā)的項目可維護(hù)性差,不同終端設(shè)備的展示效果不佳;大量數(shù)據(jù)傳輸情況下,實(shí)時數(shù)據(jù)展示明顯延遲,前端渲染效率較低;監(jiān)控模塊服務(wù)性能不佳。為了解決以上問題,本文從Web開發(fā)模式和可視化渲染優(yōu)化的角度出發(fā),主要圍繞以下四方面展開工作:第一,研究Web前端開發(fā)中主要的Web開發(fā)模式和可視化渲染方法,分析Web開發(fā)模式的演變影響因素以及可視化渲染方法原理。第二,結(jié)合監(jiān)控管理系統(tǒng)的特點(diǎn),分析其Web開發(fā)模式和可視化渲染方法的不足之處,針對存在的問題,提出適合于監(jiān)控管理系統(tǒng)Web開發(fā)模式和可視化渲染優(yōu)化策略。、第三,將以上研究內(nèi)容運(yùn)用到照明監(jiān)控管理系統(tǒng)中,基于提出的Web開發(fā)模式,在前端開發(fā)方面,通過抽象出網(wǎng)頁的公共UI組件和控制修改數(shù)據(jù)的方式,提升了系統(tǒng)前端的可復(fù)用性和可維護(hù)性,并針對系統(tǒng)跨平臺、跨終端使用問題,給出了多屏自適應(yīng)的解決方案,實(shí)現(xiàn)了系統(tǒng)的多終端展示功能。在數(shù)據(jù)傳輸方面,設(shè)計了基于WebSocket的全雙工實(shí)時數(shù)據(jù)傳輸機(jī)制,優(yōu)化照明監(jiān)控的數(shù)據(jù)傳輸效率。在實(shí)時監(jiān)控模塊的服務(wù)性能方面,對實(shí)時要求較高的照明監(jiān)控模塊的服務(wù)進(jìn)行單獨(dú)設(shè)計,基于Node.js與GraphQL規(guī)范,對實(shí)時性請求的解析機(jī)制進(jìn)行改進(jìn),實(shí)現(xiàn)了聚合用戶請求和精確查詢數(shù)據(jù)的目標(biāo),提升了照明監(jiān)控服務(wù)模塊的性能�；谔岢龅目梢暬秩緝�(yōu)化策略,設(shè)計基于HTML5緩存的數(shù)據(jù)動態(tài)加載策略,實(shí)現(xiàn)數(shù)據(jù)渲染效率的提升,改善了用戶體驗。最終,完成了整個照明監(jiān)控管理系統(tǒng)的前端開發(fā),并對系統(tǒng)進(jìn)行測試驗證。
【圖文】：

圖４－１項目部署架構(gòu)逡逑，它由兩部分組成：Ｎｇｉｎｘ服務(wù)器和靜態(tài)資源服務(wù)器。ＮＨＴＴＰ和反向代理服務(wù)，在本項目中用于分發(fā)資源請求和緩指在請求到達(dá)在Ｎｏｄｅ服務(wù)器之前，先經(jīng)過Ｎｇｉｎｘ服務(wù)器轉(zhuǎn)發(fā)。在本項目中，靜態(tài)資源服務(wù)器用于存儲Ｗｅｂ前端

逡逑常見設(shè)備斷點(diǎn)設(shè)置如圖４－４所示，圖中每一個區(qū)間段被認(rèn)為是同一種設(shè)備類型；例逡逑如，如將３２０ｐＸ－４８０ｐｘ范圍內(nèi)的設(shè)備認(rèn)為是手機(jī)�；跀帱c(diǎn)的設(shè)置就可以根據(jù)不同的設(shè)逡逑備進(jìn)行不同的效果展示。逡逑代碼段冬１邋ＰＣ端布局自適應(yīng)偽代碼：逡逑（ＰＭ，邋４＂＾－ｉＯｒｘ）逡逑ｇｍｅｄｉａ邋ｓｃｒｅｅｎ邋ａｎｄ邋（ｍｉｎ－ｗｉｄｔｈ：邋３２０ｐｘ）邋ａｎｄ邋（ｍａｘ－ｗｉｄｔｈ：邋４８０ｐｘ）邋｛…｝逡逑Ｘｒ邋＾ｒ邋＇ｃ：ｐ．）逡逑ｇｍｅｄｉａ邋（ｍｉｎ－ｗｉｄｔｈ：邋７６８ｐｘ）邋ａｎｄ邋（ｍａｘ－ｗｉｄｔｈ：邋７６Ｓｐｘ）邋｛邋．．．邋｝逡逑壚篆灔募，ｆ桌面盈承器，丈：ｐ竽：Ｆ：邋ｉ＇－．ｒ．ｄ逡逑ｇｍｅｄｉａ（ｍｉｎ－ｕｉｄｔｈ：邋１０２４ｐｘ）邋ａｎｄ邋（ｍａｘ－％＾ｉｄｔｈ：邋１０２４ｐｘ）邋｛邋．．．邋｝邐逡逑（２）移動端高清多屏適配設(shè)計與實(shí)現(xiàn)逡逑為了使Ｗｅｂ前端頁面在移動端和ＰＣ端的展示都達(dá)到最佳效果，本課題還需要設(shè)計逡逑和實(shí)現(xiàn)移動端設(shè)備的響應(yīng)式清晰顯示功能。設(shè)計主要包含兩個方面：不同屏幕尺寸的手逡逑機(jī)和不同像素比（ｄｐｒ）的手機(jī)。逡逑首先，在不同屏幕尺寸的手機(jī)方面，由于移動端設(shè)備屏幕大小比較復(fù)雜，因此，，其逡逑方案不同于基本的布局自適應(yīng)方式。當(dāng)前解決手機(jī)適配問題的方案主要有Ｆｌｅｘ、ＣＳＳ逡逑Ｍｅｄｉａ邋Ｑｕｅｒｙ布局等。Ｈｅｘ布局很靈活，但這種布局方式在微信以及某些瀏覽器中還存逡逑在較多的兼容性問題，對于移動端的布局而言，Ｆｌｅｘ不是最佳的方案。而ＣＳＳ邋Ｍｅｄｉａ逡逑Ｑｕｅｒｙ的方案比較適合設(shè)備情況簡明
【學(xué)位授予單位】：北京郵電大學(xué)
【學(xué)位級別】：碩士
【學(xué)位授予年份】：2019
【分類號】：TP393.09

【相似文獻(xiàn)】

相關(guān)期刊論文 前10條

1 王鵬程;;數(shù)字化電氣監(jiān)控管理系統(tǒng)的探討[J];山東工業(yè)技術(shù);2019年17期

2 何興印;;研究智能化通信監(jiān)控管理系統(tǒng)[J];建材與裝飾;2018年46期

3 蔡運(yùn)j;;實(shí)驗室監(jiān)控管理系統(tǒng)的設(shè)計與實(shí)現(xiàn)[J];科技廣場;2016年11期

4 王宴平;呂林寶;;門式起重機(jī)安全監(jiān)控管理系統(tǒng)的研究與應(yīng)用[J];上海鐵道科技;2016年04期

5 滕啟斯;;門座起重機(jī)安全監(jiān)控管理系統(tǒng)的試驗驗證[J];起重運(yùn)輸機(jī)械;2015年12期

6 王少林;劉公明;陶亮;;智能路燈監(jiān)控管理系統(tǒng)的設(shè)計與應(yīng)用[J];智能建筑電氣技術(shù);2015年02期

7 高金花;;安全監(jiān)控管理系統(tǒng)在門式起重機(jī)中推廣探討[J];機(jī)械研究與應(yīng)用;2014年02期

8 鄒建森;;探討機(jī)場安防綜合監(jiān)控管理系統(tǒng)[J];網(wǎng)絡(luò)安全技術(shù)與應(yīng)用;2014年03期

9 李福森;;架橋機(jī)安全監(jiān)控管理系統(tǒng)的試驗驗證[J];起重運(yùn)輸機(jī)械;2013年08期

10 樓勇;;關(guān)于塔機(jī)安全監(jiān)控管理系統(tǒng)安裝使用管理現(xiàn)狀的分析[J];建筑安全;2013年10期

相關(guān)會議論文 前10條

1 趙勇;;數(shù)字媒體監(jiān)控管理系統(tǒng)在選廠的應(yīng)用[A];2010'中國礦業(yè)科技大會論文集[C];2010年

2 徐安立;姚宇新;;微機(jī)監(jiān)控管理系統(tǒng)在城市供水事業(yè)中的應(yīng)用與展望[A];中國電工技術(shù)學(xué)會水工業(yè)電工專委會第一屆第二次年會暨技術(shù)交流會論文集[C];2001年

3 張廣軍;宋彤君;;電力監(jiān)控管理系統(tǒng)在煤礦的應(yīng)用[A];第18屆全國煤礦自動化與信息化學(xué)術(shù)會議論文集[C];2008年

4 畢虹;王振宇;;消防監(jiān)控管理系統(tǒng)的總體框架及其實(shí)現(xiàn)目標(biāo)研究[A];2013年4月建筑科技與管理學(xué)術(shù)交流會論文集[C];2013年

5 吳雪蓮;王維佳;喻青;吳婷;;基于無線網(wǎng)絡(luò)的起重機(jī)運(yùn)行安全監(jiān)控管理系統(tǒng)設(shè)計[A];中國職業(yè)安全健康協(xié)會2011年學(xué)術(shù)年會論文集[C];2011年

6 史蘇安;王錦華;張志剛;;大型礦井綜合監(jiān)控管理系統(tǒng)的研究與應(yīng)用[A];第十六屆全國煤炭自動化學(xué)術(shù)年會、中國煤炭學(xué)會自動化專業(yè)委員會學(xué)術(shù)會議論文集[C];2006年

7 吳雪蓮;王維佳;喻青;吳婷;;基于無線網(wǎng)絡(luò)的起重機(jī)運(yùn)行安全監(jiān)控管理系統(tǒng)設(shè)計[A];2012年全國冶金安全環(huán)保暨能效優(yōu)化學(xué)術(shù)交流會論文集[C];2012年

8 路偉逢;吳峰;;淺析礦井電力監(jiān)控管理系統(tǒng)[A];第18屆全國煤礦自動化與信息化學(xué)術(shù)會議論文集[C];2008年

9 徐安立;姚宇新;;微機(jī)監(jiān)控管理系統(tǒng)在城市供水事業(yè)中的應(yīng)用與展望[A];中國土木工程學(xué)會水工業(yè)分會第四屆理事會第一次會議論文集[C];2002年

10 盧曉春;吳晶;葉翠安;;基于GPRS通信的船舶燃油監(jiān)控管理系統(tǒng)的設(shè)計與實(shí)現(xiàn)[A];第四屆廣東海事高級論壇論文集[C];2012年

相關(guān)重要報紙文章 前10條

1 周貴勤 盧潔葵 王席傳;移動信息化保平安[N];人民郵電;2005年

2 記者 杜國平;全省涉密計算機(jī)違規(guī)上網(wǎng)監(jiān)控管理系統(tǒng)平臺建設(shè)會在漢召開[N];漢中日報;2010年

3 原興勝;新疆克拉瑪依立項《城市LED路燈數(shù)字化監(jiān)控管理系統(tǒng)》[N];中國建設(shè)報;2010年

4 鐵錚;山東移動項目監(jiān)控管理系統(tǒng)正式運(yùn)行[N];通信產(chǎn)業(yè)報;2004年

5 王曉雁　李香;嶗山依托GPS/GIS監(jiān)控管理系統(tǒng)提升監(jiān)管效能[N];中國工商報;2010年

6 鄒積隆 水健;涂裝電腦監(jiān)控管理系統(tǒng)通過驗收[N];中國船舶報;2004年

7 記者 鄭曉強(qiáng);廈門全面啟用交通技術(shù)監(jiān)控管理系統(tǒng)[N];福建日報;2010年

8 首席記者 齊澤萍;我省科技治超有望實(shí)現(xiàn)技術(shù)新突破[N];山西經(jīng)濟(jì)日報;2013年

9 ;NetGain監(jiān)控管理系統(tǒng)效力容災(zāi)應(yīng)用[N];網(wǎng)絡(luò)世界;2006年

10 本報通訊員 李彥鋒　劉佳;GPS監(jiān)控管理系統(tǒng)實(shí)現(xiàn)遠(yuǎn)程監(jiān)控調(diào)度[N];人民鐵道;2011年

相關(guān)碩士學(xué)位論文 前10條

1 郭穎;監(jiān)控管理系統(tǒng)Web前端的設(shè)計與實(shí)現(xiàn)[D];北京郵電大學(xué);2019年

2 王麗;內(nèi)蒙古華儀風(fēng)能監(jiān)控管理系統(tǒng)設(shè)計與實(shí)現(xiàn)[D];大連理工大學(xué);2018年

3 宋家來;面向分時租賃的智能充電樁控制系統(tǒng)研究[D];哈爾濱工業(yè)大學(xué);2018年

4 張振鵬;配電站監(jiān)控管理系統(tǒng)設(shè)計與實(shí)現(xiàn)[D];國防科學(xué)技術(shù)大學(xué);2016年

5 付媛;鋰電池化成監(jiān)控管理系統(tǒng)設(shè)計與配組算法研究[D];武漢理工大學(xué);2017年

6 馮建波;VPN智能監(jiān)控管理系統(tǒng)的設(shè)計與實(shí)現(xiàn)[D];湖南大學(xué);2014年

7 王夢宇;基于WiFi的空調(diào)監(jiān)控管理系統(tǒng)研究[D];天津科技大學(xué);2018年

8 李一銘;公安輿情監(jiān)管管理系統(tǒng)的設(shè)計與實(shí)現(xiàn)[D];大連海事大學(xué);2018年

9 李艷艷;保山學(xué)院視頻監(jiān)控管理系統(tǒng)的研究與分析[D];云南大學(xué);2017年

10 胡雍晶;烏魯木齊市城市公共視頻監(jiān)控管理研究[D];東北財經(jīng)大學(xué);2018年

本文編號：2627214