From 021d3cf3843ed11ef2d13684bac9bbb983e8a812 Mon Sep 17 00:00:00 2001 From: mmc <1556375442@qq.com> Date: Fri, 22 May 2026 08:03:30 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A7=86=E9=A2=91=E6=88=90=E5=8A=9F=20?= =?UTF-8?q?=E5=8E=9F=E5=9B=A0=20token=E5=8E=9F=E5=9B=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- env.js | 2 +- index.html | 6 +- src/components/Map.jsx | 22 ++-- src/components/VideoCanvas.tsx | 8 +- src/components/devices/DeviceStatusPage.tsx | 106 ++++++++++++++++---- src/components/useWebRTCStream.tsx | 4 +- 6 files changed, 108 insertions(+), 40 deletions(-) diff --git a/env.js b/env.js index 1306d9c..220600d 100644 --- a/env.js +++ b/env.js @@ -14,7 +14,7 @@ const envConfig = { WS_URL: 'ws://192.168.2.59:9002/ws/', }, [ENV.PROD]: { - // baseURL: 'http://192.168.2.56:8081', + //baseURL: 'https://pvcloudservice.satabot.com', baseURL: 'http://1.95.137.212:59015',//http://192.168.2.56:8081 //baseURL: 'https://serviceri.satabot.com', WS_URL: 'ws://1.95.137.212:59017/ws/' diff --git a/index.html b/index.html index 532a651..4aaa597 100644 --- a/index.html +++ b/index.html @@ -21,6 +21,8 @@ + + @@ -44,8 +46,8 @@ // 按顺序加载 Promise.resolve() - .then(() => loadScript('/js/jswebrtc.min.js')) - .then(() => loadScript('/js/jswebrtcnew.js')) + //.then(() => loadScript('/js/jswebrtc.min.js')) + //.then(() => loadScript('/js/jswebrtcnew.js')) .then(() => loadScript('https://unpkg.com/leaflet@1.9.4/dist/leaflet.js')) .then(() => loadScript('https://cdn.jsdelivr.net/npm/cesium@latest/Build/Cesium/Cesium.js')) .then(() => loadScript('https://cdn.jsdelivr.net/npm/hls.js@1.5.8/dist/hls.min.js')) diff --git a/src/components/Map.jsx b/src/components/Map.jsx index 150c9d2..08f4d6b 100644 --- a/src/components/Map.jsx +++ b/src/components/Map.jsx @@ -107,7 +107,7 @@ export default function CesiumMap({ realtimePosition, pathPoints = [], devices = id, position: window.Cesium.Cartesian3.fromDegrees(p.lon, p.lat), point: { - color: window.Cesium.Color.SKYBLUE, + color: window.Cesium?.Color.SKYBLUE, pixelSize: 10, disableDepthTestDistance: Number.POSITIVE_INFINITY, }, @@ -115,7 +115,7 @@ export default function CesiumMap({ realtimePosition, pathPoints = [], devices = text: `${i + 1}`, font: '12px sans-serif', pixelOffset: new window.Cesium.Cartesian2(0, -15), - fillColor: window.Cesium.Color.WHITE + fillColor: window.Cesium?.Color.WHITE } }); pointEntitiesRef.current.push(id); @@ -133,7 +133,7 @@ export default function CesiumMap({ realtimePosition, pathPoints = [], devices = polyline: { positions: positions, width: 4, - material: window.Cesium.Color.SKYBLUE, + material: window.Cesium?.Color.SKYBLUE, clampToGround: true, } }); @@ -202,9 +202,9 @@ export default function CesiumMap({ realtimePosition, pathPoints = [], devices = positions: positions, width: 3, material: new Cesium.PolylineDashMaterialProperty({ - color: Cesium.Color.BLUE, + color: Cesium?.Color.BLUE, dashLength: 16, - gapColor: Cesium.Color.TRANSPARENT, + gapColor: Cesium?.Color.TRANSPARENT, }), clampToGround: true, disableDepthTestDistance: Number.POSITIVE_INFINITY, @@ -656,9 +656,9 @@ export default function CesiumMap({ realtimePosition, pathPoints = [], devices = text: robot.name, font: "14px sans-serif", pixelOffset: new window.Cesium.Cartesian2(0, -40), - fillColor: window.Cesium.Color.WHITE, + fillColor: window.Cesium?.Color.WHITE, showBackground: true, - backgroundColor: window.Cesium.Color.BLACK.withAlpha(0.6) + backgroundColor: window.Cesium?.Color.BLACK.withAlpha(0.6) } }); entity.robotData = robot; @@ -685,7 +685,7 @@ export default function CesiumMap({ realtimePosition, pathPoints = [], devices = }) }); viewerRef.current = viewer; - viewer.scene.globe.baseColor = window.Cesium.Color.BLACK; + viewer.scene.globe.baseColor = window.Cesium?.Color.BLACK; viewer.scene.globe.depthTestAgainstTerrain = false; viewer.scene.requestRenderMode = true; // 👈 加这个（只在需要时渲染） viewer.scene.globe.enableLighting = false; @@ -854,9 +854,9 @@ export default function CesiumMap({ realtimePosition, pathPoints = [], devices = text: device.name || "", font: "12px sans-serif", pixelOffset: new Cesium.Cartesian2(0, -40), - fillColor: Cesium.Color.WHITE, + fillColor: Cesium?.Color.WHITE, showBackground: true, - backgroundColor: Cesium.Color.BLACK.withAlpha(0.6) + backgroundColor: Cesium?.Color.BLACK.withAlpha(0.6) }, properties: { @@ -1259,7 +1259,7 @@ export default function CesiumMap({ realtimePosition, pathPoints = [], devices = material: new Cesium.PolylineGlowMaterialProperty({ glowPower: 0.25, - color: Cesium.Color.LIME + color: Cesium?.Color.LIME }), clampToGround: true, diff --git a/src/components/VideoCanvas.tsx b/src/components/VideoCanvas.tsx index 99a44c4..4e1a87c 100644 --- a/src/components/VideoCanvas.tsx +++ b/src/components/VideoCanvas.tsx @@ -151,13 +151,13 @@ const VideoCanvas: React.FC = ({ video, idx, title, className, noCrop }) />
-
+ {/*
{title} -
-
+
*/} + {/*
LIVE -
+
*/}
); diff --git a/src/components/devices/DeviceStatusPage.tsx b/src/components/devices/DeviceStatusPage.tsx index c814692..69296b3 100644 --- a/src/components/devices/DeviceStatusPage.tsx +++ b/src/components/devices/DeviceStatusPage.tsx @@ -42,6 +42,9 @@ import { RootState } from '@/src/store/index.ts'; import { useWebRTCPlayer } from '../useWebRTCStream.tsx'; import VideoPlayer from '../VideoPlayer.tsx'; import DeviceController from './DeviceController'; +import { DatePicker } from 'antd'; +import dayjs from 'dayjs'; +const { RangePicker } = DatePicker; const { Text } = Typography; @@ -62,6 +65,13 @@ export default function DeviceStatusPage({ const [connecting, setConnecting] = useState(false); const [wsStatus, setWsStatus] = useState('disconnected'); const [wsDeviceInfo, setWsDeviceInfo] = useState({}); + const [selectedDrone, setSelectedDrone] = useState(null); + const [taskList, setTaskList] = useState([]); + + // 👇 加上这两个 + const [queryTimeRange, setQueryTimeRange] = useState([]); // 时间范围 + const [startTimestamp, setStartTimestamp] = useState(''); // 开始时间戳 + const [endTimestamp, setEndTimestamp] = useState(''); // 结束时间戳 const [isModalOpen, setIsModalOpen] = useState(false); const [modalContent, setModalContent] = useState({ @@ -303,7 +313,7 @@ export default function DeviceStatusPage({ - + {/**/} )} @@ -311,10 +321,10 @@ export default function DeviceStatusPage({
{isUAV ? ( @@ -325,11 +335,10 @@ export default function DeviceStatusPage({ style={{ position: 'relative', flex: 1, + height: '100%', }} > - -
)) ) : ( @@ -338,22 +347,79 @@ export default function DeviceStatusPage({ ) ) : robotVideo ? ( - + // 全景模式 = 4 分屏 + mowerView === 'all' ? ( +
+ {/* 前 */} +
+ +
前视
+
+ {/* 后 */} +
+ +
后视
+
+ {/* 左 */} +
+ +
左视
+
+ {/* 右 */} +
+ +
右视
+
+
+ ) : ( + // 单画面模式 + + ) ) : (
视频加载中... diff --git a/src/components/useWebRTCStream.tsx b/src/components/useWebRTCStream.tsx index 5e139b1..c1478e8 100644 --- a/src/components/useWebRTCStream.tsx +++ b/src/components/useWebRTCStream.tsx @@ -47,8 +47,8 @@ export function useWebRTCPlayer(deviceId: string, url: string) { v.style.height = '100%'; v.style.objectFit = 'contain'; videoRef.current = v; - - const token = localStorage.getItem('videotoken') || JSON.parse(localStorage.getItem('userInfo') || '{}')?.token; + const token = "eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6Ijk2ZTQyYzJlLTYwNWMtNGU5MS05ZTJkLWE2NWUxM2VjZTMyZiJ9.l-F0LGxnfUD2WuATaHK7bYlguorGpGkkOR3Qpga7CWU1S_GiRI6U3At0gjOqx7DasZS7ChVsC_Csp6DX6HfArw" + //const token = localStorage.getItem('videotoken') || JSON.parse(localStorage.getItem('userInfo') || '{}')?.token; const videoUrl = `${url}?token=${token}`; try {