|
@@ -3,6 +3,7 @@
|
|
|
<div id="container"></div>
|
|
|
<div id="stencil"></div>
|
|
|
<div id="graph-container"></div>
|
|
|
+ <div id="minimap"></div>
|
|
|
</div>
|
|
|
<el-button @click="submitAll" type="primary">保存</el-button>
|
|
|
<el-dialog
|
|
@@ -70,7 +71,7 @@ import { ElMessage, ElMessageBox } from 'element-plus'
|
|
|
import startBtn from './startBtn.vue'
|
|
|
import endBtn from './endBtn.vue'
|
|
|
import handleBtn from './handleBtn.vue'
|
|
|
-
|
|
|
+import { MiniMap } from "@antv/x6-plugin-minimap";
|
|
|
defineProps({
|
|
|
title: {
|
|
|
type: Object,
|
|
@@ -538,6 +539,11 @@ const antvInit = () => {
|
|
|
},
|
|
|
},
|
|
|
})
|
|
|
+ graph.use(
|
|
|
+ new MiniMap({
|
|
|
+ container: document.getElementById("minimap"),
|
|
|
+ })
|
|
|
+ );
|
|
|
const stencil = new Stencil({
|
|
|
title: '流程图',
|
|
|
target: graph,
|
|
@@ -767,21 +773,21 @@ const antvInit = () => {
|
|
|
component: endBtn,
|
|
|
ports: { ...ports },
|
|
|
})
|
|
|
- const r1 = graph.createNode({
|
|
|
- shape: 'start-btn',
|
|
|
- label: '开始',
|
|
|
- zIndex: 100,
|
|
|
- attrs: {
|
|
|
- body: {
|
|
|
- rx: 20,
|
|
|
- ry: 26,
|
|
|
- },
|
|
|
- },
|
|
|
- data: {
|
|
|
- title: 80,
|
|
|
- },
|
|
|
+ // const r1 = graph.createNode({
|
|
|
+ // shape: 'start-btn',
|
|
|
+ // label: '开始',
|
|
|
+ // zIndex: 100,
|
|
|
+ // attrs: {
|
|
|
+ // body: {
|
|
|
+ // rx: 20,
|
|
|
+ // ry: 26,
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // data: {
|
|
|
+ // title: 80,
|
|
|
+ // },
|
|
|
|
|
|
- })
|
|
|
+ // })
|
|
|
const r2 = graph.createNode({
|
|
|
shape: 'handle-btn',
|
|
|
label: '办理',
|
|
@@ -834,7 +840,9 @@ onMounted(() => {
|
|
|
})
|
|
|
</script>
|
|
|
<style lang="scss">
|
|
|
-
|
|
|
+#minimap .x6-widget-minimap{
|
|
|
+ border:1px solid #dcdcdc;
|
|
|
+}
|
|
|
.x6-widget-stencil-group-title {
|
|
|
display: none !important;
|
|
|
}
|