Merge branch 'all-v4-chauncey' into 'all-v4'

修复第一版云台bug

See merge request skyeye/skyeye_frontend/skyeye-admin!411

src/views/cameras/overview/CamerasOverview.vue

@@ -113,7 +113,7 @@
         </template>
       </BasicTable>
     </div>
-    <AddCamera class="add-popover" v-model="showAddPopover" />
+    <AddCamera v-model="showAddPopover" />
     <BatchImportCamera
       class="batch-import"
       v-if="showBatchImportPopover"
@@ -126,11 +126,11 @@
       @update="handleUpdateBatchEdit"
       @close="handleCloseBatchEdit"
     />
-    <EditCamera class="add-popover" v-model="showEditPopover" :edit-data="editCameraData" />
-    <EditSRSCamera class="add-popover" v-model="showEditSRSPopover" :edit-data="editCameraData" />
-    <EditNVRCamera class="add-popover" v-model="showEditNVRPopover" :edit-data="editCameraData" />
-    <ShareCamera class="add-popover" v-model="addSharedPopover" :share-data="shareCameraData" />
-    <EditSharedCamera class="add-popover" v-model="showSharedPopover" @update-unadd="updateUnaddAmount" />
+    <EditCamera v-model="showEditPopover" :edit-data="editCameraData" />
+    <EditSRSCamera v-model="showEditSRSPopover" :edit-data="editCameraData" />
+    <EditNVRCamera v-model="showEditNVRPopover" :edit-data="editCameraData" />
+    <ShareCamera v-model="addSharedPopover" :share-data="shareCameraData" />
+    <EditSharedCamera v-model="showSharedPopover" @update-unadd="updateUnaddAmount" />
     <CameraOverviewPopover
       v-if="showCameraOverviewPopover"
       :dialog-visible="showCameraOverviewPopover"
@@ -556,16 +556,6 @@
     color: red;
   }
 
-  .add-popover {
-    position: absolute;
-    width: calc(100% - 21px);
-    height: 622px;
-    top: 0;
-    bottom: 0;
-    margin: auto;
-    z-index: 99;
-  }
-
   .batch-import {
     position: absolute;
     width: 593px;

src/views/cameras/overview/components/CameraAddPopover.vue

@@ -90,6 +90,8 @@
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 1000;
+    width: calc(100% - 800px);
+    height: 622px;
   }
 
   .pop-head {

src/views/cameras/overview/components/CameraEditNVRPopover.vue

@@ -90,6 +90,8 @@
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 1000;
+    width: calc(100% - 800px);
+    height: 622px;
   }
 
   .pop-head {

src/views/cameras/overview/components/CameraEditPopover.vue

@@ -93,6 +93,8 @@
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 1000;
+    width: calc(100% - 800px);
+    height: 622px;
   }
 
   .pop-head {

src/views/cameras/overview/components/CameraEditSRSPopover.vue

@@ -87,6 +87,8 @@
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 1000;
+    width: calc(100% - 800px);
+    height: 622px;
   }
 
   .pop-head {

src/views/cameras/overview/components/CameraOverviewPopover.vue

@@ -2,29 +2,40 @@
   <el-dialog
     v-model="dialogVisible"
     width="719"
-    :title="`预览-${overviewCameraData.name}`"
     center
     align-center
     class="camera-overview-popover--custom"
     :close-on-click-modal="false"
     @close="emits('update:dialogVisible', false)"
   >
+    <template #title>
+      <div class="camera-overview-popover--custom__title">
+        <span>预览-{{ overviewCameraData.name }}</span>
+        <img :src="FullScreenIcon" alt="全屏" @click="toggle" />
+      </div>
+    </template>
     <div class="camera-overview-popover--custom__content">
-      <main class="main">
-        <div class="cameraVideo">
+      <main class="main" ref="videoContainerRef">
+        <div class="cameraVideo" ref="cameraVideoRef">
           <CameraLiveVideo ref="cameraLiveVideoRef" />
         </div>
         <div class="presetAddWrapper" v-if="!!overviewCameraData.isPtz">
           <CameraViewScale @update:ControlPerspective="activePresetToken = ''" />
           <CameraDirectionControl @update:ControlPerspective="activePresetToken = ''" />
-          <ElButton type="primary" style="margin-top: 20px; width: 100px" @click="handleAddPreset" v-show="displayPresetList.length < 10">添加预置位</ElButton>
+          <ElButton
+            type="primary"
+            style="margin-top: 20px; width: 100px"
+            @click="handleAddPreset"
+            v-show="displayPresetList.length < 10"
+            >添加预置位</ElButton
+          >
         </div>
       </main>
       <footer class="footer" v-if="!!overviewCameraData.isPtz && presetList.length > 0">
         <div class="footer-header">
           <div class="edit-preset-position-icon-wrapper" @click="toggleEditMode">
             <img :src="isEditMode ? EditPresetPositionFocusIcon : EditPresetPositionIcon" alt="编辑预置位" />
-            <span v-show="isEditMode">完成编辑</span>
+            <span v-show="isEditMode">退出编辑</span>
           </div>
           <div class="pagination-control" v-if="displayPresetList.length > 0">
             <el-button type="text" :disabled="currentPage === 1" @click="prevPage" :icon="ArrowLeft" />
@@ -52,7 +63,10 @@
               class="delete-preset-position-icon"
               @click="handleDeletePreset(item)"
             />
-            <span class="preset-position-name">{{ item.presetName }}</span>
+            <span class="preset-position-name" v-if="item.presetName.length < 8">{{ item.presetName }}</span>
+            <el-tooltip :content="item.presetName" placement="bottom" v-else>
+              <span class="preset-position-name">{{ item.presetName }}</span>
+            </el-tooltip>
           </div>
         </div>
       </footer>
@@ -68,6 +82,7 @@
   import DeletePresetPositionIcon from '@/assets/icons/delete-preset-position.svg';
   import PresetPositionItem from '@/assets/icons/preset-placeholder-img.svg';
   import EditPresetPositionFocusIcon from '@/assets/icons/edit-preset-position-focus.svg';
+  import FullScreenIcon from '@/assets/icons/fullscreen.svg';
   import { dataURLtoBlob } from '@/utils/file/base64Conver';
   import {
     getPresetListApi,
@@ -81,6 +96,7 @@
   import CameraViewScale from '@/modules/algo-params-setting-base/components/CameraViewSetting/CameraViewScale.vue';
   import CameraDirectionControl from '@/modules/algo-params-setting-base/components/CameraDirectionControl/CameraDirectionControl.vue';
   import { ElMessage, ElMessageBox } from 'element-plus';
+  import { useFullscreen } from '@vueuse/core';
 
   const emits = defineEmits(['update:dialogVisible']);
   const dialogVisible = ref(false);
@@ -88,7 +104,9 @@
   const displayPresetList = ref<PresetListResp[]>([]);
   const isEditMode = ref(false);
   const activePresetToken = ref<string>(''); // 当前激活的预置位token
-  const cameraLiveVideoRef = ref<InstanceType<typeof CameraLiveVideo> | null>(null); // 添加对CameraLiveVideo的引用并指定正确类型
+  const cameraLiveVideoRef = ref<InstanceType<typeof CameraLiveVideo> | null>(null);
+  const cameraVideoRef = ref<HTMLElement>();
+  const { toggle } = useFullscreen(cameraVideoRef);
 
   const props = defineProps<{
     dialogVisible: boolean;
@@ -190,6 +208,7 @@
       }
       const res = await createPresetApi({ presetName: value, cameraId, imageUrl: url.url });
       if (res) {
+        activePresetToken.value = res;
         ElMessage.success('添加预置位成功');
         await getPresetList();
       }
@@ -232,6 +251,14 @@
       font-weight: bold;
       font-size: 16px;
     }
+    &__title {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      img {
+        cursor: pointer;
+      }
+    }
     &__content {
       display: flex;
       flex-direction: column;
@@ -286,28 +313,12 @@
             width: 120px;
             position: relative;
             transition: all 0.3s ease;
+            box-sizing: border-box;
 
             &.active-preset {
               transform: scale(1.05);
-              box-shadow: 0 0 8px 2px rgba(24, 144, 255, 0.6);
+              border: 2px solid #1890ff;
               border-radius: 4px;
-
-              &::after {
-                content: '';
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-                border: 2px solid #1890ff;
-                border-radius: 4px;
-                box-sizing: border-box;
-                pointer-events: none;
-              }
-
-              .preset-position-name {
-                background: rgba(24, 144, 255, 0.8);
-              }
             }
 
             .delete-preset-position-icon {
@@ -330,12 +341,16 @@
             }
 
             .preset-position-name {
-              color: #fff;
+              display: block;
+              width: 100%;
+              margin-top: 4px;
+              color: rgba(0, 0, 0, 0.88);
               font-size: 12px;
-              background: rgba(0, 0, 0, 0.5);
               padding: 2px 4px;
               border-radius: 2px;
-              transition: all 0.3s ease;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
             }
           }
         }