|
|
@@ -0,0 +1,105 @@
|
|
|
+<template>
|
|
|
+ <div class="main-box">
|
|
|
+ <el-button type="success" size="small" @click="handleZoom(0.1)"
|
|
|
+ >放大</el-button
|
|
|
+ >
|
|
|
+ <el-button type="warning" size="small" @click="handleZoom(-0.1)"
|
|
|
+ >缩小</el-button
|
|
|
+ >
|
|
|
+ <el-button type="info" size="small" @click="handleZoom(1)">适中</el-button>
|
|
|
+ <div class="canvas" ref="canvas"></div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import BpmnViewer from "bpmn-js/lib/Viewer";
|
|
|
+import MoveCanvasModule from "diagram-js/lib/navigation/movecanvas";
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ bpmnViewer: null,
|
|
|
+ scale: 1,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+ created() {},
|
|
|
+ methods: {
|
|
|
+ getImg(xmlUrl) {
|
|
|
+ this.bpmnViewer && this.bpmnViewer.destroy();
|
|
|
+ // this.$refs.canvas.innerHTML = "";
|
|
|
+ this.scale = 1; // 放大缩小比例
|
|
|
+ // 初始化canvas
|
|
|
+ this.bpmnViewer = new BpmnViewer({
|
|
|
+ container: this.$refs.canvas,
|
|
|
+ height: 250,
|
|
|
+ additionalModules: [MoveCanvasModule],
|
|
|
+ });
|
|
|
+ const self = this;
|
|
|
+ this.bpmnViewer.importXML(xmlUrl, function (err) {
|
|
|
+ if (err) {
|
|
|
+ console.error(err);
|
|
|
+ } else {
|
|
|
+ let canvas = self.bpmnViewer.get("canvas");
|
|
|
+ canvas.zoom("fit-viewport", "auto");
|
|
|
+ // nodeCodes为需要设置高亮颜色的部分的id的集合（xml文件中<flowNodeRef>****</flowNodeRef>标签里的部分），这个数据也是从接口获取，这里从xml中随便取出几个测试用
|
|
|
+ let nodeCodes = [
|
|
|
+ "Activity_1d2rrr0",
|
|
|
+ "StartEvent_1",
|
|
|
+ "Activity_1d2wp4b",
|
|
|
+ ];
|
|
|
+ // 调用设置高亮颜色class方法,这里可以根据接口获取的id集合情况，对不同的部分设置不同的class名，然后在css中设置样式
|
|
|
+ self.setNodeColor(nodeCodes, "nodeSuccess", canvas);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 设置高亮颜色的class
|
|
|
+ setNodeColor(nodeCodes, colorClass, canvas) {
|
|
|
+ for (let i = 0; i < nodeCodes.length; i++) {
|
|
|
+ canvas.addMarker(nodeCodes[i], colorClass);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 放大缩小，这里尽量设置flag的值小一点，这样每次放大缩小不会很多，避免放大超出父元素
|
|
|
+ handleZoom(flag) {
|
|
|
+ if (flag == 1) {
|
|
|
+ this.scale = flag;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.bpmnViewer.get("canvas").zoom(this.scale);
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 放大缩小倍数flag可以自行设置
|
|
|
+ if (flag < 0 && this.scale <= 1) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.scale += flag;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.bpmnViewer.get("canvas").zoom(this.scale);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ Provence(ev) {
|
|
|
+ ev.preventDefault();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ async mounted() {
|
|
|
+ document.body.addEventListener("contextmenu", this.Provence);
|
|
|
+ // this.xmlString = xmlStr;
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ document.body.removeEventListener("contextmenu", this.Provence);
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.canvas {
|
|
|
+ margin: 10px;
|
|
|
+}
|
|
|
+>>> .nodeSuccess:not(.djs-connection) {
|
|
|
+ .djs-visual {
|
|
|
+ > :nth-child(1) {
|
|
|
+ stroke: #f70e0e !important;
|
|
|
+ stroke-width: 3px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
Zn