5153f0c199d8fc78f690b51373f6b96.png

第一步

在package.json中的dependencies中写入

    "jquery": "^3.6.0",

在package.json中的devDependencies中写入

"bpmn": "^0.2.2",
"bpmn-js": "^2.4.0",
"bpmn-moddle": "^5.1.5",
"camunda-bpmn-moddle": "^3.0.0"       

第二步

在vue文件中import三个文件

import axios from "axios"
import $ from 'jquery'
import BpmnViewer from 'bpmn-js';

第三步

获取到你需要的xml 这里是建了个本地服务器 把xml文件放进去 通过ajax获取

axios({
                    method: 'get',
                    url: 'http://192.168.33.71:8000/xml.txt',
                    responseType: 'stream'
                })
                .then(function(res) {
                    let bpmnxml = res.data.bpmn20Xml
                    // console.log(bpmnxml)
                    This.bpmnModule(bpmnxml, [], '', '')
                });

第四步 调用bpmnModule方法

//流程配置bpmn添加备注封装
            bpmnModule(diagramXML, taskId, completetaskId, beingtaskId, self) {
                var viewer = new BpmnViewer({
                    container: '#diagram'
                });

                viewer.importXML(diagramXML, function(err) {
                    if (err) {
                        console.log('77')
                    } else {
                        //访问各种图表服务 与Canvas图表进行交互以使图表适合当前可用的视口大小
                        $(".bjs-powered-by").css("display", "none");
                        var overlays = viewer.get('overlays'),
                            // canvas = viewer.get('canvas'),
                            elementRegistry = viewer.get('elementRegistry');
                        // modeling = viewer.get('modeling');
                        // Option 1: Color via Overlay

                        for (var i = 0; i < taskId.length; i++) {
                            this.remark(overlays, taskId[i], elementRegistry, self);
                        }
                        for (var j = 0; j < completetaskId.length; j++) {
                            this.complete(completetaskId[j]);
                        }

                        for (var k = 0; k < beingtaskId.length; k++) {
                            this.being(beingtaskId[k]);
                        }
                        // remark(taskId);
                        // remark('Task_0h8n41f');
                    }
                });
                // 元素加载延迟
                setTimeout(function() {
                    $(".viewport").prop("id", "bpmn_viewport")
                    var outline = document.getElementById("bpmn_viewport").getBoundingClientRect()

                    $("#diagram").css({
                        "width": outline.width + 350 + "px"
                    })
                    $("#diagram").css({
                        "height": outline.height + 200 + "px"
                    })
                }, 10)
            }
            remark(overlays, id, elementRegistry, self) {
                var task_click = elementRegistry.get(id);
                var $overlayHtml_click = $("<div class='click' id=click" + id +
                        " style='cursor: pointer'></div>")
                    .css({
                        width: task_click.width,
                        height: task_click.height
                    });
                overlays.add(id, {
                    position: {
                        top: 0,
                        left: 0

                    },
                    html: $overlayHtml_click

                });
                var content = "<div class='content' id=content" + id +
                    "><img src='../img/setting.png' class='content_img'/></div>";
                $("#click" + id).append(content);
                $(".content").css({
                    "position": "absolute",
                    "bottom": "0px",
                    "cursor": "pointer",
                    "padding": "10px",
                    "text-align": "left",
                    "line-height": "20px",
                    "font-size": "15px",
                    "color": "#fff",
                    "background": "#F0F0F0",
                    "border-radius": "10px",
                    "animation": "content 1s forwards",
                    "-ms-animation": "content 1s forwards",
                    "-moz-animation": "content 1s forwards",
                    "-webkit-animation": "content 1s forwards",
                    "-o-animation": "content 1s forwards",
                    "display": "none"
                });
                $(".content_img").attr("src", $(".setting_img").attr("src"));
                $(".content_img").css({
                    "width": "30px"
                });
                //点击控制内容显示隐藏
                $("#content" + id).css("left", $("#click" + id).width());

                $("#click" + id).mouseover(function() {
                    $("#content" + id).css('display', 'block');
                })
                $("#click" + id).mouseout(function() {
                    $("#content" + id).css('display', 'none');
                })
                $("#content" + id).mouseover(function() {
                    $("#content" + id).css('display', 'block');
                })
                $("#content" + id).mouseout(function() {
                    $("#content" + id).css('display', 'none');
                })
                $("#content" + id).click(function() {
                    $(".form_submit").css("display", "block");
                    self.id = id;
                    // 设置右侧设置界面显示
                    setTimeout(() => $(".form_submit").css("right", "0px"), 50);
                    // 设置右侧设置界面显示高度
                    var window_height = $(window).height();
                    $(".form_submit").height(window_height - 50);
                    // 设置bpmn图宽度
                    $(".viewport").prop("id", "bpmn_viewport")
                    var outline = document.getElementById("bpmn_viewport")
                        .getBoundingClientRect()
                    $("#diagram").css({
                        "width": outline.width + $(".form_submit").width() + 350
                    })

                    // xmlId传值
                    // setTimeout(function () {
                    return id;
                    // },100)

                })

            },
            complete(completetaskId) {
                for (var i = 0; i < $(".djs-shape").length; i++) {
                    if ($(".djs-shape:eq(" + i + ")").attr("data-element-id") == completetaskId) {
                        $(".djs-shape:eq(" + i + ") .djs-visual rect").css("stroke",
                            "rgb(67, 160, 71)");
                        $(".djs-shape:eq(" + i + ") .djs-visual text").css("fill", "rgb(67, 160, 71)");
                        $(".djs-shape:eq(" + i + ") .djs-visual rect").css("fill", "#fff");
                    }
                }
            },
            being(beingtaskId) {
                for (var i = 0; i < $(".djs-shape").length; i++) {
                    if ($(".djs-shape:eq(" + i + ")").attr("data-element-id") == beingtaskId) {
                        $(".djs-shape:eq(" + i + ") .djs-visual rect").css("stroke", "#FF69B4");
                        $(".djs-shape:eq(" + i + ") .djs-visual text").css("fill", "#FF69B4");
                        $(".djs-shape:eq(" + i + ") .djs-visual rect").css("fill", "#fff");


                    }
                }
            },