精华内容
下载资源
问答
  • 网络拓扑图动态线条实现
  • Java网络拓扑图,控件自定义 (管理),控件属性显示,支持单双箭头。拓扑图编辑管理
  • 主要介绍了vue 集成 vis-network 实现网络拓扑图的方法,本文通过实例代码给大家介绍的非常详细 ,需要的朋友可以参考下
  • vue 拓扑图插件 ?

    2021-07-21 14:41:40
    echarts2的树形图可以实现,但是页面样式不够灵活。... vue 引入qunee_在vue项目中怎么使用qunee拓扑图插件,怎么正确的使用 graphEditor ? 怎么在vue项目中引入qunee并且正确使用呢,,我引用的总是报错,,求帮助
  • vue用vis插件实现网络拓扑

    千次阅读 2020-12-16 11:36:08
    安装引入vis npm安装visnpm install vis 引入visimport { DataSet, Network } from 'vis'; vis使用示例 methods:{ globalTrace () { // create an array with nodes ... {id: 2, label: 'Node 2'},

    安装引入vis

    1. npm安装vis
      npm install vis
      
    2. 引入vis
      import { DataSet, Network } from 'vis';
      

    vis使用示例

    methods:{
       globalTrace () {
          // create an array with nodes
          var nodes = new DataSet([
            {id: 1, label: 'Node 1'},
            {id: 2, label: 'Node 2'},
            {id: 3, label: 'Node 3'},
            {id: 4, label: 'Node 4'},
            {id: 5, label: 'Node 5'}
          ]);
          // create an array with edges
          var edges = new DataSet([
            {from: 1, to: 3},
            {from: 1, to: 2},
            {from: 2, to: 4},
            {from: 2, to: 5}
          ]);
          // create a network
          var container = document.querySelector('#global_trace_content');
          // provide the data in the vis format
          var data = {
              nodes: nodes,
              edges: edges
          };
          var options = {
          	//节点样式
            nodes: {
              shape: "box",//设置节点node样式为矩形
              fixed:true,//节点node固定不可移动
              font: {
    			color: "white", //字体的颜色
    			size: 30 //显示字体大小
    		  },
              scaling: {
    			min: 16,
    			max: 32 //缩放效果比例
    		  },
            },
            //连接线的样式
            edges: {
              color: {
                color: "rgb(97, 168, 224)",
                highlight: "rgb(97, 168, 224)",
                hover: "green",
                inherit: "from",
                opacity: 1.0
              },
              font: { 
                align: "top",//连接线文字位置
              },
              smooth: true, //是否显示方向箭头
              arrows: {to : true },//箭头指向from节点
            },
            layout: {
            //以分层方式定位节点
              hierarchical: {
                direction: "LR",//分层排序方向
                sortMethod: "directed",//分层排序方法
                levelSeparation:400//不同级别之间的距离
              },
            },
            interaction: {
              navigationButtons: true,
              // hover: true, //鼠标移过后加粗该节点和连接线
              selectConnectedEdges: false, //选择节点后是否显示连接线
            },
            
          };
          // initialize your network!
          this.network = new Network(container, data, options);
          this.network.on("click",e=> this.showDetail(e));//单击事件
          this.network.on("doubleClick",e=> this.enterService(e))//双击事件
        },
    },
    mounted(){
    	this.globalTrace()
    }
    

    vis官方文档

    使用文档
    官方示例

    展开全文
  • vue 动态生成拓扑

    千次阅读 2020-11-11 13:39:06
    vue 动态生成拓扑图 横向拓扑 在 index.html 文件中引入文件。 <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/css/bootstrap.min.css" rel="stylesheet"> <link ...

    vue 动态生成拓扑图

    横向拓扑

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

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

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

    <template>
      <div>
        <span>S型拓扑图</span>
        <div class="bktopo-container">
          <div class="bktopo_demo" id="bktopo_demo2">
            <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:350px;"></div>
          </div>
        </div>
      </div>
    </template>
    <script>
      export default {
        data() {
          return {
            data: {
              "nodes": [
                { "id": "root", "x": 10, "y": 152, "height": 50, "width": 120, "text": "卡机健康度", "className": "info" },
                { "id": "child1", "x": 200, "y": 30, "height": 50, "width": 120, "text": "进程CPU监控", "className": "info" },
                { "id": "child2", "x": 200, "y": 90, "height": 50, "width": 120, "text": "网管网络故障监控", "className": "info" },
                { "id": "child3", "x": 200, "y": 150, "height": 50, "width": 120, "text": "进程内在泄露监控", "className": "info" },
                { "id": "child4", "x": 200, "y": 210, "height": 50, "width": 120, "text": "进程存活监控", "className": "info" },
                { "id": "child5", "x": 200, "y": 270, "height": 50, "width": 120, "text": "用户内在使用监控", "className": "info" },
                { "id": "child1_1", "x": 380, "y": 30, "height": 50, "width": 120, "text": "监控正常无触发自愈", "className": "success" },
                { "id": "child2_1", "x": 380, "y": 90, "height": 50, "width": 120, "text": "监控正常无触发自愈", "className": "success" },
                { "id": "child3_1", "x": 380, "y": 150, "height": 50, "width": 120, "text": "发现异常触发自愈", "className": "danger" },
                { "id": "child3_2", "x": 560, "y": 150, "height": 50, "width": 120, "text": "重启进程正常", "className": "success" },
                { "id": "child4_1", "x": 380, "y": 210, "height": 50, "width": 120, "text": "发现异常触发自愈", "className": "danger" },
                { "id": "child4_2", "x": 560, "y": 210, "height": 50, "width": 120, "text": "重启进程正常", "className": "success" },
                { "id": "child5_1", "x": 380, "y": 270, "height": 50, "width": 120, "text": "发现异常触发自愈", "className": "success" },
              ],
              "edges": [
                { "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" },
                { "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" }
              ]
            }
          }
        },
        mounted() {
          this.init()
        },
        methods: {
          init() {
            $('#bktopo_demo2 .bktopo_box').bkTopology({
              data: this.data, //配置数据源
              lineType: [ //配置线条的类型
                { type: 'success', lineColor: '#46C37B' },
                { type: 'info', lineColor: '#4A9BFF' },
                { type: 'warning', lineColor: '#f0a63a' },
                { type: 'danger', lineColor: '#c94d3c' },
                { type: 'default', lineColor: '#aaa' }
              ]
            });
          }
        },
      }
    </script>
    <style scoped>
    
    </style>
    

    S型拓扑

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

    <template>
      <div>
        <span>横向拓扑图</span>
        <div class="bktopo-container">
          <div class="bktopo_demo" id="bktopo_demo2">
            <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:350px;"></div>
          </div>
        </div>
      </div>
    </template>
    <script>
      export default {
        data() {
          return {
            data: {
              "nodes": [
                {
                  "id": "demo3_node1", "x": 100, "y": 50, "height": 50,
                  "width": 100, "text": "发起", "className": "node success"
                },
                {
                  "id": "demo3_node2", "x": 250, "y": 50, "height": 50,
                  "width": 100, "text": "过程1", "className": "node success"
                },
                {
                  "id": "demo3_node3", "x": 400, "y": 50, "height": 50,
                  "width": 100, "text": "过程2", "className": "node danger"
                },
                {
                  "id": "demo3_node4", "x": 550, "y": 50, "height": 50,
                  "width": 100, "text": "过程3", "className": "node success"
                },
                {
                  "id": "demo3_node5", "x": 550, "y": 150, "height": 50,
                  "width": 100, "text": "过程4", "className": "node success"
                },
                {
                  "id": "demo3_node6", "x": 400, "y": 150, "height": 50,
                  "width": 100, "text": "过程5", "className": "node warning"
                },
                {
                  "id": "demo3_node7", "x": 250, "y": 150, "height": 50,
                  "width": 100, "text": "过程6", "className": "node success"
                },
                {
                  "id": "demo3_node8", "x": 100, "y": 150, "height": 50,
                  "width": 100, "text": "过程7", "className": "node success"
                },
              ],
              "edges": [
                {
                  "source": "demo3_node1", "sDirection": 'right',
                  "target": "demo3_node2", "tDirection": 'left', "edgesType": "success"
                },
                {
                  "source": "demo3_node2", "sDirection": 'right',
                  "target": "demo3_node3", "tDirection": 'left', "edgesType": "danger"
                },
                {
                  "source": "demo3_node3", "sDirection": 'right',
                  "target": "demo3_node4", "tDirection": 'left', "edgesType": "success"
                },
                {
                  "source": "demo3_node4", "sDirection": 'right',
                  "target": "demo3_node5", "tDirection": 'right', "edgesType": "success"
                },
                {
                  "source": "demo3_node5", "sDirection": 'right',
                  "target": "demo3_node6", "tDirection": 'right', "edgesType": "warning"
                },
                {
                  "source": "demo3_node6", "sDirection": 'right',
                  "target": "demo3_node7", "tDirection": 'right', "edgesType": "success"
                },
                {
                  "source": "demo3_node7", "sDirection": 'right',
                  "target": "demo3_node8", "tDirection": 'right', "edgesType": "success"
                },
              ]
            }
          }
        },
        mounted() {
          this.init()
        },
        methods: {
          init() {
            $('#bktopo_demo2 .bktopo_box').bkTopology({
              data: this.data, //配置数据源
              lineType: [ //配置线条的类型
                { type: 'success', lineColor: '#46C37B' },
                { type: 'info', lineColor: '#4A9BFF' },
                { type: 'warning', lineColor: '#f0a63a' },
                { type: 'danger', lineColor: '#c94d3c' },
                { type: 'default', lineColor: '#aaa' }
              ]
            });
          }
        },
      }
    </script>
    <style scoped>
    
    </style>
    

    纵向拓扑

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

    <template>
      <div>
        <span>纵向拓扑图</span>
        <div class="bktopo-container">
          <div class="bktopo_demo" id="bktopo_demo2">
            <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:350px;"></div>
          </div>
        </div>
      </div>
    </template>
    <script>
      export default {
        data() {
          return {
            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" }
              ]
            }
          }
        },
        mounted() {
          this.init()
        },
        methods: {
          init() {
            $('#bktopo_demo2 .bktopo_box').bkTopology({
              data: this.data, //配置数据源
              lineType: [ //配置线条的类型
                { type: 'success', lineColor: '#46C37B' },
                { type: 'info', lineColor: '#4A9BFF' },
                { type: 'warning', lineColor: '#f0a63a' },
                { type: 'danger', lineColor: '#c94d3c' },
                { type: 'default', lineColor: '#aaa' }
              ]
            });
          }
        },
      }
    </script>
    <style scoped>
    
    </style>
    

    在这里插入图片描述

    展开全文
  • vue 实现动态拓扑

    千次阅读 2020-12-29 11:41:51
    vue实现动态加载拓扑图,有待优化。 S型拓扑图 切换

     vue实现动态加载拓扑图,有待优化。

      <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
      <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>
    <template>
      <div>
        <span>S型拓扑图</span>
        <button @click="change">切换</button>
        <div class="bktopo-container">
          <div class="bktopo_demo" id="bktopo_demo2">
            <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:350px;"></div>
          </div>
        </div>
      </div>
    </template>
    <script>
      export default {
        data() {
    
          return {
            list:[
                {id:1,pid:0,name:"卡机健康度",level:1,},
                {id:2,pid:1,name:"进程CPU监控",level:2,},
                {id:3,pid:1,name:"网管网络故障监控",level:2,},
                {id:4,pid:1,name:"进程内在泄露监控",level:2,},
                {id:5,pid:1,name:"进程存活监控",level:2,},
                {id:6,pid:1,name:"用户内在使用监控",level:2,},
            ],
            result:[],
            nodeList:{
                "nodes": [],
                "edges":[]
            },
            data: {
              "nodes": [
                { "id": "root", "x": 20, "y": 150, "height": 50, "width": 120, "text": "卡机健康度", "className": "info" },
                { "id": "child1", "x": 200, "y": 30, "height": 50, "width": 120, "text": "进程CPU监控", "className": "info" },
                { "id": "child2", "x": 200, "y": 90, "height": 50, "width": 120, "text": "网管网络故障监控", "className": "info" },
                { "id": "child3", "x": 200, "y": 150, "height": 50, "width": 120, "text": "进程内在泄露监控", "className": "info" },
                { "id": "child4", "x": 200, "y": 210, "height": 50, "width": 120, "text": "进程存活监控", "className": "info" },
                { "id": "child5", "x": 200, "y": 270, "height": 50, "width": 120, "text": "用户内在使用监控", "className": "info" },
                { "id": "child1_1", "x": 380, "y": 30, "height": 50, "width": 120, "text": "监控正常无触发自愈", "className": "success" },
                { "id": "child2_1", "x": 380, "y": 90, "height": 50, "width": 120, "text": "监控正常无触发自愈", "className": "success" },
                { "id": "child3_1", "x": 380, "y": 150, "height": 50, "width": 120, "text": "发现异常触发自愈", "className": "danger" },
                { "id": "child3_2", "x": 560, "y": 150, "height": 50, "width": 120, "text": "重启进程正常", "className": "success" },
                { "id": "child4_1", "x": 380, "y": 210, "height": 50, "width": 120, "text": "发现异常触发自愈", "className": "danger" },
                { "id": "child4_2", "x": 560, "y": 210, "height": 50, "width": 120, "text": "重启进程正常", "className": "success" },
                { "id": "child5_1", "x": 380, "y": 270, "height": 50, "width": 120, "text": "发现异常触发自愈", "className": "success" },
              ],
              "edges": [
                { "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" },
                { "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" }
              ]
            },
            yvalue:30
          }
        },
        mounted() {
          this.init()
        },
        methods: {
          init() {
            this.paresTreeJson(this.list,0);
            this.result.map(item => {
               if(item.pid==0){
                   this.nodeList.nodes.push({ "id": "root", "x": 20, "y": 150, "height": 50, "width": 120, "text": item.name, "className": "info" },)
               }else{
                   this.nodeList.nodes.push({ "id": "child"+item.id, "x": 20 +(item.level-1)*180, "y": this.yvalue, "height": 50, "width": 120, "text": item.name, "className": "info" },)
                   this.yvalue=this.yvalue+60
               }
            })
            $('#bktopo_demo2 .bktopo_box').bkTopology({
              data: this.nodeList, //配置数据源
              lineType: [ //配置线条的类型
                { type: 'success', lineColor: '#46C37B' },
                { type: 'info', lineColor: '#4A9BFF' },
                { type: 'warning', lineColor: '#f0a63a' },
                { type: 'danger', lineColor: '#c94d3c' },
                { type: 'default', lineColor: '#aaa' }
              ]
            });
          },
        //遍历出了所有节点
         paresTreeJson(array,pid){
             for(let index=0;index<array.length;index++){
                const element=array[index];
                 if(element.pid==pid){
                 this.paresTreeJson(array,element.id);
                let obj={
                    id:element.id,
                    name:element.name,
                    level:element.level,
                    pid:element.pid
                }
                this.result.push(obj);
                this.result.reverse();
                if(element.pid==1){
                    let edges= { "source": "root", "sDirection": 'right', "target": "child"+element.id, "tDirection": 'left', "edgesType": "info" }
                    this.nodeList.edges.push(edges);
                }else{
                    let edges= { "source": "child"+element.pid, "sDirection": 'right', "target": "child"+element.id, "tDirection": 'left', "edgesType": "info" }
                    this.nodeList.edges.push(edges);
                }
              }
             }
         },
         change(){
            this.list=[
                {id:1,pid:0,name:"卡机健康度",level:1,},
                {id:2,pid:1,name:"进程CPU监控",level:2,},
                {id:3,pid:1,name:"网管网络故障监控",level:2,},
                {id:4,pid:1,name:"进程内在泄露监控",level:2,},
            ]
            this.result=[];
            this.nodeList.nodes=[];
            this.nodeList.edges=[];
            this.yvalue=30;
            $('#bktopo_demo2 .bktopo_box').remove();
            $('#bktopo_demo2').append(" <div class='bktopo_box' style='height:350px;'></div>")
            this.init();
         }
        },
      }
    </script>
    <style scoped>
    
    </style>

     

    展开全文
  • 1.npm安装vis.js npm install vis 2.在页面引入vis的DataSet import { DataSet, Network } from "vis";

    自己学习所写,不是很标准,但是功能已经实现了,记录一下!

    1.npm安装vis.js

    npm install vis

    2.在页面引入vis的DataSet和Network

    import { DataSet, Network } from "vis";

    3.在html中定义一个容器

    <div id="mynetwork"></div>
    
    //css样式可自定义
    <style>
     #mynetwork {
        width: 1000px;
        height: 500px;
        margin: 0 auto;
        border: 1px solid lightgray;
        canvas {
          cursor: pointer;
        }
      }
    </style>

      4.完整代码

    <template>
        <div class="app">
            <div id="mynetwork"></div>
        </div>
    </template>
    
    <script>
    import { DataSet, Network } from "vis";
    import { ElMessage } from "element-plus";
    
    export default{
        setup(){
            const init = () => {
              //定义需要生成的节点
              var allnodes = [
                {
                  id: 1,
                  label: "tnt",
                  pid: 0,
                  subids: [2, 9]
                },
                { id: 2, label: "刘耀文", pid: 1, subids: [3, 5] },
                {
                  id: 3,
                  label: "文文",
                  pid: 2,
                  subids: [4]
                },
                { id: 4, label: "宋亚轩", pid: 3 },
                {
                  id: 5,
                  label: "轩轩",
                  pid: 2,
                  subids: [7, 6]
                },
                { id: 6, label: "狼崽", pid: 5 },
                {
                  id: 7,
                  label: "狼王",
                  pid: 5,
                  subids: [8]
                },
                { id: 8, label: "小刘", pid: 7 },
                {
                  id: 9,
                  label: "吻文",
                  pid: 1,
                  subids: [10, 11]
                },
                { id: 10, label: "tyt", pid: 9 },
                {
                  id: 11,
                  label: "时代少年团",
                  pid: 9,
                  subids: [12, 13]
                },
                { id: 12, label: "长江国际", pid: 11 },
                {
                  id: 13,
                  label: "丁程鑫",
                  pid: 11,
                  subids: [14]
                },
                { id: 14, label: "18楼", pid: 13 }
              ];
              //定义节点连接线
              var alledges = [
                { id: "1_2", from: 1, to: 2 },
                { id: "2_3", from: 2, to: 3 },
                { id: "2_5", from: 2, to: 5 },
                { id: "3_4", from: 3, to: 4 },
                { id: "5_6", from: 5, to: 6 },
                { id: "5_7", from: 5, to: 7 },
                { id: "7_8", from: 7, to: 8 },
                { id: "1_9", from: 1, to: 9 },
                { id: "9_10", from: 9, to: 10 },
                { id: "9_11", from: 9, to: 11 },
                { id: "11_12", from: 11, to: 12 },
                { id: "11_13", from: 11, to: 13 },
                { id: "13_14", from: 13, to: 14 }
              ];
              // 创建节点对象
              var nodes = new DataSet(allnodes);
              // 创建连线对象
              var edges = new DataSet(alledges);
              // 创建一个网络拓扑图
              var container = document.getElementById("mynetwork");
              var data = { nodes: nodes, edges: edges };
              var options = {
                interaction: {
                  hover: true,
                  hoverConnectedEdges: true
                },
                // 节点样式
                nodes: {
                  font: {
                    color: "white", //字体的颜色
                    size: 16 //显示字体大小
                  },
                  shape: "image",
                  image: require("@/assets/images/icon.png")
                },
                //连接线的样式
                edges: {
                  color: {
                    color: "#43CEB1",
                    highlight: "#43CEB1",
                    hover: "green",
                    inherit: "from",
                    opacity: 1.0
                  },
                  font: {
                    align: "top" //连接线文字位置
                  }
                }
              };
              var network = new Network(container, data, options);
    
              var nodes_data = network.body.data.nodes._data;
              network.on("doubleClick", function(params) {
                //双击事件
                if (params.nodes.length != 0) {
                  //确定为节点双击事件
                  var click_node_id = params.nodes[0];
                  remove_all_sub_nodes(click_node_id);
                }
              });
    
              //删除下级所有节点
              function remove_all_sub_nodes(node_id) {
                var sub_nodes = get_directly_sub_nodes(node_id);
                if (sub_nodes.length == 0) {
                  //当前点击的为叶子节点
                  //判断是否有下级节点
                  if (typeof allnodes[node_id - 1]["subids"] != "undefined") {
                    $.each(allnodes[node_id - 1]["subids"], function(index, item) {
                      nodes.add(allnodes[item - 1]);
                      edges.add({ id: node_id + "_" + item, from: node_id, to: item });
                    });
                  } else {
                    ElMessage("当前为叶子节点");
                  }
                } else {
                  $.each(sub_nodes, function(index, item) {
                    var sub_sub_nodes = get_directly_sub_nodes(item);
                    if (sub_sub_nodes.length == 0) {
                      nodes.remove({ id: item });
                      edges.remove({ id: node_id + "_" + item });
                    } else {
                      remove_all_sub_nodes(item);
                    }
                    nodes.remove({ id: item });
                    edges.remove({ id: node_id + "_" + item });
                  });
                }
              }
    
              //获取某节点直属下级节点
              function get_directly_sub_nodes(node_id) {
                var return_nodes = [];
                var connectedNodes = network.getConnectedNodes(node_id); //获取所有连接节点
                $.each(connectedNodes, function(index, item) {
                  if (item != allnodes[node_id - 1]["pid"]) {
                    //当前节点的父节点 ,不操作
                    return_nodes.push(item);
                  }
                });
                return return_nodes;
              }
            }
        };
        return {
          init
        };
        mounted() {
            this.init();
        }
    }
    </script>

    参考:https://blog.csdn.net/qq_36509946/article/details/108533115

    展开全文
  • jtopo 网络拓扑

    2018-01-12 16:09:29
    最近要做网络拓扑图,就在网上找了一个,写的非常不错的,功能强大,正在研究,有需要的小伙伴可以下载来参考.
  • vue实现antv g6拓扑

    千次阅读 2020-11-09 20:12:19
    1.安装antv g6 执行命令即可 npm install @antv/g6 在页面中引入 import G6 from '@antv/g6' 界面 <template> <div id="container"></div> </template>... export default
  • vue+d3实现拓扑图,在里面的包含详情,节点的数据,线的数据等的
  • vue中echarts书写拓扑

    2021-01-26 10:41:56
    最近在做拓扑图找了下前端常用的组件:jTopo(感觉有点老)、Vis.js(文档是英文的,不太容易读)、D3(功能强大需要自己实现)、ECharts(同样需要自己实现) 由于图形上的交互并没有需要特别多所以用了echart - ...
  • 本demo利用jTopo技术,巧妙地将网络中的计算机等设备连接起来形成拓扑图。拓扑图给出网络服务器、工作站的网络配置和相互间的连接,非常试用于想要展示网络物理结构的项目使用
  • 注意:vue+D3里面的当数据更新的时候,需要先将之前的数据绘画的点清除 (选择所有的点清除,才可以重新绘画),否则将会重新绘画两次,因为...找了很多资料对vue+D3实现的这些拓扑图的代码比较, getLinksData:f...
  • 最近一直在学习d3.js,大家都知道d3.js是一个非常不错的数据可视化库,我们可以用它来做一些比较酷的东西,比如可以来显示一些简单的网络拓扑图,这篇文中就通过实例代码给大家介绍了如何利用d3.js实现简单的网络...
  • 基于vue2.0+svg 拓扑组件

    千次阅读 2017-11-28 03:05:56
    2016年9月接到html5替换flash的拓扑图任务,历时3月整,使用jquery+SVG技术完成第一款拓扑图组件,涵盖拖拽、缩放、删除、选中区域、连线、导入、保存图片、多种布局显示等功能,但当node数高达百位时,因dom的操作...
  • VUE和Antv G6实现在线拓扑图编辑

    万次阅读 2019-04-04 14:43:46
    VUE和Antv G6实现在线拓扑图编辑 效果图如下: 我使用的是G6 2.0,也可以使用 G6 3.0,3.0的拓扑图单独作为一个编辑器使用,使用更加方便。不过2.0的比较简单,容易上手。 1.首先在Antv官网上找到蚂蚁Antv G6插件,...
  • jtopo网络拓扑

    2018-08-01 10:30:30
    在公司的需求下,研究了一下jtopo,做了一个拓扑图,内部封装了设备离线触发方法
  • vue中使用echarts拓扑图(力导向图)

    千次阅读 2021-01-06 14:19:47
    chartGraph.setOption({ tooltip: { formatter: function (params) { return params.data.type } }, animationDurationUpdate: 1500, animationEasingUpdate: '.
  • vue.js生成横向拓扑

    千次阅读 2019-11-01 13:38:00
    {"id": "child2", "x": 200, "y": 90, "height": 50, "width": 120, "text": "网管网络故障监控", "className": "info"}, {"id": "child3", "x": 200, "y": 150, "height": 50, "width": 120, "text": "进程内在...
  • vue网络加载组件 vue-d3-网络 (vue-d3-network) Vue component to graph networks using d3-force 使用d3-force绘制网络图的Vue组件 现场演示 (Live Demo) https://emiliorizzo.github.io/vue-d3-network/ ...
  • d3.js-简单网络拓扑图实现

    千次阅读 2017-03-17 22:49:46
    d3.简要拓扑图实现
  • 使用jTopo画网络拓扑

    千次阅读 2017-08-26 17:02:14
    今天接到一个任务要求用js动态生成网络拓扑图。在网上搜索了一下发下了这个插件jTopo。可以用于画网络拓扑图,而且封装的比较好。一下午就完成了任务。 中间碰到了一个小问题:图片的标题一直不显示。后来发现是...
  • 电信网结构(telecommunication network structure)是指电信网各种网路单元按...常见的网络拓扑结构有星型结构、总线结构、环形结构、树形结构、网状结构、混合型拓扑以及蜂窝拓扑结构等,本文的例子主要描绘的是总线
  • d3之网络拓扑图进阶

    千次阅读 热门讨论 2018-03-14 11:04:27
    重点:理解力布局与数据、图形的关系,力布局最初用来实现力导向图,它是基于基本苇尔莱积分法对粒子运动的模拟,D3实现了一种数值方法,这种数值方法在粒子级别模拟了简单约束下的牛顿运动方程,其约束条件表示了...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 482
精华内容 192
关键字:

vue网络拓扑

vue 订阅