IOT/web-Iot
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化机器人任务 界面 匹配和实时经纬度

Browse Source
This commit is contained in:
mmc
2026-09-21 15:13:28 +08:00
parent 0e95bb0c96
commit 1e516414d7
4 changed files with 93 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
index.html
View File

@@ -12,6 +12,8 @@
<link rel="dns-prefetch" href="https://unpkg.com"> <link rel="dns-prefetch" href="https://unpkg.com">
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net"> <link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
<link rel="dns-prefetch" href="https://lf-unpkg.volccdn.com"> <link rel="dns-prefetch" href="https://lf-unpkg.volccdn.com">
<link rel="stylesheet" href="/css/widgets.css" media="print" onload="this.media='all'">
<!-- CSS 异步加载，不阻塞页面渲染 --> <!-- CSS 异步加载，不阻塞页面渲染 -->
<link rel="stylesheet" href="/css/veplayer.css" media="print" onload="this.media='all'"> <link rel="stylesheet" href="/css/veplayer.css" media="print" onload="this.media='all'">
@@ -74,6 +76,30 @@
</div> </div>
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/main.tsx"></script>
<script>
// 等页面加载完成后，再异步加载地图/视频库，不阻塞首屏
window.addEventListener('DOMContentLoaded', () => {
const loadScript = (src) => {
return new Promise((resolve) => {
const s = document.createElement('script');
s.src = src;
s.async = true;
s.onload = resolve;
document.body.appendChild(s);
});
};
// 按顺序加载
Promise.resolve()
//.then(() => loadScript('/js/jswebrtc.min.js'))
//.then(() => loadScript('/js/jswebrtcnew.js'))
//.then(() => loadScript('https://cdn.jsdelivr.net/npm/cesium@latest/Build/Cesium/Cesium.js'))
.then(() => {
console.log('✅ 所有地图/视频SDK加载完成');
window.CESIUM_BASE_URL = "https://cdnjs.cloudflare.com/ajax/libs/cesium/1.114.0/";
});
});
</script>
</body> </body>
</html> </html>

10
src/components/devices/RobotTaskPage.tsx
View File

@@ -265,7 +265,7 @@ export default function RobotTaskPage() {
setExecutingRobot(targetDevice); setExecutingRobot(targetDevice);
setClearNavLine(v => v + 1); // 清空地图轨迹 setClearNavLine(v => v + 1); // 清空地图轨迹
if (isFirstConnect.current) { isFirstConnect.current = false; controllerRef.current?.connectDevice(targetDevice); } else { controllerRef.current?.switchDevice(targetDevice); } if (isFirstConnect.current) { isFirstConnect.current = false; controllerRef.current?.connectDevice(targetDevice); } else { controllerRef.current?.switchDevice(targetDevice); }
setShowVideo(true); //setShowVideo(true);
}; };
@@ -336,7 +336,7 @@ export default function RobotTaskPage() {
console.log('🔄 检测到正在执行任务的新设备，开始连接', targetDevice); console.log('🔄 检测到正在执行任务的新设备，开始连接', targetDevice);
if (isFirstConnect.current) { isFirstConnect.current = false; controllerRef.current?.connectDevice(targetDevice); } else { controllerRef.current?.switchDevice(targetDevice); } if (isFirstConnect.current) { isFirstConnect.current = false; controllerRef.current?.connectDevice(targetDevice); } else { controllerRef.current?.switchDevice(targetDevice); }
setShowVideo(true); //setShowVideo(true);
}, [devices, taskPoolList, executingRobot, runningPoolTask]); }, [devices, taskPoolList, executingRobot, runningPoolTask]);
useEffect(() => { useEffect(() => {
@@ -540,7 +540,7 @@ export default function RobotTaskPage() {
setExecutingRobot(targetDevice); setExecutingRobot(targetDevice);
setClearNavLine(v => v + 1); // 清空地图轨迹 setClearNavLine(v => v + 1); // 清空地图轨迹
if (isFirstConnect.current) { isFirstConnect.current = false; controllerRef.current?.connectDevice(targetDevice); } else { controllerRef.current?.switchDevice(targetDevice); } if (isFirstConnect.current) { isFirstConnect.current = false; controllerRef.current?.connectDevice(targetDevice); } else { controllerRef.current?.switchDevice(targetDevice); }
setShowVideo(true); //setShowVideo(true);
} }
} }
@@ -1879,7 +1879,7 @@ export default function RobotTaskPage() {
</div> </div>
</Modal> </Modal>
{showVideo && executingRobot && execute && taskPoolList.length > 0 && ( {/*{showVideo && executingRobot && execute && taskPoolList.length > 0 && (
<DraggableBox <DraggableBox
defaultPosition={{ x: 50, y: 50 }} defaultPosition={{ x: 50, y: 50 }}
title={t('devices.robotPanoramaVideo', { robot: executingRobot.deviceAlias || executingRobot.serialNumber })} title={t('devices.robotPanoramaVideo', { robot: executingRobot.deviceAlias || executingRobot.serialNumber })}
@@ -1894,7 +1894,7 @@ export default function RobotTaskPage() {
/> />
</div> </div>
</DraggableBox> </DraggableBox>
)} )}*/}
</div > </div >
); );
} }

16
src/components/devices/deviceController.js
View File

@@ -279,12 +279,15 @@ export default class DeviceController {
this.isControlled = false; this.isControlled = false;
this.onControlStatusChange?.(false); this.onControlStatusChange?.(false);
// 切换任务/设备：先清掉上一个设备的实时坐标，避免轨迹残留到新设备
this.onLocationInfoUpdate?.(null);
wsManager.close(); wsManager.close();
try { try {
console.log('Connecting to', this.wsUrl); console.log('Connecting to', this.wsUrl);
wsManager.connect(sn, this.wsUrl);
this.connectedDeviceSn = sn; this.connectedDeviceSn = sn;
wsManager.connect(sn, this.wsUrl);
await this.getControl(sn); await this.getControl(sn);
} catch (err) { } catch (err) {
@@ -313,6 +316,9 @@ export default class DeviceController {
this.isControlled = false; this.isControlled = false;
this.onControlStatusChange?.(false); this.onControlStatusChange?.(false);
// 切换设备：清掉上一个设备的实时坐标，避免轨迹残留
this.onLocationInfoUpdate?.(null);
wsManager.send({ wsManager.send({
type: 'AUTH', type: 'AUTH',
token: this.userInfo.token, token: this.userInfo.token,
@@ -392,6 +398,10 @@ export default class DeviceController {
msg.data.forEach((item) => { msg.data.forEach((item) => {
data[item.name] = item.value; data[item.name] = item.value;
}); });
// 切换任务/切换设备时，忽略上一个设备遗留的实时数据
if (data?.deviceId && data.deviceId !== this.connectedDeviceSn) {
break;
}
this.wsDeviceInfo = data; this.wsDeviceInfo = data;
this.onDeviceInfoUpdate?.(data); this.onDeviceInfoUpdate?.(data);
break; break;
@@ -401,6 +411,10 @@ export default class DeviceController {
msg.data.forEach((item) => { msg.data.forEach((item) => {
data[item.name] = item.value; data[item.name] = item.value;
}); });
// 切换任务/切换设备时，忽略上一个设备遗留的实时经纬度，只显示当前连接设备的实时轨迹
if (data?.deviceId && data.deviceId !== this.connectedDeviceSn) {
break;
}
this.locationInfo = data; this.locationInfo = data;
this.onLocationInfoUpdate?.(data); this.onLocationInfoUpdate?.(data);
break; break;

94
vite.config.ts
View File

@@ -52,59 +52,59 @@ export default defineConfig(({ mode }) => {
output: { output: {
// ---- 手动分包策略 ---- // ---- 手动分包策略 ----
// 将第三方库按类型拆分，利于浏览器并行加载与长期缓存 // 将第三方库按类型拆分，利于浏览器并行加载与长期缓存
manualChunks(id) { //manualChunks(id) {
if (!id.includes('node_modules')) return; // if (!id.includes('node_modules')) return;
// 1. React 生态 // // 1. React 生态
if ( // if (
id.includes('node_modules/react') || // id.includes('node_modules/react') ||
id.includes('node_modules/react-dom') || // id.includes('node_modules/react-dom') ||
id.includes('node_modules/react-router') || // id.includes('node_modules/react-router') ||
id.includes('node_modules/react-redux') || // id.includes('node_modules/react-redux') ||
id.includes('node_modules/@reduxjs') || // id.includes('node_modules/@reduxjs') ||
id.includes('node_modules/scheduler') // id.includes('node_modules/scheduler')
) { // ) {
return 'react-vendor'; // return 'react-vendor';
} // }
// 2. Ant Design 组件库 // // 2. Ant Design 组件库
if ( // if (
id.includes('node_modules/antd') || // id.includes('node_modules/antd') ||
id.includes('node_modules/@ant-design') || // id.includes('node_modules/@ant-design') ||
id.includes('node_modules/@rc-component') || // id.includes('node_modules/@rc-component') ||
id.includes('node_modules/rc-') // id.includes('node_modules/rc-')
) { // ) {
return 'antd-vendor'; // return 'antd-vendor';
} // }
// 3. 图表库（echarts / recharts 体积较大） // // 3. 图表库（echarts / recharts 体积较大）
if ( // if (
id.includes('node_modules/echarts') || // id.includes('node_modules/echarts') ||
id.includes('node_modules/recharts') || // id.includes('node_modules/recharts') ||
id.includes('node_modules/zrender') // id.includes('node_modules/zrender')
) { // ) {
return 'charts-vendor'; // return 'charts-vendor';
} // }
// 4. 实时音视频 SDK // // 4. 实时音视频 SDK
if ( // if (
id.includes('node_modules/agora-rtc-sdk-ng') || // id.includes('node_modules/agora-rtc-sdk-ng') ||
id.includes('node_modules/@volcengine/rtc') // id.includes('node_modules/@volcengine/rtc')
) { // ) {
return 'rtc-vendor'; // return 'rtc-vendor';
} // }
// 5. 仅在特定页面使用的重库，单独拆分按需加载（不进首屏 vendor） // // 5. 仅在特定页面使用的重库，单独拆分按需加载（不进首屏 vendor）
if (id.includes('node_modules/mqtt')) return 'mqtt-vendor'; // if (id.includes('node_modules/mqtt')) return 'mqtt-vendor';
if (id.includes('node_modules/socket.io-client')) return 'socket-vendor'; // if (id.includes('node_modules/socket.io-client')) return 'socket-vendor';
if (id.includes('node_modules/docx')) return 'docx-vendor'; // if (id.includes('node_modules/docx')) return 'docx-vendor';
if (id.includes('node_modules/qrcode')) return 'qrcode-vendor'; // if (id.includes('node_modules/qrcode')) return 'qrcode-vendor';
if (id.includes('node_modules/country-state-city')) return 'csc-vendor'; // if (id.includes('node_modules/country-state-city')) return 'csc-vendor';
if (id.includes('node_modules/flv.js')) return 'flv-vendor'; // if (id.includes('node_modules/flv.js')) return 'flv-vendor';
// 6. 其他 node_modules（首屏通用依赖：axios、i18next、lodash 等） // // 6. 其他 node_modules（首屏通用依赖：axios、i18next、lodash 等）
return 'vendor'; // return 'vendor';
}, //},
}, },
}, },
}, },