(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202211026734.8 (22)申请日 2022.08.25 (71)申请人 城云科技 （中国） 有限公司 地址 310052 浙江省杭州市滨江区长河街 道江南大道588号恒 鑫大厦主楼17层、 18层 (72)发明人 毛云青　陈晓军　谢淼烽　彭大蒙　 (74)专利代理 机构 杭州汇和信专利代理有限公 司 33475 专利代理师 吴琰 (51)Int.Cl. G06F 8/38(2018.01) G06F 8/33(2018.01) G06F 8/36(2018.01) G06F 16/958(2019.01)G06Q 50/26(2012.01) (54)发明名称 基于vue的违章信息管理方法及其应用 (57)摘要 本申请提出了一种基于vu e的违章信息管理 方法及其应用， 包括以下步骤： S00、 监听获取用 户的违章类型选择， 并对应开启画布组件的编辑 功能， 以供用户在监控图像上操作； S10、 监听用 户的鼠标操作过程并随鼠标的操作实时生成带 有违章类型标题的半透明遮罩区域并记录该半 透明遮罩区域的坐标， 以在监控图像上标识违章 区域或违章对象； S20、 根据坐标更新表格数据， 以生成基于用户所选违章类型的违章表 格。 本申 请实现了违章信息管理系统的图表自动交互， 简 化了用户操作， 提升了操作体验， 避免了操作失 误。 权利要求书1页 说明书7页 附图3页 CN 115373670 A 2022.11.22 CN 115373670 A 1.一种基于vue的违章信息管理方法， 其特 征在于， 包括以下步骤： S00、 监听获取用户的违章类型选择， 并对应开启画布组件的编辑功能， 以供用户在监 控图像上操作； S10、 监听用户的鼠标操作过程并随鼠标的操作实时生成带有违章类型标题的半透明 遮罩区域并记录该半透明遮罩区域的坐标， 以在监控图像上 标识违章区域或违章对象； S20、 根据坐标 更新表格数据， 以生成基于用户所选违章类型的违章表格。 2.如权利要求1所述的一种基于vue的违章信息管理方法， 其特征在于， 还包括步骤 S30， 具体为： 响应用户的鼠标操作并对应实时更新/删除带有违章类型标题的半透明遮罩 区域以及 对应的坐标和违章表格的数据； 或获取用户对违章表格的修改， 并对应更新/删除带有违章类型标题的半透明遮罩区 域。 3.如权利要求1所述的一种基于vue的违章信息管理方法， 其特征在于， 步骤S00中， 所 述监控图像从实时监控视频或历史监控视频中截帧获得。 4.如权利要求3所述的一种基于vue的违章信息管理方法， 其特征在于， 在所述监控图 像获取后， 同步生成一对应的告警数据于告警数据列表中， 并将所述告警数据列表开放给 用户， 以供用户操作配置， 所述告警数据列表包括监控图像、 违章类型选项以及违章表格显 示区域。 5.如权利要求4所述的一种基于vue的违章信息管理方法， 其特征在于， 所述告警数据 包括图像地址、 监控ID、 监控地址、 所属街道及路段等级。 6.如权利要求1所述的一种基于vue的违章信息管理方法， 其特征在于， 所述违章类型 包括暴露垃圾、 流动摊 贩、 非机动车乱 停放及违章停车。 7.如权利要求1 ‑6任意一项所述的一种基于vue的违章信息管理方法， 其特征在于， 通 过监听鼠标的按下和松开， 以及对半透明遮罩区域的拖拽拉伸， 以记录半透明遮罩区域的 坐标位置 。 8.一种基于vue的违章信息管理系统， 其特 征在于， 包括： 配置和显示界面， 用于提供操作界面供用户操作以及显示违章信息管理界面； 监听模块， 用于监听用户的鼠标操作以及用于对违章表格的修改和删除； 用于监听获 取用户的违章类型选择， 并对应开启画布组件的编辑功能， 以供用户在监控图像上操作； 用 于监听用户的鼠标操作过程并随鼠标 的操作实时生成带有违章类型标题的半透明遮罩区 域并记录该半透明遮罩区域的坐标， 以在监控图像上 标识违章区域或违章对象； 数据库， 用于存储违章表格和监控图像； 用于根据坐标更新表格数据， 以生成基于用户 所选违章类型的违章表格。 9.一种电子装置， 包括存储器和处理器， 其特征在于， 所述存储器中存储有计算机程 序， 所述处理器被设置为运行所述计算机程序以执行权利要求1至7任一项所述的基于vue 的违章信息管理方法。 10.一种可读存储介质， 其特征在于， 所述可读存储介质中存储有计算机程序， 所述计 算机程序包括用于控制过程以执行过程的程序代码， 所述过程包括根据权利要求1至7任一 项所述的基于vue的违章信息管理方法。权　利　要　求　书 1/1 页 2 CN 115373670 A 2基于vue的违 章信息管理方法及其应用 技术领域 [0001]本申请涉及城市治理技术领域， 特别是一种涉及基于vue的违章信息管理方法及 其应用。 背景技术 [0002]目前存在的违章信息管理系统， 没有形成一种图片和表格的交互联动， 含有违章 信息的图片被单纯的展示或仅仅可以在图片上标注违章信息， 用户观察图片上的违章信 息， 然后操作表单， 最 终保存记录在表格展示。 对图片的违章信息标注、 删除标注操作， 和表 格信息的增删改查， 互不相关， 需要用户分别操作， 而且对表格操作每次都要 单独打开弹框 进行。 这样的操作体验较差， 还有些操作冗余， 并且由于图片和表格分开操作， 容易造成操 作失误， 表格和画 布操作的不是同一条 数据， 形成误删、 误改造成一些不必要的麻烦。 [0003]因此， 亟待一种基于vue的违章信息管理方法及其应用， 可去掉图表分开操作造成 的冗余操作和操作失误， 使得 管理更加轻松便捷。 发明内容 [0004]本申请实施例提供了一种基于vue的违章信息管理方法及其应用， 针对目前技术 存在的图表分开操作造成的冗余操作和操作失误 等问题。 [0005]本发明核心技术主要是基于Vue的UI框架和js插件， 快速构建一个有图片展示和 表格操作的管理系统， 通过vue构件表格和违章类型列表组件， 然后利用fabric.js插件的 API封装画布组件。 用户通过辨别图片中的违章信息， 用户选择违章类型后， 画布编辑功能 将会打开， 这个时候用户圈出违章点， 紧挨圈上方会出现当前违章信息标题， 同时表格组件 会自动增加一条该违章信息的记录。 拖动或拉伸画布所选区域， 调整标记位置， 表格信息会 自动更新； 操作表格进行违章信息修改删除， 画 布组件会相应的自动做出 更新。 [0006]第一方面， 本申请提供了一种基于vue的违章信息管理方法， 所述方法包括以下步 骤： S00、 监听获取用户的违章类型选择， 并对应开启画布组件的编辑功能， 以供用户 在监控图像上操作； S10、 监听用户的鼠标操作过程并随鼠标的操作实时生成带有违章类型标题的半 透明遮罩区域并记录该半透明遮罩区域的坐标， 以在监控图像上标识违章区域或违章对 象； S20、 根据坐标 更新表格数据， 以生成基于用户所选违章类型的违章表格。 [0007]进一步地， 还包括步骤S30， 具体为： 响应用户的鼠标操作并对应实时更新/删除带有违章类型标题的半透明遮罩区域 以及对应的坐标和违章表格的数据； 或获取用户对违章表格的修改， 并对应更新/删除带有违章类型标题的半透明遮 罩区域。说　明　书 1/7 页 3 CN 115373670 A 3