相机预览-增加像机异常状态显示

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

@@ -20,21 +20,28 @@
           v-loading="props.loading"
         >
           <template #default="{ node, data }">
-            <span class="custom-tree-node">
+            <span class="flexCenter">
               <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>
+                class="iconWrapper flexCenter"
+              >
+                <span
+                  class="cameraCommon"
+                  :class="{
+                    cameraSelect: isSelect(data),
+                  }"
+                ></span>
+
+                <el-icon
+                  class="cameraIcon"
+                  :class="{
+                    iconSelect: isSelect(data),
+                  }"
+                >
+                  <VideoCamera />
+                </el-icon>
+                <el-icon class="invalidCamera" v-if="isInvalid(data)"><WarningFilled /></el-icon>
+              </span>
               {{ node.label }}
             </span>
           </template>
@@ -47,7 +54,7 @@
   import { ElTree } from 'element-plus';
   import { ref, watch } from 'vue';
   import { useRouteQuery } from '@vueuse/router';
-  import { Search, VideoCamera } from '@element-plus/icons-vue';
+  import { Search, VideoCamera, WarningFilled } from '@element-plus/icons-vue';
 
   import useCameraDetail from '../../store/useCameraDetailStore';
   import { CameraTree, CameraTreeNodeType } from '@/api/camera/camera-preview';
@@ -92,6 +99,10 @@
     if (!value) return true;
     return data.name?.includes(value);
   };
+
+  const isInvalid = (data) => {
+    return data.integrationState !== 0 || data.networkingState !== 0;
+  };
 </script>
 <style scoped>
   .cameraCommon {
@@ -125,7 +136,7 @@
   .filterTextInput {
     margin: 8px 0;
   }
-  .custom-tree-node {
+  .flexCenter {
     display: flex;
     align-items: center;
   }
@@ -136,4 +147,16 @@
   .iconSelect {
     color: #0052d9;
   }
+
+  .iconWrapper {
+    position: relative;
+  }
+
+  .invalidCamera {
+    color: #dd5869;
+    font-size: 12px;
+    position: absolute;
+    right: 2px;
+    top: -4px;
+  }
 </style>