本篇讲述vue中使用jTopo绘制组织机构图,jTopo官网如下
1.jTopo引用
在vue入口文件中引入
<script src="./static/jtopo-0.4.8-min.js"></script>
注:还需要引入jquery,我在这里没有引入是因为在vue中已经引用了
2.封装绘制组织图的组件
<template >
<div class="jtopo-canvas" id="jtopo">
<canvas width="700px" height="500px" id="canvas"></canvas>
</div>
</template>
<script>
import toolbar from "../lib/jtop/toolbar.js"
export default {
props: ["nodeData"],
data(){
return {
scene:null
}
},
mounted() {
this.init();
},
methods: {
init() {
let vue = this;
let canvas = document.getElementById("canvas");
let stage = new JTopo.Stage(canvas); // 创建一个舞台对象
//显示工具栏
toolbar.showJTopoToobar(stage);
let scene = new JTopo.Scene(stage); // 创建一个场景对象
this.scene = scene;
let count = Object.keys(vue.nodeData).length;
let nodeList = [];
let orgList = [];
for(let i=0;i<count;i++){
let nodeLevellist = vue.nodeData[i];
nodeLevellist.forEach(org => {
if(org.orgName.length>5){
org.shortName = org.orgName.substring(0,5)+"...";
}else{
org.shortName = org.orgName;
}
let node = this.node(org); // 创建一个节点
nodeList.push(node);
orgList.push(org);
if(i>0){
nodeList.forEach((parentNode,index) => {
if(org.parrentId==orgList[index].id){
this.newFlexionalLink(parentNode,node);
}
});
}
});
}
// 树形布局
scene.doLayout(JTopo.layout.TreeLayout('down', 50, 100));
},
node(nodeInfo,x, y, img) {
var node = new JTopo.Node();
node.setImage(require("../assets/img/common/组织机构.png"), true);
//node.setLocation(x, y);
node.fontColor = '0,0,0';
node.text=nodeInfo.shortName;
node.mouseover(function(event){
node.alarm = nodeInfo.orgName
});
node.mouseout(function(event){
node.alarm = null
});
this.scene.add(node);
return node;
},
// 简单连线
newLink(nodeA, nodeZ, text, dashedPattern) {
var link = new JTopo.Link(nodeA, nodeZ, text);
link.lineWidth = 3; // 线宽
//link.dashedPattern = dashedPattern; // 虚线
link.bundleOffset = 100; // 折线拐角处的长度
link.bundleGap = 40; // 线条之间的间隔
link.textOffsetY = 3; // 文本偏移量(向下3个像素)
link.strokeColor = "0,200,255";
this.scene.add(link);
return link;
},
// 折线
newFoldLink(nodeA, nodeZ, text, direction, dashedPattern) {
var link = new JTopo.FoldLink(nodeA, nodeZ, text);
//link.direction = direction || "horizontal";
link.arrowsRadius = 15; //箭头大小
link.lineWidth = 3; // 线宽
link.bundleOffset = 100; // 折线拐角处的长度
link.bundleGap = 40; // 线条之间的间隔
link.offsetGap = 32
link.textOffsetY = 3; // 文本偏移量(向下3个像素)
link.strokeColor = JTopo.util.randomColor(); // 线条颜色随机
//link.dashedPattern = dashedPattern;
this.scene.add(link);
return link;
},
// 二次折线
newFlexionalLink(nodeA, nodeZ, text, direction, dashedPattern) {
var link = new JTopo.FlexionalLink(nodeA, nodeZ, text);
//link.direction = direction || "horizontal";
link.arrowsRadius = 5;//
link.lineWidth = 2; // 线宽
link.offsetGap = 34;//如果要线条水平平齐 offsetGap = (100-32)/2 100为JTopo.layout.TreeLayout('down', 50, 100)中的100 32为图片高度
link.bundleGap = 0; // 线条之间的间隔
link.textOffsetY = 10; // 文本偏移量(向下15个像素)
//link.strokeColor = "0,250,0";
//link.dashedPattern = dashedPattern;
this.scene.add(link);
return link;
},
// 曲线
newCurveLink(nodeA, nodeZ, text) {
var link = new JTopo.CurveLink(nodeA, nodeZ, text);
link.lineWidth = 3; // 线宽
this.scene.add(link);
return link;
}
}
};
</script>
<style scoped>
.jtopo-canvas {
width: 100%;
height: 500px;/*no*/
}
</style>
然后在父组件中使用该组件即可
<template>
<component ref="jtopo" :is="myComponent" :nodeData="nodeOrgJson"></component>
</template>
<script>
import jtopo from "../../components/JTopo.vue";
export default {
components: { jtopo },
data() {nodeOrgJson:{}}
}