vue 集成jTopo 处理方法


Posted in Javascript onAugust 07, 2019

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;
}

总结

以上所述是小编给大家介绍的vue 集成jTopo 处理方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
Prototype使用指南之enumerable.js
Jan 10 Javascript
JavaScript对象模型-执行模型
Apr 28 Javascript
javascript 函数使用说明
Apr 07 Javascript
$.getJSON在IE下失效的原因分析及解决方法
Jun 16 Javascript
Javascript获取HTML静态页面参数传递值示例
Aug 18 Javascript
javascript自定义startWith()和endWith()的两种方法
Nov 11 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
Feb 20 Javascript
JS手机端touch事件计算滑动距离的方法示例
Oct 26 Javascript
Vue+element-ui 实现表格的分页功能示例
Aug 18 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
Apr 11 Javascript
vue-cli3.X快速创建项目的方法步骤
Nov 14 Javascript
vue+element ui实现锚点定位
Jun 29 Vue.js
vue 集成 vis-network 实现网络拓扑图的方法
Aug 07 #Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
Aug 07 #Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
Aug 07 #Javascript
javascript for循环性能测试示例
Aug 07 #Javascript
弱类型语言javascript中 a,b 的运算实例小结
Aug 07 #Javascript
解决一个微信号同时支持多个环境网页授权问题
Aug 07 #Javascript
vue+element项目中过滤输入框特殊字符小结
Aug 07 #Javascript
You might like
php 面试碰到过的问题 在此做下记录
2011/06/09 PHP
PHP中通过语义URL防止网站被攻击的方法分享
2011/09/08 PHP
PHP header()函数使用详细(301、404等错误设置)
2013/04/17 PHP
php获取网页上所有链接的方法
2015/04/03 PHP
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
PHP开发API接口签名生成及验证操作示例
2020/05/27 PHP
强制设为首页代码
2006/06/19 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
2011/11/09 Javascript
js数字转换为float,取N位小数
2014/02/08 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
jQuery学习笔记之jQuery中的$
2015/01/19 Javascript
javascript 数组操作详解
2015/01/29 Javascript
javaScript中定义类或对象的五种方式总结
2016/12/04 Javascript
VUE实现表单元素双向绑定(总结)
2017/08/08 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
2018/11/30 Javascript
三步实现ionic3点击退出app程序
2019/09/17 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
利用原生JS实现欢乐水果机小游戏
2020/04/23 Javascript
Vue3为什么这么快
2020/09/23 Javascript
Python入门篇之数字
2014/10/20 Python
Python标准库urllib2的一些使用细节总结
2015/03/16 Python
Python中的枚举类型示例介绍
2019/01/09 Python
Python爬虫beautifulsoup4常用的解析方法总结
2019/02/25 Python
PyTorch预训练的实现
2019/09/18 Python
python打印异常信息的两种实现方式
2019/12/24 Python
浅谈keras保存模型中的save()和save_weights()区别
2020/05/21 Python
详解如何通过H5(浏览器/WebView/其他)唤起本地app
2017/12/11 HTML / CSS
日本一家专门经营各种箱包的大型网站:Traveler Store
2016/08/03 全球购物
Web Service面试题:如何搭建Axis2的开发环境
2012/06/20 面试题
毕业生物理教师求职信
2013/10/17 职场文书
高级工程师岗位职责
2013/12/15 职场文书
酒店副总岗位职责
2013/12/24 职场文书
管理失职检讨书
2015/05/05 职场文书
SSM VUE Axios详解
2021/10/05 Vue.js
浅谈如何保证Mysql主从一致
2022/03/13 MySQL