From b11f218fb2bf2d606254feba7aa16a68930b92e7 Mon Sep 17 00:00:00 2001 From: mmc <1556375442@qq.com> Date: Thu, 23 Jul 2026 14:04:59 +0800 Subject: [PATCH] =?UTF-8?q?=E5=85=A8=E6=99=AF=E8=A7=86=E9=A2=91=20=20?= =?UTF-8?q?=E6=A0=B9=E6=8D=AE=20=20=E7=8E=8B=E5=8B=87=E7=9A=84=20=E4=BF=AE?= =?UTF-8?q?=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/devices/DeviceStatusPage.tsx | 59 +++- src/components/devices/mowerAllView.jsx | 330 +++++++------------- 2 files changed, 169 insertions(+), 220 deletions(-) diff --git a/src/components/devices/DeviceStatusPage.tsx b/src/components/devices/DeviceStatusPage.tsx index 3281b3c..be4e385 100644 --- a/src/components/devices/DeviceStatusPage.tsx +++ b/src/components/devices/DeviceStatusPage.tsx @@ -1007,12 +1007,68 @@ export default function DeviceStatusPage({ style={{ borderRadius: 12, marginBottom: 8 }} bodyStyle={{ padding: 12, height: 'calc(100vh - 220px)', minHeight: 500 }} > - + + {mowerView == "all" ? <>
+
机器人状态
+
+ 电量: + + {runningStatus.battery !== undefined ? `${runningStatus.battery}%` : '-'} + + 电压: + {runningStatus.voltage !== undefined ? `${Number(runningStatus.voltage).toFixed(2)}V` : '-'} + 左电机: + {runningStatus.leftCurrent !== undefined ? `${Number(runningStatus.leftCurrent).toFixed(2)}A` : '-'} + 右电机: + {runningStatus.rightCurrent !== undefined ? `${Number(runningStatus.rightCurrent).toFixed(2)}A` : '-'} + 左速度: + {runningStatus.leftMeasureSpeed !== undefined ? `${Number(runningStatus.leftMeasureSpeed).toFixed(1)}rpm` : '-'} + 右速度: + {runningStatus.rightMeasureSpeed !== undefined ? `${Number(runningStatus.rightMeasureSpeed).toFixed(1)}rpm` : '-'} + 左温度: + {runningStatus.leftMotorTemp !== undefined ? `${Number(runningStatus.leftMotorTemp).toFixed(1)}℃` : '-'} + 右温度: + {runningStatus.rightMotorTemp !== undefined ? `${Number(runningStatus.rightMotorTemp).toFixed(1)}℃` : '-'} + 主控温度: + {runningStatus.chipTemp !== undefined ? `${Number(runningStatus.chipTemp).toFixed(1)}℃` : '-'} + 航向角: + {runningStatus.yaw !== undefined ? `${Number(runningStatus.yaw).toFixed(1)}°` : '-'} + 俯仰角: + {runningStatus.pitch !== undefined ? `${Number(runningStatus.pitch).toFixed(1)}°` : '-'} + 航向角状态: + {runningStatus.headingStatus !== undefined ? `${runningStatus.headingStatus == 1 ? '初始化' : '未初始化'}` : '-'} + 定位: + + {runningStatus.qual == 0 ? '无效' : + runningStatus.qual == 1 ? 'GPS单点' : + runningStatus.qual == 2 ? 'DGPS差分' : + runningStatus.qual == 4 ? 'RTK固定' : + runningStatus.qual == 5 ? 'RTK浮点' : '未知'} + + 卫星: + {runningStatus.satelliteCnt || 0}颗 + 模式: + + {runningStatus.controlMode == 1 ? '本地' : + runningStatus.controlMode == 3 ? '远程' : '未知'} + +
+
+ : null}
) : (
diff --git a/src/components/devices/mowerAllView.jsx b/src/components/devices/mowerAllView.jsx index 435514c..510a375 100644 --- a/src/components/devices/mowerAllView.jsx +++ b/src/components/devices/mowerAllView.jsx @@ -1,229 +1,123 @@ -import React, { useState, useRef, useEffect, memo } from 'react'; + import VideoPlayer from '../VideoPlayer.tsx'; -import DraggablePanel from './DraggablePanel.jsx'; -// 视频子面板，使用 memo 避免不必要的重渲染 -const VideoSubPanel = memo(({ - idx, - label, - x, - y, - width, - height, - bounds, - serialNumber, - robotVideo, - error, - ready -}) => { - const hasVideo = ready && !error; - if (!hasVideo) return null; +export function MowerAllView({ serialNumber, robotVideo, error, ready }) { return ( - - - ⋮⋮ {label} - -
- - - } - > +
+ {/* ========== 左列：左视 ========== */}
- -
- - ); -}); - -export function MowerAllView({ serialNumber, robotVideo, error, ready, statusData }) { - const containerRef = useRef(null); - const [panelSize, setPanelSize] = useState(null); - const [initialPositions, setInitialPositions] = useState(null); - const [containerBounds, setContainerBounds] = useState(null); - - // 初始化尺寸、窗口缩放重新计算面板尺寸 - useEffect(() => { - const calcSize = () => { - if (!containerRef.current) return; - const rect = containerRef.current.getBoundingClientRect(); - if (rect.width === 0 || rect.height === 0) return; - - const w = rect.width * 0.30; - const h = Math.floor(rect.height * 0.35); - - setPanelSize({ width: w, height: h }); - setContainerBounds({ width: rect.width, height: rect.height }); - setInitialPositions({ - left: { x: 8, y: 8 }, - right: { x: rect.width - w - 8, y: 8 }, - back: { x: (rect.width - w) / 2, y: rect.height - h - 8 } - }); - }; - - calcSize(); - const timer = setTimeout(calcSize, 100); - window.addEventListener('resize', calcSize); - - return () => { - clearTimeout(timer); - window.removeEventListener('resize', calcSize); - }; - }, []); - - return ( -
- {/* 前视主画面 - 铺满 */} -
- -
- - {/* 三个可拖拽子面板 */} - {panelSize && initialPositions && containerBounds && ( - <> - - - - - )} - - {/* 状态详情面板 */} - {statusData && (
-
机器人状态
-
- 电量: - - {statusData.battery !== undefined ? `${statusData.battery}%` : '-'} - - 电压: - {statusData.voltage !== undefined ? `${Number(statusData.voltage).toFixed(2)}V` : '-'} - 左电机: - {statusData.leftCurrent !== undefined ? `${Number(statusData.leftCurrent).toFixed(2)}A` : '-'} - 右电机: - {statusData.rightCurrent !== undefined ? `${Number(statusData.rightCurrent).toFixed(2)}A` : '-'} - 左速度: - {statusData.leftMeasureSpeed !== undefined ? `${Number(statusData.leftMeasureSpeed).toFixed(1)}rpm` : '-'} - 右速度: - {statusData.rightMeasureSpeed !== undefined ? `${Number(statusData.rightMeasureSpeed).toFixed(1)}rpm` : '-'} - 左温度: - {statusData.leftMotorTemp !== undefined ? `${Number(statusData.leftMotorTemp).toFixed(1)}℃` : '-'} - 右温度: - {statusData.rightMotorTemp !== undefined ? `${Number(statusData.rightMotorTemp).toFixed(1)}℃` : '-'} - 主控温度: - {statusData.chipTemp !== undefined ? `${Number(statusData.chipTemp).toFixed(1)}℃` : '-'} - 航向角: - {statusData.yaw !== undefined ? `${Number(statusData.yaw).toFixed(1)}°` : '-'} - 俯仰角: - {statusData.pitch !== undefined ? `${Number(statusData.pitch).toFixed(1)}°` : '-'} - 航向角状态: - {statusData.headingStatus !== undefined ? `${statusData.headingStatus == 1 ? '初始化' : '未初始化'}` : '-'} - 定位: - - {statusData.qual == 0 ? '无效' : - statusData.qual == 1 ? 'GPS单点' : - statusData.qual == 2 ? 'DGPS差分' : - statusData.qual == 4 ? 'RTK固定' : - statusData.qual == 5 ? 'RTK浮点' : '未知'} - - 卫星: - {statusData.satelliteCnt || 0}颗 - 模式: - - {statusData.controlMode == 1 ? '本地' : - statusData.controlMode == 3 ? '远程' : '未知'} - -
+ +
左视
- )} +
+ + {/* ========== 中列：上-前视 下-后视 ========== */} +
+ {/* 前视 */} +
+ +
前视
+
+ {/* 后视 */} +
+ +
后视
+
+
+ + +
+
+ +
右视
+
+
- ); + ) }