相机预览-修复刷新时预置位未默认选中问题

src/views/cameras/preview/CameraPreview.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="cameraMain">
       <div class="cameraTree">
-        <CameraTree :loading="loading" :camera-tree="data || []" />
+        <CameraTreeCom :loading="loading" :camera-tree="cameraTree || []" />
       </div>
       <div class="cameraSettingWrapper">
         <div class="cameraView">
@@ -15,34 +15,50 @@
 </template>
 
 <script lang="ts" setup>
-  import { onUnmounted, watch } from 'vue';
-  import CameraTree from './components/CameraTree/CameraTree.vue';
+  import { onUnmounted, ref, watch } from 'vue';
+  import CameraTreeCom from './components/CameraTree/CameraTree.vue';
   import CameraViewSetting from './components/CameraViewSetting/CameraViewSetting.vue';
   import useCameraDetailStore from './store/useCameraDetailStore';
   import useCameraAlgoStore from './store/useCameraAlgoStore';
   import usePresetListStore from './store/usePresetListStore';
   import useFenceStore from './store/useFenceStore';
-  import useCameraTree from './hooks/useCameraTree';
   import { onMounted } from 'vue';
   import { IsPtz } from '@/api/camera/camera-overview';
+  import { CameraTree, getCameraTree } from '@/api/camera/camera-preview';
   const cameraDetailStore = useCameraDetailStore();
   const cameraAlgoStore = useCameraAlgoStore();
   const fenceStore = useFenceStore();
   const presetListStore = usePresetListStore();
-  const { data, loading } = useCameraTree();
+  const cameraTree = ref<CameraTree[]>([]);
 
   watch(
     () => cameraDetailStore.cameraId,
-    (cameraId) => {
+    async (cameraId) => {
       if (cameraId) {
-        presetListStore.getPresetList(cameraId).then((res) => {
-          /** 相机如果不能设置预置位，那么就选中默认预置位 */
-          if (cameraDetailStore.detail?.isPtz === IsPtz.disabled) {
-            presetListStore.currentPresetToken = res?.[0].token;
+        const presetList = await presetListStore.getPresetList(cameraId);
+
+        if (cameraTree.value.length === 0) {
+          /** 如果当前树为空，那么切换相机的时候，要重新请求树结构 */
+          const tree = await getCameraTree();
+          cameraTree.value = tree as unknown as CameraTree[];
+        }
+
+        const detail = getCameraDetail(cameraTree.value, cameraDetailStore.cameraId);
+
+        console.log('cameraDetail', detail);
+        if (detail) {
+          cameraDetailStore.setDetail(detail);
+          if (detail?.isPtz === IsPtz.disabled) {
+            presetListStore.currentPresetToken = presetList?.[0].token;
           }
-        });
+        }
+
         cameraAlgoStore.getCameraAlgoList(cameraId);
         cameraAlgoStore.selectedAlgoId = null;
+      } else {
+        /** 没有相机的时候也要请求相机树 */
+        const tree = await getCameraTree();
+        cameraTree.value = tree as unknown as CameraTree[];
       }
     },
     {
@@ -60,7 +76,26 @@
     cameraAlgoStore.clear();
     fenceStore.clear();
     presetListStore.clear();
+    console.log('camera preview onUnmounted');
   });
+
+  function getCameraDetail(tree: CameraTree[], cameraId: number): CameraTree | null {
+    let detail: CameraTree | null = null;
+
+    function getDetail(t: CameraTree[]) {
+      t.forEach((x) => {
+        if (x.nodeType === 'camera' && x.id === cameraId) {
+          detail = x;
+        } else if (x.children && x.children.length > 0) {
+          getDetail(x.children);
+        }
+      });
+    }
+
+    getDetail(tree);
+
+    return detail;
+  }
 </script>
 <style lang="scss" scoped>
   .cameraParamsSetting {

src/views/cameras/preview/hooks/useCameraTree.ts

@@ -1,44 +0,0 @@
-import { CameraTree, getCameraTree } from '@/api/camera/camera-preview';
-import { useRequest } from 'vue-hooks-plus';
-import useCameraDetailStore from '../store/useCameraDetailStore';
-import { onUnmounted } from 'vue';
-
-function getCameraDetail(tree: CameraTree[], cameraId: number) {
-  let detail: CameraTree | null = null;
-
-  function getDetail(t: CameraTree[]) {
-    t.forEach((x) => {
-      if (x.nodeType === 'camera' && x.id === cameraId) {
-        detail = x;
-      } else if (x.children && x.children.length > 0) {
-        getDetail(x.children);
-      }
-    });
-  }
-
-  getDetail(tree);
-
-  return detail;
-}
-
-const useCameraTree = () => {
-  const cameraDetailStore = useCameraDetailStore();
-  const { data, loading } = useRequest(getCameraTree, {
-    onSuccess: (d) => {
-      console.log('tree success', d);
-      if (cameraDetailStore.cameraId) {
-        const detail = getCameraDetail(d, cameraDetailStore.cameraId);
-        if (detail) {
-          cameraDetailStore.setDetail(detail);
-        }
-      }
-    },
-  });
-
-  onUnmounted(() => {
-    console.log('cameraTree hook unmounted');
-  });
-  return { data, loading };
-};
-
-export default useCameraTree;