CN111581444A

CN111581444A - 一种编辑和展示拓扑图的方法及装置

Info

Publication number: CN111581444A
Application number: CN202010359297.6A
Authority: CN
Inventors: 朱柯; 李辰; 杜昆鹏; 韩颜彬
Original assignee: Beijing Tongchuang Yongyi Technology Development Co ltd
Current assignee: Beijing Tongchuang Yongyi Technology Development Co ltd
Priority date: 2020-04-29
Filing date: 2020-04-29
Publication date: 2020-08-25

Abstract

本发明公开了一种编辑和展示拓扑图的方法及装置，其特点在于该方法允许用户互联网应用中的各种资源对象建立逻辑关系并生成拓扑图，并且可以编辑、新建、删除各种资源对象之间的逻辑关系；包括通过拖拽的方式引入资源对象，建立资源对象之间的逻辑关系：当用户完成拓扑图的编辑和修改时，将资源对象逻辑关系的数据结构在存储介质中进行存储：最后从存储介质中获取资源对象的逻辑关系在拓扑图中进行展示。通过本发明的方法和装置，用户可以直观、便捷的编辑、新建、删除各种资源对象之间复杂的逻辑关系，进行所需要的最佳配置和纠正错误，提高了工作的准确性和工作效率。本发明可在各种业务场景中使用。

Description

一种编辑和展示拓扑图的方法及装置

技术领域

本发明涉及互联网技术领域，尤其涉及一种编辑和展示拓扑图的方法及装置。

背景技术

互联网应用经常会采用拓扑图来展示复杂的对象和它们之间的关系。当涉及各种各样的资源时，拓扑图能够通过点和线这种图形化的形式，清楚、直观的展现各个资源之间的逻辑关系和运行状态，以方便进行配置和排除错误。因此企业在应用中往往采用拓扑图来展现资源之间的关系以及业务之间的逻辑关系。

拓扑图一般都是用来做展示的，但是不能进行编辑。因此，应用程序一旦生成拓扑图，用户通常就只能进行浏览，而不能进行任何其它更改。

发明内容

本发明的目的是要解决上述现有拓扑图技术中存在的只能浏览，而不能进行编辑和更改的问题和不足，提供一种编辑和展示拓扑图的方法及装置。用户通过该方法，可以直观、便捷的编辑、新建、删除各种资源对象之间的复杂关系，进行所需要的最佳配置和纠正错误，提高了工作的准确性和工作效率。本发明允许用户互联网应用中的各种资源建立某些逻辑关系，并生成拓扑图，可在各种业务场景中使用。

本发明的一方面是一种编辑和展示拓扑图的方法，该方法允许用户在互联网应用中的各种资源对象建立逻辑关系并生成拓扑图，并且可以进行编辑、新建、删除各种资源对象之间的逻辑关系；该方法包括如下步骤：

资源对象的引入：通过拖拽的方式，将互联网应用中所需要的资源对象拖拽到所述拓扑图中；根据所述资源对象的类型，生成所述拓扑图预设的资源对象逻辑关系的数据结构，同时在所述拓扑图中进行对应的图标展示，以及对资源对象的属性进行编辑和修改；

资源对象逻辑关系的建立：选择至少一个所述资源对象，通过画线连接至少另一个所述资源对象，建立至少两个资源对象之间的逻辑关系；

资源对象逻辑关系的存储：当用户完成了所述拓扑图的编辑和修改，并且需要保存所述拓扑图时，获取所述拓扑图中被编辑的所述资源对象和资源对象逻辑关系的数据结构并将其保存到存储介质中；

拓扑图的展示：从所述存储介质中获取所述资源对象和资源对象逻辑关系的数据结构在拓扑图中进行展示。

本发明所述的资源对象是指在互联网应用中已存在的各种业务相关的所需要的资源对象。所述资源对象逻辑关系的数据结构包括：至少两个所述资源对象逻辑关系的数据结构和图形信息，所述资源对象逻辑关系在所述拓扑图中的连线信息和在所述拓扑图中的定位信息，以及所述数据结构的数据接口等属性。所述资源对象的图形信息包括图形的形状、大小和展示文字。所述资源对象逻辑关系的连线信息包括连线的形状、大小和展示文字。

本发明所述拖拽的方式，是指通过获取鼠标移动的位置信息，将选择的所述资源对象信息，生成拓扑图预设的所述数据结构，在鼠标移动停止的位置绘制所述拓扑图的图形或连线。所述资源对象逻辑关系可以是有方向的，即一个资源对象为源，另一个资源对象为目标；也可以是无方向的。所述存储介质可以是后台数据库或存储文件。

本发明的另一方面是采用一种编辑和展示拓扑图的装置，该装置包括具有如下技术特征的单元：

1)图形显示单元：所有根据拓扑图预设的资源对象逻辑关系的数据结构生成的所述拓扑图都可以在画布上展示；所述画布是基于HTML5中的canvas标签生成的；

2)图形编辑单元：用于编辑和修改资源对象的属性；通过拓扑图中的属性编辑框，用户可以编辑和修改资源对象的各种属性；

3)图形关系编辑单元：用于在拓扑图中展示的所述资源对象的图形信息之间建立一定的逻辑关系；

4)拓扑图保存单元；用于将拓扑图生成的所述资源对象逻辑关系的数据结构，保存到后台存储介质中；

5)拓扑图的展示单元：用于将所述后台存储介质中的所述拓扑图的数据结构，展示到画布上。

本发明所述资源对象的属性为：资源对象的名称、颜色、连线信息、定位信息、预设时间等属性。

本发明编辑和展示拓扑图的方法及装置的主要贡献在于，允许用户通过拓扑图的形式来输入复杂的资源对象的逻辑关系，该方法可以将资源对象之间复杂的逻辑关系通过拓扑图展现出来。用户只需要删掉资源对象之间的连线就可以取消资源对象之间的关系，而在资源对象之间画线就可以新增资源对象之间的关系，点击资源对象之间的连线就可以编辑资源对象之间关系的属性。用户通过该方法，可以直观、便捷的编辑、新建、删除资源对象之间的复杂逻辑关系，进行各种设置和修改，提高工作效率。

附图说明

图1是本发明方法的流程示意图；

图2是本发明装置的结构示意图；

图3-1至图3-5是实施例2中拓扑图的编辑过程。

具体实施方式

以下参照附图以及示例性实施例对本发明的具体实施方式进行详细说明，和对本发明实施例中的技术方案进行清楚、完整地描述。这里所描述的实施例仅仅是本发明的一部分优选实施例。但这些优选实施例并不限定本发明的其它具体实施方式。

本发明的技术方案完整地体现在以下的实施例中。

实施例1

参照图1，图1为本发明的一种编辑和展示拓扑图的方法的流程示意图。

本发明的方法允许用户互联网应用中的各种资源对象建立逻辑关系并生成拓扑图，并且可以编辑、新建、删除各种资源对象之间复杂的逻辑关系；其特点在于包括如下步骤：

步骤001，资源对象的引入：用户通过拖拽的方式，将互联网应用中已存在的所需资源对象拖拽到拓扑图中；根据资源对象的类型，生成拓扑图预设的资源对象逻辑关系的数据结构，同时，将这些数据结构在拓扑图中进行对应的图标展示，并且可以根据需要对资源对象的属性进行编辑和修改。

步骤001生成拓扑图预设的资源对象逻辑关系的数据结构包括：至少两个所述资源对象逻辑关系的数据结构和图形信息，图形信息包括图形的形状、大小和展示文字等；包括资源对象逻辑关系在拓扑图中的连线信息，包括连线的形状、大小和展示文字等；包括资源对象逻辑关系在拓扑图中的定位信息，以及数据结构的数据接口等属性。

步骤002，资源对象之间逻辑关系的建立：选择至少一个资源对象，通过画线连接至少另一个资源对象，建立至少两个资源对象之间的逻辑关系。这种逻辑关系可以有方向，即从源到目标，一个资源对象是源，另外一个资源对象是目标。也可以是无方向的。

资源对象之间逻辑关系的建立生成拓扑图连线预设的数据结构包括，建立逻辑关系的两个资源对象，记录拓扑图中的连线信息，连线的形状、大小、展示文字和在拓扑图中的定位信息等属性。

步骤003，资源对象和资源对象之间逻辑关系的存储：当用户完成了拓扑图的编辑和修改，需要保存拓扑图时，先获取拓扑图中被编辑的资源对象数据和资源对象之间所建立的逻辑关系的数据结构，按照预设的拓扑图的数据结构和逻辑关系，将资源对象数据和资源对象之间逻辑关系的数据结构保存到存储介质中，如保存在后台数据库或存储文件中。

步骤004，拓扑图的展示：从后台数据库或文件中获取上述保存在存储介质中的资源对象数据和资源对象之间逻辑关系的数据结构在拓扑图中进行展示。

本发明所述的资源对象包括在互联网应用中已存在的各种业务相关的资源对象。该资源对象的属性包括：资源对象的名称、颜色、连线信息、定位信息、预设时间等属性。

本发明所述拖拽的方式，是通过获取鼠标移动的位置信息，将选择的所述资源对象信息，生成拓扑图预设的所述数据结构，在鼠标移动停止的位置绘制所述拓扑图的图形或连线。

实施例2

如图3-1至图3-5所示，图3-1至图3-5是本发明的方法对两个资源对象在拓扑图中的编辑过程。两个资源对象分别为设备1和设备2。该拓扑图将两个不同设备的逻辑关系展示出来，并在展示过程中进行编辑和修改。

第一步，首先进行资源对象的引入：从工具箱中把设备1拖到拓扑图中的画布上，拓扑图上就有了第一个资源对象，如图3-1所示；其次，对该设备的属性进行编辑，如编辑该设备的设备名称、预设时间等，如图3-2所示；同样的步骤引入第二个资源对象设备2，从工具箱中把设备2拖到拓扑图中的画布上，如图3-3所示。

第二步，建立资源对象之间的逻辑关系：点击选择设备1，用鼠标拖动设备2，在设备1和设备2之间画出一段连线，如图3-4所示。当拖动完成之后，设备1和设备2之间有一段连线，表示设备1和设备2之间的逻辑关系，如图3-5所示。建立资源对象之间逻辑关系生成拓扑图连线预设的数据结构包括，建立逻辑关系的两个资源对象，记录拓扑图中的连线信息，连线的形状、大小、展示文字和在拓扑图中的定位信息等属性。

第三步，对资源对象数据和资源对象逻辑关系进行存储。

实施例2完成的拓扑图的资源对象逻辑关系总结如下：

该逻辑关系从源到目标，资源对象的源对象是设备1，资源对象的目标对象是设备2。

当用户完成了实施例2拓扑图的编辑，需要保存拓扑图时，获取拓扑图中被编辑的资源对象数据和资源对象之间所建立的逻辑关系的数据结构，按照预设的拓扑图的数据结构和逻辑关系，将资源对象数据和资源对象逻辑关系的数据结构保存到后台数据库或文件中。

第四步，展示所编辑的拓扑图：从后台数据库或文件中获取上述资源对象数据和资源对象之间逻辑关系的数据结构，并在拓扑图中进行展示。

同理，根据本发明编辑和展示拓扑图的方法，以及实施例2的具体实施步骤，本发明可以在两个以上或更多资源对象之间建立更为复杂的逻辑关系，并且可以对其逻辑关系的数据结构进行编辑或修改。

实施例3

如图2所示，本实施例是采用html5的canvas技术实现本发明编辑和展示拓扑图装置的实施例。canvas是html5提供的一种新标签,canvas是一个矩形区域的画布，可以采用javascript控制每一个像素在画布上面进行资源对象的图形绘制，以及资源对象之间逻辑关系的连接建立。本实施例装置的单元组成及功能如下：

1)图形显示单元：所有根据拓扑图预设的资源对象逻辑关系的数据结构生成的拓扑图都可以在画布上展示。即在canvas画布上制定坐标位置，使用getContext函数获得画笔，将资源对象的图形绘制出来，并按顺序逐步引入资源对象，在图形显示单元中显示。

2)图形编辑单元：在拓扑图中设置有资源对象图形的属性编辑框，用于编辑和修改资源对象的属性。获取用户鼠标在canvas画布上的坐标位置，判断是否在某个资源对象图形的范围内。如果是，点击拓扑图中的图像，弹出该图形的属性编辑框，显示出该图形所表示的资源对象的各种属性，用户可以在属性修改框中修改资源对象的属性，如资源对象的名称、预设时间、颜色、连线信息、定位信息等。

3)图形关系编辑单元：用于在所展示的资源对象图形之间建立一定的逻辑关系；获取用户鼠标在canvas画布上的坐标位置，判断是否在某个资源对象图形的范围内，如果是，并且鼠标还在移动，那么画出一个从资源对象的源对象图形到鼠标当前位置的线；当鼠标释放时，判断该位置是否在某个资源对象图形的范围内，如果是，就画出从源对象到目标对象的线，即表示这两个对象之间建立了逻辑关系。

4)拓扑图保存单元；用于将生成拓扑图的数据结构保存到后台存储介质中。将canvas画布上的所有图形和连线，以及所有资源对象的属性都按照一定的数据结构保存在后台数据库表中。

5)拓扑图的展示单元：用于将所述后台数据库中拓扑图的数据结构展示到画布上。从数据库表中将资源对象数据和其逻辑关系读取出来，调用图形显示单元在canvas画布上展示出来。

本发明的编辑和展示拓扑图的方法及装置，使用拓扑图这种图形工具来描述资源对象之间复杂的逻辑关系和运行状态，以方便进行最佳配置和排除错误，提高了用户输入、编辑、修改和删除资源对象逻辑关系的效率。与使用文本、表格等方法描述资源对象的方式相比，在描述资源对象先后次序，上下级关系，顺序或者并发等复杂的逻辑关系时，使用拓扑图进行说明是更加清楚和直观，提高了工作的准确性和工作效率。采用本发明的方法和装置所生成的拓扑图，可在各种业务场景中使用。

本发明的上述各个实施例仅仅是示例性的，在不脱离本发明设计原理的情况下，可对这些实施例进行各种改变，这些改变将在本发明的权利要求范围及其等同物中限定。

Claims

1.一种编辑和展示拓扑图的方法，其特征在于，该方法允许用户在互联网应用中的各种资源对象建立逻辑关系并生成拓扑图，并且可以编辑、新建、删除各种资源对象之间的逻辑关系；该方法包括如下步骤：

资源对象逻辑关系的存储：当用户完成了所述拓扑图的编辑和修改，并且需要保存所述拓扑图时，获取所述拓扑图中被编辑的所述资源对象数据和资源对象逻辑关系的数据结构并将其保存到存储介质中；

拓扑图的展示：从所述存储介质中获取所述资源对象数据和资源对象逻辑关系的数据结构在拓扑图中进行展示。

2.根据权利要求1所述编辑和展示拓扑图的方法，其特征在于，所述资源对象是指在互联网应用中已存在的各种业务相关的所需要的资源对象。

3.根据权利要求1或2所述编辑和展示拓扑图的方法，其特征在于，所述资源对象逻辑关系的数据结构包括：至少两个所述资源对象逻辑关系的数据结构和图形信息，所述资源对象逻辑关系在所述拓扑图中的连线信息和在所述拓扑图中的定位信息，以及所述数据结构的数据接口等属性。

4.根据权利要求3所述编辑和展示拓扑图的方法，其特征在于，所述资源对象的图形信息包括图形的形状、大小和展示文字；所述资源对象逻辑关系的连线信息包括连线的形状、大小和展示文字。

5.根据权利要求1所述编辑和展示拓扑图的方法，其特征在于，所述拖拽的方式，是指通过获取鼠标移动的位置信息，将选择的所述资源对象信息，生成拓扑图预设的所述数据结构，在鼠标移动停止的位置绘制所述拓扑图的图形或连线。

6.根据权利要求1所述编辑和展示拓扑图的方法，其特征在于，所述资源对象逻辑关系可以是有方向的，即一个资源对象为源，另一个资源对象为目标；也可以是无方向的。

7.根据权利要求1所述编辑和展示拓扑图的方法，其特征在于，所述存储介质可以是后台数据库或存储文件。

8.一种编辑和展示拓扑图的装置，其特征在于，该装置包括如下单元：

1)图形显示单元：所有根据拓扑图预设的资源对象逻辑关系的数据结构生成的所述拓扑图都可以在画布上展示；

9.根据权利要求7所述编辑和展示拓扑图的装置，其特征在于，所述用于展示拓扑图的画布是基于HTML5中的canvas标签生成的。

10.根据权利要求1或7所述编辑和展示拓扑图的方法或装置，其特征在于，所述资源对象的属性为：资源对象的名称、颜色、连线信息、定位信息、预设时间等属性。