一种基于蓝图的数据大屏可视化系统交互的构建方法与流程

1.本发明涉及数据可视化技术领域，更具体地说，涉及一种基于蓝图的数据大屏可视化系统交互的构建方法。


背景技术：

2.目前市场上有较多的数据大屏可视化系统。可视化系统一般以配置数据大屏作为目标，丰富大屏的内容并发布，以完成用户对于数据可视化需求的实现。对于数据大屏可视化系统中的交互需求，一般是针对组件定义交互事件模块，可将不同的组件通过交互事件关联到一起。
3.但是在大屏数据可视化交互需求场景中，存在以下缺点：
4.1.基于组件交互事件关联的实现方式下，在交互事件定义范围内的交互较容易实现，但是用户一些其它自定义场景交互需求较难以实现，扩展性欠佳；
5.2.基于组件交互事件关联的实现方式下，较难以实现基于组件的更细颗粒度的交互控制，例如依赖其它组件交互事件的处理结果以及时序控制等；
6.3.基于组件交互事件关联的实现方式下，由于缺乏统一的事件交互呈现，用户很难对当前大屏数据可视化的交互有整体的掌握，只能基于局部的组件进行交互事件的配置。
7.综合以上三个方面，传统的数据大屏可视化系统组件交互事件定义的方式在实际应用过程中稍显不足。


技术实现要素：

8.1.要解决的技术问题
9.针对现有技术中存在的问题，本发明的目的在于提供一种基于蓝图的数据大屏可视化系统交互的构建方法，它可以实现大屏可视化过程中更加通用、更加灵活的大屏交互的控制。
10.2.技术方案
11.为解决上述问题，本发明采用如下的技术方案。
12.一种基于蓝图的数据大屏可视化系统交互的构建方法，包括以下步骤：
13.s1、基于数据大屏可视化系统创建蓝图编辑器模块；
14.s2、创建蓝图编辑器导入节点模块，将数据大屏可视化系统中的可视化组件导入到蓝图编辑器导入节点模块中，作为数据大屏可视化系统交互的基础元素；
15.s3、创建蓝图编辑器逻辑节点模块，逻辑节点模块包括全局模块、流程控制模块、数据处理模块和输入设备；
16.s4、创建蓝图编辑器可视化编辑器，在可视化编辑器中，将s2导入节点模块和s3逻辑节点模块中的节点拖入可视化编辑器中，根据用户的组件交互需求关联配置；
17.s5、创建蓝图编辑器工具栏，辅助用户在可视化编辑器中更好的完成节点交互逻
辑的配置；
18.s6、创建蓝图编辑器配置面板模块，配置面板用以完成用户配置节点蓝图交互过程中的逻辑控制流程，用户可通过javascript代码判断及返回逻辑节点的处理结果；
19.s7、创建蓝图编辑器预览模块，用户将配置完成的数据可视化大屏交互进行预览，查看数据可视化大屏的交互过程；
20.s8、创建蓝图编辑器调试模块，用户在完成数据可视化大屏交互之后，展示的实际效果和预期效果不一致，通过蓝图编辑器调试模块可详细的查看数据可视化大屏的交互过程以及逻辑控制，以便排查交互配置相关的问题。
21.进一步的，导入节点模块中的每个导入的组件节点和逻辑节点模块中的每个逻辑节点均包括事件和动作的定义，事件为该组件在某一过程节点所暴露的触发点，动作为希望该组件所执行的动作，不同的组件对应的事件和动作均不同。
22.进一步的，全局模块包括全局节点；全局节点表示全局唯一的处理节点，表示只会触发一次的事件的定义和针对数据可视化大屏整体的动作；流程控制模块包括分支判断、多路判断和定时器；分支判断用于判断某一输入项是否满足条件；多路判断用于判断输入项的值来执行相应的结果；定时器用于用户希望在某个指定的点执行某一操作，或者定时触发某一操作的场景；数据处理模块包括串行数据处理、并行数据处理和序列执行；串行数据处理表示输入项需依次经过若干个处理方法处理之后将处理结果提供给后续流程使用；并行数据处理表示不同的输入项对应不同的后续处理流程，彼此互不影响；序列执行表示对某一输入项，依次判断是否满足某个处理方法，若满足某一处理则停止判断并执行后续处理流程；输入设备包括键盘；键盘表示用户操作指定键盘按键所对应的后续处理流程。
23.进一步的，s4中的蓝图编辑器可视化编辑器关联配置的具体步骤如下：
24.a1：将需要交互的组件导入到导入节点模块中；
25.a2：将导入节点中的组件拖入可视化编辑器中；
26.a3：将需要用到的逻辑节点拖入到可视化编辑器中；
27.a4：将组件节点以及逻辑节点根据需求自定义连线；
28.a5：在配置面板中根据需求编写逻辑节点的处理过程，更新对应的动作。
29.进一步的，s5中的蓝图编辑器工具栏包含以下内容：
30.b1：适配画布，调整可视化编辑器的缩放比例，在当前画布的可视范围内显示当前所有的组件节点以及逻辑节点；
31.b2：启用/停用，将某一组件节点或逻辑节点更新为启用/停用的状态；
32.b3：清空蓝图及画布，清空当前画布的所有组件节点、逻辑节点及连线，并还原所有导入节点的组件；
33.b4：删除不可用节点，将当前画布中已被删除或停用的组件节点删除；
34.b5：搜索节点，快速查询当前画布中的某个节点；
35.b6：切换框选模式/切换单选模式，更改当前编辑器的选择模式为批量框选模式/单选模式；
36.b7：调整画布缩放比例，动态调整画布的缩放比例，使用户更方便的完成交互的配置过程。
37.进一步的，s6中的蓝图编辑器配置面板模块包含以下内容：
38.c1：显示上游组件事件说明，选择某一个上游组件，选择对应的事件可查看上游组件对应的事件说明、数据定义以及数据实例；
39.c2：显示下游组件事件说明，选择某一个下游组件，选择对应的事件可查看下游组件对应的事件说明、数据定义以及数据实例；
40.c3：配置逻辑节点的具体执行的逻辑内容，上游组件的返回值将作为下游组件的输入项，可多级配置。
41.进一步的，s8中的蓝图编辑器调试模块的工作过程包括以下步骤：
42.d1：在蓝图编辑器中，选择需要调试的连线，并选择记录连线日志；
43.d2：以调试模式预览大屏，并打开日志记录开关；
44.d3：点击数据可视化大屏中对应的交互组件；
45.d4：在调试模块的执行日志中将会看到事件的执行信息，包括发生时间、事件执行流程图，点击某段流程可查看当前执行的起始节点、目标节点、事件、方法、发生时间和数据返回信息。
46.d5：通过排查d4步骤中可能出现问题的点并查看对应的执行信息，可快速定位数据可视化大屏的交互配置问题并修复。
47.3.有益效果
48.相比于现有技术，本发明的优点在于：
49.(一)本方案可以实现大屏可视化过程中更加通用、更加灵活的大屏交互的控制。
50.(二)本方案将数据可视化大屏的交互逻辑进行了分模块定义并增加了事件和动作的概念，每个组件均可定义自己的事件以及动作，搭配逻辑节点的使用可以完成更加标准化的数据可视化大屏的交互配置流程。
51.(三)本方案基于标准化的设计和拆分可以实现数据可视化大屏交互配置更好的扩展性。组件节点、逻辑节点通过连线并通过配置面板的自定义逻辑流程的配置，可根据用户自定义的交互场景实现任意的数据可视化大屏的交互配置。
52.(四)本方案通过蓝图在线编辑器实现了数据可视化大屏交互的配置，通过可视化编辑器可以通过一个界面总览当前数据可视化大屏的所有交互逻辑，并可以方便的预览交互效果。
53.(五)本方案为便于用户在配置复杂的数据可视化大屏过程中可能产生的逻辑交互的配置问题，引入了蓝图编辑器调试的模块，用户可以通过可视化的调试界面方便快速地定位交互配置问题的根源并解决交互配置问题。
附图说明
54.图1为本发明的流程图；
55.图2为本发明的蓝图编辑器交互配置示例图。
具体实施方式
56.实施例：
57.请参阅图1-2的一种基于蓝图的数据大屏可视化系统交互的构建方法，它包括以下步骤：
58.s1、基于数据大屏可视化系统创建蓝图编辑器模块；
59.s2、创建蓝图编辑器导入节点模块，将数据大屏可视化系统中的可视化组件(例如可视化组件a和可视化组件b)导入到蓝图编辑器导入节点模块中，作为数据大屏可视化系统交互的基础元素；
60.s3、创建蓝图编辑器逻辑节点模块(例如蓝图逻辑节点a和蓝图逻辑节点b)，逻辑节点模块包括全局模块、流程控制模块、数据处理模块和输入设备；
61.s4、创建蓝图编辑器可视化编辑器，在可视化编辑器中，将s2导入节点模块和s3逻辑节点模块中的节点拖入可视化编辑器中，根据用户的组件交互需求关联配置；
62.s5、创建蓝图编辑器工具栏，辅助用户在可视化编辑器中更好的完成节点交互逻辑的配置；
63.s6、创建蓝图编辑器配置面板模块，配置面板用以完成用户配置节点蓝图交互过程中的逻辑控制流程，用户可通过javascript代码判断及返回逻辑节点的处理结果；
64.s7、创建蓝图编辑器预览模块，用户将配置完成的数据可视化大屏交互进行预览，查看数据可视化大屏的交互过程；
65.s8、创建蓝图编辑器调试模块，用户在完成数据可视化大屏交互之后，展示的实际效果和预期效果不一致，通过蓝图编辑器调试模块可详细的查看数据可视化大屏的交互过程以及逻辑控制，以便排查交互配置相关的问题。
66.导入节点模块中的每个导入的组件节点和逻辑节点模块中的每个逻辑节点均可以包括事件和动作的定义，事件为该组件在某一过程节点所暴露的触发点，动作为希望该组件所执行的动作，不同的组件对应的事件和动作均不同。
67.全局模块包括全局节点；全局节点表示全局唯一的处理节点，表示只会触发一次的事件的定义和针对数据可视化大屏整体的动作；包含事件：“页面初始化完成”及“数据加载完成”，包含动作“设置回调id”以及“设置页面临时变量”。
68.流程控制模块包括分支判断、多路判断和定时器。
69.分支判断用于判断某一输入项是否满足条件；包含事件：“判断”，包含动作“满足”及“不满足”。
70.多路判断用于判断输入项的值来执行相应的结果，即某一输入项根据不同的处理流程会产生不同的结果，不同的结果会关联到不同的后续流程处理；包含事件：“判断”，包含动作“case-0”及“满足默认条件”，其中动作可通过控制面板根据实际场景自行定义。
71.定时器用于用户希望在某个指定的点执行某一操作，或者定时触发某一操作的场景；包含事件：“开始计时”及“停止计时”，包含动作“当到计时点时”。
72.数据处理模块包括串行数据处理、并行数据处理和序列执行。
73.串行数据处理表示输入项需依次经过若干个处理方法处理之后将处理结果提供给后续流程使用；包含事件“处理方法”，该过程可根据使用场景自定义。
74.并行数据处理表示不同的输入项对应不同的后续处理流程，彼此互不影响；包含事件“处理方法”，该过程可根据使用场景自定义。
75.序列执行表示对某一输入项，依次判断是否满足某个处理方法，若满足某一处理则停止判断并执行后续处理流程；包含事件“执行”，包含动作“then-0”，该动作可根据使用场景自定义。
76.输入设备包括键盘；键盘表示用户操作指定键盘按键所对应的后续处理流程，包含事件“当任意键按下时”、“当字符键按下时”、“当按键释放时”、“向上”、“向下”，输入设备无动作定义，在事件被执行时无需逻辑判断直接触发后续的处理流程。
77.s4中的蓝图编辑器可视化编辑器关联配置的具体步骤如下：
78.a1：将需要交互的组件导入到导入节点模块中；
79.a2：将导入节点中的组件拖入可视化编辑器中；
80.a3：将需要用到的逻辑节点拖入到可视化编辑器中；
81.a4：将组件节点以及逻辑节点根据需求自定义连线；
82.a5：在配置面板中根据需求编写逻辑节点的处理过程，更新对应的动作。
83.s5中的蓝图编辑器工具栏包含以下内容：
84.b1：适配画布，调整可视化编辑器的缩放比例，在当前画布的可视范围内显示当前所有的组件节点以及逻辑节点；
85.b2：启用/停用，将某一组件节点或逻辑节点更新为启用/停用的状态；
86.b3：清空蓝图及画布，清空当前画布的所有组件节点、逻辑节点及连线，并还原所有导入节点的组件；
87.b4：删除不可用节点，将当前画布中已被删除或停用的组件节点删除；
88.b5：搜索节点，快速查询当前画布中的某个节点；
89.b6：切换框选模式/切换单选模式，更改当前编辑器的选择模式为批量框选模式/单选模式；
90.b7：调整画布缩放比例，动态调整画布的缩放比例，使用户更方便的完成交互的配置过程。
91.s6中的蓝图编辑器配置面板模块包含以下内容：
92.c1：显示上游组件事件说明，选择某一个上游组件，选择对应的事件可查看上游组件对应的事件说明、数据定义以及数据实例；
93.c2：显示下游组件事件说明，选择某一个下游组件，选择对应的事件可查看下游组件对应的事件说明、数据定义以及数据实例；
94.c3：配置逻辑节点的具体执行的逻辑内容，上游组件的返回值将作为下游组件的输入项，可多级配置。
95.s8中的蓝图编辑器调试模块的工作过程包括以下步骤：
96.d1：在蓝图编辑器中，选择需要调试的连线，并选择记录连线日志；
97.d2：以调试模式预览大屏，并打开日志记录开关；
98.d3：点击数据可视化大屏中对应的交互组件；
99.d4：在调试模块的执行日志中将会看到事件的执行信息，包括发生时间、事件执行流程图，点击某段流程可查看当前执行的起始节点、目标节点、事件、方法、发生时间和数据返回信息。
100.d5：通过排查d4步骤中可能出现问题的点并查看对应的执行信息，可快速定位数据可视化大屏的交互配置问题并修复。
101.串行数据处理的代码如下：
102.103.104.105.。