diff --git a/src/views/dashboard1/index.less b/src/views/dashboard1/index.less index c4c4f68..648e6b1 100644 --- a/src/views/dashboard1/index.less +++ b/src/views/dashboard1/index.less @@ -2599,13 +2599,85 @@ box-shadow: inset 0 0 0 1px rgba(62, 177, 248, 0.08); } + // 视频绝对铺满容器:由 object-fit 精确控制缩放,避免高度百分比未解析导致的溢出裁切 .monitor-video { + position: absolute; + inset: 0; width: 100%; height: 100%; + // contain:完整显示画面(比例不符时留边);如需铺满裁切改成 cover object-fit: contain; display: block; // opacity: 0.72; - filter: saturate(0.85) contrast(1.05); + // filter: saturate(0.85) contrast(1.05); + } + + // 全屏按钮与退出全屏按钮:公共外观 + .video-fullscreen-btn, + .video-fullscreen-close { + position: absolute; + z-index: 6; + width: 30px; + height: 28px; + padding: 0; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid rgba(86, 205, 255, 0.22); + background: rgba(9, 43, 82, 0.78); + color: rgba(222, 249, 255, 0.92); + cursor: pointer; + backdrop-filter: blur(1px); + transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; + + &:hover { + border-color: rgba(122, 228, 255, 0.5); + color: #eefcff; + box-shadow: 0 0 12px rgba(77, 190, 255, 0.22); + } + } + + // 进入全屏按钮:画面右下角 + .video-fullscreen-btn { + right: 10px; + bottom: 10px; + } + + // 退出全屏按钮:画面右上角 + .video-fullscreen-close { + right: 10px; + top: 10px; + } + + .video-fullscreen-icon { + width: 16px; + height: 16px; + } + + // 浏览器原生全屏:容器铺满屏幕,画面按 contain 完整显示 + .video-screen:fullscreen { + width: 100%; + height: 100%; + aspect-ratio: auto; + background: rgba(3, 12, 24, 0.99); + border: none; + } + + // 全屏时叠加文字(右上角镜头标签、左下角编号)整体放大,字号随屏幕宽度自适应 + .video-screen:fullscreen .video-overlay { + font-size: clamp(18px, 1.3vw, 36px); + letter-spacing: 1.2px; + } + + // 镜头标签左移并下移,避免与右上角的退出按钮重叠 + .video-screen:fullscreen .video-overlay.top-right { + top: 16px; + right: 64px; + } + + .video-screen:fullscreen .video-overlay.bottom-left { + left: 24px; + bottom: 18px; } .scan-line { diff --git a/src/views/dashboard1/pages/IntegratedCenterPage.vue b/src/views/dashboard1/pages/IntegratedCenterPage.vue index 7136d01..48f43d9 100644 --- a/src/views/dashboard1/pages/IntegratedCenterPage.vue +++ b/src/views/dashboard1/pages/IntegratedCenterPage.vue @@ -1372,6 +1372,36 @@ function closeMapPreview() { mapPreviewVisible.value = false; } +// 视频画面全屏:使用浏览器原生 Fullscreen API,进入浏览器顶层,避免被页面布局/包含块影响 +const whiteScreenRef = ref(null); +const infraredScreenRef = ref(null); +const videoScreenRefs: Record> = { + white: whiteScreenRef, + infrared: infraredScreenRef, +}; +// 当前处于全屏的摄像头通道,null 表示未全屏 +const videoFullscreenKey = ref(null); + +// 进入/退出指定摄像头画面的全屏 +async function toggleVideoFullscreen(key: CameraChannelKey) { + const element = videoScreenRefs[key].value; + if (!element) { + return; + } + if (document.fullscreenElement === element) { + await document.exitFullscreen(); + return; + } + await element.requestFullscreen(); +} + +// 同步原生全屏状态,用于切换按钮图标 +function handleVideoFullscreenChange() { + const current = document.fullscreenElement; + videoFullscreenKey.value = + cameraChannelKeys.find((key) => videoScreenRefs[key].value === current) ?? null; +} + // Esc 关闭预览 function handleMapPreviewKeydown(event: KeyboardEvent) { if (event.key === "Escape" && mapPreviewVisible.value) { @@ -1386,6 +1416,7 @@ onMounted(() => { // startInspectionPolling(); window.addEventListener("blur", stopContinuousControl); window.addEventListener("keydown", handleMapPreviewKeydown); + document.addEventListener("fullscreenchange", handleVideoFullscreenChange); }); onBeforeUnmount(() => { @@ -1395,6 +1426,7 @@ onBeforeUnmount(() => { closeControlSocket(); window.removeEventListener("blur", stopContinuousControl); window.removeEventListener("keydown", handleMapPreviewKeydown); + document.removeEventListener("fullscreenchange", handleVideoFullscreenChange); }); // 切换机器人或视频地址变化时,两路摄像头各自重新拉流 @@ -1814,25 +1846,43 @@ function getStatusClass(status: DeviceItem["status"]) {
-
+
-
实时视频流
白光镜头
{{ currentRobot.id }}
+ + +
视频流连接中...
{{ cameraError.white }}
当前机器人暂无白光视频地址
-
+
-
实时视频流
红外镜头
{{ currentRobot.id }}
+ + +
视频流连接中...
{{ cameraError.infrared }}
当前机器人暂无红外视频地址