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

作     者：郭颖 

作者单位：北京邮电大学 

学位级别：硕士

导师姓名：邓芳

授予年度：2019年

学科分类：08[工学] 080402[工学-测试计量技术及仪器] 0804[工学-仪器科学与技术] 

主      题：Web前端 开发模式 可视化渲染 监控管理 

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