一种自动布局成图的可视化方法及系统技术方案

技术编号:32837157 阅读:53 留言:0更新日期:2022-03-26 20:59
本申请公开了一种自动布局成图的可视化方法及系统,通过请求数据对应的视图领域和视图层级得到各个视图组件的组件数据和关系数据,确定各个组件所对应的样式信息和渲染信息,通过视图布局规则对组件数据和关系数据进行处理得到各个视图组件在视图中的布局位置,基于布局位置、样式信息和渲染信息进行视图绘制得到视图绘制结果并展示。通过上述,无需人工视图绘制,提高视图绘制效率,实时获取并更新架构视图数据,在浏览器中实现各类型技术架构视图的实时绘制、自动布局、成图展示等功能,实现技术架构的同类视图样式的统一,提高技术架构视图数据的准确性和完整性,以及实现技术架构视图多视角、多层级的自动成图展示。多层级的自动成图展示。多层级的自动成图展示。

【技术实现步骤摘要】
一种自动布局成图的可视化方法及系统


[0001]本申请涉及数据处理
,更具体地说,涉及一种自动布局成图的可视化方法及系统。

技术介绍

[0002]技术架构视图是从不同视角对IT系统技术架构的图形化展示,主要包括系统视图、存储视图、网络视图、资源池视图、机房环境视图等。技术架构视图是对系统及其基础设施包含的组件及组件间关系进行图形化、可视化的表达。
[0003]目前传统技术架构视图一般是由架构师使用Visio、PPT等工具进行手工设计和绘制,这种方法存在问题如下:
[0004]一是,伴随系统规模的增加和内部关系的复杂化,通过人工很难快速准确的识别并绘制所有需要绘制的组件和关系,导致架构视图的绘制过程效率低下;二是:业务的快速发展,需要IT系统快速变化去应对,系统变化后,技术架构视图的数据也应该同步去变化,但手工绘制的视图需要依靠架构师手工更新,无法保证数据更新时效、技术架构视图数据的准确性和完整性;三是,不同架构师对架构设计的理解不一致,每个人绘制的架构视图都不同,存在视图展示规范不一致,样式不统一,架构易读性差的问题,架构视图的共享性差。
[0005]因此,现有技术的人工视图绘制效率低、数据更新不及时、同类视图样式不统一、视角单一无法对视图进行全景展示问题。

技术实现思路

[0006]有鉴于此,本申请公开了一种自动布局成图的可视化方法及系统,旨在提高视图绘制效率,实时获取并更新架构视图数据,提高技术架构视图数据的准确性和完整性,以及实现技术架构视图多视角、多层级的自动成图展示。
[0007]为了实现上述目的,其公开的技术方案如下:
[0008]本申请第一方面公开了一种自动布局成图的可视化方法,所述方法包括:
[0009]获取请求数据;所述请求数据为发起视图访问的请求数据;
[0010]获取所述请求数据对应的视图领域和视图层级;
[0011]基于所述视图领域和所述视图层级,得到各个视图组件的组件数据和关系数据;所述关系数据用于表征各个视图组件之间的关联关系和/或包含关系;
[0012]对所述组件数据和所述关系数据进行处理,得到预设数据格式的组件数据和预设数据格式的关系数据并进行封装;
[0013]基于封装后的数据,确定各个组件所对应的样式信息和渲染信息;所述样式信息用于展示各个视图组件对应的节点位置、容器位置和关系连线位置;
[0014]通过视图布局规则对所述组件数据和所述关系数据进行处理,得到各个视图组件在视图中的布局位置;
[0015]基于所述各个视图组件在视图中的布局位置、所述样式信息和所述渲染信息进行
视图绘制,得到视图绘制结果并展示。
[0016]优选的,所述对所述组件数据和所述关系数据进行处理,得到预设数据格式的组件数据和预设数据格式的关系数据并进行封装,包括:
[0017]对所述组件数据进行解析并加工,得到预设数据格式的组件数据;
[0018]对所述关系数据进行解析并加工,得到预设数据格式的关系数据;
[0019]将所述预设数据格式的组件数据封装至组件属性数据列表;
[0020]将所述预设数据格式的关系数据封装至组件关系数据列表。
[0021]优选的,所述通过视图布局规则对所述组件数据和所述关系数据进行处理,得到各个视图组件在视图中的布局位置,包括:
[0022]从各个视图组件中确定容器类组件,并基于所述容器类组件完成视图分区划分;
[0023]根据排序规则对划分后的视图分区中的组件进行排序,得到预设细粒度展示组件;
[0024]基于所述预设细粒度展示组件和与其他组件之间的包含关系,确定所述容器类组件的容器位置;所述其他组件与所述预设细粒度展示组件具有包含关系和/或关联关系的组件;
[0025]基于各个视图组件之间的关联关系,确定各个视图组件对应的关系连线的位置;
[0026]基于所述组件数据、所述关系数据、所述容器位置、所述关系连线的位置和预先获取到的各个视图组件对应的节点位置,确定各个视图组件在视图中的布局位置。
[0027]优选的,所述基于所述各个视图组件在视图中的布局位置、所述样式信息和所述渲染信息进行视图绘制,得到视图绘制结果并展示,包括:
[0028]通过预设展示设备的展示参数、浏览器尺寸参数、所述样式信息和所述渲染信息,对所述各个视图组件在视图中的布局位置进行视图绘制,得到视图绘制结果;
[0029]将所述视图绘制结果展示于浏览器中。
[0030]优选的,在所述获取请求数据之前,还包括:
[0031]定义技术架构中的各个组件及各个组件之间的组件关系;
[0032]所述定义技术架构中的各个组件及各个组件之间的组件关系的过程包括:
[0033]定义各个组件的展示视角和各个组件的展示视角中的技术架构视图分层、视图名称和入口对象;所述展示视角至少包括系统视图视角、存储视图视角、网络视图视角和资源池视图视角;
[0034]定义所述技术架构视图分层中每层视图的展示元素和展示标准样式;所述展示元素用于表征技术架构组件、各个视图组件之间的关联关系和包含关系;
[0035]定义各个组件和各个组件之间的关系在视图中的标准布局样式和视图布局规则。
[0036]优选的,在所述基于所述各个视图组件在视图中的布局位置、所述样式信息和所述渲染信息进行视图绘制,得到视图绘制结果并展示之后,还包括:
[0037]获取所述视图中的各个组件的运行数据;
[0038]通过预设展示形式将所述运行数据进行展示。
[0039]本申请第二方面公开了一种自动布局成图的可视化系统,所述系统包括:
[0040]第一获取单元,用于获取请求数据;所述请求数据为发起视图访问的请求数据;
[0041]第二获取单元,用于获取所述请求数据对应的视图领域和视图层级;
[0042]第三获取单元,用于基于所述视图领域和所述视图层级,得到各个视图组件的组件数据和关系数据;所述关系数据用于表征各个视图组件之间的关联关系和/或包含关系;
[0043]处理封装单元,用于对所述组件数据和所述关系数据进行处理,得到预设数据格式的组件数据和预设数据格式的关系数据并进行封装;
[0044]确定单元,用于基于封装后的数据,确定各个组件所对应的样式信息和渲染信息;所述样式信息用于展示各个视图组件对应的节点位置、容器位置和关系连线位置;
[0045]处理单元,用于通过视图布局规则对所述组件数据和所述关系数据进行处理,得到各个视图组件在视图中的布局位置;
[0046]绘制展示单元,用于基于所述各个视图组件在视图中的布局位置、所述样式信息和所述渲染信息进行视图绘制,得到视图绘制结果并展示。
[0047]优选的,所述处理封装单元,包括:
[0048]第一解析加工模块,用于对所述组件数据进行解析并加工,得到预设数据格式的组件数据;
本文档来自技高网
...

【技术保护点】

【技术特征摘要】
1.一种自动布局成图的可视化方法,其特征在于,所述方法包括:获取请求数据;所述请求数据为发起视图访问的请求数据;获取所述请求数据对应的视图领域和视图层级;基于所述视图领域和所述视图层级,得到各个视图组件的组件数据和关系数据;所述关系数据用于表征各个视图组件之间的关联关系和/或包含关系;对所述组件数据和所述关系数据进行处理,得到预设数据格式的组件数据和预设数据格式的关系数据并进行封装;基于封装后的数据,确定各个组件所对应的样式信息和渲染信息;所述样式信息用于展示各个视图组件对应的节点位置、容器位置和关系连线位置;通过视图布局规则对所述组件数据和所述关系数据进行处理,得到各个视图组件在视图中的布局位置;基于所述各个视图组件在视图中的布局位置、所述样式信息和所述渲染信息进行视图绘制,得到视图绘制结果并展示。2.根据权利要求1所述的方法,其特征在于,所述对所述组件数据和所述关系数据进行处理,得到预设数据格式的组件数据和预设数据格式的关系数据并进行封装,包括:对所述组件数据进行解析并加工,得到预设数据格式的组件数据;对所述关系数据进行解析并加工,得到预设数据格式的关系数据;将所述预设数据格式的组件数据封装至组件属性数据列表;将所述预设数据格式的关系数据封装至组件关系数据列表。3.根据权利要求1所述的方法,其特征在于,所述通过视图布局规则对所述组件数据和所述关系数据进行处理,得到各个视图组件在视图中的布局位置,包括:从各个视图组件中确定容器类组件,并基于所述容器类组件完成视图分区划分;根据排序规则对划分后的视图分区中的组件进行排序,得到预设细粒度展示组件;基于所述预设细粒度展示组件和与其他组件之间的包含关系,确定所述容器类组件的容器位置;所述其他组件与所述预设细粒度展示组件具有包含关系和/或关联关系的组件;基于各个视图组件之间的关联关系,确定各个视图组件对应的关系连线的位置;基于所述组件数据、所述关系数据、所述容器位置、所述关系连线的位置和预先获取到的各个视图组件对应的节点位置,确定各个视图组件在视图中的布局位置。4.根据权利要求1所述的方法,其特征在于,所述基于所述各个视图组件在视图中的布局位置、所述样式信息和所述渲染信息进行视图绘制,得到视图绘制结果并展示,包括:通过预设展示设备的展示参数、浏览器尺寸参数、所述样式信息和所述渲染信息,对所述各个视图组件在视图中的布局位置进行视图绘制,得到视图绘制结果;将所述视图绘制结果展示于浏览器中。5.根据权利要求1所述的方法,其特征在于,在所述获取请求数据之前,还包括:定义技术架构中的各个组件及各个组件之间的组件关系;所述定义技术架构中的各个组件及各个组件之间的组件关系的过程包括:定义各个组件的展示视角和各个组件的展示视角中的技术架构视图分层、视图名称和入口对象;所述展示视角至少包括系统视图视角、存储视图视角、网络视图视角和资源池视图视角;
定义所述技术架构视图分层中每层视图的展示元素和展...

【专利技术属性】
技术研发人员:侯岳李世宁杨晓勤
申请(专利权)人:中国建设银行股份有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1