| | |
| | | <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) => { |
| | | console.log(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> |
| | | |
| | | |
| | | <template>
|
| | | <div id="InfoPopup" 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 = window.screen.width;
|
| | | var startY = e.clientY;
|
| | | var nw;
|
| | | var targetDiv = document.getElementById('eagleMapContainer');
|
| | | //得到点击时该地图容器的宽高:
|
| | | var targetDivHeight = targetDiv.offsetHeight;
|
| | | 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>
|