94 lines
2.2 KiB
Vue
94 lines
2.2 KiB
Vue
<template>
|
|
<div class="modelRef">
|
|
<a-modal
|
|
v-bind="getBindValue"
|
|
:bodyStyle="{ background: '#233741', color: '#fff' }"
|
|
destroyOnClose
|
|
:width="860"
|
|
wrapClassName="cu-map-modal"
|
|
:getContainer="getContainer"
|
|
>
|
|
<template #closeIcon>
|
|
<img
|
|
class="w-22px h-22px inline text-0"
|
|
src="../../assets/images/model-close-icon.png"
|
|
alt=""
|
|
srcset=""
|
|
/>
|
|
</template>
|
|
<div class="w-full mt-30px">
|
|
<DXCY v-if="leftType == 'DXCY'" width="810px" height="600px" />
|
|
<DXLX v-if="leftType == 'DXLX'" width="810px" height="600px" />
|
|
<DZWZ v-if="leftType == 'DZWZ'" width="810px" height="600px" />
|
|
<DXJGWEEK v-if="leftType == 'DXJG'" width="810px" height="600px" />
|
|
</div>
|
|
</a-modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Modal } from 'ant-design-vue'
|
|
import { defineComponent, computed, ref, unref, watchEffect } from 'vue'
|
|
import DXCY from './components/DXCY.vue'
|
|
import DXLX from './components/DXLX.vue'
|
|
import DZWZ from './components/DZWZ.vue'
|
|
import DXJGWEEK from './components/DXJGWEEK.vue'
|
|
export default defineComponent({
|
|
components: {
|
|
[Modal.name]: Modal,
|
|
DXCY,
|
|
DZWZ,
|
|
DXLX,
|
|
DXJGWEEK,
|
|
},
|
|
props: {
|
|
visible: {
|
|
type: Boolean,
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
},
|
|
setup(props, { attrs }) {
|
|
const modelVisible = ref(false)
|
|
|
|
const leftType = computed(() => props.type)
|
|
|
|
const getContainer = () => {
|
|
if (document.body.clientWidth < 3000) return document.body
|
|
return document.body.querySelector(`.modelRef`)
|
|
}
|
|
|
|
const getBindValue = computed(() => {
|
|
const attr = {
|
|
...attrs,
|
|
...unref(props),
|
|
visible: unref(modelVisible),
|
|
maskClosable: false,
|
|
}
|
|
return attr
|
|
})
|
|
|
|
watchEffect(() => {
|
|
modelVisible.value = !!props.visible
|
|
})
|
|
|
|
return {
|
|
leftType,
|
|
getContainer,
|
|
getBindValue,
|
|
modelVisible,
|
|
}
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.cu-map-modal {
|
|
.ant-modal {
|
|
top: 30px;
|
|
}
|
|
}
|
|
</style>
|