一种标记流程图状态的方法与流程

1.本发明涉及软件开发技术领域，尤其涉及一种标记流程图状态的方法。


背景技术：

2.流程图被广泛地应用于业务流程分析、计算机程序设计、数据处理系统的开发和管理等领域。工业上遇到需要使用绘制流程图的方式分析组件之间的关系，或者辅助我们分析创新思维的策略。现有的项目流程图的绘制在使用antv x6绘制流程图的时候，一个流程会有多个不同的步骤，会出现流程内容庞大，步骤繁杂，绘制成流程图后，我们无法清晰的看出一些重点步骤的实现情况，无法获知项目的实际运转状态，导致项目执行的效率较为低下。


技术实现要素：

3.本发明的目的是为了解决现有技术中存在的缺点，而提出的一种标记流程图状态的方法。
4.为实现上述目的，本发明采用了如下技术方案：一种标记流程图状态的方法，包括以下步骤：s1：使用antv x6图编辑引擎的流程图组件库，绘制流程图画布搭建流程图的绘图页面；基于vue cli创建项目文件，使用antv x6图编辑引擎开发实现流程图的基本功能组件；s2：在绘图页面上绘制流程图，获取绘制的流程图的数据；s3：配置状态数据；声明状态数据为list列表形式，配置状态数据中不同状态下对应的标记颜色；流程图的节点组件所处的状态包括进行中、取消；s4：根据节点组件位置展示状态弹框；s5：展示状态弹框的内容；状态弹框的内容通过配置的状态数据，以列表的形式动态渲染展示；s6：根据需求，为选中的节点组件配置状态；s7：数据存储。
5.进一步的，所述绘图页面包括基本功能组件，所述基本功能组件包括节点组件、节点属性工具以及画布；所述节点组件包括图形控件，所述图形控件上包括文字编辑框用于编辑文字，所述节点属性工具用于修改节点组件的属性，组件的属性包括节点组件的线条的背景颜色，文字大小，画布为antv x6图编辑引擎提供的graph类初始化流程编辑画布。
6.进一步的，在画布上添加流程图的节点组件构建流程图，获取画布所有节点组件的json数据；所述json数据包含多个节点数据cell，节点数据cell包括节点组件的id，文字和
位置。
7.进一步的，步骤s4具体包括：s41：定义节点数据nodecell；设置节点组件的触发操作事件，选中节点组件，通过on 事件监听触发操作，获取到选中的节点数据cell，并将选中的节点数据cell定义为节点数据nodecell；s42：获取选中的节点组件的位置，根据节点位置展示状态弹框；获取选中的节点组件相对于画布的坐标（clientx,clinety），在节点组件的一侧展示状态弹框；状态弹框为悬浮弹框；坐标系是以画布的左上角为坐标原点，向右为x轴正方向，向下为y轴正方向建立的坐标系，坐标长度单位为像素；获取的节点组件的坐标（clientx,clinety）为节点组件的右上角在坐标系中的坐标。
8.进一步的，获取节点组件中心点的坐标（centerx, centery），将悬浮弹框的左上角定位至中心点的坐标（centerx, centery）进行展示。
9.进一步的，步骤s6具体包括：根据流程图中的节点组件的状态需求，在状态弹框的列表中选择节点组件所处的状态，为列表配置点击事件，在点击事件中为节点数据nodecell添加节点工具；节点工具包括颜色，颜色根据选择的节点组件所处的状态对应的配置状态数据的颜色决定，节点工具渲染显示在获取的节点组件的坐标（clientx,clinety）处。
10.进一步的，配置状态完成后，重新获取画布的json数据，存储到后端接口。
11.进一步的，节点工具为标记圆点。
12.进一步的，所述触发操作为鼠标右击。
13.与现有技术相比，本发明的有益效果为：（1）本发明通过antv x6 提供的addtools方法添加节点工具展示在节点组件上，用于标记状态，通过根据不同的业务场景使用不同的颜色去标记流程图的节点组件，可以更加清晰明了的看到流程图，有利于我们一目了然的浏览视图，了解流程图中各步骤的状态情况，清晰的观察出各个步骤之间的关系和进度，提高团队合作效率，提高项目的执行效率。（2）本发明配置完成后的json数据，存储到后端接口，用于后续调用存储的json数据展示使用。将配置好的流程数据进行存储，方便存储，避免数据遗失，并且通过调用最后保存的json数据进行展示，方便其他人观看构建的项目流程，具有一定的共享性，利用接口调用json数据减少耦合，方便修改，利于进行团队合作。
附图说明
14.图1为本发明标记流程图状态的方法的步骤流程图。
实施方式
15.为使对本发明的目的、构造、特征、及其功能有进一步的了解，兹配合实施例详细说明如下。
16.一种标记流程图状态的方法，包括以下步骤：
s1：使用antv x6图编辑引擎的流程图组件库，绘制流程图画布搭建流程图的绘图页面；基于vue cli创建项目文件，使用antv x6图编辑引擎开发实现流程图的基本功能组件；所述绘图页面包括基本功能组件，所述基本功能组件包括节点组件、节点属性工具以及画布；所述节点组件包括图形控件，所述图形控件上包括文字编辑框用于编辑文字，所述节点属性工具用于修改节点组件的属性，组件的属性包括节点组件的线条的背景颜色，文字大小等；画布为antv x6图编辑引擎提供的graph类初始化流程编辑画布。保证能够基于绘图页面在画布上实现流程图的绘制。
17.antv x6图编辑引擎在高定制能力的基础上，提供了一系列设计优雅、便于使用的图可视化解决方案，通过antv x6图编辑引擎能帮助开发者搭建属于自己的图形分析应用或是图编辑器应用，方便后续在画布上创建流程图。
18.vue cli是一个官方发布 vue.js 项目脚手架，用于轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。保证项目程序的成功创建。
19.s2：在绘图页面上绘制流程图，获取绘制的流程图的数据；在画布上添加流程图的节点组件构建流程图，通过antv x6提供的graph.tojson()方法，获取画布所有节点组件的json数据；所述json数据包含多个节点数据cell，节点数据cell包括节点组件的id，文字和位置等。
20.s3：配置状态数据；流程图的节点组件所处的状态包括进行中、取消等，声明状态数据为list列表形式；其中定义list:[{text:'进行中'，color:'#4c84fc'},{text:'取消'，color:'#4c84fc'}]；配置状态数据中不同状态下对应的标记颜色；其中，text:组件所处状态的文字描述，color:组件状态的标记颜色。
[0021]
s4：根据节点组件位置展示状态弹框；s41：定义节点数据nodecell；设置节点组件的触发操作事件，选中节点组件，通过on 事件监听触发操作，获取到选中的节点数据cell，并将选中的节点数据cell定义为节点数据nodecell；所述触发操作包括鼠标右击；所述on 事件监听具体为通过graph.on("cell:contextmenu")监听鼠标操作。on事件属于点击触发事件。
[0022]
保证当鼠标在节点组件上方操作的时候，通过点击事件获取当前操作的节点组件包含的节点数据cell，有针对性的对不同的节点组件进行操作。
[0023]
s42：获取选中的节点组件的位置，根据节点位置展示状态弹框；获取选中的节点组件相对于画布的坐标（clientx,clinety），通过css定位position:fixed的方法，将节点组件相对于画布固定定位，根据获取的节点组件的坐标（clientx,clinety），在节点组件的一侧展示状态弹框；状态弹框为悬浮弹框。通过触发操作事件触发悬浮弹框，并将悬浮弹框固定在节点组件的一侧，方便在操作过程中能够直观的了解本过程是为哪个节点组件添加状态，使得操作简单，不会添加错误。
[0024]
以画布的左上角为坐标原点，向右为x轴正方向，向下为y轴正方向建立坐标系，坐
标长度单位为像素。定义获取的节点组件的坐标（clientx,clinety）为节点组件的右上角在坐标系中的坐标。
[0025]
获取节点组件中心点的坐标（centerx, centery），将悬浮弹框的左上角定位至中心点的坐标（centerx, centery）进行展示。
[0026]
节点组件为矩形时，节点组件的坐标包括左上角坐标（x1,y1），右上角坐标（x2,y2），左下角坐标（x3,y3），右上角坐标（x4,y4），则centerx=(x1+ x2)/2; centery=(y1+ y3)/2。
[0027]
s5：展示状态弹框的内容；状态弹框的内容通过配置的状态数据，以列表的形式动态渲染展示。方便能够直观的看到列表中的状态选项，为节点组件添加状态。
[0028]
s6：根据需求，为选中的节点组件配置状态；根据流程图中的节点组件的状态需求，在状态弹框的列表中选择节点组件所处的状态，为列表配置点击事件，在点击事件中，通过antv x6为节点组件提供的addtools()，为节点数据nodecell添加节点工具，用于标记状态展示；节点工具可以为一个标记圆点，节点工具包括颜色，颜色根据选择的节点组件所处的状态对应的配置状态数据的颜色决定，节点工具渲染显示在获取的节点组件的坐标（clientx,clinety）处。
[0029]
保证在使用过程中选中节点组件右击，基于当前节点组件的位置定位状态弹框的位置，弹出状态弹框，状态弹框内容以列表的形式可选择点击的状态，用户通过配置状态数据自定义弹框展示的状态颜色，根据需要点击对应的状态，通过antv x6 提供的addtools方法添加节点工具展示在节点组件上，用于标记状态，通过根据不同的业务场景使用不同的颜色去标记流程图的节点组件，可以更加清晰明了的看到有利于我们一目了然的浏览视图，了解流程图中各步骤的状态情况，清晰的观察出各个步骤之间的关系和进度，提高团队合作效率，提高项目的执行效率。
[0030]
s7：数据存储；配置状态完成后，通过antvx6提供的graph.tojson()方法重新获取画布的json数据，存储到后端接口，用于后续调用存储的json数据展示使用。将配置好的流程数据进行存储，方便存储，避免数据遗失，并且通过调用最后保存的json数据进行展示，方便其他人观看构建的项目流程，具有一定的共享性，利用接口调用json数据减少耦合，方便修改，利于进行团队合作。
[0031]
本发明已由上述相关实施例加以描述，然而上述实施例仅为实施本发明的范例。必需指出的是，已揭露的实施例并未限制本发明的范围。相反地，在不脱离本发明的精神和范围内所作的更动与润饰，均属本发明的专利保护范围。

技术特征：
1.一种标记流程图状态的方法，其特征在于：包括以下步骤：s1：使用antv x6图编辑引擎的流程图组件库，绘制流程图画布搭建流程图的绘图页面；s2：在绘图页面上绘制流程图，获取绘制的流程图的数据；s3：配置状态数据；声明状态数据为list列表形式，配置状态数据中不同状态下对应的标记颜色；流程图的节点组件所处的状态包括进行中、取消；s4：根据节点组件位置展示状态弹框；s5：展示状态弹框的内容；状态弹框的内容通过配置的状态数据，以列表的形式动态渲染展示；s6：根据需求，为选中的节点组件配置状态；s7：数据存储。2.如权利要求1所述的一种标记流程图状态的方法，其特征在于：所述绘图页面包括基本功能组件，所述基本功能组件包括节点组件、节点属性工具以及画布；所述节点组件包括图形控件，所述图形控件上包括文字编辑框用于编辑文字，所述节点属性工具用于修改节点组件的属性，组件的属性包括节点组件的线条的背景颜色，文字大小，画布为antv x6图编辑引擎提供的graph类初始化流程编辑画布。3.如权利要求2所述的一种标记流程图状态的方法，其特征在于：在画布上添加流程图的节点组件构建流程图，获取画布所有节点组件的json数据；所述json数据包含多个节点数据cell，节点数据cell包括节点组件的id，文字和位置。4.如权利要求3所述的一种标记流程图状态的方法，其特征在于：步骤s4具体包括：s41：定义节点数据nodecell；设置节点组件的触发操作事件，选中节点组件，通过on 事件监听触发操作，获取到选中的节点数据cell，并将选中的节点数据cell定义为节点数据nodecell；s42：获取选中的节点组件的位置，根据节点位置展示状态弹框；获取选中的节点组件相对于画布的坐标（clientx,clinety），在节点组件的一侧展示状态弹框；状态弹框为悬浮弹框；坐标系是以画布的左上角为坐标原点，向右为x轴正方向，向下为y轴正方向建立的坐标系，坐标长度单位为像素；获取的节点组件的坐标（clientx,clinety）为节点组件的右上角在坐标系中的坐标。5.如权利要求4所述的一种标记流程图状态的方法，其特征在于：获取节点组件中心点的坐标（centerx, centery），将悬浮弹框的左上角定位至中心点的坐标（centerx, centery）进行展示。6.如权利要求4所述的一种标记流程图状态的方法，其特征在于：步骤s6具体包括：根据流程图中的节点组件的状态需求，在状态弹框的列表中选择节点组件所处的状态，为列表配置点击事件，在点击事件中为节点数据nodecell添加节点工具；节点工具包括颜色，颜色根据选择的节点组件所处的状态对应的配置状态数据的颜色决定，节点工具渲染显示在获取的节点组件的坐标（clientx,clinety）处。
7.如权利要求1所述的一种标记流程图状态的方法，其特征在于：配置状态完成后，重新获取画布的json数据，存储到后端接口。8.如权利要求6所述的一种标记流程图状态的方法，其特征在于：节点工具为标记圆点。9.如权利要求4所述的一种标记流程图状态的方法，其特征在于：所述触发操作为鼠标右击。

技术总结
本发明提供一种标记流程图状态的方法，包括以下步骤：S1：使用antv X6图编辑引擎的流程图组件库，绘制流程图画布搭建流程图的绘图页面；S2：在绘图页面上绘制流程图，获取绘制的流程图的数据；S3：配置状态数据；S4：根据节点组件位置展示状态弹框；S5：展示状态弹框的内容；S6：根据需求，为选中的节点组件配置状态；S7：数据存储。本发明有利于一目了然的浏览视图，了解流程图中各步骤的状态情况，清晰的观察出各个步骤之间的关系和进度，提高团队合作效率，提高项目的执行效率，具有一定的共享性，方便修改，利于进行团队合作。利于进行团队合作。利于进行团队合作。


技术研发人员：杨松贵 鲁晴
受保护的技术使用者：南京维拓科技股份有限公司
技术研发日：2023.04.28
技术公布日：2023/7/21