CN116400892A - 基于mbse异构模型的统一解析及展示方法 - Google Patents

Abstract

本发明涉及一种基于MBSE异构模型的统一解析及展示方法，属于系统工程领域，包括：构建统一的MBSE模型结构信息标准规范；按照标准规范生成json报文；基于生成的json格式报文，在浏览器端通过Javascript语言，调用json解析工具类，通过javascript前端树组件在浏览器端渲染显示模型树。本发明通过定义统一的MBSE模型解析标准，实现对不同MBSE模型工程的统一接入，保证了模型工程文件的一致性和规范性管理，极大降低了设计师学习不同MBSE软件的学习成本，同时大大提高了设计师的工作效率。

Description

基于MBSE异构模型的统一解析及展示方法

技术领域

本发明涉及一种基于MBSE异构模型的统一解析及展示方法，属于系统工程领域。

背景技术

MBSE基于模型的系统工程，是一种形式化的方法，覆盖用户需求分析、系统需求分析、逻辑架构设计和物理架构设计等工程过程，用于支持复杂装备领域的软件架构设计工作。

在这一领域，从理论到实践，涌现出一批的专业的建模软件，其中代表软件包括美国IBM公司的Rhapsody，以及法国达索公司的Magicdraw，这些软件都具备各自体系化的建模方法论，以及工程化的视图建模能力。

在实际复杂装备研制过程中，由于不同的MBSE软件的特点及受众不一样，不同的厂商可能采用不同的MBSE软件进行架构设计，建模所产生的异构MBSE模型工程分散在各个地方，无法看到全貌，整体设计情况不显性，这就带来了后期模型工程统一管理上的难度，带来不必要的维护成本。

发明内容

为了解决上述技术问题，本发明提供一种基于MBSE异构模型的统一解析及展示方法，其具体技术方案如下：

一种基于MBSE异构模型的统一解析及展示方法，包括以下步骤：

步骤一：构建统一的MBSE异构模型结构信息标准规范，所述MBSE异构模型结构信息包括：模型基础属性、模型分类属性、模型关联关系属性和模型视图信息；

步骤二：按照统一的MBSE异构模型结构信息标准规范生成json报文：

步骤2.1：解析基于Rhapsody的模型结构，具体过程为：

步骤2.11：读取模型项目文件的属性信息，判断是否读取成功，若读取成功，则表示模型有效，进去步骤2.12，若无效则结束；

步骤2.12：通过parseModelAndGenerateZip方法，解析模型并生成压缩文件；

步骤2.13：获取模型名并在默认路径内创建文件；

步骤2.14：创建模型解析对象RhapsodyModelParser，RhapsodyModelParser是基于Rhapsody模型的解析器方法指令，为模型解析流程的入口，若创建失败，则表示模型无效，若创建成功，则执行parser解析方法指令；

步骤2.15：初始化项目节点信息，对根节点解析；

步骤2.16：解析节点数据；

步骤2.17：解析模型图数据；

步骤2.18：获取当前节点的所有子节点集合；

步骤2.19：处理每个子节点元素，依次进入步骤2.16、步骤2.17；

步骤2.110：判断当前子节点元素是否为叶子节点，若是则结束，若否，则进入步骤2.19；

步骤2.111：生成json文件，将所有的节点数据写入json文件；

步骤2.2：解析基于Magicdraw的模型结构，具体过程为：

步骤2.21：读取模型项目文件的属性信息，判断是否读取成功，若读取成功，则表示模型有效，进去步骤2.22，若无效则结束；

步骤2.22：定义生成文件和压缩包的路径；

步骤2.23：获取模型名并在默认路径内创建文件；

步骤2.24：创建模型解析对象MagicDrawModelParser， MagicDrawModelParser是基于MagicDraw模型的解析器操作指令，为模型解析流程的入口，若创建失败，则表示模型无效，若创建成功，执行parser解析方法指令；

步骤2.25：初始化项目节点信息，对根节点解析；

步骤2.26：解析节点数据；

步骤2.27：方法解析模型图数据；

步骤2.28：获取当前节点的所有子节点集合；

步骤2.29：处理每个子节点元素，依次进入步骤2.26和步骤2.27；

步骤2.210：判断当前子节点元素是否为叶子节点，若是则结束，若否，则进入步骤2.29；

步骤2.211：生成json文件，将所有的节点数据写入json文件；

步骤2.3：选中指定MBSE异构模型，调用相应Rhapsody的模型结构解析插件或者Magicdraw的模型结构解析插件，解析生成json格式报文；

步骤三：基于生成的json格式报文，反向解析生成浏览器端模型树：

步骤3.1：在浏览器端反向解析json报文，并生成模型树；

步骤3.2：在步骤3.1生成的模型树中显示模型元素、模型关联关系和模型视图信息。

进一步的，所述步骤2.16为通过parseModelInfo解析节点数据，parseModelInfo表示解析模型信息的总方法指令，总方法指令会调用parseBaseInfo、parseRelationInfo、parseDiagramInfo、parseAttributeInfo指令，对模型信息各位维度进行细粒度解析，具体包括以下步骤：

步骤2.161：根据parseBaseInfo方法解析模型基础信息，parseBaseInfo方法是解析模型基础信息的方法指令，parseBaseInfo方法用来提取模型基础信息，读取Rhapsody或Magicdraw的模型文件，进行基础元素的提取，包含id，pid，name，description，metaClass，interfaceName，displayName，icon，isLeaf，判断是否为叶子节点通过getNestedElements获取该节点的所有子节点，若数量为0， isLeaf字段取值为true，否则为非叶子节点，isLeaf字段取值为false；

步骤2.162：根据parseRelationInfo方法获取模型元素间的关联关系，parseRelationInfo方法表示解析模型关联关系信息的方法指令，通过元素的getReferences获取关系集合，提取集合中每一个关系属性，所述关系属性包括名称、类型、方向、从/到；

步骤2.163：根据parseAttributeInfo方法获取分类属性，提取模型扩展属性信息，获取元素的扩展属性信息列表，通过元素的getAttributes获取分类集合，提取名称、有效性、类型和默认值信息。

进一步的，步骤2.17为根据parseDiagramInfo方法解析模型图数据，用来提取模型视图的图片及坐标信息，具体包括以下步骤：

步骤2.171：根据getPictureAs获取图片信息，将其转为字符串进行储存，并获取图片名称、id信息，通过getGraphicalElements获取图片内的节点元素集合，提取模型视图内节点元素集合列表信息，遍历取得每个元素的基本信息，进入步骤2.16；

步骤2.172：根据createNewCollection方法获取图片内每个元素的坐标、形状信息，通过元素的getShape获取图片的形状，通过元素的getPoints获取图片节点的坐标信息。

进一步的，所述步骤2.27为通过parseModelInfo解析节点数据，具体包括以下步骤：

步骤2.271：根据parseBaseInfo方法解析模型基础信息，模型基础信息包括id，pid，name，description，metaClass，interfaceName，displayName，icon，isLeaf，判断是否为叶子节点通过getOwnedElements获取该节点的所有子节点，若数量为0，则isLeaf字段取值为true,否则取值为false；

步骤2.272：根据parseRelationInfo方法获取关系关系，通过元素的getRelationShipRelatedElements方法获取关系，再通过方法getRelatedElement提取集合中每一个关系属性，关系属性包括：名称、类型、方向、从/到；

步骤2.273：判断当前元素是否是可建立值属性的对象，如果是则根据parseAttributeInfo方法获取属性，通过getOwnedElements获取元素的值集合，遍历集合，提取名称、有效性、类型、默认值信息。

进一步的，所述步骤2.27为根据parseDiagramInfo方法解析模型图数据，具体包括以下步骤：

步骤2.271：根据ImageExport.export()方法生成图片进行储存，并获取图片名称、id信息，通过getPresentationElements获取图片内的节点元素集合，遍历取得每个元素的基本信息，判断元素类型，如果是Shape类型则获取对应属性信息，如果是Path类型则获取线的方向，Source，Target的名称和id，遍历取得每个元素的基本信息进入步骤2.26；

步骤2.272：根据遍历getPresentationElements获取图片内的节点元素集合获取图片内每个元素的坐标(X,Y,Width,Height)信息。

进一步的，所述步骤3.1基于生成的json格式报文，通过 javascript语言的json解析工具类反向解析json报文，并通过javascript前端树组件，在浏览器端渲染展示模型树，具体包括以下步骤：

步骤3.11：在浏览器端点击模型树页签，通过javascript语言，触发getFirstModelData方法，调用接口getModelParseDetailData请求数据根节点和子节点数据；

步骤3.12：通过组件buildTree将数据转换为Tree；

步骤3.13：页面渲染；

步骤3.14：展开树节点，通过a-tree的@expand="onTreeExpand"监听点击事件，点击节点展开按钮时，调用接口getModelNodeChildrenData获取子节点数据，通过组件buildTree将新增的数据加入Tree中；

步骤3.15：点击树节点元素时，通过a-tree的@select="selectTreeNode"监听树节点的点击事件，selectTreeNode方法对节点的基础属性、分类属性、关联列表解析，同时通过showImgData解析关联模型图的字节信息，以及对图内节点元素的坐标解析还原；

步骤3.16：展示模型图，当点击图内元素时，利用<area>标签的coords属性，对目标元素进行高亮显示，通过diagramAreaClick方法，查询Tree中目标元素的id，通过 a-tree的:selectedKeys展开对应的节点；

步骤3.17：查看关系列表时，“从/到”字段值，以超链接的形式展示，点击超链接，通过jumpTreeDataInfo方法查找从Tree中查找该节点，若存在，通过a-tree的selectedKeys进行查找定位，若不存在，通过请求getModelParentNodeData，获取节点以及关联节点信息，渲染到Tree中，利用js的scrollIntoView对目标节点进行定位，使之显示在可视区中间，依次进入步骤3.15和步骤3.16。

本发明的有益效果是：

1.通过定义统一的MBSE模型解析标准，实现对不同MBSE模型工程的统一接入，保证了模型工程文件的一致性和规范性管理。

2.通过对模型工程元素在浏览器端的集中解析及展示，实现MBSE模型视图在浏览器端的集中统一的在线展示，避免查看不同模型工程还需要打开相应MBSE客户端软件，极大降低了设计师学习不同MBSE软件的学习成本，同时大大提高了设计师的工作效率。

附图说明

图1是本发明中Rhapsody模型工程解析的过程示意图，

图2是本发明中Rhapsody模型工程解析的过程示意图，

图3是本发明中Magicdraw模型工程解析的过程示意图，

图4是本发明中浏览器端反向解析json报文生成模型树及交互逻辑示意图。

实施方式

现在结合附图对本发明作进一步详细的说明。

基于MBSE异构模型的统一解析及展示方法，包括以下操作步骤：

步骤一：构建统一的MBSE模型结构信息标准规范：

模型结构信息标准规范具体如下表：

步骤二：按照标准规范生成json报文：

1.开发基于Rhapsody的模型结构解析插件，参考图1，具体过程为：

步骤1：读取模型项目文件的属性信息，判断是否读取成功，若读取成功，则表示模型有效，若无效则结束，若有效，进去步骤2；

步骤2：通过parseModelAndGenerateZip方法，解析模型并生成压缩文件；

步骤3：获取模型名并在默认路径内创建文件；

步骤4：创建模型解析对象RhapsodyModelParser，执行parser解析方法指令；

步骤5：初始化项目节点信息对根节点解析；

步骤6：通过parseModelInfo解析节点数据；

1）根据parseBaseInfo方法解析模型基础信息，包含id，pid，name，description，metaClass，interfaceName，displayName，icon，isLeaf,判断是否为叶子节点通过getNestedElements获取该节点的所有子节点，若数量为0，则为叶子节点返回true，否则为非叶子节点,返回false。

2）根据parseRelationInfo方法获取模型元素间的关联关系，通过元素的getReferences获取关系集合，提取集合中每一个关系属性，名称、类型、方向、从/到。

3）根据parseAttributeInfo方法获取分类属性，通过元素的getAttributes获取分类集合，提取名称、有效性、类型、默认值信息。

步骤7：根据parseDiagramInfo方法解析模型图数据；

1）根据getPictureAs获取图片信息，将其转为字符串进行储存，并获取图片名称、id等信息，通过getGraphicalElements获取图片内的节点元素集合，遍历取得每个元素的基本信息，进入步骤6。

2）根据createNewCollection方法获取图片内每个元素的坐标、形状等信息，通过元素的getShape获取图片的形状，通过元素的getPoints获取图片节点的坐标信息。

步骤8：根据getAllNestedElements获取当前节点的所有子节点集合；

步骤9：通过parserRecursive方法处理每个子节点元素，依次进入步骤6、步骤7；

步骤10：判断当前子节点元素是否为叶子节点，若是结束，若否，则进入步骤9；

步骤11：生成json文件，将所有的节点数据写入json文件。

2．开发基于Magicdraw的模型结构解析插件，参考图2，具体过程为：

步骤1：读取模型项目文件的属性信息，判断是否读取成功，若读取成功，则表示模型有效 ，若无效则结束，若有效，进去步骤2；

步骤2：定义生成文件和压缩包的路径；

步骤3：获取模型名并在默认路径内创建文件；

步骤4：创建模型解析对象MagicDrawModelParser，执行parser解析方法指令；

步骤5：初始化项目节点信息对根节点解析；

步骤6：通过parseModelInfo解析节点数据；

1）根据parseBaseInfo方法解析模型基础信息。

包含id,pid,name,description,metaClass,interfaceName,displayName，icon,isLeaf,判断是否为叶子节点通过getOwnedElements获取该节点的所有子节点，若数量为0，则为叶子节点返回true，否则为非叶子节点,返回false。

2）根据parseRelationInfo方法获取模型元素间的关联关系，

通过元素的getRelationShipRelatedElements方法获取关系，再通过方法getRelatedElement提取集合中每一个关系属性，名称、类型、方向、从/到。

3）判断当前元素是否是可建立值属性的对象。

如果是则根据parseAttributeInfo方法获取属性，通过getOwnedElements获取元素的值集合，遍历集合，提取名称、有效性、类型、默认值信息。

步骤7：根据parseDiagramInfo方法解析模型图数据；

1）根据ImageExport.export()方法生成图片进行储存，并获取图片名称、id等信息，通过getPresentationElements获取图片内的节点元素集合，遍历取得每个元素的基本信息，判断元素类型，如果是Shape类型则获取对应属性信息，如果是Path类型则获取线的方向，Source,Target的名称和id，遍历取得每个元素的基本信息进入步骤6。

2）根据遍历getPresentationElements获取图片内的节点元素集合获取图片内每个元素的坐标(X,Y,Width,Height)等信息。

步骤8：根据getOwnedElements获取当前节点的所有子节点集合；

步骤9：通过parserRecursive方法处理每个子节点元素，依次进入步骤6、步骤7；

步骤10：判断当前子节点元素是否为叶子节点，若是结束，若否，则进入步骤9；

步骤11：生成json文件，将所有的节点数据写入json文件。

3.选中指定MBSE模型工程，调用相应模型结构解析插件，解析生成json格式报文；

Rhapsody操作流程示意：

步骤1：打开rhapsody软件，打开MBSE模型工程，参考图3。

步骤2：通过模型解析插件解析模型工程，并生成标准的json格式报文。

Magicdraw操作流程示意：

步骤1：打开Magicdraw软件，打开MBSE模型工程。

步骤2：通过模型解析插件解析模型工程，并生成标准的json格式报文。

步骤三：基于生成的json格式报文，通过 javascript语言的json解析工具类反向解析json报文，并通过javascript前端树组件在浏览器端渲染展示模型树，参见图 4：

1）在浏览器端，通过调用javascript语言的json.parse方法反向解析json报文，并通过蚂蚁金服开源的的ant design vue前端javascript组件库，调用其API方法生成模型树。

2）该模型树可显示模型元素、模型关联关系、模型视图信息，具体过程为

步骤1：在浏览器端点击模型树页签，通过javascript语言，触发getFirstModelData方法，调用接口getModelParseDetailData请求数据根节点和子节点数据；

步骤2：通过组件buildTree将数据转换为Tree；

步骤3：页面渲染；

步骤4：展开树节点，通过a-tree的@expand="onTreeExpand"监听点击事件，点击节点展开按钮时，调用接口getModelNodeChildrenData获取子节点数据，通过组件buildTree将新增的数据加入Tree中；

步骤5：点击树节点元素时，通过a-tree的@select="selectTreeNode"监听树节点的点击事件，selectTreeNode方法对节点的基础属性、分类属性、关联列表解析，同时通过showImgData解析关联模型图的字节信息，以及对图内节点元素的坐标解析还原；

步骤6：展示模型图，当点击图内元素时，利用<area>标签的coords属性，对目标元素进行高亮显示，通过diagramAreaClick方法，查询Tree中该元素的id,通过 a-tree的:selectedKeys展开对应的节点；

步骤7：查看关系列表时，“从/到”字段值，以超链接的形式展示，点击该超链接，通过jumpTreeDataInfo方法查找从Tree中查找该节点，若存在，通过a-tree的selectedKeys进行查找定位，通过若不存在，通过请求getModelParentNodeData，获取节点以及关联节点信息，渲染到Tree中，利用js的scrollIntoView对目标节点进行定位，使之显示在可视区中间，依次进入步骤5、步骤6。

以上述依据本发明的理想实施例为启示，通过上述的说明内容，相关工作人员完全可以在不偏离本项发明技术思想的范围内，进行多样的变更以及修改。本项发明的技术性范围并不局限于说明书上的内容，必须要根据权利要求范围来确定其技术性范围。

Claims (6)

1.一种基于MBSE异构模型的统一解析及展示方法，其特征在于：包括以下步骤：

步骤一：构建统一的MBSE异构模型结构信息标准规范，所述MBSE异构模型结构信息包括：模型基础属性、模型分类属性、模型关联关系属性和模型视图信息；

步骤二：按照统一的MBSE异构模型结构信息标准规范生成json报文：

步骤2.1：解析基于Rhapsody的模型结构，具体过程为：

步骤2.11：读取模型项目文件的属性信息，判断是否读取成功，若读取成功，则表示模型有效，进去步骤2.12，若无效则结束；

步骤2.12：通过parseModelAndGenerateZip方法，解析模型并生成压缩文件；

步骤2.13：获取模型名并在默认路径内创建文件；

步骤2.14：创建模型解析对象RhapsodyModelParser，RhapsodyModelParser是基于Rhapsody模型的解析器方法指令，为模型解析流程的入口，若创建失败，则表示模型无效，若创建成功，则执行parser解析方法指令；

步骤2.15：初始化项目节点信息，对根节点解析；

步骤2.16：解析节点数据；

步骤2.17：解析模型图数据；

步骤2.18：获取当前节点的所有子节点集合；

步骤2.19：处理每个子节点元素，依次进入步骤2.16、步骤2.17；

步骤2.110：判断当前子节点元素是否为叶子节点，若是则结束，若否，则进入步骤2.19；

步骤2.111：生成json文件，将所有的节点数据写入json文件；

步骤2.2：解析基于Magicdraw的模型结构，具体过程为：

步骤2.21：读取模型项目文件的属性信息，判断是否读取成功，若读取成功，则表示模型有效，进去步骤2.22，若无效则结束；

步骤2.22：定义生成文件和压缩包的路径；

步骤2.23：获取模型名并在默认路径内创建文件；

步骤2.24：创建模型解析对象MagicDrawModelParser， MagicDrawModelParser是基于MagicDraw模型的解析器操作指令，为模型解析流程的入口，若创建失败，则表示模型无效，若创建成功，执行parser解析方法指令；

步骤2.25：初始化项目节点信息，对根节点解析；

步骤2.26：解析节点数据；

步骤2.27：方法解析模型图数据；

步骤2.28：获取当前节点的所有子节点集合；

步骤2.29：处理每个子节点元素，依次进入步骤2.26和步骤2.27；

步骤2.210：判断当前子节点元素是否为叶子节点，若是则结束，若否，则进入步骤2.29；

步骤2.211：生成json文件，将所有的节点数据写入json文件；

步骤2.3：选中指定MBSE异构模型，调用相应Rhapsody的模型结构解析插件或者Magicdraw的模型结构解析插件，解析生成json格式报文；

步骤三：基于生成的json格式报文，反向解析生成浏览器端模型树：

步骤3.1：在浏览器端反向解析json报文，并生成模型树；

步骤3.2：在步骤3.1生成的模型树中显示模型元素、模型关联关系和模型视图信息。

2.根据权利要求1所述的基于MBSE异构模型的统一解析及展示方法，其特征在于：所述

步骤2.16为通过parseModelInfo解析节点数据，parseModelInfo表示解析模型信息的总方法指令，总方法指令会调用parseBaseInfo、parseRelationInfo、parseDiagramInfo、parseAttributeInfo指令，对模型信息各位维度进行细粒度解析，具体包括以下步骤：

步骤2.161：根据parseBaseInfo方法解析模型基础信息，parseBaseInfo方法是解析模型基础信息的方法指令，parseBaseInfo方法用来提取模型基础信息，读取Rhapsody或Magicdraw的模型文件，进行基础元素的提取，包含id，pid，name，description，metaClass，interfaceName，displayName，icon，isLeaf，判断是否为叶子节点通过getNestedElements获取该节点的所有子节点，若数量为0， isLeaf字段取值为true，否则为非叶子节点，isLeaf字段取值为false；

步骤2.162：根据parseRelationInfo方法获取模型元素间的关联关系，parseRelationInfo方法表示解析模型关联关系信息的方法指令，通过元素的getReferences获取关系集合，提取集合中每一个关系属性，所述关系属性包括名称、类型、方向、从/到；

步骤2.163：根据parseAttributeInfo方法获取分类属性，提取模型扩展属性信息，获取元素的扩展属性信息列表，通过元素的getAttributes获取分类集合，提取名称、有效性、类型和默认值信息。

3.根据权利要求1所述的基于MBSE异构模型的统一解析及展示方法，其特征在于：步骤2.17为根据parseDiagramInfo方法解析模型图数据，用来提取模型视图的图片及坐标信息，具体包括以下步骤：

步骤2.171：根据getPictureAs获取图片信息，将其转为字符串进行储存，并获取图片名称、id信息，通过getGraphicalElements获取图片内的节点元素集合，提取模型视图内节点元素集合列表信息，遍历取得每个元素的基本信息，进入步骤2.16；

步骤2.172：根据createNewCollection方法获取图片内每个元素的坐标、形状信息，通过元素的getShape获取图片的形状，通过元素的getPoints获取图片节点的坐标信息。

4.根据权利要求1所述的基于MBSE异构模型的统一解析及展示方法，其特征在于：所述步骤2.27为通过parseModelInfo解析节点数据，具体包括以下步骤：

步骤2.271：根据parseBaseInfo方法解析模型基础信息，模型基础信息包括id，pid，name，description，metaClass，interfaceName，displayName，icon，isLeaf，判断是否为叶子节点通过getOwnedElements获取该节点的所有子节点，若数量为0，则isLeaf字段取值为true,否则取值为false；

步骤2.272：根据parseRelationInfo方法获取关系关系，通过元素的getRelationShipRelatedElements方法获取关系，再通过方法getRelatedElement提取集合中每一个关系属性，关系属性包括：名称、类型、方向、从/到；

步骤2.273：判断当前元素是否是可建立值属性的对象，如果是则根据parseAttributeInfo方法获取属性，通过getOwnedElements获取元素的值集合，遍历集合，提取名称、有效性、类型、默认值信息。

5.根据权利要求1所述的基于MBSE异构模型的统一解析及展示方法，其特征在于：所述步骤2.27为根据parseDiagramInfo方法解析模型图数据，具体包括以下步骤：

步骤2.271：根据ImageExport.export()方法生成图片进行储存，并获取图片名称、id信息，通过getPresentationElements获取图片内的节点元素集合，遍历取得每个元素的基本信息，判断元素类型，如果是Shape类型则获取对应属性信息，如果是Path类型则获取线的方向，Source，Target的名称和id，遍历取得每个元素的基本信息进入步骤2.26；

步骤2.272：根据遍历getPresentationElements获取图片内的节点元素集合获取图片内每个元素的坐标(X,Y,Width,Height)信息。

6.根据权利要求1所述的基于MBSE异构模型的统一解析及展示方法，其特征在于：所述步骤3.1基于生成的json格式报文，通过 javascript语言的json解析工具类反向解析json报文，并通过javascript前端树组件，在浏览器端渲染展示模型树，具体包括以下步骤：

步骤3.11：在浏览器端点击模型树页签，通过javascript语言，触发getFirstModelData方法，调用接口getModelParseDetailData请求数据根节点和子节点数据；

步骤3.12：通过组件buildTree将数据转换为Tree；

步骤3.13：页面渲染；

步骤3.14：展开树节点，通过a-tree的@expand="onTreeExpand"监听点击事件，点击节点展开按钮时，调用接口getModelNodeChildrenData获取子节点数据，通过组件buildTree将新增的数据加入Tree中；

步骤3.15：点击树节点元素时，通过a-tree的@select="selectTreeNode"监听树节点的点击事件，selectTreeNode方法对节点的基础属性、分类属性、关联列表解析，同时通过showImgData解析关联模型图的字节信息，以及对图内节点元素的坐标解析还原；

步骤3.16：展示模型图，当点击图内元素时，利用<area>标签的coords属性，对目标元素进行高亮显示，通过diagramAreaClick方法，查询Tree中目标元素的id，通过 a-tree的:selectedKeys展开对应的节点；

步骤3.17：查看关系列表时，“从/到”字段值，以超链接的形式展示，点击超链接，通过jumpTreeDataInfo方法查找从Tree中查找该节点，若存在，通过a-tree的selectedKeys进行查找定位，若不存在，通过请求getModelParentNodeData，获取节点以及关联节点信息，渲染到Tree中，利用js的scrollIntoView对目标节点进行定位，使之显示在可视区中间，依次进入步骤3.15和步骤3.16。

Images