vue +antvX6 根据节点与线，动态设置节点坐标生成流程图

server/2024/9/24 21:20:51/

需求

vue2 + antvX6完成流程图，但只有节点与线，没有节点的坐标，需要根据节点的顺序显示流程图。
需求：

1.根据数据动态生成对应的节点与线；
2.节点不能重叠；
3.节点与线可拖拽；
4.因为线存在重叠可能，所有鼠标移入时线必须高亮显示（红色），鼠标移出复原；
5.要求有对齐线；
6.线不能与节点重叠（先不能穿过节点）。

效果

图片
在这里插入图片描述
动图
在这里插入图片描述

参数

{"line_data": [ // 线数据{"name": "条件1-1", // 线名称"source_state_id": 6, // 源节点"destination_state_id": 5, // 目标节点"attribute_type_id": 1 // 成功或失败状态},{"name": "条件2-1","source_state_id": 9,"destination_state_id": 6,"attribute_type_id": 1},{"name": "条件2-2","source_state_id": 5,"destination_state_id": 6,"attribute_type_id": 2},{"name": "条件3-1","source_state_id": 10,"destination_state_id": 9,"attribute_type_id": 1},{"name": "条件3-2","source_state_id": 5,"destination_state_id": 9,"attribute_type_id": 2},{"name": "条件4-1","source_state_id": 11,"destination_state_id": 10,"attribute_type_id": 1},{"name": "条件4-2","source_state_id": 5,"destination_state_id": 10,"attribute_type_id": 2},{"name": "条件5-1","source_state_id": 12,"destination_state_id": 11,"attribute_type_id": 1},{"name": "条件5-2","source_state_id": 5,"destination_state_id": 11,"attribute_type_id": 2},{"name": "条件6-1","source_state_id": 13,"destination_state_id": 12,"attribute_type_id": 1},{"name": "条件6-2","source_state_id": 5,"destination_state_id": 12,"attribute_type_id": 2},{"name": "条件7-1","source_state_id": 18,"destination_state_id": 13,"attribute_type_id": 1},{"name": "条件7-2","source_state_id": 5,"destination_state_id": 13,"attribute_type_id": 2},{"name": "条件8-1","source_state_id": 19,"destination_state_id": 6,"attribute_type_id": 3},{"name": "条件8-2","source_state_id": 11,"destination_state_id": 19,"attribute_type_id": 1}],"node_data": [ // 节点数据{"id": 1, // 节点id"name": "开始", // 节点名称"type_id": 1, // 节点状态"order_id": 1 // 节点顺序},{"id": 2,"name": "过程1","type_id": 0,"order_id": 2},{"id": 3,"name": "过程2-1","type_id": 0,"order_id": 3},{"id": 4,"name": "过程2-2","type_id": 0,"order_id": 3},{"id": 5,"name": "过程3","type_id": 0,"order_id": 4},{"id": 6,"name": "过程4","type_id": 0,"order_id": 5},{"id": 7,"name": "过程5","type_id": 0,"order_id": 6},{"id": 8,"name": "过程6","type_id": 0,"order_id": 7},{"id": 9,"name": "结束","type_id": 2,"order_id": 8}]
}

代码

安装插件

1.antvX6
npm install @antv/x6 --save
2.对齐线
npm install @antv/x6-plugin-snapline --save

html代码

<template><div class="info-box"><div class="top-box"id="top-width"><el-button type=""@click="zoomToFit">填满</el-button></div><div class="content-box"><div class="container-box"><div id="container"></div></div></div></div>
</template>

js代码

<script>
import API from '../api' // 接口
import { Graph } from '@antv/x6' // 引入antvX6
import { Snapline } from '@antv/x6-plugin-snapline' // 引入对齐线
Graph.registerNode( // 设置节点基础样式'custom-rect',{inherit: 'rect',width: 200,height: 40,attrs: {body: {strokeWidth: 1,stroke: '#5F95FF',fill: '#EFF4FF'},text: {fontSize: 12,fill: '#262626'}},text: {fontSize: 12,fill: '#262626'}},true
)
export default {data() {return {loading: false,graph: null, // 画布实例对象data: {nodes: [],edges: []}}},mounted() {// 先初始化画布this.initGraph()},beforeDestroy() {// 画布的销毁以及回收this.graph.dispose()this.graph = null},methods: {// 初始化流程图画布initGraph() {const container = document.getElementById('container')this.graph = new Graph({container: container, // 画布容器width: container.offsetWidth, // 画布宽height: container.offsetHeight, // 画布高autoResize: true,background: { // 背景color: '#F2F7FA'},panning: {enabled: true // 支持滚动放大缩小},mousewheel: {enabled: true,modifiers: 'Ctrl', // 按住ctrl按键滚动鼠标滚轮缩放factor: 1.1,maxScale: 10, // 最大放大minScale: 0.05 // 最小缩小},grid: {visible: true, // 渲染网格背景type: 'doubleMesh',args: [{color: '#eee', // 主网格线颜色thickness: 1 // 主网格线宽度},{color: '#ddd', // 次网格线颜色thickness: 1, // 次网格线宽度factor: 4 // 主次网格线间隔}]}})this.graph.use( // 启用对齐线new Snapline({enabled: true}))// 鼠标移入线this.graph.on('edge:mouseenter', ({ e, edge, view }) => {edge.attr({line: {stroke: 'red',strokeWidth: 3}})})// 鼠标移出线this.graph.on('edge:mouseleave', ({ edge }) => {edge.attr({line: {stroke: '#8f8f8f',strokeWidth: 1}})})},// 获取数据init() {this.loading = trueAPI.getData().then(res => {if (res.code === 200) {this.setGraphData(res)} else {this.$message.error(res.msg)}}).finally(() => {this.loading = false})},// 设置画布数据setGraphData(data) {// const X = document.getElementById('top-width').offsetWidth / 2 - 100 // 居中const X = 200this.data = {nodes: [],edges: []}const obj = {}// 转为对象数组 节点有可能顺序相同，顺序相同的配列在同一行data.node_data.map(item => {if (obj[item.order_id]) {obj[item.order_id].push(item)} else {obj[item.order_id] = []obj[item.order_id].push(item)}})// 遍历对象数组  通过遍历数组,将节点数据转为流程图中需要的数据类型Object.keys(obj).forEach((key, objIndex) => {obj[key].map((item, index) => {const node = {id: item.id, // 节点idshape: 'custom-rect', // 这是上边定义的节点类型label: item.name, // 节点名称x: X + 300 * index, // 节点x轴坐标 因为存在顺序相同的节点，需要排在同一行，但是y不一样y: 40 + 100 * objIndex, // 节点y轴坐标 顺序不同的节点，y轴坐标不同attrs: {body: { // 这里是区分普通节点与开始结束节点的， 具体看效果图rx: item.type_id === 0 ? 4 : 10,ry: item.type_id === 0 ? 4 : 10}}}this.data.nodes.push(node)})})// 遍历线的数据 通过遍历数组,将线数据转为流程图中需要的数据类型data.line_data.map((item, index) => {const obj = {id: item.id, // 线idshape: 'edge', // 类型为线source: item.destination_state_id, // 源节点target: item.source_state_id, // 目标节点labels: [ // 线名称样式{attrs: {label: {text: item.name // 线名称}},position: 0.4 // 名称在线的相对位置（0-1）一般为0.5}],router: { // 线的路由name: 'manhattan', // 智能路由 移动节点时，线自动避免与节点接触args: { // 这里根据线的状态来判断线是从源节点的哪里开始，到目标节点的哪里结束// 值为1 线从源节点下方开始，到目标节点上方结束 // 值为2 线从源节点左方开始，到目标节点左方结束 // 值其他 线从源节点右方开始，到目标节点右方结束startDirections: item.attribute_type_id === 1 ? ['bottom'] : item.attribute_type_id === 2 ? ['left'] : ['right'],endDirections: item.attribute_type_id === 1 ? ['top'] : item.attribute_type_id === 2 ? ['left'] : ['right']}},tools: [{name: 'segments',args: {snapRadius: 20,attrs: {fill: '#444'}}}],attrs: { // 线样式line: {stroke: '#8f8f8f',strokeWidth: 1}}}this.data.edges.push(obj)})this.graph.fromJSON(this.data) // 渲染数据 将添加的节点与线画出来},zoomToFit() {this.graph.zoomToFit({padding: 20,preserveAspectRatio: true,maxScale: 1})}}
}
</script>

css代码

<style lang="scss" scoped>
.info-box {position: relative;width: 100%;height: 100%;padding: 1rem;box-sizing: border-box;.top-box {width: 100%;height: 3rem;}.content-box {width: 100%;height: calc(100% - 3rem);.container-box {width: 100%;height: 100%;}}
}
</style>

http://www.ppmy.cn/server/23814.html

相关文章

【linux】命名管道

【linux】命名管道

1.命名管道原理 2.代码实现命名管道 首先认识一个函数&#xff0c;他可以形成一个命名管道 头文件&#xff1a; #include <sys/types.h>#include <sys/stat.h>函数体&#xff1a; int mkfifo(const char *pathname, mode_t mode);第一个参数是新建的命名管道放在…
阅读更多...
ChatGPT 如何改变移动测试的游戏规则

ChatGPT 如何改变移动测试的游戏规则

在快节奏的移动应用程序开发世界中&#xff0c;适应性是关键。俗话说&#xff0c;“变化是唯一不变的”。当谈到移动测试自动化时&#xff0c;传统方法可能像迷宫导航或依赖损坏的指南针一样复杂。生成式人工智能已经像新鲜空气一样进入了场景。这就像大海捞针一样&#xff0c;…
阅读更多...
C#基础之结构体

C#基础之结构体

结构体 文章目录 1、概念2、基本语法3、示例4、结构体的使用5、访问修饰符6、结构体的构造函数思考1 描述矩形信息思考2 职业名字释放了技能思考3 小怪兽思考4 多个小怪兽思考5 奥特曼打小怪兽 1、概念 结构体是一种一定义变量类型 它是数据和函数的集合&#xff0c;可以在结…
阅读更多...
持续集成和持续部署（CI/CD）

持续集成和持续部署（CI/CD）

持续集成&#xff08;Continuous Integration&#xff0c;简称CI&#xff09;和持续部署&#xff08;Continuous Deployment&#xff0c;简称CD&#xff09;是现代软件开发中的重要实践&#xff0c;旨在提高开发团队的效率和软件交付的质量。 持续集成是指开发人员将代码频繁地…
阅读更多...
IDEA主题美化【保姆级】

IDEA主题美化【保姆级】

前言 一款好的 IDEA 主题虽然不能提高我们的开发效率&#xff0c;但一个舒适简单的主题可以使开发人员更舒适的开发&#xff0c;时常换一换主题可以带来不一样的体验&#xff0c;程序员的快乐就这么简单。话不多说&#xff0c;先上我自己认为好看的主题设置。 最终效果图: 原…
阅读更多...
XY_RE复现（二）

XY_RE复现（二）

一&#xff0c;何须相思煮余年 0x55 0x8b 0xec 0x81 0xec 0xa8 0x0 0x0 0x0 0xa1 0x0 0x40 0x41 0x0 0x33 0xc5 0x89 0x45 0xfc 0x68 0x9c 0x0 0x0 0x0 0x6a 0x0 0x8d 0x85 0x60 0xff 0xff 0xff 0x50 0xe8 0x7a 0xc 0x0 0x0 0x83 0xc4…
阅读更多...
MyBatisPlus异常：Cannot determine value type from string

MyBatisPlus异常：Cannot determine value type from string

异常详情 一个非常普通的分页查询操作&#xff0c;出现如下异常&#xff1a; 2024-03-21 14:51:17.501 ERROR 6 --- [ XNIO-1 task-4] c.m.f.c.s.h.GlobalBizExceptionHandler : 全局异常信息 exError attempting to get column goodsName from result set. Cause: java…
阅读更多...
Cesium学习——渲染、加载GeoJSON、调整位置

Cesium学习——渲染、加载GeoJSON、调整位置

渲染概述 作者&#xff1a;当时明月在曾照彩云归 出处&#xff1a;https://www.cnblogs.com/jiujiubashiyi/p/17124717.html 1. 引言 Cesium是一款三维地球和地图可视化开源JavaScript库&#xff0c;使用WebGL来进行硬件加速图形&#xff0c;使用时不需要任何插件支持&#xf…
阅读更多...
最新文章

Copyright @ 2022~2023