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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

10 本報(bào)通訊員 李彥鋒　劉佳;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è)計(jì)與實(shí)現(xiàn)[D];北京郵電大學(xué);2019年

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

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

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

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

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

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

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

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

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

本文編號(hào)：2627214