vue使用 jsplumb 生成流程图

1、安装jsPlumb:

javascript 复制代码
npm install jsplumb

2、 在使用的 .vue 文件中引入

javascript 复制代码
import { jsPlumb } from "jsplumb";

简单示例:

注意:注意看 id 为"item-3"和"item-9"那条数据的连线配置

其中有几个小图片,可以用自己的本地图片代替(图标大小的)

html 复制代码
<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;
  .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>
相关推荐
Sammyyyyy11 分钟前
Node.js 做 Web 后端优势为什么这么大?
开发语言·前端·javascript·后端·node.js·servbay
小薛博客17 分钟前
BigDecimal的使用
java
妮妮喔妮22 分钟前
Webpack 有哪些特性?构建速度?如何优化?
前端·webpack·node.js
ST.J28 分钟前
webpack笔记
前端·笔记·webpack
你我约定有三32 分钟前
软件启动时加配置文件 vs 不加配置文件
java·分布式·zookeeper
27^×39 分钟前
Java 内存模型与垃圾回收机制详解
java·开发语言
syty202041 分钟前
flink 伪代码
java·windows·flink
Baklib梅梅1 小时前
2025 年 8 个最佳网站内容管理系统(CMS)
前端·ruby on rails·前端框架·ruby
IT_陈寒1 小时前
🔥5个必学的JavaScript性能黑科技:让你的网页速度提升300%!
前端·人工智能·后端
Bling_Bling_11 小时前
面试常考:js中 Map和 Object 的区别
开发语言·前端·javascript