vue 集成jTopo 处理方法

 

jtopo 帮助说明网站

 

 

 

使用例子：

不建议直接安装 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;

}