tony
3 years ago
committed by
Gitee
commit
2dfc2c4010
@ -0,0 +1,12 @@
|
|||||||
|
import inherits from "inherits";
|
||||||
|
import Viewer from "bpmn-js/lib/Viewer";
|
||||||
|
import ZoomScrollModule from "diagram-js/lib/navigation/zoomscroll";
|
||||||
|
import MoveCanvasModule from "diagram-js/lib/navigation/movecanvas";
|
||||||
|
function CustomViewer(options) {
|
||||||
|
Viewer.call(this, options);
|
||||||
|
}
|
||||||
|
inherits(CustomViewer, Viewer);
|
||||||
|
CustomViewer.prototype._modules = [].concat(Viewer.prototype._modules, [ZoomScrollModule, MoveCanvasModule]);
|
||||||
|
export {
|
||||||
|
CustomViewer
|
||||||
|
};
|
||||||
@ -0,0 +1,244 @@
|
|||||||
|
<template>
|
||||||
|
<div class="containers main-box">
|
||||||
|
<el-button type="success"
|
||||||
|
size="small"
|
||||||
|
icon="el-icon-zoom-in"
|
||||||
|
@click="zoomViewport(true)">放大</el-button>
|
||||||
|
<el-button type="warning"
|
||||||
|
size="small"
|
||||||
|
icon="el-icon-zoom-out"
|
||||||
|
@click="zoomViewport(false)">缩小</el-button>
|
||||||
|
<el-button type="info"
|
||||||
|
size="small"
|
||||||
|
icon="el-icon-rank"
|
||||||
|
@click="fitViewport">适中</el-button>
|
||||||
|
<div class="canvas" ref="flowCanvas"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "FlowView",
|
||||||
|
props: {
|
||||||
|
xmlData: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
taskList: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
bpmnViewer: null
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
xmlData: function(val) {
|
||||||
|
if (val) {
|
||||||
|
this.getImg(val)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// 生成实例
|
||||||
|
this.bpmnViewer && this.bpmnViewer.destroy();
|
||||||
|
this.bpmnViewer = new BpmnViewer({
|
||||||
|
container: this.$refs.flowCanvas,
|
||||||
|
height: 'calc(100vh - 200px)',
|
||||||
|
});
|
||||||
|
this.getImg(this.xmlData)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 获取流程图片
|
||||||
|
async getImg(xmlUrl) {
|
||||||
|
const self = this
|
||||||
|
try {
|
||||||
|
await this.bpmnViewer.importXML(xmlUrl);
|
||||||
|
this.fitViewport()
|
||||||
|
if (this.taskList !==undefined && this.taskList.length > 0 ) {
|
||||||
|
this.fillColor()
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err.message, err.warnings)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 设置高亮颜色的class
|
||||||
|
setNodeColor(nodeCodes, colorClass, canvas) {
|
||||||
|
for (let i = 0; i < nodeCodes.length; i++) {
|
||||||
|
canvas.addMarker(nodeCodes[i], colorClass);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 让图能自适应屏幕
|
||||||
|
fitViewport() {
|
||||||
|
this.zoom = this.bpmnViewer.get('canvas').zoom("fit-viewport", "auto")
|
||||||
|
},
|
||||||
|
// 放大缩小
|
||||||
|
zoomViewport(zoomIn = true) {
|
||||||
|
this.zoom = this.bpmnViewer.get('canvas').zoom()
|
||||||
|
this.zoom += (zoomIn ? 0.1 : -0.1)
|
||||||
|
if(this.zoom >= 0.2) this.bpmnViewer.get('canvas').zoom(this.zoom)
|
||||||
|
},
|
||||||
|
|
||||||
|
// 设置高亮颜色的
|
||||||
|
fillColor() {
|
||||||
|
const canvas = this.bpmnViewer.get('canvas')
|
||||||
|
this.bpmnViewer.getDefinitions().rootElements[0].flowElements.forEach(n => {
|
||||||
|
const completeTask = this.taskList.find(m => m.key === n.id)
|
||||||
|
const todoTask = this.taskList.find(m => !m.completed)
|
||||||
|
const endTask = this.taskList[this.taskList.length - 1]
|
||||||
|
if (n.$type === 'bpmn:UserTask') {
|
||||||
|
if (completeTask) {
|
||||||
|
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
|
||||||
|
n.outgoing?.forEach(nn => {
|
||||||
|
const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
|
||||||
|
if (targetTask) {
|
||||||
|
if (todoTask && completeTask.key === todoTask.key && !todoTask.completed){
|
||||||
|
canvas.addMarker(nn.id, todoTask.completed ? 'highlight' : 'highlight-todo')
|
||||||
|
canvas.addMarker(nn.targetRef.id, todoTask.completed ? 'highlight' : 'highlight-todo')
|
||||||
|
}else {
|
||||||
|
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
|
||||||
|
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 排他网关
|
||||||
|
else if (n.$type === 'bpmn:ExclusiveGateway') {
|
||||||
|
if (completeTask) {
|
||||||
|
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
|
||||||
|
n.outgoing?.forEach(nn => {
|
||||||
|
const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
|
||||||
|
if (targetTask) {
|
||||||
|
|
||||||
|
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
|
||||||
|
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
// 并行网关
|
||||||
|
else if (n.$type === 'bpmn:ParallelGateway') {
|
||||||
|
if (completeTask) {
|
||||||
|
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
|
||||||
|
n.outgoing?.forEach(nn => {
|
||||||
|
debugger
|
||||||
|
const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
|
||||||
|
if (targetTask) {
|
||||||
|
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
|
||||||
|
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if (n.$type === 'bpmn:StartEvent') {
|
||||||
|
n.outgoing.forEach(nn => {
|
||||||
|
const completeTask = this.taskList.find(m => m.key === nn.targetRef.id)
|
||||||
|
if (completeTask) {
|
||||||
|
canvas.addMarker(nn.id, 'highlight')
|
||||||
|
canvas.addMarker(n.id, 'highlight')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
else if (n.$type === 'bpmn:EndEvent') {
|
||||||
|
if (endTask.key === n.id && endTask.completed) {
|
||||||
|
canvas.addMarker(n.id, 'highlight')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
@import "../../../../../node_modules/bpmn-js/dist/assets/diagram-js.css";
|
||||||
|
@import "../../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
|
||||||
|
@import "../../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
|
||||||
|
@import "../../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
|
||||||
|
.bjs-powered-by {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.view-mode {
|
||||||
|
.el-header, .el-aside, .djs-palette, .bjs-powered-by {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.el-loading-mask {
|
||||||
|
background-color: initial;
|
||||||
|
}
|
||||||
|
.el-loading-spinner {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.containers {
|
||||||
|
// background-color: #ffffff;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
.canvas {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.panel {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 50px;
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
.load {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.el-form-item__label{
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.djs-palette{
|
||||||
|
left: 0px!important;
|
||||||
|
top: 0px;
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.djs-container svg {
|
||||||
|
min-height: 650px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight.djs-shape .djs-visual > :nth-child(1) {
|
||||||
|
fill: green !important;
|
||||||
|
stroke: green !important;
|
||||||
|
fill-opacity: 0.2 !important;
|
||||||
|
}
|
||||||
|
.highlight.djs-shape .djs-visual > :nth-child(2) {
|
||||||
|
fill: green !important;
|
||||||
|
}
|
||||||
|
.highlight.djs-shape .djs-visual > path {
|
||||||
|
fill: green !important;
|
||||||
|
fill-opacity: 0.2 !important;
|
||||||
|
stroke: green !important;
|
||||||
|
}
|
||||||
|
.highlight.djs-connection > .djs-visual > path {
|
||||||
|
stroke: green !important;
|
||||||
|
}
|
||||||
|
.highlight-todo.djs-connection > .djs-visual > path {
|
||||||
|
stroke: orange !important;
|
||||||
|
stroke-dasharray: 4px !important;
|
||||||
|
fill-opacity: 0.2 !important;
|
||||||
|
}
|
||||||
|
.highlight-todo.djs-shape .djs-visual > :nth-child(1) {
|
||||||
|
fill: orange !important;
|
||||||
|
stroke: orange !important;
|
||||||
|
stroke-dasharray: 4px !important;
|
||||||
|
fill-opacity: 0.2 !important;
|
||||||
|
}
|
||||||
|
.overlays-div {
|
||||||
|
font-size: 10px;
|
||||||
|
color: red;
|
||||||
|
width: 100px;
|
||||||
|
top: -20px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue