1、安装jsPlumb：
npm install jsplumb2、 在使用的 .vue 文件中引入
import { jsPlumb } from "jsplumb";简单示例：
注意：注意看 id 为"item-3"和"item-9"那条数据的连线配置
<template><div id="wrapper"><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 v-if="flowChartData1"><div class="line-wrap"><div v-for="(item, index) in flowChartData1" :key="index" :id="item.id" class="state-item">{{ item.lable }}</div></div></div><!-- <div class="line-wrap"><div id="item-0" class="state-item-img"><img class="imgs" src="../assets/img/start.png" alt="" /></div><div id="item-1" class="state-item" style="color: green">改革处-经办人-发起</div><div id="item-2" class="state-item" style="color: red">承办部门-改革联系人填报/分发</div><div id="item-3" class="state-item-img"><img class="imgs" src="../assets/img/cent.png" alt="" /></div><div id="item-4" class="state-item">承办部门-部门主任-审批</div><div id="item-5" class="state-item">改革处-经办人-合规性审查</div><div id="item-6" class="state-item">改革处-处领导-合规性审查</div><div id="item-7" class="state-item-img"><img class="imgs" src="../assets/img/cent.png" alt="" /></div><div id="item-8" class="state-item-img"><img class="imgs" src="../assets/img/end.png" alt="" /></div></div><div class="line-wrap"><div id="item-9" class="state-item">改革处-经办人-接收待阅</div></div> --></div>
</template>
<script>
import { jsPlumb } from "jsplumb";
export default {name: "landing-page",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"}, {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: "" },],flowChartData1: [{ id: "item-9", lable: "改革处-经办人-接收待阅", nodeName: "handleOut", connectId: [{source: "item-9", target: "item-7"}] }, // 第二行数据]};},mounted() {this.initJsPlumb();},methods: {initJsPlumb() {let jsPlumbConnectList = [];// 处理数据this.flowChartData.forEach(ele=>{if(ele.connectId.length == 1) {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 {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)}})}})if(this.flowChartData1) {this.flowChartData1.forEach(ele=>{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)})}let plumbIns = jsPlumb.getInstance();plumbIns.ready(function () {jsPlumbConnectList.forEach(ele=>{plumbIns.connect(ele);})})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;
}
</style>
