CN102855315A - 一种基于html5的集群网络拓扑展现方法 - Google Patents
一种基于html5的集群网络拓扑展现方法 Download PDFInfo
- Publication number
- CN102855315A CN102855315A CN2012103093668A CN201210309366A CN102855315A CN 102855315 A CN102855315 A CN 102855315A CN 2012103093668 A CN2012103093668 A CN 2012103093668A CN 201210309366 A CN201210309366 A CN 201210309366A CN 102855315 A CN102855315 A CN 102855315A
- Authority
- CN
- China
- Prior art keywords
- information
- node
- network topology
- html5
- network
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Abstract
本发明提供一种基于HTML5的集群网络拓扑展现方法，包括以下步骤：从数据库中读取网络拓扑图的原数据；将所述原数据转换为展示数据；将所述展示数据转化为网络拓扑图信息，并进行显示；修改网络拓扑图；保存修改信息。本方法在集群环境下网络拓扑图可以清晰、直观的表现，用户可以轻松了解集群网络信息；网络拓扑图中节点增加，减少，位置变化，节点之间相互关系改变，只需要简单的操作就可以完成，既可以满足一般用户的需求，也可以为特殊用户进行个性化定制，采用异步读取数据方法，实时保存修改后的信息，所见即所得，实时呈现。
Description
技术领域
本发明属于计算机技术领域，具体涉及一种基于HTML5的集群网络拓扑展现方法。
背景技术
超大规模集群环境下的网络监控和管理，以及各节点之间的相互关系表现是非常困难的。在集群管理系统中，如果不能直观地表现网络拓扑关系，不仅导致管理和维护成本的增加，而且在网络发生故障或在冗余网络中出现单线网络连接故障时，会导致网络连接信息反馈不及时，无法对相应问题作出正确反映，从而影响到集群的正常运转，可能会给企业造成经济损失。
目前表现网络拓扑图的技术主要是SVG，SVG是一种可缩放矢量图形技术。SVG特点之一是可以用来动态生成图形。例如，可用SVG动态生成具有交互功能的地图，嵌入网页中，并显示给终端用户。
SVG虽然能够很好的动态表现图形，但不是所有的浏览器都支持SVG格式。如果某些浏览器不支持它，就必须在浏览器上安装插件。最常用的SVG插件来自Adobe公司（AdobeSVG Viewer），另外Corel也提供SVG浏览器（Corel SVG Viewer）。然而前者宣布于2009年1月1日停止对该产品的支持。SVG兼容性不是特别好。需要根据具体集群进行定制，成本高。
发明内容
为了克服上述现有技术的不足，本发明提供一种基于HTML5的集群网络拓扑展现方法，在集群环境下网络拓扑图可以清晰、直观的表现，用户可以轻松了解集群网络信息；网络拓扑图中节点增加，减少，位置变化，节点之间相互关系改变，只需要简单的操作就可以完成，既可以满足一般用户的需求，也可以为特殊用户进行个性化定制，采用异步读取数据方法，实时保存修改后的信息，所见即所得，实时呈现。
为了实现上述发明目的，本发明采取如下技术方案：
一种基于HTML5的集群网络拓扑展现方法，所述方法包括以下步骤：
步骤1：从数据库中读取网络拓扑图的原数据；
步骤2：将所述原数据转换为展示数据；
步骤3：将所述展示数据转化为网络拓扑图信息，并进行显示；
步骤4：修改网络拓扑图；
步骤5：保存修改信息。
所述步骤1中，原数据包括网络节点设备、设备配置信息、设备指标信息、画布信息和设备关系信息；原数据以List<Map<String，Object>>集合方式存储。
所述步骤2中，通过页面设定的函数解析所述原数据，从而使其被HTML5所使用，转换为展示数据。
所述步骤3中，所述展示数据包括网络节点设备、设备的图片信息、设备配置信息、设备指标信息、画布信息、设备关系信息和设备坐标值；所述展示数据以json格式存储。
所述步骤3包括以下步骤：
步骤3-1：根据屏幕大小重新设置设备坐标值，根据重新设置的设备坐标值将设备图片定位到相应位置；
步骤3-2：根据设备关系信息利用HTML5将节点之间的相互关系及网络连接展现出来；
步骤3-3：将设备指标值、端口信息和设备运行情况以页面属性值方式赋值到页面中。
所述步骤4包括以下步骤：
步骤4-1：通过调用位置设定函数修改网络拓扑图中节点的位置；
步骤4-2：修改节点之间的相互关系；通过调用删除节点间关系函数取消节点之间的相互关系，通过调用创建节点间关系函数建立节点间的相互关系；
步骤4-3：添加网络节点；在节点添加导航中，将要添加的节点拖拽到目标位置上，即完成网络节点添加，并调用节点添加函数，将添加的节点各项指标值、端口信息赋值到页面中；
步骤4-4：删除网络节点；选中需要删除的节点，通过调用删除函数完成网络节点删除。
所述步骤5中，将修改信息发送到数据库中进行保存。
与现有技术相比，本发明的有益效果在于：
1.在集群环境下网络拓扑图可以清晰、直观的表现，用户可以轻松了解集群网络信息；
2.网络拓扑图中节点增加，减少，位置变化，节点之间相互关系改变，只需要简单的操作就可以完成，既可以满足一般用户的需求，也可以为特殊用户进行个性化定制；
3.采用异步读取数据方法，实时保存修改后的信息，所见即所得，实时呈现；
4.本发明的浏览器兼容性好，不用安装任何插件，安全性高；
5.可以清晰的表现出网络节点间的相互关系，且复杂的拓扑图显示不增加页面运算压力。
附图说明
图1是基于HTML5的集群网络拓扑展现方法流程图。
具体实施方式
下面结合附图对本发明作进一步详细说明。
如图1，一种基于HTML5的集群网络拓扑展现方法，所述方法包括以下步骤：
步骤1：从数据库中读取网络拓扑图的原数据；
步骤2：将所述原数据转换为展示数据；
步骤3：将所述展示数据转化为网络拓扑图信息，并进行显示；
步骤4：修改网络拓扑图；
步骤5：保存修改信息。
所述步骤1中，原数据包括网络节点设备、设备配置信息、设备指标信息、画布信息和设备关系信息；原数据不能直接用于网络拓扑图显示。原数据以List<Map<String，Object>>集合方式存储。
所述步骤2中，通过页面设定的函数解析所述原数据，从而使其被HTML5所使用，转换为展示数据。
所述步骤3中，所述展示数据包括网络节点设备、设备的图片信息、设备配置信息、设备指标信息、画布信息、设备关系信息和设备坐标值；所述展示数据以json格式存储。网络节点使用X、Y坐标定位方式，以像素为单位。这种方式定位方便、精准。
所述步骤3包括以下步骤：
步骤3-1：根据屏幕大小重新设置设备坐标值，根据重新设置的设备坐标值将设备图片定位到相应位置；
步骤3-2：根据设备关系信息利用HTML5将节点之间的相互关系及网络连接展现出来；
步骤3-3：将设备指标值、端口信息和设备运行情况以页面属性值方式赋值到页面中。
所述步骤4包括以下步骤：
步骤4-1：通过调用位置设定函数修改网络拓扑图中节点的位置；
步骤4-2：修改节点之间的相互关系；通过调用删除节点间关系函数取消节点之间的相互关系，通过调用创建节点间关系函数建立节点间的相互关系；
步骤4-3：添加网络节点；在节点添加导航中，将要添加的节点拖拽到目标位置上，即完成网络节点添加，并调用节点添加函数，将添加的节点各项指标值、端口信息赋值到页面中；
步骤4-4：删除网络节点；选中需要删除的节点，通过调用删除函数完成网络节点删除。
所述步骤5中，将修改信息发送到数据库中进行保存。
最后应当说明的是：以上实施例仅用以说明本发明的技术方案而非对其限制，尽管参照上述实施例对本发明进行了详细的说明，所属领域的普通技术人员应当理解：依然可以对本发明的具体实施方式进行修改或者等同替换，而未脱离本发明精神和范围的任何修改或者等同替换，其均应涵盖在本发明的权利要求范围当中。
Claims (7)
1.一种基于HTML5的集群网络拓扑展现方法，其特征在于：所述方法包括以下步骤：
步骤1：从数据库中读取网络拓扑图的原数据；
步骤2：将所述原数据转换为展示数据；
步骤3：将所述展示数据转化为网络拓扑图信息，并进行显示；
步骤4：修改网络拓扑图；
步骤5：保存修改信息。
2.根据权利要求1所述的基于HTML5的集群网络拓扑展现方法，其特征在于：所述步骤1中，原数据包括网络节点设备、设备配置信息、设备指标信息、画布信息和设备关系信息；原数据以List<Map<String，Object>>集合方式存储。
3.根据权利要求1所述的基于HTML5的集群网络拓扑展现方法，其特征在于：所述步骤2中，通过页面设定的函数解析所述原数据，从而使其被HTML5所使用，转换为展示数据。
4.根据权利要求1所述的基于HTML5的集群网络拓扑展现方法，其特征在于：所述步骤3中，所述展示数据包括网络节点设备、设备的图片信息、设备配置信息、设备指标信息、画布信息、设备关系信息和设备坐标值；所述展示数据以json格式存储。
5.根据权利要求1所述的基于HTML5的集群网络拓扑展现方法，其特征在于：所述步骤3包括以下步骤：
步骤3-1：根据屏幕大小重新设置设备坐标值，根据重新设置的设备坐标值将设备图片定位到相应位置；
步骤3-2：根据设备关系信息利用HTML5将节点之间的相互关系及网络连接展现出来；
步骤3-3：将设备指标值、端口信息和设备运行情况以页面属性值方式赋值到页面中。
6.根据权利要求1所述的基于HTML5的集群网络拓扑展现方法，其特征在于：所述步骤4包括以下步骤：
步骤4-1：通过调用位置设定函数修改网络拓扑图中节点的位置；
步骤4-2：修改节点之间的相互关系；通过调用删除节点间关系函数取消节点之间的相互关系，通过调用创建节点间关系函数建立节点间的相互关系；
步骤4-3：添加网络节点；在节点添加导航中，将要添加的节点拖拽到目标位置上，即完成网络节点添加，并调用节点添加函数，将添加的节点各项指标值、端口信息赋值到页面中；
步骤4-4：删除网络节点；选中需要删除的节点，通过调用删除函数完成网络节点删除。
7.根据权利要求1所述的基于HTML5的集群网络拓扑展现方法，其特征在于：所述步骤5中，将修改信息发送到数据库中进行保存。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN2012103093668A CN102855315A (zh) | 2012-08-28 | 2012-08-28 | 一种基于html5的集群网络拓扑展现方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN2012103093668A CN102855315A (zh) | 2012-08-28 | 2012-08-28 | 一种基于html5的集群网络拓扑展现方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN102855315A true CN102855315A (zh) | 2013-01-02 |
Family
ID=47401903
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN2012103093668A Pending CN102855315A (zh) | 2012-08-28 | 2012-08-28 | 一种基于html5的集群网络拓扑展现方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN102855315A (zh) |
Cited By (12)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103617242A (zh) * | 2013-11-26 | 2014-03-05 | 曙光信息产业股份有限公司 | 一种分布式文件系统拓扑展示方法 |
| CN104361098A (zh) * | 2014-11-21 | 2015-02-18 | 浪潮(北京)电子信息产业有限公司 | 一种云海系统中拓扑图节点自定义的方法 |
| CN104378240A (zh) * | 2014-11-26 | 2015-02-25 | 浪潮电子信息产业股份有限公司 | 一种灵活自定义拓扑视图进行监控的方法 |
| CN104410538A (zh) * | 2014-12-22 | 2015-03-11 | 上海斐讯数据通信技术有限公司 | 一种网络拓扑结构管理方法及系统 |
| CN104767654A (zh) * | 2015-02-28 | 2015-07-08 | 山东中创软件商用中间件股份有限公司 | 监控系统拓扑图的更新方法及装置 |
| CN104915410A (zh) * | 2015-06-04 | 2015-09-16 | 福建天晴数码有限公司 | 一种思维导图保存及加载方法、保存及加载系统 |
| CN106713003A (zh) * | 2016-05-12 | 2017-05-24 | 深圳市深信服电子科技有限公司 | 基于网络拓扑图的虚拟节点创建方法及装置 |
| CN106789286A (zh) * | 2016-12-28 | 2017-05-31 | 曙光信息产业(北京)有限公司 | 一种网络拓扑图的显示方法和装置 |
| CN108959391A (zh) * | 2018-05-31 | 2018-12-07 | 武汉斗鱼网络科技有限公司 | 展现数据库集群架构图的设备、系统、方法、存储介质 |
| CN111181769A (zh) * | 2019-12-11 | 2020-05-19 | 中移（杭州）信息技术有限公司 | 网络拓扑图绘制方法、系统、装置及计算机可读存储介质 |
| CN112597101A (zh) * | 2020-11-16 | 2021-04-02 | 北京明朝万达科技股份有限公司 | 基于web前端实现拓扑图文件转为SVG文件的方法及装置 |
| CN113872805A (zh) * | 2021-09-24 | 2021-12-31 | 希诺麦田技术（深圳）有限公司 | 网络拓扑信息可视化方法、装置及介质 |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101631047A (zh) * | 2009-07-20 | 2010-01-20 | 南京联创科技股份有限公司 | 基于平面模式展示网络拓扑结构的方法 |
| CN101751383A (zh) * | 2009-12-30 | 2010-06-23 | 北京天融信科技有限公司 | 一种使用svg描述网络拓扑的方法 |
| CN101834735A (zh) * | 2009-03-11 | 2010-09-15 | 北京启明星辰信息技术股份有限公司 | 一种大规模网络节点拓扑结构的显示方法和显示装置 |
-
2012
- 2012-08-28 CN CN2012103093668A patent/CN102855315A/zh active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101834735A (zh) * | 2009-03-11 | 2010-09-15 | 北京启明星辰信息技术股份有限公司 | 一种大规模网络节点拓扑结构的显示方法和显示装置 |
| CN101631047A (zh) * | 2009-07-20 | 2010-01-20 | 南京联创科技股份有限公司 | 基于平面模式展示网络拓扑结构的方法 |
| CN101751383A (zh) * | 2009-12-30 | 2010-06-23 | 北京天融信科技有限公司 | 一种使用svg描述网络拓扑的方法 |
Cited By (20)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103617242B (zh) * | 2013-11-26 | 2017-05-10 | 曙光信息产业股份有限公司 | 一种分布式文件系统拓扑展示方法 |
| CN103617242A (zh) * | 2013-11-26 | 2014-03-05 | 曙光信息产业股份有限公司 | 一种分布式文件系统拓扑展示方法 |
| CN104361098A (zh) * | 2014-11-21 | 2015-02-18 | 浪潮(北京)电子信息产业有限公司 | 一种云海系统中拓扑图节点自定义的方法 |
| CN104378240A (zh) * | 2014-11-26 | 2015-02-25 | 浪潮电子信息产业股份有限公司 | 一种灵活自定义拓扑视图进行监控的方法 |
| CN104410538A (zh) * | 2014-12-22 | 2015-03-11 | 上海斐讯数据通信技术有限公司 | 一种网络拓扑结构管理方法及系统 |
| CN104767654A (zh) * | 2015-02-28 | 2015-07-08 | 山东中创软件商用中间件股份有限公司 | 监控系统拓扑图的更新方法及装置 |
| CN104915410A (zh) * | 2015-06-04 | 2015-09-16 | 福建天晴数码有限公司 | 一种思维导图保存及加载方法、保存及加载系统 |
| CN104915410B (zh) * | 2015-06-04 | 2018-07-17 | 福建天晴数码有限公司 | 一种思维导图保存及加载方法、保存及加载系统 |
| CN106713003A (zh) * | 2016-05-12 | 2017-05-24 | 深圳市深信服电子科技有限公司 | 基于网络拓扑图的虚拟节点创建方法及装置 |
| CN111628890A (zh) * | 2016-05-12 | 2020-09-04 | 深信服科技股份有限公司 | 基于网络拓扑图的虚拟节点创建方法及装置 |
| CN106713003B (zh) * | 2016-05-12 | 2020-06-23 | 深信服科技股份有限公司 | 基于网络拓扑图的虚拟节点创建方法及装置 |
| CN106789286A (zh) * | 2016-12-28 | 2017-05-31 | 曙光信息产业(北京)有限公司 | 一种网络拓扑图的显示方法和装置 |
| CN106789286B (zh) * | 2016-12-28 | 2020-12-22 | 曙光信息产业(北京)有限公司 | 一种网络拓扑图的显示方法和装置 |
| CN108959391A (zh) * | 2018-05-31 | 2018-12-07 | 武汉斗鱼网络科技有限公司 | 展现数据库集群架构图的设备、系统、方法、存储介质 |
| CN108959391B (zh) * | 2018-05-31 | 2021-11-26 | 武汉斗鱼网络科技有限公司 | 展现数据库集群架构图的设备、系统、方法、存储介质 |
| CN111181769A (zh) * | 2019-12-11 | 2020-05-19 | 中移（杭州）信息技术有限公司 | 网络拓扑图绘制方法、系统、装置及计算机可读存储介质 |
| CN111181769B (zh) * | 2019-12-11 | 2023-04-07 | 中移（杭州）信息技术有限公司 | 网络拓扑图绘制方法、系统、装置及计算机可读存储介质 |
| CN112597101A (zh) * | 2020-11-16 | 2021-04-02 | 北京明朝万达科技股份有限公司 | 基于web前端实现拓扑图文件转为SVG文件的方法及装置 |
| CN113872805A (zh) * | 2021-09-24 | 2021-12-31 | 希诺麦田技术（深圳）有限公司 | 网络拓扑信息可视化方法、装置及介质 |
| CN113872805B (zh) * | 2021-09-24 | 2023-11-07 | 希诺麦田技术（深圳）有限公司 | 网络拓扑信息可视化方法、装置及介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN102855315A (zh) | 一种基于html5的集群网络拓扑展现方法 | |
| US9413807B1 (en) | Browser rendering and computation | |
| CN110968944B (zh) | 在Web前端展示并操作CAD图纸的方法 | |
| US9665270B2 (en) | Layout algorithm for entity relation model diagram | |
| CN102377246B (zh) | 基于iec61850故障分析系统的图形实例化方法 | |
| WO2015188626A1 (zh) | 在移动终端上实时查看电力系统单线图的方法 | |
| EP3485400A1 (en) | Methods and systems for server-side rendering of native content for presentation | |
| CN107832108A (zh) | 3D canvas网页元素的渲染方法、装置及电子设备 | |
| CN104951996A (zh) | 基于可缩放矢量图形的配电网运行监测方法 | |
| CN104572084B (zh) | 卡片业务中用户界面生成及数据下发方法、装置 | |
| CN101763234B (zh) | 一种模拟各种屏幕分辨率的方法及其装置 | |
| CN105824517B (zh) | 一种桌面的实现方法和装置 | |
| CN107992589B (zh) | 一种svg地图数据的加载方法、装置及系统 | |
| CN103530340A (zh) | 网络专题地图制图方法及制图系统 | |
| US9876507B2 (en) | Semantic compression of structured data | |
| CN105488177A (zh) | 数据可视化展示方法及系统 | |
| CN103176993B (zh) | 一种内容呈现设备和方法 | |
| CN102867030A (zh) | 一种机房环境及布局的准三维表现方法 | |
| CN104201779B (zh) | 一种基于svg的在线监测数据自动集成监控方法 | |
| CN110888974A (zh) | 数据可视化方法及装置 | |
| CN113779040B (zh) | 一种渐进式在线高精地图服务引擎系统 | |
| CN103152429B (zh) | 基于web跨平台与拼墙互动的方法及装置 | |
| CN104090953A (zh) | 一种led灯在虚拟显示终端的地图显示方法及装置 | |
| CN103795799A (zh) | 一种远程监控方法与系统 | |
| CN104317972B (zh) | 一种动态图层感应方法及系统 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20130102 |