Vue — jTopo

近期在Vue项目中使用jTopo来制作集群节点拓扑图，官网http://www.jtopo.com/

使用vue-cli搭建的模块化开发项目，使用第三方库最好的方式就是通过npm install xxx安装，然后在项目

里import xxx来使用；但是在JTopo官网上并没有发现有该库的npm包，但是无论是什么项目，最终通过打包后

跑在浏览器上的肯定是一个html文件，在Vue中就是根目录下的index.html,在该文件中会将webpack打包后的

build.js文件通过<script>标签方式引入。同理可以认为jtopo.js就是webpack打包输出的文件，将其手动在

index.html文件中通过<script>标签方式引入即可 (万变不离其宗。。想想html引入jQuery)！！！

initTopo:function(servlist,portlist,servType,canvas) {var stage = new JTopo.Stage(canvas);var scene = new JTopo.Scene();scene.background = 'static/img/saturation.png';stage.add(scene);var cloudNode = new JTopo.Node('Root VirtualIP');cloudNode.setSize(40, 40);cloudNode.fillColor = '255,255,0';//黄cloudNode.setLocation(360,230);            cloudNode.layout = {type: 'circle', radius: 150};scene.add(cloudNode);for(var i=0; i<servlist.length; i++){var node = new JTopo.CircleNode(servlist[i]);node.fillStyle = '200,255,0';node.fillColor = '0,255,255';//青node.radius = 15;node.setLocation(scene.width * Math.random(), scene.height * Math.random());node.layout = {type: 'circle', radius: 80};//    var port=portlist[i]; //Hbuilder 此处（闭包前）必须要加分号 (function(index){node.click(function(event){// 渲染服务版本信息var servInfos=gobalVue.versionInfos;for(var j=0;j<servInfos.length;j++){if(servInfos[j].serverName==servlist[index]){gobalVue.$router.push({name: 'serviceDetail',params:{'servType': servType,'servPort':portlist[index],'servInfo':servInfos[j]}})}else{gobalVue.$router.push({name: 'serviceDetail',params:{'servType': servType,'servPort':portlist[index]}})}}         });})(i)scene.add(node);                                var link = new JTopo.Link(cloudNode, node);scene.add(link);/**  此处  vue-resource与axios的区别在于  vue-resource进行了 同步设置(此处必须同步)* * */$.ajaxSettings.async = false;$.post('/nodeServController/findNodesByServPort',{'servType':servType,'servPort':portlist[i]}, function(result) {var list=result.data.content;if(list!=null && list.length>0){for(var j=0; j<list.length; j++){var vmNode = new JTopo.CircleNode(list[j].nodeName+"::"+list[j].nodeIp);vmNode.radius = 10;vmNode.fillStyle = '255,255,0';vmNode.setLocation(scene.width * Math.random(), scene.height * Math.random());if (list[j].connectState) {var info=list[j];info.lastUpdate=gobalVue.renderTime(info.lastUpdate)vmNode.fillColor = '0,255,0'; //绿vmNode.click(function(event){gobalVue.$router.push({name: 'ShowNode', params:{node: info}})});} else{vmNode.fillColor = '255,0,0';//红vmNode.click(function(event){alert('节点已断开')});}scene.add(vmNode);scene.add(new JTopo.Link(node, vmNode));                            }}},"json");}JTopo.layout.layoutNode(scene, cloudNode, true);scene.addEventListener('mouseup', function(e){if(e.target && e.target.layout){JTopo.layout.layoutNode(scene, e.target, true);    }});$.ajaxSettings.async = true;}

示意图：（只是测试，不要在意红配绿赛。。哦）

在此功能中总结一下问题：

1. 闭包

(function(index){node.click(function(event){// 渲染服务版本信息var servInfos=gobalVue.versionInfos;for(var j=0;j<servInfos.length;j++){if(servInfos[j].serverName==servlist[index]){gobalVue.$router.push({name: 'serviceDetail',params:{'servType': servType,'servPort':portlist[index],'servInfo':servInfos[j]}})}else{gobalVue.$router.push({name: 'serviceDetail',params:{'servType': servType,'servPort':portlist[index]}})}}            });
})(i)

在为多个节点渲染点击事件时利用foreach循环，但无法将节点的点击事件进行动态渲染，只能将最后一次循环的数

据代入点击事件，此时利用到闭包：将函数内部和函数外部连接起来的桥梁 将外部参数 i 传入点击事件。

2. 此处 $post多组数据为保证数据展示一致，使用vue-recourse 并设置同步：

    // 先设置为同步，再改为异步$.ajaxSettings.async = false;$.post('/nodeServController/findNodesByServPort',{'servType':servType,'servPort':portlist[i]}, function(result) {// 请求处理},"json");$.ajaxSettings.async = true;

3. this 对象

正常情况下this对象指向全局Vue实例对象，但在node-click处和$post处 this却指向 jTopo实例及 vue-recourse

$post 实例，所以须在全局进行重新赋值( this善变须格外注意！！！)：

var gobalVue=this; // vue实例

4. 对于不同场景切换问题

要将舞台Stage设置多个Scene对象，统一渲染数据后，切换为某个场景即可设置某个Scene.visible=true;其他为

false实现。

var scene = new JTopo.Scene()；

scene.visible=true； // 切换选中

scene.visible=false；

Vue — jTopo相关推荐

Vue+JTopo（一）
1.下载js jtopo 更新下载 (不知道为什么网站被封禁了--在这提供下我现在用的 jtopo-1.4.4_trial-esm-min.js) 链接:https://pan.baidu.com/s ...
vue、jtopo绘制鱼骨图
效果如下图所示: 一.文件目录结构: 二.绘制png的鱼头.鱼尾图片 fish_head.png: fish_tail.png: 三.下载js文件 jquery.jtopo请到官网 ...
区别vue的this和JTopo中的this
第一种方法,用=>函数第二种方法,_this = this 来替换vue的this 转载于:https://www.cnblogs.com/liuruolin/p/7419007.html
手绘topo图组件 vue + element-ui + jtopo
系统不识别美元符号,emit和Message前需要加$符号 html部分 <div class="close-it" @click="closePage" ...
jTopo入门简单实现拓扑图
最近项目中需要绘制拓扑图,于是研究了下绘制拓扑图的组件,jtopo是一款比较简单易上手的开发工具包,分享给大家. jtopo特点 1.完全基于HTML5 Canvas开发,API平易近人.几乎简单到了 ...
jtopo影响了input光标左右移动
背景: 在使用 JTopo绘制流程图后, 页面上的文本输入框(input)通过键盘左右键移动光标失效原因: jtopo-0.4.8.js 中的m(b) 方法,对4个方向键进行了屏蔽,放开屏蔽即 ...
canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
vue实现文件上传功能
代码如下所示: <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
win10 4步快速安装vue
1 安装nvm-windows 在这里下载安装nvm,目的是在同一台电脑中管理多个 Node 版本建议采取默认安装路径安装 2 安装nodejs 以管理员模式打开命令行,然后输入 nvm list ...
前端Vue学习之路(五)插件的使用
vant插件使用这里我们是用的语法是vue2.0 所以是 npm i vant -S 用法 1.按需引入的话找到package.json文件添加以下内容 plugins:[['import', ...

Vue — jTopo

Vue — jTopo相关推荐

最新文章

热门文章