<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(90% - 900px)"
|
top="calc(100% - 530px) "
|
>
|
<div>
|
<div
|
style="width:940px;height:460px;"
|
v-drag
|
>
|
<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'" />
|
<map-pick-up-pop v-if="$store.state.mapPopBoxFlag == '4'" />
|
</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 mapPickUpPop from '../../components/MapView/mapPickUpPop';
|
import pipeLineAnaly from './pipeLineAnaly.vue'
|
export default {
|
name: 'queryinfo',
|
|
components: {
|
Popup,
|
mapMenuPop,
|
mapSpacePop,
|
pipeLineAnaly,
|
mapPickUpPop
|
},
|
data() {
|
return {
|
// 弹窗数据
|
PopupData: ['queryinfo'],
|
left: 'calc(100% - 600px)',
|
top: 'calc(100% - 10px)',
|
};
|
},
|
computed: {},
|
mounted() {
|
|
|
|
},
|
directives: {
|
drag: {
|
inserted: function (el) {
|
const dragDom = el;
|
dragDom.style.cursor = "e-resize";
|
dragDom.onmousedown = (e) => {
|
// 鼠标按下，计算当前元素距离可视区的距离
|
const disX = e.clientX;
|
const w = dragDom.clientWidth;
|
const minW = 500;
|
const maxW = 940;
|
var nw;
|
document.onmousemove = function (e) {
|
// 通过事件委托，计算移动的距离
|
const l = e.clientX - disX;
|
// 改变当前元素宽度，不可超过最小最大值
|
nw = w + l;
|
nw = nw < minW ? minW : nw;
|
nw = nw > maxW ? maxW : nw;
|
dragDom.style.width = `${nw}px`;
|
};
|
|
document.onmouseup = function (e) {
|
document.onmousemove = null;
|
document.onmouseup = null;
|
};
|
};
|
},
|
},
|
},
|
methods: {
|
// 关闭所有
|
closeAll() {
|
this.PopupData.forEach((item) => {
|
item.close && item.close();
|
});
|
this.PopupData = [];
|
},
|
// 关闭弹窗
|
close(id) {
|
let index = this.PopupData.findIndex((item) => {
|
console.log(item);
|
return item.id === id;
|
});
|
this.$store.state.showPopBoxFlag = false;
|
let data = this.PopupData.splice(index, 1)[0];
|
if (this.$store.state.pipelineEntity.length != 0) {
|
for (var i in this.$store.state.pipelineEntity) {
|
sgworld.Viewer.entities.remove(this.$store.state.pipelineEntity[i]);
|
}
|
|
}
|
if (this.$store.state.primitLayer != null) {
|
sgworld.Viewer.entities.remove(this.$store.state.primitLayer);
|
sgworld.Creator.DeleteObject(this.$store.state.primitLayer);
|
this.$store.state.primitLayer = null
|
}
|
if (this.$store.state.histogramLayer.length != 0) {
|
for (var i in this.$store.state.histogramLayer) {
|
Viewer.entities.remove(this.$store.state.histogramLayer[i])
|
}
|
}
|
if (window.histogramHandler != null && Cesium.defined(window.histogramHandler)) {
|
window.histogramHandler.removeInputAction(
|
Cesium.ScreenSpaceEventType.MOUSE_MOVE
|
)
|
window.histogramHandler = null
|
}
|
var entitys = Viewer.entities._entities._array;
|
for (var i = 0; i < entitys.length; i++) {
|
if (entitys[i]._name === "地质体模型") {
|
Viewer.entities.remove(entitys[i]);
|
i--;
|
}
|
}
|
this.$store.state.histLenged = false;
|
},
|
// 打开弹窗
|
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)
|
);
|
},
|
mouseDown(event) {
|
// document.addEventListener("mousemove", this.mouseMove);
|
// this.lastX = event.screenX;
|
},
|
},
|
};
|
</script>
|
