antv G6绘制流程图
效果图(优点:可以自定义每一条折线的颜色,可以自定义节点的颜色,以及折线的计算样式等):

代码:
<!-- 流程图组件 -->
<template><div id="container"></div>
</template><script setup lang="ts">
import {watch, reactive, toRefs, nextTick, ref, onBeforeUnmount} from "vue";
import {Graph} from "@antv/g6";
import RuleCommonUtil from "../utils/RuleCommonUtil";
import GlobalConst from "../utils/GlobalConst";
import DictConst from "../enums/DictConst";const dataValue: any = reactive({nodes: [// {// id: "dom2",// data: {label: "dom2", width: 60, height: 100},// style: {x: 50, y: 100, width: 100, height: 50},// },// {// id: "dom3",// data: {label: "dom3", width: 60, height: 100},// style: {x: 150, y: 100, width: 100, height: 50},// },// {// id: "dom4",// data: {label: "dom4", width: 60, height: 100},// style: {x: 250, y: 100, width: 100, height: 50},// },// {// id: "dom5",// data: {label: "dom5", width: 50, height: 100},// style: {x: 350, y: 100, width: 100, height: 50},// },],edges: [// {id: "dom2->dom3", source: "dom2", target: "dom3"},// {id: "dom3->dom4", source: "dom3", target: "dom4"},// {id: "dom4->dom5", source: "dom4", target: "dom5"},// {// id: "dom1->dom5",// source: "dom2",// target: "dom5",// style: {// controlPoints: [// [50, 180], // [起始点x轴 ,起始点y轴+要高出部分的]// [350, 180], // [目标点x轴 ,目标点y轴+要高出部分的]// ],// },// },// {// id: "dom1->dom4",// source: "dom2",// target: "dom4",// style: {// controlPoints: [// [50, 180], // [起始点x轴 ,起始点y轴+要高出部分的]// [250, 180], // [目标点x轴 ,目标点y轴+要高出部分的]// ],// },// },],
});
// 新增:声明图表实例引用
const graphInstance = ref<any>(null);
const props = defineProps({nodeList: {type: Array,default: () => [],},process: {type: Object,default: () => ({}),},
});
const {nodeList, process} = toRefs(props);
// 新增:组件卸载时自动销毁图表
onBeforeUnmount(() => {destroyGraph();
});watch(() => nodeList.value,(newValue) => {nextTick(async () => {if (newValue) {setNodes();setEdges();await initDataList();} else {destroyGraph();}});},{deep: true,immediate: true,},
);
// 新增:销毁图表的方法
const destroyGraph = () => {if (graphInstance.value) {graphInstance.value.destroy(); // 销毁图表实例graphInstance.value = null;}
};
const initDataList = () => {// 销毁旧实例destroyGraph();// 创建新实例graphInstance.value = new Graph({container: document.getElementById("container") as any,autoFit: "center",data: dataValue,behaviors: ["zoom-canvas", // 保留缩放功能"drag-canvas", // 保留画布拖拽功能// "drag-node" // 移除或不启用拖拽节点的行为],node: {type: "rect",style: {size: (d: any) => [d.data.width, d.data.height] as any,radius: 10,iconText: (d: any) => d.data.label as any,iconFontSize: 10,},palette: {type: "group",field: "label",},},edge: {type: "polyline",style: {stroke: (d: any) => d.color as any,lineWidth: 2,lineAppendWidth: 8, // 加宽线宽度endArrow: {// path: Arrow.triangle(10, 10, 2), // 使用导入的箭头路径// fill: "#18c298ad", // 填充颜色} as any,offset: 20, // 设置箭头偏移},},plugins: [{type: "tooltip",getContent: (_event: any, items: any) => {return `<span>${items[0]?.logicNode}</span>`;},},],});graphInstance.value.render();
};
const setNodes = () => {dataValue.nodes = nodeList.value.map((item: any, index: number) => {return {id: `${item.seq}`,data: {label: item?.taskName || "--", width: 80, height: 100},logicNode: item?.taskName || "--",style: {x: 50 + index * 150,y: 100,width: 100,height: 50,fill: "#3761f5", // 或者你可以设置为一个统一颜色,比如 "#FFFFFF"stroke: "#f0f0f0", // 设置边框颜色 (黑色)lineWidth: 2, // 设置边框宽度radius: 10, // 如果你希望有圆角,可以保持这一行color: "#6c8bf7",},};});
};
const setEdges = () => {const list: any = nodeList.value;const aaa = list.map((item: any, index: number) => {if (list[index + 1]) {return {id: `${item.seq}->${list[index + 1].seq}`,logicNode: setTooltip(item.taskConditionList.find((c: any) => list[index + 1].taskCode === c.targetTaskCode)?.logicNode || {},),source: `${item.seq}`,target: `${list[index + 1].seq}`,color: "#41d89f",};}});dataValue.edges = aaa.filter((item: any) => item);relationship();
};
// 计算非直连的节点关系表
const relationship = () => {let topArrow: number[] = [];const list: any = nodeList.value;//先过滤出有条件的节点const subset = list.filter((item: any) => item?.taskConditionList && item?.taskConditionList.length > 0,);let subsetlength = subset.length || 0;subset.forEach((item: any, index: number) => {item.taskConditionList.forEach((v: any) => {// 目标节点const objIndex = list.findIndex((vv: any) => vv.taskCode === v.targetTaskCode);const obj = list.find((vv: any) => vv.taskCode === v.targetTaskCode);if (obj && objIndex > -1 && item.seq + 1 !== obj.seq) {dataValue.edges.push({id: `${item.seq}->${v.targetTaskCode}`,source: `${item.seq}`,target: `${obj.seq}`,logicNode: setTooltip(v?.logicNode || {}),// color: item.seq >= 1 ? "#1783ff" : "#41d89f", //设置线条颜色color: "#41d89f",style: {controlPoints: [[50 + (item.seq - 1) * 150,topArrow.includes(item.seq)? 100 +((topArrow.indexOf(item.seq) + 1) * 80) /(topArrow.indexOf(item.seq) + 1 > 1 ? 1.5 : 1): 100 - ((index + 1) * 80) / (index + 1 > 1 ? 1.5 : 1),], // [起始点x轴 ,起始点y轴+要高出部分的][50 + objIndex * 150,topArrow.includes(item.seq)? 100 +((topArrow.indexOf(item.seq) + 1) * 80) /(topArrow.indexOf(item.seq) + 1 > 1 ? 1.5 : 1): 100 - ((index + 1) * 80) / (index + 1 > 1 ? 1.5 : 1),], // [目标点x轴 ,目标点y轴+要高出部分的]],},});topArrow.push(obj.seq);}});subsetlength--;});
};//动态设置线条的tooltip
const setTooltip = (logicNode: any) => {return "1111";
};
</script>
相关文章:
antv G6绘制流程图
效果图(优点:可以自定义每一条折线的颜色,可以自定义节点的颜色,以及折线的计算样式等): 代码: <!-- 流程图组件 --> <template><div id"container"></div>…...
完美隐藏滚动条方案 (2024 最新验证)
完美隐藏滚动条方案 (2024 最新验证) css /* 全局隐藏竖直滚动条但保留滚动功能 */ html {overflow: -moz-scrollbars-none; /* Firefox 旧版 */scrollbar-width: none; /* Firefox 64 */-ms-overflow-style: none; /* IE/Edge */overflow-y: overlay; …...
单片机的串口(USART)
Tx - 数据的发送引脚,Rx - 数据的接受引脚。 串口的数据帧格式 空闲状态高电平,起始位低电平,数据位有8位校验位,9位校验位,停止位是高电平保持一位或者半位,又或者两位的状态。 8位无校验位传输一个字节…...
实现分布式限流开源项目
以下是10个可以实现分布式限流中间件的开源项目推荐,这些项目基于不同的技术栈,适用于多种应用场景: 1. **Alibaba Sentinel** Sentinel 是阿里巴巴开源的分布式限流中间件,支持多种限流策略(如QPS、并发线程数等…...
递归构建行政区域树(二)
概述 这篇博客中构建出的行政区域树利用element-ui的Tree组件展示出来。 实现 源码位于码云,欢迎点击哦。 项目结构 最后 好久没写基于element-ui的项目了,都有点生疏了。 好了,如果对你有帮助,欢迎点个免费的赞哦。...
AR技术下的电商:虚拟试穿/试用/试戴成新风尚
随着科技的日新月异,增强现实(AR)技术正悄然改变着我们的生活,尤其在电子商务领域,AR技术的融入正掀起一场前所未有的变革。那么,AR技术究竟是何方神圣?它在电商领域又展现出了哪些非凡的应用呢…...
社群团购平台的愿景构建与开源链动2+1模式S2B2C商城小程序应用探索
摘要:在数字经济背景下,社群团购作为一种新兴的商业模式,凭借其独特的互动性和便捷性,展现出巨大的市场潜力。本文旨在探讨社群团购平台愿景的构建策略,并结合开源链动21模式S2B2C商城小程序的应用,为创业者…...
笔记20250225
关于上拉电阻和下拉电阻的作用 原理 上拉电阻:在上拉电阻所连接的导线上,如果外部组件未启用,上拉电阻则“微弱地”将输入电压信号“拉高”。当外部组件未连接时,对输入端来说,外部“看上去”就是高阻抗的,…...
【项目】基于Boost自主实现搜索引擎
🔥 个人主页:大耳朵土土垚 🔥 所属专栏:Linux系统编程 这里将会不定期更新有关Linux的内容,欢迎大家点赞,收藏,评论🥳🥳🎉🎉🎉 文章目…...
使用 Open3D 批量渲染并导出固定视角点云截图
一、前言 在三维点云处理与可视化中,固定视角批量生成点云渲染截图是一个常见的需求。例如,想要将同一系列的点云(PCD 文件)在同样的视角下生成序列图片,以便后续合成为视频或进行其他可视化演示。本文将介绍如何使用…...
汽车无钥匙进入一键启动操作正确步骤
汽车智能无钥匙进入和一键启动的技术在近年来比较成熟,不同车型的操作步骤可能略有不同,但基本的流程应该是通用的,不会因为时间变化而有大的改变。 移动管家汽车一键启动无钥匙进入系统通常是通过携带钥匙靠近车辆,然后触摸门把…...
JMeter 的基础知识-安装部分
以下将从环境配置开始,为你详细介绍 JMeter 的基础知识,涵盖环境搭建、界面认知、测试计划创建、常用组件使用等方面内容。 1. 环境配置 1.1 安装 Java JMeter 是基于 Java 开发的,所以需要先安装 Java 开发工具包(JDK)。 下载 JDK:访问 Oracle 官方网站(https://www…...
解决后端跨域问题
目录 一、什么是跨域问题? 1、跨域问题的定义 2、举例 3、为什么会有跨域问题的存在? 二、解决跨域问题 1、新建配置类 2、编写代码 三、结语 一、什么是跨域问题? 1、跨域问题的定义 跨域问题(Cross-Origin Resource Sh…...
补题A-E Codeforces Round 953 (Div. 2)
https://codeforces.com/contest/1979 A. Guess the Maximum 原题链接:https://codeforces.com/contest/1979/problem/A 求相邻元素的最大值的最小值。 #include <bits/stdc.h> using namespace std; #define IOS ios::sync_with_stdio(0), cin.tie(0), cout…...
【WordPress】发布文章时自动通过机器人推送到钉钉
在您的主题下functions.php中添加如下代码: function wpso_dingding_publish_notify($post_ID) {// 获取文章对象$post get_post($post_ID);// 检查是否是文章首次发布(即不是修订版)if (get_post_status($post_ID) publish && !g…...
鸿蒙开发深入浅出04(首页数据渲染、搜索、Stack样式堆叠、Grid布局、shadow阴影)
鸿蒙开发深入浅出04(首页数据渲染、搜索、Stack样式堆叠、Grid布局、shadow阴影) 1、效果展示2、ets/pages/Home.ets3、ets/views/Home/SearchBar.ets4、ets/views/Home/NavList.ets5、ets/views/Home/TileList.ets6、ets/views/Home/PlanList.ets7、后端…...
管道文件(1)
1.无名管道:在同一主机下,具有亲缘关系的进程间的通信,如父子进程间的通信。 2.有名管道:在同一主机下的任意进程间的通信。 (1)管道的创建 (2)管道的打开(openÿ…...
什么是AI agent技术,有哪些著名案例
AI Agent技术是一种基于人工智能的智能实体,能够感知环境、进行决策和执行动作,以实现特定目标。近年来,随着大模型(如GPT-4)和生成式AI技术的发展,AI Agent在多个领域得到了广泛应用,并取得了显…...
Cursor结合Claude 3.7零基础开发愤怒的小鸟【深夜Claude 3.7系列发布,类似DeepSeek-R1和V3的合体?】
文章目录 前言介绍“市面上唯一的混合模型”卓越的编程能力、精准控制思考时间Cursor已接入Cursor结合Claude 3.7快速编写游戏完整html代码 🍃作者介绍:双非本科大四网络工程专业在读,阿里云专家博主,前三年专注于Java领域学习&am…...
基于 Python 的天气数据分析与可视化
基于 Python 的天气数据分析与可视化 1. 项目背景 天气数据分析与可视化项目旨在通过爬取天气数据并进行分析,生成可视化图表,帮助用户了解天气变化趋势。通过该项目,学生可以掌握 Python 的数据爬取、数据分析和可视化技能。该项目适用于气…...
【kafka】Golang实现分布式Masscan任务调度系统
要求: 输出两个程序,一个命令行程序(命令行参数用flag)和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽,然后将消息推送到kafka里面。 服务端程序: 从kafka消费者接收…...
IGP(Interior Gateway Protocol,内部网关协议)
IGP(Interior Gateway Protocol,内部网关协议) 是一种用于在一个自治系统(AS)内部传递路由信息的路由协议,主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...
智能在线客服平台:数字化时代企业连接用户的 AI 中枢
随着互联网技术的飞速发展,消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁,不仅优化了客户体验,还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用,并…...
【Web 进阶篇】优雅的接口设计:统一响应、全局异常处理与参数校验
系列回顾: 在上一篇中,我们成功地为应用集成了数据库,并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了!但是,如果你仔细审视那些 API,会发现它们还很“粗糙”:有…...
QT: `long long` 类型转换为 `QString` 2025.6.5
在 Qt 中,将 long long 类型转换为 QString 可以通过以下两种常用方法实现: 方法 1:使用 QString::number() 直接调用 QString 的静态方法 number(),将数值转换为字符串: long long value 1234567890123456789LL; …...
CMake控制VS2022项目文件分组
我们可以通过 CMake 控制源文件的组织结构,使它们在 VS 解决方案资源管理器中以“组”(Filter)的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总(共4种) 方法描述是否推荐…...
html-<abbr> 缩写或首字母缩略词
定义与作用 <abbr> 标签用于表示缩写或首字母缩略词,它可以帮助用户更好地理解缩写的含义,尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时,会显示一个提示框。 示例&#x…...
Mobile ALOHA全身模仿学习
一、题目 Mobile ALOHA:通过低成本全身远程操作学习双手移动操作 传统模仿学习(Imitation Learning)缺点:聚焦与桌面操作,缺乏通用任务所需的移动性和灵活性 本论文优点:(1)在ALOHA…...
Java + Spring Boot + Mybatis 实现批量插入
在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法:使用 MyBatis 的 <foreach> 标签和批处理模式(ExecutorType.BATCH)。 方法一:使用 XML 的 <foreach> 标签ÿ…...
动态 Web 开发技术入门篇
一、HTTP 协议核心 1.1 HTTP 基础 协议全称 :HyperText Transfer Protocol(超文本传输协议) 默认端口 :HTTP 使用 80 端口,HTTPS 使用 443 端口。 请求方法 : GET :用于获取资源,…...
