General function and Module customization system (CFCMMS)-032 development log (use Gojs to draw module diagram)

032 Development Log (use Gojs to draw module diagram)
The system now does not have the function of the process and chart, now feel in the operation of the various functions of the module if there is a module diagram, then it will be more intuitive. Online to find some of the library to draw the chart, looked at a bit gojs is also good, the introduction is easier. After some work, a simple diagram of the business module was made.

GOJS Basic Knowledge Please crossing the introduction of the network, in the above module diagram, there are module nodes and wiring Two kinds of information needs to be defined.　　User Business module data are organized in the background and sent to the foreground. The interface module for the entire flowchart is a panel that loads the data from the background and then draws it at render time. The JS class is as follows:

Ext.define (' App.view.main.widget.Gojs ', {extend: ' Ext.panel.Panel ', Title: ' Business Module diagram ', iconcls: ' FA Fa-star ', listeners: { Render:function (panel) {panel.drawhierarchy ();}},layout: ' Fit ', items: [{xtype: ' container ', id: ' Mydiagramdiv '}],dr Awhierarchy:function () {var modules, moduleshierarchy;//gets the Ajax request for the user module from the background Ext.Ajax.request ({url: ' modulehierarchy/ Allmodule.do ', async:false,success:function (response) {modules = Ext.decode (Response.responsetext, True)});// Ajax request Ext.Ajax.request ({url: ' modulehierarchy/allmodulehierarchy.do ', async:false,success:function) from the background for the User Module Association relationship (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 Redoscale:. 8,doubleclick:function () {console.log (' DoubleClick ');},layout: $ (go. Treelayout, {//This is only laysOut in trees nodes//connected by//"generalization" linksangle:270,path:go. Treelayout.pathsource,//links go from child to parentsetsportspot:false,//Keep spot.allsides for link connection//s Potsetschildportspot:false,//Keep spot.allsides//nodes not connected by "generalization" links is laid out//horizon Tallyarrangement: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, "Module name:", {row:1,column:0}), $ (go. TextBlock, {Row:1,column:2}, new go. Binding ("text", "ModuleName")));d Iagram.Model = new Go. Graphlinksmodel (modules, moduleshierarchy);})

Java code that provides data in the background:

</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 Modulehierarchys  Ervice.allmodulesinfo (); } @RequestMapping ("/allmodulehierarchy.do") public @ResponseBody list<jsonobject> Getallmodulehierarchy () {RET  Urn 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;/** * * Module hierarchical relationship between the service, used to provide GOJS display module of the summary composition, and each module of the diagram. * * * @author Jiangfeng * * */@Servicepublic class Modulehierarchyservice {/** * return all business modules * @return */Public list& Lt    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; }/** * Returns the association relationship between all business modules * @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; }}

The first one returns all module numbers, with the following data:

[{' ModuleName ': ' Customer ', ' key ': ' Customer ', ' title ': ' Client unit ', ' ModuleID ': ' 6010 '},{' modulename ': ' Salesman ', ' key ': ' Salesman "," title ":" Salesman "," ModuleID ":" 6020 "},{" modulename ":" Product "," key ":" Product "," title ":" Product "," ModuleID ":" 6030 "},{" modulename ": Orders", "Key": "Orders", "title": "Order", "ModuleID": "6040"},{"modulename": "Ordersdetail", "key ":" Ordersdetail "," title ":" Order Details "," ModuleID ":" 6050 "},{" modulename ":" Province "," Key ":" Province "," title ":" Province "," ModuleID ":" 7010 "},{" modulename ":" City "," Key ":" Urban "," title ":" Municipality "," ModuleID ":" 7012 "},{" modulename ":" Rate "," key ": "Rate", "title": "Customer Level", "ModuleID": "7014"},{"modulename": "Trade", "key": "Business", "title": "Industry", "ModuleID": "7016"},{ "ModuleName": "Productclass", "Key": "Productclass", "title": "Product category", "ModuleID": "7018"},{"modulename": "Storage", " Key ":" Storage "," title ":" Commodity Warehouse "," ModuleID ":" 7020 "}]

The second Returns a module association relationship with the following data:

[{' 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 '}]

The above example is just one of the most basic module diagrams. Various manipulations will be added later. such as the selection of filter conditions, navigation and so on. A more important reason to join the chart is that the current module relationship is not suitable for complex system requirements, the following will be the module association to upgrade, during the upgrade process module diagram is an important operational tool.

General function and Module customization system (CFCMMS)-032 development log (use Gojs to draw module diagram)