【技术实现步骤摘要】
本专利技术涉及前端开发，尤其涉及一种基于mvvm和canvas的可视化拓扑图编辑方法和系统。
技术介绍
1、在前端开发领域，mvvm技术已经成为一种主流的开发模式，它以其低耦合、高可维护性和可测试性等特点受到了广大开发者的欢迎。同时，随着前端应用复杂性的不断增加，低开化配置实现和生产拓扑图组件也成为前端开发中的重要技术。市面上也纷纷涌现了一批图可视化引擎，如提供了图的绘制、布局等图可视化的基础能力的g6和x6、提供数据可视化图表的echarts和highcharts等。
2、随着技术的不断发展和应用场景的日益复杂，简化实现和生产拓扑图组件等技术方案越来越受到关注。这些技术方案旨在提高开发效率、降低维护成本、增强可扩展性和可维护性，为开发者提供更加全面和高效的技术支持。然而，当前前端开发领域中，开源的图可视化引擎仍然存在如学习曲线陡峭、代码的可读性和可维护性差等问题，初步接触拓扑图开发的人员都需要有相应的图形开发语言基础，才能利用这些开源的框架绘制拓扑图形。
3、因此，如何提高可视化拓扑图开发的可读性和可维护性，降低可视化拓扑图开发的技术门槛，成为亟待解决的技术问题。
技术实现思路
1、有鉴于此，为了克服现有技术的不足，本专利技术提出了一种基于mvvm和canvas的可视化拓扑图编辑方法和系统。
2、根据本专利技术的第一方面，提供一种基于mvvm和canvas的可视化拓扑图编辑方法，包括：
3、通过资源层存储拓扑图组件的配置文件以及第三
4、通过bff层将资源层中拓扑图组件的配置文件和第三方业务数据源和服务加载至可视化开发层中进行拓扑元素与指标配置以及拓扑关系构建，将获得的拓扑图dsl文内容存储至资源层的拓扑图dsl文件中；
5、通过可视化开发层将存储在资源层的拓扑图dsl文件导出至外部应用。
6、优选地，本专利技术基于mvvm和canvas的可视化拓扑图编辑方法中，通过资源层存储拓扑图组件的配置文件以及第三方业务数据源和服务，包括：通过资源层的本地文件系统模块存储拓扑节点组件源码、所述拓扑节点源码对应的节点可视化配置单、业务化连线配置单、布局函数源码、数据模型配置单和业务化拓扑节点配置清单；通过资源层的第三方外部数据源和服务模块存储第三方业务数据，所述第三方业务数据包括esb服务、第三方后台数据、数据文件。
7、优选地，本专利技术基于mvvm和canvas的可视化拓扑图编辑方法中，通过bff层将资源层中拓扑图组件的配置文件和第三方业务数据源和服务加载至可视化开发层中进行拓扑元素与指标配置以及拓扑关系构建，将获得的拓扑图dsl文内容存储至资源层的拓扑图dsl文件中，包括：
8、采用bff层的资源加载注册与存储模块通过nodejs服务对存储在本地文件系统模块中的拓扑节点组件源码加载注册，形成拓扑节点组件实例，将形成的拓扑节点组件实例以及与所述拓扑节点源码对应的节点可视化配置单加载至可视化开发层中拓扑元素与指标配置模块的节点外观配置单元；
9、采用节点外观配置单元根据加载的拓扑节点组件实例以及与拓扑节点源码对应的节点可视化配置单，配置拓扑节点组件的默认初始外观样式以及各种状态下的外观样式，形成业务化拓扑节点，将形成的业务化拓扑节点通过资源加载注册与存储模块存储至本地文件系统模块的业务化拓扑节点配置清单；
10、采用可视化开发层中拓扑关系构建模块的节点消费单元通过资源加载注册与存储模块加载存储在本地文件系统模块中的业务化拓扑节点配置清单，根据加载的业务化拓扑节点配置清单构建可拖拽的拓扑节点，将拓扑节点信息通过资源加载注册与存储模块存储至本地文件系统模块的dsl文件中，所述拓扑节点信息包括节点类型、节点位置和节点id。
11、优选地，本专利技术基于mvvm和canvas的可视化拓扑图编辑方法中，通过bff层将资源层中拓扑图组件的配置文件和第三方业务数据源和服务加载至可视化开发层中进行拓扑元素与指标配置以及拓扑关系构建，将获得的拓扑图dsl文内容存储至资源层的拓扑图dsl文件中，包括：
12、采用bff层的资源加载注册与存储模块将可视化开发层中拓扑元素与指标配置模块的连线配置单元的连线配置数据存储至本地文件系统模块中的业务化连线配置单中，当需要修改连线配置数据时，连线配置单元通过资源加载注册与存储模块加载存储在本地文件系统模块中的业务化连线配置单，通过修改连线配置的拐点和样式形成新的连线配置数据，将新的连线配置数据存储至本地文件系统模块中的业务化连线配置单；
13、采用可视化开发层中拓扑关系构建模块的连线消费单元通过资源加载注册与存储模块加载存储在本地文件系统模块中的业务化连线配置单，根据加载的业务化连线配置单为拓扑节点构建连线，将连线信息通过资源加载注册与存储模块存储至本地文件系统模块的dsl文件中，所述连线信息包括连线起点节点id、连线终点节点id、连线id和连线类型。
14、优选地，本专利技术基于mvvm和canvas的可视化拓扑图编辑方法中，通过bff层将资源层中拓扑图组件的配置文件和第三方业务数据源和服务加载至可视化开发层中进行拓扑元素与指标配置以及拓扑关系构建，将获得的拓扑图dsl文内容存储至资源层的拓扑图dsl文件中，包括：
15、采用bff层的资源加载注册与存储模块对存储在本地文件系统模块中的布局函数源码加载注册，形成布局函数实例，将形成的布局函数实例加载至可视化开发层中拓扑关系构建模块的布局消费单元；
16、采用布局消费单元根据加载的布局函数实例为具有连线的拓扑节点构建布局，将布局信息通过资源加载注册与存储模块存储至本地文件系统模块的dsl文件中，所述布局信息包括布局名称和布局参数。
17、优选地，本专利技术基于mvvm和canvas的可视化拓扑图编辑方法中，通过bff层将资源层中拓扑图组件的配置文件和第三方业务数据源和服务加载至可视化开发层中进行拓扑元素与指标配置以及拓扑关系构建，将获得的拓扑图dsl文内容存储至资源层的拓扑图dsl文件中，包括：
18、采用可视化开发层中拓扑元素与指标配置模块的数据模型定义单元根据业务需求定制数据模型，通过资源加载注册与存储模块将数据模型定义单元的数据模型定义结果存储至本地文件系统模块中的数据模型配置单中，当需要修改数据模型配置时，通过资源加载注册与存储模块将存储在本地文件系统模块中的数据模型配置单加载到数据模型定义单元中进行修改配置，将配置的数据模型发送至可视化开发层中拓扑元素与指标配置模块的指标配置管理单元；
19、采用指标配置管理单元根据接收的数据模型定义指标请求结果数据结构，将定义的指标请求结果数据结构发送至bff层的数据转换模块；
20、采用bff层的第三方数据源接入模块从第三方外部数据源和服务模块中接入业务数据，将接入的业务数据传输至数据转换模块；
21、采用数据转换模块根据接收的指标请求结果数据结构和业务数本文档来自技高网...
【技术保护点】
1.一种基于MVVM和canvas的可视化拓扑图编辑方法，其特征在于，所述方法包括：
2.根据权利要求1所述的基于MVVM和canvas的可视化拓扑图编辑方法，其特征在于，通过资源层存储拓扑图组件的配置文件以及第三方业务数据源和服务，包括：通过资源层的本地文件系统模块存储拓扑节点组件源码、所述拓扑节点源码对应的节点可视化配置单、业务化连线配置单、布局函数源码、数据模型配置单和业务化拓扑节点配置清单；通过资源层的第三方外部数据源和服务模块存储第三方业务数据，所述第三方业务数据包括ESB服务、第三方后台数据、数据文件。
3.根据权利要求1所述的基于MVVM和canvas的可视化拓扑图编辑方法，其特征在于，通过BFF层将资源层中拓扑图组件的配置文件和第三方业务数据源和服务加载至可视化开发层中进行拓扑元素与指标配置以及拓扑关系构建，将获得的拓扑图DSL文内容存储至资源层的拓扑图DSL文件中，包括：
4.根据权利要求1所述的基于MVVM和canvas的可视化拓扑图编辑方法，其特征在于，通过BFF层将资源层中拓扑图组件的配置文件和第三方业务数据源和服务加载
5.根据权利要求1所述的基于MVVM和canvas的可视化拓扑图编辑方法，其特征在于，通过BFF层将资源层中拓扑图组件的配置文件和第三方业务数据源和服务加载至可视化开发层中进行拓扑元素与指标配置以及拓扑关系构建，将获得的拓扑图DSL文内容存储至资源层的拓扑图DSL文件中，包括：
6.根据权利要求1所述的基于MVVM和canvas的可视化拓扑图编辑方法，其特征在于，通过BFF层将资源层中拓扑图组件的配置文件和第三方业务数据源和服务加载至可视化开发层中进行拓扑元素与指标配置以及拓扑关系构建，将获得的拓扑图DSL文内容存储至资源层的拓扑图DSL文件中，包括：
7.根据权利要求1所述的基于MVVM和canvas的可视化拓扑图编辑方法，其特征在于，通过BFF层将资源层中拓扑图组件的配置文件和第三方业务数据源和服务加载至可视化开发层中进行拓扑元素与指标配置以及拓扑关系构建，将获得的拓扑图DSL文内容存储至资源层的拓扑图DSL文件中，包括：采用可视化开发层中拓扑关系构建模块的状态映射单元从数据模型定义单元获取与已消费业务数据指标关联的数据模型，通过资源加载注册与存储模块对存储至本地文件系统模块中的业务化拓扑节点配置清单中的节点可配置状态列表进行加载，根据数据模型的字段属性以及字段属性对应的属性值以及加载的节点可配置状态列表组建用于拓扑节点状态变化判断的状态映射条件，将状态映射条件信息通过资源加载注册与存储模块存储至本地文件系统模块中的DSL文件中，所述状态映射条件信息包括拓扑节点不同状态下对应的数据模型的字段属性和字段属性对应的属性值。
8.根据权利要求1所述的基于MVVM和canvas的可视化拓扑图编辑方法，其特征在于，通过BFF层将资源层中拓扑图组件的配置文件和第三方业务数据源和服务加载至可视化开发层中进行拓扑元素与指标配置以及拓扑关系构建，将获得的拓扑图DSL文内容存储至资源层的拓扑图DSL文件中，包括：采用可视化开发层中拓扑关系构建模块的图例配置单元获取数据模型定义单元定义的数据模型，选取数据模型的字段属性以及字段属性对应的属性值，通过选择的属性值配置对应的节点外观，构建图例，将图例信息通过资源加载注册与存储模块存储至本地文件系统模块的DSL文件中，所述图例信息包括图例中节点的外观节点类型、位置、字段属性名称以及字段属性对应的属性值。
9.根据权利要求1所述的基于MVVM和canvas的可视化拓扑图编辑方法，其特征在于，通过可视化开发层将存储在资源层的拓扑图DSL文件导出至外部应用，包括：采用可视化开发层的拓扑关系导出模块通过资源加载注册与存储模块从本地文件系统模块中加载DSL文件，将加载的DSL文件导出供外部应用使用。
10.一种基于MVVM和canvas的可视化拓扑图编辑系统，其特征在于，所述系统包括拓扑图编辑服务端，所述拓扑图编辑服务端包括：
...【技术特征摘要】
1.一种基于mvvm和canvas的可视化拓扑图编辑方法，其特征在于，所述方法包括：
2.根据权利要求1所述的基于mvvm和canvas的可视化拓扑图编辑方法，其特征在于，通过资源层存储拓扑图组件的配置文件以及第三方业务数据源和服务，包括：通过资源层的本地文件系统模块存储拓扑节点组件源码、所述拓扑节点源码对应的节点可视化配置单、业务化连线配置单、布局函数源码、数据模型配置单和业务化拓扑节点配置清单；通过资源层的第三方外部数据源和服务模块存储第三方业务数据，所述第三方业务数据包括esb服务、第三方后台数据、数据文件。
3.根据权利要求1所述的基于mvvm和canvas的可视化拓扑图编辑方法，其特征在于，通过bff层将资源层中拓扑图组件的配置文件和第三方业务数据源和服务加载至可视化开发层中进行拓扑元素与指标配置以及拓扑关系构建，将获得的拓扑图dsl文内容存储至资源层的拓扑图dsl文件中，包括：
4.根据权利要求1所述的基于mvvm和canvas的可视化拓扑图编辑方法，其特征在于，通过bff层将资源层中拓扑图组件的配置文件和第三方业务数据源和服务加载至可视化开发层中进行拓扑元素与指标配置以及拓扑关系构建，将获得的拓扑图dsl文内容存储至资源层的拓扑图dsl文件中，包括：
5.根据权利要求1所述的基于mvvm和canvas的可视化拓扑图编辑方法，其特征在于，通过bff层将资源层中拓扑图组件的配置文件和第三方业务数据源和服务加载至可视化开发层中进行拓扑元素与指标配置以及拓扑关系构建，将获得的拓扑图dsl文内容存储至资源层的拓扑图dsl文件中，包括：
6.根据权利要求1所述的基于mvvm和canvas的可视化拓扑图编辑方法，其特征在于，通过bff层将资源层中拓扑图组件的配置文件和第三方业务数据源和服务加载至可视化开发层中进行拓扑元素与指标配置以及拓扑关系构建，将获得的拓扑图dsl文内容存储至资源层的拓扑图dsl文件中，包括：
7.根据权利要求1所述的基于mvvm和canvas的可视化拓扑图编辑方法，...
【专利技术属性】
技术研发人员：张海娴，江山，闫静，
申请(专利权)人：赞同科技股份有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。