JavaScript快速构建网络组图拓扑Topo

喜欢从业的专注，七分学习的态度。

概述

做了很多大型项目，经常碰到需要给设备做网络组图拓扑(下面简称Topo)，早些年用过Java 小程序，后面流行flex用了flex，再后来出来H5用了H5。因展示列表复杂性和兼容性特别是研发方便性的需要，最近尝试使用一个基于存JavaScript的Topo，兼容IE到谷歌，也能适应手机浏览器的展示，不过IE6展示效果略显生硬。

两级Topo

展示结构：主界面展示主图，上侧为放大缩小和字体调整的基础功能，右侧为对象属性展示框，右下为缩略图，底部为业务功能数据列表。

展示结构

功能组成：加载下级，查看属性，查看业务，隐藏子节点，隐藏其它节点(在移动端部分功能会屏蔽)。

功能组成

部署简述

• 基本部署
  项目部署需要使用到已经搭建好的Topo包，Topo包包含图标压缩了也就1M不到，放在：https://github.com/Georgekaren/mxtopogra。原则上将包放到项目的前台目录即可使用，考虑到功能展示和实现涉及到数据的交互，这里以JavaScript+Spring Java+Oracle项目来做实例说明。

• 1. 把Topo包这个解压 到项目前台文件目录中，如 ：
     D:\JavaEE\Myeclipse\workspace\mxweb\src\main\webapp\topo\mxtopo
• 2. 在Controller中增加如下方法，如 TopoController ：
     @RequestMapping(params = "method=getMxTopoById")
     public void getMxTopoById(HttpServletRequest request, HttpServletResponse response) {
     String sfFunctionName = request.getParameter("sfFunctionName");
     String params = request.getParameter("params");
     String type = request.getParameter("type");
     String inx = request.getParameter("inx");
     String iny = request.getParameter("iny");
     String result = topoService.getTopoInfoByIdSF(sfFunctionName,params,type,inx,iny);
     flushResponse(response, result);
     }
• 3. 在Service中增加如下方法，如 TopoService ：
     public String getTopoInfoByIdSF(String sfFunctionName,String params,String type,String inx,String iny) {
     return topoJdbcDao.getTopoInfoByIdSF(sfFunctionName,params,type,inx,iny);
     }
• 4. 在Dao中增加如下方法，如 TopoJdbcDao ：
     public String getTopoInfoByIdSF(String sfFunctionName,String params,String type,String inx,String iny) {
     String sql = "SELECT "+sfFunctionName+"(?,?,?,?) RDATA from dual ";
     return this.getJdbcTemplate().queryForObject(sql, new String[] { params,type,inx,iny },String.class);
     }
• 5. 创建业务逻辑函数
     函数名称：SF_GET_NODE_INFO_BY_ID
     SF_GET_NODE_INFO_BY_ID 直接传了业务在用的函数体，里面包含略微复杂的业务判断和处理必要的逻辑关系，可作为数据处理参考。函数地址：https://github.com/Georgekaren/mxtopogra/trunk/mxtopo/SF_GET_NODE_INFO_BY_ID_20180424.fnc

  函数内容与mxtopo/js/Actions.js 中的菜单功能一一对应，通过类型参数itype进行区分。

• 6. 登陆系统 后,访问带参数的TopoReadMain.jsp即可加载对应的Topo组图，如：
     http://localhost:8081/mxweb/topo/mxtopo/TopoReadMain.jsp?method=showMxTopo&resId=s00012510004000000001657811&sfFunctionName=SF_GET_NODE_INFO_BY_ID&intype=1

resId 参数 为 设备ID ，每加载下一级会变更。
sfFunctionName 为查询 数据的逻辑函数，可变更
intype 为 1 代表 从上往下找，为6代表 从下往上找,逻辑控制与函数SF_GET_NODE_INFO_BY_ID的取数逻辑一一对应。
完成如上步骤后，修改SF_GET_NODE_INFO_BY_ID中的sql便能得到对应的Topo组图。

• 特有功能
  有一种情况，当查看下级时，下级设备有几十个，这时在图上的展示将会是多和乱。这里有个隐藏的特殊功能，当加载下级设备数量大于6时，会弹出选择框，可以选择适当数量的设备进行展示。

选择

呈现

注:扩展，如果需要完成的Topo较多，一个函数SF_GET_NODE_INFO_BY_ID完成不了，可以改变链接的参数sfFunctionName ，使用新的函数。

Topo包是基于mxgraph对功能进行改造和扩展，可以到mxgraph官网了解其对象操作的对应API。了解更多，想深入研究该框架，请留言说明具体内容。另外移动端版本action中的处理略有差异，后期有机会再分享。

<small>坚持积累，坚持学习。</small>