1.前端代码

<link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bkTopology-1.1/css/bkTopology.css" rel="stylesheet"> <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
<script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/js/bootstrap.min.js"></script>
<script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bkTopology-1.2/js/bkTopology.js"></script> <div id="app" style="margin-top: 60px;">
<el-row :gutter="40">
<el-col :span="16" :offset="4">
<div class="none node" id="node-templates" data-container="body" data-placement="top" data-html="true" data-trigger="hover">
<div class="node-container"><span class="node-text"></span></div>
</div>
<div class="bktopo-container">
<div class="bktopo_demo" id="bktopo_demo1">
<div class="none node" id="node-templates" data-container="body" data-placement="top" data-html="true" data-trigger="hover">
<div class="node-container"><span class="node-text"></span></div>
</div>
<div class="bktopo_box" style="height:570px;"></div>
</div>
</div>
</el-col>
</el-row>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
},
mounted() {
this.init()
},
methods: {
init() {
axios.get(site_url + "topo/").then(res => {
if (res.data.result){
$('#bktopo_demo1 .bktopo_box').bkTopology({
lineWidth: 4,
data: res.data.data, //配置数据源
drag: true, //是否支持拖拽移动
lineType: [ //配置线条的类型
{type:'success',lineColor:'#46C37B'},
{type:'info',lineColor:'#4A9BFF'},
{type:'warning',lineColor:'#f0a63a'},
{type:'danger',lineColor:'#c94d3c'},
{type:'default',lineColor:'#aaa'}
]
});
$(".node").popover();
}else{
this.$message.error('获取拓朴数据失败');
}
},'json');
}
}
})
</script>

2.后端代码

def topo(request):
data = {
"nodes": [
{
"id": "node1", "x": 361, "y": 20, "height": 50, "width": 180,
"text": "浏览器发起'www.qq.com'请求", "className": "node success"
},
{
"id": "node2",
"x": 391, "y": 100, "height": 50, "width": 120, "text": "本地hosts文件解析",
"className": "node success"
},
{
"id": "node3", "x": 301, "y": 200, "height": 50, "width": 100, "text": "客户接入联通网", "className": "node"
},
{
"id": "node4", "x": 400, "y": 200, "height": 50, "width": 100, "text": "客户接入移动网", "className": "node"
},
{
"id": "node5", "x": 499, "y": 200, "height": 50, "width": 100, "text": "客户接入电信网",
"className": "node success", "title": "如果hosts匹配成功则不经过DNS服务器解析。直接使用IP访问"
},
{
"id": "node6", "x": 233, "y": 300, "height": 50, "width": 140, "text": "联通DNS服务器", "className": "node"
},
{
"id": "node7", "x": 372, "y": 300, "height": 50, "width": 140, "text": "移动DNS服务器", "className": "node"
},
{
"id": "node8", "x": 511, "y": 300, "height": 50, "width": 140, "text": "电信DNS服务器",
"className": "node success"
},
{
"id": "node9", "x": 233, "y": 400, "height": 50, "width": 370,
"text": "核心骨干交换网集群","className": "node success"
},
{
"id": "node19", "x": 343, "y": 500, "height": 50, "width": 150,
"text": "WEb服务器", "className": "node success"
},
],
"edges": [
{"source": "node1", "sDirection": 'bottom', "target": "node2", "tDirection": 'top', "edgesType": "success"},
{"source": "node2", "sDirection": 'bottom', "target": "node5", "tDirection": 'top', "edgesType": "success"},
{"source": "node3", "sDirection": 'bottom', "target": "node6", "tDirection": 'top', "edgesType": "danger"},
{"source": "node6", "sDirection": 'bottom', "target": "node9", "tDirection": 'left', "edgesType": "danger"},
{"source": "node4", "sDirection": 'bottom', "target": "node7", "tDirection": 'top', "edgesType": "danger"},
{"source": "node5", "sDirection": 'bottom', "target": "node8", "tDirection": 'top', "edgesType": "success"},
{"source": "node7", "sDirection": 'bottom', "target": "node9", "tDirection": 'top', "edgesType": "danger"},
{"source": "node8", "sDirection": 'bottom', "target": "node9", "tDirection": 'right',"edgesType": "danger"},
{"source": "node9", "sDirection": 'bottom', "target": "node19", "tDirection": 'top', "edgesType": "success"}
]
}
return JsonResponse({"result": True, "data": data})

显示效果

vue.js生成纵向拓扑图的更多相关文章

  1. vue.js生成横向拓扑图

    1.前端代码 <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/css/ ...

  2. vue.js生成S型拓扑图

    1.前端代码 <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/css/ ...

  3. vue.js 二维码生成组件

    安装 通过NPM安装 npm install vue-qart --save 插件应用 将vue-qart引入你的应用 import VueQArt from 'vue-qart' new Vue({ ...

  4. 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core,如何

    基于 Vue.js 之 iView UI 框架非工程化实践记要   像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引 ...

  5. 在Vue&Element前端项目中,使用FastReport + pdf.js生成并展示自定义报表

    在我的<FastReport报表随笔>介绍过各种FastReport的报表设计和使用,FastReport报表可以弹性的独立设计格式,并可以在Asp.net网站上.Winform端上使用, ...

  6. Vue.js 2.0 和 React、Augular等其他框架的全方位对比

    引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...

  7. Vue.js——60分钟webpack项目模板快速入门

    概述 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板.webpack提供了和browserify ...

  8. Vue.js——60分钟browserify项目模板快速入门

    概述 在之前的一系列vue.js文章,我们都是用传统模式引用vue.js以及其他的js文件的,这在开发时会产生一些问题. 首先,这限定了我们的开发模式是基于页面的,而不是基于组件的,组件的所有代码都直 ...

  9. 窥探Vue.js 2.0

    title: 窥探Vue.js2.0 date: 2016-09-27 10:22:34 tags: vue category: 技术总结 --- 窥探Vue.js2.0 令人兴奋的Vue.js 2. ...

随机推荐

  1. 不用FTP,直接Windows与Linux下互传文件

    直接上传文件到Linux[1] Linux上输入命令:rz 直接下载Linux中的文件[2] 使用命令: sz 文件名 网上看到这个帖子,觉得很实用,转载保存 下载一个部署文件夹,到本地电脑 . 两步 ...

  2. SpringMVC之使用ResponseEntity

    1.Post请求 一般情况下,在非必须的情况下,使用Jquery实现post请求,而后台返回一般都需要手动封装ResponseUtil,和使用@ResponseBody注解来实现返回.然而我们书上学到 ...

  3. [Gamma]Scrum Meeting#9

    github 本次会议项目由PM召开,时间为6月4日晚上10点30分 时长15分钟 任务表格 人员 昨日工作 下一步工作 木鬼 撰写博客,组织例会 撰写博客,组织例会 swoip 前端显示屏幕,翻译坐 ...

  4. 理解UnrealBuildTool

    转自:https://zhuanlan.zhihu.com/p/57186557 介绍 虚幻引擎是当前比较流行的游戏开发引擎之一,许多流行的游戏都是虚幻引擎开发的. 然而“引擎”这个词在行业中的定义比 ...

  5. c++篇 cad.grx 入门,手动配置编译环境

    安装vs2010+sp1补丁; 安装浩辰2018(64位版本); 下载浩辰Grx开发的SDK,注意对应版本年份., 解压到E盘目录下, E:\grxsdk 在他们的官方用户群下载,搜sdk, 找到gr ...

  6. samba服务器安装测试

    samba服务器安装 1.简介 作用:samba文件服务器允许通过网络跨步同的操作系统进行文件共享. 2.安装samba服务器 $ sudo apt-get update $ sudo apt-get ...

  7. mybatis:updatebyexample与updateByExampleSelective

    MyBatis,通常逆向工程工具生成接口和xml映射文件用于简单的单表操作. 有两个方法: updateByExample 和 updateByExampleSelective  ,作用是对数据库进行 ...

  8. SQLServer---------使用Excel 往sqlServer数据库中导入数据

    1.右击创建好的表选择编辑200行 2.保证Excel的字段顺序与数据中顺序一致 3.选中好了后进行复制 4.打开文本   一个快捷方式 将excel 中的数据 黏贴放到文本中 5.点击sql    ...

  9. netty心跳机制解决

    直接看别个的源码:https://blog.csdn.net/xt8469/article/details/84827443>>https://blog.csdn.net/xt8469/a ...

  10. CentOS 安装OpenResty

    [1]环境部署 [1] 依赖环境安装 在环境的任意目录执行命令:yum install pcre-devel openssl-devel gcc curl 一路手动输入y 直到Complete,安装完 ...