【技术实现步骤摘要】
本专利技术涉及信息，尤其是一种系统部署图动态绘制方法、装置、电子设备及存储介质。
技术介绍
1、系统上云后，主机、组件、服务的数量众多且分散，每个组件可能部署在不同的物理节点或容器中，这些组件之间可能存在复杂的依赖关系，一个组件的故障可能会影响到多个其他组件的正常运行，给运维人员的运维工作带来巨大的挑战，维护人员需具备较高的技术能力和对系统的深入理解，才能准确定位问题和快速进行服务替换和升级。传统的系统部署图大多通过人工手动绘制，且往往是静态的，无法实时反映系统的运行状态和变化，影响了系统部署图的实时性和可靠性，从而影响了系统管理的效率和准确性。
2、术语解释：
3、vis-network：visualization network，一个动态的、基于浏览器的可视化库。这个库主要用于展示由节点和边构成的网络图，支持自定义形状、样式、颜色、大小、图像等功能。它还内置了集群支持，使用html canvas进行渲染，确保了在浏览器上能实现平滑的动画效果和良好的交互体验。
4、系统部署图：描述系统内部组件、服务、网络结构以及它们之间交互关系的图形化表示。
技术实现思路
1、本专利技术的目的在于至少一定程度上解决现有技术中存在的技术问题之一。
2、为此，本专利技术实施例的一个目的在于提供一种系统部署图动态绘制方法，该方法提高了系统部署图的实时性和可靠性，也提高了系统管理的效率和准确性。
3、本专利技术实施例的另一个目的在于提供一种系统
4、为了达到上述技术目的，本专利技术实施例所采取的技术方案包括：
5、一方面，本专利技术实施例提供了一种系统部署图动态绘制方法，包括以下步骤：
6、获取目标系统的系统架构数据，根据所述系统架构数据生成目标json数据，所述目标json数据包括节点数据和对应的节点属性以及边数据和对应的边属性；
7、创建html页面，在所述html页面引入预设的可视化库的javascript文件，进而通过所述javascript文件加载所述目标json数据，得到初始网络图；
8、通过所述可视化库为所述初始网络图添加点击事件和对应的交互模态框，得到交互网络图；
9、根据所述交互网络图的业务流生成对应动画效果，进而在所述交互网络图上渲染并显示所述动画效果，得到系统部署图。
10、进一步地，在本专利技术的一个实施例中，所述获取目标系统的系统架构数据，根据所述系统架构数据生成目标json数据，其具体包括：
11、通过php后端从系统数据库获取所述系统架构数据，并根据所述系统架构数据确定所述节点数据、所述节点属性、所述边数据以及所述边属性；
12、将所述节点数据和所述节点属性封装为第一数组，并将所述边数据和所述边数据封装为第二数组；
13、根据所述第一数组和所述第二数组组合得到所述目标json数据。
14、进一步地，在本专利技术的一个实施例中，所述根据所述系统架构数据确定所述节点数据、所述节点属性、所述边数据以及所述边属性，其具体包括：
15、根据所述系统架构数据确定多个系统组件和各所述系统组件之间的连接关系；
16、根据所述系统组件的组件配置信息确定所述节点数据和所述节点属性；
17、根据所述连接关系对应的连接配置信息确定所述边数据和所述边属性。
18、进一步地，在本专利技术的一个实施例中，所述在所述html页面引入预设的可视化库的javascript文件，进而通过所述javascript文件加载所述目标json数据，得到初始网络图，其具体包括：
19、在所述html页面加载vis.js可视化库；
20、创建所述javascript文件，所述javascript文件被配置为获取所述目标json数据并赋值给nodes和edges；
21、通过所述vis.js可视化库执行所述javascript文件，得到所述初始网络图。
22、进一步地，在本专利技术的一个实施例中，所述通过所述可视化库为所述初始网络图添加点击事件和对应的交互模态框，其具体包括：
23、获取所述初始网络图的各个网络节点的节点信息；
24、通过所述vis.js可视化库生成各所述网络节点对应的所述交互模态框，并将所述节点信息赋值给所述交互模态框；
25、通过所述vis.js可视化库为各所述网络节点添加所述点击事件，所述点击事件被配置为在所述网络节点触发点击时展示所述交互模态框并显示所述节点信息。
26、进一步地，在本专利技术的一个实施例中，所述根据所述交互网络图的业务流生成对应动画效果，进而在所述交互网络图上渲染并显示所述动画效果，其具体包括：
27、获取所述目标系统的系统运行数据，根据所述系统运行数据生成所述业务流；
28、在svg的path中添加animateme动画类，并根据所述业务流生成所述动画效果；
29、在所述html页面引入所述animateme动画类，通过所述animateme动画类在所述交互网络图上渲染并显示所述动画效果。
30、进一步地，在本专利技术的一个实施例中，所述系统部署图动态绘制方法还包括以下步骤：
31、获取所述目标系统的系统状态变化信息，根据所述系统状态变化信息对所述系统部署图的节点和边进行调整。
32、另一方面，本专利技术实施例提供了一种系统部署图动态绘制装置，包括：
33、数据生成模块，用于获取目标系统的系统架构数据，根据所述系统架构数据生成目标json数据，所述目标json数据包括节点数据和对应的节点属性以及边数据和对应的边属性；
34、数据加载模块，用于创建html页面，在所述html页面引入预设的可视化库的javascript文件，进而通过所述javascript文件加载所述目标json数据，得到初始网络图；
35、交互设置模块，用于通过所述可视化库为所述初始网络图添加点击事件和对应的交互模态框，得到交互网络图；
36、动画设置模块，用于根据所述交互网络图的业务流生成对应动画效果，进而在所述交互网络图上渲染并显示所述动画效果，得到系统部署图。
37、另一方面，本专利技术实施例提供了一种电子设备，所述电子设备包括存储器、处理器、存储在所述存储器上并可在所述处理器上运行的程序以及用于实现所述处理器和所述存储器之间的连接通信的数据总线，所述程序被所述处理器执行时实现如前面所述的系统部署图动态绘制方法。
38、另一方面，本专利技术实施例还提供了一种存储介质，所述存储介质为计算机可读存储介质，用于计算机可读存储，所述存储介质存储有一个或者多个程序，所述一个或者多个程序可被一个或者多个处理器执行，以实现如前面所述的系统部署图动态绘制方法。
39、本专利技术的优点和有益效果将在下面的描述中部分本文档来自技高网...
【技术保护点】
1.一种系统部署图动态绘制方法，其特征在于，包括以下步骤：
2.根据权利要求1所述的一种系统部署图动态绘制方法，其特征在于，所述获取目标系统的系统架构数据，根据所述系统架构数据生成目标JSON数据，其具体包括：
3.根据权利要求2所述的一种系统部署图动态绘制方法，其特征在于，所述根据所述系统架构数据确定所述节点数据、所述节点属性、所述边数据以及所述边属性，其具体包括：
4.根据权利要求1所述的一种系统部署图动态绘制方法，其特征在于，所述在所述HTML页面引入预设的可视化库的JavaScript文件，进而通过所述JavaScript文件加载所述目标JSON数据，得到初始网络图，其具体包括：
5.根据权利要求4所述的一种系统部署图动态绘制方法，其特征在于，所述通过所述可视化库为所述初始网络图添加点击事件和对应的交互模态框，其具体包括：
6.根据权利要求1所述的一种系统部署图动态绘制方法，其特征在于，所述根据所述交互网络图的业务流生成对应动画效果，进而在所述交互网络图上渲染并显示所述动画效果，其具体包括：
7.根据
8.一种系统部署图动态绘制装置，其特征在于，包括：
9.一种电子设备，其特征在于，所述电子设备包括存储器、处理器、存储在所述存储器上并可在所述处理器上运行的程序以及用于实现所述处理器和所述存储器之间的连接通信的数据总线，所述程序被所述处理器执行时实现如权利要求1至7中任一项所述的系统部署图动态绘制方法的步骤。
10.一种存储介质，所述存储介质为计算机可读存储介质，用于计算机可读存储，其特征在于，所述存储介质存储有一个或者多个程序，所述一个或者多个程序可被一个或者多个处理器执行，以实现如权利要求1至7中任一项所述的系统部署图动态绘制方法的步骤。
...【技术特征摘要】
1.一种系统部署图动态绘制方法，其特征在于，包括以下步骤：
2.根据权利要求1所述的一种系统部署图动态绘制方法，其特征在于，所述获取目标系统的系统架构数据，根据所述系统架构数据生成目标json数据，其具体包括：
3.根据权利要求2所述的一种系统部署图动态绘制方法，其特征在于，所述根据所述系统架构数据确定所述节点数据、所述节点属性、所述边数据以及所述边属性，其具体包括：
4.根据权利要求1所述的一种系统部署图动态绘制方法，其特征在于，所述在所述html页面引入预设的可视化库的javascript文件，进而通过所述javascript文件加载所述目标json数据，得到初始网络图，其具体包括：
5.根据权利要求4所述的一种系统部署图动态绘制方法，其特征在于，所述通过所述可视化库为所述初始网络图添加点击事件和对应的交互模态框，其具体包括：
6.根据权利要求1所述的一种系统部署图动态绘...
【专利技术属性】
技术研发人员：刘红伟，沈江明，李俊，伏树林，
申请(专利权)人：中国电信股份有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。