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://cdn.jsdelivr.net">
<link rel="dns-prefetch" href="https://lf-unpkg.volccdn.com">
<link rel="stylesheet" href="/css/widgets.css" media="print" onload="this.media='all'">
<!-- CSS 异步加载，不阻塞页面渲染 -->
<link rel="stylesheet" href="/css/veplayer.css" media="print" onload="this.media='all'">
@@ -74,6 +76,30 @@
</div>
<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>
</html>

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

@@ -265,7 +265,7 @@ export default function RobotTaskPage() {
setExecutingRobot(targetDevice);
setClearNavLine(v => v + 1); // 清空地图轨迹
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);
if (isFirstConnect.current) { isFirstConnect.current = false; controllerRef.current?.connectDevice(targetDevice); } else { controllerRef.current?.switchDevice(targetDevice); }
setShowVideo(true);
//setShowVideo(true);
}, [devices, taskPoolList, executingRobot, runningPoolTask]);
useEffect(() => {
@@ -540,7 +540,7 @@ export default function RobotTaskPage() {
setExecutingRobot(targetDevice);
setClearNavLine(v => v + 1); // 清空地图轨迹
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>
</Modal>
{showVideo && executingRobot && execute && taskPoolList.length > 0 && (
{/*{showVideo && executingRobot && execute && taskPoolList.length > 0 && (
<DraggableBox
defaultPosition={{ x: 50, y: 50 }}
title={t('devices.robotPanoramaVideo', { robot: executingRobot.deviceAlias || executingRobot.serialNumber })}
@@ -1894,7 +1894,7 @@ export default function RobotTaskPage() {
/>
</div>
</DraggableBox>
)}
)}*/}
</div >
);
}

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

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

94
vite.config.ts
View File

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