(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202210651689.9 (22)申请日 2022.06.09 (71)申请人 中电莱斯信息系统有限公司 地址 210000 江苏省南京市秦淮区苜蓿园 东街1号 (72)发明人 王楠　陈鹏　王妍妍　周惊雷　 李作康　 (74)专利代理 机构 江苏圣典律师事务所 32 237 专利代理师 胡建华 (51)Int.Cl. G06F 9/451(2018.01) G06F 9/445(2018.01) (54)发明名称 一种基于Vue框架的事件时间轴展示系统及 方法 (57)摘要 本发明公开了一种基于Vu e框架的事件时间 轴展示系统及方法， 所述系统包括事件数据传输 模块、 时间轴模块、 滚动条模块、 事件展示模块和 事件数据更改模块， 事件数据传输模块用于获取 事件数据； 时间轴模块用于根据获得的事件数据 的数量绘制时间轴； 滚动条模块用于根据时间轴 的宽度为时间轴创建滚动条； 事件展示模块用于 根据绘制的事件 数据标注位置， 以卡片的形式展 示事件简介； 事件数据更改模块用于对时间轴上 展示的事件数据进行新增、 修改和删除操作， 将 操作结果通过所述事件数据传输模块传输至后 端。 该系统及方法可以更有效地对 大量事件信息 进行更丰富地展示， 使时间轴在信息展示的基础 上更能作为数据维护和管理的工具进行使用。 权利要求书2页 说明书6页 附图2页 CN 115145666 A 2022.10.04 CN 115145666 A 1.一种基于Vue框架的事件时间轴展示系统， 其特征在于， 包括事件数据传输模块、 时 间轴模块、 滚动条模块、 事 件展示模块和事 件数据更改模块， 所述事件数据传输模块， 用于基于Vue框架获取事件数据， 所述事件数据包括事件发生 时间、 事件性质、 重要程度、 事 件类型、 事 件简介和事 件详情信息； 所述时间轴模块， 用于根据获得的事件数据的数量进行时间轴的绘制， 所述时间轴的 绘制包括事 件数据标注位置、 时间轴本体和连接线的绘制； 所述滚动条模块， 用于根据时间轴的宽度为时间轴 创建滚动条； 所述事件展示模块， 用于根据绘制的事件数据标注位置， 按照事件发生时间以卡片的 形式展示事 件简介， 对 事件性质和重要程度进行 标注； 所述事件数据更改模块， 用于对时间轴上展示的事件数据进行新增、 修改和删除操作， 将操作结果 通过所述事件数据传输模块传输 至后端。 2.根据权利要求1所述的一种基于Vue框架 的事件时间轴展示系统， 其特征在于， 所述 根据获得的事 件数据的容 量进行时间轴的绘制包括： 记单个事件数据标注位置所在容器的宽度为width0， 事件数量为n， 则时间轴宽度 widthTimebar＝ width0*n+t， 其中t 表示时间轴宽度的自适应修 正量； 时间轴本体的绘制利用CS S样式中的linear‑gradient属性进行渐 变色的绘制； 事件数据标注位置、 时间轴本体和连接线利用CSS样式中的marginLeft和 marginBott om属性进行单独 设置和绘制， 根据屏幕缩放比例及图形自适应情况进行动态绘 制。 3.根据权利要求2所述的一种基于Vue框架 的事件时间轴展示系统， 其特征在于， 所述 根据时间轴的宽度为时间轴 创建滚动条包括： 根据时间轴宽度w idthTimebar计算滚动条宽度w idthScro llbar； 计算滚动条滑块宽度widthSlider＝widthTimebar/n+x， 其中x表示滚动条滑块的自适 应修正量； 利用jQuery框架下的scro llBar控件创建时间轴滚动条； 基于CSS样式对滚动条样式进行圆角和背景色处 理。 4.根据权利要求3所述的一种基于Vue框架 的事件时间轴展示系统， 其特征在于， 所述 滚动条模块包括轮播单元， 所述轮播单元用于对事件展示模块展示的当前时期的事件数据 按时间次序进行轮播展示， 所述轮播展示利用CSS样式中的animation动画属性将事件 数据 进行渐入渐出处 理。 5.根据权利要求4所述的一种基于Vue框架 的事件时间轴展示系统， 其特征在于， 所述 滚动条模块还 包括复位单 元， 所述复位单 元用于将当前滚动条滑块复位至初始查看位置 。 6.根据权利要求5所述的一种基于Vue框架 的事件时间轴展示系统， 其特征在于， 还包 括分层模块， 所述分层模块用于对获得 的事件数据根据事件发生时间、 事件性质和重要程 度进行层级划分， 并接 收用户对层级的选择操作； 时间轴模块根据选择 的层级中事件数据 的数量进行时间轴的绘制， 事 件展示模块展示选择的层级中事 件数据。 7.根据权利要求6所述的一种基于Vue框架 的事件时间轴展示系统， 其特征在于， 还包 括对比模块， 所述对比模块用于提供相同事件类型或不同事件类型的事件 数据间的对比功 能， 利用CSS样式中的position属性将对比弹窗置于屏幕中央展示， 用户能够 对相同事件类权　利　要　求　书 1/2 页 2 CN 115145666 A 2型或不同类型的事 件数据在对比弹窗中进行对比查看。 8.根据权利要求7所述的一种基于Vue框架 的事件时间轴展示系统， 其特征在于， 所述 事件展示模块利用CSS样式的padding及flex动态布局属性对事件性质和重要程度的样式 进行设计和调整。 9.根据权利要求8所述的一种基于Vue框架 的事件时间轴展示系统， 其特征在于， 所述 事件展示模块包括详情查看单元， 所述详情查看单元用于对展示事件简介的卡片添加鼠标 操作事件， 触发鼠标操作事 件后， 能够查看事 件详情信息 。 10.一种基于Vue框架的事件时间轴展示方法， 使用权利要求1 ‑9任一项所述的基于Vue 框架的事 件时间轴展示系统， 其特 征在于， 包括以下步骤： 步骤S1： 基于Vue框架搭建事件数据读写框架， 搭建事件数据获取及对事件数据进行新 增、 修改和删除的传输通道， 获取事 件数据； 步骤S2： 对获得的事件数据根据事件发生时间、 事件性质和重要程度进行层级划分， 并 根据事件数据层级的选择操作进 行时间轴绘制和时间轴上事件数据展示， 其中事件简介以 卡片形式展示； 步骤S3： 利用jQuery原生scrollBar控件进行滚动条绘制， 拖动滚动条能够进行时间范 围内事件数据的滑动查看； 步骤S4： 对时间轴上展示的当前时期的事件数据按时间次序进行轮播展示； 当需要重 置滚动条时， 将当前滚动条滑块复位至初始查看位置； 步骤S5： 对时间轴上展示的事件数据进行新增、 修改和删除操作， 将操作结果通过传输 通道传输 至后端； 步骤S6： 对展示事件简介的卡片添加鼠标操作事件， 触发鼠标操作事件后， 能够查看事 件详情信息 。权　利　要　求　书 2/2 页 3 CN 115145666 A 3