相机预览的场景树增加相机icon

src/views/cameras/preview/components/CameraTree/CameraTree.vue

@@ -22,15 +22,20 @@
         <template #default="{ node, data }">
           <span class="custom-tree-node">
             <span
-              ><span
-                class="cameraCommon"
-                :class="{
-                  cameraSelect:
-                    data.nodeType === CameraTreeNodeType.camera && data.id === Number(cameraId),
-                }"
-              ></span
-              >{{ node.label }}</span
-            >
+              class="cameraCommon"
+              :class="{
+                cameraSelect: isSelect(data),
+              }"
+            ></span>
+            <el-icon
+              v-if="data.nodeType === CameraTreeNodeType.camera"
+              class="cameraIcon"
+              :class="{
+                iconSelect: isSelect(data),
+              }"
+              ><VideoCamera
+            /></el-icon>
+            {{ node.label }}
           </span>
         </template>
       </el-tree>
@@ -41,7 +46,7 @@
   import { ElTree } from 'element-plus';
   import { ref, watch } from 'vue';
   import { useRouteQuery } from '@vueuse/router';
-  import { Search } from '@element-plus/icons-vue';
+  import { Search, VideoCamera } from '@element-plus/icons-vue';
 
   import useCameraDetail from '../../store/useCameraDetailStore';
   import { CameraTree, CameraTreeNodeType } from '@/api/camera/camera-preview';
@@ -72,6 +77,9 @@
     }
   };
 
+  const isSelect = (data) =>
+    data.nodeType === CameraTreeNodeType.camera && data.id === Number(cameraId.value);
+
   const filterText = ref('');
   const treeRef = ref<InstanceType<typeof ElTree>>();
 
@@ -89,6 +97,7 @@
     width: 6px;
     height: 6px;
     display: inline-block;
+    align-items: center;
     margin-right: 6px;
   }
 
@@ -111,4 +120,15 @@
   .filterTextInput {
     margin: 8px 0;
   }
+  .custom-tree-node {
+    display: flex;
+    align-items: center;
+  }
+  .cameraIcon {
+    margin-right: 5px;
+    font-size: 18px;
+  }
+  .iconSelect {
+    color: #0052d9;
+  }
 </style>