首页 详情可拖动修改

src/views/sys/exception/Converge.vue

@@ -53,12 +53,20 @@
       width="100%"
       wrap-class-name="full-modal"
       v-model:open="showInfoOpen"
-      title="详情"
       :footer="null"
       :maskClosable="true"
       :destroyOnClose="true"
-      @cancel="showInfoOpen = false"
+      @cancel="closeModal"
+      ref="modalRef"
     >
+      <template #title>
+        <div ref="modalTitleRef" style="width: 100%; cursor: move">详情</div>
+      </template>
+      <template template #modalRender="{ originVNode }">
+        <div :style="transformStyle">
+          <component :is="originVNode" />
+        </div>
+      </template>
       <div class="modal-content">
         <template v-if="showInfoOpen">
           <ShowInfoModal :showInfoData="showInfoData" v-if="subject == '违法用地'" />
@@ -125,7 +133,8 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, onMounted, onUnmounted, computed } from 'vue';
+  import { ref, onMounted, onUnmounted, computed, watch, watchEffect } from 'vue';
+  import { useDraggable } from '@vueuse/core';
   import Map from './Converge/index.vue';
   import layerButton from './mapComponent/left_layerButton.vue';
   import statisticalType from './mapComponent/left_statisticalType.vue';
@@ -164,6 +173,38 @@
   const buttonSelect = ref(2);
   const showMainInfoId = ref();
 
+  const modalTitleRef = ref(null);
+  const { x, y, isDragging } = useDraggable(modalTitleRef);
+  const startX = ref<number>(0);
+  const startY = ref<number>(0);
+  const startedDrag = ref(false);
+  const transformX = ref(0);
+  const transformY = ref(0);
+  const preTransformX = ref(0);
+  const preTransformY = ref(0);
+
+  watch([x, y], () => {
+  if (!startedDrag.value) {
+    startX.value = x.value;
+    startY.value = y.value;
+    preTransformX.value = transformX.value;
+    preTransformY.value = transformY.value;
+  }
+  startedDrag.value = true;
+});
+watch(isDragging, () => {
+  if (!isDragging) {
+    startedDrag.value = false;
+  }
+});
+
+watchEffect(() => {
+  if (startedDrag.value) {
+    transformX.value = preTransformX.value + x.value - startX.value;
+    transformY.value = preTransformY.value + y.value - startY.value;
+  }
+});
+
   const getInfoList = (id) => {
     console.log(id);
     console.log(subject.value);
@@ -172,49 +213,35 @@
         if (res) {
           showInfoData.value = res;
           showInfoOpen.value = true;
-          // 添加鼠标拖动监听器
-          addListener();
         }
       });
     } else if (subject.value == '非法采矿') {
       showMainInfoId.value = id;
       showInfoOpen.value = true;
-      // 添加鼠标拖动监听器
-      addListener();
     } else if (subject.value == '耕地非粮化') {
       GetCaseInfoById({ id: id }).then((res) => {
         showInfoData.value = res;
         showInfoOpen.value = true;
-        // 添加鼠标拖动监听器
-        addListener();
       });
     } else if (subject.value == '重点问题') {
       getCaseInfoByIdtotal({ id: id }).then((res) => {
         showInfoData.value = res;
         showInfoOpen.value = true;
-        // 添加鼠标拖动监听器
-        addListener();
       });
     } else if (subject.value == '巡察审计') {
       getInspectionAuditCaseInfoById({ id: id }).then((res) => {
         showInfoData.value = res;
         showInfoOpen.value = true;
-        // 添加鼠标拖动监听器
-        addListener();
       });
     } else if (subject.value == '生态保护红线监管') {
       getRedLineCaseInfoById({ id: id }).then((res) => {
         showInfoData.value = res;
         showInfoOpen.value = true;
-        // 添加鼠标拖动监听器
-        addListener();
       });
     } else if (subject.value == '生态修复') {
       getRepairCaseInfoById({ id: id }).then((res) => {
         showInfoData.value = res;
         showInfoOpen.value = true;
-        // 添加鼠标拖动监听器
-        addListener();
       });
     }
   };
@@ -369,44 +396,6 @@
   }
 
 
-  // 鼠标拖动监听器-参数
-  let isDragging = false;
-  let initialMouseX;
-  let initialMouseY;
-  let initialModalX;
-  let initialModalY;
-  // 添加鼠标拖动监听器
-  function addListener() {
-    setTimeout(() => {
-      const dragModalDocument: any = document.querySelector('.dragModal');
-      if (dragModalDocument) {
-        // 鼠标按下
-        dragModalDocument.addEventListener('mousedown', function(event) {
-          isDragging = true;
-          initialMouseX = event.clientX;
-          initialMouseY = event.clientY;
-          initialModalX = dragModalDocument.offsetLeft;
-          initialModalY = dragModalDocument.offsetTop;
-          dragModalDocument.style.cursor = 'grabbing';
-        });
-        // 鼠标移动
-        dragModalDocument.addEventListener('mousemove', function(event) {
-          if (isDragging) {
-            const deltaX = event.clientX - initialMouseX;
-            const deltaY = event.clientY - initialMouseY;
-            dragModalDocument.style.left = initialModalX + deltaX + 'px';
-            dragModalDocument.style.top = initialModalY + deltaY + 'px';
-          }
-        });
-        // 鼠标放开
-        dragModalDocument.addEventListener('mouseup', function(event) {
-            isDragging = false;
-            dragModalDocument.style.cursor = 'default';
-        });
-      }
-    }, 1000);
-  }
-
   onMounted(() => {
     getLayerSettings();
   });
@@ -437,9 +426,22 @@
     showAttributeWindow.value = false;
     isMinusAttributeWindow.value = true;
   };
+  const transformStyle = computed(() => {
+    return {
+      transform: `translate(${transformX.value}px, ${transformY.value}px)`,
+    };
+  });
+  const closeModal = () => {
+    showInfoOpen.value = false
+    transformX.value = 0
+    transformY.value = 0
+  }
 </script>
 
 <style lang="less" scoped>
+  .full-modal{
+    overflow: hidden;
+  }
   .button-item {
     width: 96px;
     height: 32px;

src/views/sys/exception/Converge/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div :id="mapContainerName" class="map-container">
     <div class="search-container-box">
-      <SearchComponent @toPosition="toPosition" @handlerFilter="handlerFilter" :layer="layerSettings"></SearchComponent>
+      <SearchComponent @toPosition="toPosition" @handlerFilter="handlerFilter" :layerSettings="layerSettings"></SearchComponent>
     </div>
     <div class="map-type-switch-container">
       <div class="switch-button" v-if="mapAngle == '3D'" @click="handlerChangeMapAngle()">
@@ -848,7 +848,7 @@ import {  GeojsonToWkt } from './src/WktGeojsonTransform';
           maxzoom: 13,
           minzoom: 10,
         });
-        map.setTerrain({ source: 'mapbox-dem', exaggeration: 1 });
+        // map.setTerrain({ source: 'mapbox-dem', exaggeration: 1 });
 
         // 设置2D地图
         map.easeTo({ pitch: 0, bearing: 0, duration: 1000 });