【Vue引入JTopo及所遇到的问题】

---

前言

项目过程中总是会遇到稀奇古怪的需求，这不，咱老大又让我画一个系统拓扑图放在首页，要求部分数据需从后端获取，动态展示在页面上。对于一个后端人猿来说，只能慢慢摸索。不喜勿喷…- -

---

一、方案选型

由于需求还是比较简单，不需要支持在线画图，不需要工具栏等。所以笔者在这边采用了比较老的js开发工具包JTopo。使用原因主要是因为JTopo比较简单、灵活。其他地方笔者不再赘述，博友们可自行前往官网查看。

JTopo官网： 点击查看

---

二、使用步骤

vue引入JTopo库方案参考 vue使用JTopo

使用方式有两种：一种是将JTopo的官方js库引入到项目中后进行使用；另一种是直接安装JTopo的npm包。

方式一：

1. 进入JTopo官网下载最新的js开发工具包-jtopo-0.4.8-min.js
2. 将下载下来的工具包放在工程目录下。笔者放的位置如下
   
3. 找到public目录下的index.html，添加如下
   
4. demo案例

<template>
  <div style="position: relative; width: 100%; height: 100%; margin: auto" id="topo_content">
    <canvas id="canvas" width="1400" height="800"></canvas>
  </div>
</template>
 
<script>
import userImg1 from "./img/userImg-1.png";
import userImg2 from "./img/userImg-2.png";
import cloudImg from "./img/cloudImg.png";
import serverImg from "./img/server.png";
import emailImg from "./img/email.png";
import dbImg from "./img/db.png";

export default {
  name: "index",
  data() {
    return {
      canvas: null,
      stage: null,
      scene: null,
      containerConsole: null
    };
  },
  computed: {},
  created() { },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.canvas = document.getElementById("canvas");
      this.stage = new JTopo.Stage(this.canvas);
      this.stage.eagleEye.visible = false;
      this.scene = new JTopo.Scene(this.stage);

      // 用户节点
      var nodeUser1 = this.newNode("用户", "0,0,0", 80, 80, 40, 40, userImg1, 1, true);
      var nodeUser2 = this.newNode("用户", "0,0,0", 82, 240, 40, 40, userImg2, 1, true);
      var nodeCloud = this.newNode("局域网", "0,0,0", 160, 160, 40, 40, cloudImg, 1, true);

      // 控制台节点
      this.newNode("127.0.0.1", "0,0,0", 335, 160, 50, 38, serverImg, 1, true);
      var nodeConsole1 = this.newNode(null, null, 301, 98, 0, 0, null, 0, true);
      var nodeConsole2 = this.newNode(null, null, 301, 258, 0, 0, null, 0, true);
      var nodeConsole3 = this.newNode(null, null, 301, 178, 0, 0, null, 0, true);
      var nodeConsole4 = this.newNode(null, null, 380, 285, 0, 0, null, 0, true);
      this.newNode(null, null, 418, 170, 0, 0, null, 0, true);
      this.newNode(null, null, 380, 72, 0, 0, null, 0, true);
      this.newNode(null, null, 340, 72, 0, 0, null, 0, true);
      this.newNode(null, null, 336, 286, 0, 0, null, 0, true);
      this.newNode(null, null, 356, 286, 0, 0, null, 0, true);
      this.newNode("消息通知", "0,0,0", 200, 84, 20, 20, emailImg, 1, true);
      this.newNode("消息通知", "0,0,0", 200, 244, 20, 20, emailImg, 1, true);

      // 数据库节点
      var nodeDb = this.newNode("DB 127.0.0.1", "0,0,0", 470, 330, 40, 40, dbImg, 1, true);

      // 直线连接
      this.newLink(nodeUser1, nodeCloud, null, false);
      this.newLink(nodeUser2, nodeCloud, null, false);
      this.newLink(nodeCloud, nodeConsole3, null, true);
      this.newLink(nodeConsole1, nodeUser1, null, true);
      this.newLink(nodeConsole2, nodeUser2, null, true);

      // 折线连接
      this.newFoldLink(nodeConsole4, nodeDb, "数据读取、存储", true, "vertical");

      // 容器
      this.containerConsole = this.newContainer("决策分析系统", -30, null, 300, 72, 120, 216);
      this.containerConsole.dragable = false;
    },

    // 节点 文本,字体颜色,坐标,大小,图片,透明度(0-1, 1为不透明),选中时是否显示表示选中状态的矩形, 文字定位
    newNode(text, fontColor, x, y, w, h, img, alpha, showSelected, position) {
      var node = new JTopo.Node(text);
      node.fontColor = fontColor;
      node.setLocation(x, y);
      node.setSize(w, h);
      if (img != null || img != undefined) {
        node.setImage(img);
      } else {
        node.fillColor = "0,0,0";
      }
      if (position != null || position != undefined) {
        node.textPosition = position;
      }
      node.dragable = false;
      node.showSelected = showSelected;
      node.alpha = alpha;
      this.scene.add(node);
      return node;
    },

    // 简单连线 两节点,线条文本,是否需要箭头,虚线(不传代表实线, 传数字-越大虚线间隔越大)
    newLink(nodeA, nodeZ, text, isArrow, dashedPattern) {
      var link = new JTopo.Link(nodeA, nodeZ, text);
      link.fontColor = "0,0,0";
      if (isArrow) {
        link.arrowsRadius = 8; //箭头大小
      }
      link.lineWidth = 2; // 线宽
      link.dashedPattern = dashedPattern; // 虚线
      link.bundleOffset = 60; // 折线拐角处的长度
      link.bundleGap = 20; // 线条之间的间隔
      link.textOffsetY = 3; // 文本偏移量（向下3个像素）
      link.strokeColor = "0,200,255";
      this.scene.add(link);
      return link;
    },

    // 折线
    newFoldLink(nodeA, nodeZ, text, isArrow, direction, dashedPattern) {
      var link = new JTopo.FoldLink(nodeA, nodeZ, text);
      link.direction = direction || "horizontal";
      link.fontColor = "0,0,0";
      if (isArrow) {
        link.arrowsRadius = 8; //箭头大小
      }
      link.lineWidth = 2; // 线宽
      link.bundleOffset = 60; // 折线拐角处的长度
      link.bundleGap = 20; // 线条之间的间隔
      link.textOffsetY = 3; // 文本偏移量（向下3个像素）
      link.strokeColor = "0,200,255";
      link.dashedPattern = dashedPattern;
      this.scene.add(link);
      return link;
    },

    // 容器 文本,文本位置,布局,边界-x, y为左上角坐标,w, h为宽度和高度
    newContainer(text, position, layout, x, y, w, h) {
      var container = new JTopo.Container(text);
      if (text != null || text != undefined) {
        container.textOffsetY = position;
        container.fontColor = "0,0,0";
        container.font = "10pt 微软雅黑";
      }
      if (layout != null || layout != undefined) {
        container.layout = layout;
      }
      container.fillColor = "192,192,192";
      container.setBound(x, y, w, h);
      container.dragble = false;
      this.scene.add(container);
      return container;
    }
  },
};
</script>
 
<style scoped>
</style>

效果图：

---

方式二：

1. 执行命令npm i jtopo-in-node，jtopo-in-node链接：点击这里
2. 导入jtopo-in-node模块使用即可
   

---

三、总结

~注意啦：~
上述方式一本地npm run dev后是正常的，但是上到服务器测试环境后页面啥也没有，打开F12后发现JTopo 为undefined；而方式二是正常的。由于笔者学识浅薄，若有哪位大佬知道原因，还请告知一二，笔者在此感激不敬！！！
以上便是笔者对JTopo在vue中使用的总结，希望对博友们有点帮助。