The Application Research of Vue. js Framework Based on MVVM Mode in
Urban Rail Transit Security Integration Platform

潘宇 PAN Yu；张毅 ZHANG Yi；梁栋 LIANG Dong
（四川旷谷信息工程有限公司，成都 610000）
（Sichuan Crungoo Information Engineering Co.，Ltd.，Chengdu 610000，China）

摘要：针对城市轨道交通安防集成平台技术架构，由于传统的前后端密切耦合的开发方式造成了人力、物力和时间的巨大浪费，大大降低了开发效率的问题。重点研究视频监控子系统、安全检查及探测子系统、入侵报警子系统、出入口控制子系统、电子巡查子系统等业务子系统在基于MVVM模式的Vue.js搭建的城市轨道交通安防集成平台中的执行效率及综合联动、预案执行等业务应用。
Abstract: In view of the technical architecture of urban rail transit security integration platform, the traditional development mode of close coupling between the front and rear ends causes a huge waste of manpower, material resources and time, which greatly reduces the development efficiency. This paper focuses on the implementation efficiency, comprehensive linkage, plan implementation and other business applications of the video monitoring subsystem, security inspection and detection subsystem, intrusion alarm subsystem, access control subsystem, electronic inspection subsystem and other business subsystems in the urban rail transit security integrated platform built by Vue. js based on MVVM mode.
关键词：Vue.js框架；MVVM模式；安防集成平台；子系统集成
Key words: Vue.js framework；MVVM mode；security integration platform；subsystem integration
中图分类号：K875.3                                   文献标识码：A                                  文章编号：1006-4311（2021）01-0203-02

0  引言
随着信息技术的不断发展，传统的C/S架构的开发模式已经逐渐被B/S架构模式所取代，同时随着业务需求越来越复杂化和多样化，前端工程化以及前后端分离的方式已经深入人心，被越来越多的开发者所采纳。在传统的开发方式中，前后端代码糅合在一起，前后端分工不明确，导致很多开发人员既要掌握前端开发技术又要掌握后端开发技术，大大降低了开发效率[1]。开发出的界面大部分只是页面内容的简单呈现，界面操作的用户体验很差，前端语言和模板引擎语言混杂在一起，使得项目的可读性很差，可维护性也大大降低[2]。随着web2.0时代的到来，对前端界面的交互要求越来越高[3]，因而出现了很多如Angular.js、React.js、Vue.js等JavaScript框架，大大提高了前端界面的性能，而Vue.js框架更是当前最为流行的JavaScript框架之一，具有无可替代的优势。
在城市轨道交通安防业务领域内，安防日常业务涉及视频监控系统、入侵报警系统、安全检查及探测系统、出入口控制系统、电子巡查系统共五个子系统，合理高效、较高用户体验的综合安防集成平台会大大提升管理人员的管理效率，从而提升企业的核心竞争力。
1  基于Vue.js框架的安防集成平台应用研究
MVVM开发模式：
MVVM是Model-View-ViewModel的缩写，MVVM模式中的ViewModel与MVC中的Controller和MVP中的Presenter相当，ViewModel会随着View的变化发生自动更新，同时它的变化也会在View中显示出来[4]，这就是数据双向绑定的概念。本系统中使用Vue.js框架就是基于MVVM模式的代表框架之一。图1是MVVM模式的主要实现原理。
2  系统功能
根据业务需求划分，平台主要包含七大功能模块，如图2所示。
一是视频监控系统集成模块，实现了视频监控系统的功能集成，包含实时监控、视频轮播、视频回放、一张图管控电子地图功能等。（图3）
二是入侵报警系统集成模块，实现了入侵报警系统的功能集成，包含防区撤/布防，报警开关开启关闭，防区管理，电子地图展示等功能。（图4）
三是出入口控制系统集成模块，实现了出入口控制系统的功能集成，包含门禁卡信息查询，门禁出入记录查询，门禁开关以及电子地图展示等功能。（图5）
四是安全检查及探测系统集成模块，实现了安全检查及探测系统的功能集成，包含安检机的实时安检及安检机正反转操作，炸探、液探报警接入，一键报警按钮接入以及安检视频回放及电子地图展示等功能。（图6）
五是电子巡查系统集成模块，实现了电子巡查系统的功能集成，包含巡查点设置，巡查线路设置，巡查计划设置，巡查任务下发，漏检数据对比统计等功能。（图7）
六是系统联动模块，根据实际业务需要进行相应配置，由安防集成平台下发联动指令协调安防业务各子系统进行相应联动。
七是应急预案模块，根据实际业务需要提前编辑好应急预案，也可接受线路中心及线网中心下发的预案信息，当发生相应紧急事件时可自动或手动执行相关预案；当发生一些其他紧急情况时，可进行事件登记并进行处理发布相关管制信息，其他权限人员可查看发布状态下的相关紧急事件。
3  结论
基于MVVM模式的Vue.js框架结合BIM+GIS技术，研发城市轨道交通安防集成平台，实现了城市轨道交通安防领域的视频监控、出入口控制、门禁系统控制、安全检查及探测业务、电子巡更业务的管理及三维可视化的管控，在各业务子系统的基础上搭建集成平台，协调各子系统业务，进行综合联动及紧急情况的事件登记决策和应急预案。接受线路及线网中心级平台下发的指令信息，助力于整个城市轨道交通安防业务。
参考文献：
[1]路雯雯．支持前后端分离的JavaScript开发框架的研究及在内容管理系统中的应用[D].山东大学，2017.
[2]周伟，郑世钰.Web前端工程化解决方案研究[J].信息技术，2018，42（08）：44-47.
[3]赵大伟，陈刚.Web前端开发技术人才培养模式研究[J].电脑知识与技术，2015，11（24）：109-110.
[4]Wei Sun. The Exploration and Practice of MVVM Pattern on Android Platform[A]. Proceedings of 2016 4th International Conference on Machinery, Materials and Information Technology Applications(ICMMITA 2016)[C]. Computer Science and Electronic Technology International Society, 2016：8.