当前位置: 首页 > news >正文

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绘制流程图

效果图&#xff08;优点&#xff1a;可以自定义每一条折线的颜色&#xff0c;可以自定义节点的颜色&#xff0c;以及折线的计算样式等&#xff09;&#xff1a; 代码&#xff1a; <!-- 流程图组件 --> <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 - 数据的发送引脚&#xff0c;Rx - 数据的接受引脚。 串口的数据帧格式 空闲状态高电平&#xff0c;起始位低电平&#xff0c;数据位有8位校验位&#xff0c;9位校验位&#xff0c;停止位是高电平保持一位或者半位&#xff0c;又或者两位的状态。 8位无校验位传输一个字节…...

实现分布式限流开源项目

以下是10个可以实现分布式限流中间件的开源项目推荐&#xff0c;这些项目基于不同的技术栈&#xff0c;适用于多种应用场景&#xff1a; 1. **Alibaba Sentinel** Sentinel 是阿里巴巴开源的分布式限流中间件&#xff0c;支持多种限流策略&#xff08;如QPS、并发线程数等…...

递归构建行政区域树(二)

概述 这篇博客中构建出的行政区域树利用element-ui的Tree组件展示出来。 实现 源码位于码云&#xff0c;欢迎点击哦。 项目结构 最后 好久没写基于element-ui的项目了&#xff0c;都有点生疏了。 好了&#xff0c;如果对你有帮助&#xff0c;欢迎点个免费的赞哦。...

AR技术下的电商:虚拟试穿/试用/试戴成新风尚

随着科技的日新月异&#xff0c;增强现实&#xff08;AR&#xff09;技术正悄然改变着我们的生活&#xff0c;尤其在电子商务领域&#xff0c;AR技术的融入正掀起一场前所未有的变革。那么&#xff0c;AR技术究竟是何方神圣&#xff1f;它在电商领域又展现出了哪些非凡的应用呢…...

社群团购平台的愿景构建与开源链动2+1模式S2B2C商城小程序应用探索

摘要&#xff1a;在数字经济背景下&#xff0c;社群团购作为一种新兴的商业模式&#xff0c;凭借其独特的互动性和便捷性&#xff0c;展现出巨大的市场潜力。本文旨在探讨社群团购平台愿景的构建策略&#xff0c;并结合开源链动21模式S2B2C商城小程序的应用&#xff0c;为创业者…...

笔记20250225

关于上拉电阻和下拉电阻的作用 原理 上拉电阻&#xff1a;在上拉电阻所连接的导线上&#xff0c;如果外部组件未启用&#xff0c;上拉电阻则“微弱地”将输入电压信号“拉高”。当外部组件未连接时&#xff0c;对输入端来说&#xff0c;外部“看上去”就是高阻抗的&#xff0c…...

【项目】基于Boost自主实现搜索引擎

&#x1f525; 个人主页&#xff1a;大耳朵土土垚 &#x1f525; 所属专栏&#xff1a;Linux系统编程 这里将会不定期更新有关Linux的内容&#xff0c;欢迎大家点赞&#xff0c;收藏&#xff0c;评论&#x1f973;&#x1f973;&#x1f389;&#x1f389;&#x1f389; 文章目…...

使用 Open3D 批量渲染并导出固定视角点云截图

一、前言 在三维点云处理与可视化中&#xff0c;固定视角批量生成点云渲染截图是一个常见的需求。例如&#xff0c;想要将同一系列的点云&#xff08;PCD 文件&#xff09;在同样的视角下生成序列图片&#xff0c;以便后续合成为视频或进行其他可视化演示。本文将介绍如何使用…...

汽车无钥匙进入一键启动操作正确步骤

汽车智能无钥匙进入和一键启动的技术在近年来比较成熟&#xff0c;不同车型的操作步骤可能略有不同&#xff0c;但基本的流程应该是通用的&#xff0c;不会因为时间变化而有大的改变。 移动管家汽车一键启动无钥匙进入系统通常是通过携带钥匙靠近车辆&#xff0c;然后触摸门把…...

JMeter 的基础知识-安装部分

以下将从环境配置开始,为你详细介绍 JMeter 的基础知识,涵盖环境搭建、界面认知、测试计划创建、常用组件使用等方面内容。 1. 环境配置 1.1 安装 Java JMeter 是基于 Java 开发的,所以需要先安装 Java 开发工具包(JDK)。 下载 JDK:访问 Oracle 官方网站(https://www…...

解决后端跨域问题

目录 一、什么是跨域问题&#xff1f; 1、跨域问题的定义 2、举例 3、为什么会有跨域问题的存在&#xff1f; 二、解决跨域问题 1、新建配置类 2、编写代码 三、结语 一、什么是跨域问题&#xff1f; 1、跨域问题的定义 跨域问题&#xff08;Cross-Origin Resource Sh…...

补题A-E Codeforces Round 953 (Div. 2)

https://codeforces.com/contest/1979 A. Guess the Maximum 原题链接&#xff1a;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中添加如下代码&#xff1a; function wpso_dingding_publish_notify($post_ID) {// 获取文章对象$post get_post($post_ID);// 检查是否是文章首次发布&#xff08;即不是修订版&#xff09;if (get_post_status($post_ID) publish && !g…...

鸿蒙开发深入浅出04(首页数据渲染、搜索、Stack样式堆叠、Grid布局、shadow阴影)

鸿蒙开发深入浅出04&#xff08;首页数据渲染、搜索、Stack样式堆叠、Grid布局、shadow阴影&#xff09; 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.无名管道&#xff1a;在同一主机下&#xff0c;具有亲缘关系的进程间的通信&#xff0c;如父子进程间的通信。 2.有名管道&#xff1a;在同一主机下的任意进程间的通信。 &#xff08;1&#xff09;管道的创建 &#xff08;2&#xff09;管道的打开&#xff08;open&#xff…...

什么是AI agent技术,有哪些著名案例

AI Agent技术是一种基于人工智能的智能实体&#xff0c;能够感知环境、进行决策和执行动作&#xff0c;以实现特定目标。近年来&#xff0c;随着大模型&#xff08;如GPT-4&#xff09;和生成式AI技术的发展&#xff0c;AI Agent在多个领域得到了广泛应用&#xff0c;并取得了显…...

Cursor结合Claude 3.7零基础开发愤怒的小鸟【深夜Claude 3.7系列发布,类似DeepSeek-R1和V3的合体?】

文章目录 前言介绍“市面上唯一的混合模型”卓越的编程能力、精准控制思考时间Cursor已接入Cursor结合Claude 3.7快速编写游戏完整html代码 &#x1f343;作者介绍&#xff1a;双非本科大四网络工程专业在读&#xff0c;阿里云专家博主&#xff0c;前三年专注于Java领域学习&am…...

基于 Python 的天气数据分析与可视化

基于 Python 的天气数据分析与可视化 1. 项目背景 天气数据分析与可视化项目旨在通过爬取天气数据并进行分析&#xff0c;生成可视化图表&#xff0c;帮助用户了解天气变化趋势。通过该项目&#xff0c;学生可以掌握 Python 的数据爬取、数据分析和可视化技能。该项目适用于气…...

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来&#xff0c;Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

【位运算】消失的两个数字(hard)

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O(n) 时间复杂度…...

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达,从日常对话到特定领域的文档(例如医学文档)(Heritage 2013;Landmark、Gulbrandsen 和 Svenevei…...

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...