VUE集成vis拓扑图_vue绘制电路图-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_40394560/article/details/128954332

本文介绍如何在Vue.js项目中使用Vis.js库来创建和展示拓扑图，包括安装过程、基本用法和实例演示，帮助前端开发者实现动态、交互式的网络拓扑布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div>
    <el-card class='box-card'>
      <div slot='header' class='clearfix'>
        <div>
          <el-page-header @back='goBack' content='详情'>
          </el-page-header>
        </div>
      </div>
      
      <!--  内容    -->
      <div id='mynetwork'></div>
      
      <!--菜单操作-->
      <div id='menuOperation' class='menu' style='display: none;'>
        <ul>
          <li><span class='glyphicon glyphicon-off' aria-hidden='true'></span> 下线</li>
          <li><span class='glyphicon glyphicon-road' aria-hidden='true'></span> 通行</li>
        </ul>
      </div>
      
      <!--节点悬停-->
      <div class='menu' id='divHoverNode' style='display: none;'>
      </div>
      
      <div class='menu' id='menu' v-show='testVisible' ref='testSapn'
           :style="{top:offsetTop+'px',left:offsetLeft+'px'}">
        ssssssssssss
      </div>
    
    </el-card>
    
    
    <el-dialog
      title='提示'
      :visible.sync='dialogVisible'
      width='30%'
      :before-close='handleClose'>
      <span>这是一段信息</span>
      <span slot='footer' class='dialog-footer'>
    <el-button @click='dialogVisible = false'>取 消</el-button>
    <el-button type='primary' @click='dialogVisible = false'>确 定</el-button>
  </span>
    </el-dialog>
  
  
  </div>
</template>

<script>
import {
    appTopologyByAppCode } from '_api/appManager';
import {
    DataSet, Network } from 'vis';
// 创建节点数据数组
let allNodes = [
  {
   
    id: 1,
    name: '外部网络',
    type: 'Internet',
    ip: '1.1.1.1',
    port: '未知',
    pid: 0,
    subids: [2],
    image: '../../../../assets/images/doing.png'
  },
  {
   
    id: 2,
    name: '交换机',
    type: 'switch',
    ip: '192.168.30.125',
    mac: '48:de:3d:e2:49:a8',
    model: 'H3C',
    uptime: '2020-09-03 10:50:50',
    port: '22',
    pid: 1,
    subids: [3, 4, 5, 6],
    image: '../../../../assets/images/doing.png'
  },
  {
   
    id: 3,
    name: '交换机',
    type: 'switch',
    ip: '192.168.1.8',
    mac: 'cd:bd:3d:e2:55:55',
    model: 'pf',
    uptime: '2020-09-03 10:50:50',
    port: '33',
    pid: 2,
    subids: [7, 8],
    image: '../../../../assets/images/doing.png'
  },
  {
   
    id: 4,
    name: '计算机',
    type: 'computer',
    ip: '192.168.1.8',
    mac: