zoukankan      html  css  js  c++  java
  • vue 集成jTopo 处理方法

    jTopo 帮助说明网站

    http://www.jtopo.com/index.html

    使用例子:

    http://www.jtopo.com/demo/helloworld.html

    不建议直接安装 github 上的代码,因为代码版本不是最新,有部分功能未实现。

    下载最新的js类库文件放到  vue  项目 public   文件夹下。

     引入  import "/jtopo/jtopo-0.4.8-min.js";
     
    <template>
    <div>
    <PanelBase title="拓扑图">
    <div slot="head-btns" class="panel-head-btns"></div>
    <div slot="body-content">
    <section class="table-section">
    <canvas width="2000" height="600" id="canvas"></canvas>
    </section>
    </div>
    </PanelBase>
    </div>
    </template>
     

    let canvas = document.getElementById("canvas");

    that.stage = new JTopo.Stage(canvas);
    that.scene = new JTopo.Scene(that.stage);
    that.scene.background = "/jtopo/aa.png";
     
     
     

    let s1 = that.node("a1", 305, 43, "server.png");
    s1.alarm = "2 W";
    let s2 = that.node("a2", 365, 43, "server.png");
    let s3 = that.node("a3", 425, 43, "server.png");

    let g1 = that.node("a4", 366, 125, "gather.png");
    that.linkNode(s1, g1, true);
    that.linkNode(s2, g1, true);
    that.linkNode(s3, g1, true);

    let w1 = that.node("a5", 324, 167, "wanjet.png");
    that.linkNode(g1, w1);

    let c1 = that.node("a6", 364, 214, "center.png");
    that.linkNode(w1, c1);

    let cloud = that.node("a7", 344, 259, "cloud.png");
    that.linkNode(c1, cloud);

    let c2 = that.node("a8", 364, 328, "center.png");
    that.linkNode(cloud, c2);

    let w2 = that.node("a9", 324, 377, "wanjet.png");
    that.linkNode(c2, w2);
     
    linkNode(nodeA: number, nodeZ: number, f: boolean) {
    /**连线*/
    let link;
    if (f) {
    link = new JTopo.FoldLink(nodeA, nodeZ);
    } else {
    link = new JTopo.Link(nodeA, nodeZ);
    }
    link.direction = "vertical";
    this.scene.add(link);
    return link;
    },
    hostLink(nodeA: any, nodeZ: any, name: string) {
    let link1 = new JTopo.FlexionalLink(nodeA, nodeZ, name);
    //var link = new JTopo.FlexionalLink(nodeA, nodeZ, text);
    //var link = new JTopo.FlexionalLink(nodeA, nodeZ, text);// 二次折线
    link1.shadow = false;
    link1.offsetGap = 44;
    this.scene.add(link1);
    return link1;
    }
     
     
     
  • 相关阅读:
    BF算法和KMP算法
    Python课程笔记 (五)
    0268. Missing Number (E)
    0009. Palindrome Number (E)
    0008. String to Integer (atoi) (M)
    0213. House Robber II (M)
    0198. House Robber (E)
    0187. Repeated DNA Sequences (M)
    0007. Reverse Integer (E)
    0006. ZigZag Conversion (M)
  • 原文地址:https://www.cnblogs.com/hucoke/p/11313480.html
Copyright © 2011-2022 走看看