ant的modal被画布覆盖住，请问该如何调整？
点击预览按键，本应该弹出modal对话框，但是由于页面中还存在画布，导致modal一直出现不了，我发现我把画布的代码注释掉就能出现弹窗，
试过直接修改z-index，但还是没有效果
请问有什么办法可以两全呢？请赐教，不胜感激。
此为完整代码：
<template>
<div class="logic-flow-view">
<a-modal
title="模态框标题"
:visible="isVisible"
:confirm-loading="confirmLoading"
@ok="handle_Ok"
@cancel="handleCancel"
>
<p>{{ ModalText }}</p>
</a-modal>
<div id="header">
<a-icon type="arrow-left" style="font-size: 25px"
@click="handleOk"/>
<div id="titleStyle">{{ productTitle }}</div>
<a-button style="margin-left: 20px" type="default" @click="openDrawer">产品配置</a-button>
<a-button @click="preview" style="margin-left: 550px" type="primary">预览</a-button>
<a-button @click="updateGraph" style="margin-left: 30px" type="primary">保存</a-button>
<a-button style="margin-left: 30px" @click="submitProduct" type="danger">提交审核</a-button>
<a-drawer
title="产品基本配置"
placement="top"
:closable="false"
:visible="visible"
@close="closeDrawer"
height="335px"
>
<a-descriptions>
<a-descriptions-item label="产品负责人">
{{productData.op_name}}
</a-descriptions-item>
<a-descriptions-item label="负责人工号">
{{productData.op_number}}
</a-descriptions-item>
<a-descriptions-item label="产品名称">
{{productData.name}}
</a-descriptions-item>
<a-descriptions-item label="产品类型">
<span v-if="productData.type">定期存款</span>
<span v-else>活期存款</span>
</a-descriptions-item>
<a-descriptions-item>
<template slot="label">
<span v-if="productData.type">产品期限</span>
<span v-else>转存期限</span>
</template>
<span>{{productData.term}}天</span>
</a-descriptions-item>
<a-descriptions-item label="年化利率">
{{productData.annual_rate}}%
</a-descriptions-item>
<a-descriptions-item label="起存金额">
{{productData.initial_money}}元
</a-descriptions-item>
<a-descriptions-item label="递增金额">
{{productData.increase_money}}元
</a-descriptions-item>
<a-descriptions-item label="单人限额">
{{productData.personal_limit}}元
</a-descriptions-item>
<a-descriptions-item label="单日限额">
{{productData.daily_limit}}元
</a-descriptions-item>
<a-descriptions-item label="风险等级">
<span v-if="productData.risk_id === 0">低</span>
<span v-else-if="productData.risk_id === 1">中</span>
<span v-else>高</span>
</a-descriptions-item>
<a-descriptions-item label="起息日">
{{productData.publish_day}}
</a-descriptions-item>
<a-descriptions-item label="结息方式">
<span v-if="productData.interest_way === 0">到期付息</span>
<span v-else-if="productData.interest_way === 1">按月付息</span>
<span v-else>按年付息</span>
</a-descriptions-item>
<a-descriptions-item label="库存量">
{{productData.amount}}
</a-descriptions-item>
<a-descriptions-item label="地域限制">
{{productData.region}}
</a-descriptions-item>
<a-descriptions-item label="产品介绍" :span="3">
{{productData.introduction}}
</a-descriptions-item>
</a-descriptions>
</a-drawer>
</div>
<!-- 辅助工具栏 -->
<Control
class="demo-control"
v-if="lf"
:lf="lf"
@catData="$_catData"
></Control>
<!-- 节点面板 -->
<NodePanel v-if="lf" :lf="lf" :nodeList="nodeList"></NodePanel>
<!-- 画布 -->
<div id="LF-view" ref="flowContainer">
</div>
<!-- 用户节点自定义操作面板 -->
<AddPanel
v-if="showAddPanel"
class="add-panel"
:style="addPanelStyle"
:lf="lf"
:nodeData="addClickNode"
@addNodeFinish="hideAddPanel"
>
</AddPanel>
<!-- 属性面板 -->
<el-drawer
title="节点属性"
:visible.sync="dialogVisible"
direction="rtl"
size="500px"
@click="console.log(nodeData.text.value)"
:before-close="closeDialog">
<PropertyDialog
v-if="dialogVisible"
:nodeData="clickNode"
:lf="lf"
@setPropertiesFinish="closeDialog"
></PropertyDialog>
</el-drawer>
<!-- 数据查看面板 -->
<el-dialog
title="数据"
:visible.sync="dataVisible"
width="50%">
<DataDialog :graphData="graphData"></DataDialog>
</el-dialog>
</div>
</template>
<script>
import QRcode from '../components/preview/QRcode'
import LogicFlow from '@logicflow/core'
import { Menu, Snapshot,BpmnElement } from '@logicflow/extension'
import '@logicflow/core/dist/style/index.css'
import '@logicflow/extension/lib/style/index.css'
import NodePanel from './LFComponents/NodePanel'
import AddPanel from './LFComponents/AddPanel'
import Control from './LFComponents/Control'
import PropertyDialog from './PropertySetting/PropertyDialog'
import DataDialog from './LFComponents/DataDialog'
import { nodeList } from './config'
import {
registerStart,
registerUser,
registerEnd,
registerPush,
registerDownload,
registerPolyline,
registerTask,
registerConnect,
} from './registerNode'
import {addGraph, ifHasGraph, updateGraph} from "../api/graph";
import {showProductById, submitToAdmin} from "../api/product";
const demoData = `<bpmn:definitions id="Definitions_2ridhq5" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="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" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" targetNamespace="http://bpmn.io/schema/bpmn" exporter="bpmn-js (https://demo.bpmn.io)" exporterVersion="7.3.0"> <bpmn:process id="Process_0gc60fc" isExecutable="false"> <bpmn:startEvent id="Event_2715eoc" name="开始"> <bpmn:outgoing>Flow_33j4jra</bpmn:outgoing></bpmn:startEvent> <bpmn:userTask id="Activity_06ejpb9" name="12122"> <bpmn:incoming>Flow_33j4jra</bpmn:incoming> <bpmn:outgoing>Flow_0std6pu</bpmn:outgoing></bpmn:userTask> <bpmn:userTask id="Activity_2isko2b" name="77777">
<bpmn:incoming>Flow_0std6pu</bpmn:incoming> <bpmn:outgoing>Flow_081nvcj</bpmn:outgoing></bpmn:userTask> <bpmn:endEvent id="Event_3o35ddb" name="结束"> <bpmn:incoming>Flow_081nvcj</bpmn:incoming></bpmn:endEvent> <bpmn:sequenceFlow id="Flow_33j4jra" sourceRef="Event_2715eoc" targetRef="Activity_06ejpb9"/> <bpmn:sequenceFlow id="Flow_0std6pu" sourceRef="Activity_06ejpb9" targetRef="Activity_2isko2b"/> <bpmn:sequenceFlow id="Flow_081nvcj" sourceRef="Activity_2isko2b" targetRef="Event_3o35ddb"/> </bpmn:process> <bpmndi:BPMNDiagram id="BPMNDiagram_1"> <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_0gc60fc"> <bpmndi:BPMNEdge id="Flow_33j4jra_di" bpmnElement="Flow_33j4jra"> <di:waypoint x="318" y="220"/> <di:waypoint x="374" y="220"/> <di:waypoint x="374" y="240"/> <di:waypoint x="430" y="240"/> </bpmndi:BPMNEdge> <bpmndi:BPMNEdge id="Flow_0std6pu_di" bpmnElement="Flow_0std6pu"> <di:waypoint x="530" y="240"/> <di:waypoint x="650" y="240"/> </bpmndi:BPMNEdge> <bpmndi:BPMNEdge id="Flow_081nvcj_di" bpmnElement="Flow_081nvcj"> <di:waypoint x="750" y="240"/> <di:waypoint x="842" y="240"/> </bpmndi:BPMNEdge> <bpmndi:BPMNShape id="Event_2715eoc_di" bpmnElement="Event_2715eoc"> <dc:Bounds x="280" y="200" width="40" height="40"/> <bpmndi:BPMNLabel> <dc:Bounds x="290" y="213" width="20" height="14"/></bpmndi:BPMNLabel></bpmndi:BPMNShape> <bpmndi:BPMNShape id="Activity_06ejpb9_di" bpmnElement="Activity_06ejpb9"> <dc:Bounds x="430" y="200" width="100" height="80"/> <bpmndi:BPMNLabel> <dc:Bounds x="455" y="233" width="50" height="14"/></bpmndi:BPMNLabel></bpmndi:BPMNShape> <bpmndi:BPMNShape id="Activity_2isko2b_di" bpmnElement="Activity_2isko2b"> <dc:Bounds x="650" y="200" width="100" height="80"/> <bpmndi:BPMNLabel> <dc:Bounds x="675" y="233" width="50" height="14"/></bpmndi:BPMNLabel></bpmndi:BPMNShape> <bpmndi:BPMNShape id="Event_3o35ddb_di" bpmnElement="Event_3o35ddb"> <dc:Bounds x="840" y="220" width="40" height="40"/> <bpmndi:BPMNLabel> <dc:Bounds x="850" y="233" width="20" height="14"/></bpmndi:BPMNLabel></bpmndi:BPMNShape> </bpmndi:BPMNPlane></bpmndi:BPMNDiagram></bpmn:definitions>`
export default {
name: 'LF',
components: { NodePanel, AddPanel, Control, PropertyDialog, DataDialog, QRcode },
data () {
return {
productData: [], // 产品信息
visible: false, // 产品基本属性
productId: this.$route.params.productId,
productTitle: this.$route.params.productTitle,
lf: null,
showAddPanel: false,
addPanelStyle: {
top: 0,
left: 0
},
nodeData: null,
addClickNode: null,
clickNode: null,
dialogVisible: false,
graphData: null,
dataVisible: false,
config: {
background: {
color: '#f7f9ff'
},
grid: {
size: 10,
visible: false
},
keyboard: {
enabled: true
},
style: {
rect: {
radius: 6,
},
edgeText: { // 边文本样式
background: {
fill: '#fff'
}
},
},
edgeTextDraggable: true,
guards: {
beforeClone (data) {
console.log('beforeClone', data)
return true
},
beforeDelete (data) {
// 可以根据data数据判断是否允许删除，允许返回true,不允许返回false
// 文档： http://logic-flow.org/guide/basic/keyboard.html#%E5%A6%82%E4%BD%95%E9%98%BB%E6%AD%A2%E5%88%A0%E9%99%A4%E6%88%96%E8%80%85%E6%8B%B7%E8%B4%9D%E8%A1%8C%E4%B8%BA
console.log('beforeDelete', data)
// _this.$message('不允许删除', 'error')
return true
}
}
},
moveData: {},
nodeList,
jsonChart: [],
dialogStyle:{
position:"absolute",
top:"10px",
zIndex:"9999999999999999999999999999"
},
ModalText: 'Content of the modal',
isVisible: false,
confirmLoading: false,
url:'http://10.169.122.112:8023/#/'
}
},
mounted () {
this.$_initLf()
this.ifGraph()
this.showProduct()
},
methods: {
//显示模态框
showModal() {
this.isVisible = true;
console.log('this.isVisible:',this.isVisible)
},
//点击ok
handle_Ok(e) {
this.ModalText = 'The modal will be closed after two seconds';
this.confirmLoading = true;
setTimeout(() => {
this.isVisible = false;
this.confirmLoading = false;
}, 2000);
},
//点击cancel
handleCancel(e) {
console.log('Clicked cancel button');
this.isVisible = false;
},
// 预览
preview(){
console.log('打开含有二维码的弹窗')
this.showModal()
// this.$success({
// title: '打开三湘银行用户端，扫描以下二维码即可预览',
// // JSX support
// content: (
// `<div>
// <QRcode :url='url'/>
// </div>`
//
// ),
// });
//
//
},
// 将产品提交给管理员审核
submitProduct() {
this.updateGraph()
submitToAdmin(this.productId).then(() => {
this.$message.success('已提交给管理员进行审核')
}).catch(err => {
console.log(err)
})
},
// 展示产品详细信息
showProduct() {
showProductById(this.productId).then(res => {
console.log(res.data)
this.productData = res.data
}).catch(err => {
console.log(err)
})
},
openDrawer() {
this.visible = true
},
closeDrawer() {
this.visible = false
},
$_initLf () {
// 画布配置
// 使用插件
LogicFlow.use(Menu)
LogicFlow.use(Snapshot)
LogicFlow.use(BpmnElement);
// LogicFlow.use(BpmnXmlAdapter);
const lf = new LogicFlow({
...this.config,
container: document.querySelector('#LF-view'),
grid: {
size: 20,
visible: true,
type: 'dot',
config: {
color: '#ababab',
thickness: 1,
},
}
})
this.lf = lf
// 菜单配置文档：http://logic-flow.org/guide/extension/extension-components.html#%E8%8F%9C%E5%8D%95
// 重置，增加，节点自由配置(以user节点为示例)
lf.setMenuConfig({
nodeMenu: [],
edgeMenu: []
})
lf.addMenuConfig({
nodeMenu: [
{
text: '分享',
callback () {
alert('分享成功！')
}
},
{
text: '属性',
callback (node) {
alert(`
节点id：${node.id}
节点类型：${node.type}
节点坐标：(x: ${node.x}, y: ${node.y})`
)
}
}
],
edgeMenu: [
{
text: '属性',
callback (edge) {
alert(`
边id：${edge.id}
边类型：${edge.type}
边坐标：(x: ${edge.x}, y: ${edge.y})
源节点id：${edge.sourceNodeId}
目标节点id：${edge.targetNodeId}`
)
}
}
]
})
// 设置主题
lf.setTheme({
circle: {
r: 20,
stroke: '#000000',
outlineColor: '#88f',
strokeWidth: 1
},
rect: {
outlineColor: '#88f',
strokeWidth: 1,
height: 40
},
polygon: {
strokeWidth: 1
},
polyline: {
stroke: '#000000',
hoverStroke: '#000000',
selectedStroke: '#000000',
outlineColor: '#88f',
strokeWidth: 1
},
nodeText: {
color: '#000000'
},
edgeText: {
color: '#000000',
background: {
fill: '#f7f9ff'
}
}
})
this.$_registerNode()
},
// 自定义
$_registerNode () {
registerStart(this.lf)
registerUser(this.lf)
registerEnd(this.lf)
registerPush(this.lf, this.clickPlus, this.mouseDownPlus)
registerDownload(this.lf)
registerPolyline(this.lf)
registerTask(this.lf)
registerConnect(this.lf)
this.$_render()
},
$_render () {
this.lf.render(demoData)
this.$_LfEvent()
},
$_getData () {
const data = this.lf.getGraphData()
console.log(JSON.stringify(data))
},
$_LfEvent () {
this.lf.on('node:click', ({data}) => {
console.log('node:click', data)
this.$data.clickNode = data
this.$data.dialogVisible = true
})
this.lf.on('edge:click', ({data}) => {
console.log('edge:click', data)
this.$data.clickNode = data
this.$data.dialogVisible = true
})
this.lf.on('element:click', () => {
this.hideAddPanel()
})
this.lf.on('edge:add', ({data}) => {
console.log('edge:add', data)
})
this.lf.on('node:mousemove', ({data}) => {
console.log('node:mousemove')
this.moveData = data
})
this.lf.on('blank:click', () => {
this.hideAddPanel()
})
this.lf.on('connection:not-allowed', (data) => {
this.$message({
type: 'error',
message: data.msg
})
})
this.lf.on('node:mousemove', () => {
console.log('on mousemove')
})
},
}
}
</script>
<style>
.logic-flow-view {
height: 100vh;
position: relative;
}
.demo-title{
text-align: center;
margin: 20px;
}
.demo-control{
position: absolute;
top: 67px;
right: 50px;
z-index: 2;
}
#LF-view {
width: calc(100% - 280px);
height: calc(100% - 67px);
outline: none;
margin-left: 280px;
}
.time-plus{
cursor: pointer;
}
.add-panel {
position: absolute;
z-index: 11;
background-color: white;
padding: 10px 5px;
}
.el-drawer__body {
height: 80%;
overflow: auto;
margin-top: -30px;
z-index: 3;
}
#header {
border-bottom: 1px solid rgb(235, 237, 240);
height: 67px;
width: 100%;
line-height: 67px;
vertical-align: middle;
padding-left: 20px;
cursor: pointer;
}
#titleStyle {
font-weight: bold;
font-size: 20px;
margin-left: 10px;
width: 200px;
display: inline-block;
/*text-overflow:ellipsis;
white-space: nowrap;
overflow: hidden;*/
}
</style>
z-index理论上是能解决的，会不会是自带的值很高？