Merge branch 'dev-bxy' into 'dev'

feat: 总览新增重点监测区域视频全屏查看功能

See merge request product-group-fe/sfy-safety-group/sfy-safety!89

src/store/modules/userSplitScreenFullScreen.ts

@@ -12,7 +12,7 @@ export const userSplitScreenFullScreen = defineStore('userSplitScreenFullScreen'
     isFullScreen.value = true;
   }
   function exitFullscreen() {
-    if (document.exitFullscreen) document.exitFullscreen();
+    if (document.fullscreenElement && document.exitFullscreen) document.exitFullscreen();
     isFullScreen.value = false;
   }
   return { isFullScreen, curFullScreenType, fullScreen, exitFullscreen };

src/views/disaster/overview/components/KeyMonitorArea.vue

@@ -21,7 +21,15 @@
             alt=""
             class="monitor-no-url"
           />
-          <LiveVideo :url="getCameraUrl(item)" :poster="getCameraImg(item)" />
+          <div class="monitor-video">
+            <LiveVideo :url="getCameraUrl(item)" :poster="getCameraImg(item)" :id="`monitor-livevideo-${index}`" />
+            <img
+              src="@/assets/images/disaster-overview/full-screen.png"
+              alt=""
+              class="full-screen"
+              @click="isFullScreen ? exitFullscreen() : fullScreen(`monitor-livevideo-${index}`, 'overview-monitor')"
+            />
+          </div>
           <div class="monitor-info">
             <img src="@/assets/images/disaster-overview/camera.png" alt="" />
             <span class="camera-name">{{ item.name }}</span>
@@ -34,7 +42,8 @@
 </template>
 
 <script setup lang="ts">
-  import { onMounted, ref } from 'vue';
+  import { onMounted, onUnmounted, ref } from 'vue';
+  import screenfull from 'screenfull';
   import urlJoin from 'url-join';
   import { storeToRefs } from 'pinia';
   import { ElMessage } from 'element-plus';
@@ -43,12 +52,15 @@
   import { useUserInfoHook } from '@/views/disaster/hooks/index';
   import { DISASTER_PERMISSIONS } from '@/views/disaster/constant/index';
   import { useDisasterOverviewMonitor } from '@/store/modules/useDisasterOverviewMonitor';
+  import { userSplitScreenFullScreen } from '@/store/modules/userSplitScreenFullScreen';
   import { CameraInfo, CameraInTree, updateCameraToOverviewGroup } from '@/api/disaster-overview';
 
   const disasterOverviewMonitor = useDisasterOverviewMonitor();
   const { idOfOverview, selectedCameras } = storeToRefs(disasterOverviewMonitor);
   const { getSelectedCameraIds } = disasterOverviewMonitor;
 
+  const { isFullScreen, curFullScreenType } = storeToRefs(userSplitScreenFullScreen());
+  const { fullScreen, exitFullscreen } = userSplitScreenFullScreen();
   const { permissions } = useUserInfoHook();
 
   const monitorEditPermission = ref(false);
@@ -107,6 +119,17 @@
       permissions.find((item: { code: string }) => item.code === DISASTER_PERMISSIONS.OVERVIEW_MONITOR),
     );
   });
+
+  window.onresize = () => {
+    if (!screenfull.isFullscreen) {
+      isFullScreen.value = false; //判断退出全屏，进行赋值
+      curFullScreenType.value = 'single';
+    }
+  };
+
+  onUnmounted(() => {
+    window.onresize = null;
+  });
 </script>
 
 <style scoped lang="scss">
@@ -199,6 +222,19 @@
             height: 100%;
             object-fit: contain;
           }
+
+          .monitor-video {
+            position: relative;
+            width: 100%;
+            height: 100%;
+          }
+
+          .full-screen {
+            position: absolute;
+            bottom: 10px;
+            right: 5px;
+            cursor: pointer;
+          }
         }
 
         .empty-style {