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 相关文章推荐
基于jQuery的自动完成插件
Feb 03 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
Jan 11 Javascript
解决Jquery鼠标经过不停滑动的问题
Mar 03 Javascript
javascript事件冒泡和事件捕获详解
May 26 Javascript
BootStrap扔进Django里的方法详解
May 13 Javascript
详解Bootstrap各式各样的按钮(推荐)
Dec 13 Javascript
JavaScript解析JSON格式数据的方法示例
Jan 24 Javascript
解析Vue2.0双向绑定实现原理
Feb 23 Javascript
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
vue结合Echarts实现点击高亮效果的示例
Mar 17 Javascript
JavaScript中为事件指定处理程序的五种方式分析
Jul 27 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
Aug 28 Javascript
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
查找mysql字段中固定字符串并替换的几个方法
2012/09/23 PHP
解析crontab php自动运行的方法
2013/06/24 PHP
CodeIgniter基本配置详细介绍
2013/11/12 PHP
PHP 配置后台登录以及模板引入
2017/01/24 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
PHP实现图片压缩
2020/09/09 PHP
浅谈PHPANALYSIS提取关键字
2019/03/08 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
根据分辨率不同,调用不同的css文件
2006/07/07 Javascript
仿服务器端脚本方式的JS模板实现方法
2007/04/27 Javascript
jQuery.validate 常用方法及需要注意的问题
2013/03/20 Javascript
Uploadify上传文件方法
2016/03/16 Javascript
JS非空验证及邮箱验证的实例
2017/08/11 Javascript
vue在使用ECharts时的异步更新和数据加载详解
2017/11/22 Javascript
Vue.extend实现挂载到实例上的方法
2019/05/01 Javascript
vue实现商城秒杀倒计时功能
2019/12/12 Javascript
[00:31]2016完美“圣”典风云人物:国士无双宣传片
2016/12/04 DOTA
python计算圆周长、面积、球体体积并画出圆
2014/04/08 Python
python使用psutil模块获取系统状态
2016/08/27 Python
python编程嵌套函数实例代码
2018/02/11 Python
Python中常见的异常总结
2018/02/20 Python
Python中的heapq模块源码详析
2019/01/08 Python
Django实现微信小程序的登录验证功能并维护登录态
2019/07/04 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
使用Django搭建网站实现商品分页功能
2020/05/22 Python
阿迪达斯印尼官方网站:adidas印尼
2020/02/10 全球购物
Java中实现多态的机制
2015/08/09 面试题
写好求职应聘自荐信的三部曲
2013/09/21 职场文书
国税会议欢迎词
2014/01/16 职场文书
创先争优制度
2014/01/21 职场文书
2014年巴西世界杯口号
2014/06/05 职场文书
超市七夕促销活动方案
2014/08/28 职场文书
刑事附带民事上诉状
2015/05/23 职场文书
2016年“5.12”护士节致辞
2015/07/31 职场文书
教学工作总结范文5篇
2019/08/19 职场文书
Python网络编程之ZeroMQ知识总结
2021/04/25 Python