喜歡從業(yè)的專注柑船，七分學(xué)習(xí)的態(tài)度。

概述

做了很多大型項目，經(jīng)常碰到需要給設(shè)備做網(wǎng)絡(luò)組圖拓?fù)?下面簡稱Topo)茎截，早些年用過Java 小程序苇侵，后面流行flex用了flex，再后來出來H5用了H5企锌。因展示列表復(fù)雜性和兼容性特別是研發(fā)方便性的需要榆浓，最近嘗試使用一個基于存JavaScript的Topo，兼容IE到谷歌撕攒，也能適應(yīng)手機(jī)瀏覽器的展示陡鹃，不過IE6展示效果略顯生硬。

兩級Topo

展示結(jié)構(gòu)：主界面展示主圖抖坪，上側(cè)為放大縮小和字體調(diào)整的基礎(chǔ)功能萍鲸，右側(cè)為對象屬性展示框，右下為縮略圖擦俐，底部為業(yè)務(wù)功能數(shù)據(jù)列表脊阴。

展示結(jié)構(gòu)

功能組成：加載下級，查看屬性蚯瞧，查看業(yè)務(wù)嘿期，隱藏子節(jié)點，隱藏其它節(jié)點(在移動端部分功能會屏蔽)埋合。

功能組成

部署簡述

• 基本部署
  項目部署需要使用到已經(jīng)搭建好的Topo包备徐，Topo包包含圖標(biāo)壓縮了也就1M不到，放在：https://github.com/Georgekaren/mxtopogra甚颂。原則上將包放到項目的前臺目錄即可使用蜜猾，考慮到功能展示和實現(xiàn)涉及到數(shù)據(jù)的交互，這里以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. 創(chuàng)建業(yè)務(wù)邏輯函數(shù)
     函數(shù)名稱：SF_GET_NODE_INFO_BY_ID
     SF_GET_NODE_INFO_BY_ID 直接傳了業(yè)務(wù)在用的函數(shù)體，里面包含略微復(fù)雜的業(yè)務(wù)判斷和處理必要的邏輯關(guān)系禽绪，可作為數(shù)據(jù)處理參考蓖救。函數(shù)地址：https://github.com/Georgekaren/mxtopogra/trunk/mxtopo/SF_GET_NODE_INFO_BY_ID_20180424.fnc

  函數(shù)內(nèi)容與mxtopo/js/Actions.js 中的菜單功能一一對應(yīng)洪规，通過類型參數(shù)itype進(jìn)行區(qū)分印屁。

• 6. 登陸系統(tǒng) 后,訪問帶參數(shù)的TopoReadMain.jsp即可加載對應(yīng)的Topo組圖，如：
     http://localhost:8081/mxweb/topo/mxtopo/TopoReadMain.jsp?method=showMxTopo&resId=s00012510004000000001657811&sfFunctionName=SF_GET_NODE_INFO_BY_ID&intype=1

resId 參數(shù) 為 設(shè)備ID 斩例，每加載下一級會變更雄人。
sfFunctionName 為查詢 數(shù)據(jù)的邏輯函數(shù)，可變更
intype 為 1 代表 從上往下找，為6代表 從下往上找,邏輯控制與函數(shù)SF_GET_NODE_INFO_BY_ID的取數(shù)邏輯一一對應(yīng)础钠。
完成如上步驟后恰力，修改SF_GET_NODE_INFO_BY_ID中的sql便能得到對應(yīng)的Topo組圖。

• 特有功能
  有一種情況旗吁，當(dāng)查看下級時踩萎，下級設(shè)備有幾十個，這時在圖上的展示將會是多和亂很钓。這里有個隱藏的特殊功能香府，當(dāng)加載下級設(shè)備數(shù)量大于6時，會彈出選擇框码倦，可以選擇適當(dāng)數(shù)量的設(shè)備進(jìn)行展示企孩。

選擇

呈現(xiàn)

注:擴(kuò)展，如果需要完成的Topo較多袁稽，一個函數(shù)SF_GET_NODE_INFO_BY_ID完成不了勿璃，可以改變鏈接的參數(shù)sfFunctionName ，使用新的函數(shù)推汽。

Topo包是基于mxgraph對功能進(jìn)行改造和擴(kuò)展补疑，可以到mxgraph官網(wǎng)了解其對象操作的對應(yīng)API。了解更多民泵，想深入研究該框架癣丧，請留言說明具體內(nèi)容。另外移動端版本action中的處理略有差異栈妆，后期有機(jī)會再分享胁编。

<small>堅持積累，堅持學(xué)習(xí)鳞尔。</small>