From f60ecb002cb5d8279351c45423c5f7dc645106e2 Mon Sep 17 00:00:00 2001
From: Zzc <1373857752@qq.com>
Date: Wed, 19 Nov 2025 11:12:18 +0800
Subject: [PATCH] =?UTF-8?q?feat(video):=20=E5=B0=86=E5=AE=9E=E9=99=85?=
 =?UTF-8?q?=E8=A7=86=E9=A2=91=E6=92=AD=E6=94=BE=E4=B8=8EOSS=E6=BA=90?=
 =?UTF-8?q?=E9=9B=86=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

向VideoMonitorItem组件添加视频元素以实现实时播放，更新视频监视器常量以使用OSS URL，并实现从OSS配置生成资源URL的工具函数。这将占位符内容替换为功能性的视频流。
---
 .../RightPanel/VideoMonitorItem.vue           | 28 +++++++++-------
 .../constants.js                              | 14 +++++---
 packages/shared/config/index.js               | 28 ++++++++++++++++
 packages/shared/utils/index.js                | 33 +++++++++++++++++++
 4 files changed, 88 insertions(+), 15 deletions(-)

diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/VideoMonitorItem.vue b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/VideoMonitorItem.vue
index 955bb43..160c5ce 100644
--- a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/VideoMonitorItem.vue
+++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/VideoMonitorItem.vue
@@ -11,7 +11,15 @@
 
     <div class="video-monitor-item__content">
       <div class="video-placeholder">
-        <!-- 这里放置实际的视频流组件 -->
+        <!-- 视频播放器 -->
+        <video
+          :src="monitor.videoSrc"
+          autoplay
+          loop
+          muted
+          playsinline
+        />
+
         <div class="video-time">{{ currentTime }}</div>
 
         <!-- 控制条：叠加在视频底部 -->
@@ -164,17 +172,15 @@ onUnmounted(() => {
       overflow: hidden;
       // margin-bottom: vh(12);
 
-      // 这里可以添加实际的视频组件
-      &::before {
-        content: '';
+      // 视频元素
+      video {
         position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        width: vw(48);
-        height: vh(48);
-        background: url(../../assets/images/SketchPngb3b734375de691a8ba794eee7807988d78f942877ab220ebea0aac3bbddccd8b.png) center/contain no-repeat;
-        opacity: 0.3;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        z-index: 0;
       }
 
       .video-time {
diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/constants.js b/packages/screen/src/views/3DSituationalAwarenessRefactor/constants.js
index 3a08f09..07aa9de 100644
--- a/packages/screen/src/views/3DSituationalAwarenessRefactor/constants.js
+++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/constants.js
@@ -2,6 +2,8 @@
  * 3D态势感知常量配置
  */
 
+import { getVideoUrl } from '@shared/utils'
+
 // 视频监控视角类型
 export const VIDEO_TYPES = {
   PERSONNEL: 'personnel', // 单兵视角
@@ -16,7 +18,8 @@ export const VIDEO_MONITORS = [
     id: 1,
     type: VIDEO_TYPES.PERSONNEL,
     title: '单兵(张三三)设备视角',
-    videoSrc: '/videos/personnel-001.mp4', // 视频源路径
+    // videoSrc: getVideoUrl('demo/ylzg/单兵视角.mp4'), // 从 OSS 获取视频 URL
+    videoSrc: 'http://222.212.85.86:9000/300bdf2b-a150-406e-be63-d28bd29b409f/demo/ylzg/单兵视角.mp4',
     dateRange: '2025/9/1-2025/12/1', // 日期范围
     hasAudio: true,
     hasMegaphone: true,
@@ -27,7 +30,8 @@ export const VIDEO_MONITORS = [
     id: 2,
     type: VIDEO_TYPES.DRONE,
     title: '无人机(001)视角',
-    videoSrc: '/videos/drone-001.mp4',
+    // videoSrc: getVideoUrl('demo/ylzg/无人机视角.mp4'), // 从 OSS 获取视频 URL
+    videoSrc: 'http://222.212.85.86:9000/300bdf2b-a150-406e-be63-d28bd29b409f/demo/ylzg/无人机视角.mp4',
     dateRange: '2025/9/1-2025/12/1',
     hasAudio: false,
     hasMegaphone: true,
@@ -38,7 +42,8 @@ export const VIDEO_MONITORS = [
     id: 3,
     type: VIDEO_TYPES.VEHICLE_EXTERNAL,
     title: '指挥车外部视角',
-    videoSrc: '/videos/vehicle-external-001.mp4',
+    // videoSrc: getVideoUrl('demo/ylzg/单兵视角.mp4'), // 暂时使用单兵视角视频
+    videoSrc: 'http://222.212.85.86:9000/300bdf2b-a150-406e-be63-d28bd29b409f/demo/ylzg/单兵视角.mp4',
     dateRange: '2025/9/1-2025/12/1',
     hasAudio: true,
     hasMegaphone: true,
@@ -49,7 +54,8 @@ export const VIDEO_MONITORS = [
     id: 4,
     type: VIDEO_TYPES.VEHICLE_MEETING,
     title: '指挥车会议视角',
-    videoSrc: '/videos/vehicle-meeting-001.mp4',
+    // videoSrc: getVideoUrl('demo/ylzg/无人机视角.mp4'), // 暂时使用无人机视角视频
+    videoSrc: 'http://222.212.85.86:9000/300bdf2b-a150-406e-be63-d28bd29b409f/demo/ylzg/无人机视角.mp4',
     dateRange: '2025/9/1-2025/12/1',
     hasAudio: true,
     hasMegaphone: true,
diff --git a/packages/shared/config/index.js b/packages/shared/config/index.js
index a019ed6..1001ec0 100644
--- a/packages/shared/config/index.js
+++ b/packages/shared/config/index.js
@@ -16,3 +16,31 @@ export const APP_CONFIG = {
   title: '数据大屏',
   version: '1.0.0'
 }
+
+// OSS 配置
+// 注意: 实际使用时需要从配置中心或环境变量读取,此处为示例配置
+export const OSS_CONFIG = {
+  // http://222.212.85.86:9000/300bdf2b-a150-406e-be63-d28bd29b409f/demo/ylzg/%E5%8D%95%E5%85%B5%E8%A7%86%E8%A7%92.mp4
+  // OSS 服务地址
+  url: import.meta.env.VITE_OSS_URL || 'http://222.212.85.86:9000',
+  // OSS bucket
+  bucket: import.meta.env.VITE_OSS_BUCKET || '300bdf2b-a150-406e-be63-d28bd29b409f'
+}
+
+/**
+ * 获取 OSS 配置
+ * @returns {{url: string, bucket: string}}
+ */
+export const getOssConfig = () => {
+  const { url, bucket } = OSS_CONFIG
+
+  // 确保 URL 包含协议
+  if (url.includes('http://') || url.includes('https://')) {
+    return { url, bucket }
+  } else {
+    return {
+      url: `http://${url}`,
+      bucket
+    }
+  }
+}
diff --git a/packages/shared/utils/index.js b/packages/shared/utils/index.js
index 6d4f38a..836220d 100644
--- a/packages/shared/utils/index.js
+++ b/packages/shared/utils/index.js
@@ -1,3 +1,5 @@
+import { getOssConfig } from '../config'
+
 /**
  * 格式化日期
  * @param {Date|string|number} date
@@ -73,3 +75,34 @@ export function deepClone(obj) {
   }
   return clonedObj
 }
+
+/**
+ * 获取 OSS 资源 URL
+ * @param {string} path - OSS 对象路径,如 'demo/ylzg/单兵视角.mp4'
+ * @returns {string} 完整的 OSS 资源 URL
+ * @example
+ * getAssetUrl('demo/ylzg/单兵视角.mp4')
+ * // => 'http://183.221.225.106:9001/6251daf8-4127-40e0-980d-c86f8a765b20/demo/ylzg/单兵视角.mp4'
+ */
+export function getAssetUrl(path) {
+  const { url, bucket } = getOssConfig()
+  return `${url}/${bucket}/${path}`
+}
+
+/**
+ * 获取视频 URL (getAssetUrl 的别名,用于语义化)
+ * @param {string} path - 视频文件路径
+ * @returns {string} 完整的视频 URL
+ */
+export function getVideoUrl(path) {
+  return getAssetUrl(path)
+}
+
+/**
+ * 获取图片 URL (getAssetUrl 的别名,用于语义化)
+ * @param {string} path - 图片文件路径
+ * @returns {string} 完整的图片 URL
+ */
+export function getImageUrl(path) {
+  return getAssetUrl(path)
+}