vue项目用antv/g6做网络拓扑图

最新推荐文章于 2024-06-20 22:10:34 发布
最新推荐文章于 2024-06-20 22:10:34 发布
阅读量5.1k 收藏 14
点赞数
分类专栏： antv/g6 网络拓扑图 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45714257/article/details/122863808
版权
本文介绍了如何在vue.js项目中利用antv/g6库来实现网络拓扑图的创建。作者分享了其在公司项目中的实践经验，提供了相关视频作为参考，旨在促进前端开发者之间的学习交流。
摘要由CSDN通过智能技术生成

前言：
本人公司要求我制作网络拓扑图编辑工具，现在阶段功能研究制作完成，我发布的内容仅供互相学习参考，一切产生的后果与我无关。本人用的是vue

先上视频
请添加图片描述

<template>
  <div class="sketchBox">
    <!-- 鼠标移入时展示 -->
    <div class="contextmenuBoxHover" ref="mouseHover">
      <div class="mgt-5">
        <span class="mgl-5 mgr-5">设备编号:</span>
        <span v-html="equipMentObject.relevanceEquipId"></span>
      </div>
      <div>
        <span class="mgl-5 mgr-5">设备名称:</span>
        <span v-html="equipMentObject.relevanceEquipName"></span>
      </div>
      <div>
        <span class="mgl-5 mgr-5">设备类型:</span>
        <span v-html="equipMentObject.relevanceEquipType"></span>
      </div>
    </div>
    <!-- 右键节点 -->
    <div :class="isSketchEdit?'contextmenuBoxNode':'contextmenuBoxNodeNoEdit'" ref="contextmenuBox">
      <div class="contextmenuBox_li mousehand" v-if="isSketchEdit">
        <i class="el-icon-top mgl_10 mgr_10"></i>
        <span>层级前置</span>
      </div>
      <div class="contextmenuBox_li mousehand" v-if="isSketchEdit">
        <i class="el-icon-bottom mgl_10 mgr_10"></i>
        <span>层级后置</span>
      </div>
      <div class="contextmenuBox_li mousehand">
        <i class="el-icon-search mgl_10 mgr_10"></i>
        <span>查看设备</span>
      </div>
      <div class="contextmenuBox_li mousehand" v-if="isSketchEdit">
        <i class="el-icon-edit mgl_10 mgr_10"></i>
        <span>编辑节点</span>
      </div>
      <div class="contextmenuBox_li mousehand" v-if="isSketchEdit">
        <i class="el-icon-connection mgl_10 mgr_10"></i>
        <span>关联绑定</span>
      </div>
      <div class="contextmenuBox_li mousehand" v-if="isSketchEdit">
        <i class="el-icon-delete mgl_10 mgr_10"></i>
        <span>删除节点</span>
      </div>
    </div>
    <!-- 右键线段 -->
    <div class="contextmenuBoxLine" ref="contextmenuLineBox">
      <div class="contextmenuBox_li mousehand">
        <i class="el-icon-edit mgl_10 mgr_10"></i>
        <span>编辑连线</span>
      </div>
      <div class="contextmenuBox_li mousehand">
        <i class="el-icon-delete mgl_10 mgr_10"></i>
        <span>删除线段</span>
      </div>
    </div>
    <!-- 全局右键节点 -->
    <div class="contextmenuBoxNodeAll" ref="contextmenuBoxAll">
      <div class="contextmenuBox_li" @click="goBack1" :class="undoList.length>0?'mousehand':'no_cursor'">
        <i class="el-icon-back mgl_10 mgr_10"></i>
        <span>回退</span>
      </div>
      <div class="contextmenuBox_li" @click="goBack2" :class="redoList.length>0?'mousehand':'no_cursor'">
        <i class="el-icon-right mgl_10 mgr_10"></i>
        <span>返回</span>
      </div>
      <div class="contextmenuBox_li mousehand" @click="goDelete">
        <i class="el-icon-document-delete mgl_10 mgr_10"></i>
        <span>清空</span>
      </div>
      <div class="contextmenuBox_li mousehand" @click="goDocument">
        <i class="el-icon-document mgl_10 mgr_10"></i>
        <span>查看JSON</span>
      </div>
      <div class="contextmenuBox_li mousehand" @click="goRefresh">
        <i class="el-icon-refresh mgl_10 mgr_10"></i>
        <span>居中显示</span>
      </div>
      <div class="contextmenuBox_li mousehand" @click="goDeletePage">
        <i class="el-icon-delete mgl_10 mgr_10"></i>
        <span>删除</span>
      </div>
      <div class="contextmenuBox_li mousehand" @click="goBack">
        <i class="el-icon-switch-button mgl_10 mgr_10"></i>
        <span>关闭</span>
      </div>
      <div class="contextmenuBox_li mousehand" @click="goSaveSketch">
        <i class="el-icon-success mgl_10 mgr_10"></i>
        <span>保存</span>
      </div>
    </div>
    <!-- 编辑线段描述 -->
    <div class="editorLineBox" ref="editorLineBoxRef">
      <el-input v-model="sketchObject.label" size="mini" clearable style="width:200px;">
        <el-button style="width:50px;padding:0px;" slot="append" @click="setEditorLineText">确认</el-button>
      </el-input>
    </div>
    <div id="mountNode" ref="mountNode"></div>
    <div class="sketchBoxMove" v-if="!isSketchEdit">
      <div class="df-c mgt-10">
        <div class="df-a sketchHeight">
          <div class="mgl_10 sketchBoxTitle">拓扑名称：</div>
          <el-input v-model="topologyListObject.topologyName" size="mini" disabled clearable style="width:120px;"></el-input>
        </div>
        <div class="df-a sketchHeight">
          <div class="mgl_10 sketchBoxTitle">拓扑类型：</div>
          <el-select v-model="topologyListObject.topologyType" disabled placeholder="请选择拓扑图类型" size="mini" class="mgr-10" style="width:120px;" clearable>
            <el-option v-for="item in topologyTypeList" :key="item.id" :label="item.label" :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="df-a sketchHeight">
          <div class="mgl_10 sketchBoxTitle">显示网格：</div>
          <el-switch v-model="gridShow" @change='switchChange' active-color="#01bbd2" inactive-color="#0091a6">
          </el-switch>
        </div>
        <div class="df-a sketchHeight">
          <div class="mgl_10 sketchBoxTitle">查看JSON：</div>
          <el-button type="primary" circle size="mini" icon="el-icon-document" @click="goDocument"></el-button>
        </div>
        <div class="df-aj btnBoxMoveCss">
          <el-button type="primary" size="mini" @click="goBackNoEdit">关闭</el-button>
        </div>
      </div>
    </div>
    <!-- 左侧 -->
    <div class="monitoringLeft" v-if="isSketchEdit">
      <!-- <div class="df-c show_right2" :style="leftDrawer ? 'left:100%;' : 'left:0%;'">
        <div class="show_left df-a" @click="showLeft">
          <i :class="leftDrawer ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"></i>
        </div>
      </div> -->
      <transition name="fadeleft">
        <div v-show="leftDrawer" class="monitoringRightFade addStyle">
          <sketch-collapse @setShape='setShapeCollapse'></sketch-collapse>
        </div>
      </transition>
    </div>
    <!-- 右侧 -->
    <div class="monitoringRight" v-if="rightDrawer">
      <div class="df-c show_right2" :style="rightDrawer ? 'right:105%;' : 'right:4.5%;'">
      </div>
      <transition name="faderight">
        <div v-if="rightDrawer" class="monitoringRightFade">
          <div class="show_rightClose df-aj mousehand" @click="deleteClose">
            <i class="el-icon-close sketchCloseIcon"></i>
          </div>
          <el-form aria-label="100px" class="mgl_20 mgt_30 sketchPageForm" style="position: relative;">
            <el-form-item label="节点名称:" style="width:270px;">
              <el-input v-model="sketchObject.label" @change='sketchObjectChange' clearable class="input-with-select" size="mini">
              </el-input>
            </el-form-item>
            <el-form-item label="节点长宽:" style="width:270px;">
              <el-input-number v-model.number="sketchObject.size[0]" controls-position="right" @change='sketchObjectChange("size[0]")' size="mini"></el-input-number>
              <span class="el-icon-connection connectionCss mousehand mgl-5 mgr-5" @click="connectionShow = !connectionShow" :class="connectionShow?'connectionClickTrue':''"></span>
              <el-input-number v-model.number="sketchObject.size[1]" controls-position="right" @change='sketchObjectChange("size[1]")' size="mini"></el-input-number>
            </el-form-item>
            <el-form-item label="节点类型:" style="width:270px;" class="mgb_10">
              <el-input v-model="sketchObject.equipType" disabled class="input-with-select" size="mini">
              </el-input>
            </el-form-item>
            <el-form-item label="关联状态:" style="width:270px;">
              <el-button type="primary" v-show="sketchObject.relevance.relevanceEquipName != ''" size="mini" @click="yesRelevanceClick">已关联</el-button>
              <el-button type="danger" v-show="sketchObject.relevance.relevanceEquipName == ''" size="mini" @click="noRelevanceClick">未关联</el-button>
            </el-form-item>
            <el-form-item label="关联名称:" style="width:270px;">
              <el-input v-model="sketchObject.relevance.relevanceName" disabled clearable class="input-with-select" size="mini">
              </el-input>
            </el-form-item>
          </el-form>
          <div class="df-aj btnBoxCss">
            <el-button type="primary" size="mini" @click="deleteClose">取消</el-button>
            <el-button type="danger" size="mini" @click="deleteClose">确认</el-button>
          </div>
        </div>
      </transition>
    </div>
    <div class="monitoringRight" v-if="rightDrawerLine">
      <div class="df-c show_right2" :style="rightDrawerLine ? 'right:105%;' : 'right:4.5%;'">
      </div>
      <transition name="faderight">
        <div v-if="rightDrawerLine" class="monitoringRightFade">
          <div class="show_rightClose df-aj mousehand" @click="deleteCloseLine">
            <i class="el-icon-close sketchCloseIcon"></i>
          </div>
          <el-form aria-label="100px" class="mgl_20 mgt_30">
            <el-form-item label="连线描述：" style="width:270px;">
              <el-input v-model="sketchObjectLine.label" @change='sketchObjectLineChange' clearable class="input-with-select" size="mini">
              </el-input>
            </el-form-item>
            <el-form-item label="连线类型：" style="width:270px;">
              <el-select v-model="sketchObjectLine.linkType" placeholder="请选择连线类型" size="mini" class="mgr-10" clearable>
                <el-option v-for="item in lineTypeLine" :key="item.id" :label="item.label" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="连线方式：" style="width:270px;" class="mgb_10">
              <el-select v-model="sketchObjectLine.direction" @change='setLineDirection' placeholder="请选择连线方式" size="mini" class="mgr-10" clearable>
                <el-option v-for="item in lineDirectionLine" :key="item.id" :label="item.label" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div class="df-aj btnBoxCss">
            <el-button type="primary" size="mini" @click="deleteCloseLine">取消</el-button>
            <el-button type="danger" size="mini" @click="deleteCloseLine">确认</el-button>
          </div>
        </div>
      </transition>
    </div>
    <!-- 中间添加 -->
    <div class="monitoringCenter df-a df-sp" v-if="isSketchEdit">
      <div class="df-a">
        <div class="mgl_20" style="color:red;margin-right:2px;">*</div>
        <div>拓扑图名称：</div>
        <el-input v-model="topologyListObject.topologyName" size="mini" clearable style="width:220px;"></el-input>
        <div class="mgl_10">拓扑图类型：</div>
        <el-select v-model="topologyListObject.topologyType" placeholder="请选择类型
最低0.47元/天 解锁文章
Alex-Gdd
关注
  • 0
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
专栏目录
vue 动态生成拓扑图，vue总结来了
m0_46608024的博客
04-03 719
和上面横向一样，需要在 index.html 文件中引用 js 文件。和上面横向一样，需要在 index.html 文件中引用 js 文件。data: this.data, //配置数据源。lineType: [ //配置线条的类型。
Vue-Topo: 基于Vue的可视化拓扑图组件
gitblog_00006的博客
03-29 2952
Vue-Topo: 基于Vue的可视化拓扑图组件 项目地址:https://gitcode.com/Mirror198829/vue-topo 在如今的Web开发中，数据可视化已经成为传递复杂信息、构建交互式界面的重要手段。Vue-Topo 是一个专为Vue.js框架设计的开源项目，它提供了一种优雅的方式来绘制和操作网络拓扑图，非常适合用于展示IT系统的架构、网络布局等场景。 项目简介 Vue-T...
vue用vis插件实现网络拓扑图
十二点的洛杉矶的博客
12-16 1万+
安装引入vis npm安装visnpm install vis 引入visimport { 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'},
antv g6实现系统拓扑图
最新发布
坚强的泡沫的博客
06-20 1114
为例描述各个服务、redis、mysql等之间的联系及其健康状态，构建系统拓扑图，考虑 [g6](https://g6.antv.antgroup.com/manual/introduction) 更适合处理大量数据之间的关系，所以我们采用g6来绘制前端的图形。
vue 拓扑组件_vue 集成 vis-network 实现网络拓扑图的方法
weixin_39687621的博客
12-19 1961
vis.js 网站vs code 下安装命令npm install vis-network在vue 下引入 vis-network组件const vis = require("vis-network/dist/vis-network.min.js");require("vis-network/dist/vis-network.min.css");例子代码使用let dir = "/jtopo...
vue 拓扑组件_vue 集成 vis-network 实现网络拓扑图
weixin_39720510的博客
12-19 1513
let DIR = "/jtopo/";let nodes = [{ id: 1, shape: "circularImage", image: DIR + "server.png" },{ id: 2, shape: "circularImage", image: DIR + "server.png" },{ id: 3, shape: "circularImage", image: DIR +...
vue 动态生成拓扑图
大家好，我是+V
11-11 8536
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/cs
vue 集成 vis-network 实现网络拓扑图的方法
10-16
主要介绍了vue 集成 vis-network 实现网络拓扑图的方法，本文通过实例代码给大家介绍的非常详细 ,需要的朋友可以参考下
Vuex和antv/g6实现在线绘制分析流程图功能演示Demo
09-07
基于vue框架实现流程图绘制在项目中实际是一个复杂的应用，但是因为有很多算法都是和项目中业务相关不一定符合其他小伙伴的实际应用情况并且项目存在保密机制不方便全部分享出来，所以本Demo中仅抽取最基础的部分...
基于VUE的网络拓扑图动态线条实现
04-30
网络拓扑图动态线条实现
vue+d3实现的拓扑图，可拖拽
09-19
vue+d3实现拓扑图，在里面的包含详情，节点的数据，线的数据等的
Java网络拓扑图，vue拓扑图管理，组件关系组件机架
12-25
Java网络拓扑图，控件自定义 (管理)，控件属性显示，支持单双箭头。拓扑图编辑管理
vue3+vite+ts+antv/x6搭建的流程图编辑页面
03-26
最后，还为这些功能提供了对应的快捷键，使得我们可以更加快速地上手并完成流程图编辑项目。这些快捷键的设计充分考虑了用户的使用习惯，使得操作流程更加顺畅和高效。 流程图编辑页面是一个专门用于创建、编辑和...
vue中使用antv/x6编写自定义流程
04-14
在vue中使用antv/x6和element组件，实现自定义流程的编写，使用antv/x6实现画布绘制和流程绘制，通过拖动节点到画布的方式进行节点的添加，使用element组件实现鼠标移入节点后的自定义功能，使用antv/x6自带的api和...
Vue3.x+AntV G6+Element Plus
12-04
一个开箱即用的基于Vue3使用AntV G6绘制图谱的项目，项目中包含两个demo，其一：图谱可以实现自适应窗口大小；其二：图谱自适应DOM元素大小。帮助你更好的理解并在Vue3.x中使用AntV G6库，有助于初学者快速上手
antv/x6封装vue2.0源码
05-13
《AntV X6 封装 Vue 2.0 源码详解：构建高效图形编辑器的奥秘》 在IT行业中，图形界面与交互设计的重要性...这将对你的职业生涯大有裨益，无论是构建业务流程图、网络拓扑图还是其他类型的图形应用，你都能游刃有余。
vue项目中使用antvX6新手教程，附demo案例讲解（可拖拽流程图、网络拓扑图）
热门推荐
wzy_PROTEIN的博客
02-28 1万+
用户可以自己拖拽节点，节点之间可以随意连线，保存拓扑图数据后传给后端，然后在另一个页面拿到之前的数据进行渲染展示。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Alex-Gdd

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值