主要使用go.js/vue.js/jquery.js 实现企业部门结构拓扑图。
展示页面:https://eight1302.github.io/CRM_xbb/view/structure/structure.html
页面效果:
页面代码:
<section class="col-md-12">
<el-col id="myDiagramDiv" :style="Height" style="margin-top: 80px; background-color: #fff;">
</el-col>
</section>
js代码主要代码:
//拓扑图展示
gotopo : function(data){
var $ = go.GraphObject.make;
myDiagram = $(go.Diagram, "myDiagramDiv",
{
initialContentAlignment: go.Spot.Center,
maxSelectionCount: 1, // users can select only one part at a time
validCycle: go.Diagram.CycleDestinationTree, // make sure users can only create trees
"clickCreatingTool.archetypeNodeData": {}, // allow double-click in background to create a new node
"clickCreatingTool.insertPart": function(loc) { // customize the data for the new node
this.archetypeNodeData = {
key: getNextKey(), // assign the key based on the number of nodes
name: "(new person)",
title: ""
};
return go.ClickCreatingTool.prototype.inser