diff --git a/src/index.css b/src/index.css index 898e628..8fff911 100644 --- a/src/index.css +++ b/src/index.css @@ -59,6 +59,10 @@ .ant-select-selector{ border-radius:8px !important; } +.ant-btn{ + border-radius:8px !important; + +} @keyframes sunRotate { diff --git a/src/pages/CleanOptimization.tsx b/src/pages/CleanOptimization.tsx index fa349f5..7ac69fe 100644 --- a/src/pages/CleanOptimization.tsx +++ b/src/pages/CleanOptimization.tsx @@ -1,487 +1,580 @@ import React, { useState } from 'react'; import { Row, Col, Card, Button, Table, Tag, Typography, Space, Statistic, DatePicker, - Divider, - Flex + Divider, Progress, Badge, Select, Tooltip } from 'antd'; import { - ReloadOutlined, PlusOutlined, ArrowUpOutlined, CheckCircleOutlined, - CloudOutlined, SunOutlined, MoneyCollectOutlined, CalendarOutlined, DropOutlined + ReloadOutlined, PlusOutlined, ArrowUpOutlined, ArrowDownOutlined, + CheckCircleOutlined, CloudOutlined, SunOutlined, MoneyCollectOutlined, + CalendarOutlined, DropOutlined, DownloadOutlined, InfoCircleOutlined, + EnvironmentOutlined, RocketOutlined, UserOutlined, WindOutlined, + PercentageOutlined, GlobalOutlined, AimOutlined } from '@ant-design/icons'; -import { Line, Pie, Bar } from '@ant-design/charts'; -import he from '@/dist/assets/Organization-irk1gmLc'; +import { Line, Pie, Column } from '@ant-design/charts'; +import { + Droplets, + Zap, + TrendingUp, + Calendar, + DollarSign, + LayoutGrid, + ChevronRight, + Bot, + User, + CloudRain, + Thermometer, + Wind, + Info +} from 'lucide-react'; const { Title, Text } = Typography; +const { RangePicker } = DatePicker; +const { Option } = Select; // 模拟数据 const smartCleanPlanData = [ - { id: 'plan01', priority: '高', area: '区域15, 01', boost: '4,250 kWh', weather: 88 }, - { id: 'plan02', priority: '高', area: '区域06, 02', boost: '3,180 kWh', weather: 86 }, - { id: 'plan03', priority: '中', area: '区域07, 09', boost: '2,210 kWh', weather: 84 }, + { id: '计划 01', priority: '高', area: '区块 15, 01', boost: '4,250 kWh', weather: '88%' }, + { id: '计划 02', priority: '高', area: '区块 02, 11', boost: '3,180 kWh', weather: '85%' }, + { id: '计划 03', priority: '中', area: '区块 05, 12', boost: '2,210 kWh', weather: '80%' }, + { id: '计划 04', priority: '中', area: '区块 07, 03', boost: '1,620 kWh', weather: '78%' }, + { id: '计划 05', priority: '低', area: '区块 17, 13', boost: '1,210 kWh', weather: '82%' }, ]; const workOrderPreviewData = [ - { - area: 'A区北侧组件清洗区', - priority: '高', - duration: '2.5 h', - handler: '运维工程师', - planTime: '2026-04-30T20:26:05', - status: '已审批' - }, - { - area: 'B区沙尘沉积区', - priority: '中', - duration: '2.5 h', - handler: '清洗班组', - planTime: '2026-05-02T20:26:05', - status: '待确认' - } + { area: '区块 15', priority: '高', duration: '4.0 h', handler: '李工', planTime: '2025-05-26 - 05-27', status: '待创建' }, + { area: '区块 01', priority: '高', duration: '3.5 h', handler: '李工', planTime: '2025-05-26 - 05-27', status: '待创建' }, + { area: '区块 02', priority: '高', duration: '2.8 h', handler: '王工', planTime: '2025-05-28 - 05-29', status: '待创建' }, + { area: '区块 11', priority: '高', duration: '2.6 h', handler: '王工', planTime: '2025-05-28 - 05-29', status: '待创建' }, + { area: '区块 05', priority: '中', duration: '2.2 h', handler: '赵工', planTime: '2025-05-29 - 05-30', status: '待创建' }, ]; -// 图表配置 -const pollutionTrendConfig = { - data: [ - { date: '04-23', 污染指数: 45, 阈值: 50 }, - { date: '04-24', 污染指数: 48, 阈值: 50 }, - { date: '04-26', 污染指数: 52, 阈值: 50 }, - { date: '04-28', 污染指数: 50, 阈值: 50 }, - { date: '04-29', 污染指数: 54, 阈值: 50 }, - ], - xField: 'date', - yField: ['污染指数', '阈值'], - color: ['#1890ff', '#faad14'], - smooth: true, - legend: { position: 'top-left' }, -}; +// 图表配置数据 +const pollutionTrendData = [ + { date: '05-18', value: 78, type: '污染指数' }, + { date: '05-19', value: 72, type: '污染指数' }, + { date: '05-20', value: 65, type: '污染指数' }, + { date: '05-21', value: 75, type: '污染指数' }, + { date: '05-22', value: 68, type: '污染指数' }, + { date: '05-23', value: 60, type: '污染指数' }, + { date: '05-24', value: 68.5, type: '污染指数' }, + { date: '05-18', value: 75, type: '阈值' }, + { date: '05-19', value: 75, type: '阈值' }, + { date: '05-20', value: 75, type: '阈值' }, + { date: '05-21', value: 75, type: '阈值' }, + { date: '05-22', value: 75, type: '阈值' }, + { date: '05-23', value: 75, type: '阈值' }, + { date: '05-24', value: 75, type: '阈值' }, +]; -const lossPieConfig = { - data: [ - { type: '灰尘积累', value: 50 }, - { type: '鸟粪遮挡', value: 30 }, - { type: '沙尘污染', value: 15 }, - { type: '其他', value: 5 }, - ], - angleField: 'value', - colorField: 'type', - color: ['#1890ff', '#ff4d4f', '#faad14', '#d9d9d9'], - radius: 0.8, - innerRadius: 0.6, - label: { type: 'outer' }, -}; +const lossPieData = [ + { type: '灰尘积累', value: 6120 }, + { type: '鸟粪遮挡', value: 1480 }, + { type: '沙尘沉积', value: 1120 }, + { type: '其他', value: 600 }, +]; -const compareBarConfig = { - data: [ - { date: 'D-7', 清洗前: 800, 清洗后: 1200, 提升率: 50 }, - { date: 'D-5', 清洗前: 850, 清洗后: 1200, 提升率: 41 }, - { date: 'D-3', 清洗前: 900, 清洗后: 1200, 提升率: 33 }, - { date: 'D-1', 清洗前: 950, 清洗后: 1200, 提升率: 26 }, - ], - xField: 'date', - yField: ['清洗前', '清洗后'], - color: ['#1890ff', '#52c41a'], - isGroup: true, -}; +const compareBarData = [ + { date: 'D-7', value: 800, type: '清洗前发电量(kWh)' }, + { date: 'D-7', value: 1200, type: '清洗后发电量(kWh)' }, + { date: 'D-6', value: 850, type: '清洗前发电量(kWh)' }, + { date: 'D-6', value: 1250, type: '清洗后发电量(kWh)' }, + { date: 'D-5', value: 900, type: '清洗前发电量(kWh)' }, + { date: 'D-5', value: 1300, type: '清洗后发电量(kWh)' }, + { date: 'D-4', value: 880, type: '清洗前发电量(kWh)' }, + { date: 'D-4', value: 1280, type: '清洗后发电量(kWh)' }, + { date: 'D-3', value: 920, type: '清洗前发电量(kWh)' }, + { date: 'D-3', value: 1320, type: '清洗后发电量(kWh)' }, + { date: 'D-2', value: 950, type: '清洗前发电量(kWh)' }, + { date: 'D-2', value: 1350, type: '清洗后发电量(kWh)' }, + { date: 'D-1', value: 980, type: '清洗前发电量(kWh)' }, + { date: 'D-1', value: 1380, type: '清洗后发电量(kWh)' }, +]; + +const boostRateData = [ + { date: 'D-7', rate: 35 }, + { date: 'D-6', rate: 32 }, + { date: 'D-5', rate: 30 }, + { date: 'D-4', rate: 28 }, + { date: 'D-3', rate: 31 }, + { date: 'D-2', rate: 29 }, + { date: 'D-1', rate: 33 }, +]; export default function CleanOptimizationPage() { - const [mapTooltip, setMapTooltip] = useState(null); - const renderPriorityTag = (priority: string) => { - const colorMap: Record = { '高': 'red', '中': 'orange', '低': 'green' }; - return {priority}; - }; - - const renderStatusTag = (status: string) => { - const colorMap: Record = { '已审批': 'green', '待确认': 'orange' }; - return {status}; + const config: Record = { + '高': { color: '#ff4d4f', bg: '#fff1f0' }, + '中': { color: '#faad14', bg: '#fff7e6' }, + '低': { color: '#52c41a', bg: '#f6ffed' }, + }; + return {priority}; }; return ( -
- {/* 顶部标题与操作 */} -
-
- 清洗优化管理 - 污染热力分布、AI推荐计划、天气资源联动与清洗收益评估 +
+ {/* 顶部指标卡片 */} + + + +
+
+ 污染指数 +
+ 68.5 + 中等 +
+
+ 较昨日 + ▼ 5.3 +
+
+
+ +
+
+ + + + +
+
+ 建议清洗区块数 +
+ 8 / 20 +
+
+ 占比 40% +
+
+
+ +
+
+ + + + +
+
+ 预计发电提升 +
+ 12,850 + kWh +
+
+ 占当前日发电量 14.2% +
+
+
+ +
+
+ + + + +
+
+ 预计收益提升 +
+ ¥ 7,286 +
+
+ 按电价 0.568 元/kWh 计算 +
+
+
+ +
+
+ + + + +
+
+ 上次清洗时间 +
+ 2025-05-12 +
+
+ 距今 12 天 +
+
+
+ +
+
+ + + + +
+
+ 清洗成本预估 +
+ ¥ 3,200 +
+
+ 预计单次清洗总成本 +
+
+
+ +
+
+ + + + + {/* 标题栏 */} +
+
+ 清洗优化管理 +
- 更新时间: 2026-05-06 09:30 + + 更新时间：2025-05-24 09:30 + - - + +
- {/* 顶部指标卡片 */} - - - - - -
- } - valueStyle={{ fontSize: 28, fontWeight: 700 }} + + {/* 左侧：四个图表 */} + + 污染趋势} bordered={false} style={{ borderRadius: 8, marginBottom: 12, flex: 'none' }} bodyStyle={{ padding: '12px' }}> + { + if (type === '阈值') return { lineDash: [4, 4] }; + return {}; + }} + legend={{ position: 'top-right' }} + height={120} + padding={[10, 10, 30, 30]} /> -
较昨日 ▼ 5.3
- - - - - - ▦ -
- } - valueStyle={{ fontSize: 28, fontWeight: 700 }} - /> -
占比 40%
- - - - - - -
- } - valueStyle={{ fontSize: 28, fontWeight: 700, color: '#52c41a' }} - /> -
占昨日发电量 14.2%
- - - - - - ¥ -
- } - valueStyle={{ fontSize: 28, fontWeight: 700 }} - /> -
按电价 0.568 元/kWh 计算
- - - - - - - - } - valueStyle={{ fontSize: 20, fontWeight: 700 }} - /> -
距今 24 天
- - - - - - ¥ - - } - suffix="" - valueStyle={{ fontSize: 28, fontWeight: 700 }} - /> -
预计单次清洗总成本
- - - - - {/* 左侧图表区域 */} - - - -

污染趋势

- 近30天污染指数与清洗阈值 - } - bordered={false} - style={{ borderRadius: 8 }} - > - - -

发电损失分析

- 污染类型造成的发电损失占比 - } - bordered={false} - style={{ borderRadius: 8 }} - > - {/* 👇 关键：给图表外层套一层固定宽度 + 居中，防止溢出 */} -
+ 发电损失分析 (近 7 天)} bordered={false} style={{ borderRadius: 8, marginBottom: 12, flex: 'none' }} bodyStyle={{ padding: '12px' }}> +
{ + const total = lossPieData.reduce((a, b) => a + b.value, 0); + const percent = ((item.value / total) * 100).toFixed(1); + return `${item.value.toLocaleString()} kWh (${percent}%)`; + } + } + }} height={140} - //width="100%" /* 强制宽度100% */ /> -
-
发电损失
-
9,320 kWh
+
+
总损失电量
+
9,320
+
kWh
- -

清洗前后对比

- 近一次建议清洗区域发电恢复测算 -
} - bordered={false} - style={{ borderRadius: 8 }} - > - + 清洗前后对比 (近一次清洗)} bordered={false} style={{ borderRadius: 8, marginBottom: 12, flex: 'none' }} bodyStyle={{ padding: '12px' }}> + - - {/* 中间地图区域 */} - - -

电站污染分布与建议清洗区块

-
- 真实正射底图 · 污染热力叠加 · AI调度优先级 -
- 低污染 - 中污染 - 重污染 + 清洗收益测算 (本次建议清洗)} bordered={false} style={{ borderRadius: 8, flex: 1 }} bodyStyle={{ padding: '12px' }}> + + +
预计发电提升
+
12,850 kWh
+ + +
电价 (含税)
+
0.568 元/kWh
+ + +
预计收益
+
7,286 元
+ + +
投资回报率 (ROI)
+
227%
+ + + +
+ 回收周期 + 0.44 天
-
-
} - bordered={false} - style={{ borderRadius: 8, height: '100%' }} - - > - -
- {/* 模拟地图区域 */} -
-
区域01
82.3
-
区域02
76.8
-
区域03
63.2
-
区域04
33.6
-
区域05
19.7
-
区域06
88.1
-
区域07
68.7
-
区域08
51.2
-
区域09
72.9
-
区域10
36.8
-
区域11
44.6
-
区域12
57.5
-
区域13
61.8
-
区域14
42.1
-
区域15
85.6
-
区域16
49.8
-
区域17
24.5
-
区域18
13.7
-
区域19
36.3
- - {/* 模拟 tooltip */} - {mapTooltip && ( -
-
{mapTooltip.name}
-
{mapTooltip.desc}
-
- )} -
- - {/* 地图控制 */} -
- 底图缩放 - - - - -
90%
-
-
+ + - {/* 右侧面板 */} - + {/* 中间：地图 + 工单表格 */} + 智能清洗建议} + title={电站污染分布与建议清洗区块} bordered={false} - style={{ borderRadius: 8, marginBottom: 16, flex: 1, display: "flex", flexDirection: "column" }} - extra={
优先级、天气适宜度与收益提升联动排序AI推荐
} + style={{ borderRadius: 8, marginBottom: 12, flex: 1, display: 'flex', flexDirection: 'column' }} + bodyStyle={{ padding: 0, flex: 1, position: 'relative' }} > - {/* 👇 关键：填满卡片 + 超长滚动 */} -
- +
+ + 污染等级： + + + + + +
- - 天气与资源参考} - bordered={false} - style={{ borderRadius: 8, marginBottom: 16 }} - extra={未来7天作业窗口、风速、湿度、降水概率} - > -
- {['05-06', '05-07', '05-08', '05-09'].map((day, idx) => ( - - ))} +
+ {/* 模拟地图底图 */} + + + {/* 区块标记 */} +
+
区块 01
+
82.3
+
+
+
区块 02
+
76.8
+
+
+
区块 03
+
63.2
+
+
+
区块 08
+
19.7
+
+ +
+
区块 04
+
33.6
+
+
+
区块 05
+
68.7
+
+
+
区块 15
+
82.9
+
+ + {/* 地图控制按钮 */} +
+ + + + +
清洗方案建议} + title={清洗工单预览} bordered={false} - style={{ borderRadius: 8 }} - extra={机器人清洗与人工清洗资源对比} + style={{ borderRadius: 8, flex: 'none' }} + extra={} + bodyStyle={{ padding: 0 }} > -
- - +
{s} }, + { title: '操作', key: 'action', width: 80, render: () => }, + ]} + dataSource={workOrderPreviewData} + pagination={false} + size="small" + /> + + + + {/* 右侧：建议 + 方案 + 天气 + 评估 */} + + 智能清洗建议} bordered={false} style={{ borderRadius: 8, marginBottom: 12, flex: 'none' }} bodyStyle={{ padding: 0 }}> +
+ 算法模型：多因子综合优化模型 +
+
{p} }, + { title: '建议区块', dataIndex: 'area', width: 100 }, + { title: '预计提升', dataIndex: 'boost', width: 100 }, + { title: '天气适宜度', dataIndex: 'weather', width: 90, render: (w) => {w} }, + { title: '建议时间', key: 'time', width: 100, render: (_, record, index) => 05-{26 + index} - 05-{27 + index} }, + ]} + dataSource={smartCleanPlanData} + pagination={false} + size="small" + /> + + + 清洗方案建议} bordered={false} style={{ borderRadius: 8, marginBottom: 12, flex: 'none' }} bodyStyle={{ padding: '12px' }}> + + +
+
+
+ +
+ 清洗机器人方案 +
+ 自动化清洗，效率高，适合大面积、平整区域 +
+ 预计用水： + 18 吨 +
+
+ + +
+
+
+ +
+ 人工清洗方案 +
+ 灵活作业，适合局部、遮挡严重或复杂区域 +
+ 预计用水： + 32 吨 +
+
+ + + + + 天气与资源参考 (计划 01)} bordered={false} style={{ borderRadius: 8, marginBottom: 12, flex: 'none' }} bodyStyle={{ padding: '12px' }}> + + +
+
05-26
+ +
多云
+
18~28℃
+
+ + +
+
05-27
+ +
晴
+
19~30℃
+
+ + +
+
+ +
风速 2.1 m/s
+
+
+ +
降水率 10%
+
+
+ +
水源可用 充足
+
+
+ + + + + 清洗影响评估} bordered={false} style={{ borderRadius: 8, flex: 1 }} bodyStyle={{ padding: '12px' }}> + + +
+
+ +
+
+
预计用水量
+
18 吨
+
节水率 30% (机器人)
+
+
+ + +
+
+ +
+
+
预计耗时
+
12 小时
+
并行作业 2 组
+
+
+ + +
+
+ +
+
+
碳减排量
+
6.85 吨
+
CO₂ 减排量
+
+
+ + +
+
+ +
+
+
作业风险
+
低风险
+
安全可控
+
+
+ + +
+ + 以上建议基于历史数据、实时气象及发电损失模型综合计算。实际效果可能因天气和现场情况有所差异。
- - {/* 工单预览区域 */} - 清洗工单预览} - bordered={false} - style={{ borderRadius: 8, marginBottom: 24 }} - extra={
AI推荐计划转工单、转任务仍保留现有接口
} - > -
( - - - - - ) - } - ]} - dataSource={workOrderPreviewData} - pagination={false} - /> - - - {/* 清洗影响评估 */} - 清洗影响评估} - bordered={false} - style={{ borderRadius: 8, marginBottom: 24 }} - extra={预计用水、耗时、碳减排与作业风险综合判断} - > - - -
-
预计用水量
-
18 吨
-
节水率 30%（机器人）
-
- - -
-
预计耗时
-
12 小时
-
并行作业 2 组
-
- - -
-
碳减排量
-
6.85 吨
-
CO₂ 减排量
-
- - -
-
作业风险
-
低风险
-
天气和通道安全可控
-
- - - - - {/* 业务入口 */} - -
-
- 业务入口 - 区域维护、计划审批、任务完成与效果评估仍使用现有接口和权限。 -
- - - - - -
- ); } diff --git a/src/pages/WorkOrder.tsx b/src/pages/WorkOrder.tsx index dd87e4d..45a2ed9 100644 --- a/src/pages/WorkOrder.tsx +++ b/src/pages/WorkOrder.tsx @@ -1,35 +1,47 @@ import React, { useState } from 'react'; import { Layout, Card, Row, Col, Button, Table, Tag, Select, Input, Typography, Space, - Statistic, message, Drawer, Descriptions, Timeline, Divider, Form, Modal + Statistic, Modal, message, Empty, Drawer, Descriptions, Timeline, Divider, Form, Tabs, Progress, Badge, DatePicker, Pagination } from 'antd'; import { - PlusOutlined, SearchOutlined, EditOutlined, EyeOutlined, - ClockCircleOutlined, CheckCircleOutlined, PlayCircleOutlined, - CloseCircleOutlined, ThunderboltOutlined, SettingOutlined, - SendOutlined, PauseOutlined, ArrowRightOutlined, FileDoneOutlined, - RobotOutlined, CloudOutlined, RiseOutlined, - BranchesOutlined + CheckOutlined, ClockCircleOutlined, ControlOutlined, + BarChartOutlined, RiseOutlined, ArrowUpOutlined, + SearchOutlined, PlusOutlined, EditOutlined, DeleteOutlined, + EyeOutlined, CommentOutlined, PauseOutlined, FormOutlined, + ReloadOutlined, FilterOutlined, MoreOutlined, + CheckCircleFilled, PlayCircleFilled, InfoCircleFilled, + RobotOutlined, ThunderboltOutlined, AlertOutlined } from '@ant-design/icons'; -import { Pie, Line, Bar } from '@ant-design/charts'; -import dayjs from 'dayjs'; +import { Pie, Line } from '@ant-design/charts'; +import { + ClipboardList, + Clock, + Play, + CheckCircle, + Timer, + Cpu, + Calendar as CalendarIcon, + ChevronRight, + History, + ExternalLink +} from 'lucide-react'; const { Option } = Select; const { Search } = Input; const { Text, Title } = Typography; +const { RangePicker } = DatePicker; -// 模拟数据（完全匹配参考图） -const workOrderList = [ +// 模拟数据 +const workOrderData = [ { id: 'WO20250524001', title: '逆变器 INV-05 告警排查', source: 'AI诊断', type: '检修', priority: 'high', + status: 'pending', handler: '李工', deadline: '2025-05-24 14:30', - status: 'pending', - description: '' }, { id: 'WO20250524002', @@ -37,10 +49,9 @@ const workOrderList = [ source: '无人机巡检', type: '巡检', priority: 'high', + status: 'processing', handler: '王工', deadline: '2025-05-24 15:00', - status: 'processing', - description: '对AI识别热斑区域进行复检与红外复核，确认是否需要更换组件。' }, { id: 'WO20250524003', @@ -48,10 +59,9 @@ const workOrderList = [ source: '清洗优化', type: '清洗', priority: 'medium', + status: 'dispatched', handler: '赵工', deadline: '2025-05-24 16:00', - status: 'dispatched', - description: '' }, { id: 'WO20250524004', @@ -59,10 +69,9 @@ const workOrderList = [ source: '视频监控', type: '维修', priority: 'medium', + status: 'processing', handler: '陈工', deadline: '2025-05-24 17:30', - status: 'processing', - description: '' }, { id: 'WO20250524005', @@ -70,10 +79,9 @@ const workOrderList = [ source: '装备控制', type: '运维', priority: 'low', + status: 'pending', handler: '刘工', deadline: '2025-05-24 18:00', - status: 'pending', - description: '' }, { id: 'WO20250524006', @@ -81,78 +89,46 @@ const workOrderList = [ source: '人工创建', type: '巡检', priority: 'medium', + status: 'completed', handler: '张运维', deadline: '2025-05-24 21:00', - status: 'completed', - description: '' } ]; // 工单状态配置 const statusConfig = { - pending: { label: '待处理', color: '#1890ff', icon: }, - dispatched: { label: '已派发', color: '#52c41a', icon: }, - processing: { label: '执行中', color: '#2f54eb', icon: }, - suspended: { label: '挂起', color: '#faad14', icon: }, - completed: { label: '已完成', color: '#52c41a', icon: }, - closed: { label: '已关闭', color: '#8c8c8c', icon: } + pending: { label: '待处理', color: '#52c41a', textColor: '#1890ff', bg: '#e6f7ff', border: '#91d5ff' }, + dispatched: { label: '已派发', color: '#52c41a', textColor: '#52c41a', bg: '#f6ffed', border: '#b7eb8f' }, + processing: { label: '执行中', color: '#1890ff', textColor: '#1890ff', bg: '#e6f7ff', border: '#91d5ff' }, + completed: { label: '已完成', color: '#52c41a', textColor: '#52c41a', bg: '#f6ffed', border: '#b7eb8f' }, + suspended: { label: '已挂起', color: '#faad14', textColor: '#faad14', bg: '#fff7e6', border: '#ffe7ba' } }; // 优先级配置 const priorityConfig = { - low: { label: '低', color: '#52c41a' }, - medium: { label: '中', color: '#faad14' }, - high: { label: '高', color: '#ff4d4f' }, - urgent: { label: '紧急', color: '#f5222d' } + low: { label: '低', color: '#52c41a', bg: '#f6ffed' }, + medium: { label: '中', color: '#faad14', bg: '#fff7e6' }, + high: { label: '高', color: '#ff4d4f', bg: '#fff1f0' } }; -// 统计卡片数据 -const overviewCards = [ - { title: '今日新增工单', value: 18, suffix: '单', desc: '较昨日 +3', color: '#1890ff', icon: }, - { title: '待处理工单', value: 12, suffix: '单', desc: '高优先级 5', color: '#ff4d4f', icon: }, - { title: '执行中工单', value: 9, suffix: '单', desc: '按时率 92%', color: '#52c41a', icon: }, - { title: '已完成工单', value: 126, suffix: '单', desc: '本月累计', color: '#52c41a', icon: }, - { title: '平均处理时长', value: 4.3, suffix: '小时', desc: '较上周 -12% ↓', color: '#1890ff', icon: }, - { title: 'AI建议生成', value: 7, suffix: '单', desc: '今日自动生成', color: '#722ed1', icon: } -]; +const WorkOrderPage = () => { + const [activeTab, setActiveTab] = useState('1'); + const [selectedRowKey, setSelectedRowKey] = useState('WO20250524002'); -// 任务排班数据 -const scheduleData = [ - { handler: '李工', tasks: [{ title: 'INV-05 告警排查', time: '08:30 - 12:00', type: 'alarm' }] }, - { handler: '王工', tasks: [{ title: 'B-12 热斑复检', time: '13:30 - 15:00', type: 'inspect' }] }, - { handler: '赵工', tasks: [{ title: '组件清洗 C-05', time: '09:00 - 12:00', type: 'clean' }, { title: '清洗效果复检', time: '15:00 - 17:00', type: 'clean' }] }, - { handler: '陈工', tasks: [{ title: '周界摄像头修复', time: '10:00 - 12:30', type: 'repair' }, { title: '设备巡检', time: '15:30 - 17:30', type: 'inspect' }] } -]; + // 统计数据 + const stats = [ + { title: '今日新增工单', value: 18, subValue: '+3', subText: '较昨日', icon: , bg: '#e6f7ff' }, + { title: '待处理工单', value: 12, subValue: '5', subText: '高优先级', icon: , bg: '#fff1f0' }, + { title: '执行中工单', value: 9, subValue: '92%', subText: '按时率', icon: , bg: '#f6ffed' }, + { title: '已完成工单', value: 126, subValue: '', subText: '本月累计', icon: , bg: '#f6ffed' }, + { title: '平均处理时长', value: 4.3, unit: '小时', subValue: '-12%', subText: '较上周', icon: , bg: '#e6f7ff' }, + { title: 'AI建议生成', value: 7, unit: '单', subValue: '', subText: '今日自动生成', icon: , bg: '#f9f0ff' }, + ]; -// 告警趋势数据 -const alarmTrendData = [ - { date: '05-18', count: 5 }, - { date: '05-19', count: 10 }, - { date: '05-20', count: 5 }, - { date: '05-21', count: 5 }, - { date: '05-22', count: 12 }, - { date: '05-23', count: 10 }, - { date: '05-24', count: 12 } -]; - -// 告警列表数据 -const alarmList = [ - { name: 'INV-05 逆变器告警', time: '05-24 10:24' }, - { name: 'B-12 区块热斑告警', time: '05-24 09:56' }, - { name: 'B-12 组件温度异常', time: '05-24 09:32' } -]; - -export default function WorkOrderPage() { - const [selectedOrder, setSelectedOrder] = useState(workOrderList[1]); // 默认选中执行中的工单 - const [drawerVisible, setDrawerVisible] = useState(false); - const [editModalVisible, setEditModalVisible] = useState(false); - const [editingOrder, setEditingOrder] = useState(null); - const [editForm] = Form.useForm(); - - // 表格列定义 + // 表格列 const columns = [ - { title: '工单编号', dataIndex: 'id', key: 'id', width: 140 }, - { title: '工单标题', dataIndex: 'title', key: 'title' }, + { title: '工单编号', dataIndex: 'id', key: 'id', width: 130 }, + { title: '工单标题', dataIndex: 'title', key: 'title', width: 180, ellipsis: true }, { title: '来源', dataIndex: 'source', key: 'source', width: 100 }, { title: '类型', dataIndex: 'type', key: 'type', width: 80 }, { @@ -160,62 +136,89 @@ export default function WorkOrderPage() { dataIndex: 'priority', key: 'priority', width: 80, - render: (priority) => ( - - {priorityConfig[priority]?.label} + render: (p) => ( + + {priorityConfig[p].label} ) }, { title: '负责人', dataIndex: 'handler', key: 'handler', width: 80 }, - { title: '截止时间', dataIndex: 'deadline', key: 'deadline', width: 160 }, + { title: '截止时间', dataIndex: 'deadline', key: 'deadline', width: 150 }, { title: '状态', dataIndex: 'status', key: 'status', - width: 100, - render: (status) => ( - - {statusConfig[status]?.label} - + width: 90, + render: (s) => ( + {statusConfig[s].label} ) }, { title: '操作', key: 'action', - width: 80, - render: (_, record) => ( - - ) - } + width: 60, + render: () => + }, ]; - // 工单状态分布饼图数据 + // 图表数据 const pieData = [ - { type: '待处理', value: 12, color: '#1890ff' }, - { type: '执行中', value: 9, color: '#2f54eb' }, - { type: '已完成', value: 126, color: '#52c41a' }, - { type: '已挂起', value: 4, color: '#faad14' } + { type: '待处理', value: 12 }, + { type: '执行中', value: 9 }, + { type: '已完成', value: 126 }, + { type: '已挂起', value: 4 }, + ]; + + const alarmTrendData = [ + { date: '05-18', value: 5 }, + { date: '05-19', value: 10 }, + { date: '05-20', value: 7 }, + { date: '05-21', value: 12 }, + { date: '05-22', value: 8 }, + { date: '05-23', value: 15 }, + { date: '05-24', value: 11 }, ]; return ( -
- {/* 顶部统计卡片 */} - - {overviewCards.map((card, idx) => ( -
- -
+
+ {/* 顶部标题和页签 */} +
+ 工单任务 + +
+ + {/* 统计卡片 */} + + {stats.map((item, index) => ( +
+ +
-
{card.title}
-
- {card.value} {card.suffix} + {item.title} +
+ {item.value} + {item.unit && {item.unit}} +
+
+ {item.subText} + + {item.subValue} +
-
{card.desc}
-
- {card.icon} +
+ {item.icon}
@@ -224,109 +227,151 @@ export default function WorkOrderPage() { {/* 筛选栏 */} -
- - - - - 时间范围 - - - - } /> - - - - -
+ + +
+
+ 工单类型 + +
+ + +
+ 优先级 + +
+ + +
+ 负责人 + +
+ + +
+ 时间范围 + +
+ + +
+ 状态 + +
+ + +
+ 关键词 + } /> +
+ + + + + + + + + - {/* 左侧工单列表 */} - - + {/* 左侧：列表 + 底部图表 */} + + 工单列表(共 147 条)} + bodyStyle={{ padding: 0 }} + style={{ borderRadius: 8, marginBottom: 16 }} + >
`共 ${total} 条` }} + pagination={false} + size="middle" + rowKey="id" scroll={{ x: 'max-content' }} - rowClassName={(record) => record.id === selectedOrder?.id ? 'selected-row' : ''} - onRow={(record) => ({ onClick: () => setSelectedOrder(record) })} + rowSelection={{ + type: 'radio', + selectedRowKeys: [selectedRowKey], + onChange: (keys) => setSelectedRowKey(keys[0] as string) + }} /> - +
+ +
- {/* 工单状态分布 + 任务排班 */} - - - `${datum.value} (${((datum.value / 147) * 100).toFixed(2)}%)` - }} - interactions={[{ type: 'pie-legend-active' }]} - /> -
-
总数
-
147
+
+ +
+ { + const total = pieData.reduce((a, b) => a + b.value, 0); + const percent = ((item.value / total) * 100).toFixed(2); + return `${item.value} (${percent}%)`; + } + } + }} + height={240} + /> +
+
总数
+
147
+
- - 任务排班 / 日历视图}> -
-
+ 更多 } + style={{ borderRadius: 8, height: 360 }} + > +
+ +
-
- {scheduleData.map((item, idx) => ( -
-
{item.handler}
-
-
- {item.tasks.map((task, i) => ( -
-
{task.title}
-
{task.time}
-
- ))} +
+
+
+ {['08:00', '10:00', '12:00', '14:00', '16:00', '18:00'].map(t => ( +
{t}
+ ))} +
+ {['李工', '王工', '赵工', '陈工'].map((name, idx) => ( +
+
{name}
+
+ {idx === 0 &&
INV-05 告警排查
08:30 - 12:00
} + {idx === 1 &&
B-12 热斑复检
13:30 - 15:00
} + {idx === 1 &&
无人机巡检
16:00-18:00
} + {idx === 2 &&
组件清洗 C-05
09:00 - 12:00
} + {idx === 2 &&
清洗效果复检
15:00 - 17:00
} + {idx === 3 &&
周界摄像头修复
10:00 - 12:30
} + {idx === 3 &&
设备巡检
15:30 - 17:30
}
))} @@ -336,177 +381,145 @@ export default function WorkOrderPage() { - {/* 右侧工单详情面板 */} -
- -
- {selectedOrder?.title} - 高优先级 -
- 工单编号: {selectedOrder?.id} - - }> - -
来源:{selectedOrder?.source}
-
工单类型:{selectedOrder?.type}
-
负责人:{selectedOrder?.handler}
-
协同人员:无人机A01 / 张运维
-
计划时间:2025-05-24 13:30 ~ 15:00
-
关联区域:B-12
-
关联设备:UAV-A01
-
当前状态:执行中
- - -
-
任务描述
-
- {selectedOrder?.description} -
+ {/* 右侧：详情 + AI + 告警 */} +
+ +
+ 工单详情 + 工单编号: WO20250524002
- {/* 流程步骤 */} -
- {['已创建', '已派发', '执行中', '已完成'].map((step, idx) => ( -
-
- {idx + 1} -
-
{step}
+
+
+ 区块 B-12 热斑复检 + 高优先级 +
+ + +
来源：无人机巡检 + 工单类型：巡检 + 负责人：王工 + 协同人员：无人机 A01 / 张运维 + 计划时间：2025-05-24 13:30 - 15:00 + 关联设备：UAV-A01 + 关联区域：B-12 + 当前状态：执行中 + + 任务描述： + 对 AI 识别热斑区域进行复检与红外复核，确认是否需要更换组件。 + + + + +
+
+
+ +
已创建
- ))} -
+
+
+ +
已派发
+
+
+
+
3
+
执行中
+
+
+
+
4
+
已完成
+
+
- {/* 操作按钮 */} -
- - - - -
+ +
+ + + + - {/* AI建议与关联信息 */} - -
-
-
-
- -
-
建议携带红外热像设备
+ AI 建议与关联信息
} + style={{ borderRadius: 8, marginBottom: 16 }} + bodyStyle={{ padding: '12px' }} + > + +
+
+ +
建议携带
+
红外热像设备
- -
-
-
- -
-
优先复检组件 B-12-03 / B-12-05
+ +
+
+ +
优先复检组件
+
B-12-03 / B-12-05
- -
-
-
- -
-
预计影响发电 2.1%
+ +
+
+ +
预计影响发电
+
2.1%
- - + + + - - -
关联告警趋势（近7天）
+ + + - - -
- 关联告警列表（近3条） - + + +
+ 查看全部 } style={{ borderRadius: 8 }}> +
+
+ + INV-05 逆变器告警 + 05-24 10:24 +
+
+ + B-12 区块热斑告警 + 05-24 09:56 +
+
+ + B-12 组件温度异常 + 05-24 09:32 +
-
- {alarmList.map((alarm, idx) => ( -
-
-
- {alarm.name} -
- {alarm.time} -
- ))} -
- - - + + + - - {/* 工单详情抽屉 */} - setDrawerVisible(false)} - open={drawerVisible} - destroyOnClose - > - {selectedOrder && ( -
- - {selectedOrder.id} - {statusConfig[selectedOrder.status]?.label} - {selectedOrder.title} - - {priorityConfig[selectedOrder.priority]?.label} - - {selectedOrder.source} - {selectedOrder.type} - {selectedOrder.handler || '—'} - {selectedOrder.deadline} - {selectedOrder.description || '—'} - -
- )} - - - {/* 编辑工单弹窗 */} - setEditModalVisible(false)} - onOk={() => { editForm.validateFields().then(values => { message.success('工单保存成功'); setEditModalVisible(false); }); }} - okText="保存" - cancelText="取消" - width={600} - destroyOnClose - > -
- - -
- - - - - - - - - ); -} +}; + +export default WorkOrderPage;