代码更新

suerprisePlus

2024-12-17 ea8e3fae44d8e44ab6ca7219612549cc2d63bf79

 src/views/Tools/queryinfo.vue

@@ -1,109 +1,160 @@
<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% - 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];
      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
      }

    },
    // 打开弹窗
    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>