修改发布影像白色无法选择；修改空间搜索选择后，上面的框类显示目录结构最高层级的名称；下拉框的收回机制修改；图层管理移动修改；管线输送介质，图层管理-属...

Surpriseplus

2023-05-06 2ebfac32ae11f2c883d57b61626835d2e9c33b2a

 src/views/Tools/maplayer.vue

@@ -5,40 +5,119 @@
      v-for="(data, index) in PopupData"
      :key="data.id"
      title="图层管理"
      :maxHeight="data.maxHeight || '500px'"
      :maxHeight="data.maxHeight || '400px'"
      @close="close(data.id)"
      :left="data.left || left"
      :top="data.top || top + index * 42 + 'px'"
    >
   <div  >
    <layer-tree />

   </div>
      <div>
        <div
          id="eagleMapContainer"
          style="width:300px;height:400px;"
          v-drag
          @mousedown="dragEagle"
        >
          <layer-tree />
        </div>
      </div>
      <!-- <div class="InfoPopupContianer">
       
      </div> -->
    </Popup>
  </div>
</template>

<script>
import Popup from './Popup.vue';
import LayerTree from './LayerTree.vue'
import Popup from "./Popup.vue";
import LayerTree from "./LayerTree.vue";
export default {
  name: 'maplayer',
  name: "maplayer",

  components: {
    Popup,
    LayerTree
    LayerTree,
  },
  data() {
    return {
      // 弹窗数据
      PopupData: ['maplayer'],
      left: 'calc(100% - 330px)',
      PopupData: ["maplayer"],
      left: "calc(100% - 370px)",
      top: 10,
    };
  },
  directives: {
    drag: {
      inserted: function (el) {
        const dragDom = el;
        dragDom.style.cursor = "nwse-resize";
        dragDom.onmousedown = (e) => {
          // 鼠标按下，计算当前元素距离可视区的距离
          const disX = e.clientX;
          const w = dragDom.clientWidth;
          const minW = 300;
          const maxW = 500;
          const disY = e.clientY;
          const h = dragDom.clientHeight;
          const minH = 300;
          const maxH = 700;
          var nw, nh;
          document.onmousemove = function (e) {
            // 通过事件委托，计算移动的距离
            const l = e.clientX - disX;
            const r = e.clientY - disY;
            // 改变当前元素宽度，不可超过最小最大值
            nw = w + l;
            nw = nw < minW ? minW : nw;
            nw = nw > maxW ? maxW : nw;
            dragDom.style.width = `${nw}px`;
            nh = h + r;
            nh = nh < minH ? minH : nh;
            nh = nh > maxH ? maxH : nh;
            dragDom.style.height = `${nh}px`;
          };

          document.onmouseup = function (e) {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      },
    },
  },
  computed: {},
  mounted() {},
  mounted() { },
  methods: {
    dragEagle: function (e) {
      var targetDiv = document.getElementById('eagleMapContainer');
      //得到点击时该地图容器的宽高：
      var targetDivHeight = targetDiv.offsetHeight;
      var startX = e.clientX;
      var startY = e.clientY;
      var _this = this;
      document.onmousemove = function (e) {
        e.preventDefault();
        //得到鼠标拖动的宽高距离：取绝对值
        var distX = Math.abs(e.clientX - startX);
        var distY = Math.abs(e.clientY - startY);
        //往上方拖动：
        if (e.clientY < startY) {
          targetDiv.style.height = targetDivHeight + distY + 'px';
        }
        //往下方拖动：
        if (e.clientX < startX && e.clientY > startY) {
          targetDiv.style.height = (targetDivHeight - distY) + 'px';
        }
        if (parseInt(targetDiv.style.height) >= 300) {
          targetDiv.style.height = 300 + 'px';
        }
        if (parseInt(targetDiv.style.height) <= 150) {
          targetDiv.style.height = 150 + 'px';
        }
      }
      document.onmouseup = function () {
        document.onmousemove = null;
      }
    },
    // 关闭所有
    closeAll() {
      this.PopupData.forEach((item) => {
@@ -48,12 +127,13 @@
    },
    // 关闭弹窗
    close(id) {
      this.$bus.$emit("treeDataCopy", "true");
      let index = this.PopupData.findIndex((item) => {
        return item.id === id;
      });
      let data = this.PopupData.splice(index, 1)[0];
      data.close && data.close();
    this.$store.state.layerMnage = false;
      this.$store.state.layerMnage = false;
    },
    // 打开弹窗
    open(title, value, style = {}) {
@@ -73,14 +153,12 @@
    createRandomId() {
      return (
        (Math.random() * 10000000).toString(16).substr(0, 4) +
        '-' +
        "-" +
        new Date().getTime() +
        '-' +
        "-" +
        Math.random().toString().substr(2, 5)
      );
    },
  },
};
</script>

<style scoped lang="less">