vue 网络拓扑图,vue 动态图片

2022-09-09 14:34:36 分类：vue 阅读()

　　vue 网络拓扑图,vue 动态图片

　　这篇文章主要介绍了某视频剪辑软件动态生成拓扑图的示例，帮助大家更好的理解和使用某视频剪辑软件框架，感兴趣的朋友可以了解下

　　

横向拓扑

　　在index.html文件中引入文件。

　　链接href= https://魔盒。bk。腾讯。com/static _ API/v3/assets/bootstrap-3。3 .4/CSS/自举。量滴CSS rel=外部无跟随 rel=样式表

　　链接href= https://魔盒。bk。腾讯。com/static _ API/v3/assets/bk拓扑-1.1/CSS/bk拓扑。CSS rel=外部无跟随 rel=样式表

　　script src= https://魔盒。bk。腾讯。com/static _ API/v3/assets/js/jquery-1。10 .2 .量滴js /脚本

　　script src= https://魔盒。bk。腾讯。com/static _ API/v3/assets/bootstrap-3。3 .4/js/自举。量滴js /脚本

　　script src= https://魔盒。bk。腾讯。com/static _ API/v3/assets/bk拓扑-1.2/js/bk拓扑。js /脚本

　　在需要绘制拓扑图的组件进行编程。

　　模板

　　差异

　　跨度型拓扑图/span

　　div class=bktopo-container

　　div class= bk拓扑_演示 id= bk拓扑_演示2

　　div class=无节点 id=节点模板数据容器=body 数据位置=顶部数据html=true

　　数据触发器=悬停

　　节点容器 span class= node-text /span/div

　　/div

　　div class= bk topo _ box style= height:350 px；/div

　　/div

　　/div

　　/div

　　/模板

　　脚本

　　导出默认值{

　　data() {

　　返回{

　　数据：{

　　节点:[

　　{ id :根， x: 10， y: 152高度:50,宽度:120,文本:卡机健康度， className: info }，

　　{ id: child1 ， x: 200， y: 30，高度:50,宽度:120,文本: 进程中央处理器监控， className: info }，

　　{ id: child2 ， x: 200， y: 90，高度:50,宽度:120,文本: 网管网络故障监控， className: info }，

　　{ id: child3 ， x: 200， y: 150，高度:50,宽度:120,文本: 进程内在泄露监控， className: info }，

　　{ id: child4 ， x: 200， y: 210，高度:50,宽度:120,文本: 进程存活监控， className: info }，

　　{ id: child5 ， x: 200， y: 270，高度:50,宽度:120,文本: 用户内在使用监控， className: info }，

　　{ id: child1_1 ， x: 380， y: 30，高度:50,宽度:120,文本: 监控正常无触发自愈， className: success }，

　　{ id: child2_1 ， x: 380， y: 90，高度:50,宽度:120,文本: 监控正常无触发自愈， className: success }，

　　{ id: child3_1 ， x: 380， y: 150，高度:50,宽度:120,文本: 发现异常触发自愈， className: danger }，

　　{ id: child3_2 ， x: 560， y: 150，高度:50,宽度:120,文本: 重启进程正常， className: success }，

　　{ id: child4_1 ， x: 380， y: 210，高度:50,宽度:120,文本: 发现异常触发自愈， className: danger }，

　　{ id: child4_2 ， x: 560， y: 210，高度:50,宽度:120,文本: 重启进程正常， className: success }，

　　{ id: child5_1 ， x: 380， y: 270，高度:50,宽度:120,文本: 发现异常触发自愈， className: success }，

　　],

　　边缘:[

　　{ source: root ， sDirection: right ， target: child1 ， tDirection: left ， edgesType: info }，

　　{ source: root ， sDirection: right ， target: child2 ， tDirection: left ， edgesType: info }，

　　{ source: root ， sDirection: right ， target: child3 ， tDirection: left ， edgesType: info }，

　　{ source: root ， sDirection: right ， target: child4 ， tDirection: left ， edgesType: info }，

　　{ source: root ， sDirection: right ， target: child5 ， tDirection: left ， edgesType: info }，

　　{ 源:子1 ,方向:右,目标:子1_1 ,方向:左,边缘类型:成功 },

　　{ 源:子2 ,方向:右,目标:子2_1 ,方向:左,边缘类型:成功 },

　　{ source: child3 ， sDirection: right ， target: child3_1 ， tDirection: left ， edgesType: danger }，

　　{ source: child3_1 ， sDirection: right ， target: child3_2 ， tDirection: left ， edgesType: success }，

　　{ source: child4 ， sDirection: right ， target: child4_1 ， tDirection: left ， edgesType: danger }，

　　{ source: child4_1 ， sDirection: right ， target: child4_2 ， tDirection: left ， edgesType: success }，

　　{ source: child5 ， sDirection: right ， target: child5_1 ， tDirection: left ， edgesType: success }

　　]

　　}

　　}

　　},

　　已安装(){

　　this.init()

　　},

　　方法：{

　　init() {

　　$(#bktopo_demo2 .bk topo _ box’).书拓扑({

　　数据：this.data，//配置数据源

　　线型：[ //配置线条的类型

　　{类型：成功，lineColor: #46C37B }，

　　{ type: info ，lineColor: #4A9BFF }，

　　{ type: warning ，lineColor: #f0a63a }，

　　{ type: danger ，lineColor: #c94d3c }，

　　{类型：默认，lineColor: #aaa }

　　]

　　});

　　}

　　},

　　}

　　/脚本

　　样式范围

　　/风格

　　

S型拓扑

　　和上面横向一样，需要在index.html文件中引用射流研究…文件。

　　模板

　　差异

　　跨度横向拓扑图/span

　　div class=bktopo-container

　　div class= bk拓扑_演示 id= bk拓扑_演示2

　　div class=无节点 id=节点模板数据容器=body 数据位置=顶部数据html=true

　　数据触发器=悬停

　　节点容器 span class= node-text /span/div

　　/div

　　div class= bk topo _ box style= height:350 px；/div

　　/div

　　/div

　　/div

　　/模板

　　脚本

　　导出默认值{

　　data() {

　　返回{

　　数据：{

　　节点:[

　　{

　　id: demo3_node1 ， x: 100， y: 50， height: 50，

　　宽度:100,文本: 发起， className :节点成功

　　},

　　{

　　id: demo3_node2 ， x: 250， y: 50， height: 50，

　　宽度:100,文本: 过程1 ,类名:节点成功

　　},

　　{

　　id: demo3_node3 ， x: 400， y: 50， height: 50，

　　宽度:100,文本: 过程2 ，类名:节点危险

　　},

　　{

　　id: demo3_node4 ， x: 550， y: 50， height: 50，

　　宽度:100,文本: 过程3 ,类名:节点成功

　　},

　　{

　　id: demo3_node5 ， x: 550， y: 150， height: 50，

　　宽度:100,文本: 过程4 ，类名:节点成功

　　},

　　{

　　id: demo3_node6 ， x: 400， y: 150， height: 50，

　　宽度:100,文本: 过程5 ，类名:节点警告

　　},

　　{

　　id: demo3_node7 ， x: 250， y: 150， height: 50，

　　宽度:100,文本: 过程6 ，类名:节点成功

　　},

　　{

　　id: demo3_node8 ， x: 100， y: 150， height: 50，

　　宽度:100,文本: 过程7 ，类名:节点成功

　　},

　　],

　　边缘:[

　　{

　　源： demo3_node1 ， sDirection :右，

　　target: demo3_node2 ， tDirection: left ， edgesType: success

　　},

　　{

　　源： demo3_node2 ， sDirection :右，

　　target: demo3_node3 ， tDirection: left ， edgesType: danger

　　},

　　{

　　源： demo3_node3 ， sDirection :右，

　　target: demo3_node4 ， tDirection: left ， edgesType: success

　　},

　　{

　　源： demo3_node4 ， sDirection :右，

　　target: demo3_node5 ， tDirection: right ， edgesType: success

　　},

　　{

　　源： demo3_node5 ， sDirection :右，

　　target: demo3_node6 ， tDirection: right ， edgesType: warning

　　},

　　{

　　源： demo3_node6 ， sDirection :右，

　　目标： demo3_node7 ， tDirection :右， edgesType :成功

　　},

　　{

　　源： demo3_node7 ， sDirection :右，

　　目标： demo3_node8 ， tDirection :右， edgesType :成功

　　},

　　]

　　}

　　}

　　},

　　已安装(){

　　this.init()

　　},

　　方法：{

　　init() {

　　$(#bktopo_demo2 .bk topo _ box’).书拓扑({

　　数据：this.data，//配置数据源

　　线型：[ //配置线条的类型

　　{类型：成功，lineColor: #46C37B }，

　　{ type: info ，lineColor: #4A9BFF }，

　　{ type: warning ，lineColor: #f0a63a }，

　　{ type: danger ，lineColor: #c94d3c }，

　　{类型：默认，lineColor: #aaa }

　　]

　　});

　　}

　　},

　　}

　　/脚本

　　样式范围

　　/风格

　　

纵向拓扑

　　和上面横向一样，需要在index.html文件中引用射流研究…文件。

　　模板

　　差异

　　跨度纵向拓扑图/span

　　div class=bktopo-container

　　div class= bk拓扑_演示 id= bk拓扑_演示2

　　div class=无节点 id=节点模板数据容器=body 数据位置=顶部数据html=true

　　数据触发器=悬停

　　节点容器 span class= node-text /span/div

　　/div

　　div class= bk topo _ box style= height:350 px；/div

　　/div

　　/div

　　/div

　　/模板

　　脚本

　　导出默认值{

　　data() {

　　返回{

　　数据：{

　　节点:[

　　{

　　id :节点1 ， x: 361， y: 20 高度:50,宽度:180,

　　文本: 浏览器发起www.qq.com的请求， className :节点成功

　　},

　　{

　　id :节点2 ,

　　x:391，y:100高度:50,宽度:120,文本: 本地主机文件解析，

　　类名“:”节点成功

　　},

　　{

　　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 :客户接入电信网，

　　类名“:”节点成功，标题:如果主机匹配成功则不经过域名服务器(域名服务器)服务器解析。直接使用互联网协议(互联网协议)访问

　　},

　　{

　　id: node6 ， x: 233， y: 300， height: 50， width: 140， text :联通域名服务器(域名服务器)服务器， className: node

　　},

　　{

　　id: node7 ， x: 372， y: 300， height: 50， width: 140， text :移动域名服务器(域名服务器)服务器， className: node

　　},

　　{

　　id: node8 ， x: 511， y: 300， height: 50， width: 140， text :电信域名服务器(域名服务器)服务器，

　　类名“:”节点成功

　　},

　　{

　　id: node9 ， x: 233， y: 400 高度:50,宽度:370,

　　文本: 核心骨干交换网集群， className :节点成功

　　},

　　{

　　id: node19 ， x: 343， y: 500 高度:50,宽度:150,

　　文本： WEb服务器， className :节点成功

　　},

　　],

　　边缘:[

　　{ 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 }

　　]

　　}

　　}

　　},

　　已安装(){

　　this.init()

　　},

　　方法：{

　　init() {

　　$(#bktopo_demo2 .bk topo _ box’).书拓扑({

　　数据：this.data，//配置数据源

　　线型：[ //配置线条的类型

　　{类型：成功，lineColor: #46C37B }，

　　{ type: info ，lineColor: #4A9BFF }，

　　{ type: warning ，lineColor: #f0a63a }，

　　{ type: danger ，lineColor: #c94d3c }，

　　{ type:默认，lineColor: #aaa }

　　]

　　});

　　}

　　},

　　}

　　/脚本

　　样式范围

　　/风格

　　以上是vue动态生成拓扑图的例子的详细内容。更多关于vue生成拓扑图的信息，请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

标签： vue

相关文章阅读

  • 【干货】Vue2.x 组件通信方式详解，这篇讲全了
  • Vue项目的网络请求代理到封装详细步骤
  • React和Vue怎么实现文件下载进度条
  • Vue的生命周期
  • vue3获取DOM节点的3种方式实例
  • vue+elementUI下拉框自定义颜色选择器方式
  • vue数据监听器watch和watchEffect的使用
  • vue首屏加载慢优化方案,vue页面加载慢,vue终极性能优化方案(解决首页加载慢问题)
  • vue项目配置多个请求域名,
  • vue项目配置多个请求域名,,vue项目如何让局域网ip访问配置设置
  • Vue项目启动,nodejs启动vue项目,如何启动一个Vue.js项目
  • vue项目proxy代理不起作用,vue3 proxy代理
  • vue项目proxy代理不起作用,vue3 proxy代理,Vue中如何实现proxy代理
  • Vue页面刷新,vue动态刷新页面
  • Vue页面刷新,vue动态刷新页面,vue中实现页面刷新以及局部刷新的方法
    • 留言与评论（共有 条评论）
       
    验证码：