2204 lines
67 KiB
TypeScript
2204 lines
67 KiB
TypeScript
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,
|
||
Modal, InputNumber,
|
||
TimePicker,
|
||
Popconfirm,
|
||
App,
|
||
Radio
|
||
} from 'antd';
|
||
import {
|
||
PlusOutlined, ImportOutlined, NodeIndexOutlined,
|
||
SaveOutlined, PlayCircleOutlined, EyeOutlined,
|
||
DeleteOutlined,
|
||
CloseOutlined,
|
||
ReloadOutlined,
|
||
ExclamationCircleOutlined
|
||
} 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 {
|
||
getRobotRouteList,
|
||
getSingleRouteList,
|
||
saveDeviceTask, getRobotTaskList,
|
||
deleteDeviceTask,
|
||
getSiteDevice,
|
||
excuetRoute,
|
||
cancelRoute,
|
||
pauseRoute,
|
||
recoverRoute,
|
||
getDeviceTastPool,
|
||
getSiteDeviceTaskHistory,
|
||
getRouteByTask,
|
||
deleteRoute,
|
||
getTaskPath,
|
||
} from '../../api/device';
|
||
import dayjs from 'dayjs';
|
||
import DraggableBox from '../Draggable';
|
||
import utils, { getLocationQuality } from '../../lib/utils';
|
||
import CesiumMap from '../Map';
|
||
import { fix2, getVal } from '../../lib/utils';
|
||
import { useSelector } from 'react-redux';
|
||
import { RootState } from '@/src/store';
|
||
import envConfig from '../../../env';
|
||
import DeviceController from './DeviceController';
|
||
import Draggable, { DraggableData, DraggableEvent } from 'react-draggable';
|
||
import { MowerAllView } from './mowerAllView.jsx';
|
||
import { useWebRTCPlayer } from '../useWebRTCStream.js';
|
||
import { useTranslation } from 'react-i18next';
|
||
|
||
const { Text, Title } = Typography;
|
||
const { RangePicker } = DatePicker;
|
||
|
||
export default function RobotTaskPage() {
|
||
const { t } = useTranslation();
|
||
const { userInfo } = useSelector((state: RootState) => state.user);
|
||
const { stationId, currentStation } = useSelector((state: RootState) => state.station);
|
||
const [excuteStatus, setExcuteStatus] = useState("stop"); //"stop" "running" "pause"
|
||
// 机器人实时位置
|
||
const [robotRealtimePosition, setRobotRealtimePosition] = useState(null);
|
||
const [execute, setExecute] = useState(false); // 是否执行任务
|
||
const [taskList, setTaskList] = useState([]);
|
||
const [arrivedPoint, setArrivedPoint] = useState(null);//完成点
|
||
const { modal } = App.useApp();
|
||
const [polyPoints, setPolyPoints] = useState([]);
|
||
|
||
|
||
|
||
|
||
// 设备数据
|
||
const [devices, setDevices] = useState([]);
|
||
const [deleteLoading, setDeleteLoading] = useState(false);
|
||
|
||
|
||
|
||
const [focusLocation, setFocusLocation] = useState(null);
|
||
const [points, setPoints] = useState([]);
|
||
const [routeMode, setRouteMode] = useState('');
|
||
const [clearNavLine, setClearNavLine] = useState(0);
|
||
const [clearPlanLine, setClearPlanLine] = useState(0);
|
||
|
||
const [routeSearch, setRouteSearch] = useState('');
|
||
const [routeList, setRouteList] = useState([]);
|
||
|
||
// 执行任务弹窗
|
||
const [executeModalVisible, setExecuteModalVisible] = useState(false);
|
||
const [selectedRouteForExecute, setSelectedRouteForExecute] = useState(null);
|
||
const [selectedRobotForExecute, setSelectedRobotForExecute] = useState(null);
|
||
|
||
|
||
const [runningPoolTask, setRunningPoolTask] = useState(null);//正在执行的任务
|
||
|
||
|
||
// 当前执行任务的机器人
|
||
const [executingRobot, setExecutingRobot] = useState(null);
|
||
const [showVideo, setShowVideo] = useState(false); // 控制视频组件显示
|
||
|
||
// 任务池和历史任务数据
|
||
const [taskPoolList, setTaskPoolList] = useState([]);
|
||
const [taskHistoryList, setTaskHistoryList] = useState([]);
|
||
|
||
// 当前激活的Tab
|
||
const [activeTab, setActiveTab] = useState('pool'); // 'task' for 任务列表, 'pool' for 任务池, 'history' for 历史任务
|
||
|
||
// 任务池和历史任务筛选表单
|
||
const [poolFilterForm, setPoolFilterForm] = useState({
|
||
taskStatus: null,
|
||
robot: null,
|
||
planId: null,
|
||
});
|
||
const { video: robotVideo, error, ready } = useWebRTCPlayer(
|
||
executingRobot?.serialNumber ? executingRobot?.serialNumber : '',
|
||
`webrtc://1.95.137.212/live/livestream/${executingRobot?.serialNumber}`,
|
||
);
|
||
const [historyFilterForm, setHistoryFilterForm] = useState({
|
||
taskStatus: null,
|
||
robot: null,
|
||
dateRange: null,
|
||
});
|
||
// 取消任务模式 normal普通取消 force强制取消
|
||
const [cancelMode, setCancelMode] = useState<'normal' | 'force'>('normal');
|
||
|
||
|
||
|
||
|
||
|
||
const fontSmall = 'clamp(10px, 0.7vw, 11px)';
|
||
const fontNormal = 'clamp(12px, 0.75vw, 13px)';
|
||
const fontTitle = 'clamp(14px, 0.85vw, 16px)';
|
||
const fontLarge = 'clamp(18px, 1.1vw, 24px)';
|
||
|
||
const cardStyle = { borderRadius: 12, border: 'none', boxShadow: '0 2px 12px rgba(0,0,0,0.04)' };
|
||
|
||
// 任务列表 独立筛选状态
|
||
// 统一用 form 管理筛选条件
|
||
const [filterForm, setFilterForm] = useState({
|
||
dateRange: null, // 时间范围
|
||
taskStatus: null, // 任务状态
|
||
robot: null // 机器人设备
|
||
});
|
||
const [messageApi, contextHolder] = message.useMessage();
|
||
const controllerRef = useRef<DeviceController | null>(null);
|
||
const isFirstConnect = useRef(true);
|
||
const fixStatusMap: Record<string, string> = {
|
||
'no_fix': t('devices.noFix'),
|
||
'single': t('devices.single'),
|
||
'dgnss': t('devices.dgnss'),
|
||
'ins': t('devices.ins'),
|
||
'rtk_fixed': t('devices.rtkFixed'),
|
||
'rtk_float': t('devices.rtkFloat'),
|
||
'single_no_heading': t('devices.singleNoHeading'),
|
||
'dgnss_no_heading': t('devices.dgnssNoHeading'),
|
||
'rtk_fixed_no_heading': t('devices.rtkFixedNoHeading'),
|
||
'rtk_float_no_heading': t('devices.rtkFloatNoHeading'),
|
||
}
|
||
|
||
|
||
const handleFinish = (data) => {
|
||
setExecute(false);
|
||
setShowVideo(false); // 任务完成关闭视频
|
||
utils.message.success(t('devices.fixed2TaskSuspended2Fixed2CompletedFixed2'));
|
||
|
||
setClearNavLine(clearNavLine + 1);
|
||
setSelectedRobotForExecute(null);
|
||
setSelectedRouteForExecute(null);
|
||
fetchTaskList();
|
||
fetchTaskHistoryList();
|
||
fetchTaskPoolList();
|
||
|
||
|
||
|
||
}
|
||
const handleFinishEdPoint = (point) => {
|
||
setArrivedPoint(point);
|
||
};
|
||
|
||
// 根据任务ID获取路径并显示在地图上
|
||
const loadTaskPath = async (taskId) => {
|
||
//return;
|
||
if (!taskId) return;
|
||
try {
|
||
const res = await getRouteByTask({ taskId });
|
||
if (res?.code === 200 && res?.data?.jsonData?.path) {
|
||
let pathPoints = [];
|
||
try {
|
||
const data = res.data;
|
||
pathPoints = data.jsonData.path || [];
|
||
setRouteMode(data?.mode || 'coverage'); // 设置路线模式
|
||
|
||
|
||
} catch (err) {
|
||
console.error('解析任务路径数据失败：', err);
|
||
}
|
||
setPolyPoints(pathPoints);
|
||
}
|
||
} catch (err) {
|
||
console.error('获取任务路径失败：', err);
|
||
}
|
||
};
|
||
|
||
const handleDeleteRoute = async (route) => {
|
||
console.log('删除航线：', route);
|
||
// 防重复点击拦截
|
||
if (deleteLoading) return;
|
||
|
||
modal.confirm({
|
||
title: t('systemSetting.fixed2ConfirmFixed2DeleteFixed2'),
|
||
content: `确定要删除航线「${route.workName}」吗？删除后数据无法恢复！`,
|
||
icon: <ExclamationCircleOutlined style={{ color: '#FF7D00' }} />,
|
||
okText: t('devices.fixed2OkFixed2DeleteFixed2'),
|
||
cancelText: t('common.cancel'),
|
||
okButtonProps: { danger: true, loading: deleteLoading },
|
||
onOk: async () => {
|
||
setDeleteLoading(true);
|
||
try {
|
||
const res = await deleteRoute(route.workName);
|
||
if (res.code === 200) {
|
||
message.success(t('devices.deletedSuccessfullyFixed2'));
|
||
fetchRouteList();
|
||
} else {
|
||
utils.message.error(res.msg || '删除失败，请稍后重试');
|
||
}
|
||
} catch (err) {
|
||
console.error('删除航线接口报错：', err);
|
||
utils.message.error(t('devices.fixed2DeleteFailedAbnormalFixed2'));
|
||
} finally {
|
||
setDeleteLoading(false);
|
||
}
|
||
},
|
||
});
|
||
};
|
||
|
||
// 任务池项点击事件
|
||
const handlePoolTaskClick = (record) => {
|
||
setRunningPoolTask(record);
|
||
loadTaskPath(record.id);
|
||
|
||
// 查找对应的设备
|
||
const targetDevice = devices?.find(d => d.serialNumber === record.deviceId);
|
||
|
||
if (!targetDevice) {
|
||
console.warn('未找到任务对应的设备');
|
||
return;
|
||
}
|
||
|
||
// 判断是否是新设备（避免重复连接）
|
||
const isSameDevice = executingRobot?.serialNumber === targetDevice.serialNumber;
|
||
|
||
if (isSameDevice) {
|
||
console.log('✅ 任务使用相同设备，无需重新连接');
|
||
return;
|
||
}
|
||
|
||
// 切换设备连接
|
||
console.log('🔄 点击任务切换设备连接', targetDevice);
|
||
setExecute(true);
|
||
setExecutingRobot(targetDevice);
|
||
setClearNavLine(v => v + 1); // 清空地图轨迹
|
||
if (isFirstConnect.current) { isFirstConnect.current = false; controllerRef.current?.connectDevice(targetDevice); } else { controllerRef.current?.switchDevice(targetDevice); }
|
||
setShowVideo(true);
|
||
};
|
||
|
||
|
||
useEffect(() => {
|
||
const controller = new DeviceController(userInfo, messageApi);
|
||
|
||
controller.onLocationInfoUpdate = setRobotRealtimePosition;
|
||
controller.onIsFinished = handleFinish;
|
||
controller.handleArrivedPoint = handleFinishEdPoint;
|
||
// 处理路线点回调：taskId必须和当前选中任务一致
|
||
controller.onRoutePost = (msg) => {
|
||
console.log('收到 route_post 消息:', msg);
|
||
const { taskId, data } = msg;
|
||
|
||
// 1. 先在任务池中查找该taskId对应的任务
|
||
const matchedTask = taskPoolList.find(task => String(task.id) === String(taskId));
|
||
|
||
// 2. 两种情况处理：
|
||
// a) 当前没有选中任务，且匹配到了任务池中的任务 → 自动选中该任务
|
||
// b) 当前已选中任务，且选中任务的id === 传来的taskId → 更新数据
|
||
const isSameAsSelected = runningPoolTask && String(runningPoolTask.id) === String(taskId);
|
||
const shouldSelectNewTask = !runningPoolTask && matchedTask;
|
||
|
||
if (isSameAsSelected || shouldSelectNewTask) {
|
||
console.log('taskId匹配成功，处理路线数据', {
|
||
taskId,
|
||
runningPoolTaskId: runningPoolTask?.id,
|
||
matchedTask
|
||
});
|
||
|
||
// 如果是匹配到新任务就设置选中状态
|
||
if (shouldSelectNewTask) {
|
||
setRunningPoolTask(matchedTask);
|
||
}
|
||
|
||
// 先直接用推送的data设置点（实时性）
|
||
if (data) {
|
||
setPoints(data);
|
||
}
|
||
|
||
|
||
} else {
|
||
console.log('taskId不匹配，忽略本次推送', {
|
||
receivedTaskId: taskId,
|
||
currentSelectedTaskId: runningPoolTask?.id,
|
||
matchedTaskFound: !!matchedTask
|
||
});
|
||
}
|
||
};
|
||
|
||
|
||
|
||
controller.init();
|
||
|
||
|
||
controllerRef.current = controller;
|
||
return () => {
|
||
if (controllerRef.current) {
|
||
controllerRef.current.destroy?.();
|
||
}
|
||
controllerRef.current = null;
|
||
};
|
||
|
||
}, []);
|
||
|
||
// 监听任务列表和设备列表变化，自动连接正在执行中的机器人（仅在没有选择任务时）
|
||
useEffect(() => {
|
||
if (!taskPoolList || taskPoolList.length == 0) {
|
||
setClearNavLine(v => v + 1); // 清空地图轨迹
|
||
setClearPlanLine(v => v + 1);
|
||
setRunningPoolTask(null);
|
||
return;
|
||
|
||
}
|
||
|
||
if (!devices) return;
|
||
// 如果已经有选择的任务（runningPoolTask），则不自动连接，让用户手动选择
|
||
if (runningPoolTask) return;
|
||
|
||
// 查找正在执行中的任务
|
||
const runningTask = taskPoolList.find(item => ['EXECUTING', 'PAUSE'].includes(item.taskStaus));
|
||
|
||
if (!runningTask) return;
|
||
//fetchRouteDetail(runningTask?.id);
|
||
|
||
// 找到对应的设备
|
||
const targetDevice = devices.find(d => d.serialNumber === runningTask.deviceId);
|
||
|
||
if (!targetDevice) return;
|
||
|
||
// 判断是否是新设备（避免重复连接）
|
||
const isSameDevice = executingRobot?.serialNumber === targetDevice.serialNumber;
|
||
|
||
if (isSameDevice) return;
|
||
|
||
// 切换设备
|
||
console.log('🔄 检测到正在执行任务的新设备，开始连接', targetDevice);
|
||
setRunningPoolTask(runningTask); // 设置当前任务
|
||
setExecute(true);
|
||
setExecutingRobot(targetDevice);
|
||
setClearNavLine(v => v + 1); // 清空地图轨迹
|
||
if (isFirstConnect.current) { isFirstConnect.current = false; controllerRef.current?.connectDevice(targetDevice); } else { controllerRef.current?.switchDevice(targetDevice); }
|
||
setShowVideo(true);
|
||
|
||
}, [devices, taskPoolList, executingRobot, runningPoolTask]);
|
||
|
||
|
||
const realtimePosition = useMemo(() => {
|
||
const data = {
|
||
lon: robotRealtimePosition?.longitude || 0,
|
||
lat: robotRealtimePosition?.latitude || 0,
|
||
heading: robotRealtimePosition?.yaw || 0,
|
||
}
|
||
return data;
|
||
}, [robotRealtimePosition])
|
||
//useEffect(() => {
|
||
// if (robotRealtimePosition && execute) {
|
||
// let warningMsg = '';
|
||
|
||
// if (robotRealtimePosition?.controlMode == "1") {
|
||
// warningMsg = `请切换到远程模式 `;
|
||
// } else if (robotRealtimePosition?.qual != "4") {
|
||
// warningMsg = '定位未固定';
|
||
// } else if (robotRealtimePosition?.headingStatus != "1") {
|
||
// warningMsg = '请先初始化航向角';
|
||
// }
|
||
|
||
// if (warningMsg) {
|
||
// utils.message.destroy();
|
||
|
||
// utils.message.warning(warningMsg);
|
||
// }
|
||
// }
|
||
//}, [robotRealtimePosition, execute])
|
||
|
||
|
||
// 获取数据
|
||
const fetchAllData = async () => {
|
||
if (!stationId) return;
|
||
|
||
try {
|
||
const deviceRes = await getSiteDevice({ siteId: stationId, pageSize: 9999, pageNum: 1, orgId: currentStation?.orgId });
|
||
const devData = deviceRes?.code === 200 ? (deviceRes.rows || []) : [];
|
||
setDevices(devData);
|
||
} catch (err) {
|
||
console.error('数据请求失败', err);
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
fetchAllData();
|
||
}, [userInfo, stationId]);
|
||
|
||
// 新建任务弹窗状态
|
||
const [isTaskModalOpen, setIsTaskModalOpen] = useState(false);
|
||
const [selectedPathWork, setSelectedPathWork] = useState(null);
|
||
|
||
// 获取任务列表数据
|
||
const fetchTaskList = async () => {
|
||
try {
|
||
const params = {
|
||
siteId: String(stationId), pageNum: 1,
|
||
pageSize: 99999999
|
||
};
|
||
|
||
// 时间范围
|
||
if (filterForm.dateRange && filterForm.dateRange.length === 2) {
|
||
params.startTime = filterForm.dateRange[0].format('YYYY-MM-DD');
|
||
params.endTime = filterForm.dateRange[1].format('YYYY-MM-DD');
|
||
}
|
||
|
||
// 设备
|
||
if (filterForm.robot?.serialNumber) {
|
||
params.deviceId = filterForm.robot.serialNumber;
|
||
}
|
||
|
||
// 状态
|
||
if (filterForm.taskStatus !== null && filterForm.taskStatus !== undefined) {
|
||
params.taskStaus = filterForm.taskStatus;
|
||
}
|
||
|
||
|
||
const res = await getRobotTaskList(params);
|
||
if (res.code == 200) {
|
||
setTaskList(res.data);
|
||
}
|
||
} catch (err) {
|
||
message.error(t('devices.taskListRefreshFail'));
|
||
}
|
||
};
|
||
useEffect(() => {
|
||
//console.log('获取任务列表', selectedPathWork?.id);
|
||
if (!selectedRobotForExecute?.id || !execute) {
|
||
setPoints([]);
|
||
return;
|
||
}
|
||
|
||
|
||
}, [selectedRobotForExecute?.id]);
|
||
|
||
// 监听任务池列表变化，自动加载第一个任务的路径
|
||
useEffect(() => {
|
||
if (taskPoolList && taskPoolList.length > 0) {
|
||
setRunningPoolTask(taskPoolList[0]);
|
||
|
||
}
|
||
}, [taskPoolList]);
|
||
const getRouteOut = async () => {
|
||
try {
|
||
|
||
const res = await getSingleRouteList({ id: selectedPathWork?.id });
|
||
// coverage（区域覆盖）绘制为多边形，其余为折线/单点
|
||
const mode = res?.data?.mode;
|
||
setRouteMode(mode);
|
||
|
||
if (res?.code === 200 && res?.data?.jsonData) {
|
||
let pathPoints = [];
|
||
|
||
try {
|
||
// 尝试解析 JSON
|
||
pathPoints = res?.data?.jsonData?.path || [];
|
||
} catch (err) {
|
||
console.error('解析路线数据失败：', err);
|
||
}
|
||
|
||
if (pathPoints.length === 0) {
|
||
utils.message.warning(t('devices.route2'));
|
||
}
|
||
|
||
setPolyPoints(pathPoints);
|
||
|
||
} else {
|
||
setPolyPoints([]);
|
||
setRouteMode('');
|
||
}
|
||
} catch (err) {
|
||
console.error('获取路线详情失败：', err);
|
||
setPolyPoints([]);
|
||
setRouteMode('');
|
||
}
|
||
}
|
||
useEffect(() => {
|
||
getRouteOut();
|
||
}, [selectedPathWork?.id])
|
||
// 调用接口获取路线详情
|
||
const fetchRouteDetail = async (id) => {
|
||
console.log(id, "获取正在执行任务的id")
|
||
try {
|
||
const params = {
|
||
taskId: id,
|
||
}
|
||
|
||
const res = await getTaskPath(params)
|
||
//const res = await getSingleRouteList({ id: selectedPathWork.id });
|
||
|
||
if (res?.code === 200 && res?.data) {
|
||
let pathPoints = [];
|
||
|
||
try {
|
||
// 尝试解析 JSON
|
||
pathPoints = res.data || [];
|
||
} catch (err) {
|
||
console.error('解析路线数据失败：', err);
|
||
}
|
||
|
||
if (pathPoints.length === 0) {
|
||
utils.message.warning(t('devices.route2'));
|
||
}
|
||
|
||
setPoints(pathPoints);
|
||
|
||
} else {
|
||
setPoints([]);
|
||
}
|
||
} catch (err) {
|
||
console.error('获取路线详情失败：', err);
|
||
setPoints([]);
|
||
}
|
||
};
|
||
|
||
|
||
|
||
|
||
useEffect(() => {
|
||
if (!runningPoolTask?.id) return;
|
||
|
||
loadTaskPath(runningPoolTask.id);
|
||
fetchRouteDetail(runningPoolTask?.id);
|
||
|
||
|
||
// 只有当任务是执行状态，并且没有连接的设备时，才自动连接
|
||
if ((runningPoolTask.taskStaus == 'EXECUTING' || runningPoolTask.taskStaus == 'PAUSE') && !executingRobot) {
|
||
const targetDevice = devices?.find(d => d.serialNumber === runningPoolTask.deviceId);
|
||
if (targetDevice) {
|
||
setExecute(true);
|
||
setExecutingRobot(targetDevice);
|
||
setClearNavLine(v => v + 1); // 清空地图轨迹
|
||
if (isFirstConnect.current) { isFirstConnect.current = false; controllerRef.current?.connectDevice(targetDevice); } else { controllerRef.current?.switchDevice(targetDevice); }
|
||
setShowVideo(true);
|
||
}
|
||
}
|
||
|
||
}, [runningPoolTask, devices, executingRobot])
|
||
|
||
// 获取路线列表
|
||
const fetchRouteList = async () => {
|
||
if (!stationId) return;
|
||
getRobotRouteList({ siteId: stationId }).then(res => {
|
||
if (res.code == 200 && res.data) {
|
||
setRouteList(res.data);
|
||
} else {
|
||
setRouteList([]);
|
||
}
|
||
}).catch(() => setRouteList([]));
|
||
};
|
||
|
||
const handleDelete = (id) => {
|
||
deleteDeviceTask({ id }).then(res => {
|
||
|
||
if (res.code == 200) {
|
||
utils.message.success(t('common.deleteSuccess'));
|
||
|
||
} else {
|
||
utils.message.error(res.msg);
|
||
}
|
||
}).catch(() => message.error(t('common.deleteFail'))).finally(() => {
|
||
fetchTaskList();
|
||
fetchTaskPoolList();
|
||
fetchTaskHistoryList();
|
||
});
|
||
}
|
||
|
||
// 清空所有筛选项并刷新任务列表
|
||
// 清空所有筛选项并刷新 —— 现在超级简单！
|
||
const resetFiltersAndRefresh = () => {
|
||
setFilterForm({
|
||
dateRange: null,
|
||
taskStatus: null,
|
||
robot: null
|
||
});
|
||
};
|
||
const handleTaskexcuted = async (route) => {
|
||
try {
|
||
console.log(route);
|
||
setSelectedRouteForExecute(route);
|
||
|
||
setExecuteModalVisible(true);
|
||
setSelectedRobotForExecute(null);
|
||
} catch (err) {
|
||
console.error('检查路线失败：', err);
|
||
utils.message.error(t('devices.checkRouteFail'));
|
||
}
|
||
}
|
||
|
||
const handleExecuteConfirm = async () => {
|
||
if (!selectedRobotForExecute) {
|
||
message.error(t('devices.selectExecuteDevice'));
|
||
return;
|
||
}
|
||
|
||
|
||
try {
|
||
const params = {
|
||
deviceId: selectedRobotForExecute.serialNumber,
|
||
routeId: selectedRouteForExecute.id,
|
||
siteId: stationId,
|
||
...(currentStation?.orgId ? { orgId: currentStation.orgId } : {}),
|
||
};
|
||
|
||
const res = await excuetRoute(params);
|
||
|
||
if (res.code === 200) {
|
||
setExecute(true);
|
||
utils.message.success(t('devices.taskExecSuccess'));
|
||
setExecuteModalVisible(false);
|
||
setExecutingRobot(selectedRobotForExecute);
|
||
fetchTaskList();
|
||
fetchTaskPoolList();
|
||
fetchTaskHistoryList();
|
||
if (isFirstConnect.current) { isFirstConnect.current = false; controllerRef.current?.connectDevice(selectedRobotForExecute); } else { controllerRef.current?.switchDevice(selectedRobotForExecute); }
|
||
setShowVideo(true); // 连接成功后自动打开视频
|
||
|
||
} else {
|
||
setExecute(false);
|
||
|
||
utils.message.error(res.msg || '任务执行失败');
|
||
}
|
||
} catch (err) {
|
||
setExecute(false);
|
||
|
||
console.error('执行任务失败：', err);
|
||
utils.message.error(t('devices.taskExecuteException'));
|
||
}
|
||
}
|
||
|
||
const handleTaskCreated = () => {
|
||
resetFiltersAndRefresh();
|
||
};
|
||
|
||
// 获取任务池数据
|
||
const fetchTaskPoolList = async () => {
|
||
if (!stationId) return;
|
||
try {
|
||
const params = {
|
||
userId: userInfo?.userId,
|
||
siteId: stationId,
|
||
orgId: currentStation?.orgId,
|
||
pageNum: 1,
|
||
pageSize: 99999999
|
||
};
|
||
if (poolFilterForm.taskStatus) {
|
||
params.taskStaus = poolFilterForm.taskStatus;
|
||
}
|
||
if (poolFilterForm.robot?.serialNumber) {
|
||
params.deviceId = poolFilterForm.robot.serialNumber;
|
||
}
|
||
if (poolFilterForm.planId) {
|
||
params.planId = poolFilterForm.planId;
|
||
}
|
||
|
||
const res = await getDeviceTastPool(params);
|
||
if (res.code === 200) {
|
||
const list = res.rows || [];
|
||
list.sort((a, b) => {
|
||
const aEmpty = !a.planId;
|
||
const bEmpty = !b.planId;
|
||
return aEmpty ? -1 : bEmpty ? 1 : 0;
|
||
});
|
||
setTaskPoolList(list);
|
||
}
|
||
} catch (err) {
|
||
console.error('获取任务池失败:', err);
|
||
}
|
||
};
|
||
|
||
// 获取历史任务数据
|
||
const fetchTaskHistoryList = async () => {
|
||
if (!stationId) return;
|
||
try {
|
||
const params = {
|
||
siteId: stationId,
|
||
orgId: currentStation?.orgId,
|
||
pageNum: 1,
|
||
pageSize: 99999999
|
||
};
|
||
if (historyFilterForm.taskStatus) {
|
||
params.taskStaus = historyFilterForm.taskStatus;
|
||
}
|
||
if (historyFilterForm.robot?.serialNumber) {
|
||
params.deviceId = historyFilterForm.robot.serialNumber;
|
||
}
|
||
if (historyFilterForm.dateRange && historyFilterForm.dateRange.length === 2) {
|
||
params.startTime = historyFilterForm.dateRange[0].format('YYYY-MM-DD HH:mm:ss');
|
||
params.endTime = historyFilterForm.dateRange[1].format('YYYY-MM-DD HH:mm:ss');
|
||
}
|
||
|
||
const res = await getSiteDeviceTaskHistory(params);
|
||
if (res.code === 200) {
|
||
setTaskHistoryList(res.rows || []);
|
||
}
|
||
} catch (err) {
|
||
console.error('获取历史任务失败:', err);
|
||
}
|
||
};
|
||
|
||
// 取消任务
|
||
const handleCancelTask = async (task, mode) => {
|
||
try {
|
||
const params = {
|
||
taskId: task.id,
|
||
//deviceId: task.deviceId,
|
||
siteId: stationId,
|
||
orgId: task.orgId,
|
||
forceCancel: mode === 'force' ? true : false,
|
||
};
|
||
const res = await cancelRoute(params);
|
||
if (res.code === 200 && res.data == true) {
|
||
utils.message.success(t('devices.fixed2TaskSuspended2Fixed2CancelledFixed2'));
|
||
fetchTaskPoolList();
|
||
fetchTaskHistoryList();
|
||
setExecute(false);
|
||
//if (controllerRef.current) {
|
||
// controllerRef.current.destroy?.();
|
||
//}
|
||
setSelectedRobotForExecute(null);
|
||
setSelectedRouteForExecute(null);
|
||
|
||
|
||
|
||
} else {
|
||
utils.message.error(t('devices.taskCancelFail'));
|
||
}
|
||
} catch (err) {
|
||
console.error('取消任务失败:', err);
|
||
utils.message.error(t('devices.fixed2CancelFixed2TaskSuspended2Fixed2AbnormalFixed2'));
|
||
}
|
||
};
|
||
|
||
// 暂停任务
|
||
const handlePauseTask = async (task) => {
|
||
try {
|
||
const params = {
|
||
taskId: task.id,
|
||
orgId: task.orgId,
|
||
//deviceId: task.deviceId,
|
||
siteId: stationId,
|
||
};
|
||
const res = await pauseRoute(params);
|
||
if (res.code === 200) {
|
||
utils.message.success(t('devices.taskPaused'));
|
||
fetchTaskPoolList();
|
||
fetchTaskHistoryList();
|
||
} else {
|
||
utils.message.error(res.msg || '暂停失败');
|
||
}
|
||
} catch (err) {
|
||
console.error('暂停任务失败:', err);
|
||
utils.message.error(t('devices.fixed2SuspendTaskFixed2AbnormalFixed2'));
|
||
}
|
||
};
|
||
|
||
// 恢复任务
|
||
const handleRecoverTask = async (task) => {
|
||
try {
|
||
const params = {
|
||
taskId: task.id,
|
||
orgId: task.orgId,
|
||
siteId: stationId,
|
||
};
|
||
const res = await recoverRoute(params);
|
||
if (res.code === 200) {
|
||
utils.message.success(t('devices.taskResumed'));
|
||
fetchTaskPoolList();
|
||
fetchTaskHistoryList();
|
||
} else {
|
||
utils.message.error(res.msg || '恢复失败');
|
||
}
|
||
} catch (err) {
|
||
console.error('恢复任务失败:', err);
|
||
utils.message.error(t('devices.fixed2ResumeTaskFixed2AbnormalFixed2'));
|
||
}
|
||
};
|
||
|
||
|
||
|
||
useEffect(() => {
|
||
if (stationId) {
|
||
fetchRouteList();
|
||
}
|
||
}, [stationId]);
|
||
|
||
// 监听筛选条件变化
|
||
useEffect(() => {
|
||
if (stationId) {
|
||
fetchTaskList();
|
||
}
|
||
}, [filterForm, stationId]);
|
||
|
||
|
||
// 监听任务池筛选条件变化
|
||
useEffect(() => {
|
||
if (stationId) {
|
||
fetchTaskPoolList();
|
||
}
|
||
}, [poolFilterForm, stationId]);
|
||
|
||
// 监听历史任务筛选条件变化
|
||
useEffect(() => {
|
||
if (stationId) {
|
||
fetchTaskHistoryList();
|
||
}
|
||
}, [historyFilterForm, stationId]);
|
||
|
||
const taskColumns = [
|
||
{
|
||
title: t('devices.taskName'),
|
||
dataIndex: 'planName',
|
||
width: 160,
|
||
ellipsis: true,
|
||
fixed: "left"
|
||
},
|
||
{
|
||
title: t('devices.device'),
|
||
dataIndex: 'deviceAlias',
|
||
width: 320,
|
||
render: (_, record) => {
|
||
return record.deviceAlias ? record.deviceAlias : record.deviceId;
|
||
}
|
||
},
|
||
|
||
{
|
||
title: t('devices.creator'),
|
||
dataIndex: 'createBy',
|
||
width: 100,
|
||
render: (text) => text
|
||
},
|
||
{
|
||
title: t('common.createTime'),
|
||
dataIndex: 'createTime',
|
||
width: 170,
|
||
render: t => t ? dayjs(t).format('YYYY-MM-DD HH:mm:ss') : '-'
|
||
},
|
||
// 执行计划 + 周期时间
|
||
{
|
||
title: t('devices.executionPlan'),
|
||
width: 280,
|
||
render: (_, record) => {
|
||
const rule = record.deviceTaskPlanRules || {};
|
||
const { type, startDate, dayTime, days, dayOfMonth } = rule;
|
||
|
||
// 周映射
|
||
const weekMap = {
|
||
SUNDAY: t('devices.sun'),
|
||
MONDAY: t('devices.mon'),
|
||
TUESDAY: t('devices.tue'),
|
||
WEDNESDAY: t('devices.wed'),
|
||
THURSDAY: t('devices.thu'),
|
||
FRIDAY: t('devices.fri'),
|
||
SATURDAY: t('devices.sat')
|
||
};
|
||
|
||
switch (type) {
|
||
case 'DAY':
|
||
return t('devices.planByDay', { startDate: startDate || '', dayTime: dayTime || '' });
|
||
case 'WEEK':
|
||
const weekText = (days || []).map(d => weekMap[d]).join('、');
|
||
return t('devices.planByWeek', { weekText, dayTime: dayTime || '' });
|
||
case 'MONTH':
|
||
const monthText = (dayOfMonth || []).map(d => t('devices.daySuffix', { day: d })).join('、');
|
||
return t('devices.planByMonth', { monthText, dayTime: dayTime || '' });
|
||
default:
|
||
return t('devices.unknownPlan');
|
||
}
|
||
}
|
||
},
|
||
|
||
{
|
||
title: t('devices.executionCycle'),
|
||
width: 320,
|
||
render: (_, record) => {
|
||
return `${record.startTime || ''} - ${record.finishTime || ''}`;
|
||
}
|
||
},
|
||
{
|
||
title: t('roles.status'),
|
||
dataIndex: 'taskStaus',
|
||
width: 100,
|
||
render: (status, record) => {
|
||
console.log('status', status, record);
|
||
const statusMap = {
|
||
'NEW': { color: 'default', text: t('devices.statusNew') },
|
||
'EXECUTING': { color: 'processing', text: t('workOrder.inProgress') },
|
||
'PAUSE': { color: 'warning', text: t('devices.statusPaused') },
|
||
'FINISH': { color: 'success', text: t('devices.statusFinished') },
|
||
'FAILED': { color: 'error', text: t('devices.statusFailed') },
|
||
"CANCELING": { color: 'warning', text: t('devices.statusCanceling') },
|
||
};
|
||
const item = statusMap[status] || { color: 'default', text: record.taskStausTranslate || t('constants.locationUnknown') };
|
||
return <Tag color={item.color}>{record.taskStausTranslate}</Tag>;
|
||
}
|
||
},
|
||
{
|
||
title: t('roles.actions'),
|
||
width: 300,
|
||
fixed: 'right',
|
||
render: (_, record) => (
|
||
<Space size="small">
|
||
|
||
<Popconfirm
|
||
title={t('devices.confirmDeleteTask')}
|
||
onConfirm={() => handleDelete(record.id)}
|
||
okText={t('common.ok')}
|
||
cancelText={t('common.cancel')}
|
||
>
|
||
<Button
|
||
type="text"
|
||
danger
|
||
size="small"
|
||
icon={<DeleteOutlined />}
|
||
>
|
||
{t('common.delete')}
|
||
</Button>
|
||
</Popconfirm>
|
||
|
||
</Space>
|
||
)
|
||
}
|
||
];
|
||
|
||
// 任务池表格列
|
||
const taskPoolColumns = [
|
||
|
||
{
|
||
title: t('devices.device'),
|
||
dataIndex: 'deviceId',
|
||
width: 320,
|
||
},
|
||
{
|
||
title: t('roles.status'),
|
||
dataIndex: 'taskStaus',
|
||
width: 100,
|
||
render: (status, record) => {
|
||
const statusMap = {
|
||
'NEW': { color: 'default', text: t('devices.statusNew') },
|
||
'EXECUTING': { color: 'processing', text: t('workOrder.inProgress') },
|
||
'PAUSE': { color: 'warning', text: t('devices.statusPaused') },
|
||
'FINISH': { color: 'success', text: t('devices.statusFinished') },
|
||
'FAILED': { color: 'error', text: t('devices.statusFailed') },
|
||
"CANCELING": { color: 'warning', text: t('devices.statusCanceling') },
|
||
};
|
||
const item = statusMap[status] || { color: 'default', text: t('constants.locationUnknown') };
|
||
return <Tag color={item.color}>{item.text}</Tag>;
|
||
}
|
||
},
|
||
{
|
||
title: t('common.createTime'),
|
||
dataIndex: 'createTime',
|
||
width: 170,
|
||
},
|
||
{
|
||
title: t('roles.actions'),
|
||
width: 100, // 加宽一点
|
||
fixed: 'right',
|
||
render: (_, record) => (
|
||
<Space size="small">
|
||
|
||
<>
|
||
{/*{record.taskStaus === 'NEW' && (*/}
|
||
<Popconfirm
|
||
title={t('devices.confirmCancelTask')}
|
||
description={
|
||
<Radio.Group
|
||
value={cancelMode}
|
||
onChange={(e) => setCancelMode(e.target.value)}
|
||
style={{ marginTop: 8 }}
|
||
>
|
||
<Space direction="vertical">
|
||
<Radio value="normal">{t('devices.normalCancel')}</Radio>
|
||
<Radio value="force">{t('devices.forceCancel')}</Radio>
|
||
</Space>
|
||
</Radio.Group>
|
||
}
|
||
onConfirm={() => handleCancelTask(record, cancelMode)}
|
||
okText={t('common.ok')}
|
||
cancelText={t('common.cancel')}
|
||
>
|
||
<Button
|
||
type="text"
|
||
size="small"
|
||
danger
|
||
icon={<CloseOutlined />}
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
{t('common.cancel')}
|
||
</Button>
|
||
</Popconfirm>
|
||
{/*//)}*/}
|
||
|
||
{/*{record.taskStaus === 'EXECUTING' && (*/}
|
||
<Popconfirm
|
||
title={t('devices.confirmPauseTask')}
|
||
onConfirm={() => handlePauseTask(record)}
|
||
okText={t('common.ok')} cancelText={t('common.cancel')}
|
||
>
|
||
<Button type="text" size="small" style={{ color: '#FF9500' }} onClick={(e) => e.stopPropagation()}>
|
||
{t('video.pause')}
|
||
</Button>
|
||
</Popconfirm>
|
||
{/*)}/*/}
|
||
|
||
{record.taskStaus === 'PAUSE' && (
|
||
<Popconfirm
|
||
title={t('devices.confirmResumeTask')}
|
||
onConfirm={() => handleRecoverTask(record)}
|
||
okText={t('common.ok')} cancelText={t('common.cancel')}
|
||
>
|
||
<Button type="text" size="small" style={{ color: '#00B42A' }} onClick={(e) => e.stopPropagation()}>
|
||
{t('devices.recover')}
|
||
</Button>
|
||
</Popconfirm>
|
||
)}
|
||
</>
|
||
|
||
</Space>
|
||
)
|
||
},
|
||
];
|
||
|
||
// 历史任务表格列
|
||
const taskHistoryColumns = [
|
||
|
||
{
|
||
title: t('devices.device'),
|
||
dataIndex: 'deviceId',
|
||
width: 320,
|
||
},
|
||
{
|
||
title: t('roles.status'),
|
||
dataIndex: 'taskStausTranslate',
|
||
width: 100,
|
||
render: (text, record) => {
|
||
const status = record.taskStaus; // 原始状态值
|
||
let color = 'default';
|
||
|
||
if (status === 'NEW') color = 'default';
|
||
else if (status === 'EXECUTING') color = 'processing';
|
||
else if (status === 'PAUSE') color = 'warning';
|
||
else if (status === 'FINISH') color = 'success';
|
||
else if (status === 'FAILED') color = 'error';
|
||
|
||
return <Tag color={color} style={{ margin: 0 }}>{text}</Tag>;
|
||
},
|
||
|
||
},
|
||
{
|
||
title: t('devices.startTime'),
|
||
dataIndex: 'startTime',
|
||
width: 170,
|
||
},
|
||
{
|
||
title: t('devices.endTime'),
|
||
dataIndex: 'finishTime',
|
||
width: 170,
|
||
}, {
|
||
title: t('common.createTime'),
|
||
dataIndex: 'createTime',
|
||
width: 170,
|
||
}
|
||
];
|
||
|
||
const handleRowClick = (record) => {
|
||
if (record.longitude && record.latitude) {
|
||
setFocusLocation({
|
||
lon: record.longitude,
|
||
lat: record.latitude,
|
||
type: 'robot',
|
||
name: record.deviceName
|
||
});
|
||
}
|
||
};
|
||
|
||
const groupBoardData = useMemo(() => {
|
||
const waitList = taskList.filter(item => item.taskStaus === 'NEW');
|
||
const runList = taskList.filter(item => ['EXECUTING', 'PAUSE'].includes(item.taskStaus));
|
||
const finishList = taskList.filter(item => ['FINISH', 'FAILED'].includes(item.taskStaus));
|
||
return { waitList, runList, finishList };
|
||
}, [taskList]);
|
||
|
||
const historyData = useMemo(() => {
|
||
|
||
const successfulTaskList = taskHistoryList.filter(item => ['FINISH', 'FAILED'].includes(item.taskStaus));
|
||
return { successfulTaskList };
|
||
}, [taskHistoryList]);
|
||
const { waitList, runList, finishList } = groupBoardData;
|
||
const { successfulTaskList } = historyData;
|
||
|
||
|
||
const topCards = [
|
||
{ title: t('devices.statTodayPlan'), value: taskList.length, unit: t('devices.unitPlan'), desc: t('devices.statInProgress'), icon: <LayoutGrid size={22} />, color: '#165DFF' },
|
||
{ title: t('devices.statWorkingRobots'), value: taskPoolList?.filter(item => ['EXECUTING', 'PAUSE'].includes(item.taskStaus))?.length, unit: t('devices.unitRobot'), desc: t('devices.statWorking'), icon: <Car size={22} />, color: '#165DFF' },
|
||
{ title: t('devices.statTotalDistance'), value: '12.5', unit: 'km', trend: t('devices.vsYesterday', { value: '+1.2' }), trendColor: '#00B42A', icon: <TrendingUp size={22} />, color: '#722ED1' },
|
||
{ title: t('devices.statCompletionRate'), value: successfulTaskList.length ? Math.round((successfulTaskList.length / taskHistoryList.length) * 100) : 0, unit: '%', trend: t('devices.vsYesterday', { value: '+5%' }), trendColor: '#00B42A', icon: <CheckCircle2 size={22} />, color: '#00B42A' },
|
||
{ title: t('devices.statAlerts'), value: '0', unit: t('devices.unitTimes'), trend: t('devices.vsYesterday', { value: '-1' }), trendColor: '#00B42A', icon: <AlertCircle size={22} />, color: '#F53F3F' },
|
||
{
|
||
title: t('devices.statOnlineRate'),
|
||
value: `${devices?.length ? Math.round((devices.filter(d => d.onlineStatus == 1).length / devices.length) * 100) : 0}`,
|
||
unit: '%',
|
||
desc: t('devices.good'),
|
||
icon: <Satellite size={22} />,
|
||
color: '#165DFF'
|
||
}];
|
||
|
||
return (
|
||
<div className="normal-spacing" style={{ background: '#f5f7fa', minHeight: '100vh', padding: '0px', paddingTop: 0 }}>
|
||
<div style={{ padding: '4px 0px 8px' }}>
|
||
<Typography.Title level={4} style={{ margin: 0, fontSize: 'clamp(14px, 1.2vw, 18px)' }}>{t('devices.robotTask')}</Typography.Title>
|
||
</div>
|
||
<Row gutter={[16, 16]} style={{ marginBottom: 8 }}>
|
||
{topCards.map((item, index) => (
|
||
<Col xs={12} sm={8} md={4} key={index}>
|
||
<Card
|
||
variant="borderless"
|
||
styles={{
|
||
body: {
|
||
padding: '12px 14px',
|
||
height: '100%',
|
||
display: 'flex',
|
||
alignItems: 'center'
|
||
}
|
||
}}
|
||
style={{
|
||
...cardStyle,
|
||
height: '100%',
|
||
minHeight: '84px'
|
||
}}
|
||
>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 10, width: '100%' }}>
|
||
<div
|
||
style={{
|
||
width: 36,
|
||
height: 36,
|
||
background: 'rgba(22, 93, 255, 0.1)',
|
||
borderRadius: 10,
|
||
display: 'flex',
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
color: item.color,
|
||
flexShrink: 0
|
||
}}
|
||
>
|
||
{React.cloneElement(item.icon as React.ReactElement, { size: 18 })}
|
||
</div>
|
||
<div style={{ flex: 1, minWidth: 0 }}>
|
||
<div style={{ fontSize: 13, color: '#86909C', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
|
||
{item.title}
|
||
</div>
|
||
<div style={{ display: 'flex', alignItems: 'baseline', gap: 4, margin: '2px 0' }}>
|
||
<span
|
||
style={{
|
||
fontSize: 'clamp(16px, 1vw, 20px)',
|
||
fontWeight: 700,
|
||
color: '#1D2129',
|
||
lineHeight: '1.2'
|
||
}}
|
||
>
|
||
{item.value}
|
||
</span>
|
||
<span style={{ fontSize: 9, color: '#4E5969' }}>{item.unit}</span>
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 9,
|
||
color: item.trendColor || '#86909C',
|
||
fontWeight: 500,
|
||
whiteSpace: 'nowrap',
|
||
overflow: 'hidden',
|
||
textOverflow: 'ellipsis'
|
||
}}
|
||
>
|
||
{item.trend || item.desc}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
</Col>
|
||
))}
|
||
</Row>
|
||
|
||
<Row gutter={10} style={{ marginBottom: 10 }}>
|
||
<Col xs={24} xl={14} style={{ display: "flex", flexDirection: "column" }}>
|
||
<Card
|
||
title={
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: '12px',
|
||
flexWrap: 'wrap',
|
||
// 新增核心修复样式
|
||
flex: 1,
|
||
overflow: 'visible',
|
||
whiteSpace: 'normal',
|
||
minWidth: 0, // flex 子元素收缩兜底，超长时允许压缩换行
|
||
}}
|
||
>
|
||
<span style={{ fontSize: fontNormal, fontWeight: 700 }}>
|
||
{t('devices.robotRouteMonitor')}
|
||
</span>
|
||
|
||
|
||
</div>
|
||
}
|
||
size="small"
|
||
extra={
|
||
<Space size={4} wrap> {/* Space开启自动换行，小屏按钮自动折行 */}
|
||
<Button size="small" icon={<DeleteOutlined />} type="primary" style={{ borderRadius: 4 }} onClick={() => setClearNavLine(v => v + 1)}>{t('devices.clearRealtimeTrack')}</Button>
|
||
<Button size="small" icon={<DeleteOutlined />} danger style={{ borderRadius: 4 }} onClick={() => { setPoints([]); setPolyPoints([]); setRouteMode(""); setClearPlanLine(v => v + 1); }}>{t('devices.clearPlanRoute')}</Button>
|
||
{/*<Button size="small" icon={<PlusOutlined />} style={{ borderRadius: 4 }}>{t('common.addNew')}</Button>
|
||
<Button size="small" icon={<ImportOutlined />} style={{ borderRadius: 4 }}>{t('common.import')}</Button>
|
||
<Button size="small" icon={<NodeIndexOutlined />} style={{ borderRadius: 4 }}>{t('devices.optimize')}</Button>
|
||
<Button size="small" icon={<SaveOutlined />} style={{ borderRadius: 4 }}>{t('common.save')}</Button>*/}
|
||
{/*<Button size="small" icon={<Maximize2 size={12} />} />*/}
|
||
</Space>
|
||
}
|
||
variant="borderless"
|
||
styles={{ body: { padding: 0, position: 'relative' } }}
|
||
style={{ ...cardStyle, marginBottom: 10 }}
|
||
>
|
||
<div style={{ width: '100%', height: 420, background: '#e8f3ff center/cover', position: 'relative' }}>
|
||
<CesiumMap
|
||
devices={devices}
|
||
points={points}
|
||
focusLocation={focusLocation}
|
||
realtimePosition={realtimePosition}
|
||
polyPoints={polyPoints}
|
||
realtimeType="robot"
|
||
from="devicesTask"
|
||
drawRealTime={execute}
|
||
finishPoint={arrivedPoint}
|
||
ifClearNavLine={clearNavLine}
|
||
ifClearPlanLine={clearPlanLine}
|
||
routeMode={routeMode}
|
||
mapLayer={currentStation?.siteMapName}
|
||
/>
|
||
|
||
{/* 机器人状态悬浮面板 - 绝对定位左上角 */}
|
||
{execute && executingRobot && (
|
||
<div
|
||
style={{
|
||
position: 'absolute',
|
||
top: 16,
|
||
left: 10, // 避开左侧图例面板，防止重叠
|
||
background: 'rgba(22, 93, 255, 0.88)',
|
||
backdropFilter: 'blur(6px)',
|
||
color: '#fff',
|
||
fontSize: '12px',
|
||
padding: '8px 12px',
|
||
borderRadius: '8px',
|
||
boxShadow: '0 2px 10px rgba(0,0,0,0.15)',
|
||
maxWidth: 360, // 限制最大宽度，不会无限拉长
|
||
display: 'flex',
|
||
flexWrap: 'wrap',
|
||
alignItems: 'center',
|
||
gap: '6px 12px',
|
||
rowGap: 6,
|
||
zIndex: 10,
|
||
}}
|
||
>
|
||
<span style={{ fontWeight: 600 }}>
|
||
🤖 {executingRobot.deviceAlias || executingRobot.serialNumber}
|
||
</span>
|
||
|
||
<span>
|
||
{t('devices.controlMode')}
|
||
{robotRealtimePosition?.controlMode == '1' ? (
|
||
<span style={{ color: '#ff6f6f' }}>{t('devices.localMode')}</span>
|
||
) : (
|
||
<span style={{ color: '#9eff9e' }}>{t('devices.remoteMode')}</span>
|
||
)}
|
||
</span>
|
||
|
||
|
||
|
||
|
||
<span>
|
||
{t('devices.location')}
|
||
{robotRealtimePosition?.fix_status ? fixStatusMap[robotRealtimePosition?.fix_status] : t('constants.locationUnknown')}
|
||
</span>
|
||
|
||
{/* 视频开关 */}
|
||
<span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
||
{t('devices.video')}
|
||
<Switch
|
||
size="small"
|
||
checked={showVideo}
|
||
onChange={setShowVideo}
|
||
|
||
/>
|
||
</span>
|
||
</div>
|
||
)}
|
||
|
||
|
||
</div>
|
||
</Card>
|
||
|
||
{/* 机器人任务模块，带Tab切换 */}
|
||
<Card
|
||
size="small"
|
||
variant="borderless"
|
||
styles={{ body: { padding: 0, display: 'flex', flexDirection: 'column', height: "calc(100%)", overflow: "auto" } }}
|
||
style={{ ...cardStyle, maxHeight: "300px", flex: 1, marginBottom: 0 }}
|
||
|
||
>
|
||
<Tabs
|
||
activeKey={activeTab}
|
||
onChange={setActiveTab}
|
||
size="small"
|
||
style={{ padding: '0 12px' }}
|
||
items={[
|
||
{
|
||
key: 'pool',
|
||
label: t('devices.taskPool'),
|
||
},
|
||
{
|
||
key: 'task',
|
||
label: t('devices.taskExecutionPlan'),
|
||
},
|
||
|
||
{
|
||
key: 'history',
|
||
label: t('devices.taskHistory'),
|
||
}
|
||
]}
|
||
tabBarExtraContent={
|
||
<Space size={8}>
|
||
<Button size="small" icon={<ReloadOutlined />} onClick={() => {
|
||
fetchTaskList();
|
||
fetchTaskPoolList();
|
||
fetchTaskHistoryList();
|
||
}} />
|
||
<Tooltip title={t('devices.createTask')}>
|
||
<PlusOutlined
|
||
style={{ cursor: 'pointer', color: '#165DFF', fontSize: 14 }}
|
||
onClick={() => setIsTaskModalOpen(true)}
|
||
/>
|
||
</Tooltip>
|
||
</Space>
|
||
|
||
}
|
||
/>
|
||
|
||
<div style={{ padding: '0 12px 12px', flex: 1, overflow: 'auto' }}>
|
||
{/* 任务列表Tab */}
|
||
{activeTab === 'task' && (
|
||
<>
|
||
<div style={{ marginBottom: 8, display: 'flex', gap: 8, alignItems: 'center' }}>
|
||
<RangePicker
|
||
size="small"
|
||
format="YYYY-MM-DD"
|
||
placeholder={[t('devices.startDate'), t('devices.endDate')]}
|
||
value={filterForm.dateRange}
|
||
onChange={(dates) => {
|
||
setFilterForm(prev => ({ ...prev, dateRange: dates }));
|
||
}}
|
||
/>
|
||
<Select
|
||
style={{ width: 120 }}
|
||
size="small"
|
||
placeholder={t('roles.status')}
|
||
allowClear
|
||
options={[
|
||
{ label: t('devices.statusNew'), value: 'NEW' },
|
||
{ label: t('workOrder.inProgress'), value: 'EXECUTING' },
|
||
{ label: t('devices.statusPaused'), value: 'PAUSE' },
|
||
{ label: t('devices.statusFinished'), value: 'FINISH' },
|
||
{ label: t('devices.statusFailed'), value: 'FAILED' },
|
||
]}
|
||
value={filterForm.taskStatus}
|
||
onChange={(val) => {
|
||
setFilterForm(prev => ({ ...prev, taskStatus: val }));
|
||
}}
|
||
/>
|
||
<Select
|
||
style={{ width: 140 }}
|
||
size="small"
|
||
placeholder={t('devices.allRobots')}
|
||
allowClear
|
||
options={devices?.map(item => ({
|
||
value: item.serialNumber,
|
||
label: item.deviceAlias || item.deviceName
|
||
}))}
|
||
value={filterForm.robot?.serialNumber}
|
||
onChange={(val) => {
|
||
if (!val) {
|
||
setFilterForm(prev => ({ ...prev, robot: null }));
|
||
return;
|
||
}
|
||
const robot = devices.find(i => i.serialNumber === val);
|
||
setFilterForm(prev => ({ ...prev, robot: robot }));
|
||
}}
|
||
/>
|
||
</div>
|
||
<Table
|
||
size="small"
|
||
rowKey="id"
|
||
columns={taskColumns}
|
||
dataSource={taskList}
|
||
pagination={false}
|
||
scroll={{ x: 1200 }}
|
||
onRow={(record) => ({
|
||
onClick: () => handleRowClick(record),
|
||
style: { cursor: 'pointer' }
|
||
})}
|
||
/>
|
||
</>
|
||
)}
|
||
|
||
{/* 任务池Tab */}
|
||
{activeTab === 'pool' && (
|
||
<>
|
||
<div style={{ marginBottom: 8, display: 'flex', gap: 8, alignItems: 'center' }}>
|
||
<Select
|
||
style={{ width: 120 }}
|
||
size="small"
|
||
placeholder={t('roles.status')}
|
||
allowClear
|
||
options={[
|
||
{ label: t('devices.statusNew'), value: 'NEW' },
|
||
{ label: t('workOrder.inProgress'), value: 'EXECUTING' },
|
||
{ label: t('devices.statusPaused'), value: 'PAUSE' },
|
||
]}
|
||
value={poolFilterForm.taskStatus}
|
||
onChange={(val) => {
|
||
setPoolFilterForm(prev => ({ ...prev, taskStatus: val }));
|
||
}}
|
||
/>
|
||
<Select
|
||
style={{ width: 140 }}
|
||
size="small"
|
||
placeholder={t('devices.allRobots')}
|
||
allowClear
|
||
options={devices?.map(item => ({
|
||
value: item.serialNumber,
|
||
label: item.deviceAlias || item.deviceName
|
||
}))}
|
||
value={poolFilterForm.robot?.serialNumber}
|
||
onChange={(val) => {
|
||
if (!val) {
|
||
setPoolFilterForm(prev => ({ ...prev, robot: null }));
|
||
return;
|
||
}
|
||
const robot = devices.find(i => i.serialNumber === val);
|
||
setPoolFilterForm(prev => ({ ...prev, robot: robot }));
|
||
}}
|
||
/>
|
||
</div>
|
||
<Table
|
||
size="small"
|
||
rowKey="id"
|
||
columns={taskPoolColumns}
|
||
dataSource={taskPoolList}
|
||
pagination={false}
|
||
scroll={{ x: 800, y: 150 }}
|
||
onRow={(record) => ({
|
||
onClick: () => handlePoolTaskClick(record),
|
||
style: {
|
||
cursor: 'pointer',
|
||
backgroundColor: record.id === runningPoolTask?.id ? '#e6f4ff' : 'transparent'
|
||
}
|
||
})}
|
||
/>
|
||
</>
|
||
)}
|
||
|
||
{/* 历史任务Tab */}
|
||
{activeTab === 'history' && (
|
||
<>
|
||
<div style={{ marginBottom: 8, display: 'flex', gap: 8, alignItems: 'center' }}>
|
||
<RangePicker
|
||
size="small"
|
||
format="YYYY-MM-DD HH:mm:ss"
|
||
placeholder={[t('devices.startTime'), t('devices.endTime')]}
|
||
value={historyFilterForm.dateRange}
|
||
onChange={(dates) => {
|
||
setHistoryFilterForm(prev => ({ ...prev, dateRange: dates }));
|
||
}}
|
||
showTime
|
||
/>
|
||
<Select
|
||
style={{ width: 120 }}
|
||
size="small"
|
||
placeholder={t('roles.status')}
|
||
allowClear
|
||
options={[
|
||
{ label: t('devices.statusFinished'), value: 'FINISH' },
|
||
{ label: t('devices.statusFailed'), value: 'FAILED' },
|
||
{ label: t('clean.cancelled'), value: 'CANCELED' },
|
||
]}
|
||
value={historyFilterForm.taskStatus}
|
||
onChange={(val) => {
|
||
setHistoryFilterForm(prev => ({ ...prev, taskStatus: val }));
|
||
}}
|
||
/>
|
||
<Select
|
||
style={{ width: 340 }}
|
||
size="small"
|
||
placeholder={t('devices.allRobots')}
|
||
allowClear
|
||
options={devices?.map(item => ({
|
||
value: item.serialNumber,
|
||
label: item.deviceAlias || item.deviceName
|
||
}))}
|
||
value={historyFilterForm.robot?.serialNumber}
|
||
onChange={(val) => {
|
||
if (!val) {
|
||
setHistoryFilterForm(prev => ({ ...prev, robot: null }));
|
||
return;
|
||
}
|
||
const robot = devices.find(i => i.serialNumber === val);
|
||
setHistoryFilterForm(prev => ({ ...prev, robot: robot }));
|
||
}}
|
||
/>
|
||
</div>
|
||
<Table
|
||
size="small"
|
||
rowKey="id"
|
||
columns={taskHistoryColumns}
|
||
dataSource={taskHistoryList}
|
||
pagination={false}
|
||
scroll={{ x: 800, y: 150 }}
|
||
/>
|
||
</>
|
||
)}
|
||
</div>
|
||
</Card>
|
||
</Col>
|
||
<Col xs={24} xl={10}>
|
||
<Card
|
||
title={
|
||
<div className="flex justify-between items-center w-full">
|
||
<span style={{ fontSize: fontTitle, fontWeight: 700 }}>{t('devices.presetRoutes')}</span>
|
||
<Input
|
||
placeholder={t('devices.searchPlaceholder')}
|
||
size="small"
|
||
style={{ width: 200 }}
|
||
value={routeSearch}
|
||
onChange={e => setRouteSearch(e.target.value)}
|
||
/>
|
||
</div>
|
||
}
|
||
variant="borderless"
|
||
styles={{ body: { padding: '12px', height: 732, overflow: 'auto' } }}
|
||
style={cardStyle}
|
||
>
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
||
{routeList
|
||
//.filter(item => {
|
||
// if (!routeSearch) return true;
|
||
// const name = (item.workName || item.name || '').toLowerCase();
|
||
// const id = String(item.id || '').toLowerCase();
|
||
// const key = routeSearch.toLowerCase();
|
||
// return name.includes(key) || id.includes(key);
|
||
//})
|
||
.map(route => (
|
||
<div
|
||
key={route.id}
|
||
style={{
|
||
padding: 12,
|
||
borderRadius: 8,
|
||
background: '#F7F8FA',
|
||
cursor: 'pointer',
|
||
// 核心：判断当前项是否被选中，动态设置边框
|
||
border: selectedPathWork?.id === route.id ? '1px solid #165DFF' : '1px solid transparent',
|
||
display: 'flex',
|
||
gap: 12,
|
||
alignItems: 'center'
|
||
}}
|
||
onClick={(e) => {
|
||
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';
|
||
}
|
||
}}
|
||
>
|
||
<div style={{
|
||
width: 40,
|
||
height: 40,
|
||
borderRadius: 6,
|
||
background: '#e8f3ff',
|
||
overflow: 'hidden',
|
||
flexShrink: 0
|
||
}}>
|
||
{route.imgUrl ? (
|
||
<img
|
||
src={route.imgUrl}
|
||
alt={route.workName || route.name}
|
||
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
||
/>
|
||
) : (
|
||
<div style={{
|
||
width: '100%',
|
||
height: '100%',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
color: '#165DFF'
|
||
}}>
|
||
<EyeOutlined />
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* 路线信息 */}
|
||
<div style={{ flex: 1, minWidth: 0 }}>
|
||
<div style={{ fontWeight: 600, fontSize: 14, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
|
||
{route.workName || route.name || t('devices.unnamedRoute')}
|
||
</div>
|
||
<div style={{ fontSize: 12, color: '#86909C', marginTop: 4 }}>
|
||
ID: {route.id}
|
||
</div>
|
||
</div>
|
||
{/* 删除按钮 */}
|
||
<Tooltip title={t('devices.deleteRoute')}>
|
||
<Button
|
||
type="text"
|
||
icon={<DeleteOutlined style={{ color: '#F53F3F', fontSize: 20 }} />}
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
setSelectedPathWork(route);
|
||
// 替换为你的删除处理函数
|
||
handleDeleteRoute(route);
|
||
}}
|
||
/>
|
||
</Tooltip>
|
||
<Tooltip title={t('devices.createTask')}>
|
||
<Button
|
||
type="text"
|
||
icon={<PlusOutlined style={{ color: '#165DFF', fontSize: 20 }} />}
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
setSelectedPathWork(route);
|
||
setIsTaskModalOpen(true);
|
||
}}
|
||
/>
|
||
</Tooltip>
|
||
|
||
{/* 执行按钮 */}
|
||
<Tooltip title={t('devices.executeRoute')}>
|
||
<Button
|
||
type="text"
|
||
icon={<PlayCircleOutlined style={{ color: '#165DFF', fontSize: 28 }} />}
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
setSelectedPathWork(route);
|
||
handleTaskexcuted(route);
|
||
}}
|
||
/>
|
||
</Tooltip>
|
||
|
||
</div>
|
||
))}
|
||
</div>
|
||
</Card>
|
||
</Col>
|
||
|
||
|
||
</Row>
|
||
|
||
<Row gutter={16} >
|
||
<Col xs={24} xl={6} style={{ display: "flex", flexDirection: "column" }} >
|
||
<Card
|
||
title={<span style={{ fontSize: fontTitle, fontWeight: 700 }}>{t('devices.operationSuggestion')}</span>}
|
||
variant="borderless"
|
||
styles={{ body: { padding: '12px 16px' } }}
|
||
style={{ ...cardStyle, marginBottom: 8 }}
|
||
>
|
||
<Timeline
|
||
mode="left"
|
||
items={[
|
||
{
|
||
color: 'green',
|
||
label: '09:30',
|
||
children: (
|
||
<>
|
||
<Text strong>{t('devices.timelineMow', { robot: 'RBT-01' })}</Text>
|
||
<div style={{ fontSize: 12, color: '#86909C' }}>{t('devices.timelineMowDetail')}</div>
|
||
</>
|
||
)
|
||
},
|
||
{
|
||
color: 'blue',
|
||
label: '11:00',
|
||
children: (
|
||
<>
|
||
<Text strong>{t('devices.timelineInspect', { robot: 'RBT-02' })}</Text>
|
||
<div style={{ fontSize: 12, color: '#86909C' }}>{t('devices.timelineInspectDetail')}</div>
|
||
</>
|
||
)
|
||
},
|
||
{
|
||
color: 'gray',
|
||
label: '14:00',
|
||
children: (
|
||
<>
|
||
<Text strong>{t('devices.timelineMaintenance')}</Text>
|
||
<div style={{ fontSize: 12, color: '#86909C' }}>{t('devices.timelineMaintenanceDetail')}</div>
|
||
</>
|
||
)
|
||
}
|
||
]}
|
||
/>
|
||
<Button type="primary" block style={{ marginTop: 16, borderRadius: 18 }}>{t('devices.autoGenerateTodayPlan')}</Button>
|
||
</Card>
|
||
|
||
<Card
|
||
title={<span style={{ fontSize: fontTitle, fontWeight: 700 }}>{t('devices.deviceEnvironment')}</span>}
|
||
variant="borderless"
|
||
styles={{ body: { padding: '16px' } }}
|
||
style={{ ...cardStyle, flex: 1 }}
|
||
>
|
||
<Row gutter={[8, 8]}>
|
||
<Col span={12}>
|
||
<div style={{ background: '#F7F8FA', padding: 12, borderRadius: 10 }}>
|
||
<div style={{ fontSize: 12, color: '#86909C' }}>{t('devices.currentTemp')}</div>
|
||
<div style={{ fontSize: 18, fontWeight: 700 }}>24.5 ℃</div>
|
||
</div>
|
||
</Col>
|
||
<Col span={12}>
|
||
<div style={{ background: '#F7F8FA', padding: 12, borderRadius: 10 }}>
|
||
<div style={{ fontSize: 12, color: '#86909C' }}>{t('devices.humidity')}</div>
|
||
<div style={{ fontSize: 18, fontWeight: 700 }}>65 %</div>
|
||
</div>
|
||
</Col>
|
||
<Col span={12}>
|
||
<div style={{ background: '#F7F8FA', padding: 12, borderRadius: 10 }}>
|
||
<div style={{ fontSize: 12, color: '#86909C' }}>{t('devices.positionAccuracy')}</div>
|
||
<div style={{ fontSize: 18, fontWeight: 700, color: '#00B42A' }}>{t('devices.rtkFixed')}</div>
|
||
</div>
|
||
</Col>
|
||
<Col span={12}>
|
||
<div style={{ background: '#F7F8FA', padding: 12, borderRadius: 10 }}>
|
||
<div style={{ fontSize: 12, color: '#86909C' }}>{t('devices.networkLatency')}</div>
|
||
<div style={{ fontSize: 18, fontWeight: 700 }}>45 ms</div>
|
||
</div>
|
||
</Col>
|
||
</Row>
|
||
<div style={{ marginTop: 8, padding: 12, background: 'rgba(255, 125, 0, 0.1)', borderRadius: 8, display: 'flex', alignItems: 'center', gap: 8 }}>
|
||
<AlertCircle size={16} style={{ color: '#FF7D00' }} />
|
||
<span style={{ fontSize: 13, color: '#FF7D00' }}>{t('devices.waterRiskWarning')}</span>
|
||
</div>
|
||
</Card>
|
||
</Col>
|
||
|
||
<Col xs={24} xl={18} style={{ display: 'flex', flexDirection: 'column', }}>
|
||
<Card
|
||
title={<span style={{ fontSize: fontTitle, fontWeight: 700 }}>{t('devices.taskBoard')}</span>}
|
||
variant="borderless"
|
||
styles={{ body: { padding: '12px', flex: 1 } }}
|
||
style={{ ...cardStyle, height: '100%', display: "flex", flexDirection: "column" }}
|
||
>
|
||
<Row gutter={16} style={{ height: "100%" }} >
|
||
<Col span={8}>
|
||
<div style={{ background: '#F7F8FA', padding: 12, borderRadius: 8, height: "100%" }}>
|
||
<Title level={5} style={{ fontSize: 14, marginBottom: 12 }}><Badge color="#86909C" text={t('devices.pending')} /></Title>
|
||
{waitList.map((item, idx) => (
|
||
<Card key={idx} size="small" style={{ marginBottom: 8, borderRadius: 6 }}>
|
||
<div style={{ fontWeight: 600 }}>{item.planName || item.workName}</div>
|
||
<div style={{ fontSize: 12, color: '#86909C' }}>{t('devices.device')}: {item.deviceId}</div>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
</Col>
|
||
<Col span={8}>
|
||
<div style={{ background: '#E8F3FF', padding: 12, borderRadius: 8, height: "100%" }}>
|
||
<Title level={5} style={{ fontSize: 14, marginBottom: 12 }}><Badge color="#165DFF" text={t('devices.statInProgress')} /></Title>
|
||
{runList.map((item, idx) => (
|
||
<Card key={idx} size="small" style={{ marginBottom: 8, borderRadius: 6 }}>
|
||
<div style={{ fontWeight: 600 }}>{item.planName || item.workName}</div>
|
||
<div style={{ fontSize: 12, color: '#165DFF' }}>
|
||
{item.taskStaus === 'EXECUTING' ? t('devices.executingEllipsis') : t('devices.paused')}
|
||
</div>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
</Col>
|
||
<Col span={8}>
|
||
<div style={{ background: '#F6FFED', padding: 12, borderRadius: 8, height: "100%" }}>
|
||
<Title level={5} style={{ fontSize: 14, marginBottom: 12 }}><Badge color="#52C41A" text={t('workOrder.completed')} /></Title>
|
||
{finishList.slice(0, 3).map((item, idx) => (
|
||
<Card key={idx} size="small" style={{ marginBottom: 8, borderRadius: 6 }}>
|
||
<div style={{ fontWeight: 600 }}>{item.planName || item.workName}</div>
|
||
<div style={{ fontSize: 12, color: item.taskStaus === 'FAILED' ? '#F53F3F' : '#52C41A' }}>
|
||
{item.taskStaus === 'FAILED' ? t('devices.statusFailed') : t('devices.statusFinished')}
|
||
</div>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
</Col>
|
||
</Row>
|
||
</Card>
|
||
</Col>
|
||
</Row>
|
||
|
||
{/* 🔥 传递 routeList 给弹窗 */}
|
||
<NewTaskModal
|
||
isOpen={isTaskModalOpen}
|
||
onClose={() => setIsTaskModalOpen(false)}
|
||
robots={devices}
|
||
selectedPathWork={selectedPathWork}
|
||
handlGetTaskList={fetchTaskList}
|
||
routeList={routeList}
|
||
stationId={stationId}
|
||
onTaskCreated={handleTaskCreated}
|
||
userInfo={userInfo}
|
||
/>
|
||
|
||
{/* 执行任务弹窗 */}
|
||
<Modal
|
||
title={t('devices.executeRouteTask')}
|
||
open={executeModalVisible}
|
||
onCancel={() => setExecuteModalVisible(false)}
|
||
onOk={handleExecuteConfirm}
|
||
okText={t('devices.execute')}
|
||
cancelText={t('common.cancel')}
|
||
>
|
||
<div style={{ padding: '10px 0' }}>
|
||
<div style={{ marginBottom: 16 }}>
|
||
<div style={{ marginBottom: 8, fontWeight: 500 }}>{t('devices.routeInfo')}</div>
|
||
<div style={{ padding: 12, background: '#f5f7fa', borderRadius: 6 }}>
|
||
<div><strong>{t('devices.routeName')}</strong>{selectedRouteForExecute?.workName || selectedRouteForExecute?.name}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div style={{ marginBottom: 8, fontWeight: 500 }}>{t('workOrder.selectDevice')}</div>
|
||
<Select
|
||
style={{ width: '100%' }}
|
||
placeholder={t('devices.selectExecuteDevice')}
|
||
value={selectedRobotForExecute?.serialNumber}
|
||
onChange={(val) => {
|
||
const robot = devices.find(d => d.serialNumber === val);
|
||
setSelectedRobotForExecute(robot);
|
||
}}
|
||
>
|
||
{devices.map(device => (
|
||
<Select.Option key={device.serialNumber} value={device.serialNumber}>
|
||
{device.deviceAlias} ({device.serialNumber})
|
||
</Select.Option>
|
||
))}
|
||
</Select>
|
||
</div>
|
||
</div>
|
||
</Modal>
|
||
|
||
{showVideo && executingRobot && execute && taskPoolList.length > 0 && (
|
||
<DraggableBox
|
||
defaultPosition={{ x: 50, y: 50 }}
|
||
title={t('devices.robotPanoramaVideo', { robot: executingRobot.deviceAlias || executingRobot.serialNumber })}
|
||
onClose={() => setShowVideo(false)}
|
||
>
|
||
<div style={{ height: '100%', width: '100%' }}>
|
||
<MowerAllView
|
||
serialNumber={executingRobot.serialNumber}
|
||
robotVideo={robotVideo}
|
||
ready={ready}
|
||
error={error}
|
||
/>
|
||
</div>
|
||
</DraggableBox>
|
||
)}
|
||
</div >
|
||
);
|
||
}
|
||
|
||
const NewTaskModal = ({ isOpen, onClose, robots, selectedPathWork, handlGetTaskList, routeList, stationId, onTaskCreated, userInfo }) => {
|
||
const { t } = useTranslation();
|
||
const [formData, setFormData] = useState({
|
||
path: selectedPathWork || null,
|
||
device: null,
|
||
repeatPlan: 'DAY',
|
||
days: [],
|
||
dayOfMonth: [],
|
||
startDate: '',
|
||
dayTime: '',
|
||
planName: '',
|
||
excuteDayStartTime: '',
|
||
excuteDayEndTime: '',
|
||
});
|
||
const { currentStation } = useSelector((state: RootState) => state.station);
|
||
|
||
|
||
useEffect(() => {
|
||
if (selectedPathWork) {
|
||
setFormData(prev => ({ ...prev, path: selectedPathWork }));
|
||
}
|
||
|
||
}, [selectedPathWork]);
|
||
|
||
// ====================== 周/月选择 ======================
|
||
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 handleToggleDay = (val) => {
|
||
setFormData(prev => {
|
||
const exists = prev.days.includes(val);
|
||
const newDays = exists ? prev.days.filter(d => d !== val) : [...prev.days, val];
|
||
return { ...prev, days: newDays };
|
||
});
|
||
};
|
||
|
||
const handleToggleMonthDay = (val) => {
|
||
setFormData(prev => {
|
||
const exists = prev.dayOfMonth.includes(val);
|
||
const newDays = exists ? prev.dayOfMonth.filter(d => d !== val) : [...prev.dayOfMonth, val];
|
||
return { ...prev, dayOfMonth: newDays };
|
||
});
|
||
};
|
||
|
||
// ====================== 日期时间 ======================
|
||
const handleDateChange = (date) => {
|
||
if (!date) return;
|
||
setFormData({ ...formData, startDate: date.format('YYYY-MM-DD') });
|
||
};
|
||
|
||
const handleTimeChange = (time, timeString) => {
|
||
setFormData({ ...formData, dayTime: timeString });
|
||
};
|
||
|
||
const handleCycleChange = (dates) => {
|
||
if (!dates || !dates[0] || !dates[1]) return;
|
||
setFormData(prev => ({
|
||
...prev,
|
||
excuteDayStartTime: dates[0].format('YYYY-MM-DD HH:mm:ss'),
|
||
excuteDayEndTime: dates[1].format('YYYY-MM-DD HH:mm:ss'),
|
||
}));
|
||
};
|
||
// ====================== 保存 ======================
|
||
const handleSave = () => {
|
||
const missingFields = [];
|
||
if (!formData.device?.serialNumber) missingFields.push(t('devices.deviceSerial'));
|
||
if (!formData.planName) missingFields.push(t('devices.taskName'));
|
||
if (!formData.path?.id) missingFields.push(t('devices.route'));
|
||
//if (!formData.excuteDayStartTime) missingFields.push(t('workOrder.execStartTime'));
|
||
//if (!formData.excuteDayEndTime) missingFields.push('执行结束时间');
|
||
|
||
if (missingFields.length > 0) {
|
||
utils.message.error({ title: t('constants.info'), content: t('devices.fillRequired', { fields: missingFields.join('、') }) });
|
||
return;
|
||
}
|
||
|
||
// 统一格式：年月日 时分秒
|
||
const startTime = formData.excuteDayStartTime;
|
||
const finishTime = formData.excuteDayEndTime;
|
||
const finalData = {
|
||
deviceId: formData.device.serialNumber,
|
||
orgId: currentStation?.orgId,
|
||
planName: formData.planName,
|
||
routeId: formData.path.id,
|
||
siteId: stationId,
|
||
deviceTaskPlanRules: { type: formData.repeatPlan },
|
||
startTime: startTime,
|
||
finishTime: finishTime,
|
||
};
|
||
|
||
if (formData.repeatPlan === 'DAY') {
|
||
finalData.deviceTaskPlanRules = {
|
||
type: 'DAY',
|
||
startDate: formData.startDate,
|
||
dayTime: formData.dayTime
|
||
};
|
||
} else if (formData.repeatPlan === 'WEEK') {
|
||
finalData.deviceTaskPlanRules = {
|
||
type: 'WEEK',
|
||
days: formData.days,
|
||
dayTime: formData.dayTime
|
||
};
|
||
} else if (formData.repeatPlan === 'MONTH') {
|
||
finalData.deviceTaskPlanRules = {
|
||
type: 'MONTH',
|
||
dayOfMonth: formData.dayOfMonth,
|
||
dayTime: formData.dayTime
|
||
};
|
||
}
|
||
if (!finalData.deviceTaskPlanRules.dayTime) {
|
||
utils.message.error(t('devices.selectExecTime'));
|
||
return;
|
||
}
|
||
|
||
saveDeviceTask(finalData).then(res => {
|
||
if (res.code === 200) {
|
||
utils.message.success(t('devices.taskCreated'));
|
||
onClose();
|
||
onTaskCreated();
|
||
} else {
|
||
utils.message.error(res.data.msg || t('devices.createFailed'));
|
||
}
|
||
}).catch(() => utils.message.error(t('devices.createTaskError')));
|
||
};
|
||
|
||
// ====================== 渲染 ======================
|
||
return (
|
||
<Modal
|
||
title={t('devices.newTask')}
|
||
open={isOpen}
|
||
onCancel={onClose}
|
||
width={500}
|
||
maskClosable={false}
|
||
footer={null}
|
||
>
|
||
<div className="space-y-4">
|
||
|
||
{/* 任务名称 */}
|
||
<div>
|
||
<label className="block mb-2 font-medium">{t('devices.taskName')}</label>
|
||
<Input
|
||
value={formData.planName}
|
||
onChange={(e) => setFormData({ ...formData, planName: e.target.value })}
|
||
placeholder={t('devices.inputTaskName')}
|
||
/>
|
||
</div>
|
||
|
||
{/* 执行路线 */}
|
||
<div>
|
||
<label className="block mb-2 font-medium">{t('devices.executeRouteLabel')}</label>
|
||
<Select
|
||
className="w-full"
|
||
placeholder={t('devices.selectRoute')}
|
||
onSelect={(_, option) => {
|
||
const route = routeList.find(r => r.id === option.value);
|
||
setFormData(prev => ({ ...prev, path: route }));
|
||
}}
|
||
value={formData.path?.id}
|
||
>
|
||
{routeList.map(route => (
|
||
<Select.Option
|
||
key={route.id}
|
||
value={route.id}
|
||
>
|
||
{route.workName || route.name}
|
||
</Select.Option>
|
||
))}
|
||
</Select>
|
||
</div>
|
||
|
||
{/* 选择设备 */}
|
||
<div className="relative">
|
||
<label className="block mb-2 font-medium">{t('video.selectDevice')}</label>
|
||
<Select
|
||
className="w-full"
|
||
placeholder={t('video.selectDevice')}
|
||
onSelect={(_, option) => {
|
||
const robot = robots.find(r => r.serialNumber === option.value);
|
||
setFormData(prev => ({ ...prev, device: robot }));
|
||
}}
|
||
value={formData.device?.serialNumber}
|
||
>
|
||
{robots.map(robot => (
|
||
<Select.Option
|
||
key={robot.serialNumber}
|
||
value={robot.serialNumber}
|
||
>
|
||
{robot.deviceAlias} ({robot.serialNumber})
|
||
</Select.Option>
|
||
))}
|
||
</Select>
|
||
</div>
|
||
|
||
{/* 重复计划 */}
|
||
<div>
|
||
<label className="block mb-2 font-medium">{t('devices.repeatPlan')}</label>
|
||
<Select
|
||
value={formData.repeatPlan}
|
||
onChange={(val) => setFormData({ ...formData, repeatPlan: val })}
|
||
className="w-full"
|
||
>
|
||
<Select.Option value="DAY">{t('devices.day')}</Select.Option>
|
||
<Select.Option value="WEEK">{t('devices.week')}</Select.Option>
|
||
<Select.Option value="MONTH">{t('devices.month')}</Select.Option>
|
||
</Select>
|
||
</div>
|
||
|
||
{/* 周选择 */}
|
||
{formData.repeatPlan === 'WEEK' && (
|
||
<div className="flex gap-1 flex-wrap">
|
||
{weekDays.map(day => (
|
||
<Button
|
||
key={day.value}
|
||
type={formData.days.includes(day.value) ? 'primary' : 'default'}
|
||
onClick={() => handleToggleDay(day.value)}
|
||
size="small"
|
||
shape="circle"
|
||
>
|
||
{day.label}
|
||
</Button>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{/* 月选择 */}
|
||
{formData.repeatPlan === 'MONTH' && (
|
||
<div className="grid grid-cols-7 gap-1">
|
||
{monthDays.map(day => (
|
||
<Button
|
||
key={day}
|
||
type={formData.dayOfMonth.includes(day) ? 'primary' : 'default'}
|
||
onClick={() => handleToggleMonthDay(day)}
|
||
size="small"
|
||
>
|
||
{day}
|
||
</Button>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{/* 按天：选择日期 */}
|
||
{formData.repeatPlan === 'DAY' && (
|
||
<>
|
||
<label className="block mb-2 font-medium">{t('devices.execDate')}</label>
|
||
<DatePicker
|
||
onChange={handleDateChange}
|
||
className="w-full"
|
||
placeholder={t('devices.selectExecDate')}
|
||
/>
|
||
</>
|
||
)}
|
||
|
||
{/* 时间 */}
|
||
<label className="block mb-2 font-medium">{t('devices.execTime')}</label>
|
||
<TimePicker
|
||
format="HH:mm:ss"
|
||
onChange={handleTimeChange}
|
||
className="w-full"
|
||
placeholder={t('devices.selectExecTime')}
|
||
/>
|
||
|
||
{/* 执行周期 */}
|
||
<label className="block mb-2 font-medium">{t('devices.executionCycle')}</label>
|
||
<RangePicker
|
||
onChange={handleCycleChange}
|
||
className="w-full"
|
||
placeholder={[t('devices.startDate'), t('devices.endDate')]}
|
||
showTime
|
||
format="YYYY-MM-DD HH:mm:ss"
|
||
/>
|
||
|
||
{/* 底部按钮 */}
|
||
<div className="flex justify-end gap-2 mt-6">
|
||
<Button onClick={onClose}>{t('common.cancel')}</Button>
|
||
<Button type="primary" onClick={handleSave}>{t('devices.saveTask')}</Button>
|
||
</div>
|
||
</div>
|
||
</Modal>
|
||
);
|
||
};
|