监控管理系统Web前端的设计与实现

发布时间：2020-04-14 10:46

【摘要】：智能监控应用的快速发展实现了从传统粗放的管理方式向现代智能化、科学化的精准管理方式的转变。实时监视管理系统构筑于Web之上,前端是其不可或缺的一部分,Web前端的展示效果对监控管理系统的使用体验起着至关重要的作用,也是当前研究的热点。虽然目前的监控管理系统已经在在不同领域有了应用,但是随着系统需求的日益复杂,监控管理系统的Web前端仍存在以下问题:Web前端开发的项目可维护性差,不同终端设备的展示效果不佳;大量数据传输情况下,实时数据展示明显延迟,前端渲染效率较低;监控模块服务性能不佳。为了解决以上问题,本文从Web开发模式和可视化渲染优化的角度出发,主要围绕以下四方面展开工作:第一,研究Web前端开发中主要的Web开发模式和可视化渲染方法,分析Web开发模式的演变影响因素以及可视化渲染方法原理。第二,结合监控管理系统的特点,分析其Web开发模式和可视化渲染方法的不足之处,针对存在的问题,提出适合于监控管理系统Web开发模式和可视化渲染优化策略。、第三,将以上研究内容运用到照明监控管理系统中,基于提出的Web开发模式,在前端开发方面,通过抽象出网页的公共UI组件和控制修改数据的方式,提升了系统前端的可复用性和可维护性,并针对系统跨平台、跨终端使用问题,给出了多屏自适应的解决方案,实现了系统的多终端展示功能。在数据传输方面,设计了基于WebSocket的全双工实时数据传输机制,优化照明监控的数据传输效率。在实时监控模块的服务性能方面,对实时要求较高的照明监控模块的服务进行单独设计,基于Node.js与GraphQL规范,对实时性请求的解析机制进行改进,实现了聚合用户请求和精确查询数据的目标,提升了照明监控服务模块的性能。基于提出的可视化渲染优化策略,设计基于HTML5缓存的数据动态加载策略,实现数据渲染效率的提升,改善了用户体验。最终,完成了整个照明监控管理系统的前端开发,并对系统进行测试验证。
【图文】：

图４－１项目部署架构逡逑，它由两部分组成：Ｎｇｉｎｘ服务器和静态资源服务器。ＮＨＴＴＰ和反向代理服务，在本项目中用于分发资源请求和缓指在请求到达在Ｎｏｄｅ服务器之前，先经过Ｎｇｉｎｘ服务器转发。在本项目中，静态资源服务器用于存储Ｗｅｂ前端

逡逑常见设备断点设置如图４－４所示，图中每一个区间段被认为是同一种设备类型；例逡逑如，如将３２０ｐＸ－４８０ｐｘ范围内的设备认为是手机。基于断点的设置就可以根据不同的设逡逑备进行不同的效果展示。逡逑代码段冬１邋ＰＣ端布局自适应伪代码：逡逑（ＰＭ，邋４＂＾－ｉＯｒｘ）逡逑ｇｍｅｄｉａ邋ｓｃｒｅｅｎ邋ａｎｄ邋（ｍｉｎ－ｗｉｄｔｈ：邋３２０ｐｘ）邋ａｎｄ邋（ｍａｘ－ｗｉｄｔｈ：邋４８０ｐｘ）邋｛…｝逡逑Ｘｒ邋＾ｒ邋＇ｃ：ｐ．）逡逑ｇｍｅｄｉａ邋（ｍｉｎ－ｗｉｄｔｈ：邋７６８ｐｘ）邋ａｎｄ邋（ｍａｘ－ｗｉｄｔｈ：邋７６Ｓｐｘ）邋｛邋．．．邋｝逡逑垆篆灔募，ｆ桌面盈承器，丈：ｐ竽：Ｆ：邋ｉ＇－．ｒ．ｄ逡逑ｇｍｅｄｉａ（ｍｉｎ－ｕｉｄｔｈ：邋１０２４ｐｘ）邋ａｎｄ邋（ｍａｘ－％＾ｉｄｔｈ：邋１０２４ｐｘ）邋｛邋．．．邋｝逦逡逑（２）移动端高清多屏适配设计与实现逡逑为了使Ｗｅｂ前端页面在移动端和ＰＣ端的展示都达到最佳效果，本课题还需要设计逡逑和实现移动端设备的响应式清晰显示功能。设计主要包含两个方面：不同屏幕尺寸的手逡逑机和不同像素比（ｄｐｒ）的手机。逡逑首先，在不同屏幕尺寸的手机方面，由于移动端设备屏幕大小比较复杂，因此，，其逡逑方案不同于基本的布局自适应方式。当前解决手机适配问题的方案主要有Ｆｌｅｘ、ＣＳＳ逡逑Ｍｅｄｉａ邋Ｑｕｅｒｙ布局等。Ｈｅｘ布局很灵活，但这种布局方式在微信以及某些浏览器中还存逡逑在较多的兼容性问题，对于移动端的布局而言，Ｆｌｅｘ不是最佳的方案。而ＣＳＳ邋Ｍｅｄｉａ逡逑Ｑｕｅｒｙ的方案比较适合设备情况简明
【学位授予单位】：北京邮电大学
【学位级别】：硕士
【学位授予年份】：2019
【分类号】：TP393.09

【相似文献】

相关期刊论文 前10条

1 王鹏程;;数字化电气监控管理系统的探讨[J];山东工业技术;2019年17期

2 何兴印;;研究智能化通信监控管理系统[J];建材与装饰;2018年46期

3 蔡运j;;实验室监控管理系统的设计与实现[J];科技广场;2016年11期

4 王宴平;吕林宝;;门式起重机安全监控管理系统的研究与应用[J];上海铁道科技;2016年04期

5 滕启斯;;门座起重机安全监控管理系统的试验验证[J];起重运输机械;2015年12期

6 王少林;刘公明;陶亮;;智能路灯监控管理系统的设计与应用[J];智能建筑电气技术;2015年02期

7 高金花;;安全监控管理系统在门式起重机中推广探讨[J];机械研究与应用;2014年02期

8 邹建森;;探讨机场安防综合监控管理系统[J];网络安全技术与应用;2014年03期

9 李福森;;架桥机安全监控管理系统的试验验证[J];起重运输机械;2013年08期

10 楼勇;;关于塔机安全监控管理系统安装使用管理现状的分析[J];建筑安全;2013年10期

相关会议论文 前10条

1 赵勇;;数字媒体监控管理系统在选厂的应用[A];2010'中国矿业科技大会论文集[C];2010年

2 徐安立;姚宇新;;微机监控管理系统在城市供水事业中的应用与展望[A];中国电工技术学会水工业电工专委会第一届第二次年会暨技术交流会论文集[C];2001年

3 张广军;宋彤君;;电力监控管理系统在煤矿的应用[A];第18届全国煤矿自动化与信息化学术会议论文集[C];2008年

4 毕虹;王振宇;;消防监控管理系统的总体框架及其实现目标研究[A];2013年4月建筑科技与管理学术交流会论文集[C];2013年

5 吴雪莲;王维佳;喻青;吴婷;;基于无线网络的起重机运行安全监控管理系统设计[A];中国职业安全健康协会2011年学术年会论文集[C];2011年

6 史苏安;王锦华;张志刚;;大型矿井综合监控管理系统的研究与应用[A];第十六届全国煤炭自动化学术年会、中国煤炭学会自动化专业委员会学术会议论文集[C];2006年

7 吴雪莲;王维佳;喻青;吴婷;;基于无线网络的起重机运行安全监控管理系统设计[A];2012年全国冶金安全环保暨能效优化学术交流会论文集[C];2012年

8 路伟逢;吴峰;;浅析矿井电力监控管理系统[A];第18届全国煤矿自动化与信息化学术会议论文集[C];2008年

9 徐安立;姚宇新;;微机监控管理系统在城市供水事业中的应用与展望[A];中国土木工程学会水工业分会第四届理事会第一次会议论文集[C];2002年

10 卢晓春;吴晶;叶翠安;;基于GPRS通信的船舶燃油监控管理系统的设计与实现[A];第四届广东海事高级论坛论文集[C];2012年

相关重要报纸文章 前10条

1 周贵勤 卢洁葵 王席传;移动信息化保平安[N];人民邮电;2005年

2 记者 杜国平;全省涉密计算机违规上网监控管理系统平台建设会在汉召开[N];汉中日报;2010年

3 原兴胜;新疆克拉玛依立项《城市LED路灯数字化监控管理系统》[N];中国建设报;2010年

4 铁铮;山东移动项目监控管理系统正式运行[N];通信产业报;2004年

5 王晓雁　李香;崂山依托GPS/GIS监控管理系统提升监管效能[N];中国工商报;2010年

6 邹积隆 水健;涂装电脑监控管理系统通过验收[N];中国船舶报;2004年

7 记者 郑晓强;厦门全面启用交通技术监控管理系统[N];福建日报;2010年

8 首席记者 齐泽萍;我省科技治超有望实现技术新突破[N];山西经济日报;2013年

9 ;NetGain监控管理系统效力容灾应用[N];网络世界;2006年

10 本报通讯员 李彦锋　刘佳;GPS监控管理系统实现远程监控调度[N];人民铁道;2011年

相关硕士学位论文 前10条

1 郭颖;监控管理系统Web前端的设计与实现[D];北京邮电大学;2019年

2 王丽;内蒙古华仪风能监控管理系统设计与实现[D];大连理工大学;2018年

3 宋家来;面向分时租赁的智能充电桩控制系统研究[D];哈尔滨工业大学;2018年

4 张振鹏;配电站监控管理系统设计与实现[D];国防科学技术大学;2016年

5 付媛;锂电池化成监控管理系统设计与配组算法研究[D];武汉理工大学;2017年

6 冯建波;VPN智能监控管理系统的设计与实现[D];湖南大学;2014年

7 王梦宇;基于WiFi的空调监控管理系统研究[D];天津科技大学;2018年

8 李一铭;公安舆情监管管理系统的设计与实现[D];大连海事大学;2018年

9 李艳艳;保山学院视频监控管理系统的研究与分析[D];云南大学;2017年

10 胡雍晶;乌鲁木齐市城市公共视频监控管理研究[D];东北财经大学;2018年

本文编号：2627214