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 相关文章推荐
实现png图片和png背景透明(支持多浏览器)的方法
Sep 08 Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
Nov 19 Javascript
对JavaScript客户端应用编程的一些建议
Jun 24 Javascript
基于JavaScript实现定时跳转到指定页面
Jan 01 Javascript
jquery UI Datepicker时间控件的使用及问题解决
Apr 28 Javascript
js字符串截取函数slice、substring和substr的比较
May 17 Javascript
浅谈html转义及防止javascript注入攻击的方法
Dec 04 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
Sep 14 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
Oct 23 Javascript
图文详解vue框架安装步骤
Feb 12 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
Aug 27 Javascript
原生JavaScript实现刮刮乐
Sep 29 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
php 获取一个月第一天与最后一天的代码
2010/05/16 PHP
php通过array_merge()函数合并关联和非关联数组的方法
2015/03/18 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
PHP面向对象程序设计之多态性的应用示例
2018/12/19 PHP
PHP7内核之Reference详解
2019/03/14 PHP
javascript不同页面传值的改进版
2008/09/30 Javascript
基于jquery用于查询操作的实现代码
2010/05/10 Javascript
理解Javascript_12_执行模型浅析
2010/10/18 Javascript
jQuery 表单验证扩展(三)
2010/10/20 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
Javascript基础教程之数据类型转换
2015/01/18 Javascript
JS实现网页表格自动变大缩小的方法
2015/03/09 Javascript
javascript禁止访客复制网页内容的实现代码
2015/08/05 Javascript
jquery 实现复选框的全选操作实例代码
2017/01/24 Javascript
Bootstrap响应式表格详解
2017/05/23 Javascript
jQuery+ajax实现修改密码验证功能实例详解
2017/07/06 jQuery
完美解决iview 的select下拉框选项错位的问题
2018/03/02 Javascript
jQuery实现的页面详情展开收起功能示例
2018/06/11 jQuery
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
2019/06/04 jQuery
JavaScript生成随机验证码代码实例
2019/09/28 Javascript
Vue中的this.$options.data()和this.$data用法说明
2020/07/26 Javascript
Python多线程结合队列下载百度音乐的方法
2015/07/27 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
Python+AutoIt实现界面工具开发过程详解
2019/08/07 Python
pytorch 实现cross entropy损失函数计算方式
2020/01/02 Python
python3爬虫中引用Queue的实例讲解
2020/11/24 Python
python 如何在测试中使用 Mock
2021/03/01 Python
肯尼亚网上商城:Kilimall
2016/08/20 全球购物
成人大专生实习期的自我评价
2013/10/02 职场文书
测试工程师岗位职责
2013/11/28 职场文书
写给女朋友的道歉信
2014/01/12 职场文书
师德师风建设整改措施思想汇报
2014/10/11 职场文书
酒店员工手册范本
2015/05/14 职场文书
2015医院个人工作总结范文
2015/05/21 职场文书
Python实战之疫苗研发情况可视化
2021/05/18 Python
Python面向对象编程之类的概念
2021/11/01 Python