Quellcode durchsuchen

增加左侧菜单摄像头选中的状态

louhangfei vor 2 Jahren
Ursprung
Commit
ee4b7471a4

+ 0 - 3
src/views/cameras/preview/components/AlgorithmsSetting/AlgoTag.vue

@@ -16,9 +16,6 @@
     margin: 10px 0;
     cursor: pointer;
   }
-  .el-tag.isOpen {
-    /* border-color: #f00; */
-  }
 
   .el-tag--info.isClose {
     background-color: #fafafa;

+ 37 - 9
src/views/cameras/preview/components/CameraTree/CameraTree.vue

@@ -4,18 +4,34 @@
     :props="defaultProps"
     @node-click="handleNodeClick"
     node-key="code"
-    :default-checked-keys="['C12-200-01']"
     ref="treeRef"
     :default-expand-all="true"
-  />
+  >
+    <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
+        >
+        <div>
+          <!-- {{ JSON.stringify(data) }} -->
+        </div>
+      </span>
+    </template>
+  </el-tree>
 </template>
 <script lang="ts" setup>
   import { ElTree } from 'element-plus';
-  import { Ref, ref } from 'vue';
+  import { ref } from 'vue';
   import { useRouteQuery } from '@vueuse/router';
   import useCameraDetail from '../../store/useCameraDetailStore';
   import { CameraTree, CameraTreeNodeType } from '@/api/camera/camera-preview';
-  import { onMounted } from 'vue';
   const props = defineProps<{ data }>();
 
   const { setDetail } = useCameraDetail();
@@ -34,10 +50,22 @@
     }
   };
 
-  onMounted(() => {
-    console.log('cameraId', cameraId.value);
-  });
-
   const treeRef = ref(null);
 </script>
-<style scoped></style>
+<style scoped>
+  .cameraCommon {
+    width: 6px;
+    height: 6px;
+    display: inline-block;
+    margin-right: 6px;
+  }
+
+  .cameraSelect {
+    width: 6px;
+    height: 6px;
+    background: #0052d9;
+    display: inline-block;
+    border-radius: 6px;
+    margin-right: 6px;
+  }
+</style>