fix: 修复灾害防范总览页Thumbnail组件使用问题

src/components/monitor-camera-edit/UpdateMonitorArea.vue

@@ -27,24 +27,32 @@
                 selectedCamera: isSelected(data),
               }"
             >
-              <div v-if="data.nodeType === CameraTreeNodeType.camera" class="icons">
-                <VideoCamera
-                  class="cameraIcon"
-                  :class="{
-                    selectedCameraIcon: isSelected(data),
-                  }"
-                />
-                <WarningFilled v-if="isInvalid(data)" class="invalidCamera" style="color: red" />
-              </div>
-              <div> {{ node.label }}</div>
               <Thumbnail
                 v-if="data.nodeType === CameraTreeNodeType.camera"
                 :imageUrl="data.imageUrl"
                 :code="data.code"
                 position="right"
               >
-                <div class="mask"></div>
+                <div class="iconAndCameraName">
+                  <div class="icons">
+                    <VideoCamera
+                      class="cameraIcon"
+                      :class="{
+                        selectedCameraIcon: isSelected(data),
+                      }"
+                    />
+                    <WarningFilled v-if="isInvalid(data)" class="invalidCamera" style="color: red" />
+                  </div>
+                  <div class="cameraName">
+                    {{ node.label }}
+                  </div>
+                </div>
               </Thumbnail>
+              <template v-else>
+                <div class="cameraName">
+                  {{ node.label }}
+                </div>
+              </template>
             </div>
           </template>
         </el-tree>
@@ -106,7 +114,7 @@
   const selectedItems = ref<SelectedCameraIds[]>([]); // 已选择的相机列表
 
   const isSelected = (data: CameraInTree) => {
-    if (data.nodeType === 'camera') return selectedItems.value.find((x) => x.id === data.id);
+    if (data.nodeType === CameraTreeNodeType.camera) return selectedItems.value.find((x) => x.id === data.id);
   };
 
   const isInvalid = (data) => {
@@ -125,7 +133,7 @@
 
   // 处理树节点的勾选变化
   function handleCheckChange(data: CameraInTree, checked: boolean) {
-    if (checked && data.nodeType === 'camera') {
+    if (checked && data.nodeType === CameraTreeNodeType.camera) {
       if (!selectedItems.value.find((x) => x.id === data.id)) {
         selectedItems.value.push({
           id: data.id,
@@ -199,45 +207,59 @@
   .treeNode {
     display: flex;
     align-items: center;
+    position: relative;
+    width: 100%;
 
-    .icons {
+    .iconAndCameraName {
       display: flex;
       align-items: center;
-      position: relative;
-
-      .cameraIcon {
-        height: 18px;
-        margin-right: 8px;
-        color: rgb(112, 112, 112);
+      width: 100%;
+
+      .icons {
+        display: flex;
+        align-items: center;
+        position: relative;
+
+        .cameraIcon {
+          height: 18px;
+          margin-right: 8px;
+          color: rgb(112, 112, 112);
+        }
+
+        .selectedCameraIcon {
+          color: #1777ff;
+        }
+
+        .invalidCamera {
+          height: 14px;
+          color: #dd5869;
+          position: absolute;
+          right: 0px;
+          top: -5px;
+        }
       }
 
-      .selectedCameraIcon {
-        color: #1777ff;
+      .cameraName {
+        width: fit-content;
+        position: relative;
       }
+    }
 
-      .invalidCamera {
-        height: 14px;
-        color: #dd5869;
-        position: absolute;
-        right: 0px;
-        top: -5px;
-      }
+    .cameraName {
+      flex: 1;
     }
   }
 
-  .mask {
-    height: 26px;
-    width: 100%;
+  :deep(.thumb-nail) {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    height: 100%;
   }
 
-  :deep(.thumb-nail) {
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 99;
+  :deep(.thumb-nail > div) {
+    width: 100%;
+    height: 100%;
   }
 
   :deep(.el-tree-node__content) {