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

本发明专利技术公开了基于TypeScript和HTML的动态网络拓扑结构及设计方法，属于数据处理技术领域，本发明专利技术要解决的技术问题为如何根据用户需求，基于TypeScript和HTML自定义数据处理流程，使得数据处理更加便捷，采用的技术方案为：该方法是创建视频文件数据处理的工作流网络拓扑结构，具体如下：构建网络拓扑结构；获取子节点数据，添加子节点并将数据存在二维数组中；在各行子节点中继续添加子节点数据，存入二维数组的同时对二维数组进行处理；对每个新增的子节点进行配置或删除操作，将数据存入二维数组中；所有数据存入二维数组中，并在数组中相应位置加入空对象来渲染整个网络拓扑结构；调用接口保存网络拓扑图配置数据，适时应用。用。用。

【技术实现步骤摘要】
基于TypeScript和HTML的动态网络拓扑结构及设计方法


[0001]本专利技术涉及数据处理
，具体地说是一种基于TypeScript和HTML的动态网络拓扑结构及设计方法。

技术介绍

[0002]TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。
[0003]HTML：超文本标记语言，标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分(英语：Head)、和“主体”部分(英语：Body)，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
[0004]在实际应用中，当对一条数据有三种以上的处理流程时，依据简单的判断逻辑处理数据显然不是最好的选择。故如何根据用户需求，基于TypeScript和HTML自定义数据处理流程，使得数据处理更加便捷是目前亟待解决的技术问题。
[0005]专利号为CN104301178B的专利文献公开了一种基于稳态迁移控制的复杂动态网络拓扑结构估计器及方法，其中，状态变量传感器将实时监测到的状态信息数据实时传输到稳态监测与记录仪，并同步向稳态迁移控制器反馈复杂动态网络系统的状态变量信息；稳态监测与记录仪为稳态迁移控制器提供稳态迁移控制所需的启动指令，稳态迁移控制器收到状态变量信息后生成稳态迁移控制信号并作用于所控制的复杂动态网络系统；拓扑估计器根据稳态监测与记录仪所传输的稳态响应数据后实现对复杂动态网络拓扑结构进行估计。该技术方案是对复杂的动态网络拓扑结构进行估计，不能根据用户需求，基于TypeScript和HTML自定义数据处理流程，使得数据处理更加便捷。

技术实现思路

[0006]本专利技术的技术任务是提供一种基于TypeScript和HTML的动态网络拓扑结构及设计方法，来解决如何根据用户需求，基于TypeScript和HTML自定义数据处理流程，使得数据处理更加便捷的问题。
[0007]本专利技术的技术任务是按以下方式实现的，一种基于TypeScript和HTML的动态网络拓扑结构设计方法，该方法是创建视频文件数据处理的工作流网络拓扑结构，具体如下：
[0008]构建网络拓扑结构；
[0009]获取子节点数据，添加子节点并将数据存在二维数组中；
[0010]在各行子节点中继续添加子节点数据，存入二维数组的同时对二维数组进行处理；
[0011]对每个新增的子节点进行配置或删除操作，将数据存入二维数组中；
[0012]所有数据存入二维数组中，并在数组中相应位置加入空对象来渲染整个网络拓扑结构；
[0013]调用接口保存网络拓扑图配置数据，适时应用：完成整个网络拓扑结构后，保存该工作流模板，将配置项数据存入数据库中，在其他视频文件需要用该工作流模板时进行修改时，选择需要的工作流模板进行应用。
[0014]作为优选，网络拓扑结构采用用基本的div标签及具体细节样式完成；输入模块标记为“口
‑”
；完成模块标记为
“‑
口”，由此罗列出，整个拓扑结构具体如下：
[0015]第一行出现的结构为
“‑
口”、
“‑‑”
；
“‑
口”表示有子节点；
“‑‑”
表示无子节点；
[0016]非第一行出现的结构为“|
‑
口
‑
|”、“|
‑
口”、
“‑
口
‑
|”、
“‑
口”、
“‑‑
|”和
“‑‑”
；其中，“|
‑
口
‑
|”表示仅有一个子节点，并且整个工作流模板最大长度为1；“|
‑
口”表示超过两个子节点、并且整个工作流模板最大长度大于1的第一个子节点；
“‑
口
‑
|”表示超过两个子节点、并且该行长度与整个工作流模板最大长度相等的最后一个节点；
“‑
口”表示超过两个子节点、并且该行长度与整个工作流模板最大长度不相等的非第一个节点；
“‑
口”表示超过两个子节点、并且该行长度与整个工作流模板最大长度不相等的非第一个节点；
“‑‑
|”和
“‑‑”
均表示无子节点；
[0017]在每个子节点中，加入编辑、删除及添加子节点功能图标。
[0018]更优地，获取子节点数据，添加子节点并将数据存在二维数组中具体如下：
[0019]获取输入节点可以添加的子节点数据并选择：从后端接口获取可添加的输入节点数据；
[0020]在下拉列表中选择后，在网络拓扑结构创建出一行，节点名称的数据暂时存入一个二维数组的第一行第一列；
[0021]创建出第一行后，再次点击输入节点的添加图标，继续创建第二行，节点数据存入数组的第二行第一列，以此类推创建多行。
[0022]更优地，在各行子节点中继续添加子节点数据具体如下：
[0023]点击第一行第一列的子节点中的添加图标，继续获取可创建的子节点数据并添加，此时子节点数据下拉列表中应过滤掉当前子节点的数据，选择其他节点数据进行创建，创建后数据存入数组的第一行第二列中；
[0024]每行中的可继续添加的子节点数据都与输入节点相同，只是在点击添加图标时过滤掉已经使用过的节点值。
[0025]更优地，对每个新增的子节点进行配置或删除操作具体如下：
[0026]在各行子节点中删除子节点：当完成一部分网络拓扑结构后，可能会出现需要删除的子节点；
[0027]在各行子节点中编辑子节点配置项：编辑配置项是以弹窗的方式实现，设置完成后根据子节点坐标把配置项数据存入二维数组中，同时在数据中加入一个设置完成的属性，用来显示当前子节点是否配置完成。
[0028]更优地，在各行子节点中删除子节点具体如下：
[0029]在一行中有三个子节点，点击最后一个子节点的删除图标，仅删除最后一个子节点；
[0030]点击第二个子节点的删除图标，要删除第二个及第三个子节点；
[0031]点击第一个子节点的删除图标，要删除当前行所有的子节点；
[0032]每次确认删除后，重新获取整个网络拓扑结构的最大长度，根据最大长度重新在
二维数组中加入空对象来渲染页面；
[0033]当所有子节点都被删除后，仅展示输入和完成节点。
[0034]更优地，在数组中相应位置加入空对象来渲染整个网络拓扑结构具体如下：
[0035]渲染页面时，使用的是二维数组中的数据，根据数据中是否存在name属性来判断是否有子节点，进而渲染成子节点或者直线线条；
[0036]每次添加子节点后，需要取到整个网络拓扑结构的最大长度，本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于TypeScript和HTML的动态网络拓扑结构设计方法，其特征在于，该方法是创建视频文件数据处理的工作流网络拓扑结构，具体如下：构建网络拓扑结构；获取子节点数据，添加子节点并将数据存在二维数组中；在各行子节点中继续添加子节点数据，存入二维数组的同时对二维数组进行处理；对每个新增的子节点进行配置或删除操作，将数据存入二维数组中；所有数据存入二维数组中，并在数组中相应位置加入空对象来渲染整个网络拓扑结构；调用接口保存网络拓扑图配置数据，适时应用：完成整个网络拓扑结构后，保存该工作流模板，将配置项数据存入数据库中，在其他视频文件需要用该工作流模板时进行修改时，选择需要的工作流模板进行应用。2.根据权利要求1所述的基于TypeScript和HTML的动态网络拓扑结构设计方法，其特征在于，网络拓扑结构采用用基本的div标签及具体细节样式完成；整个拓扑结构具体如下：第一行出现的结构为
“‑
口”、
“‑‑”
；
“‑
口”表示有子节点；
“‑‑”
表示无子节点；非第一行出现的结构为“|
‑
口
‑
|”、“|
‑
口”、
“‑
口
‑
|”、
“‑
口”、
“‑‑
|”和
“‑‑”
；其中，“|
‑
口
‑
|”表示仅有一个子节点，并且整个工作流模板最大长度为1；“|
‑
口”表示超过两个子节点、并且整个工作流模板最大长度大于1的第一个子节点；
“‑
口
‑
|”表示超过两个子节点、并且该行长度与整个工作流模板最大长度相等的最后一个节点；
“‑
口”表示超过两个子节点、并且该行长度与整个工作流模板最大长度不相等的非第一个节点；
“‑
口”表示超过两个子节点、并且该行长度与整个工作流模板最大长度不相等的非第一个节点；
“‑‑
|”和
“‑‑”
均表示无子节点；在每个子节点中，加入编辑、删除及添加子节点功能图标。3.根据权利要求1或2所述的基于TypeScript和HTML的动态网络拓扑结构设计方法，其特征在于，获取子节点数据，添加子节点并将数据存在二维数组中具体如下：获取输入节点可以添加的子节点数据并选择：从后端接口获取可添加的输入节点数据；在下拉列表中选择后，在网络拓扑结构创建出一行，节点名称的数据暂时存入一个二维数组的第一行第一列；创建出第一行后，再次点击输入节点的添加图标，继续创建第二行，节点数据存入数组的...

【专利技术属性】
技术研发人员：田象征，赵山，张建伟，
申请(专利权)人：浪潮云信息技术股份公司，
类型：发明
国别省市：