CN113741877A

CN113741877A - 一种基于web前端的可视化工作流编辑方法及装置

Info

Publication number: CN113741877A
Application number: CN202110883864.2A
Authority: CN
Inventors: 王锦胤; 詹鹏辉
Original assignee: Zijincheng Credit Investigation Co ltd
Current assignee: Zijincheng Credit Investigation Co ltd
Priority date: 2021-08-02
Filing date: 2021-08-02
Publication date: 2021-12-03

Abstract

本申请公开了一种基于WEB前端的可视化工作流编辑方法及装置。该方法包括获得网络出口以及内部边界相关数据，获得相关网络会话元数据以及网络采样包，获取主机运行的进程、端口变化、文件变化、注册表变化相关信息，获取主机的相关配置信息，针对特殊应用采集相关内容；针对收集的相关信息对安全问题进行特征分析；根据环境中发现的安全问题以及静态、半静态以及动态数据进行聚类分析，筛选出具有类似特征的主机进行聚类评估；根据聚类评估获得的与问题主机相似的主机分析其受影响程度，生成处置请求。本申请解决了由于自动化能力低下、溯源困难、很难反复验证导致的对于处置效果基本无法评估的技术问题。

Description

一种基于WEB前端的可视化工作流编辑方法及装置

技术领域

本申请涉及前端开发领域，具体而言，涉及一种基于WEB前端的可视化工作流编辑方法及装置。

背景技术

随着WEB前端的发展，用户对互联网的需求也越来越多，使用到的技术也逐渐提升，决策流、工作流这类可视化工作流业务普通前端技术已无法满足。且传统的WEB前端页面开发模式需要掌握一定前端开发技能的工程师并且要花费大量的时间才能进行工作流页面的开发和制作，同时其还存在效率低下以及规范不统一导致难以维护等问题。因此设计一种合理、可行、科学、且能够适用于零WEB 前端开发基础人员的WEB前端页面编辑生成方法具有重要的意义。

目前，市场上现有技术的缺点：

(1)配置困难，无法使用拖拽技术；

(2)功能维护成功高，复用性差；

(3)技术门槛高，需要一定可视化知识。

针对相关技术中配置困难、功能维护成功高、技术门槛高的问题，目前尚未提出有效的解决方案。

发明内容

本申请的主要目的在于提供一种基于WEB前端的可视化工作流编辑方法及装置，以解决上述问题。

为了实现上述目的，根据本申请的一个方面，提供了一种基于WEB前端的可视化工作流编辑方法。

根据本申请的基于WEB前端的可视化工作流编辑方法包括：

构建前端页面布局，通过使用Vue.js组件编写操作界面，布局界面中的左侧设为控件区，右侧设为画布编辑区，顶部设为工具操作区；

构建操作行为监听控制器，在控件区上建立基本元素按钮列表，并给控件区中所有的按钮元素绑定拖拽监听行为，当监听到上述行为时，新建一个与被拖拽的按钮元素相对应的临时层；

构建自定义控件，用户通过控件区，制作一个统一规范的自定义控件；

渲染画布编辑区；

存储可视化流数据。

进一步的，所述构建前端页面布局的界面中的每个模块各司其职，具体包括：

所述工具操作区集中摆放常用工具，所述常用工具包括但不限于有编辑模式、预览效果、保存编辑、清空代码、撤销操作；

所述控件区摆放多媒体控件的操作按钮，即按钮元素，也是拖拽交互的开始点；

所述画布编辑区是核心的操作区域，负责代码可视化渲染及代码存储在内的功能。

进一步的，所述构建操作行为监听控制器中的临时层存储了被拖拽的按钮元素所对应的多媒体控件的页面信息及数据信息，根据多媒体控件的页面信息及数据信息及时在html上渲染出对应的控件插件效果；

临时层跟随用户的鼠标移动轨迹进行移动，将鼠标拖拽轨迹展现给用户，同时记录当前鼠标位置给释放鼠标行为操作做判断；

当临时层处于合法的画布编辑区以及监听到用户的释放鼠标行为操作时，根据临时层中所存储的内容，按照预设的规范，在画布编辑区生成与被拖拽的按钮元素对应的多媒体控件的代码，并实时渲染在画布编辑区上；

当监听到用户的释放鼠标行为操作时，根据当前鼠标位置，即当前鼠标的坐标位置，执行相对应的处理，其具体包括：

当前鼠标位置处于合法的画布编辑区时，在画布编辑区生成与被拖拽的按钮元素对应的多媒体控件的代码，并实时渲染在画布编辑区上，初始化生成与该多媒体控件对应的编辑工具；

反之，则取消此次操作，并清除临时层。

进一步的，所述自定义控件包括：

布局控件，用于画布编辑区分割，使用flex栅格进行布局设置；

基础控件，包含标题、段落、链接、路径以及svg相关的属性；

交互控件，包含提示弹窗、控件连线、控件子元素展开；

数据流控件，包含评分卡、规则集、多媒体展示。

进一步的，所述渲染画布编辑区包括监听拖动行为，在监听到释放鼠标行为操作时，当前鼠标位置不处于合法的画布编辑区，取消此次操作，并清除临时层；

反之，判断画布编辑区中是否存有布局控件以及临时层所存储的自定义控件；

当画布编辑区中没有布局控件，而临时层所存储的多媒体控件代码对应布局控件时，根据临时层，在画布编辑区中渲染对应的多媒体控件；

当画布编辑区中存有布局控件，根据临时层，在画布编辑区中直接渲染对应的多媒体控件；

渲染控件包括获取临时层中所存储的多媒体控件代码，并将临时层中所存储的多媒体控件代码按照统一的规范格式，在画布编辑区中添加、渲染，然后初始化该多媒体控件所对应的编辑工具；

记录本次操作行为，并将操作数据存储到本地缓存或者上传到远程服务器，用于恢复操作以及重新渲染编辑好的界面。

进一步的，所述存储可视化流数据包括监控数据拖动控件，并判断是否成功，成功则存储操作至本地缓存，当编辑完成后，点击工具操作区的预览按钮，新建一个浮动于网页上层的展现层，将画布编辑区中的所有代码及数据重新渲染，并展现给用户。

为了实现上述目的，根据本申请的另一方面，提供了一种基于WEB前端的可视化工作流编辑装置。

根据本申请的基于WEB前端的可视化工作流编辑装置包括：

控件区，根据业务定制相关的控件，定制完成后，系统监听控件区的控件；

工具操作区，包含撤销、复制、导出、保存功能，用于对编辑系统的数据进行主动更改；

画布编辑区，存储用户拖拽的控件，响应工具操作区的数据变动。

进一步的，所述控件区在监听到按钮元素被拖拽操作时，新建与被拖拽的按钮元素相对应的临时层；

当监听到释放鼠标行为操作时，则根据当前鼠标位置，执行相对应的处理；

其中，记录鼠标移动轨迹，并存储被拖动控件所对应的多媒体控件的页面信息及数据信息；

根据多媒体控件的页面信息及数据信息，渲染出对应的业务流效果；

当释放鼠标行为操作时，根据当前鼠标的位置执行对应的处理逻辑，当监听到释放鼠标行为操作时，判断当前鼠标位置是否处于合法的画布编辑区中，若是，则按照预设的规范，在画布编辑区生成与被拖拽的按钮元素相对应的多媒体控件的代码，并渲染在画布编辑区上，以及自动构建出对应的编辑工具；

反之，则取消操作，并清除临时层；

当画布编辑区中没有存有布局控件，且临时层所存储的多媒体控件代码是对应布局控件，此时，则按照预设的规范，在画布编辑区生成与被拖拽的按钮元素相对应的多媒体控件的代码，并渲染在画布编辑区上，以及自动构建出对应的编辑工具。

进一步的，所述画布编辑区对鼠标行为进行监控，当检测到控件进入画布区时，创建画布临时层并判断控件内部数据结构是否符合要求，然后执行对应的画布展示操作，反之，则取消操作，并清除临时层；

根据被拖拽的按钮元素所对应的控件的id号，获取对应的控件的页面信息及数据信息，并将获取得到的多媒体控件的页面信息及数据信息复制至临时层中，其中，一个控件对应唯一一个id号；

所述临时层为一个浮动于网页上层的临时层；

所述控件的类型包括有布局控件、基本控件、交互组件及拓展组。

进一步的，用户根据工具操作区对画布区进行保存操作，将画布编辑区中的所有代码存储到本地存储或远程服务中，远程服务器只存在控件节点数据，用户设置数据存储在本地。

在本申请实施例中，采用系统已定义的各种多媒体元素操作控件，通过拖拽的操作方式或源码编辑的方式，对web前端多媒体元素进行编辑，达到了对受影响主机自动检测和持续跟进的目的，从而实现UI、代码统一规范的管理，便利了用户的自定义编辑操作，并且在实际应用中不要求操作者拥有前端知识，也能通过拖拽方式实现制作一套标准的前端页面的技术效果，进而解决了配置困难，无法使用拖拽技术，功能维护成功高，复用性差，技术门槛高，需要一定可视化知识的技术问题。

附图说明

构成本申请的一部分的附图用来提供对本申请的进一步理解，使得本申请的其它特征、目的和优点变得更明显。本申请的示意性实施例附图及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1是根据本申请实施例的基于WEB前端的可视化工作流编辑系统附图；

图2是根据本申请实施例的界面图。

具体实施方式

为了使本技术领域的人员更好地理解本申请方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分的实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请保护的范围。

需要说明的是，本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

在本申请中，术语“上”、“下”、“左”、“右”、“前”、“后”、“顶”、“底”、“内”、“外”、“中”、“竖直”、“水平”、“横向”、“纵向”等指示的方位或位置关系为基于附图所示的方位或位置关系。这些术语主要是为了更好地描述本发明及其实施例，并非用于限定所指示的装置、元件或组成部分必须具有特定方位，或以特定方位进行构造和操作。

并且，上述部分术语除了可以用于表示方位或位置关系以外，还可能用于表示其他含义，例如术语“上”在某些情况下也可能用于表示某种依附关系或连接关系。对于本领域普通技术人员而言，可以根据具体情况理解这些术语在本发明中的具体含义。

此外，术语“安装”、“设置”、“设有”、“连接”、“相连”、“套接”应做广义理解。例如，可以是固定连接，可拆卸连接，或整体式构造；可以是机械连接，或电连接；可以是直接相连，或者是通过中间媒介间接相连，又或者是两个装置、元件或组成部分之间内部的连通。对于本领域普通技术人员而言，可以根据具体情况理解上述术语在本发明中的具体含义。

需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。

根据本发明实施例，提供了一种基于WEB前端的可视化工作流编辑方法，该方法包括如下的步骤：

构建前端页面布局：

前端页面基于Vue.js开发，通过使用Vue.js组件来编写操作界面，前端页面布局界面中的左侧设为控件区，右侧设为画布编辑区，顶部设为工具操作区；

对于前端页面布局界面中的每个模块，其各司其职，具体：

工具操作区主要是常用工具的集中摆放位置，所述常用工具包括但不限于有编辑模式、预览效果、保存编辑、清空代码、撤销操作；

所述控件区主要是摆放多媒体控件的操作按钮，即按钮元素，也是拖拽交互的开始点；

所述画布编辑区则是核心的操作区域，负责代码可视化渲染及代码存储功能。

构建操作行为监听控制器：

在控件区上建立基本元素按钮列表，并给控件区中所有的按钮元素绑定拖拽监听行为，当在控件区的按钮元素被用户进行拖拽操作，即在控件区的按钮元素被鼠标点击，并且点击后不释放鼠标操作的同时进行拖动，就新建一个相对应的浮动于网页上层的临时层，也就是说，当监听到按钮元素被进行拖拽操作时，就新建一个与被拖拽的按钮元素相对应的临时层；

对于上述的临时层，其存储了被拖拽的按钮元素所对应的多媒体控件的页面信息及数据信息，临时层则可根据多媒体控件的页面信息及数据信息及时在html 上渲染出对应的控件插件效果，而且临时层是跟随用户的鼠标移动轨迹进行移动，这样则能够及时将鼠标拖拽轨迹展现给用户，同时记录当前鼠标位置给接下来释放鼠标行为操作做判断；

当临时层处于合法的画布编辑区以及监听到用户的释放鼠标行为操作时，则根据临时层中所存储的内容，按照预设的规范，在画布编辑区生成与被拖拽的按钮元素对应的多媒体控件的代码，并实时渲染在画布编辑区上，也就是说，对于所述当监听到用户的释放鼠标行为操作时，根据当前鼠标位置，即当前鼠标的坐标位置，执行相对应的处理这一步骤，其具体包括：

当当前鼠标位置处于合法的画布编辑区时，则在画布编辑区生成与被拖拽的按钮元素对应的多媒体控件的代码，并实时渲染在画布编辑区上，以及初始化生成与该多媒体控件对应的编辑工具；

反之，则取消此次操作，并清除临时层。

构建自定义控件：

用户可以通过控件区，制作一个统一规范的自定义控件，分以下四类：

布局控件，用于画布编辑区分割作用那个，使用flex栅格进行布局设置；

基础控件，主要包含标题、段落、链接、path、以及svg相关的属性；

交互控件，主要包含提示弹窗、控件连线、控件子元素展开；

数据流控件，主要包含评分卡、规则集、多媒体展示。

渲染画布编辑区：

监听拖动行为，当监听到释放鼠标行为操作时，当前鼠标位置不处于合法的画布编辑区，那么则取消此次操作，并清除临时层；

若释放时，当前鼠标位置处于合法的画布编辑区，那么则判断画布编辑区中是否存有布局控件，以及判断临时层所存储的自定义控件。

对于所述根据判断结果，执行对应的处理这一步骤，其具体包括以下步骤：

当画布编辑区中没有存有布局控件，而临时层所存储的多媒体控件代码则对应布局控件，此时，则根据临时层，在画布编辑区中渲染对应的多媒体控件；

当画布编辑区中存有布局控件，则根据临时层，在画布编辑区中直接渲染对应的多媒体控件；

对于渲染控件这一行为，其主要处理两个事情：

获取临时层中所存储的多媒体控件代码，并将临时层中所存储的多媒体控件代码按照统一的规范格式，在画布编辑区中添加、渲染，然后初始化该多媒体控件所对应的编辑工具；

存储可视化流数据：

每一次数据拖动控件都会被监控，并判断是否成功，成功则存储操作至本地缓存，无需担心数据丢失的问题，当编辑完成后，点击工具操作区的预览按钮，此时则会新建一个浮动于网页上层的展现层，将画布编辑区中的所有代码及数据重新渲染，并展现给用户；

展现层的具体效果就是用户将编辑好的web前端网页具体应用到其它地方的效果。并且，用户可以通过操作工具操作区的应用按钮，从而将编辑好的页面所对应的具体的代码直接复制到计算机的剪贴板上，这样用户便可以直接通过iframe 应用或者直接在html上应用到自己成品。

从以上的描述中，可以看出，本发明实现了如下技术效果：

在本申请实施例中，采用系统已定义的各种多媒体元素操作控件，通过拖拽的操作方式或源码编辑的方式对web前端多媒体元素进行编辑，实现UI、代码统一规范的管理，便利了用户的自定义编辑操作，并且在实际应用中不要求操作者拥有前端知识，也能通过拖拽方式实现制作一套标准的前端页面；

不仅针对布局的应用，还能细化到具体HTML的各种多媒体元素的混合编排使用，操作灵活性高，并且能达到用户自由自定义web前端页面的编辑制作，满足不同用户的需求，适用性强，能利于web前端页面编辑设计技术的推广及普及应用；

通过扩充插件的方式，让编辑内容以及样式变得更广泛，可以自由组合出任意的需求页面；

通过页面源码渲染浮动div的方式可以让用户在拖拽控件的时候，清晰知道操作正对哪一个多媒体插件进行操作，增强操作的精确性；

开放式控件自定义的方法，可以由用户自定义保存并应用更多类型的控件，不局限默认提供的控件，操作灵活性强。

需要说明的是，步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

根据本发明实施例，还提供了一种用于实施上述基于WEB前端的可视化工作流编辑方法的装置，该装置的系统模块包括：

控件区：

用户可根据业务定制相关的控件，定制完成后，系统会监听控件区的控件。当监听到按钮元素被拖拽操作时，新建与被拖拽的按钮元素相对应的临时层；当监听到释放鼠标行为操作时，则根据当前鼠标位置，执行相对应的处理。

其中，记录鼠标移动轨迹，并存储被拖动控件所对应的多媒体控件的页面信息及数据信息；根据多媒体控件的页面信息及数据信息，渲染出对应的业务流效果。

当释放鼠标行为操作时，会根据当前鼠标的位置执行对应的处理逻辑，步骤如下：

当监听到释放鼠标行为操作时，判断当前鼠标位置是否处于合法的画布编辑区中，若是，则按照预设的规范，在画布编辑区生成与被拖拽的按钮元素相对应的多媒体控件的代码，并渲染在画布编辑区上，以及自动构建出对应的编辑工具；

反之，则取消操作，并清除临时层。

工具操作区：

工具操作则包含：撤销、复制、导出、保存功能，用于对编辑系统的数据进行主动更改，保证用户能实时处理数据流。

画布编辑区：

存储用户拖拽的控件，响应工具操作区的数据变动。

对鼠标行为进行监控，当检测到控件进入画布区时，创建画布临时层并判断控件内部数据结构是否符合要求，然后执行对应的画布展示操作；反之，则取消操作，并清除临时层。

所述操作行为监听控制器还用于根据被拖拽的按钮元素所对应的控件的id号，获取对应的控件的页面信息及数据信息，并将获取得到的多媒体控件的页面信息及数据信息复制至临时层中；其中，一个控件对应唯一一个id号。

所述临时层为一个浮动于网页上层的临时层。所述控件的类型包括有布局控件、基本控件、交互组件及拓展组。

用户可根据工具操作区对画布区进行保存操作，将画布编辑区中的所有代码存储到本地存储或远程服务中，远程服务器只存在控件节点数据，用户设置数据则存储在本地。

显然，本领域的技术人员应该明白，上述的本发明的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本发明不限制于任何特定的硬件和软件结合。

以上所述仅为本申请的优选实施例而已，并不用于限制本申请，对于本领域的技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

Claims

1.一种基于WEB前端的可视化工作流编辑方法，其特征在于，包括：

构建自定义控件，用户通过控件区制作统一规范的自定义控件；

渲染画布编辑区；

存储可视化流数据。

2.根据权利要求1所述的基于WEB前端的可视化工作流编辑方法，其特征在于，所述构建前端页面布局的界面中的每个模块各司其职，具体包括：

所述工具操作区集中摆放常用工具，所述常用工具至少包括有编辑模式、预览效果、保存编辑、清空代码、撤销操作中的某一个；

所述控件区摆放多媒体控件的操作按钮，即按钮元素，作为拖拽交互的开始点；

所述画布编辑区是核心的操作区域，用于代码可视化渲染及代码存储。

3.根据权利要求1所述的基于WEB前端的可视化工作流编辑方法，其特征在于，所述构建操作行为监听控制器中的临时层存储了被拖拽的按钮元素所对应的多媒体控件的页面信息及数据信息，根据多媒体控件的页面信息及数据信息在html上渲染出对应的控件插件效果；

临时层跟随用户的鼠标移动轨迹进行移动，将鼠标拖拽轨迹展现给用户，并且记录当前鼠标位置给释放鼠标行为操作做判断；

反之，则取消此次操作，并清除临时层。

4.根据权利要求1所述的基于WEB前端的可视化工作流编辑方法，其特征在于，所述自定义控件包括：

基础控件，包含标题、段落、链接、路径；

交互控件，包含提示弹窗、控件连线、控件子元素展开；

数据流控件，包含评分卡、规则集、多媒体展示。

5.根据权利要求1所述的基于WEB前端的可视化工作流编辑方法，其特征在于，所述渲染画布编辑区包括监听拖动行为，在监听到释放鼠标行为操作时，当前鼠标位置不处于合法的画布编辑区，取消此次操作，并清除临时层；

6.根据权利要求1所述的基于WEB前端的可视化工作流编辑方法，其特征在于，所述存储可视化流数据包括监控数据拖动控件，并判断是否成功，成功则存储操作至本地缓存，当编辑完成后，点击工具操作区的预览按钮，新建一个浮动于网页上层的展现层，将画布编辑区中的所有代码及数据重新渲染，并展现给用户。

7.一种基于WEB前端的可视化工作流编辑装置，其特征在于，系统模块包括：

8.根据权利要求7所述的一种基于WEB前端的可视化工作流编辑装置，其特征在于，所述控件区在监听到按钮元素被拖拽操作时，新建与被拖拽的按钮元素相对应的临时层；

反之，则取消操作，并清除临时层；

9.根据权利要求7所述的一种基于WEB前端的可视化工作流编辑装置，其特征在于，所述画布编辑区对鼠标行为进行监控，当检测到控件进入画布区时，创建画布临时层并判断控件内部数据结构是否符合要求，然后执行对应的画布展示操作，反之，则取消操作，并清除临时层；

所述临时层为一个浮动于网页上层的临时层；

10.根据权利要求7所述的一种基于WEB前端的可视化工作流编辑装置，其特征在于，用户根据工具操作区对画布区进行保存操作，将画布编辑区中的所有代码存储到本地存储或远程服务中，远程服务器只存在控件节点数据，用户设置数据存储在本地。