论文总字数：24200字

摘 要

传输层的通路组织图是电信运营管理系统中不可缺少的主要内容，也是其重要的组成部分，主要功能是将电信公司在某个区域内的全部或部分的传输模块的资源关系以一种图形化的方式展示出来。而这种资源关系单纯通过表格去展示表达力有限，不易理解。因此我们需要以一种图形化的方式将这种点资源与线资源的具体关系清晰的绘制出来。传统的图形化版本采用的是flex技术，这种版本存在资源利用低、效率慢、依赖第三方插件的缺点。所以，本文采用基于HTML5 Canvas的web可视化方式来实现该需求。

首先，本文对传输模块各个资源的关系进行了分析与整理：一个传输系统由传输段、传输网元、传输时隙、通道、电路、A/Z端口构成，一个传输段能拆分多个传输时隙，同时传输时隙也能进行再拆分，传输时隙可以挂载到通道或者电路，如果2个传输时隙挂载业务相同，则进行合并。

通过对比传统关系型数据库与非关系型数据库，发现传统关系型数据库更能简单便捷的存储传输资源的信息，且便于使用sql语句进行操作，所以最终选用了传统的关系型数据库。之后，在对传输数据格式进行选择时，本文选择了json格式并分析了json数据格式的优势：能够更清晰的表达数据结构，能够节省空间，能够快速地转换成javascript对象。

对于如何绘制通路组织图，我选择了在电信专业方面应用最广泛的图形组件库Twaver，并选择了Twaver HTML5 2D这一分支。同时，为了实现时隙的再拆分功能，我对Twaver的节点类进行了二次扩展，并用递归的方法实现了该功能。通过使用HTML5 Canvas图形组件库，可以减少web可视化对第三方插件（如Adobe Flash）的依赖，满足了不使用第三方插件来实现动态可视化的需求。

最后，本文用Twaver绘制出了通路组织图并基本实现了所有功能，并对传统的flex版本和Twaver版本进行了对比。Twaver版本不需要依赖第三方插件，且在第一次加载时速度快于flex版本，但对于之前拆分过的时隙再进行拆分加载时，速度慢于flex版本。

关键词：传输层；通路组织图; Web可视化；HTML5；Twaver

Abstract

The path organization chart of the transport layer is an important part of the telecom operation support system (OSS). It is an indispensable part of the telecom operation support system. The main function is to display the resource relationship of the whole or part of the transmission module in a region (SCOPE) by a graphic mode. And if we show this kind of resource relationship simply through tables, its expression will be limited and difficult to understand. Therefore, we need to clearly draw the specific relationship between point resources and line resources in a graphical way. The traditional graphical version is based on Flex technology, which has the disadvantages of low resource utilization, slow efficiency, and relying on third party plug-ins. Therefore, this paper uses web visualization based on HTML5 Canvas to realize the requirement.

First, this paper analyzes and collate the relationship between the various resources of the transmission module: a transmission system consists of the transmission seg, the transmission network element, the transmission slot, the channel, the circuit and the A/Z port. One transmission seg can split multiple transmission slots, and the transmission slot can be re split and the transmission slot can be mounted to the channel or circuit，and if the 2 transmission slots mount the same business, then merge.

By comparing the traditional relational database and the non relational database, it is found that the traditional relational database can store the information of the transmission resources more easily and conveniently, and facilitate the operation by using the SQL statement, so the traditional relational database is selected. Then, when selecting the data format for the transmission, this paper selects the JSON format and analyzes the advantages of the JSON data format: it can express the data structure more clearly, save space, and can be quickly converted into JavaScript objects.

I chose the most widely used graphic component library Twaver in the field of telecommunications, and chose the branch of Twaver HTML5 2D. At the same time, in order to achieve the function of time slot splitting, I extend the node class of Twaver and implement this function recursively. By using the HTML5 Canvas graphical component library, you can reduce the dependency of Web visualization on third party plug-ins, such as Adobe Flash, and meet the need for dynamic visualization without using the third party plug-in.

Finally, we use Twaver to draw out the path organization chart and basically implement all the functions, and compare the traditional flex version with the Twaver version. The Twaver version does not need to rely on the third party plug-in and is faster than the flex version when the first load is loaded, but the speed is slower than the flex version when the split time slots are loaded again.

Key words: transport layer; path organization chart; Web visualization; HTML5; Twaver

目录

摘要 3

Abstract 4

第一章 绪论 5

1.1研究背景和意义 5

1.2国内外研究现状 5

1.3主要研究内容 6

第二章 Web可视化技术简介 7

2.1传统Web可视化技术 7

2.2 HTML5 8

2.3 图形化组件库Twaver 8

第三章 设计与实现 10

3.1系统分析与设计 10

3.1.1传输资源之间的关系 10

3.1.2系统设计 10

3.1.3 前端原型 11

3.1.4 功能点和逻辑 12

3.2实现步骤 13

3.2.1数据库和表结构 13

3.2.2选择数据传输格式 14

3.2.3数据传输 15

3.2.4 Twaver 16

3.2.5 具体实现细节 17

第四章 研究总结与展望 21

4.1全文工作总结 21

4.2研究展望 21

致谢 23

参考文献 24

第一章 绪论

1.1研究背景和意义

传输层的通路组织图是电信运营管理系统中不可缺少的主要内容，也是其重要的组成部分，主要功能是将电信公司在某个区域内的全部或部分的传输模块的资源关系以一种图形化的方式展示出来。这些资源主要表现为以下几种：传输模块下包涵的传输网元，传输时隙，传输段，传输通道，传输电路等资源实体。这几种资源之间具有复杂的组合关系，比如：传输段与传输时隙之间是一种一对多的父子关系；传输通道与传输时隙之间也有一对多的父子关系而传输电路与通道，时隙之间又存在一种一对多的路由关系；传输通道与传输段拆分的时隙之间也存在一种一对多的路由关系。同时，段，通道，电路，又可以作为一种线资源去理解，凡是线资源，都用有两端的端点信息，即都需要记录自己A/Z端网元信息等等。面对如此复杂的关联关系，单纯通过表格去展示则表达力有限，不易理解。因此我们需要以一种图形化的方式将这种点资源与线资源的具体关联关系，清晰的绘制出来。

然而，传统的可视化技术通常都有一些限制。它们需要使用者去下载第三方的插件，这些第三方插件会影响使用体验和展示效率，并且存在维护成本高的缺点。例如，在安全相关方面，Java Applet技术略有不足；在加载速度和资源占有率方面，Flex技术存在一些问题；而在网页的复杂性和加载时间上，SVG技术会增加复杂性并且延长加载时间。本文要研究的HTML5，具有零插件和跨平台的特性，能够帮助我们去避免这些限制。它提供了无需浏览器插件的高交互的web页面。随着新的图形显示技术canvas添加到HTML5中，只需一个lt;canvasgt;标签，我们便可以实现基本所有的二维效果。通过使用服务端收集的动态数据将图形呈现在客户端。HTML5 使在不添加插件的情况下利用多媒体应用程序的网页有了可能性。

1.2国内外研究现状

在HTML5出现之前，由于受到浏览器技术的限制，Web可视化应用主要依赖于Flex,Java Applet,SVG等相关技术来实现数据的可视化。而这些技术或多或少的存在安全性隐患、加载速度慢、资源占用率高的缺点，所以，随着HTML5作为下一代HTML标准的不断成熟，许多基于HTML5 Canvas的web可视化应用的研究开展了起来，例如，宋婕和李宏志提出了基于HTML5、Node JS、Geo Server的Web GIS模型以摆脱浏览器对第三方插件的依赖，同时满足Web GIS的高并发，密集性请求。温志超以Canvas库Kineticjs为参考设计并实现了一个基于Canvas的轨道交通可视化图形组件库。Xi xiGong,Yue huiJin,Yi dongcui和Tan Yang则针对分布式网络测量系统和拓扑可视化提供了HTML5的解决方案。同时，康保军以基于HTML5的图形化组件库Twaver为基础，也完成了电信网络拓扑图的实现。

剩余内容已隐藏，请支付后下载全文，论文总字数：24200字