效果圖（優點：可以自定義每一條折線的顏色，可以自定義節點的顏色，以及折線的計算樣式等）：
代碼：
<!-- 流程圖組件 -->
<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>
)
