简洁网站模板下载,黄骅住房和城乡建设局网站,wordpress怎么发文章,网站建设价值效果图#xff08;优点#xff1a;可以自定义每一条折线的颜色#xff0c;可以自定义节点的颜色#xff0c;以及折线的计算样式等#xff09;#xff1a; 代码#xff1a;
!-- 流程图组件 --
templatediv idcontainer/div…效果图优点可以自定义每一条折线的颜色可以自定义节点的颜色以及折线的计算样式等 代码
!-- 流程图组件 --
templatediv idcontainer/div
/templatescript setup langts
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 refany(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, // 或者你可以设置为一个统一颜色比如 #FFFFFFstroke: #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
