离开相机预览页面后清理掉store中的数据

src/views/cameras/preview/CameraPreview.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="cameraMain">
       <div class="cameraTree">
-        <CameraTree />
+        <CameraTree :loading="loading" :camera-tree="data || []" />
       </div>
       <div class="cameraSettingWrapper">
         <div class="cameraView">
@@ -15,18 +15,29 @@
 </template>
 
 <script lang="ts" setup>
+  import { onUnmounted } from 'vue';
   import CameraTree 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';
   const cameraDetailStore = useCameraDetailStore();
+  const cameraAlgoStore = useCameraAlgoStore();
+  const fenceStore = useFenceStore();
+  const presetListStore = usePresetListStore();
+  const { data, loading } = useCameraTree();
+
+  onUnmounted(() => {
+    /** 离开页面要清理掉所有的store */
+    cameraDetailStore.clear();
+    cameraAlgoStore.clear();
+    fenceStore.clear();
+    presetListStore.clear();
+  });
 </script>
 <style lang="scss" scoped>
-  .cameraView {
-    // width: 800px;
-    // height: 400px;
-    // border: 1px solid #ccc;
-  }
-
   .cameraParamsSetting {
     width: 350px;
     min-height: 300px;

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

@@ -9,14 +9,14 @@
     />
 
     <el-tree
-      :data="data"
+      :data="props.cameraTree"
       :props="defaultProps"
       @node-click="handleNodeClick"
       node-key="code"
       :default-expand-all="true"
       :filter-node-method="filterNode"
       ref="treeRef"
-      v-loading="loading"
+      v-loading="props.loading"
     >
       <template #default="{ node, data }">
         <span class="custom-tree-node">
@@ -43,9 +43,8 @@
 
   import useCameraDetail from '../../store/useCameraDetailStore';
   import { CameraTree, CameraTreeNodeType } from '@/api/camera/camera-preview';
-  import useCameraTree from '../../hooks/useCameraTree';
 
-  const { data, loading } = useCameraTree();
+  const props = defineProps<{ cameraTree: Tree[]; loading: boolean }>();
 
   interface Tree {
     [key: string]: any;

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

@@ -1,6 +1,7 @@
 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;
@@ -24,11 +25,16 @@ const useCameraTree = () => {
   const cameraDetailStore = useCameraDetailStore();
   const { data, loading } = useRequest(getCameraTree, {
     onSuccess: (d) => {
+      console.log('tree success', d);
       if (cameraDetailStore.cameraId) {
         cameraDetailStore.detail = getCameraDetail(d, cameraDetailStore.cameraId);
       }
     },
   });
+
+  onUnmounted(() => {
+    console.log('cameraTree hook unmounted');
+  });
   return { data, loading };
 };
 

src/views/cameras/preview/store/useCameraAlgoStore.ts

@@ -12,15 +12,25 @@ interface CameraAlgoItemInCard extends CameraAlgoItem {
   timeRangeArr: TimeRangeItem[];
 }
 
+const defaultSelectedAlgoDetail = { detectionJSON: { detectionNum: 0, detectionUnit: 1 } };
+
 const useCameraAlgoStore = defineStore('cameraAlgo', () => {
-  const { data: cameraAlgoList, runAsync: getCameraAlgoList } = useRequest(
+  const {
+    data: cameraAlgoList,
+    runAsync: getCameraAlgoList,
+    mutate: mutateCameraAlgoList,
+  } = useRequest(
     (cameraId: number) => {
       return getCameraAlgoListApi(cameraId);
     },
     { manual: true },
   );
 
-  const { data: allAlgoList, runAsync: getAllAlgoList } = useRequest(getAllAlgosApi, {
+  const {
+    data: allAlgoList,
+    runAsync: getAllAlgoList,
+    mutate: mutateAllAlgoList,
+  } = useRequest(getAllAlgosApi, {
     manual: true,
   });
 
@@ -28,8 +38,7 @@ const useCameraAlgoStore = defineStore('cameraAlgo', () => {
   const selectedAlgoId = ref<number>();
 
   const selectedAlgoDetail = ref<CameraAlgoItemInCard>({
-    // 复杂结构要加这个，否则v-model的时候会报错
-    detectionJSON: { detectionNum: 0, detectionUnit: 1 },
+    ...defaultSelectedAlgoDetail,
   } as CameraAlgoItemInCard);
 
   const getAlgoDetail = (algoId: number): null | CameraAlgoItem => {
@@ -43,6 +52,12 @@ const useCameraAlgoStore = defineStore('cameraAlgo', () => {
     return cameraAlgoList.value?.find((x) => x.algoId === algoId);
   };
 
+  const clear = () => {
+    mutateCameraAlgoList();
+    mutateAllAlgoList();
+    selectedAlgoDetail.value = { ...defaultSelectedAlgoDetail } as CameraAlgoItemInCard;
+  };
+
   return {
     cameraAlgoList,
     getCameraAlgoList,
@@ -52,6 +67,7 @@ const useCameraAlgoStore = defineStore('cameraAlgo', () => {
     getAlgoDetail,
     selectedAlgoDetail,
     isAlgoBind,
+    clear,
   };
 });
 

src/views/cameras/preview/store/useCameraDetailStore.ts

@@ -19,19 +19,21 @@ export const WIDTH_HEIGHT_RATIO = 0.5625;
 /** 分辨率以1920为基础 */
 export const BASE_RESOLUTION = 1920;
 
+const defaultParams = {
+  startTime: '',
+  endTime: '',
+  imageResolution: 1,
+  recordPeriod: 0,
+  reservation: '',
+};
+
 const useCameraDetailStore = defineStore('cameraDetail', () => {
   const cameraId = useRouteQuery('cameraId', '', { transform: (str) => Number(str) });
 
   const detail = ref<CameraDetailServer | null>(null);
 
   /** 参数设置 */
-  const params = ref<CameraParams>({
-    startTime: '',
-    endTime: '',
-    imageResolution: 1,
-    recordPeriod: 0,
-    reservation: '',
-  });
+  const params = ref<CameraParams>({ ...defaultParams });
 
   const videoSize = computed(() => {
     const width = params.value.imageResolution * BASE_RESOLUTION;
@@ -42,7 +44,12 @@ const useCameraDetailStore = defineStore('cameraDetail', () => {
   const setDetail = (newDetail: CameraDetailServer) => {
     detail.value = newDetail;
   };
-  return { detail, setDetail, cameraId, params, videoSize };
+
+  const clear = () => {
+    detail.value = null;
+    params.value = { ...defaultParams };
+  };
+  return { detail, setDetail, cameraId, params, videoSize, clear };
 });
 
 export default useCameraDetailStore;

src/views/cameras/preview/store/useFenceStore.ts

@@ -63,7 +63,13 @@ export const useFenceStore = defineStore('electronicFencePolygonStore', () => {
     });
   };
 
-  return { serverFencePoints, currentFencePoints, currentFenceId, getFence, saveFence };
+  const clear = () => {
+    serverFencePoints.value = [];
+    currentFencePoints.value = [];
+    currentFenceId.value = undefined;
+  };
+
+  return { serverFencePoints, currentFencePoints, currentFenceId, getFence, saveFence, clear };
 });
 
 export default useFenceStore;

src/views/cameras/preview/store/usePresetListStore.ts

@@ -8,7 +8,7 @@ export const usePresetListStore = defineStore('presetListStore', () => {
   /** 当前选中的预置位 */
   const currentPresetToken = ref('');
 
-  const { data, loading, runAsync } = useRequest(
+  const { data, loading, runAsync, mutate } = useRequest(
     (cameraId: number) => {
       return getPresetListApi(cameraId);
     },
@@ -19,7 +19,12 @@ export const usePresetListStore = defineStore('presetListStore', () => {
     return data.value?.find((x) => x.name === name);
   };
 
-  return { data, currentPresetToken, getPresetList: runAsync, isPresetNameExist, loading };
+  const clear = () => {
+    mutate();
+    currentPresetToken.value = '';
+  };
+
+  return { data, currentPresetToken, getPresetList: runAsync, isPresetNameExist, loading, clear };
 });
 
 export default usePresetListStore;