From 4751b0a10c78be9fbc13707f20e5e6f3b9ba4cc8 Mon Sep 17 00:00:00 2001
From: zhufu <17863654727@163.com>
Date: Fri, 25 Jul 2025 08:55:38 +0800
Subject: [PATCH 01/13] =?UTF-8?q?=E8=AE=BE=E5=A4=87=E7=AE=A1=E7=90=86-?=
 =?UTF-8?q?=E9=A3=9E=E8=A1=8C=E5=99=A8=E9=A1=B5=E9=9D=A2=E6=89=80=E5=B1=9E?=
 =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E3=80=81=E5=8A=A0=E5=85=A5=E7=BB=84=E7=BB=87?=
 =?UTF-8?q?=E6=97=B6=E9=97=B4=E3=80=81=E5=9B=BA=E4=BB=B6=E7=89=88=E6=9C=AC?=
 =?UTF-8?q?=E6=9C=AA=E6=98=BE=E7=A4=BA=EF=BC=8C=E5=9C=A8=E7=BA=BF=E6=97=B6?=
 =?UTF-8?q?=E9=97=B4=E6=98=BE=E7=A4=BA=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/demo/workmanagement/device/Aerocraft/utils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/demo/workmanagement/device/Aerocraft/utils.ts b/src/views/demo/workmanagement/device/Aerocraft/utils.ts
index 24ba975..6d13166 100644
--- a/src/views/demo/workmanagement/device/Aerocraft/utils.ts
+++ b/src/views/demo/workmanagement/device/Aerocraft/utils.ts
@@ -26,7 +26,7 @@ export const columns = [
   },
   {
     title: '加入组织时间',
-    dataIndex: 'updateTime',
+    dataIndex: 'createTime',
   },
 ];
 

From a3bd784ee24b1ae7b7181ab98c300b95a410c6b2 Mon Sep 17 00:00:00 2001
From: zhufu <17863654727@163.com>
Date: Fri, 25 Jul 2025 09:02:09 +0800
Subject: [PATCH 02/13] =?UTF-8?q?=E8=AE=BE=E5=A4=87=E7=AE=A1=E7=90=86-?=
 =?UTF-8?q?=E6=9C=BA=E5=9C=BA=E5=8F=8A=E9=A3=9E=E8=A1=8C=E5=99=A8=E7=9A=84?=
 =?UTF-8?q?=E7=AD=9B=E9=80=89=E6=9D=A1=E4=BB=B6=E9=83=BD=E6=9C=AA=E7=94=9F?=
 =?UTF-8?q?=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/demo/workmanagement/device/Airport/utils.ts | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/views/demo/workmanagement/device/Airport/utils.ts b/src/views/demo/workmanagement/device/Airport/utils.ts
index 560cc45..7606c81 100644
--- a/src/views/demo/workmanagement/device/Airport/utils.ts
+++ b/src/views/demo/workmanagement/device/Airport/utils.ts
@@ -81,9 +81,16 @@ export const searchFormSchema: FormSchema[] = [
     colProps: { span: 4 },
   },
   {
-    field: 'model',
+    field: 'type',
     label: '设备型号',
-    component: 'Input',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: 'Dock 1', value: 'Dock 1' },
+        { label: 'Dock 2', value: 'Dock 2' },
+        { label: 'Dock 3', value: 'Dock 3' },
+      ],
+    },
     colProps: { span: 4 },
   },
   {

From 543c62fef34e8c98991074ceefee26774de843f2 Mon Sep 17 00:00:00 2001
From: userName <userEmail>
Date: Fri, 25 Jul 2025 10:42:07 +0800
Subject: [PATCH 03/13] =?UTF-8?q?=E7=9C=81=E4=BB=BB=E5=8A=A1=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E4=B8=8E=E5=B7=A5=E4=BD=9C=E8=AE=A1=E5=88=92=E5=85=B3?=
 =?UTF-8?q?=E8=81=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/demo/provincetasks/index.vue        | 22 +++++++++++++++++--
 .../workplan/components/createWorkPlan.vue    | 16 +++++++++-----
 .../demo/workmanagement/workplan/index.vue    |  9 ++++++++
 3 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/src/views/demo/provincetasks/index.vue b/src/views/demo/provincetasks/index.vue
index 5f2a685..3852ed4 100644
--- a/src/views/demo/provincetasks/index.vue
+++ b/src/views/demo/provincetasks/index.vue
@@ -1,7 +1,9 @@
 <template>
     <BasicTable @register="registerTable">
-        <template #toolbar>
-            <!-- <a-button type="primary" @click=""></a-button> -->
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'action'">
+            <a-button v-if="!record.tasklist" type="primary" @click="openDraw(record)">生成任务</a-button>
+          </template>
         </template>
     </BasicTable>
 </template>
@@ -11,6 +13,9 @@ import { ref, defineProps, onMounted, watch, nextTick } from "vue"
 import { BasicTable, useTable, TableAction } from '@/components/Table';
 import { columns, searchFormSchema } from './utils' 
 import { GetDataList } from '@/api/demo/provincetasks'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
 
 const [registerTable, { reload, expandAll, getForm,getDataSource,setTableData }] = useTable({
     title: '任务列表',
@@ -29,6 +34,11 @@ const [registerTable, { reload, expandAll, getForm,getDataSource,setTableData }]
     // 显示表格设置工具
     showTableSetting: true,
     bordered: false,
+    actionColumn: {
+      width: 160,
+      title: '操作',
+      dataIndex: 'action',
+    },
     beforeFetch(data) {
       return data
     },
@@ -41,6 +51,14 @@ const [registerTable, { reload, expandAll, getForm,getDataSource,setTableData }]
       return info;
     },
 });
+const openDraw = (e) =>{
+  router.push({ 
+    path: '/workmanagement/workplan',
+    query: {
+      taskid: e.id
+    }
+  })
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/demo/workmanagement/workplan/components/createWorkPlan.vue b/src/views/demo/workmanagement/workplan/components/createWorkPlan.vue
index e3e979e..721f496 100644
--- a/src/views/demo/workmanagement/workplan/components/createWorkPlan.vue
+++ b/src/views/demo/workmanagement/workplan/components/createWorkPlan.vue
@@ -190,7 +190,7 @@
         </div>
         <div class="footer-container">
             <div >
-                <a-button  @click="resetForm"  style="width:100%;">取消</a-button>
+                <a-button v-if="!paramValue" @click="resetForm"  style="width:100%;">取消</a-button>
             </div>
             <div v-if="submitForm.status == 0">
                 <a-button style="width:100%;" type="primary" @click="onSubmit">确定</a-button>
@@ -204,6 +204,9 @@ import { ref, defineEmits, defineProps, watch } from "vue";
 import { PlusOutlined,LeftOutlined,DeleteOutlined,MoreOutlined } from '@ant-design/icons-vue';
 import { addTask,editTask } from "@/api/sys/workplan";
 import { Modal, message } from 'ant-design-vue';
+import { useRoute } from 'vue-router'
+const router = useRoute()
+const paramValue = router.query.taskid
 
 const formRef = ref();
 const labelCol = { span: 24 };
@@ -245,7 +248,8 @@ const props = defineProps({
             "expectedFileCount": 0,
             "uploadedFileCount": 0,
             "flightId": null,
-            "reason": null
+            "reason": null,
+            "externalTaskId": null
         })
     },
     "editMode":{
@@ -256,8 +260,6 @@ const props = defineProps({
 
 
 
-
-
 const weekdays = ref([
     {
         'label':'周日',
@@ -369,7 +371,8 @@ const submitForm = ref({
   "expectedFileCount": 0,
   "uploadedFileCount": 0,
   "flightId": null,
-  "reason": null
+  "reason": null,
+  "externalTaskId": null
 })
 
 
@@ -510,6 +513,9 @@ const onSubmit =async () => {
             message.error("操作失败！");
         }
     }else{
+        if(paramValue){
+            submitForm.value.externalTaskId = paramValue
+        }
         // 创建
         let res = await addTask(submitForm.value);
         if(res){
diff --git a/src/views/demo/workmanagement/workplan/index.vue b/src/views/demo/workmanagement/workplan/index.vue
index b8ddf6c..da7227a 100644
--- a/src/views/demo/workmanagement/workplan/index.vue
+++ b/src/views/demo/workmanagement/workplan/index.vue
@@ -72,6 +72,11 @@ import axios from 'axios';
 
 import { XMLParser, XMLBuilder } from 'fast-xml-parser';
 
+import { useRoute } from 'vue-router'
+const router = useRoute()
+const paramValue = router.query.taskid
+
+
 const airLineForm = ref({
     "id": null,
     "airLineName": null,
@@ -112,6 +117,10 @@ const aircraftShow = ref(false);
 const createAirLineShow = ref(false);
 const importAirLineShow = ref(true);
 
+if(paramValue){
+    planListShow.value = false;
+    workPlanFormShow.value = true;
+}
 const selectAriLine = ()=> {
     ariLineShow.value = true;
     aircraftShow.value = false;

From ca00b4d5babbdd362a0dd7d3fce04ccec87a142c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E5=A6=8D?= <1455167345@qq.com>
Date: Fri, 25 Jul 2025 11:12:39 +0800
Subject: [PATCH 04/13] =?UTF-8?q?=E9=A3=9E=E8=A1=8C=E6=8E=A7=E5=88=B6?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E9=94=AE=E7=9B=98=E4=BA=8B=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../flightoperation/src/FlightControl.vue     | 43 +++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/src/views/demo/workmanagement/flightoperation/src/FlightControl.vue b/src/views/demo/workmanagement/flightoperation/src/FlightControl.vue
index 155998e..386990e 100644
--- a/src/views/demo/workmanagement/flightoperation/src/FlightControl.vue
+++ b/src/views/demo/workmanagement/flightoperation/src/FlightControl.vue
@@ -477,7 +477,48 @@
     };
     servicesTopic(querys);
   };
+  const handleKeyDown = (event) => {
+    if (event.key === 'w') {
+      changeDRC('throttle', 'up', '上升');
+    } else if (event.key === 's') {
+      changeDRC('throttle', 'down', '下降');
+    } else if (event.key === 'a') {
+      changeDRC('yaw', 'down', '左旋转');
+    } else if (event.key === 'd') {
+      changeDRC('yaw', 'up', '右旋转');
+    } else if (event.key === 'ArrowUp') {
+      changeDRC('pitch', 'up', '前进');
+    } else if (event.key === 'ArrowDown') {
+      changeDRC('pitch', 'down', '后退');
+    } else if (event.key === 'ArrowLeft') {
+      changeDRC('roll', 'down', '左移');
+    } else if (event.key === 'ArrowRight') {
+      changeDRC('roll', 'up', '右移');
+    }
+  };
+  const handleKeyUp = (event) => {
+    if (event.key === 'w') {
+      changeDRC('throttle', 'up', '');
+    } else if (event.key === 's') {
+      changeDRC('throttle', 'down', '');
+    } else if (event.key === 'd') {
+      changeDRC('yaw', 'down', '');
+    } else if (event.key === 'a') {
+      changeDRC('yaw', 'up', '');
+    } else if (event.key === 'ArrowUp') {
+      changeDRC('pitch', 'up', '');
+    } else if (event.key === 'ArrowDown') {
+      changeDRC('pitch', 'down', '');
+    } else if (event.key === 'ArrowLeft') {
+      changeDRC('roll', 'down', '');
+    } else if (event.key === 'ArrowRight') {
+      changeDRC('roll', 'up', '');
+    }
+  };
   onMounted(() => {
+    // 添加键盘事件监听
+    document.addEventListener('keydown', handleKeyDown);
+    document.addEventListener('keyup', handleKeyUp);
     // 获取mqtt客户端信息
     getRedisUser(userInfo.id).then((res) => {
       if (res) {
@@ -570,6 +611,8 @@
     destroySeizeConnection();
     changeRedisUser(false);
     monitorDRC.value = false;
+    document.removeEventListener('keydown', handleKeyDown);
+    document.removeEventListener('keyup', handleKeyUp);
   });
 </script>
 <style lang="less" scoped>

From 01dcf8cdc74a5556d9164790fcc92415b369a8c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=BB=95=E5=B5=A9?= <17854119262@163.com>
Date: Fri, 25 Jul 2025 15:10:35 +0800
Subject: [PATCH 05/13] =?UTF-8?q?=E5=AA=92=E4=BD=93=E5=BA=93-=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E5=B1=95=E7=A4=BA=E5=92=8C=E5=9B=BE=E7=89=87=E5=8E=86?=
 =?UTF-8?q?=E5=8F=B2=E8=B7=AF=E5=BE=84=20=E5=AE=8C=E6=95=B4=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/demo/system/mediaLibrary/index.vue  |  48 +-
 .../demo/system/mediaLibrary/path/index.vue   |   8 +-
 .../mediaLibrary/path/pathImageInfo.vue       |  12 +-
 .../demo/system/mediaLibrary/path/pathMap.vue |  42 +-
 .../demo/system/mediaLibrary/preview/Map.vue  | 582 ++++++++++++------
 .../system/mediaLibrary/preview/index.vue     |  18 +-
 .../demo/system/mediaLibrary/preview/map2.vue | 321 ----------
 .../system/mediaLibrary/preview/preview.ts    |   3 +-
 .../preview/previewImageInformation.vue       |  26 +-
 9 files changed, 466 insertions(+), 594 deletions(-)
 delete mode 100644 src/views/demo/system/mediaLibrary/preview/map2.vue

diff --git a/src/views/demo/system/mediaLibrary/index.vue b/src/views/demo/system/mediaLibrary/index.vue
index 9f2c311..0f0df88 100644
--- a/src/views/demo/system/mediaLibrary/index.vue
+++ b/src/views/demo/system/mediaLibrary/index.vue
@@ -39,7 +39,7 @@
               />
               <img
                 v-if="record.objectKey && record.objectKey.includes('jpeg')"
-                :src="getImgurl(record.objectKey)"
+                :src="VITE_MEDIALIBRARY_IMAGE_URL + record.objectKey"
                 :width="30"
                 :height="20"
               />
@@ -95,7 +95,8 @@
                 </a-tooltip>
                 <a-tooltip placement="top">
                   <template #title>
-                    <span>查看地图图片历史路径</span>
+                    <div>查看地图图片历史路径</div>
+                    <div>只展示在地图上加载的图片</div>
                   </template>
                   <a-button
                     type="text"
@@ -156,7 +157,7 @@
           />
           <img
             v-if="record.objectKey"
-            :src="getImgurl(record.objectKey)"
+            :src="VITE_MEDIALIBRARY_IMAGE_URL + record.objectKey"
             :width="60"
             :height="40"
             @click="lookRecord(record)"
@@ -210,11 +211,12 @@
         @chooseNowPreviewRecord="chooseNowPreviewRecord"
         @closeModal="closeModal"
         @handleSuccess="handleSuccess"
+        @openPathModal="openPathModal"
       />
     </a-modal>
-    <!-- 变化检测弹窗 -->
+    <!-- 路径地图弹窗 -->
     <a-modal
-      v-model:open="comparisonOpen"
+      v-model:open="pathOpen"
       width="100%"
       wrap-class-name="full-modal"
       :centered="true"
@@ -225,11 +227,17 @@
       :mask="false"
       :maskClosable="false"
     >
-      <Comparison @closeComparisonModal="closeComparisonModal" />
+      <Path
+        :allImageDataList="allImageDataList"
+        :nowShowImageData="nowShowImageData"
+        :floderName="floderName"
+        @closePathModal="closePathModal"
+        @handleSuccessPath="handleSuccessPath"
+      />
     </a-modal>
-    <!-- 路径地图弹窗 -->
+    <!-- 变化检测弹窗 -->
     <a-modal
-      v-model:open="pathOpen"
+      v-model:open="comparisonOpen"
       width="100%"
       wrap-class-name="full-modal"
       :centered="true"
@@ -240,13 +248,7 @@
       :mask="false"
       :maskClosable="false"
     >
-      <Path
-        :allImageDataList="allImageDataList"
-        :nowShowImageData="nowShowImageData"
-        :floderName="floderName"
-        @closePathModal="closePathModal"
-        @handleSuccessPath="handleSuccessPath"
-      />
+      <Comparison @closeComparisonModal="closeComparisonModal" />
     </a-modal>
   </PageWrapper>
 </template>
@@ -456,16 +458,6 @@
       showTableData.value = res;
     });
   }
-  // 图片获取路径
-  function getImgurl(url) {
-    let uu = VITE_MEDIALIBRARY_IMAGE_URL + url;
-    // 使用示例
-    // getImageDimensions(uu, function (dimensions) {
-    //   console.log('宽度: ' + dimensions.width);
-    //   console.log('高度: ' + dimensions.height);
-    // });
-    return uu;
-  }
 
   function getImageDimensions(url, callback) {
     const img = new Image();
@@ -734,7 +726,7 @@
           arr.graffitiJson = [];
         }
       });
-      nowShowImageData.value = allImageDataList.value.filter((item) => item.id == record.id)[0];
+      nowShowImageData.value = allImageDataList.value.find((item) => item.id == record.id);
       floderName.value = floders.value[floders.value.length - 1].name;
       pathOpen.value = true;
     });
@@ -745,9 +737,9 @@
     pathOpen.value = false;
   }
   // 刷新
-  function handleSuccessPath() {
+  function handleSuccessPath(value) {
     setTimeout(() => {
-      openPathModal(nowShowImageData.value);
+      openPathModal(value);
       reload();
     }, 500);
   }
diff --git a/src/views/demo/system/mediaLibrary/path/index.vue b/src/views/demo/system/mediaLibrary/path/index.vue
index ba7f1ff..26d696d 100644
--- a/src/views/demo/system/mediaLibrary/path/index.vue
+++ b/src/views/demo/system/mediaLibrary/path/index.vue
@@ -130,8 +130,12 @@
     pathMapRef.value.handlerLocation([position.lng, position.lat]);
   }
   // 刷新列表和当前值
-  function handleSuccessPath() {
-    emits('handleSuccessPath');
+  function handleSuccessPath(value) {
+    emits('handleSuccessPath', value);
+  }
+  // 打开路径弹窗
+  function openPathModal(value) {
+    emits('openPathModal', value);
   }
 </script>
 <style lang="less" scoped>
diff --git a/src/views/demo/system/mediaLibrary/path/pathImageInfo.vue b/src/views/demo/system/mediaLibrary/path/pathImageInfo.vue
index 1b1b6ad..06b7fda 100644
--- a/src/views/demo/system/mediaLibrary/path/pathImageInfo.vue
+++ b/src/views/demo/system/mediaLibrary/path/pathImageInfo.vue
@@ -632,7 +632,7 @@
       editNameFlag.value = true;
       createMessage.success(res);
       emits('funUpdateDisplayOrShowOnMapData', props.nowShowImageData);
-      emits('handleSuccessPath');
+      emits('handleSuccessPath', props.nowShowImageData);
     });
   }
   function editNameBlur() {
@@ -784,7 +784,7 @@
         createMessage.success('在地图上取消加载成功');
       }
       emits('funUpdateDisplayOrShowOnMapData', props.nowShowImageData);
-      emits('handleSuccessPath');
+      emits('handleSuccessPath', props.nowShowImageData);
     });
   }
 
@@ -848,7 +848,7 @@
       }).then((res) => {
         addFileTagsFlag.value = true;
         newFileTagsName.value = '';
-        emits('handleSuccessPath');
+        emits('handleSuccessPath', props.nowShowImageData);
       });
     } else {
       return createMessage.error('此标签已存在！');
@@ -875,7 +875,7 @@
           display: props.nowShowImageData.display,
           showOnMap: props.nowShowImageData.showOnMap,
         }).then((res) => {
-          emits('handleSuccessPath');
+          emits('handleSuccessPath', props.nowShowImageData);
         });
       },
       onCancel: () => {},
@@ -904,7 +904,7 @@
       display: props.nowShowImageData.display,
       showOnMap: props.nowShowImageData.showOnMap,
     }).then((res) => {
-      emits('handleSuccessPath');
+      emits('handleSuccessPath', props.nowShowImageData);
     });
   }
   // 删除
@@ -921,7 +921,7 @@
       display: props.nowShowImageData.display,
       showOnMap: props.nowShowImageData.showOnMap,
     }).then((res) => {
-      emits('handleSuccessPath');
+      emits('handleSuccessPath', props.nowShowImageData);
     });
   }
 
diff --git a/src/views/demo/system/mediaLibrary/path/pathMap.vue b/src/views/demo/system/mediaLibrary/path/pathMap.vue
index c91208a..8d613cd 100644
--- a/src/views/demo/system/mediaLibrary/path/pathMap.vue
+++ b/src/views/demo/system/mediaLibrary/path/pathMap.vue
@@ -345,45 +345,6 @@
     },
   );
 
-  // watch(
-  //   () => props.nowShowImageData,
-  //   (newValue) => {
-  //     if (newValue) {
-  //       // 地图照片-地面点
-  //       bottomPointGraphicData.forEach((graphicLayer) => {
-  //         if (graphicLayer.options.id == newValue.id + '_bottom') {
-  //           graphicLayer.show = newValue.display == 1 ? true : false;
-  //         }
-  //       });
-  //       // 地图照片-飞行点
-  //       // flightointGraphicData.forEach((graphicLayer) => {
-  //       //   if (graphicLayer.options.id == newValue.id + '_flight') {
-  //       //   }
-  //       // });
-  //       // 地图照片-地面点到展示图片的线
-  //       bottomImagePolylineGraphicData.forEach((graphicLayer) => {
-  //         if (graphicLayer.options.id == newValue.id + '_polyline') {
-  //           graphicLayer.show = newValue.display == 1 ? true : false;
-  //         }
-  //       });
-  //       // 地图照片-展示图片
-  //       imageGraphicData.forEach((graphicLayer) => {
-  //         if (graphicLayer.options.id == newValue.id + '_image') {
-  //           graphicLayer.show = newValue.display == 1 ? true : false;
-  //           graphicLayer.setStyle({
-  //             label: {
-  //               text: `${newValue.name}`,
-  //             },
-  //           });
-  //         }
-  //       });
-  //     }
-  //   },
-  //   {
-  //     deep: true,
-  //   },
-  // );
-
   // 地图照片--------------------------------------------------------------------
   // 地图照片-初始化-遍历展示
   const showAllImageDataList = async () => {
@@ -412,8 +373,7 @@
       if (item.lng && item.lat && item.absoluteAltitude && item.showOnMap == 1) {
         const image = new Image();
         image.crossOrigin = 'Anonymous';
-        // image.src = item.preview_url;
-        // image.src = VITE_MEDIALIBRARY_IMAGE_URL + item.objectKey;
+        // image.src = VITE_MEDIALIBRARY_IMAGE_URL + item.minipic;
         image.src =
           'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871';
         image.onload = () => {
diff --git a/src/views/demo/system/mediaLibrary/preview/Map.vue b/src/views/demo/system/mediaLibrary/preview/Map.vue
index c111028..2bceec1 100644
--- a/src/views/demo/system/mediaLibrary/preview/Map.vue
+++ b/src/views/demo/system/mediaLibrary/preview/Map.vue
@@ -1,210 +1,438 @@
 <template>
-  <div :id="mapId" class="map">
+  <div ref="vChartRef" id="mars3d-container" class="mars3d-container">
     <div class="mapInfo">
       <span> {{ props.nowPreviewRecord.lat }}°N</span>
       <span> {{ props.nowPreviewRecord.lng }}°E</span>
     </div>
   </div>
 </template>
-
-<script setup lang="ts">
-  import { defineProps, ref, onMounted, onUnmounted, defineEmits, watch } from 'vue';
-  import { v4 as uuidv4 } from 'uuid';
-  import mapboxgl, { Map } from 'mapbox-gl';
-  import { MapboxConfig, MapboxDefaultStyle } from '@/components/MapboxMaps/src/config';
-  import axios from 'axios';
-  import {
-    ExpandOutlined,
-    CompressOutlined,
-    PlusOutlined,
-    MinusOutlined,
-    HeatMapOutlined,
-  } from '@ant-design/icons-vue';
-  import { cloneDeep } from 'lodash-es';
+<script lang="ts" setup>
+  import { ref, watch, onMounted, defineEmits } from 'vue';
+  import * as mars3d from 'mars3d';
+  import * as Cesium from 'mars3d-cesium';
+  import { getAppEnvConfig } from '@/utils/env';
+  const { VITE_MEDIALIBRARY_IMAGE_URL } = getAppEnvConfig();
 
   const props = defineProps(['nowPreviewRecord', 'previewRecordList', 'hideOrShowTextboxFlag']);
-  const emit = defineEmits(['chooseNowPreviewRecord', 'reloadTable']);
+  const emits = defineEmits(['chooseNowPreviewRecord']);
+
+  let map: mars3d.Map; // 地图对象
+  let graphicLayers = new mars3d.layer.GraphicLayer();
+  // 地图照片-地面点到展示图片的线
+  let bottomImagePolylineGraphicData: any = [];
+  // 地图照片-展示图片
+  let imageGraphicData: any = [];
+
+  const vChartRef: any = ref<HTMLElement>();
+
+  onMounted(() => {
+    initMap();
+  });
+
+  // 显示or隐藏地图上的其他标注信息
+  watch(
+    () => props.hideOrShowTextboxFlag,
+    (newValue) => {
+      imageGraphicData.forEach((graphic) => {
+        if (graphic.options.id !== props.nowPreviewRecord.id) {
+          graphic.setStyle({
+            show: newValue,
+          });
+        }
+      });
+      bottomImagePolylineGraphicData.forEach((graphic) => {
+        if (graphic.options.id !== props.nowPreviewRecord.id + '_polyline') {
+          graphic.setStyle({
+            show: newValue,
+          });
+        }
+      });
+    },
+  );
 
-  const mapId = `modal-map-${uuidv4()}`;
-  const networkType = ref('WAN');
-  let map: Map;
+  // 显示or隐藏地图上的其他标注信息
+  watch(
+    () => props.nowPreviewRecord,
+    () => {
+      imageGraphicData.forEach((graphic) => {
+        if (graphic.options.id !== props.nowPreviewRecord.id) {
+          graphic.setStyle({
+            image: graphic.options.defaultImage,
+            show: props.hideOrShowTextboxFlag,
+          });
+        } else {
+          graphic.setStyle({
+            image: graphic.options.chooseImage,
+            show: true,
+          });
+        }
+      });
+      bottomImagePolylineGraphicData.forEach((graphic) => {
+        if (graphic.options.id !== props.nowPreviewRecord.id + '_polyline') {
+          graphic.setStyle({
+            show: props.hideOrShowTextboxFlag,
+          });
+        } else {
+          graphic.setStyle({
+            show: true,
+          });
+        }
+      });
+    },
+  );
 
   const initMap = () => {
-    let mapDataSources: any = {
-      'raster-tiles': {
-        type: 'raster',
-        tiles: [
-          `http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=${MapboxConfig.TDT_TOKEN}`,
-        ],
-        tileSize: 256,
-        minzoom: 1,
-        maxzoom: 17,
+    map = new mars3d.Map(vChartRef.value, {
+      scene: {
+        center: {
+          lat: parseFloat(props.nowPreviewRecord.lat),
+          lng: parseFloat(props.nowPreviewRecord.lng),
+          alt: 8306.3,
+          heading: 360,
+          pitch: -45,
+        },
+        scene3DOnly: false,
+        shadows: false,
+        removeDblClick: true,
+        sceneMode: 3,
+        showSun: true,
+        showMoon: true,
+        showSkyBox: true,
+        showSkyAtmosphere: true,
+        fog: true,
+        fxaa: true,
+        requestRenderMode: true,
+        contextOptions: {
+          requestWebgl1: false,
+          webgl: {
+            preserveDrawingBuffer: true,
+            alpha: false,
+            stencil: true,
+            powerPreference: 'high-performance',
+          },
+        },
+        globe: {
+          depthTestAgainstTerrain: false,
+          baseColor: '#546a53',
+          showGroundAtmosphere: true,
+          enableLighting: false,
+        },
+        cameraController: {
+          zoomFactor: 3,
+          minimumZoomDistance: 1,
+          maximumZoomDistance: 50000000,
+          enableRotate: true,
+          enableTranslate: true,
+          enableTilt: true,
+          enableZoom: true,
+          enableCollisionDetection: true,
+          minimumCollisionTerrainHeight: 15000,
+        },
       },
-      'raster-tiles-font': {
-        type: 'raster',
-        tiles: [
-          `https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=${MapboxConfig.TDT_TOKEN}`,
-        ],
-        tileSize: 256,
+      control: {
+        homeButton: true,
+        baseLayerPicker: false,
+        sceneModePicker: false,
+        vrButton: false,
+        fullscreenButton: false,
+        navigationHelpButton: false,
+        animation: false,
+        timeline: false,
+        infoBox: false,
+        geocoder: false,
+        selectionIndicator: false,
+        showRenderLoopErrors: false,
+        contextmenu: {
+          hasDefault: false,
+        },
+        mouseDownView: false,
+        zoom: false,
+        compass: false,
+        distanceLegend: false,
       },
-    };
-    let mapDataLayers: any = [
-      {
-        id: 'tdt-vec-tiles',
-        type: 'raster',
-        source: 'raster-tiles-font',
+      method: {
+        templateValues: {
+          dataServer: '//data.mars3d.cn',
+          gltfServerUrl: '//data.mars3d.cn/gltf',
+        },
       },
-      {
-        id: 'tdt-img-tiles',
-        type: 'raster',
-        source: 'raster-tiles',
+      terrain: {
+        url: '//data.mars3d.cn/terrain',
+        show: true,
+        clip: true,
       },
-    ];
-    map = new mapboxgl.Map({
-      container: mapId,
-      language: 'zh-cmn',
-      projection: 'equirectangular', // wgs84参考系
-      style: {
-        glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
-        version: 8,
-        sources: mapDataSources,
-        layers: mapDataLayers,
-      },
-      maxZoom: 22,
-      minZoom: 8,
-      pitch: 0,
-      zoom: 14,
-      center: [parseFloat(props.nowPreviewRecord.lng), parseFloat(props.nowPreviewRecord.lat)],
+      basemaps: [
+        {
+          id: 10,
+          name: '地图底图',
+          type: 'group',
+          opacity: 1,
+        },
+        {
+          id: 2021,
+          pid: 10,
+          name: '天地图影像',
+          icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
+          type: 'group',
+          layers: [
+            {
+              name: '底图',
+              type: 'tdt',
+              layer: 'img_d',
+              eventParent: {
+                id: 2021,
+                pid: 10,
+                name: '天地图影像',
+                icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
+                type: 'group',
+                layers: [
+                  {
+                    name: '底图',
+                    type: 'tdt',
+                    layer: 'img_d',
+                    show: true,
+                  },
+                  {
+                    name: '注记',
+                    type: 'tdt',
+                    layer: 'img_z',
+                    show: true,
+                  },
+                ],
+                show: true,
+              },
+              private: false,
+              id: 'm-770c35e7-9054-4259-b5ee-c15f108becd0',
+              opacity: 1,
+              pid: 2021,
+              parent: {
+                id: 2021,
+                pid: 10,
+                name: '天地图影像',
+                icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
+                type: 'group',
+                layers: [
+                  {
+                    name: '底图',
+                    type: 'tdt',
+                    layer: 'img_d',
+                    show: true,
+                  },
+                  {
+                    name: '注记',
+                    type: 'tdt',
+                    layer: 'img_z',
+                    show: true,
+                  },
+                ],
+                show: true,
+              },
+              zIndex: 1,
+            },
+            {
+              name: '注记',
+              type: 'tdt',
+              layer: 'img_z',
+              eventParent: {
+                id: 2021,
+                pid: 10,
+                name: '天地图影像',
+                icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
+                type: 'group',
+                layers: [
+                  {
+                    name: '底图',
+                    type: 'tdt',
+                    layer: 'img_d',
+                    show: true,
+                  },
+                  {
+                    name: '注记',
+                    type: 'tdt',
+                    layer: 'img_z',
+                    show: true,
+                  },
+                ],
+                show: true,
+              },
+              private: false,
+              id: 'm-3b881368-574b-48a5-88b2-8b3c2c48fd62',
+              opacity: 1,
+              pid: 2021,
+              parent: {
+                id: 2021,
+                pid: 10,
+                name: '天地图影像',
+                icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
+                type: 'group',
+                layers: [
+                  {
+                    name: '底图',
+                    type: 'tdt',
+                    layer: 'img_d',
+                    show: true,
+                  },
+                  {
+                    name: '注记',
+                    type: 'tdt',
+                    layer: 'img_z',
+                    show: true,
+                  },
+                ],
+                show: true,
+              },
+              zIndex: 2,
+            },
+          ],
+          show: true,
+          opacity: 1,
+        },
+      ],
+      layers: [],
     });
-    setImage();
+    if (map) {
+      map.addLayer(graphicLayers);
+      // 图层
+      showAllImageDataList();
+      const position = Cesium.Cartesian3.fromDegrees(
+        parseFloat(props.nowPreviewRecord.lng),
+        parseFloat(props.nowPreviewRecord.lat),
+      );
+      map.flyToPoint(position);
+    }
   };
 
-  watch(
-    () => props.hideOrShowTextboxFlag,
-    (newValue) => {
-      if (newValue) {
-        props.previewRecordList.forEach((item) => {
-          if (!map.getLayer(item.id)) {
-            const coordinates = [parseFloat(item.lng), parseFloat(item.lat)];
-            // 图片
-            map.addLayer({
-              id: item.id,
-              type: 'symbol',
-              source: {
-                type: 'geojson',
-                data: {
-                  type: 'FeatureCollection',
-                  features: [
-                    {
-                      type: 'Feature',
-                      geometry: {
-                        type: 'Point',
-                        coordinates: coordinates,
-                      },
-                    },
-                  ],
-                },
-              },
-              layout: {
-                'icon-image': item.id,
-                'icon-size': 40 / item.width,
-                // 关键配置：始终显示
-                'icon-allow-overlap': true, // 允许图标重叠时也显示
-                'icon-ignore-placement': true, // 忽略自动布局规则，强制显示
-                visibility: 'visible', // 显式设置为可见
+  // 地图照片-初始化-遍历展示
+  const showAllImageDataList = async () => {
+    // 删除旧数据
+    imageGraphicData?.forEach((graphicLayer) => {
+      graphicLayers.removeGraphic(graphicLayer);
+    });
+    bottomImagePolylineGraphicData?.forEach((graphicLayer) => {
+      graphicLayers.removeGraphic(graphicLayer);
+    });
+    // 图层数据
+    imageGraphicData = [];
+    bottomImagePolylineGraphicData = [];
+
+    props.previewRecordList.forEach((item, index) => {
+      if (item.lng && item.lat && item.absoluteAltitude) {
+        const image = new Image();
+        image.crossOrigin = 'Anonymous';
+        // image.src = VITE_MEDIALIBRARY_IMAGE_URL + item.minipic;
+        image.src =
+          'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871';
+        image.onload = () => {
+          // 创建Canvas元素
+          const canvas = document.createElement('canvas');
+          canvas.width = 30;
+          canvas.height = 30;
+          // 获取Canvas绘图上下文
+          const ctx = canvas.getContext('2d');
+          // 绘制一个圆形裁剪区域
+          ctx.beginPath();
+          ctx.arc(15, 15, 20, 0, Math.PI * 2, true);
+          ctx.closePath();
+          ctx.clip(); // 裁剪区域
+          ctx.fillStyle = '#ffffff00';
+          ctx?.fillRect(0, 0, canvas.width, canvas.height);
+          // 在Canvas上绘制图片
+          ctx.drawImage(image, 2, 2, 26, 26);
+          // 设置边框颜色和宽度
+          ctx.strokeStyle = '#ffffff';
+          ctx.lineWidth = 2;
+          ctx.strokeRect(1, 1, canvas.width - 2, canvas.height - 2);
+          // 将Canvas内容转换为图片的数据URL
+          const dataURL1 = canvas.toDataURL('image/png');
+
+          // 在Canvas上绘制图片（假设image变量已经定义并且是一个有效的Image对象）
+          ctx.drawImage(image, 2, 2, 26, 26);
+          // 设置边框颜色和宽度
+          ctx.strokeStyle = '#2d8cef'; // 蓝色边框
+          ctx.lineWidth = 2; // 边框宽度
+          // 绘制边框
+          ctx.strokeRect(1, 1, canvas.width - 2, canvas.height - 2); // 调整坐标和尺寸以适应边框宽度
+          // 将Canvas内容转换为图片的数据URL
+          const dataURL2 = canvas.toDataURL('image/png');
+
+          // 位置
+          let position = [
+            parseFloat(item.lng),
+            parseFloat(item.lat),
+            parseFloat(item.absoluteAltitude),
+          ];
+          // 地形高度
+          mars3d.PointUtil.getSurfaceHeight(
+            map.scene,
+            Cesium.Cartesian3.fromDegrees(position[0], position[1]),
+          ).then((point) => {
+            // 地面点到展示图片的线
+            let bottomImagePolylineGraphic = new mars3d.graphic.PolylineEntity({
+              id: item.id + '_polyline',
+              positions: [
+                Cesium.Cartesian3.fromDegrees(position[0], position[1], point.height),
+                Cesium.Cartesian3.fromDegrees(position[0], position[1], position[2]),
+              ],
+              style: {
+                color: '#ffffff',
+                width: 1, // 线宽
+                clampToGround: false,
               },
+              hasEdit: false,
             });
-          }
-        });
-      } else {
-        let filters = cloneDeep(props.previewRecordList).filter(
-          (item) => item.id != props.nowPreviewRecord.id,
-        );
-        filters.forEach((fl) => {
-          if (map.getLayer(fl.id)) {
-            map.removeLayer(fl.id);
-          }
-          if (map.getSource(fl.id)) {
-            map.removeSource(fl.id);
-          }
-        });
-      }
-    },
-  );
 
-  function setImage() {
-    props.previewRecordList.forEach((item) => {
-      map.on('style.load', () => {
-        map.loadImage(item.url, (error, image) => {
-          if (error) {
-            console.error('加载图片失败:', error.message);
-            return;
-          }
-          if (!map.hasImage(item.id)) {
-            map.addImage(item.id, image);
-          }
-          const coordinates = [parseFloat(item.lng), parseFloat(item.lat)];
-          if (!map.getLayer(item.id)) {
-            // 图片
-            map.addLayer({
+            // 展示图片
+            let imageGraphic = new mars3d.graphic.BillboardEntity({
               id: item.id,
-              type: 'symbol',
-              source: {
-                type: 'geojson',
-                data: {
-                  type: 'FeatureCollection',
-                  features: [
-                    {
-                      type: 'Feature',
-                      geometry: {
-                        type: 'Point',
-                        coordinates: coordinates,
-                      },
-                    },
-                  ],
-                },
-              },
-              layout: {
-                'icon-image': item.id,
-                'icon-size': 40 / item.width,
-                // 关键配置：始终显示
-                'icon-allow-overlap': true, // 允许图标重叠时也显示
-                'icon-ignore-placement': true, // 忽略自动布局规则，强制显示
-                visibility: 'visible', // 显式设置为可见
+              position: [position[0], position[1], position[2]],
+              style: {
+                image: item.id == props.nowPreviewRecord.id ? dataURL2 : dataURL1,
+                clampToGround: false,
+                scale: 1,
+                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
               },
+              hasEdit: false,
+              // 用于恢复默认
+              defaultImage: dataURL1,
+              // 用于外侧修改图片
+              chooseImage: dataURL2,
             });
-            map.on('click', item.id, function (e) {
-              clickHandler(item);
+            // 监听点击事件
+            imageGraphic.on(mars3d.EventType.click, function () {
+              if (props.nowPreviewRecord.id !== item.id) {
+                clickSetImage(item);
+              }
             });
-          }
-        });
-      });
-    });
-  }
-
-  onMounted(() => {
-    mapboxgl.accessToken = MapboxConfig.ACCESS_TOKEN;
-    // 获取网络环境后加载地图
-    initMap();
-  });
-
-  onUnmounted(() => {
-    map && map.remove();
-    props.previewRecordList.forEach((item) => {
-      map.off('click', item.id, function (e) {
-        clickHandler(item);
-      });
+            // 添加到图层中
+            graphicLayers.addGraphic(bottomImagePolylineGraphic);
+            graphicLayers.addGraphic(imageGraphic);
+            // 数据
+            bottomImagePolylineGraphicData.push(bottomImagePolylineGraphic);
+            imageGraphicData.push(imageGraphic);
+          });
+        };
+      }
     });
-  });
+  };
 
   // 点击事件
-  function clickHandler(item) {
-    emit('chooseNowPreviewRecord', item);
+  function clickSetImage(item) {
+    imageGraphicData.forEach((graphic) => {
+      if (graphic.options.id == item.id) {
+        graphic.setStyle({
+          image: graphic.options.chooseImage,
+        });
+        emits('chooseNowPreviewRecord', item);
+      } else {
+        graphic.setStyle({
+          image: graphic.options.defaultImage,
+        });
+      }
+    });
   }
 </script>
-
 <style lang="less" scoped>
-  .map {
+  .mars3d-container {
     position: relative;
     width: 100%;
     height: 100%;
@@ -233,8 +461,4 @@
       margin-left: 10px;
     }
   }
-
-  ::v-deep .mapboxgl-ctrl {
-    display: none !important;
-  }
 </style>
diff --git a/src/views/demo/system/mediaLibrary/preview/index.vue b/src/views/demo/system/mediaLibrary/preview/index.vue
index 727666d..1994aaa 100644
--- a/src/views/demo/system/mediaLibrary/preview/index.vue
+++ b/src/views/demo/system/mediaLibrary/preview/index.vue
@@ -45,6 +45,7 @@
           @chooseNowPreviewRecord="chooseNowPreviewRecord"
           @handleSuccess="handleSuccess"
           :hideOrShowTextboxFlag="hideOrShowTextboxFlag"
+          @openPathModal="openPathModal"
         />
         <PreviewVideoInformation
           v-if="props.nowPreviewRecord.type == 'video'"
@@ -68,7 +69,12 @@
   } from './preview';
 
   const props = defineProps(['nowPreviewRecord', 'previewRecordList']);
-  const emit = defineEmits(['closeModal', 'chooseNowPreviewRecord', 'handleSuccess']);
+  const emits = defineEmits([
+    'closeModal',
+    'chooseNowPreviewRecord',
+    'handleSuccess',
+    'openPathModal',
+  ]);
 
   const hideOrShowTextboxFlag = ref(true);
   function setHideOrShowTextboxFlag(value) {
@@ -77,16 +83,20 @@
 
   // 选择
   function chooseNowPreviewRecord(value) {
-    emit('chooseNowPreviewRecord', value);
+    emits('chooseNowPreviewRecord', value);
   }
   // 刷新表格
   function handleSuccess(record = null) {
-    emit('handleSuccess', record);
+    emits('handleSuccess', record);
   }
   // 关闭弹窗
   function closeModal() {
     document.body.style.cursor = 'default';
-    emit('closeModal');
+    emits('closeModal');
+  }
+  // 打开路径弹窗
+  function openPathModal(value) {
+    emits('openPathModal', value);
   }
 </script>
 <style lang="less" scoped>
diff --git a/src/views/demo/system/mediaLibrary/preview/map2.vue b/src/views/demo/system/mediaLibrary/preview/map2.vue
deleted file mode 100644
index 59371a3..0000000
--- a/src/views/demo/system/mediaLibrary/preview/map2.vue
+++ /dev/null
@@ -1,321 +0,0 @@
-<template>
-  <div ref="vChartRef" id="mars3d-container" class="mars3d-container">
-    <div class="mapInfo">
-      <span> {{ props.nowPreviewRecord.lat }}°N</span>
-      <span> {{ props.nowPreviewRecord.lng }}°E</span>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-  import { ref, onMounted, defineEmits } from 'vue';
-
-  import * as mars3d from 'mars3d';
-  import * as Cesium from 'mars3d-cesium';
-
-  const props = defineProps(['nowPreviewRecord', 'previewRecordList', 'hideOrShowTextboxFlag']);
-  const emits = defineEmits(['chooseNowPreviewRecord', 'reloadTable', 'mapOnLoad']);
-
-  let map: mars3d.Map; // 地图对象
-  let graphicData: any = [];
-  let graphicLayers = new mars3d.layer.GraphicLayer();
-
-  const vChartRef: any = ref<HTMLElement>();
-
-  onMounted(() => {
-    initMap();
-    addImage();
-  });
-
-  const initMap = () => {
-    map = new mars3d.Map(vChartRef.value, {
-      scene: {
-        center: {
-          lat: parseFloat(props.nowPreviewRecord.lat),
-          lng: parseFloat(props.nowPreviewRecord.lng),
-          alt: 8306.3,
-          heading: 360,
-          pitch: -45,
-        },
-        scene3DOnly: false,
-        shadows: false,
-        removeDblClick: true,
-        sceneMode: 3,
-        showSun: true,
-        showMoon: true,
-        showSkyBox: true,
-        showSkyAtmosphere: true,
-        fog: true,
-        fxaa: true,
-        requestRenderMode: true,
-        contextOptions: {
-          requestWebgl1: false,
-          webgl: {
-            preserveDrawingBuffer: true,
-            alpha: false,
-            stencil: true,
-            powerPreference: 'high-performance',
-          },
-        },
-        globe: {
-          depthTestAgainstTerrain: false,
-          baseColor: '#546a53',
-          showGroundAtmosphere: true,
-          enableLighting: false,
-        },
-        cameraController: {
-          zoomFactor: 3,
-          minimumZoomDistance: 1,
-          maximumZoomDistance: 50000000,
-          enableRotate: true,
-          enableTranslate: true,
-          enableTilt: true,
-          enableZoom: true,
-          enableCollisionDetection: true,
-          minimumCollisionTerrainHeight: 15000,
-        },
-      },
-      control: {
-        homeButton: true,
-        baseLayerPicker: false,
-        sceneModePicker: false,
-        vrButton: false,
-        fullscreenButton: false,
-        navigationHelpButton: false,
-        animation: false,
-        timeline: false,
-        infoBox: false,
-        geocoder: false,
-        selectionIndicator: false,
-        showRenderLoopErrors: false,
-        contextmenu: {
-          hasDefault: false,
-        },
-        mouseDownView: false,
-        zoom: false,
-        compass: false,
-        distanceLegend: false,
-      },
-      method: {
-        templateValues: {
-          dataServer: '//data.mars3d.cn',
-          gltfServerUrl: '//data.mars3d.cn/gltf',
-        },
-      },
-      terrain: {
-        url: '//data.mars3d.cn/terrain',
-        show: true,
-        clip: true,
-      },
-      basemaps: [
-        {
-          id: 10,
-          name: '地图底图',
-          type: 'group',
-          opacity: 1,
-        },
-        {
-          id: 2021,
-          pid: 10,
-          name: '天地图影像',
-          icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
-          type: 'group',
-          layers: [
-            {
-              name: '底图',
-              type: 'tdt',
-              layer: 'img_d',
-              eventParent: {
-                id: 2021,
-                pid: 10,
-                name: '天地图影像',
-                icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
-                type: 'group',
-                layers: [
-                  {
-                    name: '底图',
-                    type: 'tdt',
-                    layer: 'img_d',
-                    show: true,
-                  },
-                  {
-                    name: '注记',
-                    type: 'tdt',
-                    layer: 'img_z',
-                    show: true,
-                  },
-                ],
-                show: true,
-              },
-              private: false,
-              id: 'm-770c35e7-9054-4259-b5ee-c15f108becd0',
-              opacity: 1,
-              pid: 2021,
-              parent: {
-                id: 2021,
-                pid: 10,
-                name: '天地图影像',
-                icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
-                type: 'group',
-                layers: [
-                  {
-                    name: '底图',
-                    type: 'tdt',
-                    layer: 'img_d',
-                    show: true,
-                  },
-                  {
-                    name: '注记',
-                    type: 'tdt',
-                    layer: 'img_z',
-                    show: true,
-                  },
-                ],
-                show: true,
-              },
-              zIndex: 1,
-            },
-            {
-              name: '注记',
-              type: 'tdt',
-              layer: 'img_z',
-              eventParent: {
-                id: 2021,
-                pid: 10,
-                name: '天地图影像',
-                icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
-                type: 'group',
-                layers: [
-                  {
-                    name: '底图',
-                    type: 'tdt',
-                    layer: 'img_d',
-                    show: true,
-                  },
-                  {
-                    name: '注记',
-                    type: 'tdt',
-                    layer: 'img_z',
-                    show: true,
-                  },
-                ],
-                show: true,
-              },
-              private: false,
-              id: 'm-3b881368-574b-48a5-88b2-8b3c2c48fd62',
-              opacity: 1,
-              pid: 2021,
-              parent: {
-                id: 2021,
-                pid: 10,
-                name: '天地图影像',
-                icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
-                type: 'group',
-                layers: [
-                  {
-                    name: '底图',
-                    type: 'tdt',
-                    layer: 'img_d',
-                    show: true,
-                  },
-                  {
-                    name: '注记',
-                    type: 'tdt',
-                    layer: 'img_z',
-                    show: true,
-                  },
-                ],
-                show: true,
-              },
-              zIndex: 2,
-            },
-          ],
-          show: true,
-          opacity: 1,
-        },
-      ],
-      layers: [],
-    });
-    emits('mapOnLoad', map);
-  };
-
-  const addImage = () => {
-    // 删除旧数据
-    graphicData?.forEach((graphicLayer) => {
-      graphicLayers.removeGraphic(graphicLayer);
-    });
-    // 图层
-    map.addLayer(graphicLayers);
-    // 图层数据
-    graphicData = [];
-    props.previewRecordList.forEach((item) => {
-      let graphic = new mars3d.graphic.BillboardEntity({
-        id: item.id,
-        position: [parseFloat(item.lng), parseFloat(item.lat)],
-        style: {
-          // image: '@/assets/images/point.png',
-          image: '../point.png',
-          clampToGround: true,
-          scale: 1,
-          label: {
-            text: item.name,
-            font_size: 12,
-            color: '#ffffff',
-            pixelOffsetY: -30,
-            pixelOffsetX: 0,
-            distanceDisplayCondition: true,
-            distanceDisplayCondition_far: 6000,
-            distanceDisplayCondition_near: 0,
-          },
-        },
-        popup: `<div class="marsTiltPanel marsTiltPanel-theme-green">
-                    <div style="postion: relative; padding: 60px; max-width: 500px; overflow: hidden;">
-
-                    </div>
-                    <div style="position: absolute; bottom: 0; left: 0; width: 85px; height: 2px; transform: rotate(-45deg) translate(15px, -25px); background-color: #15babc;" ></div>
-                </div>`,
-        popupOptions: {
-          offsetY: 0,
-          offsetX: 0,
-          template: '{content}',
-          horizontalOrigin: 'Cesium.HorizontalOrigin.LEFT',
-          verticalOrigin: 'Cesium.VerticalOrigin.CENTER',
-        },
-        pointerEvents: true,
-      });
-      // 将新图形添加到图层中
-      graphicLayers.addGraphic(graphic);
-      graphicData.push(graphic);
-    });
-  };
-</script>
-<style lang="less" scoped>
-  .mars3d-container {
-    position: relative;
-    width: 100%;
-    height: 100%;
-  }
-
-  .mapInfo {
-    position: absolute;
-    width: 100%;
-    height: 30px;
-    bottom: 0px;
-    left: 0px;
-    background: #3d3f3aaa;
-    z-index: 1000;
-    display: flex;
-    justify-content: flex-start;
-
-    span {
-      height: 100%;
-      width: 30%;
-      color: #ffffff;
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-
-      font-size: 15px;
-      margin-left: 10px;
-    }
-  }
-</style>
diff --git a/src/views/demo/system/mediaLibrary/preview/preview.ts b/src/views/demo/system/mediaLibrary/preview/preview.ts
index 93b5e1b..753e9de 100644
--- a/src/views/demo/system/mediaLibrary/preview/preview.ts
+++ b/src/views/demo/system/mediaLibrary/preview/preview.ts
@@ -2,5 +2,4 @@ export { default as PreviewImage } from './previewImage.vue';
 export { default as PreviewVideo } from './previewVideo.vue';
 export { default as PreviewImageInformation } from './previewImageInformation.vue';
 export { default as PreviewVideoInformation } from './previewVideoInformation.vue';
-// export { default as Map } from './Map.vue';
-export { default as Map } from './map2.vue';
\ No newline at end of file
+export { default as Map } from './map.vue';
\ No newline at end of file
diff --git a/src/views/demo/system/mediaLibrary/preview/previewImageInformation.vue b/src/views/demo/system/mediaLibrary/preview/previewImageInformation.vue
index 4fa7796..092e4b9 100644
--- a/src/views/demo/system/mediaLibrary/preview/previewImageInformation.vue
+++ b/src/views/demo/system/mediaLibrary/preview/previewImageInformation.vue
@@ -189,17 +189,22 @@
         </a-col>
         <a-col :span="17">
           <span class="infobutton">
-            <EnvironmentOutlined
-              v-if="props.nowPreviewRecord.showOnMap == 1"
-              style="font-size: 20px; color: #07aaed"
-              @click="flyPoint"
-            />
+            <a-tooltip placement="top">
+              <template #title>
+                <div>查看地图图片历史路径</div>
+                <div>只展示在地图上加载的图片</div>
+              </template>
+              <EnvironmentOutlined
+                v-if="props.nowPreviewRecord.showOnMap == 1"
+                style="font-size: 20px; color: #07aaed"
+                @click="openPathModal"
+              />
+            </a-tooltip>
           </span>
         </a-col>
         <a-col :span="24">
           <div class="map">
             <Map
-              ref="mapRef"
               :nowPreviewRecord="props.nowPreviewRecord"
               :previewRecordList="props.previewRecordList"
               @chooseNowPreviewRecord="chooseNowPreviewRecord"
@@ -231,7 +236,7 @@
   const { createMessage, createConfirm } = useMessage();
 
   const props = defineProps(['nowPreviewRecord', 'previewRecordList', 'hideOrShowTextboxFlag']);
-  const emits = defineEmits(['chooseNowPreviewRecord', 'handleSuccess']);
+  const emits = defineEmits(['chooseNowPreviewRecord', 'handleSuccess', 'openPathModal']);
 
   // 修改名称--------------------------------
   const editNameFlag = ref(true);
@@ -359,10 +364,9 @@
     emits('chooseNowPreviewRecord', value);
   }
 
-  // 地图--------------------------------
-  const mapRef = ref();
-  function flyPoint() {
-    mapRef.value?.flyToPoint([props.nowPreviewRecord.lng, props.nowPreviewRecord.lat]);
+  // 打开路径弹窗
+  function openPathModal() {
+    emits('openPathModal', props.nowPreviewRecord);
   }
 </script>
 <style lang="less" scoped>

From c22989f82c16a085345d32b44873c812cb0bd4a1 Mon Sep 17 00:00:00 2001
From: userName <userEmail>
Date: Fri, 25 Jul 2025 17:23:34 +0800
Subject: [PATCH 06/13] =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E4=BD=9C=E4=B8=9A?=
 =?UTF-8?q?=E5=8C=BA=E5=9F=9F=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/demo/jobarea/index.vue        | 20 ++++-----
 src/views/demo/jobarea/pathLeftMenu.vue | 60 +++++++++++++++----------
 2 files changed, 46 insertions(+), 34 deletions(-)

diff --git a/src/views/demo/jobarea/index.vue b/src/views/demo/jobarea/index.vue
index 1df2892..7400462 100644
--- a/src/views/demo/jobarea/index.vue
+++ b/src/views/demo/jobarea/index.vue
@@ -1,12 +1,7 @@
 <template>
     <div class="pathModal">
       <!-- 左侧目录 -->
-      <div
-        class="leftMenuDiv"
-        :style="{
-          width: leftMenuShow ? '340px' : '64px',
-        }"
-      >
+      <div class="leftMenuDiv">
         <PathLeftMenu
           ref="pathLeftMenuRef"
           :leftMenuShow="leftMenuShow"
@@ -84,7 +79,7 @@
       if (areaInfoShow.value) {
         width += 320;
       }
-      return 'calc(100% - ' + width + 'px)';
+      return '100%';
     });
   
     // 地图ref
@@ -285,11 +280,16 @@
       position: relative;
       display: flex;
       width: 100%;
-      height: 100vh;
+      height: 100%;
   
       .leftMenuDiv {
-        position: relative;
-        height: 100%;
+        position:absolute;
+        top:20px;
+        left:20px;
+        z-index:1;
+        display:flex;
+        gap:15px;
+        width: 340px;
       }
   
       .mapDiv {
diff --git a/src/views/demo/jobarea/pathLeftMenu.vue b/src/views/demo/jobarea/pathLeftMenu.vue
index df07d4a..be874f3 100644
--- a/src/views/demo/jobarea/pathLeftMenu.vue
+++ b/src/views/demo/jobarea/pathLeftMenu.vue
@@ -7,10 +7,10 @@
         </div>
         <div class="leftMenuContent_list">
           <!-- 地图作业区域 -->
-          <div v-if="showMenuInfoName == '地图作业区域'" style="margin: 10px">
+          <div v-if="showMenuInfoName == '地图作业区域'" style="margin: 10px 10px 20px 16px">
             <a-select
               v-model:value="areatype"
-              style="width: 120px; margin-right: 15px"
+              style="width: 120px; margin-right: 15px;background: #151823;"
               @change="handleChangeAreaSelect"
             >
               <a-select-option value="all">全部类型</a-select-option>
@@ -38,7 +38,6 @@
                   props.nowShowAreaData && props.nowShowAreaData.id == show.id
                     ? '2px solid #2D8CF0'
                     : '',
-                background: props.nowShowAreaData && show.state == 0 ? '#3c3c3c' : '#3c3c3c55',
               }"
             >
               <a-tooltip placement="right">
@@ -52,6 +51,7 @@
                 >
                   {{ show.name }}
                 </div>
+                <div class="line"></div>
               </a-tooltip>
               <div
                 class="type"
@@ -159,10 +159,10 @@
       </div>
     </div>
 
-    <div class="suojinButton" @click="changeLeftMenuShow">
+    <!-- <div class="suojinButton" @click="changeLeftMenuShow">
       <DoubleLeftOutlined v-if="leftMenuShow" style="font-size: 16px" />
       <DoubleRightOutlined v-if="!leftMenuShow" style="font-size: 16px" />
-    </div>
+    </div> -->
   </div>
 </template>
 <script lang="ts" setup>
@@ -343,10 +343,12 @@
 </script>
 <style lang="less" scoped>
   .leftMenu {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    background: #232323;
+    width:100%;
+    height:100%;
+    background: #0D0E15;
+    box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15), 0px 10px 30px 1px rgba(0,0,6,0.15), inset 0px 0px 20px 8px rgba(58,87,232,0.73);
+    border-radius: 6px;
+    position:relative;
 
     .leftMenuTitle {
       position: relative;
@@ -441,19 +443,19 @@
 
       .leftMenuContent_2 {
         position: relative;
-        width: 275px;
+        width: 100%;
         height: 100%;
 
         .leftMenuContent_title {
-          margin-top: 10px;
-          margin-left: 10px;
-          color: #ffffff;
           font-size: 16px;
+          padding:15px 15px;
+          color:#fff;
+          border-bottom:1px solid rgba(255,255,255,0.15);
         }
 
         .leftMenuContent_list {
           overflow-y: auto;
-          max-height: 800px;
+          max-height: 720px;
 
           // 地图标注
           .showMenuInfo_annotation {
@@ -524,31 +526,41 @@
             display: flex;
             align-items: center;
             justify-content: flex-start;
-            height: 70px;
+            height: 80px;
             margin: 10px 15px;
-
+            background: #313C62;
+            box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
+            border-radius: 6px; 
             .name {
               position: absolute;
-              top: 6px;
-              left: 6px;
+              top: 2px;
+              left: 16px;
               color: #ffffff;
-              font-size: 15px;
+              font-size: 14px;
               width: 90%;
-              height: 30px;
-
+              height: 34px;
+              line-height: 34px;
               white-space: nowrap;
               overflow: hidden;
               text-overflow: ellipsis;
             }
+            .line{
+              width: 310px;
+              height: 1px;
+              box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
+              border: 1px solid;
+              opacity: 0.2;
+              border-image: linear-gradient(270deg, rgba(96, 107, 146, 0), rgba(154, 164, 196, 1)) 1 1;
+            }
             .type {
               position: absolute;
               display: inline-flex;
               align-items: center;
               justify-content: flex-start;
-              bottom: 6px;
-              left: 8px;
+              bottom: 13px;
+              left: 16px;
               color: #ffffff;
-              font-size: 15px;
+              font-size: 12px;
               width: 165px;
             }
             .buttonlist {

From a989857c26172b81e856584debe5c79745e50f6f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=BB=95=E5=B5=A9?= <17854119262@163.com>
Date: Fri, 25 Jul 2025 17:27:51 +0800
Subject: [PATCH 07/13] =?UTF-8?q?=E5=AA=92=E4=BD=93=E5=BA=93-=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E5=B1=95=E7=A4=BA=E5=92=8C=E5=8E=86=E5=8F=B2=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E8=B7=AF=E5=BE=84-=E7=BC=A9=E7=95=A5=E5=9B=BE?=
 =?UTF-8?q?=E6=9B=BF=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/demo/system/mediaLibrary/index.vue        |  4 ++--
 .../demo/system/mediaLibrary/path/pathImageInfo.vue | 13 +++++++++----
 src/views/demo/system/mediaLibrary/path/pathMap.vue |  5 ++++-
 src/views/demo/system/mediaLibrary/preview/Map.vue  |  6 +++++-
 .../system/mediaLibrary/preview/previewImage.vue    |  2 +-
 5 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/views/demo/system/mediaLibrary/index.vue b/src/views/demo/system/mediaLibrary/index.vue
index 0f0df88..f7fa148 100644
--- a/src/views/demo/system/mediaLibrary/index.vue
+++ b/src/views/demo/system/mediaLibrary/index.vue
@@ -39,7 +39,7 @@
               />
               <img
                 v-if="record.objectKey && record.objectKey.includes('jpeg')"
-                :src="VITE_MEDIALIBRARY_IMAGE_URL + record.objectKey"
+                :src="`${VITE_MEDIALIBRARY_IMAGE_URL + (record.minipic ? record.minipic : record.objectKey)}`"
                 :width="30"
                 :height="20"
               />
@@ -157,7 +157,7 @@
           />
           <img
             v-if="record.objectKey"
-            :src="VITE_MEDIALIBRARY_IMAGE_URL + record.objectKey"
+            :src="`${VITE_MEDIALIBRARY_IMAGE_URL + (record.minipic ? record.minipic : record.objectKey)}`"
             :width="60"
             :height="40"
             @click="lookRecord(record)"
diff --git a/src/views/demo/system/mediaLibrary/path/pathImageInfo.vue b/src/views/demo/system/mediaLibrary/path/pathImageInfo.vue
index 06b7fda..a382de9 100644
--- a/src/views/demo/system/mediaLibrary/path/pathImageInfo.vue
+++ b/src/views/demo/system/mediaLibrary/path/pathImageInfo.vue
@@ -490,13 +490,18 @@
         </div>
       </div>
       <div class="imageChooseList">
-        <div v-for="li in props.allImageDataList" :key="li.id" @click="setNowShowImageData(li)">
+        <div
+          v-for="li in props.allImageDataList.filter(
+            (item) => item.display == 1 && item.showOnMap == 1,
+          )"
+          :key="li.id"
+          @click="setNowShowImageData(li)"
+        >
           <div :class="li.id == props.nowShowImageData.id ? 'bottom_div_choose' : 'bottom_div'">
             <img
-              v-if="li.display == 1 && li.showOnMap == 1"
               :src="
-                li.preview_url
-                  ? li.preview_url
+                props.nowShowImageData.minipic
+                  ? VITE_MEDIALIBRARY_IMAGE_URL + li.minipic
                   : 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871'
               "
               width="75"
diff --git a/src/views/demo/system/mediaLibrary/path/pathMap.vue b/src/views/demo/system/mediaLibrary/path/pathMap.vue
index 8d613cd..404e057 100644
--- a/src/views/demo/system/mediaLibrary/path/pathMap.vue
+++ b/src/views/demo/system/mediaLibrary/path/pathMap.vue
@@ -373,9 +373,12 @@
       if (item.lng && item.lat && item.absoluteAltitude && item.showOnMap == 1) {
         const image = new Image();
         image.crossOrigin = 'Anonymous';
-        // image.src = VITE_MEDIALIBRARY_IMAGE_URL + item.minipic;
+        // if (item.minipic) {
+        //   image.src = VITE_MEDIALIBRARY_IMAGE_URL + item.minipic;
+        // } else {
         image.src =
           'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871';
+        // }
         image.onload = () => {
           // 创建Canvas元素
           const canvas = document.createElement('canvas');
diff --git a/src/views/demo/system/mediaLibrary/preview/Map.vue b/src/views/demo/system/mediaLibrary/preview/Map.vue
index 2bceec1..9aa6af3 100644
--- a/src/views/demo/system/mediaLibrary/preview/Map.vue
+++ b/src/views/demo/system/mediaLibrary/preview/Map.vue
@@ -319,9 +319,13 @@
       if (item.lng && item.lat && item.absoluteAltitude) {
         const image = new Image();
         image.crossOrigin = 'Anonymous';
-        // image.src = VITE_MEDIALIBRARY_IMAGE_URL + item.minipic;
+        // if (item.minipic) {
+        //   image.src = VITE_MEDIALIBRARY_IMAGE_URL + item.minipic;
+        // } else {
         image.src =
           'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871';
+        // }
+
         image.onload = () => {
           // 创建Canvas元素
           const canvas = document.createElement('canvas');
diff --git a/src/views/demo/system/mediaLibrary/preview/previewImage.vue b/src/views/demo/system/mediaLibrary/preview/previewImage.vue
index 8ff1451..bf096e2 100644
--- a/src/views/demo/system/mediaLibrary/preview/previewImage.vue
+++ b/src/views/demo/system/mediaLibrary/preview/previewImage.vue
@@ -400,7 +400,7 @@
             :class="li.id == props.nowPreviewRecord.id ? 'bottom_div_choose' : 'bottom_div'"
           >
             <img
-              :src="VITE_MEDIALIBRARY_IMAGE_URL + li.objectKey"
+              :src="VITE_MEDIALIBRARY_IMAGE_URL + (li.minipic ? li.minipic : li.objectKey)"
               loading="lazy"
               :width="60"
               :height="35"

From 8d5dc54cd192ea771a21ec9dca095e9dc8f6119c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=BB=95=E5=B5=A9?= <17854119262@163.com>
Date: Mon, 28 Jul 2025 11:23:52 +0800
Subject: [PATCH 08/13] =?UTF-8?q?=E5=AA=92=E4=BD=93=E5=BA=93-=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E5=B1=95=E7=A4=BA=E5=92=8C=E5=8E=86=E5=8F=B2=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E8=B7=AF=E5=BE=84-=E7=BC=A9=E7=95=A5=E5=9B=BE?=
 =?UTF-8?q?=E6=9B=BF=E6=8D=A2=E5=AE=8C=E6=88=90=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mediaLibrary/path/pathImageInfo.vue       | 201 ++++++++++--------
 .../demo/system/mediaLibrary/path/pathMap.vue |  13 +-
 .../demo/system/mediaLibrary/preview/Map.vue  |  13 +-
 .../mediaLibrary/preview/previewImage.vue     | 181 ++++++++--------
 4 files changed, 215 insertions(+), 193 deletions(-)

diff --git a/src/views/demo/system/mediaLibrary/path/pathImageInfo.vue b/src/views/demo/system/mediaLibrary/path/pathImageInfo.vue
index a382de9..c6f4e21 100644
--- a/src/views/demo/system/mediaLibrary/path/pathImageInfo.vue
+++ b/src/views/demo/system/mediaLibrary/path/pathImageInfo.vue
@@ -178,9 +178,16 @@
               <CloseOutlined
                 style="margin-right: 10px; color: red"
                 @click="
-                  rect.text ? (rect.text = graffitisClone[index].text) : (rect.text = '');
+                  rect.text
+                    ? ((rect.x = graffitisClone[index].x),
+                      (rect.y = graffitisClone[index].y),
+                      (rect.width = graffitisClone[index].width),
+                      (rect.height = graffitisClone[index].height),
+                      (rect.color = graffitisClone[index].color),
+                      (rect.text = graffitisClone[index].text),
+                      (rect.status = 'success'))
+                    : graffitis.splice(index, 1);
                   nowGraffiti = -1;
-                  rect.status = 'success';
                 "
               />
               <DeleteOutlined
@@ -218,12 +225,14 @@
               :style="{
                 textDecoration: rect.status == 'mouse' ? 'underline' : '',
               }"
-              @mouseenter="rect.status != 'edit' ? (rect.status = 'mouse') : ''"
-              @mouseleave="rect.status == 'mouse' ? (rect.status = 'success') : ''"
+              @mouseenter="graffitiFlag && rect.status != 'edit' ? (rect.status = 'mouse') : ''"
+              @mouseleave="graffitiFlag && rect.status == 'mouse' ? (rect.status = 'success') : ''"
               @click="
-                rect.status = 'edit';
-                graffitisClone = cloneDeep(graffitis);
-                nowGraffiti = index;
+                graffitiFlag
+                  ? ((rect.status = 'edit'),
+                    (graffitisClone = cloneDeep(graffitis)),
+                    (nowGraffiti = index))
+                  : ''
               "
             >
               {{ rect.text }}
@@ -242,10 +251,7 @@
             }"
             @mouseenter="mouseenter(rect, 'top')"
             @mouseleave="mouseleave(rect)"
-            @click="
-              rect.status = 'edit';
-              nowGraffiti = index;
-            "
+            @click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
             @mousedown="funMouseDownEdit($event, index, 'top')"
           />
           <!-- 下 -->
@@ -261,10 +267,7 @@
             }"
             @mouseenter="mouseenter(rect, 'bottom')"
             @mouseleave="mouseleave(rect)"
-            @click="
-              rect.status = 'edit';
-              nowGraffiti = index;
-            "
+            @click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
             @mousedown="funMouseDownEdit($event, index, 'bottom')"
           />
           <!-- 右 -->
@@ -280,10 +283,7 @@
             }"
             @mouseenter="mouseenter(rect, 'right')"
             @mouseleave="mouseleave(rect)"
-            @click="
-              rect.status = 'edit';
-              nowGraffiti = index;
-            "
+            @click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
             @mousedown="funMouseDownEdit($event, index, 'right')"
           />
           <!-- 左 -->
@@ -299,10 +299,7 @@
             }"
             @mouseenter="mouseenter(rect, 'left')"
             @mouseleave="mouseleave(rect)"
-            @click="
-              rect.status = 'edit';
-              nowGraffiti = index;
-            "
+            @click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
             @mousedown="funMouseDownEdit($event, index, 'left')"
           />
           <!-- 左上 -->
@@ -504,6 +501,7 @@
                   ? VITE_MEDIALIBRARY_IMAGE_URL + li.minipic
                   : 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871'
               "
+              loading="lazy"
               width="75"
               height="50"
             />
@@ -692,7 +690,7 @@
   const scale = ref(1);
   // 放大函数
   function zoomIn() {
-    if (scale.value < 3) {
+    if (scale.value < 4) {
       // 设置最大缩放倍数为3倍
       scale.value += 0.1;
     }
@@ -726,8 +724,8 @@
       props.nowShowImageData.width > 1040 &&
       props.nowShowImageData.height > 800
     ) {
-      imageHeight.value = 800;
-      imageWidth.value = (800 / props.nowShowImageData.height) * props.nowShowImageData.width;
+      imageWidth.value = 1040;
+      imageHeight.value = (1040 / props.nowShowImageData.width) * props.nowShowImageData.height;
     } else {
       imageHeight.value = 800;
       imageWidth.value = 1040;
@@ -741,14 +739,16 @@
     if (
       props.nowShowImageData.width &&
       props.nowShowImageData.height &&
-      props.nowShowImageData.width > 720 &&
-      props.nowShowImageData.height > 553
+      props.nowShowImageData.width > 1040 &&
+      props.nowShowImageData.height > 800
     ) {
-      imageWidth.value = props.nowShowImageData.width;
-      imageHeight.value = props.nowShowImageData.height;
+      scale.value = props.nowShowImageData.width / 1040;
+      // imageWidth.value = props.nowShowImageData.width;
+      // imageHeight.value = props.nowShowImageData.height;
     } else {
-      imageWidth.value = 1440;
-      imageHeight.value = 1106;
+      scale.value = 2;
+      // imageWidth.value = 2080;
+      // imageHeight.value = 1600;
     }
   }
 
@@ -796,6 +796,7 @@
   // 选择当前展示图片-----------------------------------------------
   function setNowShowImageData(value) {
     emits('setNowShowImageData', value);
+    refresh();
   }
 
   // 鼠标拖动or涂鸦-------------------------------------------------
@@ -1032,7 +1033,9 @@
       // 拖动
       const dragDocument: any = document.querySelector('.dragModal');
       isDragging.value = false;
-      // dragDocument.style.cursor = 'default';
+      if (dragDocument) {
+        dragDocument.style.cursor = 'default';
+      }
     }
   }
   // 鼠标滚轮
@@ -1066,82 +1069,92 @@
   //------------------------------------------------------------------------
   // 鼠标聚焦
   function mouseenter(rect, type) {
-    // if (rect.status != 'edit') {
-    //   rect.status = 'mouse';
-    //   document.body.style.cursor = 'pointer';
-    // }
-    // if (rect.status == 'edit') {
-    //   if (type == 'top' || type == 'bottom') {
-    //     document.body.style.cursor = 'ns-resize';
-    //   }
-    //   if (type == 'left' || type == 'right') {
-    //     document.body.style.cursor = 'ew-resize';
-    //   }
-    //   if (type == 'leftTop' || type == 'rightBottom') {
-    //     document.body.style.cursor = 'nwse-resize';
-    //   }
-    //   if (type == 'leftBottom' || type == 'rightTop') {
-    //     document.body.style.cursor = 'nesw-resize';
-    //   }
-    // }
+    if (graffitiFlag.value) {
+      if (rect.status != 'edit') {
+        rect.status = 'mouse';
+        document.body.style.cursor = 'pointer';
+      }
+      if (rect.status == 'edit') {
+        if (type == 'top' || type == 'bottom') {
+          document.body.style.cursor = 'ns-resize';
+        }
+        if (type == 'left' || type == 'right') {
+          document.body.style.cursor = 'ew-resize';
+        }
+        if (type == 'leftTop' || type == 'rightBottom') {
+          document.body.style.cursor = 'nwse-resize';
+        }
+        if (type == 'leftBottom' || type == 'rightTop') {
+          document.body.style.cursor = 'nesw-resize';
+        }
+      }
+    }
   }
   // 鼠标离开
   function mouseleave(rect) {
-    // if (rect.status == 'mouse' || rect.status == 'edit') {
-    //   if (rect.status == 'mouse') {
-    //     rect.status = 'success';
-    //   }
-    //   if (graffitiFlag.value) {
-    //     document.body.style.cursor = 'crosshair';
-    //   } else {
-    //     document.body.style.cursor = 'pointer';
-    //   }
-    // }
+    if (graffitiFlag.value) {
+      if (rect.status == 'mouse' || rect.status == 'edit') {
+        if (rect.status == 'mouse') {
+          rect.status = 'success';
+        }
+        if (graffitiFlag.value) {
+          document.body.style.cursor = 'crosshair';
+        } else {
+          document.body.style.cursor = 'pointer';
+        }
+      }
+    }
   }
   // 编辑状态下的鼠标按下
   const mouseEditType = ref('');
   function funMouseDownEdit(e, index, type) {
-    // 获取相对于容器的坐标
-    // graffitisClone.value = cloneDeep(graffitis.value);
-    // const rect = mouseCanvasRef.value.getBoundingClientRect();
-    // startX = e.x - rect.x;
-    // startY = e.y - rect.y;
-    // isDragging.value = true;
-    // nowGraffiti.value = index;
-    // mouseEditType.value = type;
-    // window.addEventListener('mousemove', funMouseMoveEdit);
-    // window.addEventListener('mouseup', funMouseUpEdit);
+    if (graffitiFlag.value) {
+      // 获取相对于容器的坐标
+      graffitisClone.value = cloneDeep(graffitis.value);
+      const rect = mouseCanvasRef.value.getBoundingClientRect();
+      startX = e.x - rect.x;
+      startY = e.y - rect.y;
+      isDragging.value = true;
+      nowGraffiti.value = index;
+      mouseEditType.value = type;
+      window.addEventListener('mousemove', funMouseMoveEdit);
+      window.addEventListener('mouseup', funMouseUpEdit);
+    }
   }
   // 编辑状态下的鼠标移动
   function funMouseMoveEdit(e) {
-    const rect = mouseCanvasRef.value.getBoundingClientRect();
-    if (!isDragging.value) return;
-    endX = e.x - rect.x;
-    endY = e.y - rect.y;
-    if (endX < 0 && endY < 0) {
-      endX = startX;
-      endY = startY;
+    if (graffitiFlag.value) {
+      const rect = mouseCanvasRef.value.getBoundingClientRect();
+      if (!isDragging.value) return;
+      endX = e.x - rect.x;
+      endY = e.y - rect.y;
+      if (endX < 0 && endY < 0) {
+        endX = startX;
+        endY = startY;
+      }
+      funSetMouseDataEdit();
     }
-    funSetMouseDataEdit();
   }
   // 编辑状态下的鼠标松开
   function funMouseUpEdit(e) {
-    if (!isDragging.value) return;
-    const rect = mouseCanvasRef.value.getBoundingClientRect();
-    endX = e.x - rect.x;
-    endY = e.y - rect.y;
-    if (endX < 0 && endY < 0) {
-      endX = startX;
-      endY = startY;
-    }
-    isDragging.value = false;
-    if (e.x > rect.right || e.y > rect.bottom) {
-      graffitis.value[nowGraffiti.value] = graffitisClone.value[nowGraffiti.value];
-    } else {
-      funSetMouseDataEdit();
+    if (graffitiFlag.value) {
+      if (!isDragging.value) return;
+      const rect = mouseCanvasRef.value.getBoundingClientRect();
+      endX = e.x - rect.x;
+      endY = e.y - rect.y;
+      if (endX < 0 && endY < 0) {
+        endX = startX;
+        endY = startY;
+      }
+      isDragging.value = false;
+      if (e.x > rect.right || e.y > rect.bottom) {
+        graffitis.value[nowGraffiti.value] = graffitisClone.value[nowGraffiti.value];
+      } else {
+        funSetMouseDataEdit();
+      }
+      window.removeEventListener('mousemove', funMouseMoveEdit);
+      window.removeEventListener('mouseup', funMouseUpEdit);
     }
-    window.removeEventListener('mousemove', funMouseMoveEdit);
-    window.removeEventListener('mouseup', funMouseUpEdit);
   }
   // 编辑状态下的数据
   function funSetMouseDataEdit() {
diff --git a/src/views/demo/system/mediaLibrary/path/pathMap.vue b/src/views/demo/system/mediaLibrary/path/pathMap.vue
index 404e057..a8c0616 100644
--- a/src/views/demo/system/mediaLibrary/path/pathMap.vue
+++ b/src/views/demo/system/mediaLibrary/path/pathMap.vue
@@ -373,12 +373,12 @@
       if (item.lng && item.lat && item.absoluteAltitude && item.showOnMap == 1) {
         const image = new Image();
         image.crossOrigin = 'Anonymous';
-        // if (item.minipic) {
-        //   image.src = VITE_MEDIALIBRARY_IMAGE_URL + item.minipic;
-        // } else {
-        image.src =
-          'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871';
-        // }
+        if (item.minipic) {
+          image.src = VITE_MEDIALIBRARY_IMAGE_URL + item.minipic;
+        } else {
+          image.src =
+            'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871';
+        }
         image.onload = () => {
           // 创建Canvas元素
           const canvas = document.createElement('canvas');
@@ -402,7 +402,6 @@
           ctx.strokeRect(0.5, 0.5, canvas.width - 1, canvas.height - 1); // 调整坐标和尺寸以适应边框宽度
           // 将Canvas内容转换为图片的数据URL
           const dataURL2 = canvas.toDataURL('image/png');
-
           // 位置
           let position = [
             parseFloat(item.lng),
diff --git a/src/views/demo/system/mediaLibrary/preview/Map.vue b/src/views/demo/system/mediaLibrary/preview/Map.vue
index 9aa6af3..5fa1986 100644
--- a/src/views/demo/system/mediaLibrary/preview/Map.vue
+++ b/src/views/demo/system/mediaLibrary/preview/Map.vue
@@ -319,13 +319,12 @@
       if (item.lng && item.lat && item.absoluteAltitude) {
         const image = new Image();
         image.crossOrigin = 'Anonymous';
-        // if (item.minipic) {
-        //   image.src = VITE_MEDIALIBRARY_IMAGE_URL + item.minipic;
-        // } else {
-        image.src =
-          'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871';
-        // }
-
+        if (item.minipic) {
+          image.src = VITE_MEDIALIBRARY_IMAGE_URL + item.minipic;
+        } else {
+          image.src =
+            'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871';
+        }
         image.onload = () => {
           // 创建Canvas元素
           const canvas = document.createElement('canvas');
diff --git a/src/views/demo/system/mediaLibrary/preview/previewImage.vue b/src/views/demo/system/mediaLibrary/preview/previewImage.vue
index bf096e2..55d4478 100644
--- a/src/views/demo/system/mediaLibrary/preview/previewImage.vue
+++ b/src/views/demo/system/mediaLibrary/preview/previewImage.vue
@@ -64,9 +64,16 @@
               <CloseOutlined
                 style="margin-right: 10px; padding: 3px; color: red"
                 @click="
-                  rect.text ? (rect.text = graffitisClone[index].text) : (rect.text = '');
+                  rect.text
+                    ? ((rect.x = graffitisClone[index].x),
+                      (rect.y = graffitisClone[index].y),
+                      (rect.width = graffitisClone[index].width),
+                      (rect.height = graffitisClone[index].height),
+                      (rect.color = graffitisClone[index].color),
+                      (rect.text = graffitisClone[index].text),
+                      (rect.status = 'success'))
+                    : graffitis.splice(index, 1);
                   nowGraffiti = -1;
-                  rect.status = 'success';
                 "
               />
               <DeleteOutlined
@@ -107,12 +114,14 @@
               :style="{
                 textDecoration: rect.status == 'mouse' ? 'underline' : '',
               }"
-              @mouseenter="rect.status != 'edit' ? (rect.status = 'mouse') : ''"
-              @mouseleave="rect.status == 'mouse' ? (rect.status = 'success') : ''"
+              @mouseenter="graffitiFlag && rect.status != 'edit' ? (rect.status = 'mouse') : ''"
+              @mouseleave="graffitiFlag && rect.status == 'mouse' ? (rect.status = 'success') : ''"
               @click="
-                rect.status = 'edit';
-                graffitisClone = cloneDeep(graffitis);
-                nowGraffiti = index;
+                graffitiFlag
+                  ? ((rect.status = 'edit'),
+                    (graffitisClone = cloneDeep(graffitis)),
+                    (nowGraffiti = index))
+                  : ''
               "
             >
               {{ rect.text }}
@@ -131,10 +140,7 @@
             }"
             @mouseenter="mouseenter(rect, 'top')"
             @mouseleave="mouseleave(rect)"
-            @click="
-              rect.status = 'edit';
-              nowGraffiti = index;
-            "
+            @click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
             @mousedown="funMouseDownEdit($event, index, 'top')"
           />
           <!-- 下 -->
@@ -150,10 +156,7 @@
             }"
             @mouseenter="mouseenter(rect, 'bottom')"
             @mouseleave="mouseleave(rect)"
-            @click="
-              rect.status = 'edit';
-              nowGraffiti = index;
-            "
+            @click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
             @mousedown="funMouseDownEdit($event, index, 'bottom')"
           />
           <!-- 右 -->
@@ -169,10 +172,7 @@
             }"
             @mouseenter="mouseenter(rect, 'right')"
             @mouseleave="mouseleave(rect)"
-            @click="
-              rect.status = 'edit';
-              nowGraffiti = index;
-            "
+            @click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
             @mousedown="funMouseDownEdit($event, index, 'right')"
           />
           <!-- 左 -->
@@ -188,10 +188,7 @@
             }"
             @mouseenter="mouseenter(rect, 'left')"
             @mouseleave="mouseleave(rect)"
-            @click="
-              rect.status = 'edit';
-              nowGraffiti = index;
-            "
+            @click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
             @mousedown="funMouseDownEdit($event, index, 'left')"
           />
           <!-- 左上 -->
@@ -582,7 +579,7 @@
   const scale = ref(1);
   // 放大函数
   function zoomIn() {
-    if (scale.value < 3) {
+    if (scale.value < 4) {
       scale.value += 0.1;
     }
   }
@@ -634,11 +631,13 @@
       props.nowPreviewRecord.width > 1040 &&
       props.nowPreviewRecord.height > 800
     ) {
-      imageWidth.value = props.nowPreviewRecord.width;
-      imageHeight.value = props.nowPreviewRecord.height;
+      scale.value = props.nowPreviewRecord.height / 800;
+      // imageWidth.value = props.nowPreviewRecord.width;
+      // imageHeight.value = props.nowPreviewRecord.height;
     } else {
-      imageWidth.value = 2080;
-      imageHeight.value = 1600;
+      scale.value = 2;
+      // imageWidth.value = 2080;
+      // imageHeight.value = 1600;
     }
   }
 
@@ -917,7 +916,9 @@
       // 拖动
       const dragDocument: any = document.querySelector('.dragModal');
       isDragging.value = false;
-      dragDocument.style.cursor = 'default';
+      if (dragDocument) {
+        dragDocument.style.cursor = 'default';
+      }
     }
   }
 
@@ -947,82 +948,92 @@
   //------------------------------------------------------------------------
   // 鼠标聚焦
   function mouseenter(rect, type) {
-    if (rect.status != 'edit') {
-      rect.status = 'mouse';
-      document.body.style.cursor = 'pointer';
-    }
-    if (rect.status == 'edit') {
-      if (type == 'top' || type == 'bottom') {
-        document.body.style.cursor = 'ns-resize';
-      }
-      if (type == 'left' || type == 'right') {
-        document.body.style.cursor = 'ew-resize';
-      }
-      if (type == 'leftTop' || type == 'rightBottom') {
-        document.body.style.cursor = 'nwse-resize';
+    if (graffitiFlag.value) {
+      if (rect.status != 'edit') {
+        rect.status = 'mouse';
+        document.body.style.cursor = 'pointer';
       }
-      if (type == 'leftBottom' || type == 'rightTop') {
-        document.body.style.cursor = 'nesw-resize';
+      if (rect.status == 'edit') {
+        if (type == 'top' || type == 'bottom') {
+          document.body.style.cursor = 'ns-resize';
+        }
+        if (type == 'left' || type == 'right') {
+          document.body.style.cursor = 'ew-resize';
+        }
+        if (type == 'leftTop' || type == 'rightBottom') {
+          document.body.style.cursor = 'nwse-resize';
+        }
+        if (type == 'leftBottom' || type == 'rightTop') {
+          document.body.style.cursor = 'nesw-resize';
+        }
       }
     }
   }
   // 鼠标离开
   function mouseleave(rect) {
-    if (rect.status == 'mouse' || rect.status == 'edit') {
-      if (rect.status == 'mouse') {
-        rect.status = 'success';
-      }
-      if (graffitiFlag.value) {
-        document.body.style.cursor = 'crosshair';
-      } else {
-        document.body.style.cursor = 'pointer';
+    if (graffitiFlag.value) {
+      if (rect.status == 'mouse' || rect.status == 'edit') {
+        if (rect.status == 'mouse') {
+          rect.status = 'success';
+        }
+        if (graffitiFlag.value) {
+          document.body.style.cursor = 'crosshair';
+        } else {
+          document.body.style.cursor = 'pointer';
+        }
       }
     }
   }
   // 编辑状态下的鼠标按下
   const mouseEditType = ref('');
   function funMouseDownEdit(e, index, type) {
-    // 获取相对于容器的坐标
-    // graffitisClone.value = cloneDeep(graffitis.value);
-    // const rect = mouseCanvasRef.value.getBoundingClientRect();
-    // startX = e.x - rect.x;
-    // startY = e.y - rect.y;
-    // isDragging.value = true;
-    // nowGraffiti.value = index;
-    // mouseEditType.value = type;
-    // window.addEventListener('mousemove', funMouseMoveEdit);
-    // window.addEventListener('mouseup', funMouseUpEdit);
+    if (graffitiFlag.value) {
+      // 获取相对于容器的坐标
+      graffitisClone.value = cloneDeep(graffitis.value);
+      const rect = mouseCanvasRef.value.getBoundingClientRect();
+      startX = e.x - rect.x;
+      startY = e.y - rect.y;
+      isDragging.value = true;
+      nowGraffiti.value = index;
+      mouseEditType.value = type;
+      window.addEventListener('mousemove', funMouseMoveEdit);
+      window.addEventListener('mouseup', funMouseUpEdit);
+    }
   }
   // 编辑状态下的鼠标移动
   function funMouseMoveEdit(e) {
-    const rect = mouseCanvasRef.value.getBoundingClientRect();
-    if (!isDragging.value) return;
-    endX = e.x - rect.x;
-    endY = e.y - rect.y;
-    if (endX < 0 && endY < 0) {
-      endX = startX;
-      endY = startY;
+    if (graffitiFlag.value) {
+      const rect = mouseCanvasRef.value.getBoundingClientRect();
+      if (!isDragging.value) return;
+      endX = e.x - rect.x;
+      endY = e.y - rect.y;
+      if (endX < 0 && endY < 0) {
+        endX = startX;
+        endY = startY;
+      }
+      funSetMouseDataEdit();
     }
-    funSetMouseDataEdit();
   }
   // 编辑状态下的鼠标松开
   function funMouseUpEdit(e) {
-    if (!isDragging.value) return;
-    const rect = mouseCanvasRef.value.getBoundingClientRect();
-    endX = e.x - rect.x;
-    endY = e.y - rect.y;
-    if (endX < 0 && endY < 0) {
-      endX = startX;
-      endY = startY;
-    }
-    isDragging.value = false;
-    if (e.x > rect.right || e.y > rect.bottom) {
-      graffitis.value[nowGraffiti.value] = graffitisClone.value[nowGraffiti.value];
-    } else {
-      funSetMouseDataEdit();
+    if (graffitiFlag.value) {
+      if (!isDragging.value) return;
+      const rect = mouseCanvasRef.value.getBoundingClientRect();
+      endX = e.x - rect.x;
+      endY = e.y - rect.y;
+      if (endX < 0 && endY < 0) {
+        endX = startX;
+        endY = startY;
+      }
+      isDragging.value = false;
+      if (e.x > rect.right || e.y > rect.bottom) {
+        graffitis.value[nowGraffiti.value] = graffitisClone.value[nowGraffiti.value];
+      } else {
+        funSetMouseDataEdit();
+      }
+      window.removeEventListener('mousemove', funMouseMoveEdit);
+      window.removeEventListener('mouseup', funMouseUpEdit);
     }
-    window.removeEventListener('mousemove', funMouseMoveEdit);
-    window.removeEventListener('mouseup', funMouseUpEdit);
   }
   // 编辑状态下的数据
   function funSetMouseDataEdit() {

From 5daf0b4897f1d875aee73fd329aa02b20e9a4a7c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=BB=95=E5=B5=A9?= <17854119262@163.com>
Date: Tue, 29 Jul 2025 09:28:57 +0800
Subject: [PATCH 09/13] =?UTF-8?q?=E5=AA=92=E4=BD=93=E5=BA=93-=E8=A7=86?=
 =?UTF-8?q?=E9=A2=91=E9=83=A8=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/demo/system/mediaLibrary/index.vue  | 315 +++++++++++-------
 .../system/mediaLibrary/preview/index.vue     |  22 +-
 .../mediaLibrary/preview/previewImage.vue     |  22 +-
 .../preview/previewImageInformation.vue       |  13 +-
 .../mediaLibrary/preview/previewVideo.vue     |  57 +++-
 .../preview/previewVideoInformation.vue       | 140 ++++----
 6 files changed, 349 insertions(+), 220 deletions(-)

diff --git a/src/views/demo/system/mediaLibrary/index.vue b/src/views/demo/system/mediaLibrary/index.vue
index f7fa148..fa96604 100644
--- a/src/views/demo/system/mediaLibrary/index.vue
+++ b/src/views/demo/system/mediaLibrary/index.vue
@@ -30,21 +30,29 @@
           </div>
         </template>
         <template #bodyCell="{ column, record }">
-          <div v-if="tableType == 'table'">
+          <div v-if="tableTypeAfterShow == 'table'">
             <template v-if="column.key === 'name'">
+              <!-- 文件夹 -->
               <FolderOpenOutlined v-if="!record.objectKey" style="font-size: 20px" />
-              <FileOutlined
-                v-if="record.objectKey && !record.objectKey.includes('jpeg')"
-                style="font-size: 20px"
-              />
+              <!-- 图片 -->
               <img
                 v-if="record.objectKey && record.objectKey.includes('jpeg')"
                 :src="`${VITE_MEDIALIBRARY_IMAGE_URL + (record.minipic ? record.minipic : record.objectKey)}`"
                 :width="30"
                 :height="20"
               />
+              <!-- 视频 -->
+              <PlaySquareTwoTone
+                v-if="record.objectKey && record.objectKey.includes('mp4')"
+                style="font-size: 20px"
+              />
+              <!-- 文件夹或者图片、视频 -->
               <span
-                v-if="!record.objectKey || (record.objectKey && record.objectKey.includes('jpeg'))"
+                v-if="
+                  !record.objectKey ||
+                  (record.objectKey &&
+                    (record.objectKey.includes('jpeg') || record.objectKey.includes('mp4')))
+                "
                 @click="lookRecord(record)"
                 @mouseover="record.isHovered = true"
                 @mouseout="record.isHovered = false"
@@ -55,8 +63,21 @@
               >
                 {{ record.name }}
               </span>
+              <!-- 其他文件 -->
+              <FileOutlined
+                v-if="
+                  record.objectKey &&
+                  !record.objectKey.includes('jpeg') &&
+                  !record.objectKey.includes('mp4')
+                "
+                style="font-size: 20px"
+              />
               <span
-                v-if="record.objectKey && !record.objectKey.includes('jpeg')"
+                v-if="
+                  record.objectKey &&
+                  !record.objectKey.includes('jpeg') &&
+                  !record.objectKey.includes('mp4')
+                "
                 :style="{
                   marginLeft: '5px',
                 }"
@@ -133,12 +154,12 @@
           </div>
         </template>
       </BasicTable>
-      <div v-if="tableType == 'store'" class="storeDivsAllChoose">
+      <div v-if="tableTypeAfterShow == 'store'" class="storeDivsAllChoose">
         <a-checkbox v-model:checked="checkNameChecked" @change="changeStore($event, 'allChoose')">
           全选
         </a-checkbox>
       </div>
-      <div v-if="tableType == 'store'" class="storeDivs">
+      <div v-if="tableTypeAfterShow == 'store'" class="storeDivList">
         <div
           v-for="record in showTableData"
           :key="record.id"
@@ -147,38 +168,64 @@
           @mouseover="record.isHovered = true"
           @mouseout="record.isHovered = false"
         >
+          <!-- 选中 -->
           <div style="position: absolute; top: 0px; left: 5px">
             <a-checkbox v-model:checked="record.checked" @change="changeStore($event, record)" />
           </div>
+          <!-- 文件夹 -->
           <FolderOpenOutlined
             v-if="!record.objectKey"
             style="font-size: 40px"
             @click="lookRecord(record)"
           />
+          <!-- 图片 -->
           <img
-            v-if="record.objectKey"
+            v-if="record.objectKey && record.objectKey.includes('jpeg')"
             :src="`${VITE_MEDIALIBRARY_IMAGE_URL + (record.minipic ? record.minipic : record.objectKey)}`"
-            :width="60"
-            :height="40"
+            :width="100"
+            :height="60"
+            style="position: absolute; top: 10px; left: 32.5px"
             @click="lookRecord(record)"
           />
+          <!-- 视频 -->
+          <PlaySquareTwoTone
+            v-if="record.objectKey && record.objectKey.includes('mp4')"
+            style="font-size: 40px"
+          />
+          <!-- 文件夹或者图片、视频 -->
           <span
+            v-if="
+              !record.objectKey ||
+              (record.objectKey &&
+                (record.objectKey.includes('jpeg') || record.objectKey.includes('mp4')))
+            "
+            class="storeDivSpanName"
             :style="{
               textDecoration: record.isHovered ? 'underline' : 'none',
-              position: 'absolute',
-              bottom: '10px',
-              left: '0px',
-              width: '100%',
-              height: '30px',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              cursor: 'pointer',
             }"
             @click="lookRecord(record)"
           >
             {{ record.name }}
           </span>
+          <!-- 其他文件 -->
+          <FileOutlined
+            v-if="
+              record.objectKey &&
+              !record.objectKey.includes('jpeg') &&
+              !record.objectKey.includes('mp4')
+            "
+            style="font-size: 40px"
+          />
+          <span
+            v-if="
+              record.objectKey &&
+              !record.objectKey.includes('jpeg') &&
+              !record.objectKey.includes('mp4')
+            "
+            class="storeDivSpanName"
+          >
+            {{ record.name }}
+          </span>
         </div>
       </div>
     </div>
@@ -273,6 +320,7 @@
     PlaySquareTwoTone,
     FileOutlined,
     BorderInnerOutlined,
+    YoutubeOutlined,
   } from '@ant-design/icons-vue';
   import {
     GetMediaFile,
@@ -300,51 +348,76 @@
   const showTableData = ref();
   // 表格还是文件夹
   const tableType = ref('table');
+  const tableTypeAfterShow = ref('table');
   const tableHeight: any = ref(0);
   watch(
     () => tableType.value,
     (newval) => {
-      showTableData.value = getDataSource();
-      // 表格
-      const containers = document.querySelectorAll('.ant-table-container');
-      if (newval) {
-        tableHeight.value = containers[0] ? containers[0]?.scrollHeight : 0;
-      } else {
-        tableHeight.value = 0;
-      }
-      if (containers) {
-        containers.forEach((container) => {
-          container.style.display = tableType.value === 'table' ? 'block' : 'none';
-        });
-      }
-      // 分页
-      const paginations = document.querySelectorAll('.ant-pagination');
-      if (paginations) {
-        paginations.forEach((pagination) => {
-          pagination.style.display = tableType.value === 'table' ? 'block' : 'none';
+      // 格子
+      if (newval === 'store') {
+        // 数据
+        GetMediaFile({
+          parentKey: nowParentKey.value,
+          page: 1,
+          limit: 1000,
+        }).then((res) => {
+          showTableData.value = res.items;
+          tableTypeAfterShow.value = newval;
+          // 表格-隐藏
+          const containers = document.querySelectorAll('.ant-table-container');
+          tableHeight.value = containers[0] ? containers[0]?.scrollHeight : 0;
+          if (containers) {
+            containers.forEach((container) => {
+              container.style.display = 'none';
+            });
+          }
+          // 分页-隐藏
+          const paginations = document.querySelectorAll('.ant-pagination');
+          if (paginations) {
+            paginations.forEach((pagination) => {
+              pagination.style.display = 'none';
+            });
+          }
+          // 选中：表格→格子
+          let selectRowsIdArray = getSelectRows().map((item) => item.id);
+          showTableData.value.forEach((item) => {
+            if (selectRowsIdArray.includes(item.id)) {
+              item.checked = true;
+              changeStore(
+                {
+                  target: {
+                    checked: true,
+                  },
+                },
+                item,
+              );
+            }
+          });
         });
       }
-      // 选中
-      // 框架
-      if (tableType.value === 'store') {
-        let selectRowsIdArray = getSelectRows().map((item) => item.id);
-        showTableData.value.forEach((item) => {
-          if (selectRowsIdArray.includes(item.id)) {
-            item.checked = true;
-            changeStore(
-              {
-                target: {
-                  checked: true,
-                },
-              },
-              item,
-            );
+      // 表格
+      if (newval === 'table') {
+        reload().then((res) => {
+          tableTypeAfterShow.value = newval;
+          // 表格-显示
+          const containers = document.querySelectorAll('.ant-table-container');
+          tableHeight.value = containers[0] ? containers[0]?.scrollHeight : 0;
+          if (containers) {
+            containers.forEach((container) => {
+              container.style.display = 'block';
+            });
           }
+          // 分页-显示
+          const paginations = document.querySelectorAll('.ant-pagination');
+          if (paginations) {
+            paginations.forEach((pagination) => {
+              pagination.style.display = 'block';
+            });
+          }
+          // 选中：格子→表格
+          let selectRowsIdArray = showTableData.value.filter((item) => item.checked);
+          setSelectedRows(selectRowsIdArray);
         });
-      } else {
-        // 表格
-        let selectRowsIdArray = showTableData.value.filter((item) => item.checked);
-        setSelectedRows(selectRowsIdArray);
       }
     },
   );
@@ -417,6 +490,8 @@
       // 接口请求前 参数处理
       let temp = {
         ...data,
+        page: tableTypeAfterShow.value == 'table' ? data.page : 1,
+        limit: tableTypeAfterShow.value == 'table' ? data.limit : 1000,
         parentKey: nowParentKey.value,
       };
       return temp;
@@ -502,12 +577,10 @@
           page: 1,
           limit: 100,
         }).then((res) => {
-          previewRecordList.value = uniqueByKey(res.items, null);
-          getDataSource().forEach((item) => {
-            if (item.id == nowPreviewRecord.value.id) {
-              nowPreviewRecord.value = item;
-            }
-          });
+          previewRecordList.value = uniqueByKey(res.items, nowPreviewRecord.value);
+          nowPreviewRecord.value = getDataSource().find(
+            (item) => item.id == nowPreviewRecord.value.id,
+          );
         });
       }
     }, 500);
@@ -541,16 +614,16 @@
   }
   // 压缩
   function compressFolderOrFile() {
-    let rows = getSelectRows();
-    if (rows.length > 0) {
-      const record = rows;
-      openCompressFileModal(true, {
-        tableData: getDataSource(),
-        record,
-      });
-    } else {
-      return createMessage.warn('请选择一个或者多个文件/文件夹压缩');
-    }
+    // let rows = getSelectRows();
+    // if (rows.length > 0) {
+    //   const record = rows;
+    //   openCompressFileModal(true, {
+    //     tableData: getDataSource(),
+    //     record,
+    //   });
+    // } else {
+    //   return createMessage.warn('请选择一个或者多个文件/文件夹压缩');
+    // }
   }
   // 重命名
   function renameRecord(record) {
@@ -634,48 +707,42 @@
       });
     }
   }
-  // 去重
   function uniqueByKey(arrlist, record) {
     let resultList: any = [];
-    arrlist.forEach((arr) => {
-      if (
-        arr.objectKey &&
-        !resultList.some((item) => item.objectKey === arr.objectKey) &&
-        arr.objectKey.includes('jpeg')
-      ) {
-        // 保持顺序
-        if (record) {
-          if (
-            (arr.objectKey == record.objectKey && record.id == arr.id) ||
-            arr.objectKey != record.objectKey
-          ) {
-            if (!arr.fileTags) {
-              arr.fileTags = [];
-            } else {
-              arr.fileTags = JSON.parse(arr.fileTags);
-            }
-            if (!arr.graffitiJson) {
-              arr.graffitiJson = [];
-            } else {
-              arr.graffitiJson = JSON.parse(arr.graffitiJson);
-            }
-            resultList.push(arr);
+    if (record.objectKey.includes('.jpeg')) {
+      arrlist
+        .filter((item) => item.objectKey && item.objectKey.includes('jpeg'))
+        .forEach((item) => {
+          if (!item.fileTags) {
+            item.fileTags = [];
+          } else {
+            item.fileTags = JSON.parse(item.fileTags);
           }
-        } else {
-          if (!arr.fileTags) {
-            arr.fileTags = [];
+          if (!item.graffitiJson) {
+            item.graffitiJson = [];
+          } else {
+            item.graffitiJson = JSON.parse(item.graffitiJson);
+          }
+          resultList.push(item);
+        });
+    }
+    if (record.objectKey.includes('mp4')) {
+      arrlist
+        .filter((item) => item.objectKey && item.objectKey.includes('mp4'))
+        .forEach((item) => {
+          if (!item.fileTags) {
+            item.fileTags = [];
           } else {
-            arr.fileTags = JSON.parse(arr.fileTags);
+            item.fileTags = JSON.parse(item.fileTags);
           }
-          if (!arr.graffitiJson) {
-            arr.graffitiJson = [];
+          if (!item.graffitiJson) {
+            item.graffitiJson = [];
           } else {
-            arr.graffitiJson = JSON.parse(arr.graffitiJson);
+            item.graffitiJson = JSON.parse(item.graffitiJson);
           }
-          resultList.push(arr);
-        }
-      }
-    });
+          resultList.push(item);
+        });
+    }
     return resultList;
   }
   // 图片选择
@@ -795,29 +862,47 @@
     padding-left: 16px;
     background: #ffffff;
     display: flex;
-    align-items: flex-start;
+    align-items: center;
     justify-content: flex-start;
   }
 
-  .storeDivs {
+  .storeDivList {
     display: flex;
     flex-wrap: wrap;
+    justify-content: flex-start;
+    align-items: flex-start;
+
     width: 100%;
-    height: 566px;
+    height: 72.5%;
     background: #ffffff;
     margin: 0px 16px 16px 16px;
-    // gap: 20px;
+    overflow-y: auto;
 
     .storeDiv {
       position: relative;
-      width: 160px;
-      height: 120px;
+      width: 165px;
+      height: 130px;
       outline: 1px solid #000000;
       margin: 16px;
 
       display: flex;
       align-items: center;
       justify-content: center;
+
+      .storeDivSpanName {
+        position: absolute;
+        bottom: 16px;
+        left: 0px;
+        width: 100%;
+        height: 30px;
+        cursor: pointer;
+
+        white-space: pre-wrap;
+        word-break: break-all;
+        overflow-wrap: break-word;
+        max-width: 100%;
+        display: block;
+      }
     }
   }
 
diff --git a/src/views/demo/system/mediaLibrary/preview/index.vue b/src/views/demo/system/mediaLibrary/preview/index.vue
index 1994aaa..434dd33 100644
--- a/src/views/demo/system/mediaLibrary/preview/index.vue
+++ b/src/views/demo/system/mediaLibrary/preview/index.vue
@@ -18,7 +18,12 @@
     <div class="mainBody">
       <div class="imgOrVideo">
         <!-- 图片 -->
-        <div class="imageDiv" v-if="props.nowPreviewRecord.objectKey">
+        <div
+          class="imageDiv"
+          v-if="
+            props.nowPreviewRecord.objectKey && props.nowPreviewRecord.objectKey.includes('jpeg')
+          "
+        >
           <PreviewImage
             :nowPreviewRecord="props.nowPreviewRecord"
             :previewRecordList="props.previewRecordList"
@@ -28,7 +33,12 @@
           />
         </div>
         <!-- 视频 -->
-        <div class="videoDiv" v-if="props.nowPreviewRecord.type == 'video'">
+        <div
+          class="videoDiv"
+          v-if="
+            props.nowPreviewRecord.objectKey && props.nowPreviewRecord.objectKey.includes('mp4')
+          "
+        >
           <PreviewVideo
             :nowPreviewRecord="props.nowPreviewRecord"
             :previewRecordList="props.previewRecordList"
@@ -39,7 +49,9 @@
       </div>
       <div class="information">
         <PreviewImageInformation
-          v-if="props.nowPreviewRecord.objectKey"
+          v-if="
+            props.nowPreviewRecord.objectKey && props.nowPreviewRecord.objectKey.includes('jpeg')
+          "
           :nowPreviewRecord="props.nowPreviewRecord"
           :previewRecordList="props.previewRecordList"
           @chooseNowPreviewRecord="chooseNowPreviewRecord"
@@ -48,7 +60,9 @@
           @openPathModal="openPathModal"
         />
         <PreviewVideoInformation
-          v-if="props.nowPreviewRecord.type == 'video'"
+          v-if="
+            props.nowPreviewRecord.objectKey && props.nowPreviewRecord.objectKey.includes('mp4')
+          "
           :nowPreviewRecord="props.nowPreviewRecord"
           :previewRecordList="props.previewRecordList"
           @chooseNowPreviewRecord="chooseNowPreviewRecord"
diff --git a/src/views/demo/system/mediaLibrary/preview/previewImage.vue b/src/views/demo/system/mediaLibrary/preview/previewImage.vue
index 55d4478..9d99071 100644
--- a/src/views/demo/system/mediaLibrary/preview/previewImage.vue
+++ b/src/views/demo/system/mediaLibrary/preview/previewImage.vue
@@ -518,17 +518,11 @@
     FontColorsOutlined,
     RedoOutlined,
     OneToOneOutlined,
-    FileImageOutlined,
     BorderHorizontalOutlined,
     ExpandOutlined,
     CompressOutlined,
   } from '@ant-design/icons-vue';
-  import {
-    UpdatePicStatus,
-    Deletepic,
-    UpdatePicName,
-    UpdatePicParentKey,
-  } from '@/api/demo/mediaLibrary';
+  import { UpdatePicStatus, Deletepic } from '@/api/demo/mediaLibrary';
   import { useMessage } from '@/hooks/web/useMessage';
   import { cloneDeep } from 'lodash-es';
   import { getAppEnvConfig } from '@/utils/env';
@@ -544,7 +538,9 @@
 
   // 上一张、下一张图片
   function clickLeftOrRightButton(direction) {
-    const list = props.previewRecordList.filter((item) => item.objectKey);
+    const list = props.previewRecordList.filter(
+      (item) => item.objectKey && item.objectKey.includes('jpeg'),
+    );
     graffitiFlag.value = false;
     for (let index = 0; index < list.length; index++) {
       if (list[index].id == props.nowPreviewRecord.id) {
@@ -657,7 +653,7 @@
 
   // 删除
   function deleteImage() {
-    let content = '确定要删除选择的文件/文件夹吗？';
+    let content = '确定要删除选择的文件吗？';
     if (props.previewRecordList.length == 1) {
       content = '下列图片只有一个，删除此图片后将会关闭此弹窗，确定要删除选择的文件吗？';
     }
@@ -671,7 +667,7 @@
           ids: ids,
         }).then((res) => {
           handleSuccess(props.nowPreviewRecord);
-          createMessage.success(res);
+          createMessage.success('删除成功');
         });
       },
     });
@@ -831,7 +827,7 @@
   const mouseCanvasRef = ref();
   // 鼠标按下
   function onMouseDown(event) {
-    if (graffitiFlag.value || graffitis.value.some((item) => item.status != 'success')) {
+    if (graffitiFlag.value || graffitis.value?.some((item) => item.status != 'success')) {
       // 涂鸦
       if (nowGraffiti.value != -1) return;
       if (graffitis.value.findIndex((item) => item.status == 'mouse') != -1) return;
@@ -868,7 +864,7 @@
   }
   // 鼠标移动
   function onMouseMove(event) {
-    if (graffitiFlag.value || graffitis.value.some((item) => item.status != 'success')) {
+    if (graffitiFlag.value || graffitis.value?.some((item) => item.status != 'success')) {
       // 涂鸦
       const rect = mouseCanvasRef.value.getBoundingClientRect();
       if (!isDragging.value) return;
@@ -892,7 +888,7 @@
   }
   // 鼠标松开
   function onMouseUp(event) {
-    if (graffitiFlag.value || graffitis.value.some((item) => item.status != 'success')) {
+    if (graffitiFlag.value || graffitis.value?.some((item) => item.status != 'success')) {
       // 涂鸦
       if (!isDragging.value) return;
       const rect = mouseCanvasRef.value.getBoundingClientRect();
diff --git a/src/views/demo/system/mediaLibrary/preview/previewImageInformation.vue b/src/views/demo/system/mediaLibrary/preview/previewImageInformation.vue
index 092e4b9..2bee2e3 100644
--- a/src/views/demo/system/mediaLibrary/preview/previewImageInformation.vue
+++ b/src/views/demo/system/mediaLibrary/preview/previewImageInformation.vue
@@ -225,12 +225,7 @@
     CheckOutlined,
     CloseOutlined,
   } from '@ant-design/icons-vue';
-  import {
-    UpdatePicStatus,
-    Deletepic,
-    UpdatePicName,
-    UpdatePicParentKey,
-  } from '@/api/demo/mediaLibrary';
+  import { UpdatePicStatus, UpdatePicName } from '@/api/demo/mediaLibrary';
   import { Map } from './preview';
   import { useMessage } from '@/hooks/web/useMessage';
   const { createMessage, createConfirm } = useMessage();
@@ -304,9 +299,12 @@
         id: props.nowPreviewRecord.id,
         fileTags: JSON.stringify(fileTags.value),
         graffitiJson: JSON.stringify(graffitiJson.value),
+        display: props.nowPreviewRecord.display,
+        showOnMap: props.nowPreviewRecord.showOnMap,
       }).then((res) => {
         addFileTagsFlag.value = true;
         newFileTagsName.value = '';
+        createMessage.success('添加标签成功');
         emits('handleSuccess');
       });
     } else {
@@ -331,7 +329,10 @@
           id: props.nowPreviewRecord.id,
           fileTags: JSON.stringify(fileTags.value),
           graffitiJson: JSON.stringify(graffitiJson.value),
+          display: props.nowPreviewRecord.display,
+          showOnMap: props.nowPreviewRecord.showOnMap,
         }).then((res) => {
+          createMessage.success('删除标签成功');
           emits('handleSuccess');
         });
       },
diff --git a/src/views/demo/system/mediaLibrary/preview/previewVideo.vue b/src/views/demo/system/mediaLibrary/preview/previewVideo.vue
index 05d1164..2a345be 100644
--- a/src/views/demo/system/mediaLibrary/preview/previewVideo.vue
+++ b/src/views/demo/system/mediaLibrary/preview/previewVideo.vue
@@ -1,7 +1,13 @@
 <template>
   <div class="videoDiv">
     <div class="showVideo">
-      <video :src="props.nowPreviewRecord.url" class="video-player" controls muted autoplay></video>
+      <video
+        :src="`${VITE_MEDIALIBRARY_IMAGE_URL + props.nowPreviewRecord.objectKey}`"
+        class="video-player"
+        controls
+        muted
+        autoplay
+      ></video>
     </div>
 
     <div class="bottomDiv">
@@ -12,7 +18,7 @@
             <template #title>
               <span>下载</span>
             </template>
-            <DownloadOutlined @click="fetchAndDownloadVideo(props.nowPreviewRecord.url)" />
+            <DownloadOutlined @click="fetchAndDownloadVideo(props.nowPreviewRecord.objectKey)" />
           </a-tooltip>
         </div>
         <!-- 删除 -->
@@ -28,8 +34,8 @@
       <div class="imageList">
         <div v-for="li in props.previewRecordList" :key="li.id" @click="chooseNowPreviewRecord(li)">
           <div
+            v-if="li.objectKey"
             :class="li.id == props.nowPreviewRecord.id ? 'bottom_div_choose' : 'bottom_div'"
-            v-if="li.type == 'video'"
           >
             <img :src="li.gifZoomImage" :width="60" :height="40" />
           </div>
@@ -53,13 +59,20 @@
     LeftOutlined,
     RightOutlined,
   } from '@ant-design/icons-vue';
+  import { Deletepic } from '@/api/demo/mediaLibrary';
+  import { getAppEnvConfig } from '@/utils/env';
+  import { useMessage } from '@/hooks/web/useMessage';
+  const { VITE_MEDIALIBRARY_IMAGE_URL } = getAppEnvConfig();
+  const { createConfirm, createMessage } = useMessage();
 
   const props = defineProps(['nowPreviewRecord', 'previewRecordList']);
-  const emit = defineEmits(['chooseNowPreviewRecord', 'reloadTable']);
+  const emits = defineEmits(['chooseNowPreviewRecord', 'handleSuccess']);
 
-  // 上一张、下一张图片
+  // 上一张、下一张视频
   function clickLeftOrRightButton(direction) {
-    const list = props.previewRecordList.filter((item) => item.type == 'video');
+    const list = props.previewRecordList.filter(
+      (item) => item.objectKey && item.objectKey.includes('mp4'),
+    );
     for (let index = 0; index < list.length; index++) {
       if (list[index].id == props.nowPreviewRecord.id) {
         if (direction == 'left') {
@@ -82,7 +95,7 @@
   // 下载
   async function fetchAndDownloadVideo(url) {
     try {
-      const response = await fetch(url, {
+      const response = await fetch(VITE_MEDIALIBRARY_IMAGE_URL + url, {
         mode: 'cors',
       });
       if (!response.ok) {
@@ -92,7 +105,7 @@
       const urlObject = window.URL.createObjectURL(blob);
       const link = document.createElement('a');
       link.href = urlObject;
-      link.download = props.nowPreviewRecord.name;
+      link.download = props.nowPreviewRecord.name || 'download';
       document.body.appendChild(link);
       link.click();
       document.body.removeChild(link);
@@ -102,10 +115,34 @@
     }
   }
   // 删除
-  function deleteVideo() {}
+  function deleteVideo() {
+    let content = '确定要删除选择的文件吗？';
+    if (props.previewRecordList.length == 1) {
+      content = '下列视频只有一个，删除此视频后将会关闭此弹窗，确定要删除选择的文件吗？';
+    }
+    createConfirm({
+      iconType: 'info',
+      title: '删除',
+      content: content,
+      onOk: async () => {
+        let ids = props.nowPreviewRecord.id;
+        Deletepic({
+          ids: ids,
+        }).then((res) => {
+          handleSuccess(props.nowPreviewRecord);
+          createMessage.success(res);
+        });
+      },
+    });
+  }
+
+  // 刷新表格
+  function handleSuccess(record = null) {
+    emits('handleSuccess', record);
+  }
   // 选择
   function chooseNowPreviewRecord(value) {
-    emit('chooseNowPreviewRecord', value);
+    emits('chooseNowPreviewRecord', value);
   }
 </script>
 <style lang="less" scoped>
diff --git a/src/views/demo/system/mediaLibrary/preview/previewVideoInformation.vue b/src/views/demo/system/mediaLibrary/preview/previewVideoInformation.vue
index 410de95..3d96ddf 100644
--- a/src/views/demo/system/mediaLibrary/preview/previewVideoInformation.vue
+++ b/src/views/demo/system/mediaLibrary/preview/previewVideoInformation.vue
@@ -12,7 +12,7 @@
             <EditOutlined style="font-size: 20px; color: #07aaed" @click="editNameChange" />
           </span>
           <span class="infovalue_name" v-if="!editNameFlag">
-            <a-input v-model:value="editName" size="small" style="width: 80%" />
+            <a-input v-model:value="editName" size="small" />
             <CheckOutlined
               style="margin-left: 10px; color: green"
               @click="pressEnterNameFunction"
@@ -99,14 +99,17 @@
         </a-col>
         <a-col :span="17">
           <span class="infovalue_graffitiNum">
-            <a-tag color="success" v-for="la in props.nowPreviewRecord.label" :key="la">
+            <a-tag color="success" v-for="la in props.nowPreviewRecord.fileTags" :key="la">
               {{ la }}
             </a-tag>
-            <PlusSquareOutlined style="font-size: 20px; color: #07aaed" @click="addLabelChange" />
+            <PlusSquareOutlined
+              style="font-size: 20px; color: #07aaed"
+              @click="addFileTagsChange"
+            />
           </span>
           <a-modal
             title="标签设置"
-            :open="addLabelFlag"
+            :open="addFileTagsFlag"
             :mask="false"
             :maskClosable="false"
             :closable="false"
@@ -115,24 +118,24 @@
             <div style="display: block">
               <div
                 style="display: flex; flex-wrap: wrap; gap: 5px; width: 96%; margin: 10px"
-                v-if="props.nowPreviewRecord.label && props.nowPreviewRecord.label.length > 0"
+                v-if="props.nowPreviewRecord.fileTags.length > 0"
               >
                 已添加的标签：
                 <div
-                  v-for="la in props.nowPreviewRecord.label"
+                  v-for="la in props.nowPreviewRecord.fileTags"
                   :key="la"
                   style="border: 1px solid #595959; border-radius: 3px"
                 >
                   <span style="margin-left: 5px">{{ la }}</span>
                   <CloseOutlined
                     style="margin-left: 5px; margin-right: 5px"
-                    @click="deleteLabel(la)"
+                    @click="deleteFileTags(la)"
                   />
                 </div>
               </div>
               <div style="display: inline-flex; gap: 5px; width: 96%; margin: 10px">
-                <a-input v-model:value="newLabelName" size="small" placeholder="请输入标签" />
-                <a-button type="primary" @click="pressEnterLabelFunction">添加</a-button>
+                <a-input v-model:value="newFileTagsName" size="small" placeholder="请输入标签" />
+                <a-button type="primary" @click="pressEnterFileTagsFunction">添加</a-button>
               </div>
               <div
                 style="
@@ -145,8 +148,8 @@
               >
                 <a-button
                   @click="
-                    addLabelFlag = false;
-                    newLabelName = '';
+                    addFileTagsFlag = false;
+                    newFileTagsName = '';
                   "
                 >
                   关闭
@@ -160,21 +163,19 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, computed } from 'vue';
+  import { ref, watch, computed } from 'vue';
   import {
     EditOutlined,
     PlusSquareOutlined,
-    EnvironmentOutlined,
     CheckOutlined,
     CloseOutlined,
   } from '@ant-design/icons-vue';
-  import { orgPosGroup } from '@/api/demo/system';
-  import { Map } from './preview';
+  import { UpdatePicName, UpdatePicStatus } from '@/api/demo/mediaLibrary';
   import { useMessage } from '@/hooks/web/useMessage';
-  const { createMessage, createConfirm } = useMessage();
+  const { createMessage } = useMessage();
 
-  const props = defineProps(['nowPreviewRecord', 'previewRecordList', 'hideOrShowTextboxFlag']);
-  const emit = defineEmits(['chooseNowPreviewRecord', 'reloadTable']);
+  const props = defineProps(['nowPreviewRecord', 'previewRecordList']);
+  const emits = defineEmits(['chooseNowPreviewRecord', 'handleSuccess']);
 
   // 修改名称--------------------------------
   const editNameFlag = ref(true);
@@ -195,21 +196,14 @@
     }
     let query = {
       id: props.nowPreviewRecord.id,
-      newName: newName,
+      name: newName,
     };
-    props.nowPreviewRecord.name = newName;
-    editNameFlag.value = true;
-    emit('reloadTable');
-    return;
-    // 调用接口
-    const data = await orgPosGroup(query);
-    if (data) {
+    UpdatePicName(query).then((res) => {
+      props.nowPreviewRecord.name = newName;
       editNameFlag.value = true;
-      emit('reloadTable');
-      return createMessage.success('修改名称成功');
-    } else {
-      return createMessage.error('修改名称失败');
-    }
+      createMessage.success(res);
+      emits('handleSuccess');
+    });
   }
   function editNameBlur() {
     editNameFlag.value = true;
@@ -217,64 +211,66 @@
   }
 
   // 标签--------------------------------
-  const addLabelFlag = ref(false);
-  const newLabelName = ref('');
-  function addLabelChange() {
-    addLabelFlag.value = true;
+  const addFileTagsFlag = ref(false);
+  const newFileTagsName = ref('');
+  const fileTags: any = ref([]);
+
+  watch(
+    () => props.nowPreviewRecord,
+    () => {
+      fileTags.value = props.nowPreviewRecord.fileTags ? props.nowPreviewRecord.fileTags : [];
+    },
+    {
+      deep: true,
+      immediate: true,
+    },
+  );
+  // 标签弹窗打开
+  function addFileTagsChange() {
+    addFileTagsFlag.value = true;
   }
   // 添加标签方法
-  async function pressEnterLabelFunction() {
-    if (!newLabelName.value) {
+  async function pressEnterFileTagsFunction() {
+    if (!newFileTagsName.value) {
       return;
     }
-    if (
-      !props.nowPreviewRecord.label ||
-      !props.nowPreviewRecord.label.includes(newLabelName.value)
-    ) {
-      if (!props.nowPreviewRecord.label) {
-        props.nowPreviewRecord.label = [];
-      }
-      props.nowPreviewRecord.label.push(newLabelName.value);
-      let query = {
+    if (!fileTags.value.includes(newFileTagsName.value)) {
+      fileTags.value.push(newFileTagsName.value);
+      UpdatePicStatus({
         id: props.nowPreviewRecord.id,
-        newLabel: props.nowPreviewRecord.label,
-      };
-      addLabelFlag.value = true;
-      chooseNowPreviewRecord({
-        ...props.nowPreviewRecord,
-        label: props.nowPreviewRecord.label,
+        fileTags: JSON.stringify(fileTags.value),
+        graffitiJson: props.nowPreviewRecord.graffitiJson,
+        display: props.nowPreviewRecord.display,
+        showOnMap: props.nowPreviewRecord.showOnMap,
+      }).then((res) => {
+        addFileTagsFlag.value = true;
+        newFileTagsName.value = '';
+        createMessage.success('添加标签成功');
+        emits('handleSuccess');
       });
-
-      emit('reloadTable');
-      newLabelName.value = '';
-      return;
-      // 调用接口
-      const data = await orgPosGroup(query);
-      if (data) {
-        addLabelFlag.value = true;
-        emit('reloadTable');
-        return createMessage.success('修改名称成功');
-      } else {
-        return createMessage.error('修改名称失败');
-      }
     } else {
       return createMessage.error('此标签已存在！');
     }
   }
 
   // 删除标签
-  function deleteLabel(value) {
-    props.nowPreviewRecord.label = props.nowPreviewRecord.label.filter((item) => item !== value);
-    chooseNowPreviewRecord({
-      ...props.nowPreviewRecord,
-      label: props.nowPreviewRecord.label,
+  function deleteFileTags(value) {
+    fileTags.value = fileTags.value.filter((item) => item !== value);
+    UpdatePicStatus({
+      id: props.nowPreviewRecord.id,
+      fileTags: JSON.stringify(fileTags.value),
+      graffitiJson: props.nowPreviewRecord.graffitiJson,
+      display: props.nowPreviewRecord.display,
+      showOnMap: props.nowPreviewRecord.showOnMap,
+    }).then((res) => {
+      createMessage.success('删除标签成功');
+      emits('handleSuccess');
     });
-    emit('reloadTable');
   }
 
   // 选择
   function chooseNowPreviewRecord(value) {
-    emit('chooseNowPreviewRecord', value);
+    emits('chooseNowPreviewRecord', value);
   }
 </script>
 <style lang="less" scoped>

From 87ead571301dd5767221cfdedb4cc9fa8f008f07 Mon Sep 17 00:00:00 2001
From: userName <userEmail>
Date: Tue, 29 Jul 2025 16:03:46 +0800
Subject: [PATCH 10/13] =?UTF-8?q?=E4=BD=9C=E4=B8=9A=E5=8C=BA=E5=9F=9F?=
 =?UTF-8?q?=E7=BB=91=E5=AE=9A=E9=A1=B9=E7=9B=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/demo/jobarea/index.vue        |  79 ++++++--------
 src/views/demo/jobarea/pathAreaInfo.vue |   4 +-
 src/views/demo/jobarea/pathLeftMenu.vue |  62 +++++------
 src/views/demo/jobarea/pathMap.vue      | 132 +++++++++++++++++-------
 4 files changed, 153 insertions(+), 124 deletions(-)

diff --git a/src/views/demo/jobarea/index.vue b/src/views/demo/jobarea/index.vue
index 7400462..2b413fb 100644
--- a/src/views/demo/jobarea/index.vue
+++ b/src/views/demo/jobarea/index.vue
@@ -6,6 +6,7 @@
           ref="pathLeftMenuRef"
           :leftMenuShow="leftMenuShow"
           :allAreaDataList="allAreaDataList"
+          :allWorkspaceDataList="allWorkspaceDataList"
           :nowShowAreaData="nowShowAreaData"
           @changeLeftMenuShow="changeLeftMenuShow"
           @handlerLocation="handlerLocation"
@@ -23,7 +24,7 @@
       <div class="mapDiv" :style="{ width: dynamicWidth }">
         <PathMap
           ref="pathMapRef"
-          :allAnnotationDataList="allAnnotationDataList"
+          :allWorkspaceDataList="allWorkspaceDataList"
           :nowShowAnnotationData="nowShowAnnotationData"
           :allAreaDataList="allAreaDataList"
           :nowShowAreaData="nowShowAreaData"
@@ -56,7 +57,7 @@
     import { cloneDeep } from 'lodash-es';
     import imageJson from './json/image.json';
     import {
-      GetAnnotationList,
+      GetWorkspaceList,
       DeleteAnnotation,
       GetWorkAreaList,
       DeleteWorkArea,
@@ -66,6 +67,7 @@
     const { createMessage, createConfirm } = useMessage();
   
     const props = defineProps(['pathRecord']);
+    const allWorkspaceDataList: any = ref([]);
     // 地图宽度
     const dynamicWidth = computed(() => {
       let width = 0;
@@ -95,6 +97,11 @@
 
     function changeAnnotationInfoShow() {
       
+    }
+    function getWorksListData() {
+      GetWorkspaceList().then((result1) => {
+          allWorkspaceDataList.value = result1;
+      })
     }
     // 关闭右侧标注
     function closePathAnnotationInfo() {
@@ -103,7 +110,6 @@
     }
     // 当前展示的标注信息
     const nowShowAnnotationData = ref();
-    const allAnnotationDataList: any = ref([]);
     // 设置当前展示的标注信息
     function setNowShowAnnotationData(value, restore = true) {
 
@@ -115,28 +121,7 @@
     // 刷新区域信息
     function setAllAnnotationData() {
       // 查询地图工作区域
-      getAnnotationList();
-    }
-    // 查询地图标注
-    async function getAnnotationList(showThis = true) {
-      allAnnotationDataList.value = await GetAnnotationList({ workspaceid: 1 });
-      if (allAnnotationDataList.value.length > 0) {
-        allAnnotationDataList.value.forEach((annotation, index) => {
-          let geomjson = WktToGeojson(annotation.geom);
-          annotation = {
-            ...annotation,
-            properties: JSON.parse(annotation.properties),
-            geomtype: getGeomType(annotation),
-            coordinates: geomjson.coordinates,
-          };
-          allAnnotationDataList.value[index] = annotation;
-        });
-      }
-      if (showThis) {
-        setTimeout(() => {
-          pathLeftMenuRef.value.updateShowMenuInfoList('地图标注');
-        }, 50);
-      }
+      
     }
   
     // 删除标注
@@ -149,7 +134,6 @@
       }).then((result) => {
         if (result) {
           // 刷新
-          getAnnotationList();
           createMessage.success('删除成功');
         }
       });
@@ -188,7 +172,7 @@
     }
     // 查询地图工作区域
     async function getWorkAreaList(showThis = true) {
-      allAreaDataList.value = await GetWorkAreaList({ workspaceid: 1 });
+      allAreaDataList.value = await GetWorkAreaList();
       if (allAreaDataList.value.length > 0) {
         allAreaDataList.value.forEach((area, index) => {
           let geomjson = WktToGeojson(area.geom);
@@ -248,31 +232,30 @@
     }
   
     // 获取WKT类型
-    function getGeomType(area) {
-      let geom = area.geom;
-      let radiusFlag = area.properties.indexOf('radius') > -1 ? true : false;
-      // 点
-      if (geom.indexOf('POINT') > -1 && !radiusFlag) {
-        return 'Point';
-      }
-      // 线
-      if (geom.indexOf('LINESTRING') > -1 && !radiusFlag) {
-        return 'Polyline';
-      }
-      // 多边形
-      if (geom.indexOf('POLYGON') > -1 && !radiusFlag) {
-        return 'Polygon';
-      }
-      // 圈
-      if (geom.indexOf('POLYGON') > -1 && radiusFlag) {
-        return 'Circle';
-      }
+  function getGeomType(area) {
+    let geom = area.geom;
+    let radiusFlag = area.properties.indexOf('radius') > -1 ? true : false;
+    // 点
+    if (geom.indexOf('POINT') > -1 && !radiusFlag) {
+      return 'Point';
     }
-  
+    // 线
+    if (geom.indexOf('LINESTRING') > -1 && !radiusFlag) {
+      return 'Polyline';
+    }
+    // 多边形
+    if (geom.indexOf('POLYGON') > -1 && !radiusFlag) {
+      return 'Polygon';
+    }
+    // 圈
+    if (geom.indexOf('POINT') > -1 && radiusFlag) {
+      return 'Circle';
+    }
+  }
     onMounted(() => {
       // 查询地图工作区域
+      getWorksListData();
       getWorkAreaList(false);
-      getAnnotationList();
     });
   </script>
   <style lang="less" scoped>
diff --git a/src/views/demo/jobarea/pathAreaInfo.vue b/src/views/demo/jobarea/pathAreaInfo.vue
index 64cc79a..81b16fe 100644
--- a/src/views/demo/jobarea/pathAreaInfo.vue
+++ b/src/views/demo/jobarea/pathAreaInfo.vue
@@ -79,14 +79,14 @@
         <div class="annotationTitle">水平周长</div>
       </a-col>
       <a-col :span="18">
-        <div class="annotationContent"> {{ length.toFixed(2) }}m</div>
+        <div class="annotationContent"> {{ length.toFixed(2) || length }}m</div>
       </a-col>
       <!-- 水平面积 -->
       <a-col :span="6">
         <div class="annotationTitle">水平面积</div>
       </a-col>
       <a-col :span="18">
-        <div class="annotationContent"> {{ area.toFixed(2) }}㎡</div>
+        <div class="annotationContent"> {{ area.toFixed(2) || area }}㎡</div>
       </a-col>
       <!-- 半径 -->
       <a-col :span="6" v-if="props.nowShowAreaData.geomtype == 'Circle'">
diff --git a/src/views/demo/jobarea/pathLeftMenu.vue b/src/views/demo/jobarea/pathLeftMenu.vue
index be874f3..a5274ec 100644
--- a/src/views/demo/jobarea/pathLeftMenu.vue
+++ b/src/views/demo/jobarea/pathLeftMenu.vue
@@ -52,6 +52,7 @@
                   {{ show.name }}
                 </div>
                 <div class="line"></div>
+                <div class="work">所属项目：{{show.workSpaceName}}</div>
               </a-tooltip>
               <div
                 class="type"
@@ -166,7 +167,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, watch } from 'vue';
+  import { ref, watch, onMounted } from 'vue';
   import {
     CloseOutlined,
     AntDesignOutlined,
@@ -192,6 +193,7 @@
 
   const props = defineProps([
     'leftMenuShow',
+    'allWorkspaceDataList',
     'allAreaDataList',
     'nowShowAreaData',
   ]);
@@ -204,6 +206,12 @@
   ]);
   const showMenuInfoList = ref(props.allAreaDataList);
   const showMenuInfoName = ref('地图作业区域');
+  onMounted(() => {
+      // 查询地图工作区域
+      setTimeout(() =>{
+        handleChangeAreaSelect();
+      },1000) 
+  });
   function updateShowMenuInfoList(type) {
     handleChangeAreaSelect();
   }
@@ -242,6 +250,13 @@
     if (areastate.value !== 'all') {
       filterAreaData = filterAreaData.filter((item) => item.state == areastate.value);
     }
+    filterAreaData.forEach((annotation) => {
+      props.allWorkspaceDataList.forEach((tree) => {
+        if (tree.Id == annotation.workSpaceId) {
+          annotation.workSpaceName = tree.WorkspaceName
+        }
+      });
+    });
     filterAfterAreaDataList.value = filterAreaData;
     showMenuInfoList.value = filterAfterAreaDataList.value;
   }
@@ -287,41 +302,6 @@
   // ------------------------------------------------------------------
   // 移动到中心位置
   function handlerLocation(position) {
-    // if (showMenuInfoName.value == '地图标注') {
-    //   let coordinates = position.coordinates;
-    //   switch (position.type) {
-    //     case 0:
-    //       emits('handlerLocation', {
-    //         lng: coordinates[0],
-    //         lat: coordinates[1],
-    //       });
-    //       break;
-    //     case 1:
-    //       emits('handlerLocation', {
-    //         lng: coordinates[0][0],
-    //         lat: coordinates[0][1],
-    //       });
-    //       break;
-    //     case 2:
-    //       emits('handlerLocation', {
-    //         lng: coordinates[0][0][0],
-    //         lat: coordinates[0][0][1],
-    //       });
-    //       break;
-    //     case 3:
-    //       emits('handlerLocation', {
-    //         lng: coordinates[0],
-    //         lat: coordinates[1],
-    //       });
-    //       break;
-    //   }
-    // }
-    // if (showMenuInfoName.value == '地图照片') {
-    //   emits('handlerLocation', {
-    //     lng: position.photo_position.lng,
-    //     lat: position.photo_position.lat,
-    //   });
-    // }
     if (showMenuInfoName.value == '地图作业区域') {
       if (position.geomtype == 'Circle') {
         emits('handlerLocation', {
@@ -526,7 +506,7 @@
             display: flex;
             align-items: center;
             justify-content: flex-start;
-            height: 80px;
+            height: 100px;
             margin: 10px 15px;
             background: #313C62;
             box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
@@ -544,6 +524,13 @@
               overflow: hidden;
               text-overflow: ellipsis;
             }
+            .work{
+              position: absolute;
+              top: 33px;
+              left: 16px;
+              color: #ffffff;
+              font-size: 13px;
+            }
             .line{
               width: 310px;
               height: 1px;
@@ -551,6 +538,7 @@
               border: 1px solid;
               opacity: 0.2;
               border-image: linear-gradient(270deg, rgba(96, 107, 146, 0), rgba(154, 164, 196, 1)) 1 1;
+              margin-top: 12px;
             }
             .type {
               position: absolute;
diff --git a/src/views/demo/jobarea/pathMap.vue b/src/views/demo/jobarea/pathMap.vue
index 7451fe1..363da00 100644
--- a/src/views/demo/jobarea/pathMap.vue
+++ b/src/views/demo/jobarea/pathMap.vue
@@ -1,9 +1,9 @@
 <template>
   <div ref="vChartRef" id="mars3d-container" class="mars3d-container">
-    <div class="annotationButtons">
+    <!-- <div class="annotationButtons">
       <div
         :class="mapDrawType == 'drawPoint' ? 'button_choose' : 'button_nochoose'"
-        @click="drawPoint"
+        @click="fun_chooseWorkSpaceType('drawPoint')"
       >
         <a-popover placement="left">
           <template #content>
@@ -29,7 +29,7 @@
       </div>
       <div
         :class="mapDrawType == 'drawPolyline' ? 'button_choose' : 'button_nochoose'"
-        @click="drawPolyline"
+        @click="fun_chooseWorkSpaceType('drawPolyline')"
       >
         <a-popover placement="left">
           <template #content>
@@ -55,7 +55,7 @@
       </div>
       <div
         :class="mapDrawType == 'drawPolygon' ? 'button_choose' : 'button_nochoose'"
-        @click="drawPolygon"
+        @click="fun_chooseWorkSpaceType('drawPolygon')"
       >
         <a-popover placement="left">
           <template #content>
@@ -81,7 +81,7 @@
       </div>
       <div
         :class="mapDrawType == 'drawCricle' ? 'button_choose' : 'button_nochoose'"
-        @click="drawCricle"
+        @click="fun_chooseWorkSpaceType('drawCricle')"
       >
         <a-popover placement="left">
           <template #content>
@@ -105,12 +105,12 @@
           />
         </a-popover>
       </div>
-    </div>
+    </div> -->
     <div class="areaButtons">
       <div
         :class="mapAreaDrawFlag ? 'button_choose' : 'button_nochoose'"
         style="border-radius: 3px"
-        @click="drawArea"
+        @click="fun_chooseWorkSpaceType('drawArea')"
       >
         <a-popover placement="leftTop">
           <template #content>
@@ -205,6 +205,34 @@
       </div>
     </div>
   </div>
+  <a-modal
+      title="选择项目"
+      :open="chooseWorkSpaceOpen"
+      :mask="false"
+      :maskClosable="false"
+      :closable="false"
+      @ok="fun_workSpaceOk"
+      @cancel="fun_workSpaceCancel"
+    >
+      <div style="margin: 10px 30px">
+        <a-radio-group v-model:value="chooseWorkSpaceId">
+          <a-radio
+            v-for="workspace in props.allWorkspaceDataList"
+            style="
+              display: flex;
+              align-items: center;
+              justify-content: flex-start;
+              height: 30px;
+              lineheight: 30px;
+            "
+            :key="workspace.Id"
+            :value="workspace.Id"
+          >
+            {{ workspace.WorkspaceName }}
+          </a-radio>
+        </a-radio-group>
+      </div>
+    </a-modal>
 </template>
 <script lang="ts" setup>
   import { ref, watch, onMounted, defineEmits } from 'vue';
@@ -227,9 +255,11 @@
   import * as turf from '@turf/turf';
   import { WktToGeojson, GeojsonToWkt } from '@/components/MapboxMaps/src/WktGeojsonTransform';
   import dayjs from 'dayjs';
+  import { useMessage } from '@/hooks/web/useMessage';
+  const { createMessage } = useMessage();
 
   const props = defineProps([
-    'allAnnotationDataList',
+    'allWorkspaceDataList',
     'nowShowAnnotationData',
     'allImageDataList',
     'nowShowImageData',
@@ -251,6 +281,7 @@
   let graphicLayers = new mars3d.layer.GraphicLayer({
     isAutoEditing: true,
   });
+
   // 地图标注
   // 地图标注-点
   let annotation_PointGraphicData: any = [];
@@ -633,6 +664,7 @@
       deep: true,
     },
   );
+
   // 地图标注-初始化-遍历展示
   const showAllAnnotationDataList = async () => {
     // 删除旧数据
@@ -960,13 +992,52 @@
   const drawColorPolygon = ref('#2D8CF0');
   const drawColorCricle = ref('#2D8CF0');
 
-  // 地图标注-绘制-点
-  async function drawPoint() {
-    if (mapDrawType.value == 'drawPoint') {
-      mapDrawType.value = '';
+  // 项目弹窗
+  const chooseWorkSpaceOpen = ref(false);
+  const chooseWorkSpaceId = ref('');
+   // 选择项目
+   function fun_chooseWorkSpaceType(type) {
+    chooseWorkSpaceOpen.value = true;
+    mapDrawType.value = type;
+  }
+  // 确认-选择绘制类型
+  function fun_workSpaceOk() {
+    if (chooseWorkSpaceId.value == '') {
+      createMessage.warning('先选择要标注的项目!');
       return;
     }
-    mapDrawType.value = 'drawPoint';
+    chooseWorkSpaceOpen.value = false;
+    switch (mapDrawType.value) {
+      // 地图标注-绘制-点
+      case 'drawPoint':
+        drawPoint();
+        break;
+      // 地图标注-绘制-线
+      case 'drawPolyline':
+        drawPolyline();
+        break;
+      // 地图标注-绘制-形状
+      case 'drawPolygon':
+        drawPolygon();
+        break;
+      // 地图标注-绘制-圆
+      case 'drawCricle':
+        drawCricle();
+        break;
+      case 'drawArea':
+        drawArea();
+        break;
+    }
+  }
+  // 取消
+  function fun_workSpaceCancel() {
+    chooseWorkSpaceOpen.value = false;
+    mapDrawType.value = '';
+    chooseWorkSpaceId.value == '';
+  }
+
+  // 地图标注-绘制-点
+  async function drawPoint() {
     let time = dayjs().format('YYYY-MM-DD HH:mm:ss');
     const graphic = await graphicLayers.startDraw({
       type: 'billboard',
@@ -990,11 +1061,6 @@
   }
   // 地图标注-绘制-线
   async function drawPolyline() {
-    if (mapDrawType.value == 'drawPolyline') {
-      mapDrawType.value = '';
-      return;
-    }
-    mapDrawType.value = 'drawPolyline';
     let time = dayjs().format('YYYY-MM-DD HH:mm:ss');
     const graphic = await graphicLayers.startDraw({
       type: 'polyline',
@@ -1021,11 +1087,6 @@
   }
   // 地图标注-绘制-形状
   async function drawPolygon() {
-    if (mapDrawType.value == 'drawPolygon') {
-      mapDrawType.value = '';
-      return;
-    }
-    mapDrawType.value = 'drawPolygon';
     let time = dayjs().format('YYYY-MM-DD HH:mm:ss');
     const graphic = await graphicLayers.startDraw({
       type: 'polygon',
@@ -1050,11 +1111,6 @@
   }
   // 地图标注-绘制-圆
   async function drawCricle() {
-    if (mapDrawType.value == 'drawCricle') {
-      mapDrawType.value = '';
-      return;
-    }
-    mapDrawType.value = 'drawCricle';
     let time = dayjs().format('YYYY-MM-DD HH:mm:ss');
     const graphic = await graphicLayers.startDraw({
       type: 'circle',
@@ -1131,7 +1187,7 @@
         break;
       case 'circle':
         type = 3;
-        geom = GeojsonToWkt(turf.circle(coordinates, graphicJson.style.radius).geometry);
+        geom = GeojsonToWkt(turf.point(coordinates, graphicJson.style.radius).geometry);
         properties = {
           font_size: 16,
           clampToGround: true,
@@ -1149,7 +1205,7 @@
         createTime: time,
         createUser: '',
         geom: geom,
-        workSpaceId: '1',
+        workSpaceId: chooseWorkSpaceId.value,
         state: 0,
         createUserName: '',
       };
@@ -1157,6 +1213,7 @@
         // 刷新区域信息
         emits('setAllAnnotationData');
         mapDrawType.value = '';
+        
       });
     } else {
       params = {
@@ -1165,7 +1222,7 @@
         type: type,
         properties: JSON.stringify(properties),
         geom: geom,
-        workSpaceId: '1',
+        workSpaceId: chooseWorkSpaceId.value,
         state: props.nowShowAnnotationData.state,
       };
       UpdateAnnotation(params).then((result) => {
@@ -1576,7 +1633,7 @@
   watch(
     () => area_noland_PolygonGraphicData,
     () => {
-      console.log(area_noland_PolygonGraphicData);
+      
     },
     {
       deep: true,
@@ -2263,7 +2320,7 @@
       // 自定义圆形作业区
       case 'dfence_Circle':
         type = 'dfence';
-        geom = GeojsonToWkt(turf.circle(coordinates, graphicJson.style.radius).geometry);
+        geom = GeojsonToWkt(turf.point(coordinates, graphicJson.style.radius).geometry);
         properties = {
           clampToGround: true,
           color: '#00FF00',
@@ -2274,7 +2331,7 @@
       // 自定义圆形限飞区
       case 'nfz_Circle':
         type = 'nfz';
-        geom = GeojsonToWkt(turf.circle(coordinates, graphicJson.style.radius).geometry);
+        geom = GeojsonToWkt(turf.point(coordinates, graphicJson.style.radius).geometry);
         properties = {
           clampToGround: true,
           color: '#FF0000',
@@ -2291,7 +2348,7 @@
         createTime: time,
         createUser: '',
         geom: geom,
-        workSpaceId: '1',
+        workSpaceId: chooseWorkSpaceId.value,
         state: 0,
         createUserName: '',
       };
@@ -2307,7 +2364,7 @@
         type: type,
         properties: JSON.stringify(properties),
         geom: geom,
-        workSpaceId: '1',
+        workSpaceId: chooseWorkSpaceId.value,
         state: props.nowShowAreaData.state,
       };
       UpdateWorkArea(params).then((result) => {
@@ -2323,6 +2380,7 @@
     const position = Cesium.Cartesian3.fromDegrees(lngLat[0], lngLat[1]);
     map.flyToPoint(position);
   };
+  
 
   defineExpose({
     setNowShowImageByRight,
@@ -2393,7 +2451,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    top: 30%;
+    top: 15%;
     right: 1%;
     width: 30px;
     height: 30px;

From 525a4420d64e0e8e6e598247872c29454092e450 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=BB=95=E5=B5=A9?= <17854119262@163.com>
Date: Tue, 29 Jul 2025 17:29:56 +0800
Subject: [PATCH 11/13] =?UTF-8?q?=E5=AA=92=E4=BD=93=E5=BA=93-=E6=8C=89?=
 =?UTF-8?q?=E8=A6=81=E6=B1=82=E4=BF=AE=E6=94=B9=E9=83=A8=E5=88=86=E5=86=85?=
 =?UTF-8?q?=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/demo/system/mediaLibrary/index.vue  | 111 +++++++++++++-----
 .../demo/system/mediaLibrary/modal.data.ts    |   8 +-
 .../demo/system/mediaLibrary/path/index.vue   |  15 ++-
 .../mediaLibrary/path/pathImageInfo.vue       |  67 ++++++-----
 .../system/mediaLibrary/path/pathLeftMenu.vue |  12 +-
 .../demo/system/mediaLibrary/path/pathMap.vue |  99 +++++++++++-----
 .../demo/system/mediaLibrary/path/svg.ts      |  16 ++-
 .../system/mediaLibrary/preview/index.vue     |   6 +-
 .../system/mediaLibrary/preview/preview.ts    |  32 ++++-
 .../mediaLibrary/preview/previewImage.vue     |  73 +++++++-----
 .../preview/previewImageInformation.vue       |   2 +-
 11 files changed, 312 insertions(+), 129 deletions(-)

diff --git a/src/views/demo/system/mediaLibrary/index.vue b/src/views/demo/system/mediaLibrary/index.vue
index fa96604..c3dc676 100644
--- a/src/views/demo/system/mediaLibrary/index.vue
+++ b/src/views/demo/system/mediaLibrary/index.vue
@@ -1,7 +1,7 @@
 <template>
   <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
-    <LeftTree ref="childRef" class="w-1/5 xl:w-1/6" @select="handleSelect" />
-    <div class="w-4/5 xl:w-5/6">
+    <LeftTree v-if="!pathDivShow" ref="childRef" class="w-1/5 xl:w-1/6" @select="handleSelect" />
+    <div v-if="!pathDivShow" class="w-4/5 xl:w-5/6">
       <BasicTable @register="registerTable" :searchInfo="searchInfo">
         <template #toolbar>
           <span v-for="(f, index) in floders" :key="f.id" class="floderTitle">
@@ -58,6 +58,7 @@
                 @mouseout="record.isHovered = false"
                 :style="{
                   textDecoration: record.isHovered ? 'underline' : 'none',
+                  cursor: record.isHovered ? 'pointer' : 'default',
                   marginLeft: '5px',
                 }"
               >
@@ -114,18 +115,6 @@
                     <EditOutlined @click="renameRecord(record)" />
                   </a-button>
                 </a-tooltip>
-                <a-tooltip placement="top">
-                  <template #title>
-                    <div>查看地图图片历史路径</div>
-                    <div>只展示在地图上加载的图片</div>
-                  </template>
-                  <a-button
-                    type="text"
-                    v-if="record.objectKey && record.objectKey.includes('.jpeg')"
-                  >
-                    <BorderInnerOutlined @click="openPathModal(record)" />
-                  </a-button>
-                </a-tooltip>
                 <a-tooltip placement="top">
                   <template #title>
                     <span>
@@ -149,6 +138,22 @@
                     />
                   </a-button>
                 </a-tooltip>
+                <a-tooltip placement="top">
+                  <template #title>
+                    <div>查看地图图片历史路径</div>
+                    <div>只展示在地图上加载的图片</div>
+                  </template>
+                  <a-button
+                    type="text"
+                    v-if="
+                      record.objectKey &&
+                      record.objectKey.includes('.jpeg') &&
+                      record.showOnMap == 1
+                    "
+                  >
+                    <BorderInnerOutlined @click="showPathDiv(record)" />
+                  </a-button>
+                </a-tooltip>
               </div>
             </template>
           </div>
@@ -202,6 +207,7 @@
             class="storeDivSpanName"
             :style="{
               textDecoration: record.isHovered ? 'underline' : 'none',
+              cursor: record.isHovered ? 'pointer' : 'default',
             }"
             @click="lookRecord(record)"
           >
@@ -297,6 +303,15 @@
     >
       <Comparison @closeComparisonModal="closeComparisonModal" />
     </a-modal>
+
+    <Path
+      v-if="pathDivShow"
+      :allImageDataList="allImageDataList"
+      :nowShowImageData="nowShowImageData"
+      :floderName="floderName"
+      @closePathModal="closePathModal"
+      @handleSuccessPath="handleSuccessPath"
+    />
   </PageWrapper>
 </template>
 <script lang="ts" setup>
@@ -666,7 +681,7 @@
       id: record.id,
       fileTags: record.fileTags,
       graffitiJson: record.graffitis,
-      display: record.display,
+      display: record.showOnMap == 1 ? 0 : 1,
       showOnMap: record.showOnMap == 1 ? 0 : 1,
     }).then((res) => {
       if (record.showOnMap == 1) {
@@ -685,16 +700,8 @@
   const previewRecordList: any = ref([]);
   // 查看-打开这个文件夹或者展示这个图片
   async function lookRecord(record) {
-    if (!record.objectKey) {
-      nowParentKey.value = record.id;
-      floders.value.push({
-        id: nowParentKey.value,
-        name: record.name,
-      });
-      reload().then((res) => {
-        showTableData.value = res;
-      });
-    } else {
+    // 展示这个图片后者视频
+    if (record.objectKey) {
       GetMediaFile({
         ...searchParams.value,
         parentKey: nowParentKey.value,
@@ -702,10 +709,22 @@
         limit: 100,
       }).then((res) => {
         nowPreviewRecord.value = record;
+        // 同文件下的图片或者视频
         previewRecordList.value = uniqueByKey(res.items, record);
         open.value = true;
       });
     }
+    // 文件夹
+    if (!record.objectKey) {
+      nowParentKey.value = record.id;
+      floders.value.push({
+        id: nowParentKey.value,
+        name: record.name,
+      });
+      reload().then((res) => {
+        showTableData.value = res;
+      });
+    }
   }
   function uniqueByKey(arrlist, record) {
     let resultList: any = [];
@@ -768,7 +787,7 @@
 
   // 路径地图弹窗----------------------------------------------------------------------
   const pathOpen = ref(false);
-  // 打开变化检测弹窗
+  // 打开路径地图弹窗
   const floderName = ref('');
   const nowShowImageData = ref({});
   const allImageDataList: any = ref([]);
@@ -798,15 +817,45 @@
       pathOpen.value = true;
     });
   }
-  // 关闭变化检测弹窗
+  // 展示路径地图部分
+  const pathDivShow = ref(false);
+  function showPathDiv(record) {
+    GetMediaFile({
+      parentKey: record.parentKey,
+      page: 1,
+      limit: 1000,
+    }).then((res) => {
+      allImageDataList.value = res.items.filter(
+        (item) => item.objectKey && item.objectKey.includes('.jpeg'),
+      );
+      allImageDataList.value.forEach((arr) => {
+        if (arr.fileTags) {
+          arr.fileTags = JSON.parse(arr.fileTags);
+        } else {
+          arr.fileTags = [];
+        }
+        if (arr.graffitiJson) {
+          arr.graffitiJson = JSON.parse(arr.graffitiJson);
+        } else {
+          arr.graffitiJson = [];
+        }
+      });
+      nowShowImageData.value = allImageDataList.value.find((item) => item.id == record.id);
+      floderName.value = floders.value[floders.value.length - 1].name;
+      pathDivShow.value = true;
+    });
+  }
+  // 关闭路径地图弹窗
   function closePathModal() {
     nowShowImageData.value = {};
     pathOpen.value = false;
+    pathDivShow.value = false;
   }
   // 刷新
   function handleSuccessPath(value) {
     setTimeout(() => {
-      openPathModal(value);
+      pathDivShow.value ? openPathModal(value) : showPathDiv(value);
+      // openPathModal(value);
       reload();
     }, 500);
   }
@@ -915,4 +964,10 @@
   ::v-deep .vben-basic-table {
     height: fit-content !important;
   }
+  ::v-deep .full-modal {
+    height: 100% !important;
+  }
+  ::v-deep .ant-modal-body {
+    height: 100% !important;
+  }
 </style>
diff --git a/src/views/demo/system/mediaLibrary/modal.data.ts b/src/views/demo/system/mediaLibrary/modal.data.ts
index 5078609..1ca0bb7 100644
--- a/src/views/demo/system/mediaLibrary/modal.data.ts
+++ b/src/views/demo/system/mediaLibrary/modal.data.ts
@@ -207,8 +207,8 @@ export const svg_showOnMap_1 = `<svg
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 viewBox="0 0 24 24"
-width="18"
-height="18"
+width="16"
+height="16"
 >
 <path
   d="M19 5v11.17l2 2V5c0-1.1-.9-2-2-2H5.83l2 2H19zM2.81 2.81L1.39 4.22L3 5.83V19c0 1.1.9 2 2 2h13.17l1.61 1.61l1.41-1.41L2.81 2.81zM5 19V7.83l7.07 7.07l-.82 1.1L9 13l-3 4h8.17l2 2H5z"
@@ -220,8 +220,8 @@ export const svg_showOnMap_0 = `<svg
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 viewBox="0 0 24 24"
-width="18"
-height="18"
+width="16"
+height="16"
 >
 <path
   d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14L6 17h12l-3.86-5.14z"
diff --git a/src/views/demo/system/mediaLibrary/path/index.vue b/src/views/demo/system/mediaLibrary/path/index.vue
index 26d696d..9f645d4 100644
--- a/src/views/demo/system/mediaLibrary/path/index.vue
+++ b/src/views/demo/system/mediaLibrary/path/index.vue
@@ -77,7 +77,7 @@
   }
 
   // 右侧图片是否显示----------------------------------------------------
-  const imageInfoShow = ref(false);
+  const imageInfoShow = ref(true);
   // 当前展示的图片
   const nowShowImageData = ref();
   const allImageDataList = ref();
@@ -133,17 +133,13 @@
   function handleSuccessPath(value) {
     emits('handleSuccessPath', value);
   }
-  // 打开路径弹窗
-  function openPathModal(value) {
-    emits('openPathModal', value);
-  }
 </script>
 <style lang="less" scoped>
   .pathModal {
     position: relative;
     display: flex;
     width: 100%;
-    height: 100vh;
+    height: 100%;
 
     .leftMenuDiv {
       position: relative;
@@ -164,4 +160,11 @@
       // min-width: 720px;
     }
   }
+
+  ::v-deep .full-modal {
+    height: 100% !important;
+  }
+  ::v-deep .ant-modal-body {
+    height: 100% !important;
+  }
 </style>
diff --git a/src/views/demo/system/mediaLibrary/path/pathImageInfo.vue b/src/views/demo/system/mediaLibrary/path/pathImageInfo.vue
index c6f4e21..3eb22b4 100644
--- a/src/views/demo/system/mediaLibrary/path/pathImageInfo.vue
+++ b/src/views/demo/system/mediaLibrary/path/pathImageInfo.vue
@@ -95,19 +95,26 @@
           <template #title>
             <span>{{ hideOrShowGraffitiFlag ? '点击隐藏涂鸦信息' : '点击显示涂鸦信息' }}</span>
           </template>
-          <EyeOutlined @click="hideOrShowGraffiti(false)" v-if="hideOrShowGraffitiFlag" />
-          <EyeInvisibleOutlined @click="hideOrShowGraffiti(true)" v-if="!hideOrShowGraffitiFlag" />
-          <div
-            style="
-              position: absolute;
-              bottom: 0px;
-              right: 0px;
-              font-size: 10px;
-              color: #000000;
-              pointer-events: none;
-            "
-          >
-            涂鸦
+          <EyeOutlined
+            @click="hideOrShowGraffiti(false)"
+            v-if="hideOrShowGraffitiFlag"
+            style="color: #2d8cf0"
+          />
+          <EyeInvisibleOutlined
+            @click="hideOrShowGraffiti(true)"
+            v-if="!hideOrShowGraffitiFlag"
+            style="color: #595959"
+          />
+          <div style="position: absolute; bottom: -6px; right: -4px; pointer-events: none">
+            <div
+              v-html="
+                `${
+                  hideOrShowGraffitiFlag
+                    ? graffiti_svg.replaceAll('currentColor', '#2d8cf0')
+                    : graffiti_svg.replaceAll('currentColor', '#595959')
+                }`
+              "
+            />
           </div>
         </a-tooltip>
       </div>
@@ -494,18 +501,23 @@
           :key="li.id"
           @click="setNowShowImageData(li)"
         >
-          <div :class="li.id == props.nowShowImageData.id ? 'bottom_div_choose' : 'bottom_div'">
-            <img
-              :src="
-                props.nowShowImageData.minipic
-                  ? VITE_MEDIALIBRARY_IMAGE_URL + li.minipic
-                  : 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871'
-              "
-              loading="lazy"
-              width="75"
-              height="50"
-            />
-          </div>
+          <a-tooltip placement="top">
+            <template #title>
+              <span>{{ li.name }}</span>
+            </template>
+            <div :class="li.id == props.nowShowImageData.id ? 'bottom_div_choose' : 'bottom_div'">
+              <img
+                :src="
+                  li.minipic
+                    ? VITE_MEDIALIBRARY_IMAGE_URL + li.minipic
+                    : 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871'
+                "
+                loading="lazy"
+                width="75"
+                height="50"
+              />
+            </div>
+          </a-tooltip>
         </div>
       </div>
     </div>
@@ -588,6 +600,7 @@
   } from '@ant-design/icons-vue';
   import dayjs from 'dayjs';
   import { UpdatePicStatus, UpdatePicName } from '@/api/demo/mediaLibrary';
+  import { graffiti_svg } from './svg';
   import { getAppEnvConfig } from '@/utils/env';
   import { cloneDeep } from 'lodash-es';
   import { useMessage } from '@/hooks/web/useMessage';
@@ -687,7 +700,7 @@
 
   // ----------------------------------------------------------------------
   // 缩放比例
-  const scale = ref(1);
+  const scale = ref(0.9);
   // 放大函数
   function zoomIn() {
     if (scale.value < 4) {
@@ -754,7 +767,7 @@
 
   // 刷新
   function refresh() {
-    scale.value = 1;
+    scale.value = 0.9;
     rotationAngle.value = 0;
     graffitiFlag.value = false;
     getImageWidthAndHeight();
diff --git a/src/views/demo/system/mediaLibrary/path/pathLeftMenu.vue b/src/views/demo/system/mediaLibrary/path/pathLeftMenu.vue
index 4a23c4c..f5487ea 100644
--- a/src/views/demo/system/mediaLibrary/path/pathLeftMenu.vue
+++ b/src/views/demo/system/mediaLibrary/path/pathLeftMenu.vue
@@ -8,7 +8,7 @@
     >
       <div class="leftMenu_closeButton">
         <a-tooltip placement="right">
-          <template #title> 关闭弹窗 </template>
+          <template #title> 关闭路径弹窗 </template>
           <CloseOutlined
             style="font-size: 24px; margin: 8px; color: white"
             @click="closePathModal"
@@ -85,6 +85,14 @@
               </div>
               <a-tooltip placement="top">
                 <template #title>
+                  <div>
+                    <img
+                      :src="VITE_MEDIALIBRARY_IMAGE_URL + show.minipic"
+                      loading="lazy"
+                      width="230"
+                      height="190"
+                    />
+                  </div>
                   <div> {{ show.name }}</div>
                 </template>
                 <div
@@ -173,6 +181,8 @@
   import { cloneDeep } from 'lodash-es';
   import { useMessage } from '@/hooks/web/useMessage';
   const { createMessage, createConfirm } = useMessage();
+  import { getAppEnvConfig } from '@/utils/env';
+  const { VITE_MEDIALIBRARY_IMAGE_URL } = getAppEnvConfig();
 
   const props = defineProps(['leftMenuShow', 'floderName', 'allImageDataList', 'nowShowImageData']);
   const emits = defineEmits([
diff --git a/src/views/demo/system/mediaLibrary/path/pathMap.vue b/src/views/demo/system/mediaLibrary/path/pathMap.vue
index a8c0616..d5d79eb 100644
--- a/src/views/demo/system/mediaLibrary/path/pathMap.vue
+++ b/src/views/demo/system/mediaLibrary/path/pathMap.vue
@@ -42,7 +42,7 @@
   });
   // 地图照片
   // 地图照片-地面点
-  let bottomPointGraphicData: any = [];
+  // let bottomPointGraphicData: any = [];
   // 地图照片-飞行点
   let flightointGraphicData: any = [];
   // 地图照片-地面点到展示图片的线
@@ -292,15 +292,15 @@
     (newValue) => {
       if (newValue) {
         // 地图照片-地面点
-        bottomPointGraphicData.forEach((graphicLayer) => {
-          if (graphicLayer.options.id == newValue.id + '_bottom') {
-            if (newValue.showOnMap == 1) {
-              graphicLayer.show = newValue.display == 1 ? true : false;
-            } else {
-              graphicLayers.removeGraphic(graphicLayer);
-            }
-          }
-        });
+        // bottomPointGraphicData.forEach((graphicLayer) => {
+        //   if (graphicLayer.options.id == newValue.id + '_bottom') {
+        //     if (newValue.showOnMap == 1) {
+        //       graphicLayer.show = newValue.display == 1 ? true : false;
+        //     } else {
+        //       graphicLayers.removeGraphic(graphicLayer);
+        //     }
+        //   }
+        // });
         // 地图照片-飞行点
         flightointGraphicData.forEach((graphicLayer) => {
           if (graphicLayer.options.id == newValue.id + '_flight') {
@@ -349,9 +349,9 @@
   // 地图照片-初始化-遍历展示
   const showAllImageDataList = async () => {
     // 删除旧数据
-    bottomPointGraphicData?.forEach((graphicLayer) => {
-      graphicLayers.removeGraphic(graphicLayer);
-    });
+    // bottomPointGraphicData?.forEach((graphicLayer) => {
+    //   graphicLayers.removeGraphic(graphicLayer);
+    // });
     flightointGraphicData?.forEach((graphicLayer) => {
       graphicLayers.removeGraphic(graphicLayer);
     });
@@ -362,7 +362,7 @@
       graphicLayers.removeGraphic(graphicLayer);
     });
     // 图层数据
-    bottomPointGraphicData = [];
+    // bottomPointGraphicData = [];
     flightointGraphicData = [];
     bottomImagePolylineGraphicData = [];
     imageGraphicData = [];
@@ -414,18 +414,18 @@
             Cesium.Cartesian3.fromDegrees(position[0], position[1]),
           ).then((point) => {
             // 地面点
-            let bottomPointGraphic = new mars3d.graphic.BillboardEntity({
-              id: item.id + '_bottom',
-              position: [position[0], position[1], point.height],
-              style: {
-                image: '/src/assets/images/flightoperation/mediaLibraryPoint.png',
-                clampToGround: true,
-                scale: 1,
-                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-              },
-              hasEdit: false,
-              show: item.display == 1 ? true : false,
-            });
+            // let bottomPointGraphic = new mars3d.graphic.BillboardEntity({
+            //   id: item.id + '_bottom',
+            //   position: [position[0], position[1], point.height],
+            //   style: {
+            //     image: '/src/assets/images/flightoperation/mediaLibraryPoint.png',
+            //     clampToGround: true,
+            //     scale: 1,
+            //     verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+            //   },
+            //   hasEdit: false,
+            //   show: item.display == 1 ? true : false,
+            // });
             if (index + 1 < props.allImageDataList.length) {
               const afterItem = props.allImageDataList[index + 1];
               let lng = afterItem.lng - item.lng;
@@ -555,7 +555,7 @@
               }
             });
             // 将地面点 添加到图层中
-            graphicLayers.addGraphic(bottomPointGraphic);
+            // graphicLayers.addGraphic(bottomPointGraphic);
             // 将飞行点 添加到图层中
             graphicLayers.addGraphic(flightointGraphic);
             // 地面点到展示图片的线 添加到图层中
@@ -563,10 +563,53 @@
             // 展示图片 添加到图层中
             graphicLayers.addGraphic(imageGraphic);
             // 数据
-            bottomPointGraphicData.push(bottomPointGraphic);
+            // bottomPointGraphicData.push(bottomPointGraphic);
             flightointGraphicData.push(flightointGraphic);
             bottomImagePolylineGraphicData.push(bottomImagePolylineGraphic);
             imageGraphicData.push(imageGraphic);
+
+            // 初始选中
+            if (props.nowShowImageData && props.nowShowImageData.id) {
+              // 飞行点
+              flightointGraphicData?.forEach((graphicLayer) => {
+                if (props.nowShowImageData.id + '_flight' == graphicLayer.options.id) {
+                  graphicLayer.show = true;
+                }
+              });
+              // 地面点到展示图片的线
+              bottomImagePolylineGraphicData?.forEach((graphicLayer) => {
+                if (props.nowShowImageData.id + '_polyline' == graphicLayer.options.id) {
+                  let defaultPosition = graphicLayer.options.defaultPosition;
+                  let surfaceHeight = graphicLayer.options.surfaceHeight;
+                  graphicLayer.positions = [
+                    Cesium.Cartesian3.fromDegrees(
+                      defaultPosition[0],
+                      defaultPosition[1],
+                      surfaceHeight,
+                    ),
+                    Cesium.Cartesian3.fromDegrees(
+                      defaultPosition[0],
+                      defaultPosition[1],
+                      defaultPosition[2] * 2,
+                    ),
+                  ];
+                  graphicLayer.setStyle({
+                    color: '#2d8cf0',
+                  });
+                }
+              });
+              // 展示图片
+              imageGraphicData?.forEach((graphicLayer) => {
+                if (props.nowShowImageData.id + '_image' == graphicLayer.options.id) {
+                  graphicLayer.setStyle({
+                    image: graphicLayer.options.chooseImage,
+                    label: {
+                      show: true,
+                    },
+                  });
+                }
+              });
+            }
           });
         };
       }
diff --git a/src/views/demo/system/mediaLibrary/path/svg.ts b/src/views/demo/system/mediaLibrary/path/svg.ts
index 29c7a8e..63d9e08 100644
--- a/src/views/demo/system/mediaLibrary/path/svg.ts
+++ b/src/views/demo/system/mediaLibrary/path/svg.ts
@@ -22,4 +22,18 @@ height="18"
   d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14L6 17h12l-3.86-5.14z"
   fill="#ffffff"
 ></path>
-</svg>`;
\ No newline at end of file
+</svg>`;
+
+
+export const graffiti_svg = `<svg width="25px" height="25px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="作业区域-新增迭代724-展开" transform="translate(-1692, -817)">
+        <g id="编组-31" transform="translate(1692, 817)">
+            <rect id="矩形" fill="#FFFFFF00" x="0" y="0" width="30" height="30" rx="2"></rect>
+            <g id="paint-brush" transform="translate(5, 6)" fill="currentColor" fill-rule="nonzero">
+                <path d="M20,0.714305923 C20,0.319805655 19.6801943,0 19.2856941,0 C15.3498684,0 11.3113613,4.43851843 9.06844073,7.3778873 C7.44403191,6.88039807 5.67993844,7.18286866 4.31403832,8.1930748 C2.9481382,9.20328093 2.14234655,10.8014718 2.14235192,12.5003537 C2.14235192,15.2575745 0.397659708,16.4942166 0.314621644,16.5513611 C0.0544979202,16.7270112 -0.060485571,17.0518879 0.0312292032,17.352064 C0.122943977,17.6522401 0.39986556,17.8573755 0.713740079,17.8576481 L7.49964635,17.8576481 C9.1985282,17.8576481 10.7967191,17.0518618 11.8069252,15.6859617 C12.8171313,14.3200616 13.1196019,12.5559681 12.6221127,10.9315593 C15.5623745,8.68863867 20,4.65013156 20,0.714305923 Z M7.49964635,16.4290362 L2.37718,16.4290362 C2.97987562,15.572762 3.57096377,14.2789754 3.57096377,12.5003537 C3.57096377,10.3306022 5.32989487,8.57167108 7.49964635,8.57167108 C9.66939782,8.57167108 11.4283289,10.3306022 11.4283289,12.5003537 C11.4283289,14.6701051 9.66939782,16.4290362 7.49964635,16.4290362 Z M10.3943711,7.99576193 C10.7003321,7.59932214 11.0006383,7.22579967 11.2952894,6.87519451 C12.0164936,7.36244905 12.6375509,7.98350636 13.1248055,8.70471055 C12.7736051,8.99876649 12.4000826,9.29907261 12.0042381,9.6056289 C11.58799,8.9608029 11.0391971,8.41201004 10.3943711,7.99576193 Z M14.206979,7.75646944 C13.6677115,6.99555471 13.0035524,6.33139566 12.2426377,5.79212815 C15.080218,2.70900521 17.2204571,1.77415734 18.4838857,1.51432856 C18.2294142,2.77865004 17.2901019,4.91888916 14.206979,7.75646944 L14.206979,7.75646944 Z" id="形状"></path>
+            </g>
+        </g>
+    </g>
+</g>
+</svg>`
\ No newline at end of file
diff --git a/src/views/demo/system/mediaLibrary/preview/index.vue b/src/views/demo/system/mediaLibrary/preview/index.vue
index 434dd33..03e2e37 100644
--- a/src/views/demo/system/mediaLibrary/preview/index.vue
+++ b/src/views/demo/system/mediaLibrary/preview/index.vue
@@ -116,7 +116,7 @@
 <style lang="less" scoped>
   .modal {
     width: 100%;
-    height: 920px;
+    height: 100%;
 
     // 页面不能被选中
     -webkit-user-select: none; /* Safari */
@@ -148,7 +148,7 @@
   }
   .mainBody {
     width: 100%;
-    height: 920px;
+    height: 100%;
     display: flex;
     position: absolute;
     top: 0px;
@@ -156,7 +156,7 @@
 
     .imgOrVideo {
       width: 80%;
-      height: 920px;
+      height: 100%;
       background: #101010;
 
       .imageDiv {
diff --git a/src/views/demo/system/mediaLibrary/preview/preview.ts b/src/views/demo/system/mediaLibrary/preview/preview.ts
index 753e9de..10e9f56 100644
--- a/src/views/demo/system/mediaLibrary/preview/preview.ts
+++ b/src/views/demo/system/mediaLibrary/preview/preview.ts
@@ -2,4 +2,34 @@ export { default as PreviewImage } from './previewImage.vue';
 export { default as PreviewVideo } from './previewVideo.vue';
 export { default as PreviewImageInformation } from './previewImageInformation.vue';
 export { default as PreviewVideoInformation } from './previewVideoInformation.vue';
-export { default as Map } from './map.vue';
\ No newline at end of file
+export { default as Map } from './map.vue';
+
+
+export const graffiti_svg = `<svg width="25px" height="25px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="作业区域-新增迭代724-展开" transform="translate(-1692, -817)">
+        <g id="编组-31" transform="translate(1692, 817)">
+            <rect id="矩形" fill="#FFFFFF00" x="0" y="0" width="30" height="30" rx="2"></rect>
+            <g id="paint-brush" transform="translate(5, 6)" fill="currentColor" fill-rule="nonzero">
+                <path d="M20,0.714305923 C20,0.319805655 19.6801943,0 19.2856941,0 C15.3498684,0 11.3113613,4.43851843 9.06844073,7.3778873 C7.44403191,6.88039807 5.67993844,7.18286866 4.31403832,8.1930748 C2.9481382,9.20328093 2.14234655,10.8014718 2.14235192,12.5003537 C2.14235192,15.2575745 0.397659708,16.4942166 0.314621644,16.5513611 C0.0544979202,16.7270112 -0.060485571,17.0518879 0.0312292032,17.352064 C0.122943977,17.6522401 0.39986556,17.8573755 0.713740079,17.8576481 L7.49964635,17.8576481 C9.1985282,17.8576481 10.7967191,17.0518618 11.8069252,15.6859617 C12.8171313,14.3200616 13.1196019,12.5559681 12.6221127,10.9315593 C15.5623745,8.68863867 20,4.65013156 20,0.714305923 Z M7.49964635,16.4290362 L2.37718,16.4290362 C2.97987562,15.572762 3.57096377,14.2789754 3.57096377,12.5003537 C3.57096377,10.3306022 5.32989487,8.57167108 7.49964635,8.57167108 C9.66939782,8.57167108 11.4283289,10.3306022 11.4283289,12.5003537 C11.4283289,14.6701051 9.66939782,16.4290362 7.49964635,16.4290362 Z M10.3943711,7.99576193 C10.7003321,7.59932214 11.0006383,7.22579967 11.2952894,6.87519451 C12.0164936,7.36244905 12.6375509,7.98350636 13.1248055,8.70471055 C12.7736051,8.99876649 12.4000826,9.29907261 12.0042381,9.6056289 C11.58799,8.9608029 11.0391971,8.41201004 10.3943711,7.99576193 Z M14.206979,7.75646944 C13.6677115,6.99555471 13.0035524,6.33139566 12.2426377,5.79212815 C15.080218,2.70900521 17.2204571,1.77415734 18.4838857,1.51432856 C18.2294142,2.77865004 17.2901019,4.91888916 14.206979,7.75646944 L14.206979,7.75646944 Z" id="形状"></path>
+            </g>
+        </g>
+    </g>
+</g>
+</svg>`
+
+export const otherimage_svg = `<svg width="23px" height="23px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="作业区域-新增迭代724-展开" transform="translate(-1692, -857)">
+        <g id="编组-30" transform="translate(1692, 857)">
+            <rect id="矩形" fill="#FFFFFF00" x="0" y="0" width="30" height="30" rx="2"></rect>
+            <g id="pencil-simple" transform="translate(4.8766, 6)" fill="currentColor">
+                <path d="M19.7015397,4.44403083 L15.680296,0.421887073 C15.4102312,0.151760637 15.0439078,0 14.6619349,0 C14.279962,0 13.9136386,0.151760637 13.6435738,0.421887073 L2.5455531,11.5208078 C2.27427322,11.7899334 2.12222767,12.1565934 2.12344121,12.5387189 L2.12344121,16.5608626 C2.12344121,17.3561613 2.76816548,18.0008856 3.56346417,18.0008856 L7.58560792,18.0008856 C7.96773341,18.0020991 8.33439336,17.8500536 8.60351899,17.5787737 L19.7015397,6.48075298 C19.9716662,6.21068821 20.1234268,5.84436477 20.1234268,5.4623919 C20.1234268,5.08041904 19.9716662,4.71409559 19.7015397,4.44403083 Z M7.58560792,16.5608626 L3.56346417,16.5608626 L3.56346417,12.5387189 L11.4835503,4.61863272 L15.5056941,8.64077648 L7.58560792,16.5608626 Z M16.5236051,7.62196539 L12.5014614,3.60072165 L14.6614849,1.44069816 L18.6836286,5.4619419 L16.5236051,7.62196539 Z" id="形状" fill-rule="nonzero"></path>
+                <line x1="1.123434" y1="17.5" x2="18.876566" y2="17.5" id="路径-6" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"></line>
+                <line x1="-0.876566" y1="17.5" x2="1.876566" y2="17.5" id="路径-6" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" transform="translate(0.5, 17.5) scale(-1, -1) rotate(90) translate(-0.5, -17.5)"></line>
+                <line x1="17.623434" y1="17.5" x2="20.376566" y2="17.5" id="路径-6" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" transform="translate(19, 17.5) scale(-1, -1) rotate(90) translate(-19, -17.5)"></line>
+            </g>
+        </g>
+    </g>
+</g>
+</svg>`;
\ No newline at end of file
diff --git a/src/views/demo/system/mediaLibrary/preview/previewImage.vue b/src/views/demo/system/mediaLibrary/preview/previewImage.vue
index 9d99071..6bb875a 100644
--- a/src/views/demo/system/mediaLibrary/preview/previewImage.vue
+++ b/src/views/demo/system/mediaLibrary/preview/previewImage.vue
@@ -446,19 +446,26 @@
           <template #title>
             <span>{{ hideOrShowGraffitiFlag ? '点击隐藏涂鸦信息' : '点击显示涂鸦信息' }}</span>
           </template>
-          <EyeOutlined @click="hideOrShowGraffiti(false)" v-if="hideOrShowGraffitiFlag" />
-          <EyeInvisibleOutlined @click="hideOrShowGraffiti(true)" v-if="!hideOrShowGraffitiFlag" />
-          <div
-            style="
-              position: absolute;
-              bottom: 0px;
-              right: 0px;
-              font-size: 10px;
-              color: #000000;
-              pointer-events: none;
-            "
-          >
-            涂鸦
+          <EyeOutlined
+            @click="hideOrShowGraffiti(false)"
+            v-if="hideOrShowGraffitiFlag"
+            style="color: #2d8cf0"
+          />
+          <EyeInvisibleOutlined
+            @click="hideOrShowGraffiti(true)"
+            v-if="!hideOrShowGraffitiFlag"
+            style="color: #595959"
+          />
+          <div style="position: absolute; bottom: -12px; right: -4px; pointer-events: none">
+            <div
+              v-html="
+                `${
+                  hideOrShowGraffitiFlag
+                    ? graffiti_svg.replaceAll('currentColor', '#2d8cf0')
+                    : graffiti_svg.replaceAll('currentColor', '#595959')
+                }`
+              "
+            />
           </div>
         </a-tooltip>
       </div>
@@ -473,19 +480,26 @@
               }}
             </span>
           </template>
-          <EyeOutlined @click="hideOrShowTextbox(false)" v-if="hideOrShowTextboxFlag" />
-          <EyeInvisibleOutlined @click="hideOrShowTextbox(true)" v-if="!hideOrShowTextboxFlag" />
-          <div
-            style="
-              position: absolute;
-              bottom: 0px;
-              right: 0px;
-              font-size: 10px;
-              color: #000000;
-              pointer-events: none;
-            "
-          >
-            标注
+          <EyeOutlined
+            @click="hideOrShowTextbox(false)"
+            v-if="hideOrShowTextboxFlag"
+            style="color: #2d8cf0"
+          />
+          <EyeInvisibleOutlined
+            @click="hideOrShowTextbox(true)"
+            v-if="!hideOrShowTextboxFlag"
+            style="color: #595959"
+          />
+          <div style="position: absolute; bottom: -10px; right: -3px; pointer-events: none">
+            <div
+              v-html="
+                `${
+                  hideOrShowTextboxFlag
+                    ? otherimage_svg.replaceAll('currentColor', '#2d8cf0')
+                    : otherimage_svg.replaceAll('currentColor', '#595959')
+                }`
+              "
+            />
           </div>
         </a-tooltip>
       </div>
@@ -523,6 +537,7 @@
     CompressOutlined,
   } from '@ant-design/icons-vue';
   import { UpdatePicStatus, Deletepic } from '@/api/demo/mediaLibrary';
+  import { graffiti_svg, otherimage_svg } from './preview';
   import { useMessage } from '@/hooks/web/useMessage';
   import { cloneDeep } from 'lodash-es';
   import { getAppEnvConfig } from '@/utils/env';
@@ -608,8 +623,8 @@
       props.nowPreviewRecord.width > 1040 &&
       props.nowPreviewRecord.height > 800
     ) {
-      imageHeight.value = 800;
-      imageWidth.value = (800 / props.nowPreviewRecord.height) * props.nowPreviewRecord.width;
+      imageWidth.value = 1040;
+      imageHeight.value = (1040 / props.nowPreviewRecord.width) * props.nowPreviewRecord.height;
     } else {
       imageHeight.value = 800;
       imageWidth.value = 1040;
@@ -627,7 +642,7 @@
       props.nowPreviewRecord.width > 1040 &&
       props.nowPreviewRecord.height > 800
     ) {
-      scale.value = props.nowPreviewRecord.height / 800;
+      scale.value = props.nowPreviewRecord.width / 1040;
       // imageWidth.value = props.nowPreviewRecord.width;
       // imageHeight.value = props.nowPreviewRecord.height;
     } else {
diff --git a/src/views/demo/system/mediaLibrary/preview/previewImageInformation.vue b/src/views/demo/system/mediaLibrary/preview/previewImageInformation.vue
index 2bee2e3..1bd2f01 100644
--- a/src/views/demo/system/mediaLibrary/preview/previewImageInformation.vue
+++ b/src/views/demo/system/mediaLibrary/preview/previewImageInformation.vue
@@ -65,7 +65,7 @@
           <span class="infotitle">拍摄负载</span>
         </a-col>
         <a-col :span="17">
-          <span class="infovalue">{{ props.nowPreviewRecord.photographNumber }} </span>
+          <span class="infovalue">{{ props.nowPreviewRecord.payloadName }} </span>
         </a-col>
         <a-col :span="7">
           <span class="infotitle">拍摄人员</span>

From d7cd5b11ce1e587763f1ab061fc36d4d49b43c68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=BB=95=E5=B5=A9?= <17854119262@163.com>
Date: Wed, 30 Jul 2025 16:17:21 +0800
Subject: [PATCH 12/13] =?UTF-8?q?=E5=AA=92=E4=BD=93=E5=BA=93-=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E6=B6=82=E9=B8=A6=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/demo/system/mediaLibrary/index.vue  |   4 +-
 .../demo/system/mediaLibrary/path/index.vue   |  10 +-
 .../mediaLibrary/path/pathImageInfo.vue       | 142 ++++++++++--------
 .../mediaLibrary/preview/previewImage.vue     | 140 +++++++++--------
 4 files changed, 160 insertions(+), 136 deletions(-)

diff --git a/src/views/demo/system/mediaLibrary/index.vue b/src/views/demo/system/mediaLibrary/index.vue
index c3dc676..92ed6d4 100644
--- a/src/views/demo/system/mediaLibrary/index.vue
+++ b/src/views/demo/system/mediaLibrary/index.vue
@@ -281,6 +281,7 @@
       :maskClosable="false"
     >
       <Path
+        :pathDivShow="pathDivShow"
         :allImageDataList="allImageDataList"
         :nowShowImageData="nowShowImageData"
         :floderName="floderName"
@@ -306,6 +307,7 @@
 
     <Path
       v-if="pathDivShow"
+      :pathDivShow="pathDivShow"
       :allImageDataList="allImageDataList"
       :nowShowImageData="nowShowImageData"
       :floderName="floderName"
@@ -854,7 +856,7 @@
   // 刷新
   function handleSuccessPath(value) {
     setTimeout(() => {
-      pathDivShow.value ? openPathModal(value) : showPathDiv(value);
+      pathDivShow.value ? showPathDiv(value) : openPathModal(value);
       // openPathModal(value);
       reload();
     }, 500);
diff --git a/src/views/demo/system/mediaLibrary/path/index.vue b/src/views/demo/system/mediaLibrary/path/index.vue
index 9f645d4..a9f7aba 100644
--- a/src/views/demo/system/mediaLibrary/path/index.vue
+++ b/src/views/demo/system/mediaLibrary/path/index.vue
@@ -1,5 +1,10 @@
 <template>
-  <div class="pathModal">
+  <div
+    class="pathModal"
+    :style="{
+      height: props.pathDivShow ? '100%' : '100vh',
+    }"
+  >
     <!-- 左侧目录 -->
     <div
       class="leftMenuDiv"
@@ -51,7 +56,7 @@
   import { useMessage } from '@/hooks/web/useMessage';
   const { createMessage, createConfirm } = useMessage();
 
-  const props = defineProps(['allImageDataList', 'nowShowImageData', 'floderName']);
+  const props = defineProps(['allImageDataList', 'nowShowImageData', 'floderName', 'pathDivShow']);
   const emits = defineEmits(['closePathModal', 'handleSuccessPath']);
   // 地图宽度
   const dynamicWidth = computed(() => {
@@ -139,7 +144,6 @@
     position: relative;
     display: flex;
     width: 100%;
-    height: 100%;
 
     .leftMenuDiv {
       position: relative;
diff --git a/src/views/demo/system/mediaLibrary/path/pathImageInfo.vue b/src/views/demo/system/mediaLibrary/path/pathImageInfo.vue
index 3eb22b4..9fa3607 100644
--- a/src/views/demo/system/mediaLibrary/path/pathImageInfo.vue
+++ b/src/views/demo/system/mediaLibrary/path/pathImageInfo.vue
@@ -105,7 +105,7 @@
             v-if="!hideOrShowGraffitiFlag"
             style="color: #595959"
           />
-          <div style="position: absolute; bottom: -6px; right: -4px; pointer-events: none">
+          <div style="position: absolute; bottom: -12px; right: -5px; pointer-events: none">
             <div
               v-html="
                 `${
@@ -769,7 +769,7 @@
   function refresh() {
     scale.value = 0.9;
     rotationAngle.value = 0;
-    graffitiFlag.value = false;
+    // graffitiFlag.value = false;
     getImageWidthAndHeight();
     // 复位
     const dragDocument: any = document.querySelector('.dragModal');
@@ -777,6 +777,7 @@
       dragDocument.style.left = 0 + 'px';
       dragDocument.style.top = 0 + 'px';
     }
+    document.body.style.cursor = 'default';
   }
   // 移动到中心位置
   function handlerLocation() {
@@ -809,6 +810,7 @@
   // 选择当前展示图片-----------------------------------------------
   function setNowShowImageData(value) {
     emits('setNowShowImageData', value);
+    graffitiFlag.value = false;
     refresh();
   }
 
@@ -817,6 +819,7 @@
   const graffitiFlag = ref(false);
   // 设置鼠标格式
   function setGraffiti() {
+    refresh();
     graffitiFlag.value = !graffitiFlag.value;
     if (graffitiFlag.value) {
       document.body.style.cursor = 'crosshair';
@@ -960,7 +963,23 @@
 
   // 鼠标按下
   function onMouseDown(event) {
-    if (graffitiFlag.value || graffitis.value.some((item) => item.status != 'success')) {
+    if (!graffitiFlag.value) {
+      {
+        // 拖动
+        const dragDocument: any = document.querySelector('.dragModal');
+        isDragging.value = true;
+        initialMouseX = event.clientX;
+        initialMouseY = event.clientY;
+        initialDocumentX = dragDocument.offsetLeft;
+        initialDocumentY = dragDocument.offsetTop;
+        dragDocument.style.cursor = 'grabbing';
+        window.addEventListener('mousemove', onMouseMove);
+        window.addEventListener('mouseup', onMouseUp);
+      }
+    } else if (
+      graffitiFlag.value &&
+      (graffitis.value.length == 0 || !graffitis.value.some((item) => item.status != 'success'))
+    ) {
       // 涂鸦
       if (nowGraffiti.value != -1) return;
       if (graffitis.value.findIndex((item) => item.status == 'mouse') != -1) return;
@@ -980,75 +999,66 @@
         status: 'edit',
       });
       graffitisClone.value = cloneDeep(graffitis.value);
-      window.addEventListener('mousemove', onMouseMove);
-      window.addEventListener('mouseup', onMouseUp);
+      window.addEventListener('mousemove', onMouseMoveGraffit);
+      window.addEventListener('mouseup', onMouseUpGraffit);
+    }
+  }
+
+  // 鼠标移动-涂鸦
+  function onMouseMoveGraffit(event) {
+    // 涂鸦
+    const rect = mouseCanvasRef.value.getBoundingClientRect();
+    if (!isDragging.value) return;
+    endX = event.x - rect.x;
+    endY = event.y - rect.y;
+    if (endX < 0 && endY < 0) {
+      endX = startX;
+      endY = startY;
+    }
+    setMouseData();
+  }
+
+  // 鼠标松开-涂鸦
+  function onMouseUpGraffit(event) {
+    // 涂鸦
+    if (!isDragging.value) return;
+    const rect = mouseCanvasRef.value.getBoundingClientRect();
+    endX = event.x - rect.x;
+    endY = event.y - rect.y;
+    if (endX < 0 && endY < 0) {
+      endX = startX;
+      endY = startY;
+    }
+    isDragging.value = false;
+    if (event.x > rect.right || event.y > rect.bottom) {
+      graffitis.value.splice(graffitis.value.length - 1, 1);
+      nowGraffiti.value = -1;
     } else {
-      // 拖动
-      const dragDocument: any = document.querySelector('.dragModal');
-      isDragging.value = true;
-      initialMouseX = event.clientX;
-      initialMouseY = event.clientY;
-      initialDocumentX = dragDocument.offsetLeft;
-      initialDocumentY = dragDocument.offsetTop;
-      dragDocument.style.cursor = 'grabbing';
-      window.addEventListener('mousemove', onMouseMove);
-      window.addEventListener('mouseup', onMouseUp);
+      setMouseData();
+      nowGraffiti.value = graffitis.value.length - 1;
     }
+    window.removeEventListener('mousemove', onMouseMoveGraffit);
+    window.removeEventListener('mouseup', onMouseUpGraffit);
   }
+
   // 鼠标移动
   function onMouseMove(event) {
-    if (graffitiFlag.value || graffitis.value.some((item) => item.status != 'success')) {
-      // 涂鸦
-      const rect = mouseCanvasRef.value.getBoundingClientRect();
-      if (!isDragging.value) return;
-      endX = event.x - rect.x;
-      endY = event.y - rect.y;
-      if (endX < 0 && endY < 0) {
-        endX = startX;
-        endY = startY;
-      }
-      setMouseData();
-    } else {
-      // 拖动
-      const dragDocument: any = document.querySelector('.dragModal');
-      if (isDragging.value) {
-        const deltaX = event.clientX - initialMouseX;
-        const deltaY = event.clientY - initialMouseY;
-        dragDocument.style.left = initialDocumentX + deltaX + 'px';
-        dragDocument.style.top = initialDocumentY + deltaY + 'px';
-      }
+    // 拖动
+    const dragDocument: any = document.querySelector('.dragModal');
+    if (isDragging.value) {
+      const deltaX = event.clientX - initialMouseX;
+      const deltaY = event.clientY - initialMouseY;
+      dragDocument.style.left = initialDocumentX + deltaX + 'px';
+      dragDocument.style.top = initialDocumentY + deltaY + 'px';
     }
   }
   // 鼠标松开
   function onMouseUp(event) {
-    if (graffitiFlag.value || graffitis.value.some((item) => item.status != 'success')) {
-      // 涂鸦
-      if (!isDragging.value) return;
-      const rect = mouseCanvasRef.value.getBoundingClientRect();
-
-      endX = event.x - rect.x;
-      endY = event.y - rect.y;
-      if (endX < 0 && endY < 0) {
-        endX = startX;
-        endY = startY;
-      }
-      isDragging.value = false;
-      if (event.x > rect.right || event.y > rect.bottom) {
-        graffitis.value.splice(graffitis.value.length - 1, 1);
-        nowGraffiti.value = -1;
-      } else {
-        setMouseData();
-        nowGraffiti.value = graffitis.value.length - 1;
-      }
-      window.removeEventListener('mousemove', onMouseMove);
-      window.removeEventListener('mouseup', onMouseUp);
-    } else {
-      // 拖动
-      const dragDocument: any = document.querySelector('.dragModal');
-      isDragging.value = false;
-      if (dragDocument) {
-        dragDocument.style.cursor = 'default';
-      }
+    // 拖动
+    const dragDocument: any = document.querySelector('.dragModal');
+    isDragging.value = false;
+    if (dragDocument) {
+      dragDocument.style.cursor = 'default';
     }
   }
   // 鼠标滚轮
@@ -1083,10 +1093,12 @@
   // 鼠标聚焦
   function mouseenter(rect, type) {
     if (graffitiFlag.value) {
+      // 鼠标聚焦状态
       if (rect.status != 'edit') {
         rect.status = 'mouse';
         document.body.style.cursor = 'pointer';
       }
+      // 编辑状态
       if (rect.status == 'edit') {
         if (type == 'top' || type == 'bottom') {
           document.body.style.cursor = 'ns-resize';
@@ -1110,10 +1122,8 @@
         if (rect.status == 'mouse') {
           rect.status = 'success';
         }
-        if (graffitiFlag.value) {
+        if (rect.status == 'edit') {
           document.body.style.cursor = 'crosshair';
-        } else {
-          document.body.style.cursor = 'pointer';
         }
       }
     }
diff --git a/src/views/demo/system/mediaLibrary/preview/previewImage.vue b/src/views/demo/system/mediaLibrary/preview/previewImage.vue
index 6bb875a..fec4b64 100644
--- a/src/views/demo/system/mediaLibrary/preview/previewImage.vue
+++ b/src/views/demo/system/mediaLibrary/preview/previewImage.vue
@@ -580,6 +580,7 @@
   // 选择
   function chooseNowPreviewRecord(value) {
     emits('chooseNowPreviewRecord', value);
+    graffitiFlag.value = false;
     refresh();
   }
   // 刷新表格
@@ -656,7 +657,7 @@
   function refresh() {
     scale.value = 1;
     rotationAngle.value = 0;
-    graffitiFlag.value = false;
+    // graffitiFlag.value = false;
     getImageWidthAndHeight();
     // 复位
     const dragDocument: any = document.querySelector('.dragModal');
@@ -664,6 +665,7 @@
       dragDocument.style.left = 0 + 'px';
       dragDocument.style.top = 0 + 'px';
     }
+    document.body.style.cursor = 'default';
   }
 
   // 删除
@@ -764,6 +766,7 @@
   const nowMouseGraffiti = ref(0);
   // 设置鼠标格式
   function setGraffiti() {
+    refresh();
     graffitiFlag.value = !graffitiFlag.value;
     if (graffitiFlag.value) {
       document.body.style.cursor = 'crosshair';
@@ -842,7 +845,21 @@
   const mouseCanvasRef = ref();
   // 鼠标按下
   function onMouseDown(event) {
-    if (graffitiFlag.value || graffitis.value?.some((item) => item.status != 'success')) {
+    if (!graffitiFlag.value) {
+      // 拖动
+      const dragDocument: any = document.querySelector('.dragModal');
+      isDragging.value = true;
+      initialMouseX = event.clientX;
+      initialMouseY = event.clientY;
+      initialDocumentX = dragDocument.offsetLeft;
+      initialDocumentY = dragDocument.offsetTop;
+      dragDocument.style.cursor = 'grabbing';
+      window.addEventListener('mousemove', onMouseMove);
+      window.addEventListener('mouseup', onMouseUp);
+    } else if (
+      graffitiFlag.value &&
+      (graffitis.value.length == 0 || !graffitis.value?.some((item) => item.status != 'success'))
+    ) {
       // 涂鸦
       if (nowGraffiti.value != -1) return;
       if (graffitis.value.findIndex((item) => item.status == 'mouse') != -1) return;
@@ -862,74 +879,65 @@
         status: 'edit',
       });
       graffitisClone.value = cloneDeep(graffitis.value);
-      window.addEventListener('mousemove', onMouseMove);
-      window.addEventListener('mouseup', onMouseUp);
+      window.addEventListener('mousemove', onMouseMoveGraffit);
+      window.addEventListener('mouseup', onMouseUpGraffit);
+    }
+  }
+
+  // 鼠标移动-涂鸦
+  function onMouseMoveGraffit(event) {
+    // 涂鸦
+    const rect = mouseCanvasRef.value.getBoundingClientRect();
+    if (!isDragging.value) return;
+    endX = event.x - rect.x;
+    endY = event.y - rect.y;
+    if (endX < 0 && endY < 0) {
+      endX = startX;
+      endY = startY;
+    }
+    setMouseData();
+  }
+  // 鼠标松开-涂鸦
+  function onMouseUpGraffit(event) {
+    // 涂鸦
+    if (!isDragging.value) return;
+    const rect = mouseCanvasRef.value.getBoundingClientRect();
+    endX = event.x - rect.x;
+    endY = event.y - rect.y;
+    if (endX < 0 && endY < 0) {
+      endX = startX;
+      endY = startY;
+    }
+    isDragging.value = false;
+    if (event.x > rect.right || event.y > rect.bottom) {
+      graffitis.value.splice(graffitis.value.length - 1, 1);
+      nowGraffiti.value = -1;
     } else {
-      // 拖动
-      const dragDocument: any = document.querySelector('.dragModal');
-      isDragging.value = true;
-      initialMouseX = event.clientX;
-      initialMouseY = event.clientY;
-      initialDocumentX = dragDocument.offsetLeft;
-      initialDocumentY = dragDocument.offsetTop;
-      dragDocument.style.cursor = 'grabbing';
-      window.addEventListener('mousemove', onMouseMove);
-      window.addEventListener('mouseup', onMouseUp);
+      setMouseData();
+      nowGraffiti.value = graffitis.value.length - 1;
     }
+    window.removeEventListener('mousemove', onMouseMoveGraffit);
+    window.removeEventListener('mouseup', onMouseUpGraffit);
   }
-  // 鼠标移动
+
+  // 鼠标移动-拖动
   function onMouseMove(event) {
-    if (graffitiFlag.value || graffitis.value?.some((item) => item.status != 'success')) {
-      // 涂鸦
-      const rect = mouseCanvasRef.value.getBoundingClientRect();
-      if (!isDragging.value) return;
-      endX = event.x - rect.x;
-      endY = event.y - rect.y;
-      if (endX < 0 && endY < 0) {
-        endX = startX;
-        endY = startY;
-      }
-      setMouseData();
-    } else {
-      // 拖动
-      const dragDocument: any = document.querySelector('.dragModal');
-      if (isDragging.value) {
-        const deltaX = event.clientX - initialMouseX;
-        const deltaY = event.clientY - initialMouseY;
-        dragDocument.style.left = initialDocumentX + deltaX + 'px';
-        dragDocument.style.top = initialDocumentY + deltaY + 'px';
-      }
+    // 拖动
+    const dragDocument: any = document.querySelector('.dragModal');
+    if (isDragging.value) {
+      const deltaX = event.clientX - initialMouseX;
+      const deltaY = event.clientY - initialMouseY;
+      dragDocument.style.left = initialDocumentX + deltaX + 'px';
+      dragDocument.style.top = initialDocumentY + deltaY + 'px';
     }
   }
-  // 鼠标松开
+  // 鼠标松开-拖动
   function onMouseUp(event) {
-    if (graffitiFlag.value || graffitis.value?.some((item) => item.status != 'success')) {
-      // 涂鸦
-      if (!isDragging.value) return;
-      const rect = mouseCanvasRef.value.getBoundingClientRect();
-      endX = event.x - rect.x;
-      endY = event.y - rect.y;
-      if (endX < 0 && endY < 0) {
-        endX = startX;
-        endY = startY;
-      }
-      isDragging.value = false;
-      if (event.x > rect.right || event.y > rect.bottom) {
-        graffitis.value.splice(graffitis.value.length - 1, 1);
-        nowGraffiti.value = -1;
-      } else {
-        setMouseData();
-        nowGraffiti.value = graffitis.value.length - 1;
-      }
-      window.removeEventListener('mousemove', onMouseMove);
-      window.removeEventListener('mouseup', onMouseUp);
-    } else {
-      // 拖动
-      const dragDocument: any = document.querySelector('.dragModal');
-      isDragging.value = false;
-      if (dragDocument) {
-        dragDocument.style.cursor = 'default';
-      }
+    // 拖动
+    const dragDocument: any = document.querySelector('.dragModal');
+    isDragging.value = false;
+    if (dragDocument) {
+      dragDocument.style.cursor = 'default';
     }
   }
 
@@ -960,10 +968,12 @@
   // 鼠标聚焦
   function mouseenter(rect, type) {
     if (graffitiFlag.value) {
+      // 鼠标聚焦状态
       if (rect.status != 'edit') {
         rect.status = 'mouse';
         document.body.style.cursor = 'pointer';
       }
+      // 编辑状态
       if (rect.status == 'edit') {
         if (type == 'top' || type == 'bottom') {
           document.body.style.cursor = 'ns-resize';
@@ -987,10 +997,8 @@
         if (rect.status == 'mouse') {
           rect.status = 'success';
         }
-        if (graffitiFlag.value) {
+        if (rect.status == 'edit') {
           document.body.style.cursor = 'crosshair';
-        } else {
-          document.body.style.cursor = 'pointer';
         }
       }
     }

From 1f7852f372c9f3405c9477cbeb267110de0c7b10 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E5=A6=8D?= <1455167345@qq.com>
Date: Thu, 31 Jul 2025 11:24:21 +0800
Subject: [PATCH 13/13] =?UTF-8?q?=E8=8F=9C=E5=8D=95=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/store/modules/permission.ts               | 158 +++++++++---------
 src/views/demo/system/role/ModulesModal.vue   |  14 +-
 .../flightoperation/src/UAVInformation.vue    |  18 +-
 3 files changed, 90 insertions(+), 100 deletions(-)

diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts
index 97c0807..a5e46d3 100644
--- a/src/store/modules/permission.ts
+++ b/src/store/modules/permission.ts
@@ -133,32 +133,26 @@ export const usePermissionStore = defineStore({
 
       const normalizeMenu = (data) => {
         let path = '';
-        if (data.item.url.indexOf('@') > 0) {
-          path = data.item.url.replace('@', '/');
+        if (data.url.indexOf('@') > 0) {
+          path = data.url.replace('@', '/');
         } else {
           path =
-            data.item.url ||
-            '/formCallPage?id=' +
-              data.item.id +
-              '&name=' +
-              data.item.name +
-              '&code=' +
-              data.item.code;
+            data.url || '/formCallPage?id=' + data.id + '&name=' + data.name + '&code=' + data.code;
         }
         const newPath = {
-          orderNo: data.item.sortNo,
-          icon: data.item.iconName,
-          title: data.item.name,
+          orderNo: data.sortNo,
+          icon: data.iconName,
+          title: data.name,
           meta: {
-            orderNo: data.item.sortNo,
-            icon: data.item.iconName,
-            title: data.item.name,
-            elements: (data.item && data.item.elements) || '',
+            orderNo: data.sortNo,
+            icon: data.iconName,
+            title: data.name,
+            elements: (data && data.elements) || '',
           },
-          name: data.item.name,
-          hideMenu: data.item.status == 1 ? false : true,
+          name: data.name,
+          hideMenu: data.status == 1 ? false : true,
           path: path,
-          id: data.item.id || '',
+          id: data.id || '',
           children: [],
         };
         if (data.children && data.children.length > 0) {
@@ -172,56 +166,56 @@ export const usePermissionStore = defineStore({
         const modules = import.meta.glob('../../views/**/**/**/index.vue');
         childData.forEach((element) => {
           // 菜单里配置带参数，但没有单独的主路由，先注册主路由
-          if (element.item.status == 1 && element.item.url.indexOf('@') > 0) {
-            if (router.hasRoute(element.item.code)) {
-              const path = element.item.url.substring(0, element.item.url.indexOf('@'));
-              router.addRoute(element.item.code, {
+          if (element.status == 1 && element.url.indexOf('@') > 0) {
+            if (router.hasRoute(element.code)) {
+              const path = element.url.substring(0, element.url.indexOf('@'));
+              router.addRoute(element.code, {
                 path: path + '/:id',
-                name: element.item.url.replaceAll('/', ''),
+                name: element.url.replaceAll('/', ''),
                 meta: {
-                  title: element.item.name,
-                  icon: element.item.iconName,
-                  elements: element.item.elements,
+                  title: element.name,
+                  icon: element.iconName,
+                  elements: element.elements,
                 },
                 component: modules['../../views/demo' + path + '/index.vue'],
               });
             } else {
-              const path = element.item.url.substring(0, element.item.url.indexOf('@'));
+              const path = element.url.substring(0, element.url.indexOf('@'));
               router.addRoute('Root', {
                 path: path,
-                name: element.item.code,
+                name: element.code,
                 meta: {
-                  title: element.item.name,
-                  icon: element.item.iconName,
+                  title: element.name,
+                  icon: element.iconName,
                   hideChildrenInMenu: true,
-                  elements: element.item.elements,
+                  elements: element.elements,
                 },
                 component: LAYOUT,
                 children: [
                   {
                     path: path + '/:id',
-                    name: element.item.url.replaceAll('/', ''),
+                    name: element.url.replaceAll('/', ''),
                     meta: {
-                      title: element.item.name,
-                      icon: element.item.iconName,
-                      elements: element.item.elements,
+                      title: element.name,
+                      icon: element.iconName,
+                      elements: element.elements,
                     },
                     component: modules['../../views/demo' + path + '/index.vue'],
                   },
                 ],
               });
             }
-          } else if (element.item.code && element.item.status == 1) {
-            router.addRoute(element.item.code, {
-              path: element.item.url,
-              name: element.item.url.replaceAll('/', ''),
+          } else if (element.code && element.status == 1) {
+            router.addRoute(element.code, {
+              path: element.url,
+              name: element.url.replaceAll('/', ''),
               meta: {
-                title: element.item.name,
-                icon: element.item.iconName,
-                elements: element.item.elements,
+                title: element.name,
+                icon: element.iconName,
+                elements: element.elements,
               },
-              // component: () => import('../../views/demo' + element.item.url + '/index.vue')
-              component: modules['../../views/demo' + element.item.url + '/index.vue'],
+              // component: () => import('../../views/demo' + element.url + '/index.vue')
+              component: modules['../../views/demo' + element.url + '/index.vue'],
             });
           }
           if (element.children && element.children.length > 0) {
@@ -232,43 +226,43 @@ export const usePermissionStore = defineStore({
       // 注册路由
       const registeredRoute = (data) => {
         const modules = import.meta.glob('../../views/**/**/**/index.vue');
-        if (data.item.url.split('/')[1] == 'map') {
+        if (data.url.split('/')[1] == 'map') {
           // 大屏的情况下不继承layout
           router.addRoute('Root', {
-            path: data.item.url,
-            name: data.item.code,
+            path: data.url,
+            name: data.code,
             meta: {
-              title: data.item.name,
-              icon: data.item.iconName,
-              elements: data.item.elements,
+              title: data.name,
+              icon: data.iconName,
+              elements: data.elements,
             },
-            component: modules['../../views' + data.item.url + '/index.vue'],
+            component: modules['../../views' + data.url + '/index.vue'],
           });
         } else {
           // 正常菜单
-          if (data.children.length == 0 && data.item.status == 1) {
+          if (data.children.length == 0 && data.status == 1) {
             // 没有子菜单
-            if (data.item.url.indexOf('@') > 0) {
+            if (data.url.indexOf('@') > 0) {
               //给带参数的路由先注册主路由
-              const path = data.item.url.substring(0, data.item.url.indexOf('@'));
+              const path = data.url.substring(0, data.url.indexOf('@'));
               router.addRoute('Root', {
                 path: path,
-                name: data.item.code,
+                name: data.code,
                 meta: {
-                  title: data.item.name,
-                  icon: data.item.iconName,
+                  title: data.name,
+                  icon: data.iconName,
                   hideChildrenInMenu: true,
-                  elements: data.item.elements,
+                  elements: data.elements,
                 },
                 component: LAYOUT,
                 children: [
                   {
                     path: path + '/:id',
-                    name: data.item.url.replaceAll('/', ''),
+                    name: data.url.replaceAll('/', ''),
                     meta: {
-                      title: data.item.name,
-                      icon: data.item.iconName,
-                      elements: data.item.elements,
+                      title: data.name,
+                      icon: data.iconName,
+                      elements: data.elements,
                     },
                     component: modules['../../views/demo' + path + '/index.vue'],
                   },
@@ -276,46 +270,44 @@ export const usePermissionStore = defineStore({
               });
             } else {
               router.addRoute('Root', {
-                path: data.item.url,
-                name: data.item.code,
+                path: data.url,
+                name: data.code,
                 meta: {
-                  title: data.item.name,
-                  icon: data.item.iconName,
+                  title: data.name,
+                  icon: data.iconName,
                   hideChildrenInMenu: true,
-                  elements: data.item.elements,
+                  elements: data.elements,
                 },
                 component: LAYOUT,
                 children: [
                   {
-                    path: data.item.url,
-                    name: data.item.url.replaceAll('/', ''),
+                    path: data.url,
+                    name: data.url.replaceAll('/', ''),
                     meta: {
-                      title: data.item.name,
-                      icon: data.item.iconName,
-                      elements: data.item.elements,
+                      title: data.name,
+                      icon: data.iconName,
+                      elements: data.elements,
                     },
-                    component: modules['../../views/demo' + data.item.url + '/index.vue'],
+                    component: modules['../../views/demo' + data.url + '/index.vue'],
                   },
                 ],
               });
             }
           } else {
             // 有子菜单
-            if (data.item.status == 0) {
+            if (data.status == 0) {
               return;
             }
             router.addRoute('Root', {
-              path: data.item.url,
-              name: data.item.code,
+              path: data.url,
+              name: data.code,
               meta: {
-                title: data.item.name,
-                icon: data.item.iconName,
-                elements: data.item.elements,
+                title: data.name,
+                icon: data.iconName,
+                elements: data.elements,
               },
               component:
-                data.item.parentId == 0
-                  ? LAYOUT
-                  : modules['../../views/demo' + data.item.url + '/index.vue'],
+                data.parentId == 0 ? LAYOUT : modules['../../views/demo' + data.url + '/index.vue'],
             });
             if (data.children && data.children.length > 0) {
               childRoute(data.children);
diff --git a/src/views/demo/system/role/ModulesModal.vue b/src/views/demo/system/role/ModulesModal.vue
index 79e3dc0..12fb4d4 100644
--- a/src/views/demo/system/role/ModulesModal.vue
+++ b/src/views/demo/system/role/ModulesModal.vue
@@ -65,19 +65,19 @@
   }
   function treeIterator(tree) {
     tree.forEach((node) => {
-      node.name = node.item.name;
-      node.id = node.item.id;
-      node.elements = node.item.elements;
+      node.name = node.name;
+      node.id = node.id;
+      node.elements = node.elements;
       node.children && treeIterator(node.children);
     });
   }
   function btnIterator(moduleId, tree) {
     tree.forEach((node) => {
-      if (moduleId == node.item.id) {
+      if (moduleId == node.id) {
         btnData.value.push({
-          name: node.item.name,
-          id: node.item.id,
-          elements: node.item.elements,
+          name: node.name,
+          id: node.id,
+          elements: node.elements,
           disabled: true,
         });
       }
diff --git a/src/views/demo/workmanagement/flightoperation/src/UAVInformation.vue b/src/views/demo/workmanagement/flightoperation/src/UAVInformation.vue
index ba88f44..11ab567 100644
--- a/src/views/demo/workmanagement/flightoperation/src/UAVInformation.vue
+++ b/src/views/demo/workmanagement/flightoperation/src/UAVInformation.vue
@@ -14,16 +14,12 @@
         {{ time }}
         <!-- <span>临近或已接近夜晚</span> -->
       </div>
-      <div class="content-item">
+      <!-- <div class="content-item">
         <div class="item-div" title="飞行器上 Dongle 数量">
           <img src="@/assets/images/flightoperation/project.png" alt="" />
           {{ uavInformation.wireless_link ? uavInformation.wireless_link.dongle_number : 0 }}
         </div>
         <a-divider type="vertical" style="border-color: #4e5778" />
-        <!-- <div class="item-div">
-          <img src="@/assets/images/flightoperation/arrow.png" alt="" />
-          0%
-        </div> -->
         <div class="item-div" title="电量百分比">
           <img src="@/assets/images/flightoperation/electricity.png" alt="" />
           {{
@@ -32,16 +28,17 @@
               : 0
           }}
         </div>
-      </div>
+      </div> -->
       <div class="content-item">
         <div class="item-div" title="SDR 链路连接状态">
           <img src="@/assets/images/flightoperation/sdr.png" alt="" />
           <!-- sdr_link_state -->
           <template
             v-if="uavInformation.wireless_link && uavInformation.wireless_link.sdr_link_state == 1"
-            >连接</template
           >
-          <template v-else>断开</template>
+            连接</template
+          >
+          <template v-else> 断开</template>
         </div>
         <a-divider type="vertical" style="border-color: #4e5778" />
         <div class="item-div" title="4G 链路连接状态">
@@ -50,9 +47,10 @@
             v-if="
               uavInformation.wireless_link && uavInformation.wireless_link['4g_link_state'] == 1
             "
-            >连接</template
           >
-          <template v-else>断开</template>
+            连接</template
+          >
+          <template v-else> 断开</template>
         </div>
       </div>
       <!-- sdr_freq_band sdr_quality 4g_freq_band 4g_quality -->