[置顶] 常规功能和模块自定义系统 (cfcmms)—032开发日志(用GoJS来绘制模块关系图)
032开发日志(用GoJS来绘制模块关系图)
本系统现在尚没有流程和图表的功能，现在感觉在操作模块的各种功能的时候如果有一个模块关系图，那么就会更直观。网上找了一些绘制图表的库，看了一下GoJS也不错，入门也比较容易。经过一些工作，对业务模块作了一个简单的关系图。
![[置顶] 常规功能和模块自定义系统 (cfcmms)—032开发日志(用GoJS来绘制模块关系图)_第1张图片](http://img.e-com-net.com/image/info5/db19f60b703f434c91b2ed76f049473a.jpg)
GoJS的基础知识请看官网的介绍，在上面的模块图中，有模块节点和连线二种信息需要定义。用户业务模块数据都是由后台组织好后发送到前台的。
整个绘制流程图的界面模块是一个Panel，在render的时候从后台加载数据，然后绘制。js类如下：
Ext.define('app.view.main.widget.Gojs', {
extend : 'Ext.panel.Panel',
title : '业务模块图',
iconCls : 'fa fa-star',
listeners : {
render : function(panel) {
panel.drawHierarchy();
}
},
layout : 'fit',
items : [ {
xtype : 'container',
id : 'myDiagramDiv'
} ],
drawHierarchy : function() {
var modules, moduleshierarchy;
// 从后台取得用户模块的Ajax请求
Ext.Ajax.request({
url : 'modulehierarchy/allmodule.do',
async : false,
success : function(response) {
modules = Ext.decode(response.responseText, true)
}
});
// 从后台取得用户模块关联关系的Ajax请求
Ext.Ajax.request({
url : 'modulehierarchy/allmodulehierarchy.do',
async : false,
success : function(response) {
moduleshierarchy = Ext.decode(response.responseText, true)
}
});
var $ = go.GraphObject.make;
this.$ = $;
var diagram = $(go.Diagram, "myDiagramDiv", {
initialContentAlignment : go.Spot.Center, // center Diagram contents
"undoManager.isEnabled" : true,
// enable Ctrl-Z to undo and Ctrl-Y to redo
scale : .8,
doubleClick : function() {
console.log('doubleClick');
},
layout : $(go.TreeLayout, { // this only lays out in trees nodes
// connected by
// "generalization" links
angle : 270,
path : go.TreeLayout.PathSource, // links go from child to parent
setsPortSpot : false, // keep Spot.AllSides for link connection
// spot
setsChildPortSpot : false, // keep Spot.AllSides
// nodes not connected by "generalization" links are laid out
// horizontally
arrangement : go.TreeLayout.ArrangementHorizontal
})
});
this.diagram = diagram;
diagram.nodeTemplate = $(go.Node, "Auto", $(go.Shape, {
fill : $(go.Brush, go.Brush.Linear, {
0 : "white",
1 : "lightblue"
}),
stroke : "darkblue",
strokeWidth : 1
}), $(go.Panel, "Table", {
defaultAlignment : go.Spot.Left,
margin : 4
}, $(go.RowColumnDefinition, {
column : 1,
width : 4
}),
$(go.TextBlock, {
row : 0,
column : 0,
columnSpan : 3,
alignment : go.Spot.Center
}, {
font : "bold 12pt sans-serif"
}, new go.Binding("text", "title"), new go.Binding("stroke", "color")),
$(go.TextBlock, "模块名称: ", {
row : 1,
column : 0
}), $(go.TextBlock, {
row : 1,
column : 2
}, new go.Binding("text", "moduleName"))));
diagram.model = new go.GraphLinksModel(modules, moduleshierarchy);
}
})
后台的提供数据的java代码：
</pre><pre name="code" class="java">package com.jfok.cfcmms.controller.moduleHierarchy;
import java.util.List;
import javax.annotation.Resource;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.jfok.cfcmms.service.ModuleHierarchyService;
import net.sf.json.JSONObject;
@Controller
@RequestMapping("/modulehierarchy")
public class ModuleHierarchyController {
@Resource
private ModuleHierarchyService moduleHierarchyService;
@RequestMapping("/allmodule.do")
public @ResponseBody List<JSONObject> getAllModule() {
return moduleHierarchyService.allModulesInfo();
}
@RequestMapping("/allmodulehierarchy.do")
public @ResponseBody List<JSONObject> getAllModuleHierarchy() {
return moduleHierarchyService.allModulesHierarchyInfo();
}
}
package com.jfok.cfcmms.service;
import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Service;
import com.jfok.cfcmms.hibernate.system.module._Module;
import net.sf.json.JSONObject;
/**
*
* 模块之间层次关系的Service,用于提供gojs的显示模块的总结构图，和每一个模块的图。
*
* @author jiangfeng
*
*/
@Service
public class ModuleHierarchyService {
/**
* 返回所有的业务模块
* @return
*/
public List<JSONObject> allModulesInfo() {
List<JSONObject> result = new ArrayList<JSONObject>();
for (_Module module : SystemAndLoginInfoService.getModules()) {
if (!module.getTf_moduleName().startsWith("_")) {
JSONObject m = new JSONObject();
m.put("moduleName", module.getTf_moduleName());
m.put("key", module.getTf_moduleName());
m.put("title", module.getTf_title());
m.put("moduleId", module.getTf_moduleId());
result.add(m);
}
}
return result;
}
/**
* 返回所有的业务模块之间的关联关系
* @return
*/
public List<JSONObject> allModulesHierarchyInfo() {
List<JSONObject> result = new ArrayList<JSONObject>();
for (_Module module : SystemAndLoginInfoService.getModules()) {
if (!module.getTf_moduleName().startsWith("_"))
for (_Module pm : module.getParents()) {
JSONObject m = new JSONObject();
m.put("from", pm.getTf_moduleName());
m.put("to", module.getTf_moduleName());
result.add(m);
}
}
return result;
}
}
第一个返回所有module ,数据如下：
[{"moduleName":"Customer","key":"Customer","title":"客户单位","moduleId":"6010"},{"moduleName":"Salesman","key":"Salesman","title":"业务员","moduleId":"6020"},{"moduleName":"Product","key":"Product","title":"商品","moduleId":"6030"},{"moduleName":"Orders","key":"Orders","title":"订单","moduleId":"6040"},{"moduleName":"OrdersDetail","key":"OrdersDetail","title":"订单明细","moduleId":"6050"},{"moduleName":"Province","key":"Province","title":"省份","moduleId":"7010"},{"moduleName":"City","key":"City","title":"市","moduleId":"7012"},{"moduleName":"Rate","key":"Rate","title":"客户等级","moduleId":"7014"},{"moduleName":"Trade","key":"Trade","title":"行业","moduleId":"7016"},{"moduleName":"ProductClass","key":"ProductClass","title":"商品类别","moduleId":"7018"},{"moduleName":"Storage","key":"Storage","title":"商品仓库","moduleId":"7020"}]
[{"from":"City","to":"Customer"},{"from":"Trade","to":"Customer"},{"from":"Rate","to":"Customer"},{"from":"_Department","to":"Salesman"},{"from":"ProductClass","to":"Product"},{"from":"Customer","to":"Orders"},{"from":"Salesman","to":"Orders"},{"from":"Storage","to":"Orders"},{"from":"Orders","to":"OrdersDetail"},{"from":"Product","to":"OrdersDetail"},{"from":"Province","to":"City"}]
上面的例子只是一个最基本的模块图。以后会加入各种操纵。比如选择筛选条件，导航等等功能。加入图表的一个更重要的原因是现在的模块关系已经不能适合复杂系统的需求，下面将会对模块关联关系进行升级，在升级过程中模块图就是一个重要的操作工具。