vue使用 jsplumb 生成流程图
1、安装jsPlumb：
npm install jsplumb2、 在使用的 .vue 文件中引入
import { jsPlumb } from "jsplumb";简单示例：
注意：注意看 id 为"item-3"和"item-9"那条数据的连线配置
其中有几个小图片，可以用自己的本地图片代替（图标大小的）
<template>
<div id="wrapper">
<div class="line-wrap" v-if="flowChartData1.length == 2">
<div :id="flowChartData1[1].id" class="state-item">
{{ flowChartData1[1].lable }}
</div>
</div>
<div class="line-wrap">
<div v-for="(item, index) in flowChartData" :key="index" :id="item.id" :class="item.nodeName == 'start' || item.nodeName == 'end' || item.nodeName == 'summary' ? 'state-item-img' : 'state-item'">
<img v-if="item.nodeName == 'start'" class="imgs" src="../assets/img/start.png" alt="" />
<img v-else-if="item.nodeName == 'summary'" class="imgs" src="../assets/img/cent.png" alt="" />
<img v-else-if="item.nodeName == 'end'" class="imgs" src="../assets/img/end.png" alt="" />
<div v-else>
{{ item.lable }}
</div>
</div>
</div>
<div class="line-wrap" v-if="flowChartData1.length > 0 && flowChartData1.length < 3">
<div :id="flowChartData1[0].id" class="state-item">
{{ flowChartData1[0].lable }}
</div>
</div>
</div>
</template>
<script>
import { jsPlumb } from "jsplumb";
export default {
name: "LiuChengTu",
data() {
return {
// 一行数据的
// flowChartData: [
// { id: "item-0", lable: "", nodeName: "start", connectId: [{source: "item-0", target: "item-1"}] }, // 开始
// { id: "item-1", lable: "改革处-经办人-发起", nodeName: "", connectId: [{source: "item-1", target: "item-2"}] },
// { id: "item-2", lable: "承办部门-改革联系人填报/分发", nodeName: "", connectId: [{source: "item-2", target: "item-3"}] },
// { id: "item-3", lable: "", nodeName: "summary", connectId: [{source: "item-3", target: "item-4"}] }, // 汇总/分发
// { id: "item-4", lable: "承办部门-部门主任-审批", nodeName: "", connectId: [{source: "item-4", target: "item-5"}] },
// { id: "item-5", lable: "改革处-经办人-合规性审查", nodeName: "", connectId: [{source: "item-5", target: "item-6"}] },
// { id: "item-6", lable: "改革处-处领导-合规性审查", nodeName: "", connectId: [{source: "item-6", target: "item-7"}] },
// { id: "item-7", lable: "", nodeName: "summary", connectId: [{source: "item-7", target: "item-8"}] }, // 汇总/分发
// { id: "item-8", lable: "", nodeName: "end", connectId: [] }, // 结束
// ],
// 两行数据的
// flowChartData: [
// { id: "item-0", lable: "", nodeName: "start", connectId: [{source: "item-0", target: "item-1"}] }, // 开始
// { id: "item-1", lable: "改革处-经办人-发起", nodeName: "", connectId: [{source: "item-1", target: "item-2"}] },
// { id: "item-2", lable: "承办部门-改革联系人填报/分发", nodeName: "", connectId: [{source: "item-2", target: "item-3"}] },
// { id: "item-3", lable: "", nodeName: "summary", connectId: [{source: "item-3", target: "item-4"}, {source: "item-3", target: "item-9"}] }, // 汇总/分发
// { id: "item-4", lable: "承办部门-部门主任-审批", nodeName: "", connectId: [{source: "item-4", target: "item-5"}] },
// { id: "item-5", lable: "改革处-经办人-合规性审查", nodeName: "", connectId: [{source: "item-5", target: "item-6"}] },
// { id: "item-6", lable: "改革处-处领导-合规性审查", nodeName: "", connectId: [{source: "item-6", target: "item-7"}] },
// { id: "item-7", lable: "", nodeName: "summary", connectId: [{source: "item-7", target: "item-8"}] }, // 汇总/分发
// { id: "item-8", lable: "", nodeName: "end", connectId: [] }, // 结束
// { id: "item-9", lable: "改革处-经办人-接收待阅", nodeName: "handleOut", connectId: [{source: "item-9", target: "item-7"}] }, // 第二行数据
// ],
// 三行数据的
flowChartData: [
{ id: "item-0", lable: "", nodeName: "start", connectId: [{source: "item-0", target: "item-1"}] }, // 开始
{ id: "item-1", lable: "改革处-经办人-发起", nodeName: "", connectId: [{source: "item-1", target: "item-2"}] },
{ id: "item-2", lable: "承办部门-改革联系人填报/分发", nodeName: "", connectId: [{source: "item-2", target: "item-3"}] },
{ id: "item-3", lable: "", nodeName: "summary", connectId: [{source: "item-3", target: "item-4"}, {source: "item-3", target: "item-9"}, {source: "item-3", target: "item-10"}] }, // 汇总/分发
{ id: "item-4", lable: "承办部门-部门主任-审批", nodeName: "", connectId: [{source: "item-4", target: "item-5"}] },
{ id: "item-5", lable: "改革处-经办人-合规性审查", nodeName: "", connectId: [{source: "item-5", target: "item-6"}] },
{ id: "item-6", lable: "改革处-处领导-合规性审查", nodeName: "", connectId: [{source: "item-6", target: "item-7"}] },
{ id: "item-7", lable: "", nodeName: "summary", connectId: [{source: "item-7", target: "item-8"}] }, // 汇总/分发
{ id: "item-8", lable: "", nodeName: "end", connectId: [] }, // 结束
{ id: "item-9", lable: "改革处-经办人-接收待阅", nodeName: "handleOut", connectId: [{source: "item-9", target: "item-7"}] }, // 第二行数据
{ id: "item-10", lable: "改革处-经办人-接收待阅123", nodeName: "handleOut", connectId: [{source: "item-10", target: "item-7"}] }, // 第二行数据
],
flowChartData1: []
};
},
mounted() {
this.initJsPlumb();
},
methods: {
initJsPlumb() {
let jsPlumbConnectList = [];
let listData = [];
let fenfaData = [];
// 处理数据
this.flowChartData.forEach(ele=>{
if(ele.connectId.length == 1) {
if(ele.nodeName == "handleOut") {
fenfaData.push(ele);
}else {
listData.push(ele);
let plumbInsInfo = {
source: ele.connectId[0].source,
target: ele.connectId[0].target,
anchor: [
"Left",
"Right",
"Top",
"Bottom",
[0.3, 0, 0, -1],
[0.7, 0, 0, -1],
[0.3, 1, 0, 1],
[0.7, 1, 0, 1],
],
connector: [
"Flowchart",
{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },
],
endpoint: "Blank",
overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay
// 添加样式
paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector
}
jsPlumbConnectList.push(plumbInsInfo)
}
}else if(ele.connectId.length == 1){
if(ele.nodeName == "handleOut") {
fenfaData.push(ele);
}else {
listData.push(ele);
ele.connectId.forEach((itemInfo,index)=>{
if(index == 0) {
let plumbInsInfo = {
source: itemInfo.source,
target: itemInfo.target,
anchor: [
"Left",
"Right",
"Top",
"Bottom",
[0.3, 0, 0, -1],
[0.7, 0, 0, -1],
[0.3, 1, 0, 1],
[0.7, 1, 0, 1],
],
connector: [
"Flowchart",
{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },
],
endpoint: "Blank",
overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay
// 添加样式
paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector
}
jsPlumbConnectList.push(plumbInsInfo)
}else {
let plumbInsInfo = {
source: itemInfo.source,
target: itemInfo.target,
anchor: ["Bottom", "Left"],
connector: [
"Flowchart",
{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },
],
endpoint: "Blank",
overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay
// 添加样式
paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector
}
jsPlumbConnectList.push(plumbInsInfo)
}
})
}
}else {
if(ele.nodeName == "handleOut") {
fenfaData.push(ele);
}else {
listData.push(ele);
ele.connectId.forEach((itemInfo,index)=>{
if(index == 0) {
let plumbInsInfo = {
source: itemInfo.source,
target: itemInfo.target,
anchor: [
"Left",
"Right",
"Top",
"Bottom",
[0.3, 0, 0, -1],
[0.7, 0, 0, -1],
[0.3, 1, 0, 1],
[0.7, 1, 0, 1],
],
connector: [
"Flowchart",
{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },
],
endpoint: "Blank",
overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay
// 添加样式
paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector
}
jsPlumbConnectList.push(plumbInsInfo)
}else if(index == 1) {
let plumbInsInfo = {
source: itemInfo.source,
target: itemInfo.target,
anchor: ["Bottom", "Left"],
connector: [
"Flowchart",
{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },
],
endpoint: "Blank",
overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay
// 添加样式
paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector
}
jsPlumbConnectList.push(plumbInsInfo)
}else {
let plumbInsInfo = {
source: itemInfo.source,
target: itemInfo.target,
anchor: ["Top", "Left"],
connector: [
"Flowchart",
{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },
],
endpoint: "Blank",
overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay
// 添加样式
paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector
}
jsPlumbConnectList.push(plumbInsInfo)
}
})
}
}
})
this.flowChartData = listData;
this.flowChartData1 = fenfaData;
if(this.flowChartData1.length > 0) {
this.flowChartData1.forEach((ele, index)=>{
if(index==0) {
let plumbInsInfo = {
source: ele.connectId[0].source,
target: ele.connectId[0].target,
anchor: ["Right", "Bottom"],
connector: [
"Flowchart",
{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },
],
endpoint: "Blank",
overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay
// 添加样式
paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector
}
jsPlumbConnectList.push(plumbInsInfo)
}else {
let plumbInsInfo = {
source: ele.connectId[0].source,
target: ele.connectId[0].target,
anchor: ["Right", "Top"],
connector: [
"Flowchart",
{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },
],
endpoint: "Blank",
overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay
// 添加样式
paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector
}
jsPlumbConnectList.push(plumbInsInfo)
}
})
}
setTimeout(() => {
let plumbIns = jsPlumb.getInstance();
plumbIns.ready(function () {
jsPlumbConnectList.forEach(ele=>{
plumbIns.connect(ele);
})
})
}, 500);
return;
// let plumbIns = jsPlumb.getInstance();
plumbIns.ready(function () {
plumbIns.connect({
// 对应上述基本概念
source: "item-0",
target: "item-1",
anchor: [
"Left",
"Right",
"Top",
"Bottom",
[0.3, 0, 0, -1],
[0.7, 0, 0, -1],
[0.3, 1, 0, 1],
[0.7, 1, 0, 1],
],
connector: [
"Flowchart",
{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },
],
endpoint: "Blank",
overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay
// 添加样式
paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector
// endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint
});
plumbIns.connect({
// 对应上述基本概念
source: "item-1",
target: "item-2",
anchor: [
"Left",
"Right",
"Top",
"Bottom",
[0.3, 0, 0, -1],
[0.7, 0, 0, -1],
[0.3, 1, 0, 1],
[0.7, 1, 0, 1],
],
connector: [
"Flowchart",
{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },
],
endpoint: "Blank",
overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay
// 添加样式
paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector
// endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint
});
plumbIns.connect({
// 对应上述基本概念
source: "item-2",
target: "item-3",
anchor: [
"Left",
"Right",
"Top",
"Bottom",
[0.3, 0, 0, -1],
[0.7, 0, 0, -1],
[0.3, 1, 0, 1],
[0.7, 1, 0, 1],
],
connector: [
"Flowchart",
{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },
],
endpoint: "Blank",
overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay
// 添加样式
paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector
// endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint
});
plumbIns.connect({
// 对应上述基本概念
source: "item-3",
target: "item-4",
anchor: [
"Left",
"Right",
"Top",
"Bottom",
[0.3, 0, 0, -1],
[0.7, 0, 0, -1],
[0.3, 1, 0, 1],
[0.7, 1, 0, 1],
],
connector: [
"Flowchart",
{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },
],
endpoint: "Blank",
overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay
// 添加样式
paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector
// endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint
});
plumbIns.connect({
// 对应上述基本概念
source: "item-4",
target: "item-5",
anchor: [
"Left",
"Right",
"Top",
"Bottom",
[0.3, 0, 0, -1],
[0.7, 0, 0, -1],
[0.3, 1, 0, 1],
[0.7, 1, 0, 1],
],
connector: [
"Flowchart",
{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },
],
endpoint: "Blank",
overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay
// 添加样式
paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector
// endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint
});
plumbIns.connect({
// 对应上述基本概念
source: "item-5",
target: "item-6",
anchor: [
"Left",
"Right",
"Top",
"Bottom",
[0.3, 0, 0, -1],
[0.7, 0, 0, -1],
[0.3, 1, 0, 1],
[0.7, 1, 0, 1],
],
connector: [
"Flowchart",
{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },
],
endpoint: "Blank",
overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay
// 添加样式
paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector
// endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint
});
plumbIns.connect({
// 对应上述基本概念
source: "item-6",
target: "item-7",
anchor: [
"Left",
"Right",
"Top",
"Bottom",
[0.3, 0, 0, -1],
[0.7, 0, 0, -1],
[0.3, 1, 0, 1],
[0.7, 1, 0, 1],
],
connector: [
"Flowchart",
{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },
],
endpoint: "Blank",
overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay
// 添加样式
paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector
// endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint
});
plumbIns.connect({
// 对应上述基本概念
source: "item-7",
target: "item-8",
anchor: [
"Left",
"Right",
"Top",
"Bottom",
[0.3, 0, 0, -1],
[0.7, 0, 0, -1],
[0.3, 1, 0, 1],
[0.7, 1, 0, 1],
],
connector: [
"Flowchart",
{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },
],
endpoint: "Blank",
overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay
// 添加样式
paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector
// endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint
});
plumbIns.connect({
// 对应上述基本概念
source: "item-3",
target: "item-9",
anchor: ["Bottom", "Left"],
connector: [
"Flowchart",
{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },
],
endpoint: "Blank",
overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay
// 添加样式
paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector
// endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint
});
plumbIns.connect({
// 对应上述基本概念
source: "item-9",
target: "item-7",
anchor: ["Right", "Bottom"],
connector: [
"Flowchart",
{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },
],
endpoint: "Blank",
overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay
// 添加样式
paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector
// endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint
});
});
},
},
};
</script>
<style lang="scss" scoped>
#wrapper {
background: radial-gradient(
ellipse at top left,
rgba(255, 255, 255, 1) 40%,
rgba(229, 229, 229, 0.9) 100%
);
padding: 60px 80px;
}
.state-item-img {
width: 50px;
height: 50px;
color: #606266;
border: 2px solid rgba(0, 0, 0, 0);
text-align: center;
line-height: 30px;
font-family: sans-serif;
border-radius: 4px;
margin-right: 56px;
font-size: 14px;
padding: 5px 0px;
.imgs {
width: 50px;
height: 50px;
}
}
.state-item {
width: 120px;
height: 100px;
color: #606266;
background: #f6f6f6;
border: 2px solid rgba(0, 0, 0, 0.05);
text-align: center;
line-height: 30px;
font-family: sans-serif;
border-radius: 4px;
margin-right: 60px;
font-size: 14px;
padding: 5px 10px;
display: flex;
align-items: center;
}
.line-wrap {
display: flex;
margin-bottom: 100px;
justify-content: center;
align-items: center;
}
.line-wrap1 {
display: flex;
margin-bottom: 100px;
justify-content: center;
align-items: center;
}
</style>