<template>
|
<div class="InfoPopup">
|
<Popup
|
ref="pop"
|
v-for="(data, index) in PopupData"
|
:key="data.id"
|
:title="data.title || '提示'"
|
maxHeight="400"
|
@close="close(data.id)"
|
left="calc(100% - 960px)"
|
top="calc(100% - 470px) "
|
>
|
<div>
|
<div style="width:940px;height:400px;">
|
|
<map-menu-pop v-if="$store.state.mapPopBoxFlag == '1'" />
|
<map-space-pop v-if="$store.state.mapPopBoxFlag == '2'" />
|
<pipe-line-analy v-if="$store.state.mapPopBoxFlag == '3'" />
|
</div>
|
</div>
|
</Popup>
|
</div>
|
</template>
|
|
<script>
|
import Popup from './Popup.vue';
|
import mapMenuPop from '../../components/MapView/mapMenuPop.vue';
|
import mapSpacePop from '../../components/MapView/mapSpacePop.vue';
|
import pipeLineAnaly from './pipeLineAnaly.vue'
|
export default {
|
name: 'queryinfo',
|
|
components: {
|
Popup,
|
mapMenuPop,
|
mapSpacePop,
|
pipeLineAnaly
|
},
|
data() {
|
return {
|
// 弹窗数据
|
PopupData: ['queryinfo'],
|
left: 'calc(100% - 600px)',
|
top: 'calc(100% - 10px)',
|
};
|
},
|
computed: {},
|
mounted() {
|
|
|
|
},
|
methods: {
|
// 关闭所有
|
closeAll() {
|
this.PopupData.forEach((item) => {
|
item.close && item.close();
|
});
|
this.PopupData = [];
|
},
|
// 关闭弹窗
|
close(id) {
|
let index = this.PopupData.findIndex((item) => {
|
return item.id === id;
|
});
|
let data = this.PopupData.splice(index, 1)[0];
|
data.close && data.close();
|
},
|
// 打开弹窗
|
open(title, value, style = {}) {
|
this.PopupData.push({
|
id: this.createRandomId(),
|
title,
|
value,
|
...style,
|
});
|
let index = this.PopupData.length - 1;
|
this.$nextTick(() => {
|
this.$refs.pop[index].open();
|
});
|
return this.PopupData[index];
|
},
|
// 随机id
|
createRandomId() {
|
return (
|
(Math.random() * 10000000).toString(16).substr(0, 4) +
|
'-' +
|
new Date().getTime() +
|
'-' +
|
Math.random().toString().substr(2, 5)
|
);
|
},
|
},
|
};
|
</script>
|
|
|
