fix: 九宫格 修复已知问题

src/components/live/LiveVideoFlv.vue

@@ -10,12 +10,9 @@
 <script setup lang="ts">
   import { onMounted, onBeforeUnmount, watch, ref, computed } from 'vue';
   import mpegts from 'mpegts.js';
-  // import useGlobalStore from '@/store/modules/user/use-global-store';
   import { storeToRefs } from 'pinia';
   import { useUserStore } from '@/store/modules/user';
-  import useAuthStore from '@/store/modules/useAuth';
   import loadingImg from '@/assets/images/nine-square-grid/loading.gif';
-  // import useCameraPlaybackStore from '@/stores/useCameraPlaybackStore';
 
   const props = defineProps<{
     url: string;
@@ -25,16 +22,6 @@
   const userStore = useUserStore();
   const { token } = storeToRefs(userStore);
 
-  const authStore = useAuthStore();
-  const { checkAuthValid } = authStore;
-
-  // const stateStore = useGlobalStore();
-  // const { liveLoaded } = storeToRefs(stateStore);
-
-  // const cameraPlaybackStore = useCameraPlaybackStore();
-  // const { isPlaybacking, isTouchDragging } = storeToRefs(cameraPlaybackStore);
-  // const { handlePlaybackVideoUpdateTime } = cameraPlaybackStore;
-
   let player: mpegts.Player | null;
   let lastDecodedFrames = 0; // 10s前的解码帧数
   let currentDecodedFrames = 0; // 当前解码帧数
@@ -45,28 +32,13 @@
   const loading = ref(true);
 
   const urlWithToken = computed(() => {
-    // if (!token.value || !props.url) return '';
-    // return props.url + '?token=' + token.value;
     if (!props.url) return '';
 
-    console.log('props.url', props.url);
-
     return props.url;
   });
 
-  // const handleTimeUpdate = (e) => {
-  //   if (!isPlaybacking.value || !liveLoaded.value || isTouchDragging.value) return;
-
-  //   handlePlaybackVideoUpdateTime(e.target.currentTime);
-
-  // };
-
   const handleLoadeddata = () => {
-    // liveLoaded.value = true;
     loading.value = false;
-    // if (isTouchDragging.value) {
-    //   isTouchDragging.value = false;
-    // }
   };
 
   const initPlay = () => {
@@ -105,7 +77,6 @@
       console.log('视频加载错误类型', e);
       console.log('视频加载错误详情类型', detail);
       console.log('视频加载错误信息', data);
-      checkAuthValid();
       // 当发生error时，这里会发生死循环，所以要注销掉。 interval方式中已经包含了此种错误的处理
       // reloadPlayer();
     });
@@ -168,7 +139,6 @@
   });
 
   const reloadPlayer = () => {
-    // liveLoaded.value = false;
     loading.value = true;
     destroyPlayer();
     setTimeout(() => {

src/store/modules/useCameraGroupList.ts

@@ -166,11 +166,6 @@ export const useCameraGroupList = defineStore('useCameraGroupList', () => {
       return;
     }
 
-    // 场景树中的相机没有cameraGroupDetailId这个属性，所以只能从cameraGroup里过滤
-    // let cameraGroupDetailId = cameraGroup.children.find(
-    //   (x) => x.id === camera.id
-    // )?.cameraGroupDetailId;
-
     // 由于请求接口有延迟，所以先更新本地数据，然后再通过接口更新数据
     cameraGroup.children = cameraGroup.children.filter((x) => x.id !== camera.id);
 
@@ -186,6 +181,14 @@ export const useCameraGroupList = defineStore('useCameraGroupList', () => {
   // 删除正在播放的相机
   function deleteCameraInPlaylist(cameraGroup: CameraGroupType, camera: Camera) {
     const newCameraInPlay = cameraInPlay.value.filter((x) => x.id !== camera.id);
+
+    // 如果轮播数只有一轮且摄像头未填充满宫格
+    if (getValidateCameraNum() <= currentGrid.value && totalRound.value === 1) {
+      deleteCameraFromGroup(cameraGroup, camera);
+      restartPlay();
+      return;
+    }
+
     // 用于替代被删除相机的相机index
     let replaceCameraIndex: null | number = null;
 
@@ -213,9 +216,6 @@ export const useCameraGroupList = defineStore('useCameraGroupList', () => {
 
       // 防止掉线相机重连后让endIndex被推后
       endIndex.value = replaceCameraIndex;
-
-      // replaceCameraIndex =
-      //   endIndex.value === carouselList.value.length ? 0 : endIndex.value;
     }
     // 用未播放的相机填充被删除相机
     newCameraInPlay.push(carouselList.value[replaceCameraIndex!]);
@@ -376,6 +376,11 @@ export const useCameraGroupList = defineStore('useCameraGroupList', () => {
     }
   }
 
+  // 正在播放的宫格中的有效相机数
+  function getValidateCameraNum() {
+    return cameraInPlay.value.reduce((sum, camera) => (sum += camera.id > 0 ? 1 : 0), 0);
+  }
+
   // 切换宫格时调整正在轮播中的摄像头列表
   watch(
     () => currentGrid.value,
@@ -418,6 +423,7 @@ export const useCameraGroupList = defineStore('useCameraGroupList', () => {
     stopPlay,
     pausePlay,
     restartPlay,
+    getValidateCameraNum,
     updateCameraStatus,
   };
 });

src/views/disaster/monitor/splitScreenRetrieval/CameraGroupListAndTree/CameraGroupList/CameraGroup.vue

@@ -288,7 +288,8 @@
           line-height: 31.5px;
           border-radius: 4px;
           &:hover {
-            background-color: #c0c4d2;
+            color: #fff;
+            background-color: #1777ff;
             cursor: pointer;
           }
         }
@@ -351,7 +352,7 @@
     svg {
       color: #fff;
     }
-    img {
+    .IconAndGroupName img {
       content: url('@/assets/icons/nine-square-grid/folder-white.png');
     }
   }

src/views/disaster/monitor/splitScreenRetrieval/CameraGroupListAndTree/CameraGroupList/CameraTreeOfGroupList.vue

@@ -1,8 +1,5 @@
 <template>
   <div class="cameraTreeWrapper">
-    <!-- <div class="cameraTreeTitle">
-      <span style="color: black">场景树</span>
-    </div> -->
     <div class="cameraTreeInputWrapper">
       <el-input
         v-model="filterText"
@@ -29,7 +26,7 @@
           <div
             class="treeNode"
             :class="{
-              selectedCamera: isSelected(data.id),
+              selectedCamera: isSelected(node, data.id),
             }"
           >
             <div v-if="data.nodeType === CameraTreeNodeType.camera" class="icons">
@@ -58,11 +55,11 @@
 <script setup lang="ts">
   import { ElInput, ElTree, ElScrollbar } from 'element-plus';
   import { onMounted, ref, watch } from 'vue';
+  import { storeToRefs } from 'pinia';
   import { VideoCamera, WarningFilled, Search } from '@element-plus/icons-vue';
   import { CameraTreeNodeType, getCameraTree } from '@/api/camera/camera-preview';
   import { useCameraGroupList } from '@/store/modules/useCameraGroupList';
   import type { CameraGroupType } from '@/views/disaster/monitor/splitScreenRetrieval/type';
-  import { getVideoRenderUrlKey } from '../../utils';
   import Thumbnail from '@/components/thumbnail/Thumbnail.vue';
 
   interface Tree {
@@ -82,16 +79,15 @@
   const treeEmptyText = ref('');
   const props = defineProps<{ cameraGroup: CameraGroupType }>();
 
-  const { addCameraIntoGroup, deleteCameraFromGroup } = useCameraGroupList();
+  const { cameraInPlay, playingGroup, totalRound } = storeToRefs(useCameraGroupList());
+  const { addCameraIntoGroup, deleteCameraFromGroup, deleteCameraInPlaylist, getValidateCameraNum, restartPlay } =
+    useCameraGroupList();
 
-  const isSelected = (id: number) => {
-    return props.cameraGroup.children.find((x) => x.id === id);
+  const isSelected = (nodeData, id: number) => {
+    return props.cameraGroup.children.find((x) => x.id === id && nodeData.data.nodeType === CameraTreeNodeType.camera);
   };
 
   const handleClickCamera = (nodeData) => {
-    // // 如果点击的不是摄像头或是已失效相机
-    // if (nodeData.nodeType !== CameraTreeNodeType.camera || nodeData.disable)
-
     // 如果点击的不是摄像头
     if (nodeData.nodeType !== CameraTreeNodeType.camera) return;
 
@@ -99,17 +95,25 @@
 
     // 如果该摄像头在分组里，则从分组移除该摄像头，否则添加该摄像头进分组
     if (cameraInGroup) {
-      deleteCameraFromGroup(props.cameraGroup, cameraInGroup);
+      cameraInPlay.value.includes(cameraInGroup)
+        ? deleteCameraInPlaylist(props.cameraGroup, cameraInGroup)
+        : deleteCameraFromGroup(props.cameraGroup, cameraInGroup);
     } else {
       const camera = {
         code: nodeData.code,
         name: nodeData.name,
-        url: nodeData[getVideoRenderUrlKey()],
+        url: nodeData.pushStreamDTO.videoUrls?.pushstreamIp || '',
         id: nodeData.id,
         cameraGroupDetailId: -1,
         imageUrl: '',
       };
+
       addCameraIntoGroup(props.cameraGroup.id, camera);
+
+      // 如果往正在轮播的分组添加相机,且该分组的有效相机数未能填满宫格数，则刷新当前播放的画面
+      if (props.cameraGroup.id === playingGroup.value?.id && getValidateCameraNum() >= 0 && totalRound.value <= 1) {
+        restartPlay();
+      }
     }
   };
 

src/views/disaster/monitor/splitScreenRetrieval/VideosGridBase/CamerasGrid.vue

@@ -89,8 +89,6 @@
       videoUrl,
     );
 
-    console.log('u', u);
-
     return u;
   };
 

src/views/disaster/monitor/splitScreenRetrieval/VideosGridBase/ScreenToolbar.vue

@@ -4,7 +4,7 @@
       <div class="changeGrid">
         <el-tooltip class="box-item" effect="dark" content="一屏" placement="bottom">
           <img
-            src="@/assets/icons/nine-square-grid/oneGrid.png"
+            :src="currentGrid === GridType.oneGrid ? oneGrid_selected : oneGrid"
             class="changeGridIcon"
             :class="currentGrid === GridType.oneGrid ? 'selectedGridIcon' : ''"
             @click="changeGridType(GridType.oneGrid)"
@@ -15,7 +15,7 @@
       <div class="changeGrid">
         <el-tooltip effect="dark" content="四屏" placement="bottom">
           <img
-            src="@/assets/icons/nine-square-grid/fourGrids.png"
+            :src="currentGrid === GridType.fourGrids ? fourGrids_selected : fourGrids"
             class="changeGridIcon"
             :class="currentGrid === GridType.fourGrids ? 'selectedGridIcon' : ''"
             @click="changeGridType(GridType.fourGrids)"
@@ -26,7 +26,7 @@
       <div class="changeGrid">
         <el-tooltip class="box-item" effect="dark" content="九屏" placement="bottom">
           <img
-            src="@/assets/icons/nine-square-grid/nineGrids.png"
+            :src="currentGrid === GridType.nineGrids ? nineGrids_selected : nineGrids"
             class="changeGridIcon"
             :class="currentGrid === GridType.nineGrids ? 'selectedGridIcon' : ''"
             @click="changeGridType(GridType.nineGrids)"
@@ -37,7 +37,7 @@
       <div class="changeGrid">
         <el-tooltip class="box-item" effect="dark" content="十六屏" placement="bottom">
           <img
-            src="@/assets/icons/nine-square-grid/sixteenGrids.png"
+            :src="currentGrid === GridType.sixteenGrids ? sixteenGrids_selected : sixteenGrids"
             class="changeGridIcon"
             :class="currentGrid === GridType.sixteenGrids ? 'selectedGridIcon' : ''"
             @click="changeGridType(GridType.sixteenGrids)"
@@ -128,6 +128,15 @@
   import { userSplitScreenFullScreen } from '@/store/modules/userSplitScreenFullScreen';
   import { useCameraGroupList } from '@/store/modules/useCameraGroupList';
   import { modifyCameraGroupApi } from '@/api/nine-square-grid';
+  import oneGrid from '@/assets/icons/nine-square-grid/oneGrid.png';
+  import oneGrid_selected from '@/assets/icons/nine-square-grid/oneGrid-selected.png';
+  import fourGrids from '@/assets/icons/nine-square-grid/fourGrids.png';
+  import fourGrids_selected from '@/assets/icons/nine-square-grid/fourGrids-selected.png';
+  import nineGrids from '@/assets/icons/nine-square-grid/nineGrids.png';
+  import nineGrids_selected from '@/assets/icons/nine-square-grid/nineGrids-selected.png';
+  import sixteenGrids from '@/assets/icons/nine-square-grid/sixteenGrids.png';
+  import sixteenGrids_selected from '@/assets/icons/nine-square-grid/sixteenGrids-selected.png';
+
   const inputRef = ref();
 
   const { currentGrid } = storeToRefs(userGridType());
@@ -212,10 +221,6 @@
           outline: 1px solid #1777ff;
           color: #1777ff;
         }
-        .selectedGridIcon {
-          width: 25px;
-          background-color: rgba(97, 151, 226, 0.4);
-        }
       }
     }
 

utils/devProxy/staff/proxy.ts

@@ -7,7 +7,7 @@ const proxyStaff: PROXY_TYPE = {
   // serverHost: 'http://192.168.22.146:8802/',
   loginHost: 'http://192.168.13.68:7200/login/#/',
   fileUploadHost: 'http://192.168.13.102:9000/',
-  push_stream_host: 'http://192.168.13.69:8080',
+  push_stream_host: `http://192.168.13.68:7000/skyeye-admin/push_stream_host/`,
 };
 
 // 对外导出的代理

utils/devProxy/utils.ts

@@ -8,6 +8,7 @@ export const createProxyList = (devProxy: PROXY_TYPE) =>
     ['/ws_api_bak/', devProxy.serverHost],
     ['/safety_api/', devProxy.serverHost],
     ['/skyeye-file-upload/', devProxy.fileUploadHost],
+    ['/push_stream_host/', devProxy.push_stream_host],
   ] as ProxyList;
 
 export const createConfig = (appConfigPath: string) => {