fix: 九宫格 修复已知问题

src/store/modules/useCameraGroupList.ts

@@ -103,7 +103,7 @@ export const useCameraGroupList = defineStore('useCameraGroupList', () => {
   function createCameraGroup(groupName: string) {
     // 由于请求接口有延迟，所以先更新本地数据，然后再通过接口更新数据
     if (cameraGroupList.value.find((x) => x.groupName === groupName))
-      return ElMessage({ message: '分组名已存在', type: 'error' });
+      return ElMessage({ message: '区域名已存在', type: 'error' });
 
     const newGroup = {
       id: Date.now(),
@@ -122,11 +122,13 @@ export const useCameraGroupList = defineStore('useCameraGroupList', () => {
         newGroup.id = res;
       })
       .catch(() => {
-        ElMessage({ message: '新建分组失败', type: 'error' });
+        ElMessage({ message: '新建区域失败', type: 'error' });
       });
   }
 
   function deleteCameraGroup(id: number) {
+    if (id === playingGroup.value?.id) stopPlay(id);
+
     // 由于请求接口有延迟，所以先更新本地数据，然后再通过接口更新数据
     cameraGroupList.value = cameraGroupList.value.filter((x) => x.id !== id);
 

src/views/disaster/monitor/splitScreenRetrieval/CameraGroupListAndTree/CameraGroupList/CameraGroup.vue

@@ -9,7 +9,7 @@
           @dblclick="handleRenameGroup"
         >
           <div class="renameGroupInput" v-show="showRenameGroupInput">
-            <img class="folderIcon" src="@/assets/icons/nine-square-grid/folder.png" />
+            <img class="folderIcon" src="@/assets/icons/nine-square-grid/folder-white.png" />
             <el-input
               v-model="inputNewGroupName"
               class="GroupNameInput"
@@ -51,7 +51,7 @@
         <div class="addCameraIcon">
           <img src="@/assets/icons/nine-square-grid/add.png" />
         </div>
-        <div>添加监控点位</div>
+        <div>添加点位</div>
       </div>
 
       <CameraListOfGroup :cameraGroup="cameraGroup" />
@@ -116,9 +116,14 @@
       return;
     }
 
-    if (cameraGroupList.value.find((x) => x.groupName === inputNewGroupName.value && x.id !== props.cameraGroup.id)) {
+    const camera = cameraGroupList.value.find((x) => x.groupName === inputNewGroupName.value);
+
+    try {
+      if (camera && camera.id === props.cameraGroup.id) return;
+      else if (camera && camera.id !== props.cameraGroup.id)
+        return ElMessage({ message: '已存在同名区域', type: 'error' });
+    } finally {
       showRenameGroupInput.value = false;
-      return ElMessage({ message: '区域名已存在', type: 'error' });
     }
 
     props.cameraGroup.groupName = inputNewGroupName.value;
@@ -202,7 +207,7 @@
   .cameraGroup {
     margin-bottom: 1px;
     .cameraGroupTitle {
-      height: 100%;
+      height: 38px;
       width: 100%;
       display: flex;
       justify-content: space-between;
@@ -231,6 +236,7 @@
 
         .folderIcon {
           height: 24px;
+          margin-left: 12px;
           margin-right: 12px;
         }
         .GroupNameInput {
@@ -246,7 +252,6 @@
           margin-right: 12px;
         }
         .groupName {
-          height: 48px;
           white-space: nowrap;
         }
       }
@@ -276,7 +281,7 @@
         height: 63px;
         width: 130px;
         position: absolute;
-        bottom: -60px;
+        bottom: -63px;
         right: 5px;
         box-shadow: 0px 0px 10px 2px rgb(0, 0, 0, 0.3);
         border-radius: 4px;
@@ -297,6 +302,7 @@
     }
 
     .playingCameraGroup {
+      height: 38px;
       background-color: #1777ff;
     }
 
@@ -342,9 +348,14 @@
         }
       }
     }
+
+    :deep(.el-collapse-item__header) {
+      height: 38px;
+    }
   }
 
   :deep(.el-collapse-item__header:has(.playingCameraGroup)) {
+    height: 38px;
     background-color: #1777ff;
     border-radius: 4px;
 
@@ -358,20 +369,20 @@
   }
 
   :deep(.el-collapse-item__header:not(.el-collapse-item__header:has(.playingCameraGroup)):hover) {
-    background-color: #c0c4d2;
+    background-color: #cdd8ff;
     border-radius: 4px;
   }
 
   :deep(.el-collapse-item__header:not(.el-collapse-item__header:has(.playingCameraGroup)):hover .cameraGroupTitle) {
-    background-color: #c0c4d2;
+    background-color: #cdd8ff;
     border-radius: 4px;
   }
 
   :deep(.el-dialog__header) {
     text-align: left;
+    font-weight: bold;
   }
 
   :deep(.el-dialog__body) {
-    padding: 0px 20px 20px 20px;
   }
 </style>

src/views/disaster/monitor/splitScreenRetrieval/CameraGroupListAndTree/CameraGroupList/CameraGroupList.vue

@@ -6,7 +6,7 @@
       <div class="createGroupIcon">
         <img src="@/assets/icons/nine-square-grid/add.png" />
       </div>
-      <div>添加重点监控区域</div>
+      <div>添加监控区域</div>
     </div>
 
     <div class="createGroupInput" v-show="showCreateGroupInput">
@@ -115,8 +115,9 @@
 
     .createGroup {
       height: 24px;
-      width: 150px;
+      width: 120px;
       display: flex;
+      margin-right: 12px;
       margin-bottom: 12px;
       color: #333333;
       font-size: 14px;

src/views/disaster/monitor/splitScreenRetrieval/CameraGroupListAndTree/CameraGroupList/CameraListOfGroup.vue

@@ -68,8 +68,7 @@
     ElMessageBox.confirm(text, '提示', {
       cancelButtonText: '取消',
       confirmButtonText: '确定',
-      type: 'warning',
-      center: false,
+      customClass: 'customMessageBox--warning',
       lockScroll: false,
     })
       .then(() => {
@@ -127,7 +126,7 @@
     background: #f4f7ff;
     position: relative;
     &:hover {
-      background-color: #c0c4d2;
+      background-color: #cdd8ff;
     }
     &:hover .cameraOperation {
       visibility: visible;
@@ -160,7 +159,7 @@
         position: relative;
       }
       .invalidCameraName {
-        color: rgba(235, 237, 241, 0.25);
+        color: #999999;
       }
     }
 
@@ -174,7 +173,7 @@
         padding: 2px;
         z-index: 999;
         &:hover {
-          background-color: rgba(255, 255, 255, 0.2);
+          background-color: rgb(197, 197, 197);
           border-radius: 4px;
           cursor: pointer;
         }

src/views/disaster/monitor/splitScreenRetrieval/CameraGroupListAndTree/CameraGroupList/CameraTreeOfGroupList.vue

@@ -182,11 +182,12 @@
     .tree-scroll {
       height: 400px;
       .selectedCamera {
-        color: #1777ff;
+        color: #1777ff !important;
       }
       .treeNode {
         display: flex;
         align-items: center;
+        color: black;
         // position: relative;
         .icons {
           display: flex;

src/views/disaster/monitor/splitScreenRetrieval/VideosGridBase/CamerasGrid.vue

@@ -59,8 +59,7 @@
     ElMessageBox.confirm('删除后，相机数据不可恢复，是否确认删除？', '提示', {
       cancelButtonText: '取消',
       confirmButtonText: '确定',
-      type: 'warning',
-      center: false,
+      customClass: 'customMessageBox--warning',
     })
       .then(() => {
         deleteCameraInPlaylist(playingGroup.value!, camera);