基于TypeScript和HTML的动态网络拓扑结构及设计方法.pdf

(19)国家知识产权局(12)发明专利申请(10)申请公布号CN114528675A(43)申请公布日2022.05.24(21)申请号202210136840.5(22)申请日2022.02.15(71)申请人浪潮云信息技术股份公司地址250100山东省济南市高新区浪潮路1036号浪潮科技园S01号楼(72)发明人田象征赵山张建伟(74)专利代理机构济南信达专利事务所有限公司37100专利代理师孙园园(51)Int.Cl.G06F30/18(2020.01)G06F111/20(2020.01)权利要求书2页说明书6页附图1页(54)发明名称基于TypeScript和HTML的动态网络拓扑结构及设计方法(57)摘要本发明公开了基于TypeScript和HTML的动态网络拓扑结构及设计方法，属于数据处理技术领域，本发明要解决的技术问题为如何根据用户需求，基于TypeScript和HTML自定义数据处理流程，使得数据处理更加便捷，采用的技术方案为：该方法是创建视频文件数据处理的工作流网络拓扑结构，具体如下：构建网络拓扑结构；获取子节点数据，添加子节点并将数据存在二维数组中；在各行子节点中继续添加子节点数据，存入二维数组的同时对二维数组进行处理；对每个新增的子节点进行配置或删除操作，将数据存入二维数组中；所有数据存入二维数组中，并在数组中相应位置加入空对象来渲染整个网络拓扑结构；调用接口保存网络拓扑图配置数据，适时应用。CN114528675ACN114528675A权利要求书1/2页1.一种基于TypeScript和HTML的动态网络拓扑结构设计方法，其特征在于，该方法是创建视频文件数据处理的工作流网络拓扑结构，具体如下：构建网络拓扑结构；获取子节点数据，添加子节点并将数据存在二维数组中；在各行子节点中继续添加子节点数据，存入二维数组的同时对二维数组进行处理；对每个新增的子节点进行配置或删除操作，将数据存入二维数组中；所有数据存入二维数组中，并在数组中相应位置加入空对象来渲染整个网络拓扑结构；调用接口保存网络拓扑图配置数据，适时应用：完成整个网络拓扑结构后，保存该工作流模板，将配置项数据存入数据库中，在其他视频文件需要用该工作流模板时进行修改时，选择需要的工作流模板进行应用。2.根据权利要求1所述的基于TypeScript和HTML的动态网络拓扑结构设计方法，其特征在于，网络拓扑结构采用用基本的div标签及具体细节样式完成；整个拓扑结构具体如下：第一行出现的结构为“‑口”、“‑‑”；“‑口”表示有子节点；“‑‑”表示无子节点；非第一行出现的结构为“|‑口‑|”、“|‑口”、“‑口‑|”、“‑口”、“‑‑|”和“‑‑”；其中，“|‑口‑|”表示仅有一个子节点，并且整个工作流模板最大长度为1；“|‑口”表示超过两个子节点、并且整个工作流模板最大长度大于1的第一个子节点；“‑口‑|”表示超过两个子节点、并且该行长度与整个工作流模板最大长度相等的最后一个节点；“‑口”表示超过两个子节点、并且该行长度与整个工作流模板最大长度不相等的非第一个节点；“‑口”表示超过两个子节点、并且该行长度与整个工作流模板最大长度不相等的非第一个节点；“‑‑|”和“‑‑”均表示无子节点；在每个子节点中，加入编辑、删除及添加子节点功能图标。3.根据权利要求1或2所述的基于TypeScript和HTML的动态网络拓扑结构设计方法，其特征在于，获取子节点数据，添加子节点并将数据存在二维数组中具体如下：获取输入节点可以添加的子节点数据并选择：从后端接口获取可添加的输入节点数据；在下拉列表中选择后，在网络拓扑结构创建出一行，节点名称的数据暂时存入一个二维数组的第一行第一列；创建出第一行后，再次点击输入节点的添加图标，继续创建第二行，节点数据存入数组的第二行第一列，以此类推创建多行。4.根据权利要求3所述的基于TypeScript和HTML的动态网络拓扑结构设计方法，其特征在于，在各行子节点中继续添加子节点数据具体如下：点击第一行第一列的子节点中的添加图标，继续获取可创建的子节点数据并添加，此时子节点数据下拉列表中应过滤掉当前子节点的数据，选择其他节点数据进行创建，创建后数据存入数组的第一行第二列中；每行中的可继续添加的子节点数据都与输入节点相同，只是在点击添加图标时过滤掉已经使用过的节点值。5.根据权利要求4所述的基于TypeScript和HTML的动态网络拓扑结构设计方法，其特2CN114528675A权利要求书2/2页征在于，对每个新增的子节点进行配置或删除操作具体如下：在各行子节点中删除子节点：当完成一部分网络拓扑结构后，会出现需要删除的子节点；在各行子节点中编辑子节点配置项：编辑配置项是以弹窗的方式实现，设置完成后根据子节点坐标把配置项数据存入二维数组中，同时在