fix: 通过场景树更新选择相机id时重置播放和设置

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

@@ -45,6 +45,9 @@ const useCameraAlgoStore = defineStore('cameraAlgo', () => {
     { manual: true },
   );
 
+  // 选中的算法id列表
+  const selectedAlgoList = ref<number[]>([]);
+
   const {
     data: allAlgoList,
     runAsync: getAllAlgoList,
@@ -105,12 +108,14 @@ const useCameraAlgoStore = defineStore('cameraAlgo', () => {
     mutateCameraAlgoList();
     mutateAllAlgoList();
     selectedAlgoDetail.value = { ...defaultSelectedAlgoDetail } as CameraAlgoItemInCard;
+    selectedAlgoList.value = [];
   };
 
   return {
     cameraAlgoList,
     getCameraAlgoList,
     selectedAlgoId,
+    selectedAlgoList,
     metaObjList,
     allAlgoList,
     markedParamCardIds,

src/views/datamanager/playback/Playback.vue

@@ -12,7 +12,7 @@
       </div>
       <div class="camera-placeholder" v-if="!cameraDetailStore.cameraId">请选择左侧相机</div>
       <div v-else class="camera-setting-wrapper">
-        <NvrCameraView :camera-id="cameraDetailStore.cameraId" />
+        <NvrCameraView ref="nvrCameraViewRef" :camera-id="cameraDetailStore.cameraId" />
       </div>
     </div>
   </div>
@@ -22,10 +22,10 @@
   import NvrCameraView from './components/NvrCameraView.vue';
   import CameraTreeCom from '@/views/cameras/preview/components/CameraTree/CameraTree.vue';
   import { onUnmounted, ref, watch } from 'vue';
-  import useCameraDetailStore from '@/views/cameras/preview/store/useCameraDetailStore';
+  import useCameraDetail from '@/views/cameras/preview/store/useCameraDetailStore';
   import usePresetListStore from '@/views/cameras/preview/store/usePresetListStore';
   import useFenceStore from '@/views/cameras/preview/store/useFenceStore';
-  // import useCameraAlgoStore from '@/views/cameras/preview/store/useCameraAlgoStore';
+  import useCameraAlgoStore from '@/views/cameras/preview/store/useCameraAlgoStore';
   import { onMounted } from 'vue';
   import { CameraDetailServer, IsPtz } from '@/api/camera/camera-overview';
   import { CameraTree, getCameraTree } from '@/api/camera/camera-preview';
@@ -34,13 +34,14 @@
   const cameraStatus = useCameraStatus();
   const { noNetworkingNum, openInterval, closeInterval } = cameraStatus;
 
-  const cameraDetailStore = useCameraDetailStore();
+  const cameraDetailStore = useCameraDetail();
   const fenceStore = useFenceStore();
   const presetListStore = usePresetListStore();
-  // const cameraAlgoStore = useCameraAlgoStore();
+  const cameraAlgoStore = useCameraAlgoStore();
   const cameraTree = ref<CameraTree[]>([]);
   const codeShowList = ref<string[]>([]);
   const noIntegrationNum = ref<number>(0);
+  const nvrCameraViewRef = ref();
 
   // const { allAlgoList } = storeToRefs(cameraAlgoStore);
 
@@ -105,6 +106,10 @@
         }
         // cameraAlgoStore.getCameraAlgoList(cameraId);
         // cameraAlgoStore.selectedAlgoId = null;
+
+        cameraAlgoStore.selectedAlgoList = [];
+        cameraAlgoStore.getCameraAlgoList(cameraId).then();
+        nvrCameraViewRef.value.clearNvrUrl();
       } else {
         /** 没有相机的时候也要请求相机树 */
         const tree = await getCameraTree();
@@ -129,10 +134,11 @@
   onUnmounted(() => {
     /** 离开页面要清理掉所有的store */
     cameraDetailStore.clear();
-    // cameraAlgoStore.clear();
+    cameraAlgoStore.clear();
     fenceStore.clear();
     presetListStore.clear();
     closeInterval();
+    nvrCameraViewRef.value.clearNvrUrl();
   });
 
   function getCameraDetail(tree: CameraTree[], cameraId: number): CameraTree | null {

src/views/datamanager/playback/components/NvrCameraView.vue

@@ -135,6 +135,13 @@
     });
   };
 
+  const clearNvrUrl = () => {
+    nvrUrl.value = undefined;
+    confirmDate.value = false;
+    dateRange.value = undefined;
+    nvrTimeSelectRef.value.clearTime();
+  };
+
   const handleVioTags = (tags: string[]) => {
     if (tags.length === 0) {
       violationsList.value = [];
@@ -220,6 +227,10 @@
       ? cameraDetailStore.detail?.pushstreamIp
       : '';
   });
+
+  defineExpose({
+    clearNvrUrl,
+  });
 </script>
 
 <style scoped lang="scss">

src/views/datamanager/playback/components/NvrCheckbox.vue

@@ -6,9 +6,9 @@
     </div>
 
     <div class="checkbox">
-      <el-checkbox-group v-if="tags?.length" v-model="checkedtags">
+      <el-checkbox-group v-if="cameraAlgoList?.length" v-model="selectedAlgoList">
         <el-checkbox
-          v-for="tag in tags"
+          v-for="tag in cameraAlgoList"
           :disabled="!available"
           :key="tag.algoInfo.id"
           :label="tag.algoInfo.name"
@@ -23,26 +23,26 @@
 
 <script setup lang="ts">
   import { ElCheckboxGroup, ElCheckbox } from 'element-plus';
-  import { onMounted, ref } from 'vue';
+  import { onMounted } from 'vue';
   import { storeToRefs } from 'pinia';
   import useCameraAlgoStore from '@/views/cameras/preview/store/useCameraAlgoStore';
 
   const cameraAlgoStore = useCameraAlgoStore();
-  const { cameraAlgoList } = storeToRefs(cameraAlgoStore);
-  const checkedtags = ref<any[] | undefined>([]);
-  const tags = ref<any>([]);
+  const { cameraAlgoList, selectedAlgoList } = storeToRefs(cameraAlgoStore);
+  // const checkedtags = ref<any[] | undefined>([]);
+  // const tags = ref<any>([]);
 
   const props = defineProps<{ available: boolean; cameraId: number }>();
 
   const emit = defineEmits(['checkTags']);
   const sendCheckTag = () => {
-    emit('checkTags', checkedtags.value);
+    emit('checkTags', selectedAlgoList.value);
   };
 
   onMounted(() => {
     cameraAlgoStore.getCameraAlgoList(props.cameraId).then(() => {
       // checkedtags.value = cameraAlgoList.value?.map((item) => item.algoInfo.id); // 默认选中
-      tags.value = cameraAlgoList.value;
+      // tags.value = cameraAlgoList.value;
     });
   });
 </script>

src/views/datamanager/playback/components/NvrTimeSelect.vue

@@ -78,8 +78,12 @@
   const nvrDownload = () => {
     emit('downloadNvr');
   };
+  const clearTime = () => {
+    startTime.value = '';
+    endTime.value = '';
+  };
 
-  defineExpose({ startTime, endTime });
+  defineExpose({ startTime, endTime, clearTime });
 </script>
 
 <style scoped lang="scss">