From c602f08a98a44c4b6265f5b0bc419ca964b07f8b Mon Sep 17 00:00:00 2001 From: mmc <1556375442@qq.com> Date: Mon, 20 Jul 2026 15:53:43 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BB=BB=E5=8A=A1=E6=8E=92=E7=89=88=20?= =?UTF-8?q?=E6=97=A5=E5=8E=86=E8=A7=86=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/WorkOrder.tsx | 213 +++++++++++++++++++++++++++++++++++----- 1 file changed, 191 insertions(+), 22 deletions(-) diff --git a/src/pages/WorkOrder.tsx b/src/pages/WorkOrder.tsx index 624469a..51be606 100644 --- a/src/pages/WorkOrder.tsx +++ b/src/pages/WorkOrder.tsx @@ -132,6 +132,75 @@ const WorkOrderPage = () => { const [completeForm] = Form.useForm(); const messageApi = utils.message; + // 排班更多弹窗 + const [scheduleModalVisible, setScheduleModalVisible] = useState(false); + // 排班日历选中日期，默认今天 + const [scheduleDate, setScheduleDate] = useState(dayjs().format('YYYY-MM-DD')); + + + + + // 时间轴刻度 + const timeTicks = ["08:00", "10:00", "12:00", "14:00", "16:00", "18:00"]; + // 一天总分钟 08:00 ~ 18:00 = 600分钟 + const dayTotalMin = (18 - 8) * 60; + + const calcSchedulePosition = (planTime) => { + if (!planTime) return null; + const t = dayjs(planTime); + const hour = t.hour(); + const minute = t.minute(); + + let currentMin; + // 早于8点统一按0分钟计算，贴最左侧 + if (hour < 8) { + currentMin = 0; + } else if (hour >= 18) { + // 18点之后依旧不展示 + return null; + } else { + currentMin = (hour - 8) * 60 + minute; + } + + const leftPercent = (currentMin / dayTotalMin) * 100; + const widthPercent = 15; + return { left: `${leftPercent}%`, width: `${widthPercent}%` }; + }; + + // 过滤所有带计划时间的工单 + // 过滤【当前选中日期】且带计划时间的工单 + const getScheduleOrderList = () => { + return workOrderList.filter(item => { + if (!item.planStartTime) return false; + // 匹配选中日期 + const planDate = dayjs(item.planStartTime).format('YYYY-MM-DD'); + return planDate === scheduleDate; + }); + }; + + // 切换前一天 + const prevScheduleDay = () => { + setScheduleDate(dayjs(scheduleDate).subtract(1, 'day').format('YYYY-MM-DD')); + }; + // 切换后一天 + const nextScheduleDay = () => { + setScheduleDate(dayjs(scheduleDate).add(1, 'day').format('YYYY-MM-DD')); + }; + + + // 获取工单配色（优先级） + const getOrderScheduleStyle = (level) => { + const map = { + ERROR: { bg: "#FFF1F0", border: "#FF4D4F", color: "#FF4D4F" }, + WARNING: { bg: "#FFF7E8", border: "#FA8C16", color: "#FA8C16" }, + INFO: { bg: "#E8FFEA", border: "#00B42A", color: "#00B42A" }, + }; + return map[level] || { bg: "#E8F3FF", border: "#165DFF", color: "#165DFF" }; + }; + + + + // 计算工单统计数据 const calcWorkOrderStat = (list) => { @@ -862,39 +931,139 @@ const WorkOrderPage = () => { - 任务排班 / 日历视图} - extra={} - style={{ ...cardStyle, height: 380 }} bodyStyle={{ padding: '16px' }}> + 任务排班 / 日历视图} + extra={ + + } + style={{ ...cardStyle, height: 380 }} + bodyStyle={{ padding: '16px' }} + > + {/* 日期切换栏 */}
-
+
+ {/* 横向时间表头 */}
- {['08:00', '10:00', '12:00', '14:00', '16:00', '18:00'].map(t => ( -
{t}
+ {timeTicks.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
} -
-
- ))} + + {/* 单一行时间画布，不再区分人员 */} +
+ {getScheduleOrderList().length === 0 ? ( + + ) : ( + <> + {getScheduleOrderList().map((order, index) => { + const pos = calcSchedulePosition(order.planStartTime); + if (!pos) return null; + const style = getOrderScheduleStyle(order.priorityLevel); + // 固定纵向排布，40px一行不重叠 + const topPx = 10 + (index * 40); + return ( +
handleRowSelect(order)} + style={{ + position: 'absolute', + left: pos.left, + top: `${topPx}px`, + width: pos.width, + height: 40, + background: style.bg, + border: `1px solid ${style.border}`, + borderRadius: 6, + padding: '4px 8px', + fontSize: 10, + color: style.color, + overflow: "hidden", + cursor: "pointer", + zIndex: 2 + }} + > + + {order.orderTitle} + + + {dayjs(order.planStartTime).format('HH:mm')} + +
+ ); + })} + + )} +
+ + {/* 更多工单弹窗：弹窗内只展示当前选中日期工单 */} + setScheduleModalVisible(false)} + width={800} + footer={null} + > + dayjs(t).format('YYYY-MM-DD HH:mm') + }, + { + title: '优先级', + dataIndex: 'priorityLevel', + render: p => ( + + {priorityConfig[p]?.label} + + ) + }, + { + title: '状态', + dataIndex: 'orderStatus', + render: s => orderStatusConfig[s]?.label + }, + ]} + /> + + + +