setActiveType('routeGen')}
diff --git a/src/components/devices/RobotTaskPage.tsx b/src/components/devices/RobotTaskPage.tsx
index 3915eda..b84fba2 100644
--- a/src/components/devices/RobotTaskPage.tsx
+++ b/src/components/devices/RobotTaskPage.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useMemo } from 'react';
+import React, { useState, useEffect, useRef, useMemo } from 'react';
import {
Row, Col, Card, Button, Space, Table, Tag, Typography, Progress, Badge,
Tabs, Input, Switch, Divider, Tooltip, Timeline, Select, message, DatePicker,
@@ -16,13 +16,15 @@ import {
CloseOutlined,
ReloadOutlined,
ExclamationCircleOutlined,
- EnvironmentOutlined
+ EnvironmentOutlined,
+ EnvironmentFilled
} from '@ant-design/icons';
import {
Car, Navigation, Wind, Thermometer, Droplets, Satellite,
LayoutGrid, Clock, CheckCircle2, AlertCircle, Zap, Waves,
Calendar, User, TrendingUp, Maximize2, Play, Square, X, MapPin, RotateCw
} from 'lucide-react';
+import TaskTypeRadio from '../taskRadio/taskRadio';
import {
getRobotRouteList,
@@ -39,6 +41,7 @@ import {
getRouteByTask,
deleteRoute,
getTaskPath,
+ createRegionDefaultTask,
} from '../../api/device';
import dayjs from 'dayjs';
import DraggableBox from '../Draggable';
@@ -53,6 +56,7 @@ import Draggable, { DraggableData, DraggableEvent } from 'react-draggable';
import { MowerAllView } from './mowerAllView.jsx';
import { useWebRTCPlayer } from '../useWebRTCStream.js';
import { useTranslation } from 'react-i18next';
+import { getStationRegions } from '@/api/stationManage/index.js';
const { Text, Title } = Typography;
const { RangePicker } = DatePicker;
@@ -472,8 +476,26 @@ export default function RobotTaskPage() {
}, [userInfo, stationId]);
// 新建任务弹窗状态
- const [isTaskModalOpen, setIsTaskModalOpen] = useState(false);
const [selectedPathWork, setSelectedPathWork] = useState(null);
+ // ===== 任务下发表单 =====
+ const [dispatchSource, setDispatchSource] = useState('route'); // 'route' | 'region'
+ const [dispatchMode, setDispatchMode] = useState('immediate'); // 'immediate' | 'scheduled'
+ const [dispatchRouteIds, setDispatchRouteIds] = useState([]);
+ const [dispatchRegionIds, setDispatchRegionIds] = useState([]);
+ const [dispatchRobotSns, setDispatchRobotSns] = useState([]);
+ const [regionList, setRegionList] = useState([]);
+ const [scheduleForm, setScheduleForm] = useState({
+ planName: '',
+ repeatPlan: 'DAY',
+ days: [],
+ dayOfMonth: [],
+ startDate: '',
+ dayTime: '',
+ excuteDayStartTime: '',
+ excuteDayEndTime: '',
+ });
+ const [dispatchLoading, setDispatchLoading] = useState(false);
+ const [focusOverlay, setFocusOverlay] = useState(null); // 地图定位：region / route
// 获取任务列表数据
const fetchTaskList = async () => {
@@ -1204,6 +1226,214 @@ export default function RobotTaskPage() {
color: '#165DFF'
}];
+
+ // ===== 分区列表 =====
+ useEffect(() => {
+ if (!stationId) return;
+ getStationRegions({ siteId: stationId }).then((res) => {
+ const list = Array.isArray(res?.data) ? res.data : (Array.isArray(res?.rows) ? res.rows : []);
+ setRegionList(list);
+ }).catch(() => setRegionList([]));
+ }, [stationId]);
+
+ // 按区域下发时，选中区域的可用路径（bindRoutes + defaultRoute）
+ const regionAvailableRoutes = useMemo(() => {
+ const ids = new Set();
+ regionList.forEach(r => {
+ if (dispatchRegionIds.includes(r.id)) {
+ (r.bindRoutes || []).forEach(id => ids.add(Number(id)));
+ if (r.defaultRoute != null) ids.add(Number(r.defaultRoute));
+ }
+ });
+ return (routeList || []).filter(rt => ids.has(rt.id));
+ }, [regionList, dispatchRegionIds, routeList]);
+
+ // 定时任务：周/月选项
+ const weekDays = [
+ { label: t('devices.wdSun'), value: 'SUNDAY' },
+ { label: t('devices.wdMon'), value: 'MONDAY' },
+ { label: t('devices.wdTue'), value: 'TUESDAY' },
+ { label: t('devices.wdWed'), value: 'WEDNESDAY' },
+ { label: t('devices.wdThu'), value: 'THURSDAY' },
+ { label: t('devices.wdFri'), value: 'FRIDAY' },
+ { label: t('devices.wdSat'), value: 'SATURDAY' },
+ ];
+ const monthDays = Array.from({ length: 31 }, (_, i) => (i + 1).toString());
+
+ const toggleScheduleDay = (val) => {
+ setScheduleForm(prev => {
+ const exists = prev.days.includes(val);
+ return { ...prev, days: exists ? prev.days.filter(d => d !== val) : [...prev.days, val] };
+ });
+ };
+ const toggleScheduleMonthDay = (val) => {
+ setScheduleForm(prev => {
+ const exists = prev.dayOfMonth.includes(val);
+ return { ...prev, dayOfMonth: exists ? prev.dayOfMonth.filter(d => d !== val) : [...prev.dayOfMonth, val] };
+ });
+ };
+ const handleScheduleDateChange = (date) => {
+ if (!date) return;
+ setScheduleForm(prev => ({ ...prev, startDate: date.format('YYYY-MM-DD') }));
+ };
+ const handleScheduleTimeChange = (time, timeString) => {
+ setScheduleForm(prev => ({ ...prev, dayTime: timeString }));
+ };
+ const handleScheduleCycleChange = (dates) => {
+ if (!dates || !dates[0] || !dates[1]) return;
+ setScheduleForm(prev => ({
+ ...prev,
+ excuteDayStartTime: dates[0].format('YYYY-MM-DD HH:mm:ss'),
+ excuteDayEndTime: dates[1].format('YYYY-MM-DD HH:mm:ss'),
+ }));
+ };
+ // 选中路线后飞到该路线并绘制
+ const flyToRoute = async (routeId) => {
+ try {
+ const res = await getSingleRouteList({ id: routeId });
+ const pathPoints = res?.data?.jsonData?.path || [];
+ if (pathPoints.length > 0) {
+ setPolyPoints(pathPoints);
+ setRouteMode(res?.data?.mode || '');
+ setFocusOverlay({ type: 'route', points: pathPoints, nonce: Date.now() });
+ }
+ } catch (e) {
+ console.error('flyToRoute error', e);
+ }
+ };
+
+ // 取消：清空所有选择
+ const handleDispatchCancel = () => {
+ setDispatchRouteIds([]);
+ setDispatchRegionIds([]);
+ setDispatchRobotSns([]);
+ setDispatchMode('immediate');
+ setScheduleForm({
+ planName: '',
+ repeatPlan: 'DAY',
+ days: [],
+ dayOfMonth: [],
+ startDate: '',
+ dayTime: '',
+ excuteDayStartTime: '',
+ excuteDayEndTime: '',
+ });
+ setPolyPoints([]);
+ setRouteMode('');
+ setFocusOverlay(null);
+ };
+
+
+
+ // 统一下发任务（立即执行 / 定时任务）
+ const handleDispatchTask = async () => {
+
+ if (dispatchRouteIds.length === 0) {
+ utils.message.warning(t('devices.taskSelectRouteFirst'));
+ return;
+ }
+ if (dispatchRobotSns.length === 0) {
+ utils.message.warning(t('devices.taskSelectRobotFirst'));
+ return;
+ }
+ setDispatchLoading(true);
+ try {
+ const routes = (routeList || []).filter(r => dispatchRouteIds.includes(r.id));
+ console.log('routes', routes);
+ if (dispatchMode === 'immediate' && dispatchSource == "route") {
+ let success = true;
+ for (const route of routes) {
+ const params = {
+ deviceId: dispatchRobotSns,
+ routeId: route.id,
+ siteId: stationId,
+ ...(currentStation?.orgId ? { orgId: currentStation.orgId } : {}),
+ };
+ console.log('params', params);
+
+ const res = await excuetRoute(params);
+ if (res.code !== 200) {
+ success = false;
+ utils.message.error(`${route.workName || route.name} - ${res.msg || t('devices.createFailed')}`);
+ }
+ }
+ if (success) {
+ utils.message.success(t('devices.taskExecSuccess'));
+ const firstRobot = devices?.find(d => d.serialNumber === dispatchRobotSns);
+ if (firstRobot) {
+ setExecute(true);
+ setExecutingRobot(firstRobot);
+ setClearNavLine(v => v + 1);
+ }
+
+
+ fetchTaskList();
+ fetchTaskPoolList();
+ fetchTaskHistoryList();
+ }
+ } else if (dispatchMode === 'immediate' && dispatchSource == "region") {
+ const data = {
+ deviceId: dispatchRobotSns,
+ siteId: stationId,
+ orgId: currentStation?.orgId,
+ regionId: dispatchRegionIds,
+ routeId: dispatchRouteIds,
+ }
+ createRegionDefaultTask(data)
+ } else {
+ if (!scheduleForm.planName) {
+ utils.message.error(t('devices.fillRequired', { fields: t('devices.taskName') }));
+ setDispatchLoading(false);
+ return;
+ }
+ if (!scheduleForm.dayTime) {
+ utils.message.error(t('devices.selectExecTime'));
+ setDispatchLoading(false);
+ return;
+ }
+ let rules = { type: scheduleForm.repeatPlan };
+ if (scheduleForm.repeatPlan === 'DAY') {
+ rules = { type: 'DAY', startDate: scheduleForm.startDate, dayTime: scheduleForm.dayTime };
+ } else if (scheduleForm.repeatPlan === 'WEEK') {
+ rules = { type: 'WEEK', days: scheduleForm.days, dayTime: scheduleForm.dayTime };
+ } else if (scheduleForm.repeatPlan === 'MONTH') {
+ rules = { type: 'MONTH', dayOfMonth: scheduleForm.dayOfMonth, dayTime: scheduleForm.dayTime };
+ }
+ let success = true;
+ for (const sn of dispatchRobotSns) {
+ for (const route of routes) {
+ const finalData = {
+ deviceId: sn,
+ orgId: currentStation?.orgId,
+ planName: scheduleForm.planName,
+ routeId: route.id,
+ siteId: stationId,
+ deviceTaskPlanRules: rules,
+ startTime: scheduleForm.excuteDayStartTime,
+ finishTime: scheduleForm.excuteDayEndTime,
+ };
+ const res = await saveDeviceTask(finalData);
+ if (res.code !== 200) {
+ success = false;
+ utils.message.error(res.msg || t('devices.createFailed'));
+ }
+ }
+ }
+ if (success) {
+ utils.message.success(t('devices.taskCreated'));
+ fetchTaskList();
+ fetchTaskPoolList();
+ fetchTaskHistoryList();
+ }
+ }
+ } catch (err) {
+ console.error('下发任务失败：', err);
+ utils.message.error(t('devices.createTaskError'));
+ } finally {
+ setDispatchLoading(false);
+ }
+ };
+
return (
@@ -1320,7 +1550,7 @@ export default function RobotTaskPage() {
styles={{ body: { padding: 0, position: 'relative' } }}
style={{ ...cardStyle, marginBottom: 10 }}
>
-
+
{/* 机器人状态悬浮面板 - 绝对定位左上角 */}
@@ -1672,135 +1903,449 @@ export default function RobotTaskPage() {
-
+
- {t('devices.presetRoutes')}
- setRouteSearch(e.target.value)}
- />
-
- }
+ title={
{t('devices.taskDispatch')}}
variant="borderless"
- styles={{ body: { padding: '12px', height: 732, overflow: 'auto' } }}
- style={cardStyle}
+ styles={{ body: { padding: '12px', overflow: 'auto', flex: 1 } }}
+ style={{ ...cardStyle, flex: 1, display: 'flex', flexDirection: 'column' }}
>
-
- {
- // 判断有无数据
- (!routeList || routeList.length === 0) ? (
-
-
+
+
+
+
{t('devices.dispatchSource')}
+
{ setDispatchSource(e.target.value); setDispatchRouteIds([]); setDispatchRegionIds([]); }} buttonStyle="solid">
+ {t('devices.dispatchByRoute')}
+ {t('devices.dispatchByRegion')}
+
+
+
+ {/* 按路线下发：路径多选 */}
+ {dispatchSource === 'route' && (
+
+
{t('devices.taskSelectRoute')}
+ {(!routeList || routeList.length === 0) ? (
+
+ ) : (
+
+ {routeList.map(route => {
+ const checked = dispatchRouteIds.includes(route.id);
+
+ return (
+ {
+ // 按路线下发：单选
+ setDispatchRouteIds(nextChecked ? [route.id] : []);
+
+ if (nextChecked) {
+ flyToRoute(route.id);
+ }
+ }}
+ >
+
+ {route.workName || route.name}
+
+
+ );
+ })}
+
+ )}
- ) : (
- routeList.map(route => (
-
{
- e.stopPropagation();
- // 先清空再设置，确保每次点击都能触发 useEffect 的重绘
- setSelectedPathWork(null);
- // 在下一个 tick 中设置，确保 state 重置生效
- setTimeout(() => {
- setSelectedPathWork(route);
- }, 0);
- }}
- onMouseEnter={e => {
- // 只有未选中的项，悬浮才变色
- if (selectedPathWork?.id !== route.id) {
- e.currentTarget.style.borderColor = '#165DFF';
- }
- }}
- onMouseLeave={e => {
- // 只有未选中的项，离开才恢复透明
- if (selectedPathWork?.id !== route.id) {
- e.currentTarget.style.borderColor = 'transparent';
- }
- }}
- >
-
- {route.imgUrl ? (
-
- ) : (
-
+
+
{t('devices.taskSelectRegion')}
+ {regionList.length === 0 ? (
+
+ ) : (
+
-
+ boxSizing: 'border-box',
+ padding: 8,
+ border: '1px solid #e6edf5',
+ borderRadius: 6,
+ background: '#fff',
+ }}
+ >
+ {/* 顶部提示文字 */}
+
+ 选择需要执行任务的区域（可多选）
+
+
+ {/* 区域选择卡片 */}
+
+ {regionList.map((region, index) => {
+ const checked = dispatchRegionIds.includes(region.id);
+
+ const regionColors = [
+ '#1677ff',
+ '#13b879',
+ '#fa8c16',
+ '#a33cff',
+ ];
+
+ const color = regionColors[index % regionColors.length];
+
+ return (
+ {
+ setDispatchRegionIds(prev => {
+ const next = nextChecked
+ ? [...prev, region.id]
+ : prev.filter(id => id !== region.id);
+
+ // 默认仅选中已选区域的 defaultRoute
+ const defaultIds = new Set();
+
+ regionList.forEach(r => {
+ if (next.includes(r.id) && r.defaultRoute != null) {
+ defaultIds.add(Number(r.defaultRoute));
+ }
+ });
+
+ setDispatchRouteIds(Array.from(defaultIds));
+
+ return next;
+ });
+
+ if (nextChecked) {
+ setFocusOverlay({
+ type: 'region',
+ id: region.id,
+ nonce: Date.now(),
+ });
+ }
+ }}
+ style={{
+ display: 'flex',
+ alignItems: 'center',
+ gap: 2,
+ width: '100%',
+ minWidth: 0,
+ height: 40,
+ boxSizing: 'border-box',
+ margin: 0,
+ padding: '0 8px',
+ border: '1px solid #dce5f2',
+ borderRadius: 4,
+ background: '#fff',
+ color: '#344054',
+ fontSize: 12,
+ lineHeight: 'normal',
+ cursor: 'pointer',
+ overflow: 'hidden',
+ }}
+ >
+ {/* 复选框 */}
+
+ {checked ? '✓' : ''}
+
+
+ {/* 区域定位图标 */}
+
+
+ {/* 区域名称 */}
+
+ {region.regionName}
+
+
+ );
+ })}
+
+
+ )}
+
+ {dispatchRegionIds.length > 0 && (
+
+
{t('devices.taskSelectRoute')}
+ {regionAvailableRoutes.length === 0 ? (
+
+ ) : (
+
+ {/* 顶部提示文字 */}
+
+ 选择需要执行任务的路线（可多选）
+
+
+ {/* 路线选择卡片 */}
+
+ {regionAvailableRoutes.map((route, index) => {
+ const checked = dispatchRouteIds.includes(route.id);
+
+ const regionColors = [
+ '#1677ff',
+ '#13b879',
+ '#fa8c16',
+ '#a33cff',
+ ];
+
+ const color = regionColors[index % regionColors.length];
+
+ return (
+ {
+ setDispatchRouteIds(prev =>
+ nextChecked
+ ? [...prev, route.id]
+ : prev.filter(id => id !== route.id)
+ );
+
+ if (nextChecked) {
+ flyToRoute(route.id);
+ }
+ }}
+ style={{
+ display: 'flex',
+ alignItems: 'center',
+ gap: 5,
+ width: '100%',
+ minWidth: 0,
+ height: 40,
+ boxSizing: 'border-box',
+ margin: 0,
+ padding: '0 8px',
+ color: '#344054',
+ background: '#fff',
+ border: '1px solid #dce5f2',
+ borderRadius: 4,
+ fontSize: 12,
+ lineHeight: 'normal',
+ cursor: 'pointer',
+ overflow: 'hidden',
+ }}
+ >
+ {/* 自定义复选框 */}
+
+ {checked ? '✓' : ''}
+
+
+ {/* 路线定位图标 */}
+
+
+ {/* 路线名称 */}
+
+ {route.workName || route.name}
+
+
+ );
+ })}
+
)}
- {/* 路线信息 */}
-
-
- {route.workName || route.name || t('devices.unnamedRoute')}
-
-
- {t('devices.rtMode')}: {route.mode == "coverage" ? t('devices.coverageMode') : t('devices.singleMode')}
-
+ )}
+
+ )}
+ {/* 任务方式：立即执行 / 定时任务 */}
+ {/*
+
{t('devices.taskDispatchMode')}
+
setDispatchMode(e.target.value)} buttonStyle="solid">
+ {t('devices.taskModeImmediate')}
+ {t('devices.taskModeScheduled')}
+
+
*/}
-
-
- }
- onClick={(e) => {
- e.stopPropagation();
- setSelectedPathWork(route);
- setIsTaskModalOpen(true);
- }}
- />
-
- {/* 执行按钮 */}
-
- }
- onClick={(e) => {
- e.stopPropagation();
- setSelectedPathWork(route);
- handleTaskexcuted(route);
- }}
- />
-
+
+
+ {/* 定时任务表单 */}
+ {dispatchMode === 'scheduled' && (
+
+
+
+ setScheduleForm(prev => ({ ...prev, planName: e.target.value }))} placeholder={t('devices.inputTaskName')} />
- ))
- )
- }
-
+
+
+
+
+ {scheduleForm.repeatPlan === 'WEEK' && (
+
+ {weekDays.map(day => (
+
+ ))}
+
+ )}
+ {scheduleForm.repeatPlan === 'MONTH' && (
+
+ {monthDays.map(day => (
+
+ ))}
+
+ )}
+ {scheduleForm.repeatPlan === 'DAY' && (
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+ )}
+ {/* 选择执行机器人 */}
+
+
+
+
+ {/* 下发方式：按路线 / 按区域 */}
+
+
+ {/* 下发按钮 + 取消按钮 */}
+
+
+
+
+
+
+
+
+
@@ -1942,56 +2487,6 @@ export default function RobotTaskPage() {
- {/* 🔥 传递 routeList 给弹窗 */}
-
setIsTaskModalOpen(false)}
- robots={devices}
- selectedPathWork={selectedPathWork}
- handlGetTaskList={fetchTaskList}
- routeList={routeList}
- stationId={stationId}
- onTaskCreated={handleTaskCreated}
- userInfo={userInfo}
- />
-
- {/* 执行任务弹窗 */}
- setExecuteModalVisible(false)}
- onOk={handleExecuteConfirm}
- okText={t('devices.execute')}
- cancelText={t('common.cancel')}
- >
-
-
-
{t('devices.routeInfo')}
-
-
{t('devices.routeName')}{selectedRouteForExecute?.workName || selectedRouteForExecute?.name}
-
-
-
-
-
{t('workOrder.selectDevice')}
-
-
-
-
- {/*
*/}
-
- {activeTab === 'scheduled' ? (
- <>
-
- {/* 任务名称 */}
-
-
- setFormData({ ...formData, planName: e.target.value })}
- placeholder={t('devices.inputTaskName')}
- />
-
-
- {/* 执行路线 */}
-
-
-
-
-
- {/* 选择设备 */}
-
-
-
-
-
- {/* 重复计划 */}
-
-
-
-
-
- {/* 周选择 */}
- {formData.repeatPlan === 'WEEK' && (
-
- {weekDays.map(day => (
-
- ))}
-
- )}
-
- {/* 月选择 */}
- {formData.repeatPlan === 'MONTH' && (
-
- {monthDays.map(day => (
-
- ))}
-
- )}
-
- {/* 按天：选择日期 */}
- {formData.repeatPlan === 'DAY' && (
- <>
-
-
-
- )}
-
- {/* 时间 */}
-
-
-
- {/* 执行周期 */}
-
-
-
-
- ) : (
-
- {/* 预设路径列表 */}
-
-
-
- {singleRouteList.length === 0 ? (
-
- ) : (
- singleRouteList.map(route => {
- const selected = returnRoute?.id === route.id;
- return (
-
setReturnRoute(route)}
- className={`flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition-colors ${selected ? 'border-blue-500 bg-blue-50' : 'border-gray-200 hover:border-blue-300'}`}
- >
-
- {route.imgUrl ? (
-
- ) : (
-
- )}
-
-
{route.workName || route.name}
- {selected &&
}
-
- );
- })
- )}
-
-
-
- {/* 选择机器 */}
-
-
-
-
- )}
-
- {/* 底部按钮 */}
-
-
-
-
-
+
+ 选择任务类型
+
+
+
onChange(e.target.value)}
+ className="task-type-radio__group"
+ >
+ {options.map((option) => {
+ const checked = value === option.value;
+
+ return (
+
+
+
+ {option.icon}
+
+
+
+
+ {option.title}
+
+
+
+ {option.description}
+
+
+
+
+ {checked ? (
+
+ ) : (
+
+ )}
+
+
+