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 处理方法的更多相关文章

  1. vue 集成 axios 发送post请求 payload导致后台无法接收到数据问题

    vue 集成axios之后,发送的post请求默认为payload 方式. 如果想改为正常的方式,需要增加headers头,并且将发送是数据json格式改为 querystring的方式. 安装依赖 ...

  2. 利用官方的vue-cli脚手架来搭建Vue集成开发环境

    在利用vue-cli脚手架搭建vue集成环境之前,我们需要先安装nodejs的环境.如果在cmd中输入node --version和npm --version出现如下的版本信息,就说明安装已经成功了. ...

  3. SpreadJS与Vue集成,苏宁集团『极客办公』系统开发案例

    “造极”如今已成为苏宁集团的年度核心关键词.“造极”在具体工作上的体现,代表着苏宁不断追求极致的工匠精神,即对待每一个环节,都要严格要求.精益求精.“极客办公”系统,正是在这种环境下应运而生.本期公开 ...

  4. VUE集成keycloak和Layui集成keycloak

    一:KEYCLOAK配置部分: 1,下载keycloak,官网地址:https://www.keycloak.org/downloads.html.下载第一个就行 2,下载完毕之后,打开文件,访问 b ...

  5. vue集成ckeditor富文本框,怎么获取CKEditor实例?

    CKEDITOR 版本5 ,vue集成形式 vue集成ckeditor富文本框,由于不是通过js创建的富文本对象,所以,无法取得实例对象,官方说明 官方在builds-->Getting and ...

  6. Webpack干货系列 | 在 Webpack 5 集成 ESLint 的方法

    程序员优雅哥(youyacoder)简介:十年程序员,呆过央企外企私企,做过前端后端架构.分享vue.Java等前后端技术和架构. 本文摘要:主要讲解运用Webpack 5 中集成 ESLint 的方 ...

  7. vue的常用组件方法应用

    项目技术: webpack + vue + element + axois (vue-resource) + less-loader+ ... vue的操作的方法案例: 1.数组数据还未获取到,做出预 ...

  8. [转]vue跨域解决方法

      vue跨域解决方法 vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' hea ...

  9. OpenLayers Node环境安装运行构建-支持Vue集成OpenLayers

    NodeJS 环境安装包下载:https://nodejs.org/zh-cn/download/ 安装vue-cli3.0.1: https://cli.vuejs.org/guide/instal ...

随机推荐

  1. Thrift: Scalable Cross-Language Services Implementation

    http://thrift.apache.org/static/files/thrift-20070401.pdf

  2. Android中为什么主线程不会因为Looper.loop()方法造成阻塞

    很多人都对Handler的机制有所了解,如果不是很熟悉的可以看看我 如果看过源码的人都知道,在处理消息的时候使用了Looper.loop()方法,并且在该方法中进入了一个死循环,同时Looper.lo ...

  3. [插件式开发][C#]

    Demo 下载 参考文章:https://www.cnblogs.com/hippieZhou/p/9398354.html 技术方面要使用到 依赖注入,可以参考此示例逐步学习:https://git ...

  4. JV默认是如何处理异常

    main函数收到这个问题时,有两种处理方式: a:自己将该问题处理,然后继续运行 b:自己没有针对的处理方式,只有交给调用main的jvm来处理 jvm有一个默认的异常处理机制,就将该异常进行处理. ...

  5. SSH工具登录远程指定节点时输入用户名密码方式【我】

    通过堡垒机部署项目, 一种方式:先把补丁传到接入机,然后用CRT等命令行工具登录指定接入机,然后用SCP命令把 补丁传到 生产服务器,比如 scp -P90010 /app/backup/packet ...

  6. linux禁止特定ip访问某个端口

    linux禁止特定ip访问某个端口   解决方法: 禁止特定ip访问8501端口的命令0:iptables -I INPUT -s 192.168.0.232 -ptcp --dport 8501 - ...

  7. iReport报表生成html,pdf,xls,word工具类

    package com.report; import java.io.ByteArrayOutputStream;import java.io.File;import java.io.InputStr ...

  8. java获取两个日期之间的所有日期

    java获取两个日期之间的所有日期   解决方法: 1.核心方法 private List<String> getBetweenDates(String start, String end ...

  9. RVCT编译错误 Cannot obtain license for Compiler

    找不到文件 找不到文件 Error: C9932E: Cannot obtain license for Compiler (feature compiler) with license versio ...

  10. 123456---com.twoapp.xiaoxiaozuqiujiang---小小足球将

    com.twoapp.xiaoxiaozuqiujiang---小小足球将