temp

.env.development

@@ -15,6 +15,7 @@ VITE_DROP_CONSOLE = true
 
 # 跨域代理，可以配置多个，请注意不要换行
 #VITE_PROXY = [["/appApi","http://localhost:8001"],["/upload","http://localhost:8001/upload"]]
+# VITE_PROXY=[["/temp","http://172.16.23.144:8800"],["/upload","http://172.16.23.144:8086"]]
 VITE_PROXY=[["/api","http://192.168.1.102:8800/api"]]
 
 # API 接口地址

src/api/camera/camera-preview.ts

@@ -0,0 +1,19 @@
+/** 相机预览的接口 */
+// cameraPreview/getList
+
+import { http } from '@/utils/http/axios';
+
+interface CameraTree {
+  id: number;
+  name: string;
+  code: string;
+  children: CameraTree[];
+}
+
+/** 获取摄像头所在的树状结构 */
+export const getCameraTree = () => {
+  return http.request<CameraTree[]>({
+    url: '/cameraPreview/getList',
+    method: 'get',
+  });
+};

src/views/result/components/CameraTree/CameraTree.vue

@@ -0,0 +1,37 @@
+<template>
+  <el-tree
+    :data="props.data"
+    :props="defaultProps"
+    @node-click="handleNodeClick"
+    node-key="code"
+    :default-checked-keys="['C12-200-01']"
+    ref="treeRef"
+    :default-expand-all="true"
+  />
+</template>
+<script lang="ts" setup>
+  import { ElTree } from 'element-plus';
+  import { ref, watch } from 'vue';
+  const props = defineProps<{ data }>();
+  const defaultProps = {
+    children: 'children',
+    label: 'name',
+  };
+
+  const handleNodeClick = (...e) => {
+    console.log('e', ...e);
+    
+  };
+
+  const treeRef = ref(null);
+
+  // watch(
+  //   () => props.data,
+  //   () => {
+  //     console.log('data', props.data);
+  //     treeRef.value?.setCheckedNodes(['C12-200-01']);
+  //   },
+  //   { deep: true, immediate: true },
+  // );
+</script>
+<style scoped></style>

src/views/result/hooks/useCameraTree.ts

@@ -0,0 +1,9 @@
+import { getCameraTree } from '@/api/camera/camera-preview';
+import { useRequest } from 'vue-hooks-plus';
+
+const useCameraTree = () => {
+  const { data, loading } = useRequest(getCameraTree);
+  return { data, loading };
+};
+
+export default useCameraTree;

src/views/result/store/useCameraDetail.ts

@@ -3,8 +3,32 @@
 import { defineStore } from 'pinia';
 import { ref } from 'vue';
 
+interface CameraDetail {
+  id: number;
+  workspaceId: number;
+  name: string;
+  code: string;
+
+  cameraIp: string;
+  cameraPort: number;
+  cameraMac: string;
+  cameraType: string;
+  networkingState: number;
+  integrationState: 0;
+  resolution: 0;
+  nvrPeriod: 0;
+  nvrStartAt: null;
+  nvrEndAt: null;
+  remark: string;
+  status: number;
+  createdAt: string;
+  updatedAt: string;
+  username: string;
+  password: string;
+}
+
 const useCameraDetailStore = defineStore('cameraDetail', () => {
-  const detail = ref(null);
+  const detail = ref<CameraDetail | null>(null);
   return { detail };
 });
 

src/views/result/success.vue

@@ -2,7 +2,9 @@
   <div>
     <h2> 相机预览 </h2>
     <div class="cameraMain">
-      <div class="cameraTree">场景树</div>
+      <div class="cameraTree">
+        <CameraTree :data="data" v-if="data" />
+      </div>
       <div class="cameraSettingWrapper">
         <div class="cameraView">
           <CameraViewSetting />
@@ -17,7 +19,10 @@
 </template>
 
 <script lang="ts" setup>
+  import CameraTree from './components/CameraTree/CameraTree.vue';
   import CameraViewSetting from './components/CameraViewSetting/CameraViewSetting.vue';
+  import useCameraTree from './hooks/useCameraTree';
+  const { data, loading } = useCameraTree();
 </script>
 <style lang="scss" scoped>
   .cameraView {