How to generate horizontal Topology Diagram by vue.js

Editor to share with you how to generate a horizontal topology map of vue.js, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!

1. Front-end code new Vue ({el:'# app', data: {}) Mounted () {this.init ()} Methods: {init () {axios.get (site_url + "topo/") .then (res = > {if (res.data.result) {$('# bktopo_demo2 .bktopo _ box') .bkTopology ({data: res.data.data) / / configure the data source lineType: [/ / configure the type of lines {type: 'success', lineColor:' # 46C37B'}, {type: 'info', lineColor:' # 4A9BFF'}, {type: 'warning' LineColor:'# f0a63a'}, {type: 'danger', lineColor:' # c94d3c'}, {type: 'default', lineColor:' # aaa'}]}) } else {this.$message.error ('failed to get topology data');}, 'json');}}) 2. Backend code def topo (request): data = {"nodes": [{"id": "root", "x": 10, "y": 152,50 "height": 50, "width": 120," text ":" card machine health "," className ":" info "}, {" id ":" child1 "," x ": 200," y": 30, "height": 50 "width": 120,120, "text": "process CPU Monitoring", "className": "info"}, {"id": "child2", "x": 200," y ": 90," height ": 50," width ": 120,120," text ":" Network Management Network Fault Monitoring "," className ":" info "}, {" id ":" child3 "," x ": 200 "y": 150,150,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120, {"id": "child5", "x": 200,270, "height": 50, "width": 120," text ":" user internal use monitoring "," className ":" info "}, {" id ":" child1_1 "," x ": 380," y": 30, "height": 50, "width": 120 "text": "Monitoring normal non-trigger self-recovery", "className": "success"}, {"id": "child2_1", "x": 380," y ": 90," height ": 50," width ": 120," text": "Monitoring normal non-trigger self-recovery", "className": "success"}, {"id": "child3_1", "x": 380 "y": 150,150,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120, {"id": "child4_1", "x": 380,210, "height": 50, "width": 120," text ":" abnormal trigger self-healing "," className ":" danger "}, {" id ":" child4_2 "," x ": 560,210," height ": 50," width ": 120 "text": "restart process is normal", "className": "success"}, {"id": "child5_1", "x": 380,270,270,50,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120, "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"}, {"source": "child1", "sDirection":' right', "target": "child1_1", "tDirection": 'left', "edgesType": "success"}, {"source": "child2", "sDirection":' right', "target": "child2_1", "tDirection": 'left', "edgesType": "success"} {"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"}]} return JsonResponse ({"result": True, "data": data})

Display effect

These are all the contents of the article "how to generate a horizontal Topology Diagram in vue.js". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!