媒体库-展示图片、视频、地图图片路径-滑动条跟随图片选择移动位置

src/views/demo/system/mediaLibrary/path/pathMap.vue

@@ -350,12 +350,12 @@
     imageGraphicData = [];
 
     // 飞行方向标
-    let flightRotation = 0;
-    let flightMapRotation = 0;
     const flightimage = new Image();
     flightimage.crossOrigin = 'Anonymous';
     flightimage.src = '/src/assets/images/flightoperation/mediaLibraryFlight.png';
     flightimage.onload = () => {
+      let flightRotation = 0;
+      let flightMapRotation = 0;
       // 地图照片-遍历
       props.allImageDataList.forEach((item, index) => {
         if (item.lng && item.lat && item.absoluteAltitude) {
@@ -368,58 +368,6 @@
               'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871';
           }
           image.onload = () => {
-            // 创建Canvas元素
-            const canvas = document.createElement('canvas');
-            canvas.width = 34;
-            canvas.height = 29;
-            // 获取Canvas绘图上下文
-            const ctx = canvas.getContext('2d');
-            ctx.fillStyle = '#ffffff00';
-            ctx?.fillRect(0, 0, canvas.width, canvas.height);
-
-            // 图片
-            ctx.save();
-            const centerX = canvas.width / 2;
-            const centerY = canvas.height / 2;
-            ctx.translate(centerX, centerY);
-            const angleInRadians = (Math.PI / 180) * (parseFloat(item.gimbalYawDegree) + 180); // 将角度转换为弧度
-            ctx.rotate(angleInRadians);
-            ctx.drawImage(image, 2 - centerX, 2 - centerY, 30, 25);
-            ctx.restore();
-
-            // 飞行标识-右上角
-            if (index + 1 < props.allImageDataList.length) {
-              const afterItem = props.allImageDataList[index + 1];
-              let dLng = afterItem.lng - item.lng;
-              let dLat = afterItem.lat - item.lat;
-              // 使用 atan2 自动处理象限和除零
-              let angleRad = Math.atan2(dLat, dLng);
-              let angleDeg = Cesium.Math.toDegrees(angleRad);
-              let angleA = ((Math.PI / 180) * (90 - angleDeg + 360)) % 360;
-              flightRotation = angleA;
-              flightMapRotation = angleDeg;
-            }
-            ctx.save();
-            const imgWAndH = 15;
-            ctx.translate(18 + imgWAndH / 2, imgWAndH / 2);
-            ctx.rotate(flightRotation);
-            ctx.drawImage(flightimage, -imgWAndH / 2, -imgWAndH / 2, imgWAndH, imgWAndH);
-            ctx.restore();
-
-            // 设置图片1的边框颜色和宽度
-            ctx.save();
-            ctx.strokeStyle = '#ffffff';
-            ctx.lineWidth = 1;
-            ctx.strokeRect(1, 1, canvas.width - 2, canvas.height - 2);
-            const dataURL1 = canvas.toDataURL('image/png');
-            ctx.restore();
-
-            // 设置图片2的边框颜色和宽度
-            ctx.strokeStyle = '#2d8cef';
-            ctx.lineWidth = 1;
-            ctx.strokeRect(1, 1, canvas.width - 2, canvas.height - 2);
-            const dataURL2 = canvas.toDataURL('image/png');
-
             // 位置
             let position = [
               parseFloat(item.lng),
@@ -431,6 +379,57 @@
               map.scene,
               Cesium.Cartesian3.fromDegrees(position[0], position[1]),
             ).then((point) => {
+              // 创建Canvas元素
+              const canvas = document.createElement('canvas');
+              canvas.width = 34;
+              canvas.height = 29;
+              // 获取Canvas绘图上下文
+              const ctx = canvas.getContext('2d');
+              ctx.fillStyle = '#ffffff00';
+              ctx?.fillRect(0, 0, canvas.width, canvas.height);
+
+              // 图片
+              ctx.save();
+              const centerX = canvas.width / 2;
+              const centerY = canvas.height / 2;
+              ctx.translate(centerX, centerY);
+              const angleInRadians = (Math.PI / 180) * (parseFloat(item.gimbalYawDegree) + 180); // 将角度转换为弧度
+              ctx.rotate(angleInRadians);
+              ctx.drawImage(image, 2 - centerX, 2 - centerY, 30, 25);
+              ctx.restore();
+
+              // 飞行标识-右上角
+              if (index + 1 < props.allImageDataList.length) {
+                const afterItem = props.allImageDataList[index + 1];
+                let dLng = afterItem.lng - item.lng;
+                let dLat = afterItem.lat - item.lat;
+                // 使用 atan2 自动处理象限和除零
+                let angleRad = Math.atan2(dLat, dLng);
+                let angleDeg = Cesium.Math.toDegrees(angleRad);
+                flightRotation = ((Math.PI / 180) * (90 - angleDeg + 360)) % 360;
+                flightMapRotation = ((Math.PI / 180) * (angleDeg + 270)) % 360;
+              }
+              ctx.save();
+              const imgWAndH = 15;
+              ctx.translate(18 + imgWAndH / 2, imgWAndH / 2);
+              ctx.rotate(flightRotation);
+              ctx.drawImage(flightimage, -imgWAndH / 2, -imgWAndH / 2, imgWAndH, imgWAndH);
+              ctx.restore();
+
+              // 设置图片1的边框颜色和宽度
+              ctx.save();
+              ctx.strokeStyle = '#ffffff';
+              ctx.lineWidth = 1;
+              ctx.strokeRect(1, 1, canvas.width - 2, canvas.height - 2);
+              const dataURL1 = canvas.toDataURL('image/png');
+              ctx.restore();
+
+              // 设置图片2的边框颜色和宽度
+              ctx.strokeStyle = '#2d8cef';
+              ctx.lineWidth = 1;
+              ctx.strokeRect(1, 1, canvas.width - 2, canvas.height - 2);
+              const dataURL2 = canvas.toDataURL('image/png');
+
               // 飞行点
               let flightointGraphic = new mars3d.graphic.BillboardEntity({
                 id: item.id + '_flight',
@@ -439,7 +438,7 @@
                   image: '/src/assets/images/flightoperation/mediaLibraryFlight.png',
                   clampToGround: false,
                   verticalOrigin: Cesium.VerticalOrigin.CENTER,
-                  rotation: ((Math.PI / 180) * (flightMapRotation + 270)) % 360,
+                  rotation: flightMapRotation,
                 },
                 hasEdit: false,
                 show: false,

src/views/demo/system/mediaLibrary/preview/previewImageInformation.vue

@@ -231,10 +231,12 @@
 
   // 修改名称--------------------------------
   const editNameFlag = ref(true);
-  const editName = ref(props.nowPreviewRecord.name.split('.').slice(0, -1).join('.'));
+  const editName = ref();
   function editNameChange() {
     if (props.nowPreviewRecord.name.split('.').length <= 1) {
       editName.value = props.nowPreviewRecord.name;
+    } else {
+      editName.value = props.nowPreviewRecord.name.split('.').slice(0, -1).join('.');
     }
     editNameFlag.value = false;
   }
@@ -275,6 +277,7 @@
         ? props.nowPreviewRecord.graffitiJson
         : [];
       fileTags.value = props.nowPreviewRecord.fileTags ? props.nowPreviewRecord.fileTags : [];
+      editNameFlag.value = true;
     },
     {
       deep: true,

src/views/demo/system/mediaLibrary/preview/previewVideo.vue

@@ -31,7 +31,7 @@
           </a-tooltip>
         </div>
       </div>
-      <div class="imageList">
+      <div class="videoChooseList">
         <div v-for="li in props.previewRecordList" :key="li.id" @click="chooseNowPreviewRecord(li)">
           <div
             v-if="li.objectKey"
@@ -62,6 +62,7 @@
   import { Deletepic } from '@/api/demo/mediaLibrary';
   import { getAppEnvConfig } from '@/utils/env';
   import { useMessage } from '@/hooks/web/useMessage';
+  import { ref, watch, onMounted } from 'vue';
   const { VITE_GLOB_MEDIALIBRARY_IMAGE_URL } = getAppEnvConfig();
   const { createConfirm, createMessage } = useMessage();
 
@@ -144,6 +145,37 @@
   function chooseNowPreviewRecord(value) {
     emits('chooseNowPreviewRecord', value);
   }
+
+  watch(
+    () => props.nowPreviewRecord,
+    () => {
+      // 调整滑动条的位置
+      setScrollLeft();
+    },
+    {
+      deep: true,
+      immediate: true,
+    },
+  );
+  onMounted(() => {
+    // 调整滑动条的位置
+    setScrollLeft();
+  });
+  // 调整滑动条的位置
+  function setScrollLeft() {
+    const videoChooseListDocument: any = document.querySelector('.videoChooseList');
+    if (videoChooseListDocument) {
+      let index = props.previewRecordList.findIndex((item) => item.id == props.nowPreviewRecord.id);
+      let length = props.previewRecordList.length;
+      if (index < 5) {
+        videoChooseListDocument.scrollLeft = 0;
+      } else if (index + 7 > length) {
+        videoChooseListDocument.scrollLeft = 80 * length;
+      } else {
+        videoChooseListDocument.scrollLeft = 80 * (index - 5);
+      }
+    }
+  }
 </script>
 <style lang="less" scoped>
   .videoDiv {
@@ -190,7 +222,7 @@
       }
     }
 
-    .imageList {
+    .videoChooseList {
       display: inline-flex;
       align-items: center;
       justify-content: center;

src/views/demo/system/mediaLibrary/preview/previewVideoInformation.vue

@@ -179,10 +179,12 @@
 
   // 修改名称--------------------------------
   const editNameFlag = ref(true);
-  const editName = ref(props.nowPreviewRecord.name.split('.').slice(0, -1).join('.'));
+  const editName = ref('');
   function editNameChange() {
     if (props.nowPreviewRecord.name.split('.').length <= 1) {
       editName.value = props.nowPreviewRecord.name;
+    } else {
+      editName.value = props.nowPreviewRecord.name.split('.').slice(0, -1).join('.');
     }
     editNameFlag.value = false;
   }
@@ -219,6 +221,7 @@
     () => props.nowPreviewRecord,
     () => {
       fileTags.value = props.nowPreviewRecord.fileTags ? props.nowPreviewRecord.fileTags : [];
+      editNameFlag.value = true;
     },
     {
       deep: true,