经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
vue 动态生成拓扑图的示例
来源:jb51  时间:2021/1/4 9:00:58  对本文有异议

横向拓扑

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

  1. <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
  2. <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bkTopology-1.1/css/bkTopology.css" rel="external nofollow" rel="stylesheet">
  3. <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
  4. <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/js/bootstrap.min.js"></script>
  5. <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bkTopology-1.2/js/bkTopology.js"></script>

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

  1. <template>
  2. <div>
  3. <span>S型拓扑图</span>
  4. <div class="bktopo-container">
  5. <div class="bktopo_demo" id="bktopo_demo2">
  6. <div class="none node" id="node-templates" data-container="body" data-placement="top" data-html="true"
  7. data-trigger="hover">
  8. <div class="node-container"><span class="node-text"></span></div>
  9. </div>
  10. <div class="bktopo_box" style="height:350px;"></div>
  11. </div>
  12. </div>
  13. </div>
  14. </template>
  15. <script>
  16. export default {
  17. data() {
  18. return {
  19. data: {
  20. "nodes": [
  21. { "id": "root", "x": 10, "y": 152, "height": 50, "width": 120, "text": "卡机健康度", "className": "info" },
  22. { "id": "child1", "x": 200, "y": 30, "height": 50, "width": 120, "text": "进程CPU监控", "className": "info" },
  23. { "id": "child2", "x": 200, "y": 90, "height": 50, "width": 120, "text": "网管网络故障监控", "className": "info" },
  24. { "id": "child3", "x": 200, "y": 150, "height": 50, "width": 120, "text": "进程内在泄露监控", "className": "info" },
  25. { "id": "child4", "x": 200, "y": 210, "height": 50, "width": 120, "text": "进程存活监控", "className": "info" },
  26. { "id": "child5", "x": 200, "y": 270, "height": 50, "width": 120, "text": "用户内在使用监控", "className": "info" },
  27. { "id": "child1_1", "x": 380, "y": 30, "height": 50, "width": 120, "text": "监控正常无触发自愈", "className": "success" },
  28. { "id": "child2_1", "x": 380, "y": 90, "height": 50, "width": 120, "text": "监控正常无触发自愈", "className": "success" },
  29. { "id": "child3_1", "x": 380, "y": 150, "height": 50, "width": 120, "text": "发现异常触发自愈", "className": "danger" },
  30. { "id": "child3_2", "x": 560, "y": 150, "height": 50, "width": 120, "text": "重启进程正常", "className": "success" },
  31. { "id": "child4_1", "x": 380, "y": 210, "height": 50, "width": 120, "text": "发现异常触发自愈", "className": "danger" },
  32. { "id": "child4_2", "x": 560, "y": 210, "height": 50, "width": 120, "text": "重启进程正常", "className": "success" },
  33. { "id": "child5_1", "x": 380, "y": 270, "height": 50, "width": 120, "text": "发现异常触发自愈", "className": "success" },
  34. ],
  35. "edges": [
  36. { "source": "root", "sDirection": 'right', "target": "child1", "tDirection": 'left', "edgesType": "info" },
  37. { "source": "root", "sDirection": 'right', "target": "child2", "tDirection": 'left', "edgesType": "info" },
  38. { "source": "root", "sDirection": 'right', "target": "child3", "tDirection": 'left', "edgesType": "info" },
  39. { "source": "root", "sDirection": 'right', "target": "child4", "tDirection": 'left', "edgesType": "info" },
  40. { "source": "root", "sDirection": 'right', "target": "child5", "tDirection": 'left', "edgesType": "info" },
  41. { "source": "child1", "sDirection": 'right', "target": "child1_1", "tDirection": 'left', "edgesType": "success" },
  42. { "source": "child2", "sDirection": 'right', "target": "child2_1", "tDirection": 'left', "edgesType": "success" },
  43. { "source": "child3", "sDirection": 'right', "target": "child3_1", "tDirection": 'left', "edgesType": "danger" },
  44. { "source": "child3_1", "sDirection": 'right', "target": "child3_2", "tDirection": 'left', "edgesType": "success" },
  45. { "source": "child4", "sDirection": 'right', "target": "child4_1", "tDirection": 'left', "edgesType": "danger" },
  46. { "source": "child4_1", "sDirection": 'right', "target": "child4_2", "tDirection": 'left', "edgesType": "success" },
  47. { "source": "child5", "sDirection": 'right', "target": "child5_1", "tDirection": 'left', "edgesType": "success" }
  48. ]
  49. }
  50. }
  51. },
  52. mounted() {
  53. this.init()
  54. },
  55. methods: {
  56. init() {
  57. $('#bktopo_demo2 .bktopo_box').bkTopology({
  58. data: this.data, //配置数据源
  59. lineType: [ //配置线条的类型
  60. { type: 'success', lineColor: '#46C37B' },
  61. { type: 'info', lineColor: '#4A9BFF' },
  62. { type: 'warning', lineColor: '#f0a63a' },
  63. { type: 'danger', lineColor: '#c94d3c' },
  64. { type: 'default', lineColor: '#aaa' }
  65. ]
  66. });
  67. }
  68. },
  69. }
  70. </script>
  71. <style scoped>
  72.  
  73. </style>

S型拓扑

和上面横向一样,需要在 index.html 文件中引用 js 文件。

  1. <template>
  2. <div>
  3. <span>横向拓扑图</span>
  4. <div class="bktopo-container">
  5. <div class="bktopo_demo" id="bktopo_demo2">
  6. <div class="none node" id="node-templates" data-container="body" data-placement="top" data-html="true"
  7. data-trigger="hover">
  8. <div class="node-container"><span class="node-text"></span></div>
  9. </div>
  10. <div class="bktopo_box" style="height:350px;"></div>
  11. </div>
  12. </div>
  13. </div>
  14. </template>
  15. <script>
  16. export default {
  17. data() {
  18. return {
  19. data: {
  20. "nodes": [
  21. {
  22. "id": "demo3_node1", "x": 100, "y": 50, "height": 50,
  23. "width": 100, "text": "发起", "className": "node success"
  24. },
  25. {
  26. "id": "demo3_node2", "x": 250, "y": 50, "height": 50,
  27. "width": 100, "text": "过程1", "className": "node success"
  28. },
  29. {
  30. "id": "demo3_node3", "x": 400, "y": 50, "height": 50,
  31. "width": 100, "text": "过程2", "className": "node danger"
  32. },
  33. {
  34. "id": "demo3_node4", "x": 550, "y": 50, "height": 50,
  35. "width": 100, "text": "过程3", "className": "node success"
  36. },
  37. {
  38. "id": "demo3_node5", "x": 550, "y": 150, "height": 50,
  39. "width": 100, "text": "过程4", "className": "node success"
  40. },
  41. {
  42. "id": "demo3_node6", "x": 400, "y": 150, "height": 50,
  43. "width": 100, "text": "过程5", "className": "node warning"
  44. },
  45. {
  46. "id": "demo3_node7", "x": 250, "y": 150, "height": 50,
  47. "width": 100, "text": "过程6", "className": "node success"
  48. },
  49. {
  50. "id": "demo3_node8", "x": 100, "y": 150, "height": 50,
  51. "width": 100, "text": "过程7", "className": "node success"
  52. },
  53. ],
  54. "edges": [
  55. {
  56. "source": "demo3_node1", "sDirection": 'right',
  57. "target": "demo3_node2", "tDirection": 'left', "edgesType": "success"
  58. },
  59. {
  60. "source": "demo3_node2", "sDirection": 'right',
  61. "target": "demo3_node3", "tDirection": 'left', "edgesType": "danger"
  62. },
  63. {
  64. "source": "demo3_node3", "sDirection": 'right',
  65. "target": "demo3_node4", "tDirection": 'left', "edgesType": "success"
  66. },
  67. {
  68. "source": "demo3_node4", "sDirection": 'right',
  69. "target": "demo3_node5", "tDirection": 'right', "edgesType": "success"
  70. },
  71. {
  72. "source": "demo3_node5", "sDirection": 'right',
  73. "target": "demo3_node6", "tDirection": 'right', "edgesType": "warning"
  74. },
  75. {
  76. "source": "demo3_node6", "sDirection": 'right',
  77. "target": "demo3_node7", "tDirection": 'right', "edgesType": "success"
  78. },
  79. {
  80. "source": "demo3_node7", "sDirection": 'right',
  81. "target": "demo3_node8", "tDirection": 'right', "edgesType": "success"
  82. },
  83. ]
  84. }
  85. }
  86. },
  87. mounted() {
  88. this.init()
  89. },
  90. methods: {
  91. init() {
  92. $('#bktopo_demo2 .bktopo_box').bkTopology({
  93. data: this.data, //配置数据源
  94. lineType: [ //配置线条的类型
  95. { type: 'success', lineColor: '#46C37B' },
  96. { type: 'info', lineColor: '#4A9BFF' },
  97. { type: 'warning', lineColor: '#f0a63a' },
  98. { type: 'danger', lineColor: '#c94d3c' },
  99. { type: 'default', lineColor: '#aaa' }
  100. ]
  101. });
  102. }
  103. },
  104. }
  105. </script>
  106. <style scoped>
  107.  
  108. </style>

纵向拓扑

和上面横向一样,需要在 index.html 文件中引用 js 文件。

  1. <template>
  2. <div>
  3. <span>纵向拓扑图</span>
  4. <div class="bktopo-container">
  5. <div class="bktopo_demo" id="bktopo_demo2">
  6. <div class="none node" id="node-templates" data-container="body" data-placement="top" data-html="true"
  7. data-trigger="hover">
  8. <div class="node-container"><span class="node-text"></span></div>
  9. </div>
  10. <div class="bktopo_box" style="height:350px;"></div>
  11. </div>
  12. </div>
  13. </div>
  14. </template>
  15. <script>
  16. export default {
  17. data() {
  18. return {
  19. data: {
  20. "nodes": [
  21. {
  22. "id": "node1", "x": 361, "y": 20, "height": 50, "width": 180,
  23. "text": "浏览器发起'www.qq.com'请求", "className": "node success"
  24. },
  25. {
  26. "id": "node2",
  27. "x": 391, "y": 100, "height": 50, "width": 120, "text": "本地hosts文件解析",
  28. "className": "node success"
  29. },
  30. {
  31. "id": "node3", "x": 301, "y": 200, "height": 50, "width": 100, "text": "客户接入联通网", "className": "node"
  32. },
  33. {
  34. "id": "node4", "x": 400, "y": 200, "height": 50, "width": 100, "text": "客户接入移动网", "className": "node"
  35. },
  36. {
  37. "id": "node5", "x": 499, "y": 200, "height": 50, "width": 100, "text": "客户接入电信网",
  38. "className": "node success", "title": "如果hosts匹配成功则不经过DNS服务器解析。直接使用IP访问"
  39. },
  40. {
  41. "id": "node6", "x": 233, "y": 300, "height": 50, "width": 140, "text": "联通DNS服务器", "className": "node"
  42. },
  43. {
  44. "id": "node7", "x": 372, "y": 300, "height": 50, "width": 140, "text": "移动DNS服务器", "className": "node"
  45. },
  46. {
  47. "id": "node8", "x": 511, "y": 300, "height": 50, "width": 140, "text": "电信DNS服务器",
  48. "className": "node success"
  49. },
  50. {
  51. "id": "node9", "x": 233, "y": 400, "height": 50, "width": 370,
  52. "text": "核心骨干交换网集群", "className": "node success"
  53. },
  54. {
  55. "id": "node19", "x": 343, "y": 500, "height": 50, "width": 150,
  56. "text": "WEb服务器", "className": "node success"
  57. },
  58. ],
  59. "edges": [
  60. { "source": "node1", "sDirection": 'bottom', "target": "node2", "tDirection": 'top', "edgesType": "success" },
  61. { "source": "node2", "sDirection": 'bottom', "target": "node5", "tDirection": 'top', "edgesType": "success" },
  62. { "source": "node3", "sDirection": 'bottom', "target": "node6", "tDirection": 'top', "edgesType": "danger" },
  63. { "source": "node6", "sDirection": 'bottom', "target": "node9", "tDirection": 'left', "edgesType": "danger" },
  64. { "source": "node4", "sDirection": 'bottom', "target": "node7", "tDirection": 'top', "edgesType": "danger" },
  65. { "source": "node5", "sDirection": 'bottom', "target": "node8", "tDirection": 'top', "edgesType": "success" },
  66. { "source": "node7", "sDirection": 'bottom', "target": "node9", "tDirection": 'top', "edgesType": "danger" },
  67. { "source": "node8", "sDirection": 'bottom', "target": "node9", "tDirection": 'right', "edgesType": "danger" },
  68. { "source": "node9", "sDirection": 'bottom', "target": "node19", "tDirection": 'top', "edgesType": "success" }
  69. ]
  70. }
  71. }
  72. },
  73. mounted() {
  74. this.init()
  75. },
  76. methods: {
  77. init() {
  78. $('#bktopo_demo2 .bktopo_box').bkTopology({
  79. data: this.data, //配置数据源
  80. lineType: [ //配置线条的类型
  81. { type: 'success', lineColor: '#46C37B' },
  82. { type: 'info', lineColor: '#4A9BFF' },
  83. { type: 'warning', lineColor: '#f0a63a' },
  84. { type: 'danger', lineColor: '#c94d3c' },
  85. { type: 'default', lineColor: '#aaa' }
  86. ]
  87. });
  88. }
  89. },
  90. }
  91. </script>
  92. <style scoped>
  93.  
  94. </style>

以上就是vue 动态生成拓扑图的示例的详细内容,更多关于vue 生成拓扑图的资料请关注w3xue其它相关文章!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号