forked from opentiny/tiny-engine
feat: chart
This commit is contained in:
parent
21e2f3c2bf
commit
08e1312ad4
|
@ -0,0 +1,13 @@
|
|||
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>`
|
|
@ -1,11 +1,132 @@
|
|||
<template>
|
||||
<div class="containers">
|
||||
<div>Hello Vue!</div>
|
||||
<div class="canvas" ref="canvas"></div>
|
||||
<ul class="tools">
|
||||
<li class="button">
|
||||
<a href="javascript:" @click="$refs.refFile.click()">加载本地BPMN文件</a>
|
||||
<input type="file" id="files" ref="refFile" style="display: none" @change="loadXML" />
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:" ref="saveXML" title="保存为bpmn">保存为BPMN文件</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:" ref="saveSvg" title="保存为svg">保存为SVG图片</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BpmnModeler from 'bpmn-js/lib/Modeler'
|
||||
import { xmlStr } from '../mock/xmlStr.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'
|
||||
|
||||
export default {
|
||||
name: 'HelloComponent'
|
||||
name: 'ops-coffee',
|
||||
mounted() {
|
||||
this.init()
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bpmnModeler: null,
|
||||
container: null,
|
||||
canvas: null,
|
||||
xmlStr: xmlStr
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
const canvas = this.$refs.canvas
|
||||
this.bpmnModeler = new BpmnModeler({
|
||||
container: canvas
|
||||
})
|
||||
|
||||
this.createNewDiagram()
|
||||
},
|
||||
async createNewDiagram() {
|
||||
await this.bpmnModeler.importXML(this.xmlStr)
|
||||
this.success()
|
||||
},
|
||||
success() {
|
||||
this.addBpmnListener()
|
||||
},
|
||||
async loadXML() {
|
||||
const that = this
|
||||
const file = this.$refs.refFile.files[0]
|
||||
|
||||
var reader = new FileReader()
|
||||
reader.readAsText(file)
|
||||
reader.onload = function () {
|
||||
that.xmlStr = this.result
|
||||
that.createNewDiagram()
|
||||
}
|
||||
},
|
||||
async addBpmnListener() {
|
||||
const that = this
|
||||
const downloadLink = this.$refs.saveXML
|
||||
const downloadSvgLink = this.$refs.saveSvg
|
||||
|
||||
async function opscoffee() {
|
||||
let result = await that.saveSVG()
|
||||
const { svg } = result
|
||||
|
||||
that.setEncoded(downloadSvgLink, 'ops-coffee.svg', svg)
|
||||
|
||||
result = await that.saveXML()
|
||||
const { xml } = result
|
||||
|
||||
that.setEncoded(downloadLink, 'ops-coffee.bpmn', xml)
|
||||
}
|
||||
|
||||
opscoffee()
|
||||
this.bpmnModeler.on('commandStack.changed', opscoffee)
|
||||
},
|
||||
async saveSVG(done) {
|
||||
return await this.bpmnModeler.saveSVG(done)
|
||||
},
|
||||
async saveXML(done) {
|
||||
return await this.bpmnModeler.saveXML({ format: true }, done)
|
||||
},
|
||||
setEncoded(link, name, data) {
|
||||
const encodedData = encodeURIComponent(data)
|
||||
|
||||
if (data) {
|
||||
link.href = 'data:application/bpmn20-xml;charset=UTF-8,' + encodedData
|
||||
link.download = name
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.containers {
|
||||
width: 100%;
|
||||
height: calc(100vh - 82px);
|
||||
}
|
||||
|
||||
.canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tools {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
bottom: 20px;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
:deep(.djs-container) {
|
||||
background-image: linear-gradient(90deg, hsla(0, 0%, 78.4%, 0.15) 10%, transparent 0),
|
||||
linear-gradient(hsla(0, 0%, 78.4%, 0.15) 10%, transparent 0);
|
||||
background-size: 10px 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in New Issue