diff --git a/public/display/cate-bg.png b/public/display/cate-bg.png
new file mode 100644
index 00000000..3361219b
Binary files /dev/null and b/public/display/cate-bg.png differ
diff --git a/public/display/position.png b/public/display/position.png
new file mode 100644
index 00000000..b88bb07d
Binary files /dev/null and b/public/display/position.png differ
diff --git a/public/display/switch-button-active.png b/public/display/switch-button-active.png
new file mode 100644
index 00000000..731cd513
Binary files /dev/null and b/public/display/switch-button-active.png differ
diff --git a/public/display/switch-button.png b/public/display/switch-button.png
new file mode 100644
index 00000000..9f54cfbe
Binary files /dev/null and b/public/display/switch-button.png differ
diff --git a/public/display/title.png b/public/display/title.png
new file mode 100644
index 00000000..34019b60
Binary files /dev/null and b/public/display/title.png differ
diff --git a/public/display/uav-1.png b/public/display/uav-1.png
new file mode 100644
index 00000000..3df8e845
Binary files /dev/null and b/public/display/uav-1.png differ
diff --git a/src/views/demo/system/achievement/AchievementManage/index.vue b/src/views/demo/system/achievement/AchievementManage/index.vue
index ca984c3f..17f68687 100644
--- a/src/views/demo/system/achievement/AchievementManage/index.vue
+++ b/src/views/demo/system/achievement/AchievementManage/index.vue
@@ -11,8 +11,11 @@
     <a-row ::gutter="0">
       <a-col :span="tableSpan">
         <BasicTable @register="registerTable" @row-click="handRowClick">
+          <!-- <template #expandedRowRender="{ record }">
+            <span>{{ record.id }} </span>
+          </template> -->
           <template #toolbar>
-            <!-- <PermissionBtn @btn-event="onBtnClicked" /> -->
+            <PermissionBtn @btn-event="onBtnClicked" />
           </template>
         </BasicTable>
       </a-col>
@@ -29,7 +32,7 @@
               left: '0px',
               zIndex: '0',
             }"
-            @handleOpen="handleOpen"
+            @handleOpenImage="handleOpenImage"
           />
           <div class="full-screen-button" :style="{ zIndex: 1 }">
             <a-tooltip placement="top">
@@ -154,7 +157,10 @@
       ellipsis: false,
       bordered: true,
       showTableSetting: false,
-      autoCreateKey: false,
+      autoCreateKey: true,
+      canResize: false,
+      expandRowByClick: true,
+      accordion: true,
       formConfig: {
         labelWidth: 120,
         schemas: searchFormSchema,
@@ -415,7 +421,7 @@
   const modalImage = ref('');
   const visible = ref<boolean>(false);
   // 打开窗口
-  const handleOpen = (properties) => {
+  const handleOpenImage = (properties) => {
     // modalOpen.value = true;
     setVisible(true);
     modalTitle.value = '';
diff --git a/src/views/demo/system/achievement/Display/AttributeWindow.vue b/src/views/demo/system/achievement/Display/AttributeWindow.vue
new file mode 100644
index 00000000..a1eeb431
--- /dev/null
+++ b/src/views/demo/system/achievement/Display/AttributeWindow.vue
@@ -0,0 +1,120 @@
+<template>
+  <div class="window-container">
+    <div class="info">
+      <div class="item-header">
+        <!-- {{ datainfo.dwmc }} -->
+      </div>
+      <div
+        class="item"
+        v-for="(item, index) in detailDataArr"
+        :key="index"
+        v-show="item.name && item.value"
+      >
+        <div class="item-title">
+          {{
+            item.name != '' && item.name != null && item.name != 'nulll' ? item.name : '暂无属性'
+          }}
+        </div>
+        <div class="item-value">
+          {{
+            item.value != '' && item.value != null && item.value != 'nulll'
+              ? item.value
+              : '暂无数据'
+          }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, watch } from 'vue';
+
+  const emits = defineEmits(['closeAttributeWindow']);
+  const props = defineProps({
+    showAttributeFeature: { type: Object },
+  });
+
+  const detailDataArr: any = ref([]);
+  watch(
+    () => props.showAttributeFeature,
+    () => {
+      console.log(39, props.showAttributeFeature);
+      let detailData = props.showAttributeFeature;
+      detailDataArr.value = [];
+      for (let key in detailData) {
+        if (!['id'].includes(key)) {
+          let detail: any = {};
+          //  let enObj  = dictionaries.find((item)=>{
+          //    return item.en_name == key
+          //  })
+          //  if(enObj){
+          //    detail.name = enObj.cn_name ? enObj.cn_name : null;
+          //  }else{
+          //    detail.name = "暂无属性"
+          //  }
+          detail.name = key;
+          //  detail.name = '暂无属性';
+          detail.value = detailData[key];
+          detailDataArr.value.push(detail);
+        }
+      }
+      // console.log(54, detailDataArr.value);
+    },
+    {
+      deep: true,
+      immediate: true,
+    },
+  );
+</script>
+<style lang="less" scoped>
+  .window-container {
+    width: 100%;
+    height: 100%;
+  }
+
+  .info {
+    width: 100%;
+    padding: 12px;
+    box-sizing: border-box;
+    height: 500px;
+    overflow: auto;
+    // background: rgba(6, 16, 64, 0.7);
+  }
+
+  .item-header {
+    width: 100%;
+    // height: 30px;
+    // background: rgba(0, 157, 255, 0.4);
+    // line-height: 30px;
+    // color: #fff;
+    // text-indent: 8px;
+    border-bottom: 1px solid #088eda;
+  }
+  .item {
+    width: calc(100% - 2px);
+    height: 30px;
+    line-height: 30px;
+    // color: #fff;
+    border-bottom: 1px solid #088eda;
+    border-left: 1px solid #088eda;
+    text-indent: 6px;
+  }
+  .item .item-title {
+    width: 40%;
+    float: left;
+    font-size: 12px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  .item .item-value {
+    width: calc(60%);
+    float: left;
+    font-size: 12px;
+    border-left: 1px solid #088eda;
+    border-right: 1px solid #088eda;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+</style>
diff --git a/src/views/demo/system/achievement/Display/ImageModal.vue b/src/views/demo/system/achievement/Display/ImageModal.vue
new file mode 100644
index 00000000..2183fa76
--- /dev/null
+++ b/src/views/demo/system/achievement/Display/ImageModal.vue
@@ -0,0 +1,255 @@
+<template>
+  <div @keydown="handleKeydown">
+    <div class="toper" :style="{ zIndex: 1082 }" v-if="visible">
+      <span class="info-item solo">任务名称：{{ modalImage.taskName }}</span>
+      <div class="info-row">
+        <span class="info-item">飞手名：{{ modalImage.flyer }}</span>
+        <span class="info-item">飞行时间：{{ modalImage.flyTime }}</span>
+        <span class="info-item">任务位置：{{ modalImage.workPosition }}</span>
+      </div>
+    </div>
+    <div class="leftOutlined" :style="{ zIndex: 1082 }" v-if="visible && beforeImageVif">
+      <LeftOutlined :style="{ fontSize: '30px' }" @click="beforeImage" />
+    </div>
+    <div class="rightOutlined" :style="{ zIndex: 1082 }" v-if="visible && afterImageVif">
+      <RightOutlined :style="{ fontSize: '30px' }" @click="afterImage" />
+    </div>
+
+    <a-image
+      :width="200"
+      :style="{ display: 'none', zIndex: 1001 }"
+      :preview="{
+        visible,
+        onVisibleChange: setVisible,
+      }"
+      :src="modalImage.path"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch, onMounted } from 'vue';
+  import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
+  // 图片路径拼接
+  import { getAppEnvConfig } from '@/utils/env';
+  const { VITE_GLOB_API_URL } = getAppEnvConfig();
+  const VITE_GLOB_API_URL_VAR = ref<String>(VITE_GLOB_API_URL + '/');
+
+  const emits = defineEmits(['closeImageModal']);
+
+  const props = defineProps({
+    modalImage: { type: Object },
+    tableData3_tupian: { type: Object },
+  });
+
+  watch(
+    () => props.modalImage,
+    () => {
+      setTimeout(() => {
+        handleOpenImage(props.modalImage);
+      }, 1);
+    },
+    {
+      deep: true,
+      immediate: true,
+    },
+  );
+
+  // 点击地图上的无人机图标后展示图片------------------------------------------------------------
+  // 窗口
+  const modalImage: any = ref({});
+  const visible = ref<boolean>(false);
+  // 打开窗口
+  const handleOpenImage = (properties) => {
+    // 正则表达式验证函数
+    modalImage.value = properties;
+
+    if (isValidUrl(properties.path)) {
+      modalImage.value.path = properties.path;
+    } else {
+      modalImage.value.path = VITE_GLOB_API_URL_VAR.value + properties.path;
+    }
+
+    nowImgs = props.tableData3_tupian?.filter((f) => {
+      return f.taskId == modalImage.value.taskId;
+    });
+    nowImgs?.forEach((item, index) => {
+      if (item.id == modalImage.value.id) {
+        if (index != 0) {
+          beforeImageVif.value = true;
+        } else {
+          beforeImageVif.value = false;
+        }
+        if (index != nowImgs.length - 1) {
+          afterImageVif.value = true;
+        } else {
+          afterImageVif.value = false;
+        }
+      }
+    });
+
+    setVisible(true);
+  };
+  const beforeImageVif = ref(false);
+  const afterImageVif = ref(false);
+  let nowImgs: any = [];
+  // 上一张
+  function beforeImage() {
+    for (let index = 0; index < nowImgs.length; index++) {
+      const item = nowImgs[index];
+      if (item.id == modalImage.value.id) {
+        modalImage.value = nowImgs[index - 1];
+        if (isValidUrl(modalImage.value.path)) {
+          modalImage.value.path = modalImage.value.path;
+        } else {
+          modalImage.value.path = VITE_GLOB_API_URL_VAR.value + modalImage.value.path;
+        }
+        if (index == 1) {
+          beforeImageVif.value = false;
+        }
+        afterImageVif.value = true;
+        return;
+      }
+    }
+  }
+  // 下一张
+  function afterImage() {
+    for (let index = 0; index < nowImgs.length; index++) {
+      const item = nowImgs[index];
+      if (item.id == modalImage.value.id) {
+        modalImage.value = nowImgs[index + 1];
+        if (isValidUrl(modalImage.value.path)) {
+          modalImage.value.path = modalImage.value.path;
+        } else {
+          modalImage.value.path = VITE_GLOB_API_URL_VAR.value + modalImage.value.path;
+        }
+        if (index == nowImgs.length - 2) {
+          afterImageVif.value = false;
+        }
+        beforeImageVif.value = true;
+        return;
+      }
+    }
+  }
+
+  const setVisible = (value): void => {
+    visible.value = value;
+    if (!value) {
+      emits('closeImageModal');
+      //   removeGlobalListener();
+    }
+  };
+  // 正则表达式验证函数
+  function isValidUrl(url: string): boolean {
+    const regex =
+      /^(?:http|ftp)s?:\/\/(?:(?:[A-Z0-9](?:[A-Z0-9-]{0,61}[A-Z0-9])?\.)+(?:[A-Z]{2,6}\.?|[A-Z0-9-]{2,}\.?)|localhost|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}|\[?[A-F0-9]*:[A-F0-9:]+\]?)(?::\d+)?(?:\/?|[\/?]\S+)$/i;
+    return regex.test(url);
+  }
+
+  //   let cleanupFunction: (() => void) | undefined;
+  //   const handleKeydown = (event: KeyboardEvent) => {
+  //     if (event.key === 'ArrowLeft') {
+  //       console.log('Left arrow key pressed');
+  //       // 在这里处理逻辑...
+  //     } else if (event.key === 'ArrowRight') {
+  //       console.log('Right arrow key pressed');
+  //       // 在这里处理逻辑...
+  //     }
+  //   };
+
+  //   const addGlobalListener = () => {
+  //     cleanupFunction = addEventListener(document, 'keydown', handleKeydown);
+  //   };
+
+  //   const removeGlobalListener = () => {
+  //     if (cleanupFunction) {
+  //       cleanupFunction();
+  //       cleanupFunction = undefined;
+  //     }
+  //   };
+
+  //   // 在组件挂载后添加全局监听器
+  //   onMounted(() => {
+  //     addGlobalListener();
+  //   });
+</script>
+<style type="less" scoped>
+  .toper {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    z-index: 1082;
+    width: 100%;
+    font-size: 40px;
+    top: 0px;
+    height: auto; /* 自动高度，适应内容 */
+    background: rgba(0, 0, 0, 0.4);
+    padding: 10px; /* 内边距，使文本不紧贴边框 */
+    opacity: 1;
+  }
+
+  .info-item {
+    color: #ffffff;
+    font-size: 30px; /* 后面三个项的字体大小 */
+    margin-right: 30px; /* 每个 span 之间的间距 */
+    opacity: 1;
+  }
+
+  .info-item.solo {
+    font-size: 40px; /* 第一个 span 的字体大小 */
+    margin-bottom: 10px; /* 第一个 span 的底部间距 */
+    opacity: 1;
+  }
+
+  .info-row {
+    display: flex; /* 使用 flex 布局使三个 span 排成一行 */
+    flex-wrap: nowrap; /* 不允许换行 */
+    opacity: 1;
+  }
+
+  .info-row .info-item:last-child {
+    margin-right: 0; /* 最后一个 span 不需要右边距 */
+    opacity: 1;
+  }
+
+  .leftOutlined {
+    position: absolute;
+    top: 40%;
+    z-index: 1082;
+    left: 0px;
+    color: #ffffff;
+    background-color: gray; /* 默认灰色背景 */
+    border-radius: 50%; /* 圆形 */
+    padding: 10px; /* 内边距 */
+    margin: 5px; /* 外边距 */
+    transition: background-color 0.3s ease; /* 平滑过渡 */
+    cursor: pointer; /* 鼠标指针变为手型 */
+    overflow: visible;
+    opacity: 1;
+  }
+
+  .rightOutlined {
+    position: absolute;
+    z-index: 1082;
+    top: 40%;
+    right: 0px;
+    color: #ffffff;
+    background-color: gray; /* 默认灰色背景 */
+    border-radius: 50%; /* 圆形 */
+    padding: 10px; /* 内边距 */
+    margin: 5px; /* 外边距 */
+    transition: background-color 0.3s ease; /* 平滑过渡 */
+    cursor: pointer; /* 鼠标指针变为手型 */
+    opacity: 1;
+  }
+
+  .leftOutlined:hover {
+    background-color: black; /* 鼠标悬停时背景颜色变为黑色 */
+    opacity: 1;
+  }
+  .rightOutlined:hover {
+    background-color: black; /* 鼠标悬停时背景颜色变为黑色 */
+    opacity: 1;
+  }
+</style>
diff --git a/src/views/demo/system/achievement/Display/TimeLine.vue b/src/views/demo/system/achievement/Display/TimeLine.vue
index 226816e3..48134dfc 100644
--- a/src/views/demo/system/achievement/Display/TimeLine.vue
+++ b/src/views/demo/system/achievement/Display/TimeLine.vue
@@ -76,12 +76,13 @@
                 <span
                   :style="{
                     position: 'relative',
-                    bottom: `${10 + 25 * countLines(label, point)}px`,
+                    bottom: `${10 + 35 + 0 * countLines(label, point)}px`,
                   }"
                 >
                   <a-popover>
                     <template #content> {{ getNameByJxnanme(label) }} </template>
-                    <a-tag closable color="#2db7f5">{{ label }}</a-tag>
+                    <!-- <a-tag closable color="#2db7f5">{{ label }}</a-tag> -->
+                    <img src="/display/position.png" />
                   </a-popover>
                 </span>
               </template>
diff --git a/src/views/demo/system/achievement/Display/index.vue b/src/views/demo/system/achievement/Display/index.vue
index beafc0c4..c1f38582 100644
--- a/src/views/demo/system/achievement/Display/index.vue
+++ b/src/views/demo/system/achievement/Display/index.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
     <div class="switch-button-open" @click="handlerOpen" v-if="!isOpen">
-      <img src="/statistical/switch-button.png" />
+      <img src="/display/switch-button.png" />
     </div>
     <div class="switch-button-close" @click="handlerOpen" v-if="isOpen">
-      <img src="/statistical/switch-button-active.png" />
+      <img src="/display/switch-button-active.png" />
     </div>
     <div class="case-tree-container" v-if="!isOpen">
       <div class="title"> 图层列表 </div>
@@ -36,32 +36,32 @@
           left: '0px',
           zIndex: '0',
         }"
-        @handleOpen="handleOpen"
+        @handleOpenImage="handleOpenImage"
+        @getDetailByFeature="getDetailByFeature"
       />
     </div>
-    <!-- <a-modal :open="modalOpen" :title="modalTitle" :footer="null" @cancel="handleCancel">
-      <a-image style="height: 100%; width: 100%" :src="modalImage" />
+    <!-- <a-modal
+      :open="modalOpen"
+      width="100%"
+      wrap-class-name="full-modal"
+      :footer="null"
+      @cancel="handleCancelImage"
+    >
     </a-modal> -->
-    <a-image
-      :width="200"
-      :style="{ display: 'none', zIndex: 1082 }"
-      :preview="{
-        visible,
-        onVisibleChange: setVisible,
-      }"
-      :src="modalImage.path"
-    />
-    <div class="leftOutlined" :style="{ zIndex: 1082000000 }" v-if="visible && beforeImageVif">
-      <LeftOutlined :style="{ fontSize: '30px' }" @click="beforeImage" />
+    <div v-if="modalOpen" style="width=100%">
+      <ImageModal
+        :tableData3_tupian="tableData3_tupian"
+        :modalImage="modalImage"
+        @closeImageModal="closeImageModal"
+      />
     </div>
-    <div class="rightOutlined" :style="{ zIndex: 1082 }" v-if="visible && afterImageVif">
-      <RightOutlined :style="{ fontSize: '30px' }" @click="afterImage" />
-    </div>
-    <div class="footer" :style="{ zIndex: 1082 }" v-if="visible">
-      <span class="info-item">飞手名：{{ modalImage.flyer }}</span>
-      <span class="info-item">飞行时间：{{ modalImage.flyTime }}</span>
-      <span class="info-item">任务名称：{{ modalImage.taskName }}</span>
-      <span class="info-item">任务位置：{{ modalImage.workPosition }}</span>
+
+    <div class="attribute" v-if="showAttributeWindow">
+      <span class="span-title">详细信息</span>
+      <a-button class="span-button" type="link" @click="closeAttributeWindow">
+        <CloseOutlined style="color: black" />
+      </a-button>
+      <AttributeWindow :showAttributeFeature="showAttributeFeature" />
     </div>
   </div>
 </template>
@@ -69,14 +69,15 @@
 <script lang="ts" setup>
   import { ref, watch, onMounted } from 'vue';
   import { BasicTree, TreeItem, TreeActionType } from '@/components/Tree';
-  import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
+  import { CloseOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
   import type { TreeProps } from 'ant-design-vue';
-
   // vben
   import { useMessage } from '@/hooks/web/useMessage';
   // 组件
   import MapComponent from '@/views/demo/system/geoservermanagement/clound/mapComponent.vue';
   import TimeLine from './TimeLine.vue';
+  import AttributeWindow from './AttributeWindow.vue';
+  import ImageModal from './ImageModal.vue';
   import {
     AchievementManageListTask,
     AchievementManageListDroneShpImageexif,
@@ -108,11 +109,11 @@
   let tableData2: any = [];
   let uniqueKeysArray: any = [];
   let tableData3: any = [];
-  let tableData3_tupian: any = [];
+  const tableData3_tupian: any = ref([]);
   let tableData1_id_list: any = [];
   let tableData2_id_list: any = [];
   let tableData3_id_list: any = [];
-  let isTimeMove = false;
+  // let isTimeMove = false;
   let moveKey = null;
 
   let startTime = dayjs().startOf('year').format('YYYY-MM-DD HH:mm:ss');
@@ -160,7 +161,7 @@
       pageSize: 10000,
     }).then((res) => {
       // 初始化
-      tableData3_tupian = [];
+      tableData3_tupian.value = [];
       treeData.value[2].children = [];
       // 航飞图片-第二层
       let taskDateArray: any = [];
@@ -194,7 +195,7 @@
       res.items.forEach((item) => {
         tableData3_id_list.push(item.id);
       });
-      tableData3_tupian = [];
+      tableData3_tupian.value = [];
       res.items.forEach((item1) => {
         if (item1.imageCount > 0) {
           // 航飞图片-任务
@@ -204,7 +205,7 @@
             taskId: item1.id,
           }).then((res2) => {
             res2.items.forEach((item2) => {
-              tableData3_tupian.push(item2);
+              tableData3_tupian.value.push(item2);
             });
           });
         }
@@ -249,10 +250,13 @@
     let filter_hangfei: any = [];
     moveKey = null;
 
-    console.log(243, checkedKeys_now);
+    console.log(243, checkedKeys);
 
     if (!checkedKeys_now || checkedKeys_now.length == 0) {
       mapboxComponentRef.value.clearTaskLayer('GeoserverManagementRaster');
+      tableData1.forEach((data) => {
+        mapboxComponentRef.value.clearTaskLayer(data.dataTable);
+      });
       mapboxComponentRef.value.clearTaskLayer('GeoTiffManagerRaster');
       mapboxComponentRef.value.clearTaskLayer('AchievementManageRaster');
     } else {
@@ -300,7 +304,7 @@
           tableData3.forEach((data) => {
             if (checkedKey == data.id) {
               if (data.imageCount > 0) {
-                tableData3_tupian.forEach((tupian) => {
+                tableData3_tupian.value.forEach((tupian) => {
                   if (tupian.taskId == data.id) {
                     // 时间轴筛选数据
                     // if (
@@ -322,7 +326,7 @@
         }
         // 航飞图片-任务
         // else {
-        //   let filter = tableData3_tupian.filter((item) => item.id == checkedKey);
+        //   let filter = tableData3_tupian.value.filter((item) => item.id == checkedKey);
         //   filter?.forEach((f) => {
         //     if (!filter_hangfei.includes(f)) {
         //       if (dayjs(startTime).isBefore(f.uploadTime) && dayjs(endTime).isAfter(f.uploadTime)) {
@@ -334,6 +338,9 @@
       });
       // 图层管理
       if (filter_tuceng.length > 0) {
+        tableData1.forEach((data) => {
+          mapboxComponentRef.value.clearTaskLayer(data.dataTable);
+        });
         mapboxComponentRef.value.GeoserverManagementRaster(
           filter_tuceng,
           // [118.30207505530701, 35.30123435040745],
@@ -344,6 +351,9 @@
         );
       } else {
         mapboxComponentRef.value.clearTaskLayer('GeoserverManagementRaster');
+        tableData1.forEach((data) => {
+          mapboxComponentRef.value.clearTaskLayer(data.dataTable);
+        });
       }
       // 影像管理
       if (filter_yingxiang.length > 0) {
@@ -364,33 +374,33 @@
       } else {
         mapboxComponentRef.value.clearTaskLayer('AchievementManageRaster');
       }
-      // 最后选中的有效项目，移动
-      if (moveKey != null && !isTimeMove) {
-        // console.log(358, moveKey);
-        if (moveKey.geometry) {
-          let lngLat: any = moveKey.geometry.slice(6, -1);
-          lngLat = lngLat.split(' ');
-          // 检测坐标系
-          const result = isProjectedCoordinates(parseFloat(lngLat[0]), parseFloat(lngLat[1]));
-          if (result) {
-            lngLat[0] = result[0];
-            lngLat[1] = result[1];
-          }
-          mapboxComponentRef.value.handlerLocation([lngLat[0], lngLat[1]], 10);
-        }
-        if (moveKey.accessUrl) {
-          let bbox = getBboxFromUrl(moveKey.accessUrl);
-          let lngLat = getCenterPoint(bbox);
-          // 检测坐标系
-          const result = isProjectedCoordinates(parseFloat(lngLat[0]), parseFloat(lngLat[1]));
-          if (result) {
-            lngLat[0] = result[0];
-            lngLat[1] = result[1];
-          }
-          mapboxComponentRef.value.handlerLocation([lngLat[0], lngLat[1]], 10);
-        }
-      }
-      isTimeMove = false;
+      // // 最后选中的有效项目，移动
+      // if (moveKey != null && !isTimeMove) {
+      //   // console.log(358, moveKey);
+      //   if (moveKey.geometry) {
+      //     let lngLat: any = moveKey.geometry.slice(6, -1);
+      //     lngLat = lngLat.split(' ');
+      //     // 检测坐标系
+      //     const result = isProjectedCoordinates(parseFloat(lngLat[0]), parseFloat(lngLat[1]));
+      //     if (result) {
+      //       lngLat[0] = result[0];
+      //       lngLat[1] = result[1];
+      //     }
+      //     mapboxComponentRef.value.handlerLocation([lngLat[0], lngLat[1]], 10);
+      //   }
+      //   if (moveKey.accessUrl) {
+      //     let bbox = getBboxFromUrl(moveKey.accessUrl);
+      //     let lngLat = getCenterPoint(bbox);
+      //     // 检测坐标系
+      //     const result = isProjectedCoordinates(parseFloat(lngLat[0]), parseFloat(lngLat[1]));
+      //     if (result) {
+      //       lngLat[0] = result[0];
+      //       lngLat[1] = result[1];
+      //     }
+      //     mapboxComponentRef.value.handlerLocation([lngLat[0], lngLat[1]], 10);
+      //   }
+      // }
+      // isTimeMove = false;
     }
   };
 
@@ -502,7 +512,7 @@
     // console.log(421, value);
     startTime = dayjs(value[0]).startOf('year').format('YYYY-MM-DD HH:mm:ss');
     endTime = dayjs(value[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss');
-    isTimeMove = true;
+    // isTimeMove = true;
     onCheck(checkedKeys_now);
   }
 
@@ -516,97 +526,35 @@
     fetch();
   });
 
+  // 点击矢量图层展示点击块的属性------------------------------------------------------------
+  const showAttributeWindow = ref(false);
+  const showAttributeFeature: any = ref();
+
+  const getDetailByFeature = (feature) => {
+    showAttributeFeature.value = feature.properties;
+    showAttributeWindow.value = true;
+  };
+  const closeAttributeWindow = () => {
+    showAttributeWindow.value = false;
+  };
+
   // 点击地图上的无人机图标后展示图片------------------------------------------------------------
   // 窗口
-  // const modalOpen = ref(false);
-  const modalTitle = ref('');
+  const modalOpen = ref(false);
   const modalImage: any = ref({});
-  const visible = ref<boolean>(false);
+  const closeImageModal = () => {
+    modalOpen.value = false;
+  };
+
   // 打开窗口
-  const handleOpen = (properties) => {
-    console.log(444, properties);
-    // modalOpen.value = true;
-    setVisible(true);
-    modalTitle.value = '';
+  const handleOpenImage = (properties) => {
+    modalOpen.value = true;
     // 正则表达式验证函数
     modalImage.value = properties;
-    if (isValidUrl(properties.path)) {
-      modalImage.value.path = properties.path;
-    } else {
-      modalImage.value.path = VITE_GLOB_API_URL_VAR.value + properties.path;
-    }
   };
-  const beforeImageVif = ref(false);
-  const afterImageVif = ref(false);
-  let nowImgs: any = [];
-  // 上一张
-  function beforeImage() {
-    for (let index = 0; index < nowImgs.length; index++) {
-      const item = nowImgs[index];
-      if (item.id == modalImage.value.id) {
-        modalImage.value = nowImgs[index - 1];
-        if (isValidUrl(modalImage.value.path)) {
-          modalImage.value.path = modalImage.value.path;
-        } else {
-          modalImage.value.path = VITE_GLOB_API_URL_VAR.value + modalImage.value.path;
-        }
-        if (index == 1) {
-          beforeImageVif.value = false;
-        }
-        afterImageVif.value = true;
-        return;
-      }
-    }
-  }
-  // 下一张
-  function afterImage() {
-    for (let index = 0; index < nowImgs.length; index++) {
-      const item = nowImgs[index];
-      if (item.id == modalImage.value.id) {
-        modalImage.value = nowImgs[index + 1];
-        if (isValidUrl(modalImage.value.path)) {
-          modalImage.value.path = modalImage.value.path;
-        } else {
-          modalImage.value.path = VITE_GLOB_API_URL_VAR.value + modalImage.value.path;
-        }
-        if (index == nowImgs.length - 2) {
-          afterImageVif.value = false;
-        }
-        beforeImageVif.value = true;
-        return;
-      }
-    }
-    // setVisible(true);
-  }
-
-  const setVisible = (value): void => {
-    visible.value = value;
-    setTimeout(() => {
-      nowImgs = tableData3_tupian.filter((f) => {
-        return f.taskId == modalImage.value.taskId;
-      });
-      nowImgs?.forEach((item, index) => {
-        if (item.id == modalImage.value.id) {
-          if (index != 0) {
-            beforeImageVif.value = true;
-          } else {
-            beforeImageVif.value = false;
-          }
-          if (index != nowImgs.length - 1) {
-            afterImageVif.value = true;
-          } else {
-            afterImageVif.value = false;
-          }
-        }
-      });
-    }, 500);
+  const handleCancelImage = () => {
+    modalOpen.value = false;
   };
-  // 正则表达式验证函数
-  function isValidUrl(url: string): boolean {
-    const regex =
-      /^(?:http|ftp)s?:\/\/(?:(?:[A-Z0-9](?:[A-Z0-9-]{0,61}[A-Z0-9])?\.)+(?:[A-Z]{2,6}\.?|[A-Z0-9-]{2,}\.?)|localhost|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}|\[?[A-F0-9]*:[A-F0-9:]+\]?)(?::\d+)?(?:\/?|[\/?]\S+)$/i;
-    return regex.test(url);
-  }
 </script>
 <style type="less" scoped>
   ::v-deep .ant-tree-list {
@@ -629,7 +577,7 @@
     justify-content: center;
     width: 100%;
     height: 40px;
-    background-image: url('/videosupervision/title.png');
+    background-image: url('/display/title.png');
     background-size: 100% 100%;
     line-height: 40px;
     text-indent: 18px;
@@ -687,22 +635,38 @@
     }
   }
 
-  .footer {
+  .toper {
     position: absolute;
     display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
+    flex-direction: column;
+    justify-content: flex-start;
     z-index: 1082;
     width: 100%;
     font-size: 40px;
-    bottom: 0px;
-    height: 100px;
+    top: 0px;
+    height: auto; /* 自动高度，适应内容 */
     background: rgba(0, 0, 0, 0.4);
+    padding: 10px; /* 内边距，使文本不紧贴边框 */
   }
 
   .info-item {
     color: #ffffff;
-    flex-basis: calc(50% - 10px); /* 每个 span 占据一半的宽度减去一定的间隔 */
+    font-size: 30px; /* 后面三个项的字体大小 */
+    margin-right: 30px; /* 每个 span 之间的间距 */
+  }
+
+  .info-item.solo {
+    font-size: 40px; /* 第一个 span 的字体大小 */
+    margin-bottom: 10px; /* 第一个 span 的底部间距 */
+  }
+
+  .info-row {
+    display: flex; /* 使用 flex 布局使三个 span 排成一行 */
+    flex-wrap: nowrap; /* 不允许换行 */
+  }
+
+  .info-row .info-item:last-child {
+    margin-right: 0; /* 最后一个 span 不需要右边距 */
   }
 
   .leftOutlined {
@@ -717,6 +681,7 @@
     margin: 5px; /* 外边距 */
     transition: background-color 0.3s ease; /* 平滑过渡 */
     cursor: pointer; /* 鼠标指针变为手型 */
+    overflow: visible;
   }
 
   .rightOutlined {
@@ -739,4 +704,29 @@
   .rightOutlined:hover {
     background-color: black; /* 鼠标悬停时背景颜色变为黑色 */
   }
+
+  .attribute {
+    position: absolute;
+    background-color: white;
+    right: 10px;
+    z-index: 1;
+    top: 80px;
+    width: 400px;
+    height: 540px;
+    border-radius: 10px;
+  }
+
+  .span-title {
+    margin-left: 10px;
+    color: rgba(0, 0, 0, 0.88);
+    font-weight: 600;
+    font-size: 20px;
+    line-height: 1.5;
+    word-wrap: break-word;
+  }
+
+  .span-button {
+    position: absolute;
+    right: 10px;
+  }
 </style>
diff --git a/src/views/demo/system/geoservermanagement/clound/clound.data.ts b/src/views/demo/system/geoservermanagement/clound/clound.data.ts
index 52c45b23..5446d7eb 100644
--- a/src/views/demo/system/geoservermanagement/clound/clound.data.ts
+++ b/src/views/demo/system/geoservermanagement/clound/clound.data.ts
@@ -9,7 +9,7 @@ export const indexColumns: BasicColumn[] = [
     {
         title: '服务名称',
         dataIndex: 'serverName',
-        width: 140,
+        width: 100,
     },
     {
         title: '服务地址',
@@ -20,7 +20,7 @@ export const indexColumns: BasicColumn[] = [
     {
         title: '空间参考',
         dataIndex: 'spatialRef',
-        width: 100,
+        width: 80,
     },
     {
         title: '数据源类型',
@@ -31,12 +31,12 @@ export const indexColumns: BasicColumn[] = [
     {
         title: '数据类型',
         dataIndex: 'dataType',
-        width: 100,
+        width: 40,
     },
     {
         title: '数据表名',
         dataIndex: 'dataTable',
-        width: 150,
+        width: 100,
     },
     {
         title: 'shp或者xls地址',
@@ -53,12 +53,12 @@ export const indexColumns: BasicColumn[] = [
     {
         title: '创建时间',
         dataIndex: 'createTime',
-        width: 150,
+        width: 100,
     },
     {
         title: '修改时间',
         dataIndex: 'updateTime',
-        width: 150,
+        width: 100,
     },
 ];
 
diff --git a/src/views/demo/system/geoservermanagement/clound/mapComponent.vue b/src/views/demo/system/geoservermanagement/clound/mapComponent.vue
index 997bc00a..c13758aa 100644
--- a/src/views/demo/system/geoservermanagement/clound/mapComponent.vue
+++ b/src/views/demo/system/geoservermanagement/clound/mapComponent.vue
@@ -17,7 +17,7 @@
   const mapContainerName = ref<String>();
   mapContainerName.value = 'mapContainer-' + generateUUID();
 
-  const emits = defineEmits(['handleOpen']);
+  const emits = defineEmits(['handleOpenImage', 'getDetailByFeature']);
 
   let map: Map;
 
@@ -215,38 +215,79 @@
   // 图层管理-图层
   function GeoserverManagementRaster(chooseRows, lngLat, zoom, isMove) {
     // 清除图层
-    clearTaskLayer('GeoserverManagementRaster');
+    // clearTaskLayer('GeoserverManagementRaster');
+    // if (isMove) {
+    //   handlerLocation(lngLat, zoom);
+    // }
+    // let tiles: any = [];
+    // chooseRows.forEach((chooseRow) => {
+    //   let tile =
+    //     'http://192.168.10.131:8080/geoserver/my_workspace/wms?service=WMS&version=1.1.0&request=GetMap&layers=my_workspace:' +
+    //     chooseRow.dataTable +
+    //     '&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857' +
+    //     '&format=image/png&TRANSPARENT=TRUE';
+    //   tiles.push(tile);
+    // });
+    // map.addSource('GeoserverManagementRaster' , {
+    //   type: 'raster',
+    //   tiles: tiles,
+    //   tileSize: 256,
+    // });
+    // map.addLayer({
+    //   id: 'GeoserverManagementRaster',
+    //   type: 'raster',
+    //   source: 'GeoserverManagementRaster' ,
+    //   layout: {
+    //     visibility: 'visible',
+    //   },
+    // });
+    // map.on('click', 'GeoserverManagementRaster', (e) => {
+    //   console.log(e);
+    // });
+    // if (map.getLayer('streetLayer')) {
+    //   map.moveLayer('GeoserverManagementRaster', 'streetLayer');
+    // }
+
+    console.log(chooseRows);
     if (isMove) {
       handlerLocation(lngLat, zoom);
     }
-
-    let tiles: any = [];
-    chooseRows.forEach((chooseRow) => {
-      let tile =
-        'http://192.168.10.131:8080/geoserver/my_workspace/wms?service=WMS&version=1.1.0&request=GetMap&layers=my_workspace:' +
-        chooseRow.dataTable +
-        '&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857' +
-        '&format=image/png&TRANSPARENT=TRUE';
-      tiles.push(tile);
+    chooseRows?.forEach((chooseRow) => {
+      // chooseRow.dataTable = 'pingyi304086660120221229';
+      map.addSource(chooseRow.dataTable, {
+        type: 'vector',
+        tiles: [
+          'http://192.168.10.131:8989/api/ShpGeoLayer/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=' +
+            chooseRow.dataTable,
+          // '&field=id,',
+        ],
+        minzoom: parseInt(1),
+        maxzoom: parseInt(18),
+      });
+      map.addLayer({
+        id: chooseRow.dataTable,
+        type: 'fill',
+        source: chooseRow.dataTable,
+        'source-layer': chooseRow.dataTable,
+        paint: {
+          'fill-opacity': 1,
+          'fill-color': 'red',
+          'fill-outline-color': 'green',
+        },
+      });
+      map.on('click', chooseRow.dataTable, function (e) {
+        // 显示弹窗
+        if (e.features.length > 0) {
+          // 获取第一个（也是唯一的）被点击的特征
+          const feature = e.features[0];
+          // console.log(400, feature);
+          emits('getDetailByFeature', feature);
+        }
+      });
+      if (map.getLayer('streetLayer')) {
+        map.moveLayer(chooseRow.dataTable, 'streetLayer');
+      }
     });
-
-    map.addSource('GeoserverManagementRaster' + 'wmsSource', {
-      type: 'raster',
-      tiles: tiles,
-      tileSize: 256,
-    });
-    map.addLayer({
-      id: 'GeoserverManagementRaster',
-      type: 'raster',
-      source: 'GeoserverManagementRaster' + 'wmsSource',
-      layout: {
-        visibility: 'visible',
-      },
-    });
-
-    if (map.getLayer('streetLayer')) {
-      map.moveLayer('GeoserverManagementRaster', 'streetLayer');
-    }
   }
 
   // 影像管理-图层
@@ -268,7 +309,7 @@
       tiles.push(tile);
     });
 
-    map.addSource('GeoTiffManagerRaster' + 'wmsSource', {
+    map.addSource('GeoTiffManagerRaster', {
       type: 'raster',
       tiles: tiles,
       tileSize: 256,
@@ -276,7 +317,7 @@
     map.addLayer({
       id: 'GeoTiffManagerRaster',
       type: 'raster',
-      source: 'GeoTiffManagerRaster' + 'wmsSource',
+      source: 'GeoTiffManagerRaster',
       layout: {
         visibility: 'visible',
       },
@@ -302,11 +343,11 @@
       handlerLocation(lngLat, zoom);
     }
 
-    if (map.getSource('AchievementManageRaster' + 'wmsSource')) {
-      map.getSource('AchievementManageRaster' + 'wmsSource').setData(taskLayerGeoJson);
+    if (map.getSource('AchievementManageRaster')) {
+      map.getSource('AchievementManageRaster').setData(taskLayerGeoJson);
     } else {
       // 聚合效果
-      map.addSource('AchievementManageRaster' + 'wmsSource', {
+      map.addSource('AchievementManageRaster', {
         type: 'geojson',
         data: taskLayerGeoJson,
         cluster: true,
@@ -316,7 +357,7 @@
       map.addLayer({
         id: 'clusters',
         type: 'circle',
-        source: 'AchievementManageRaster' + 'wmsSource',
+        source: 'AchievementManageRaster',
         filter: ['all', ['has', 'point_count'], ['!=', 'point_count', 1]], // 只显示聚合点数量大于1的情况
         paint: {
           'circle-color': [
@@ -334,7 +375,7 @@
       map.addLayer({
         id: 'cluster-count',
         type: 'symbol',
-        source: 'AchievementManageRaster' + 'wmsSource',
+        source: 'AchievementManageRaster',
         filter: ['all', ['has', 'point_count'], ['!=', 'point_count', 1]], // 只显示聚合点数量大于1的情况
         layout: {
           'text-field': ['get', 'point_count_abbreviated'],
@@ -345,7 +386,7 @@
       // map.addLayer({
       //   id: 'unclustered-point',
       //   type: 'circle',
-      //   source: 'AchievementManageRaster' + 'wmsSource',
+      //   source: 'AchievementManageRaster' ,
       //   filter: ['any', ['!', ['has', 'point_count']], ['==', 'point_count', 1]],
       //   paint: {
       //     'circle-color': '#11b4da',
@@ -355,7 +396,7 @@
       //   },
       // });
       // 无人机图标
-      map.loadImage('/map/AchievementManage.png', function (error, image) {
+      map.loadImage('/videosupervision/uav-1.png', function (error, image) {
         if (error) throw error;
         if (!map.hasImage('taskIcon')) {
           map.addImage('taskIcon', image);
@@ -364,7 +405,7 @@
       map.addLayer({
         id: 'AchievementManageRaster',
         type: 'symbol',
-        source: 'AchievementManageRaster' + 'wmsSource',
+        source: 'AchievementManageRaster',
         layout: {
           'icon-image': 'taskIcon',
           'icon-size': 0.8,
@@ -392,7 +433,7 @@
           // 从特征的属性中获取 'path' 值
           // const path = feature.properties.path;
           // console.log(400, feature.properties);
-          emits('handleOpen', feature.properties);
+          emits('handleOpenImage', feature.properties);
         }
       });
 
@@ -429,9 +470,9 @@
       }
     }
     // 检查数据源是否存在
-    if (map.getSource(layerName + 'wmsSource')) {
+    if (map.getSource(layerName)) {
       // 删除数据源
-      map.removeSource(layerName + 'wmsSource');
+      map.removeSource(layerName);
     }
   }
 
diff --git a/src/views/demo/system/geoservermanagement/index.vue b/src/views/demo/system/geoservermanagement/index.vue
index d1b276b0..be614f7e 100644
--- a/src/views/demo/system/geoservermanagement/index.vue
+++ b/src/views/demo/system/geoservermanagement/index.vue
@@ -23,6 +23,7 @@
                     width: calc(85vh);
                     z-index: 0;
                   "
+                  @getDetailByFeature="getDetailByFeature"
                 />
               </div>
             </a-tab-pane>
@@ -138,6 +139,14 @@
         <a-button type="primary" @click="handleEditSubmit"> 提交 </a-button>
       </template>
     </a-modal>
+
+    <div class="attribute" v-if="showAttributeWindow">
+      <span class="span-title">详细信息</span>
+      <a-button class="span-button" type="link" @click="closeAttributeWindow">
+        <CloseOutlined style="color: black" />
+      </a-button>
+      <AttributeWindow :showAttributeFeature="showAttributeFeature" />
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -146,11 +155,13 @@
   import { PermissionBtn } from '@/components/PermissionBtn/index';
   import { BasicTable, useTable, TableAction } from '@/components/Table';
   import { useMessage } from '@/hooks/web/useMessage';
+  import { CloseOutlined } from '@ant-design/icons-vue';
   // 组件
   import UploadFrom from './clound/uploadFrom.vue';
   import HeadersTable from './clound/headersTable.vue';
   import ServiceTable from './clound/serviceTable.vue';
   import MapComponent from './clound/mapComponent.vue';
+  import AttributeWindow from '@/views/demo/system/achievement/Display/AttributeWindow.vue';
 
   import {
     indexColumns,
@@ -479,6 +490,18 @@
     reload();
   }
 
+  // 点击矢量图层展示点击块的属性------------------------------------------------------------
+  const showAttributeWindow = ref(false);
+  const showAttributeFeature: any = ref();
+
+  const getDetailByFeature = (feature) => {
+    showAttributeFeature.value = feature.properties;
+    showAttributeWindow.value = true;
+  };
+  const closeAttributeWindow = () => {
+    showAttributeWindow.value = false;
+  };
+
   onMounted(() => {
     reload();
   });
@@ -493,4 +516,29 @@
     display: flex;
     width: 800px;
   }
+
+  .attribute {
+    position: absolute;
+    background-color: white;
+    right: 10px;
+    z-index: 1;
+    top: 10px;
+    width: 400px;
+    height: 540px;
+    border-radius: 10px;
+  }
+
+  .span-title {
+    margin-left: 10px;
+    color: rgba(0, 0, 0, 0.88);
+    font-weight: 600;
+    font-size: 20px;
+    line-height: 1.5;
+    word-wrap: break-word;
+  }
+
+  .span-button {
+    position: absolute;
+    right: 10px;
+  }
 </style>