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

ゞ浴缸里的玫瑰 2023-06-24 04:50 379阅读 0赞

本篇讲述vue中使用jTopo绘制组织机构图,jTopo官网如下

[jTopo][]

1.jTopo引用

在vue入口文件中引入

注：还需要引入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:{}}
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70][]

[jTopo]: http://www.jtopo.com/index.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191224182151972.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA==,size_16,color_FFFFFF,t_70