Vue jTopo使用，绘制组织机构图

本篇讲述vue中使用jTopo绘制组织机构图,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:{}}
}