[发明专利]基于vue的违章信息管理方法及其应用

说明书

本申请提出了一种基于vue的违章信息管理方法及其应用，包括以下步骤：S00、监听获取用户的违章类型选择，并对应开启画布组件的编辑功能，以供用户在监控图像上操作；S10、监听用户的鼠标操作过程并随鼠标的操作实时生成带有违章类型标题的半透明遮罩区域并记录该半透明遮罩区域的坐标，以在监控图像上标识违章区域或违章对象；S20、根据坐标更新表格数据，以生成基于用户所选违章类型的违章表格。本申请实现了违章信息管理系统的图表自动交互，简化了用户操作，提升了操作体验，避免了操作失误。

技术领域

本申请涉及城市治理技术领域，特别是一种涉及基于vue的违章信息管理方法及其应用。

背景技术

目前存在的违章信息管理系统，没有形成一种图片和表格的交互联动，含有违章信息的图片被单纯的展示或仅仅可以在图片上标注违章信息，用户观察图片上的违章信息，然后操作表单，最终保存记录在表格展示。对图片的违章信息标注、删除标注操作，和表格信息的增删改查，互不相关，需要用户分别操作，而且对表格操作每次都要单独打开弹框进行。这样的操作体验较差，还有些操作冗余，并且由于图片和表格分开操作，容易造成操作失误，表格和画布操作的不是同一条数据，形成误删、误改造成一些不必要的麻烦。

因此，亟待一种基于vue的违章信息管理方法及其应用，可去掉图表分开操作造成的冗余操作和操作失误，使得管理更加轻松便捷。

发明内容

本申请实施例提供了一种基于vue的违章信息管理方法及其应用，针对目前技术存在的图表分开操作造成的冗余操作和操作失误等问题。

本发明核心技术主要是基于Vue的UI框架和js插件，快速构建一个有图片展示和表格操作的管理系统，通过vue构件表格和违章类型列表组件，然后利用fabric.js插件的API封装画布组件。用户通过辨别图片中的违章信息，用户选择违章类型后，画布编辑功能将会打开，这个时候用户圈出违章点，紧挨圈上方会出现当前违章信息标题，同时表格组件会自动增加一条该违章信息的记录。拖动或拉伸画布所选区域，调整标记位置，表格信息会自动更新；操作表格进行违章信息修改删除，画布组件会相应的自动做出更新。

第一方面，本申请提供了一种基于vue的违章信息管理方法，所述方法包括以下步骤：

S00、监听获取用户的违章类型选择，并对应开启画布组件的编辑功能，以供用户在监控图像上操作；

S10、监听用户的鼠标操作过程并随鼠标的操作实时生成带有违章类型标题的半透明遮罩区域并记录该半透明遮罩区域的坐标，以在监控图像上标识违章区域或违章对象；

S20、根据坐标更新表格数据，以生成基于用户所选违章类型的违章表格。

进一步地，还包括步骤S30，具体为：

响应用户的鼠标操作并对应实时更新/删除带有违章类型标题的半透明遮罩区域以及对应的坐标和违章表格的数据；

或获取用户对违章表格的修改，并对应更新/删除带有违章类型标题的半透明遮罩区域。

进一步地，步骤S00中，监控图像从实时监控视频或历史监控视频中截帧获得。

进一步地，在监控图像获取后，同步生成一对应的告警数据于告警数据列表中，并将告警数据列表开放给用户，以供用户操作配置，告警数据列表包括监控图像、违章类型选项以及违章表格显示区域。

进一步地，告警数据包括图像地址、监控ID、监控地址、所属街道及路段等级。

进一步地，违章类型包括暴露垃圾、流动摊贩、非机动车乱停放及违章停车。

进一步地，通过监听鼠标的按下和松开，以及对半透明遮罩区域的拖拽拉伸，以记录半透明遮罩区域的坐标位置。

第二方面，本申请提供了一种基于vue的违章信息管理系统，包括：

配置和显示界面，用于提供操作界面供用户操作以及显示违章信息管理界面；