-
+
+
+
{{ currentTime }}
@@ -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)
+}