修复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 : '弹窗' }}
@@ -21,7 +21,7 @@
         <div :class="confirmClass ? confirmClass + ' common-btn-primary' : 'common-btn-primary'" @click="confirm">{{ confirmText }}</div>
       </div>
     </template>
-    <VideoTagEdit v-model="showAddTag" :tags="tags" :id="getTagId" @updateVideoTag="getData" />
+    <VideoTagEdit :id="getTagId" v-model="showAddTag" :tags="tags" @update-video-tag="getData" />
     <i class="triangle1" />
     <i class="triangle2" />
     <i class="triangle3" />
@@ -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;
@@ -90,7 +91,18 @@ const computedHeight = computed(() => {
     return '1560px';
   }
 });
-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');
@@ -117,7 +129,12 @@ const getData = () => {
   });
 };
 onMounted(() => {
-  getData();
+  if (props.customShow) {
+    zIndex.value = appStore.getZIndex();
+  }
+  if (props.getTagId) {
+    getData();
+  }
 });
 </script>
 
@@ -132,7 +149,7 @@ onMounted(() => {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  z-index: 99;
+  z-index: 999;
   font-size: 38px;
   display: flex;
   flex-direction: column;

src/store/modules/app.ts

@@ -12,7 +12,7 @@ export const useAppStore = defineStore('app', () => {
   });
   const device = ref<string>('desktop');
   const size = useStorage<'large' | 'default' | 'small'>('size', 'default');
-  const zIndex = ref(9999);
+  const zIndex = ref(999);
 
   // 语言
   const language = useStorage('language', 'zh_CN');
@@ -82,7 +82,8 @@ export const useAppStore = defineStore('app', () => {
     setSize,
     toggleSideBarHide,
     toggleLeftSection,
-    toggleRightSection
+    toggleRightSection,
+    getZIndex
   };
 });
 

src/types/components.d.ts

@@ -21,7 +21,6 @@ declare module 'vue' {
     ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
     ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
     ElButton: typeof import('element-plus/es')['ElButton']
-    ElCard: typeof import('element-plus/es')['ElCard']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
@@ -38,34 +37,22 @@ declare module 'vue' {
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
-    ElLink: typeof import('element-plus/es')['ElLink']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
-    ElPopover: typeof import('element-plus/es')['ElPopover']
-    ElRadio: typeof import('element-plus/es')['ElRadio']
-    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
     ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
     ElSlider: typeof import('element-plus/es')['ElSlider']
-    ElStep: typeof import('element-plus/es')['ElStep']
-    ElSteps: typeof import('element-plus/es')['ElSteps']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
-    ElTable: typeof import('element-plus/es')['ElTable']
-    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
-    ElTabPane: typeof import('element-plus/es')['ElTabPane']
-    ElTabs: typeof import('element-plus/es')['ElTabs']
     ElText: typeof import('element-plus/es')['ElText']
     ElTimeline: typeof import('element-plus/es')['ElTimeline']
     ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
-    ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTree: typeof import('element-plus/es')['ElTree']
-    ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     FileUpload: typeof import('./../components/FileUpload/index.vue')['default']
     FooterSection: typeof import('./../components/FooterSection/index.vue')['default']
@@ -76,7 +63,6 @@ declare module 'vue' {
     HikvisionPlayer: typeof import('./../components/HKVideo/hikvision-player.vue')['default']
     HKVideo: typeof import('./../components/HKVideo/index.vue')['default']
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
-    IEpUploadFilled: typeof import('~icons/ep/upload-filled')['default']
     IFrame: typeof import('./../components/iFrame/index.vue')['default']
     ImagePreview: typeof import('./../components/ImagePreview/index.vue')['default']
     ImageUpload: typeof import('./../components/ImageUpload/index.vue')['default']
@@ -110,9 +96,7 @@ declare module 'vue' {
     VideoContainer2: typeof import('./../components/HKVideo/video-container2.vue')['default']
     VideoTagEdit: typeof import('./../components/VideoTagEdit/index.vue')['default']
     YMap: typeof import('./../components/Map/YMap.vue')['default']
+    YMapold: typeof import('./../components/Map/YMapold.vue')['default']
     YztMap: typeof import('./../components/Map/YztMap/index.vue')['default']
   }
-  export interface ComponentCustomProperties {
-    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
-  }
 }

src/views/globalMap/RightMenu/SpatialAnalysis.vue

@@ -22,10 +22,10 @@
         <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: 20px 0 15px; 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>
@@ -205,5 +205,6 @@ const handleShowDetail = () => {
   color: #ffffff;
   border: 2px solid #247dff;
   border-radius: 4px;
+  margin-top: 5px;
 }
 </style>

src/views/globalMap/index.vue

@@ -276,7 +276,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);
@@ -286,7 +286,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() {