修复bug dialog层级调整、地图选点可拖拽

src/components/Dialog/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="modelValue || customShow" class="common-dialog" :style="{ width: computedWidth, height: computedHeight }">
+  <div v-if="modelValue || customShow" class="common-dialog" :style="{ width: computedWidth, height: computedHeight, zIndex: zIndex }">
     <div :class="type === 'xs' || headerType === 'header2' ? 'dialog-header2' : 'dialog-header'">
       <div v-if="!hideTitle" class="dialog-title">
         {{ title ? title : '弹窗' }}
@@ -31,6 +31,7 @@
 
 <script lang="ts" setup name="Dialog">
 import { getVideoTagInfo } from '@/api/videoMonitor';
+import useAppStore from '@/store/modules/app';
 
 interface Tag {
   name: string;
@@ -51,7 +52,6 @@ interface Props {
   customShow?: boolean;
   headerType?: string;
   getTagId?: string;
-  tags?: Tag[];
 }
 const props = withDefaults(defineProps<Props>(), {
   modelValue: false,
@@ -81,19 +81,33 @@ const computedWidth = computed(() => {
 const computedHeight = computed(() => {
   if (!!props.height) {
     return props.height;
-  } else if (props.type === 'xs') {
-    return '150px';
-  } else if (props.type === 'sm') {
-    return '720px';
-  } else if (props.type === 'lg') {
-    return '720px';
-  } else if (props.type === 'xl') {
-    return '720px';
   } else {
-    return '760px';
+    return 'auto';
   }
+  // else if (props.type === 'xs') {
+  //   return '150px';
+  // } else if (props.type === 'sm') {
+  //   return '720px';
+  // } else if (props.type === 'lg') {
+  //   return '720px';
+  // } else if (props.type === 'xl') {
+  //   return '720px';
+  // } else {
+  //   return '760px';
+  // }
 });
-let tags = ref([]);
+const appStore = useAppStore();
+let zIndex = ref(999);
+watch(
+  () => props.modelValue,
+  () => {
+    if (props.modelValue && !props.customShow) {
+      zIndex.value = appStore.getZIndex();
+    }
+  },
+  { immediate: true }
+);
+let tags = ref<Tag[]>([]);
 // 关闭弹窗
 const closeDialog = () => {
   emit('close');
@@ -119,7 +133,12 @@ const getData = () => {
   });
 };
 onMounted(() => {
-  getData();
+  if (props.customShow) {
+    zIndex.value = appStore.getZIndex();
+  }
+  if (props.getTagId) {
+    getData();
+  }
 });
 </script>
 

src/components/NearbyVideos/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Dialog custom-show type="lg" title="附近视频" height="780px" hide-footer @close="handleClose">
+  <Dialog custom-show type="lg" title="附近视频" height="720px" hide-footer @close="handleClose">
     <div class="flex-box">
       <div>附近距离</div>
       <el-select v-model="queryParams.radius" class="custom-select" popper-class="custom-popper" :teleported="false" @change="initData">

src/store/modules/app.ts

@@ -12,6 +12,7 @@ export const useAppStore = defineStore('app', () => {
   });
   const device = ref<string>('desktop');
   const size = useStorage<'large' | 'default' | 'small'>('size', 'default');
+  const zIndex = ref(999);
 
   // 语言
   const language = useStorage('language', 'zh_CN');
@@ -62,6 +63,10 @@ export const useAppStore = defineStore('app', () => {
   const toggleRightSection = (): void => {
     showRightSection.value = !showRightSection.value;
   };
+  const getZIndex = (): number => {
+    zIndex.value = zIndex.value + 1;
+    return zIndex.value;
+  };
   return {
     device,
     sidebar,
@@ -77,7 +82,8 @@ export const useAppStore = defineStore('app', () => {
     closeSideBar,
     toggleDevice,
     setSize,
-    toggleSideBarHide
+    toggleSideBarHide,
+    getZIndex
   };
 });
 

src/views/emergencyCommandMap/LeftSection/VideoMonitor.vue

@@ -19,7 +19,7 @@
 <!--            <el-select-->
 <!--              v-model="queryParams.realisticVideoType"-->
 <!--              class="custom-select"-->
-<!--              popper-class="custom-select-popper"-->
+<!--              popper-class="custom-select
 <!--              :teleported="false"-->
 <!--              placeholder="全部"-->
 <!--            >-->

src/views/emergencyCommandMap/RightSection/dutyManagement.vue

@@ -50,8 +50,8 @@ const closeDialog = () => {
   flex-direction: column;
 }
 .form-group {
-  margin-bottom: 15px;
-  font-size: 32px;
+  margin-bottom: 5px;
+  font-size: 16px;
 }
 .dialog-footer {
   display: flex;

src/views/globalMap/LeftMenu.vue

@@ -122,6 +122,7 @@
       type="lg"
       header-type="header2"
       title="视频"
+      height="720px"
       :get-tag-id="videoMonitorData.video_code"
       hide-footer
     >

src/views/globalMap/RightMenu/Fireproofing.vue

@@ -38,7 +38,7 @@
           </div>
         </div>
       </div>
-      <Dialog v-if="showDialog" v-model="showDialog" type="md" title="森林防火" hide-footer>
+      <Dialog v-if="showDialog" v-model="showDialog" type="md" title="森林防火" height="720px" hide-footer>
         <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center">
           <HKVideo :dot_data="videoMonitorData" />
         </div>

src/views/globalMap/RightMenu/PotentialFloodHazard.vue

@@ -60,8 +60,7 @@
       </div>
     </div>
   </div>
-  <NearbyVideos v-if="showNearbyVideos" v-model="showNearbyVideos" :location="location" />
-  <NearbyVideos v-if="showNearbyVideos2" v-model="showNearbyVideos2" :getDataMethod="getDataMethod" />
+  <NearbyVideos v-if="showNearbyVideos" v-model="showNearbyVideos" :getDataMethod="getDataMethod" />
 </template>
 
 <script lang="ts" setup>
@@ -82,7 +81,6 @@ const queryParams = reactive({
 });
 const dataList = ref([]);
 const showNearbyVideos = ref(false);
-const showNearbyVideos2 = ref(false);
 const getDataMethod = ref(null);
 let location = ref([]);
 const initData = () => {
@@ -96,7 +94,7 @@ const handleCancel = () => {
 };
 const showMoreVideos = () => {
   getDataMethod.value = getWaterloggedAllVideoInfo;
-  showNearbyVideos2.value = true;
+  showNearbyVideos.value = true;
 };
 const handleShowDialog = (item) => {
   location.value = [item.lng, item.lat];

src/views/globalMap/RightMenu/RoadNetworkVideo.vue

@@ -49,7 +49,7 @@
         </div>
       </div>
     </div>
-    <Dialog v-if="showDialog" v-model="showDialog" type="md" title="路网视频" hide-footer>
+    <Dialog v-if="showDialog" v-model="showDialog" type="md" title="路网视频" height="720px" hide-footer>
       <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center">
         <HKVideo :dot_data="videoMonitorData" />
       </div>

src/views/globalMap/RightMenu/SpatialAnalysis.vue

@@ -22,14 +22,14 @@
         <div class="item-label">GDP(万元)</div>
         <div class="item-value">{{ validateNum(analysisData.GDP) }}</div>
       </div>
-      <div class="flex" style="margin: 20px 0; width: 100%">
+      <div class="flex" style="margin: 15px 0 10px; width: 100%">
         <el-input v-model="keyword" class="custom-input2" placeholder="请输入" size="large" style="flex: 1" />
       </div>
-      <div class="flex">
+      <div class="flex" style="flex-wrap: wrap">
         <div v-for="(item, index) in filteredList" :key="index" class="item2">{{ item.name + '(' + item.list.length + ')' }}</div>
       </div>
     </div>
-    <Dialog v-model="showDetail" title="空间分析" hide-footer>
+    <Dialog v-model="showDetail" title="空间分析" height="760px" hide-footer>
       <div class="common-table">
         <div class="table-header">
           <div class="td">序号</div>
@@ -197,5 +197,6 @@ const handleShowDetail = () => {
   color: #ffffff;
   border: 2px solid #247dff;
   border-radius: 4px;
+  margin-top: 5px;
 }
 </style>

src/views/globalMap/index.vue

@@ -275,7 +275,7 @@ let location = ref([]);
 watch(showNearbyVideos, () => {
   if (!showNearbyVideos.value) {
     location.value = [];
-    if (!!tempMenu.value) {
+    if (!!tempMenu.value && !!tempMenu.value.name) {
       leftMenuRef.value.setMenuChange(tempMenu.value, false);
       tempMenu.value = {};
       map.off('click', handleClickMap);
@@ -285,7 +285,7 @@ watch(showNearbyVideos, () => {
 watch(showRainfall, () => {
   if (!showRainfall.value) {
     location.value = [];
-    if (!!tempMenu.value) {
+    if (!!tempMenu.value && !!tempMenu.value.name) {
       leftMenuRef.value.setMenuChange(tempMenu.value, false);
       tempMenu.value = {};
       map.off('click', handleClickMap);

src/views/routineCommandMap/PositionMap.vue

@@ -214,6 +214,15 @@ function handlePanTo(index) {
   setMarks(lnglat);
   closeSearchList();
 }
+const updateForm = (position) => {
+  form.longitude = position[0];
+  form.latitude = position[1];
+  geocoder.getAddress(position, (status, result) => {
+    if (status === 'complete' && result.info === 'OK') {
+      form.address = result.regeocode.formattedAddress;
+    }
+  });
+};
 const initMap = () => {
   let position = [110.925175, 21.678955];
   AMapLoader.load({
@@ -237,6 +246,7 @@ const initMap = () => {
     map.on('rightclick', handleRightclick);
     handleResize();
     map.on('complete', () => {
+      updateForm(position);
       setMarks(position);
     });
   });
@@ -249,12 +259,8 @@ function ContextMenu() {
       form.longitude = lnglatPosition.value[0];
       form.latitude = lnglatPosition.value[1];
       contextMenu.close();
-      let lnglat = [form.longitude, form.latitude];
-      geocoder.getAddress(lnglat, (status, result) => {
-        if (status === 'complete' && result.info === 'OK') {
-          form.address = result.regeocode.formattedAddress;
-        }
-      });
+      const lnglat = [form.longitude, form.latitude];
+      updateForm(lnglat);
       setMarks(lnglat);
     },
     1
@@ -276,9 +282,13 @@ function setMarks(lnglat) {
       imageSize: new AMap.Size(22, 28), //图标大小
       image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png'
     }),
+    draggable: true,
     anchor: 'bottom-center',
     offset: new AMap.Pixel(0, 0)
   });
+  marker.on('dragend', (e) => {
+    updateForm([e.lnglat.lng, e.lnglat.lat]);
+  });
   marker.setMap(map);
 }
 function handleClose() {