随笔- 7 文章- 0 评论- 0 阅读- 517

Bpmn基础

在HTML中使用

<!DOCTYPE html><html lang="zh-CN">

<head>

<title>运维 - BPMNJS</title>

<body>

var diagramXML = `<?xml version="1.0" encoding="UTF-8"?><bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd"><bpmn2:process id="Process_1" isExecutable="false"> <bpmn2:startEvent id="StartEvent_1" /></bpmn2:process><bpmndi:BPMNDiagram id="BPMNDiagram_1"> <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1"> <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1"> <dc:Bounds x="192" y="82" width="36" height="36" /> </bpmndi:BPMNShape> </bpmndi:BPMNPlane></bpmndi:BPMNDiagram></bpmn2:definitions>`

var bpmnModeler = new BpmnJS({

container: '#canvas'

});

bpmnModeler.importXML(diagramXML, function(err) {

if (err) {

return console.error('failed to load diagram', err);

}

});

</script></body>

</html>

样式图片

在Vue中使用

安装Bpmn-js

npm install bpmn-js --save

引入bpmn-js 的CSS,修改 src/main.js 文件

import 'bpmn-js/dist/assets/diagram-js.css'

import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'

import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'

import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css' // 样式

编写bpmn-model.vue 文件

</div>

</template>

import BpmnModeler from 'bpmn-js/lib/Modeler'

//import { CustomModeler } from '../components/nmms/customBpmn'

import { xmlStr } from '../mock/xmlStr'

export default {

name: 'ops-coffee',

mounted () {

this.init()

data () {

return {

bpmnModeler: null,

container: null,

canvas: null

}

methods: {

init () {

const canvas = this.$refs.canvas

this.bpmnModeler = new BpmnModeler ({

container: canvas

})

this.createNewDiagram()

createNewDiagram () {

try {

this.bpmnModeler.importXML(xmlStr)

} catch (err) {

console.log(err.message, err.warnings)

}

</script>

.containers {

width: 100%;

height: calc(100vh - 82px);

}

.canvas {

width: 100%;

height: 100%;

}

</style>

vue文件中引入了xmlStr，用来存放bpmn的xml数据，创建src/mock/xmlStr.js文件

export var xmlStr = `<?xml version="1.0" encoding="UTF-8"?>

<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">

<bpmn2:process id="Process_1" isExecutable="false">

<bpmn2:startEvent id="StartEvent_1" />

</bpmn2:process>

<bpmndi:BPMNDiagram id="BPMNDiagram_1">

<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">

<bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">

<dc:Bounds x="192" y="82" width="36" height="36" />

</bpmndi:BPMNShape>

</bpmndi:BPMNPlane>

</bpmndi:BPMNDiagram>

</bpmn2:definitions>`;

最后为.vue 文件添加路由