(AntV X6)vue2项目流程图实现

news/2024/3/4 9:29:29

(AntV X6)vue2流程图实现


项目:gitLab/zhengzhouyuan

效果:

在这里插入图片描述


一、项目引入X6

npm install @antv/x6 --save

二、引入相关插件

npm install --save @antv/x6-plugin-clipboard @antv/x6-plugin-history @antv/x6-plugin-keyboard @antv/x6-plugin-selection @antv/x6-plugin-snapline @antv/x6-plugin-stencil @antv/x6-plugin-transform insert-css

在这里插入图片描述
三、页面

html

基础信息-6流程建模
<template><div class="processBox"><!-- 流程图 --><div id="container" style="min-width: 600px; min-height: 400px"><div id="stencil"></div><div id="graph-container"></div></div><div class="saveBtn"><el-button type="info" size="mini" @click="graphSave()">保存</el-button><el-button type="danger" size="mini" @click="graphClear()">清空</el-button></div></div>
</template>

js

<script >
import { mapGetters } from "vuex";
import { Graph, Shape, Addon, DataUri } from "@antv/x6";
import { Stencil } from "@antv/x6-plugin-stencil";
import { Transform } from "@antv/x6-plugin-transform";
import { Selection } from "@antv/x6-plugin-selection";
import { Snapline } from "@antv/x6-plugin-snapline";
import { Keyboard } from "@antv/x6-plugin-keyboard";
import { Clipboard } from "@antv/x6-plugin-clipboard";
import { History } from "@antv/x6-plugin-history";
import insertCss from "insert-css";
import graphTest from "@/assets/json/graphTest";
import {companySearch,processModelSearch,processModelSave,treeList,equipmentPaging,
} from "@/api/processModel";
import {graphOptions,ports,SETTING_SHAPE_NAME,SettingNodeOptions,colors,
} from "@/views/basicInformation/ProcessModeling/config";
let graph = null;
let dnd = null;
let selector = null;
export default {name: "ProcessLibrary",components: {},data() {return {silkData: [],tobaccoData: [],stemData: [],smokeData: [],equipmentData: [],companyOptions: [],companyId: "",graphId: "",description: "",data: {},//渲染数据saveData: [],//保存数据};}, watch: {data: {deep: true,immediate: true,handler(oldVal, newVal) {if (newVal) {graph.fromJSON(this.data);//渲染数据}},},},mounted() {this.getTreeList();this.companySearch();setTimeout(() => {this.initGraph();}, 500);},beforeDestroy() {// 画布的销毁以及回收graph && graph.dispose();graph = null;dnd = null;selector = null;},methods: {//建模树getTreeList() {},  //初始化initGraph() {graph = new Graph({container: document.getElementById("graph-container"),//画布背景background: {color: "#F2F7FA",},grid: true,// 滚动scroller: {enabled: true,pageVisible: false, // 是否分页pageBreak: false,pannable: true, // 是否平移},//滚轮缩放mousewheel: {enabled: true,zoomAtMousePosition: true,//   modifiers: "ctrl",//   minScale: 0.5,//   maxScale: 3,modifiers: ["ctrl", "meta"],maxScale: 3,minScale: 0.3,},//连接线connecting: {router: "manhattan",connector: {name: "rounded",args: {radius: 8,},},anchor: "center",connectionPoint: "anchor",allowBlank: false,snap: {radius: 20,},createEdge() {return new Shape.Edge({attrs: {line: {stroke: "#A2B1C3",strokeWidth: 2,targetMarker: {name: "block",width: 12,height: 8,},},},zIndex: 0,});},validateConnection({ targetMagnet }) {return !!targetMagnet;},},//连接桩样式highlighting: {magnetAdsorbed: {name: "stroke",args: {attrs: {fill: "#5F95FF",stroke: "#5F95FF",},},},},});// 使用插件graph.use(//变换new Transform({resizing: true, //调整大小rotating: true, //旋转角度})).use(//框选new Selection({rubberband: true,showNodeSelectionBox: true,})).use(new Snapline()) //对齐线.use(new Keyboard()) //快捷键.use(new Clipboard()) //复制粘贴.use(new History()); //撤销// 链接桩配置const ports = {groups: {top: {position: "top",attrs: {circle: {r: 4,magnet: true,stroke: "#5F95FF",strokeWidth: 1,fill: "#fff",style: {visibility: "hidden",},},},},right: {position: "right",attrs: {circle: {r: 4,magnet: true,stroke: "#5F95FF",strokeWidth: 1,fill: "#fff",style: {visibility: "hidden",},},},},bottom: {position: "bottom",attrs: {circle: {r: 4,magnet: true,stroke: "#5F95FF",strokeWidth: 1,fill: "#fff",style: {visibility: "hidden",},},},},left: {position: "left",attrs: {circle: {r: 4,magnet: true,stroke: "#5F95FF",strokeWidth: 1,fill: "#fff",style: {visibility: "hidden",},},},},},items: [{group: "top",},{group: "right",},{group: "bottom",},{group: "left",},],};//矩形设置Graph.registerNode("custom-rect",{inherit: "rect",width: 72,height: 36,attrs: {body: {strokeWidth: 1,stroke: "#5F95FF",fill: "#EFF4FF",},text: {fontSize: 12,fill: "#262626",},},ports: { ...ports },},true);//设备矩形设置Graph.registerNode("dev-rect",{inherit: "rect",width: 230,height: 36,attrs: {body: {strokeWidth: 1,stroke: "#5F95FF",fill: "#EFF4FF",},text: {fontSize: 12,fill: "#262626",},},ports: { ...ports },},true);//圆形设置Graph.registerNode("custom-circle",{inherit: "circle",width: 45,height: 45,attrs: {body: {strokeWidth: 1,stroke: "#5F95FF",fill: "#EFF4FF",overflow: "hidden",whiteSpace: "nowrap",textOverflow: "ellipsis",},text: {fontSize: 12,fill: "#262626",},},ports: { ...ports },},true);// 初始化左侧this.graphNode();// 快捷键this.initEvent();},//左侧数据graphNode() {const stencil = new Stencil({title: "组件",target: graph,search: false,collapsable: true,stencilGraphWidth: 280,stencilGraphHeight: 180,//左侧标题groups: [{title: "..工艺",name: "group1",graphHeight: 140,},{title: "丝1",name: "group2",graphHeight: 420,},{title: "丝2",name: "group3",graphHeight: 300,},{title: "丝3",name: "group4",graphHeight: 150,},{title: "设备区",name: "group5",graphHeight: 600,layoutOptions: {columns: 1,columnWidth: 230,},},],layoutOptions: {columns: 3,columnWidth: 80,rowHeight: 55,},});document.getElementById("stencil").appendChild(stencil.container);// 数据const rectNodes1 = this.silkData.map((item) =>graph.createNode({shape: "custom-rect",label: item.name,attrs: {body: {rx: 6,ry: 6,},},}));stencil.load(rectNodes1, "group1");  ...// 设备区数据const imageNodes = this.equipmentData.map((item) =>graph.createNode({shape: "dev-rect",label: item.name,attrs: {body: {rx: 6,ry: 6,},},}));stencil.load(imageNodes, "group5");},//快捷键与事件initEvent() {// 点击...graph.on("cell:click", (e) => {this.menuVisible = false;const { node } = e;const data = node.getData();console.log(data);});// Edge工具graph.on("cell:mouseenter", ({ cell }) => {if (cell.isEdge()) {cell.addTools([{name: "button-remove",args: {x: "30%",y: "50%",},},]);}});graph.on("cell:mouseleave", ({ cell }) => {if (cell.isEdge()) {cell.removeTool("button-remove");}});// copy cut pastegraph.bindKey(["meta+c", "ctrl+c"], () => {const cells = graph.getSelectedCells();if (cells.length) {graph.copy(cells);}return false;});graph.bindKey(["meta+x", "ctrl+x"], () => {const cells = graph.getSelectedCells();if (cells.length) {graph.cut(cells);}return false;});graph.bindKey(["meta+v", "ctrl+v"], () => {if (!graph.isClipboardEmpty()) {const cells = graph.paste({ offset: 32 });graph.cleanSelection();graph.select(cells);}return false;});//undo redograph.bindKey(["meta+z", "ctrl+z"], () => {if (graph.history.canUndo()) {graph.history.undo();}return false;});graph.bindKey(["meta+shift+z", "ctrl+shift+z"], () => {if (graph.history.canRedo()) {graph.history.redo();}return false;});// select allgraph.bindKey(["meta+shift+a", "ctrl+shift+a"], () => {const nodes = graph.getNodes();if (nodes) {graph.select(nodes);}});// deletegraph.bindKey(["backspace", "delete"], () => {// 删除选中的元素const cells = graph.getSelectedCells();if (cells.length) {graph.removeCells(cells);}});// zoomgraph.bindKey(["ctrl+1", "meta+1"], () => {const zoom = graph.zoom();if (zoom < 1.5) {graph.zoom(0.1);}});graph.bindKey(["ctrl+2", "meta+2"], () => {const zoom = graph.zoom();if (zoom > 0.5) {graph.zoom(-0.1);}});// 链接桩控制const showPorts = (ports, show) => {for (let i = 0, len = ports.length; i < len; i += 1) {ports[i].style.visibility = show ? "visible" : "hidden";}};graph.on("node:mouseenter", () => {const container = document.getElementById("graph-container");const ports = container.querySelectorAll(".x6-port-body");showPorts(ports, true);});graph.on("node:mouseleave", () => {const container = document.getElementById("graph-container");const ports = container.querySelectorAll(".x6-port-body");// if (this.isPortsShow) returnshowPorts(ports, false);});}, //保存graphSave() {this.saveData = graph.toJSON();const saveDataTrans = JSON.stringify(this.saveData); },//清空graphClear() {graph.clearCells();},},
};
</script> 

解决参考:
1.文档实例:https://blog.csdn.net/qq_30940855/article/details/132673446

2.代码实例:https://xiaoka2017.gitee.io/easy-flow/#?_blank

3.功能齐全:https://blog.csdn.net/asscas/article/details/132339707

在这里插入图片描述

4.事件总结:https://www.jianshu.com/p/5527f7ed2ed9

在这里插入图片描述

5.可预览及源代码:https://it.cha138.com/javascript/show-3623284.html

在这里插入图片描述

6.官方/自定义树拖拽:https://blog.csdn.net/qq_43156442/article/details/130991471

在这里插入图片描述

7.完整流程,初始配置 https://codeantenna.com/a/XiVq3k2WoO

在这里插入图片描述


http://www.ppmy.cn/news/1281623.html

相关文章

python 用OpenCV 将图片转视频

import os import cv2 import numpy as npcv2.VideoWriter&#xff08;&#xff09;参数 cv2.VideoWriter() 是 OpenCV 中用于创建视频文件的类。它的参数如下&#xff1a; filename&#xff1a;保存视频的文件名。 fourcc&#xff1a;指定视频编解码器的 FourCC 代码&#xf…

TensorFlow中的Scikit Flow

Scikit 流程 Scikit Flow 封装了很多的 TensorFlow 的最新的 API&#xff0c;并且将它们封装成了很类似于 Scikit Learn API 的样式。TensorFlow 的核心即是基于构建与执行某个图&#xff0c;这是一个非常棒&#xff0c;但也是非常难以直接上手的概念。如果我们看 Scikit Flow…

flutter学习-day19-国际化支持

&#x1f4da; 目录 介绍使用获取当前区域Locale监听语言切换实现国际化 添加依赖创建arb文件添加provider状态管理完成切换 本文学习和引用自《Flutter实战第二版》&#xff1a;作者&#xff1a;杜文 1. 介绍 默认情况下&#xff0c;Flutter SDK中的组件仅提供美国英语本地…

JS常用HOOK调试技术

hook技术 Hook 是一种钩子技术&#xff0c;在系统没有调用函数之前&#xff0c;钩子程序就先得到控制权&#xff0c;这时钩子函数既可以加工处理&#xff08;改变&#xff09;该函数的执行行为&#xff0c;也可以强制结束消息的传递。简单来说&#xff0c;修改原有的 JS 代码就…

设计模式 建造者模式 与 Spring Bean建造者 BeanDefinitionBuilder 源码与应用

建造者模式 定义: 将一个复杂对象的构建与它的表示分离&#xff0c;使得同样的构建过程可以创建不同的表示主要作用: 在用户不知道对象的建造过程和细节的情况下就可以直接创建复杂的对象如何使用: 用户只需要给出指定复杂对象的类型和内容, 建造者模式负责按顺序创建复杂对象…

http和https、http状态码分类

http协议是hyper text transfer protocol的缩写。 https是加了ssl外壳的http。https是一种通过计算机网络进行安全通信的传输协议&#xff0c;经由http进行通信&#xff0c;利用SSL/TLS建立全信道&#xff0c;加密数据包。https使用的主要目的是提供对网站服务器的身份认证&am…

C++中的存储类及其实例

文章目录 0. 语法1. 自动存储类自动存储类对象的属性自动存储类的例子 2. 外部存储类extern存储类对象的属性extern存储类的例子 3. 静态存储类静态存储类的属性静态存储类的例子 4. 寄存器存储类寄存器存储类对象的属性寄存器存储类例子 5. 可变&#xff08;mutable&#xff0…

Android 手机对于Arduino蓝牙控制解决方案

1、Android系统概述 ​ Android 系统是 Google 公司基于 Linux 内核开发的移动端操作系统,适用于智能手机智能手表平板电脑等设备&#xff0c;最新的版本为 7.1。Android系统具有免费开源的优势,任何企业与个人都可以查阅公开的 API 文档&#xff0c;并在自己开发的应用中通过调…

iOS使用CXCallObserver监听电话接听与拨打

初始化 import CallKitclass HomeViewController: UIViewController, CXCallObserverDelegate {public var cacheManager: TripCacheManager TripCacheManager.init()override func viewDidLoad() {super.viewDidLoad()self.callObserver.setDelegate(self, queue: DispatchQ…

如何处理uni-app中的跨平台差异

在uni-app中&#xff0c;可以通过条件编译和平台判断来处理跨平台差异代码。具体步骤如下&#xff1a; 在uni-app项目的根目录下&#xff0c;找到名为manifest.json的文件&#xff0c;这是uni-app的配置文件。 在manifest.json文件中&#xff0c;可以使用条件编译指令来处理不…

SperingBoot+vue文件上传下载预览

上传文件&#xff1a; 前端&#xff1a; 整个过程&#xff0c;就是在使用FormData 添加 上File&#xff08;这个Blob&#xff09;&#xff0c;并且key要和后台的名字对应上在点击上传按钮开始上传之前&#xff0c;使用了URL.createObjectURL(File)创建blobUrl&#xff0c;给了…

树莓派Pi4B简介

树莓派是什么&#xff1f;Raspberry Pi(中文名为“树莓派”,简写为RPi&#xff0c;或者RasPi/RPi)是为学生计算机编程教育而设计&#xff0c;只有信用卡大小的卡片式电脑&#xff0c;其系统基于Linux。 树莓派4B与树莓派3B/3B参数对比&#xff1a; 具体的实物图如下&#xff1a…

前端框架前置学习(4) AJAX

同步代码和异步代码 同步代码 浏览器按照我们书写代码的顺序一行一行地执行程序.浏览器会等待代码的解析和工作,在上一行代码完成之后才会执行下一行代码.这被称之为同步程序 逐行执行,需要原地等待结果 异步代码 异步编码技术使得程序可以在执行一个可能长期运行的任务的…

代码随想Day48 | 198.打家劫舍、213.打家劫舍II、337.打家劫舍III

198.打家劫舍 这一题用动态规划五步&#xff1a; 1. dp[i]&#xff1a;到位置i&#xff0c;获得的最大金额&#xff1b; 2. 递推&#xff1a;当前位置偷&#xff1a;dp[i-2]nums[i]&#xff1b;当前位置不偷&#xff1a;dp[i-1]&#xff1b;dp[i]max(偷&#xff0c;不偷)&…

03-C++ 类和对象

类和对象 1. 概述 1.1 对象 真实存在的事物1.2 类 多个对象抽取其共同特点形成的概念静态特征提取出来的概念称为成员变量&#xff0c;又名属性 动态特征提取出来的概念称为成员函数&#xff0c;又名方法1.3 类与对象的关系 在代码中先有类后有对象 一个类可以有多个对象 …

遇到DDOS怎么办,盾真的可以抗攻击吗

网络在以难以想象的速度发展&#xff0c;黑客们针对网络漏洞发起的攻击也从未停止&#xff0c;但复杂的网络环境让网络安全的维护更为艰难&#xff0c;如果游戏公司没有做好防御措施&#xff0c;黑客发起攻击只是时间问题。在网络攻击愈加多元化的今天&#xff0c;游戏行业可以…

Fortofy扫描安全漏洞解决——Unreleased Resource: Streams未释放资源漏洞

问题描述&#xff1a; 大部分 Unreleased Resource 问题只会导致一般的软件可靠性问题&#xff0c;但如果攻击者能够故意触发资源泄漏&#xff0c;该攻击者就有可能通过耗尽资源池的方式发起 denial of service 攻击。 问题代码&#xff1a; FileInputStream inputStream new…

Ai企业系统源码 Ai企联系统源码 商用去授权 支持文心 星火 GPT4等等20多种接口

智思Ai系统2.4.9版本去授权&#xff08;可商用&#xff09;支持市面上所有版本的接口例如&#xff1a;文心、星火、GPT4等等20多种接口&#xff01;代过审AI小程序类目&#xff01;&#xff01;&#xff01; 安装步骤&#xff1a; 1、在宝塔新建个站点&#xff0c;php版本使用…

Linux工具之vi/vim

文章目录 vi/vimvim的基本概念vim的基本操作命令模式命令集末行模式命令集vim的配置配置文件的位置常用配置选项 vi/vim 简单来说&#xff0c;vi和vim基本上都是所有Linux系统自带的编辑器&#xff0c;但是我们不排除在未来的某些极端条件下&#xff0c;需要利用vi/vim进行代码…

财务数据智能化:用AI工具高效制作财务分析PPT报告

Step1: 文章内容提取 WPS AI 直接打开文件&#xff0c;在AI对话框里输入下面指令&#xff1a; 假设你是财务总监&#xff0c;公司考虑与茅台进行业务合作、投资或收购&#xff0c;请整合下面茅台2021年和2022年的财务报告信息。整理有关茅台财务状况和潜在投资回报的信息&…
最新文章