全景组件

2026-06-15 09:20:01 +08:00
parent 324c6a88f4
commit 3a542f1aad
1 changed files with 101 additions and 0 deletions
--- a/src/components/devices/mowerAllView.jsx
+++ b/src/components/devices/mowerAllView.jsx
@@ -0,0 +1,101 @@
+
+import VideoPlayer from '../VideoPlayer.tsx';
+
+export function MowerAllView({ serialNumber, robotVideo, error, ready }) {
+	return (
+		<div style={{
+			display: 'flex',
+			flexDirection: 'column',
+			width: '100%',
+			height: '100%',
+			gap: 8, // 窗口之间间距
+			padding: 8,
+			boxSizing: 'border-box',
+			overflow: 'auto' // 固定宽高后超出滚动
+		}}>
+			{/* 第一行：左视 + 前视 + 右视 三等分 */}
+			<div style={{ display: 'flex', gap: 8, justifyContent: 'center' }}>
+				{/* 左视 */}
+				<div style={{
+					flex: 1,
+					position: 'relative',
+					border: '1px solid #eae4e4',
+					flexShrink: 0,// 禁止压缩
+					borderRadius: 8,
+				}}>
+					<VideoPlayer
+						deviceId={serialNumber}
+						idx={3}
+						className="w-full h-full object-contain"
+						video={robotVideo}
+						error={error}
+						ready={ready}
+					/>
+					<div style={{ position: 'absolute', top: 4, left: 8, color: '#fff', fontSize: 12, background: '#0006', padding: '2px 6px', borderRadius: 4 }}>左视</div>
+				</div>
+
+				{/* 前视 */}
+				<div style={{
+					flex: 1,
+					position: 'relative',
+					border: '1px solid #eae4e4',
+					flexShrink: 0,// 禁止压缩
+					borderRadius: 8,
+				}}>
+					<VideoPlayer
+						deviceId={serialNumber}
+						idx={1}
+						className="w-full h-full object-contain"
+						video={robotVideo}
+						error={error}
+						ready={ready}
+					/>
+					<div style={{ position: 'absolute', top: 4, left: 8, color: '#fff', fontSize: 12, background: '#0006', padding: '2px 6px', borderRadius: 4 }}>前视</div>
+				</div>
+
+				{/* 右视 */}
+				<div style={{
+					flex: 1,
+					//width: 360,
+					//height: 240,
+					position: 'relative',
+					border: '1px solid #eae4e4',
+					//flexShrink: 0,// 禁止压缩
+					borderRadius: 8,
+				}}>
+					<VideoPlayer
+						deviceId={serialNumber}
+						idx={4}
+						className="w-full h-full object-contain"
+						video={robotVideo}
+						error={error}
+						ready={ready}
+					/>
+					<div style={{ position: 'absolute', top: 4, left: 8, color: '#fff', fontSize: 12, background: '#0006', padding: '2px 6px', borderRadius: 4 }}>右视</div>
+				</div>
+			</div>
+
+			{/* 第二行：后视 单独一行居中 */}
+			<div style={{ display: 'flex', justifyContent: 'center' }}>
+				<div style={{
+					width: 360,
+					height: 240,
+					position: 'relative',
+					border: '1px solid #eae4e4',
+					flexShrink: 0,// 禁止压缩
+					borderRadius: 8,
+				}}>
+					<VideoPlayer
+						deviceId={serialNumber}
+						idx={2}
+						className="w-full h-full object-contain"
+						video={robotVideo}
+						error={error}
+						ready={ready}
+					/>
+					<div style={{ position: 'absolute', top: 4, left: 8, color: '#fff', fontSize: 12, background: '#0006', padding: '2px 6px', borderRadius: 4 }}>后视</div>
+				</div>
+			</div>
+		</div>
+	)
+}