feat(scheduling): add SuggestionDetail modal with candidate comparison
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
kkfluous
248
src/modules/scheduling/SuggestionDetail.tsx
Normal file
248
src/modules/scheduling/SuggestionDetail.tsx
Normal file
@@ -0,0 +1,248 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import {
|
||||||
|
X,
|
||||||
|
Truck,
|
||||||
|
MapPin,
|
||||||
|
AlertTriangle,
|
||||||
|
CheckCircle,
|
||||||
|
Send,
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { motion } from 'motion/react';
|
||||||
|
import { sendNotify } from './api';
|
||||||
|
import type { SchedulingSuggestion, CandidateVehicle } from './types';
|
||||||
|
import Blur from '../../components/Blur';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
suggestion: SchedulingSuggestion;
|
||||||
|
onClose: () => void;
|
||||||
|
onNotifySuccess: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
function fmtKm(value: number): string {
|
||||||
|
if (value >= 10000) return (value / 10000).toFixed(1) + '万';
|
||||||
|
return value.toLocaleString();
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function SuggestionDetail({ suggestion: s, onClose, onNotifySuccess }: Props) {
|
||||||
|
const [sending, setSending] = useState(false);
|
||||||
|
const [sentPlates, setSentPlates] = useState<Set<string>>(new Set());
|
||||||
|
|
||||||
|
const v = s.currentVehicle;
|
||||||
|
const isRescue = s.type === 'rescue_hopeless';
|
||||||
|
|
||||||
|
const headerBg = isRescue ? 'bg-rose-600' : 'bg-amber-600';
|
||||||
|
const title = isRescue ? '智能调度干预 — 抢救低里程' : '智能调度干预 — 释放已达标';
|
||||||
|
|
||||||
|
const cardBg = isRescue
|
||||||
|
? 'bg-rose-50 border border-rose-100'
|
||||||
|
: 'bg-amber-50 border border-amber-100';
|
||||||
|
|
||||||
|
const completionColor =
|
||||||
|
v.completionRate >= 1
|
||||||
|
? 'text-emerald-600'
|
||||||
|
: v.completionRate >= 0.6
|
||||||
|
? 'text-amber-600'
|
||||||
|
: 'text-rose-600';
|
||||||
|
|
||||||
|
const handleNotify = async (candidate: CandidateVehicle) => {
|
||||||
|
if (sending || sentPlates.has(candidate.plateNumber)) return;
|
||||||
|
setSending(true);
|
||||||
|
try {
|
||||||
|
const result = await sendNotify({
|
||||||
|
suggestionId: s.id,
|
||||||
|
currentPlate: v.plateNumber,
|
||||||
|
candidatePlate: candidate.plateNumber,
|
||||||
|
});
|
||||||
|
if (result.success) {
|
||||||
|
setSentPlates(prev => new Set(prev).add(candidate.plateNumber));
|
||||||
|
onNotifySuccess();
|
||||||
|
} else {
|
||||||
|
alert(result.message || '发送失败');
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
alert('网络错误，请重试');
|
||||||
|
} finally {
|
||||||
|
setSending(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 bg-black/40 backdrop-blur-sm z-[60] flex items-center justify-center p-4">
|
||||||
|
<motion.div
|
||||||
|
initial={{ scale: 0.9, opacity: 0, y: 20 }}
|
||||||
|
animate={{ scale: 1, opacity: 1, y: 0 }}
|
||||||
|
exit={{ scale: 0.9, opacity: 0, y: 20 }}
|
||||||
|
className="bg-white rounded-2xl shadow-2xl w-full max-w-2xl overflow-hidden flex flex-col max-h-[90vh]"
|
||||||
|
>
|
||||||
|
{/* Header */}
|
||||||
|
<div className={`${headerBg} px-5 py-3 flex items-center justify-between flex-shrink-0`}>
|
||||||
|
<span className="text-white font-semibold text-sm">{title}</span>
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="text-white/80 hover:text-white transition-colors"
|
||||||
|
>
|
||||||
|
<X size={18} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Scrollable body */}
|
||||||
|
<div className="overflow-y-auto flex-1 p-4 space-y-3">
|
||||||
|
{/* Current Vehicle Card */}
|
||||||
|
<div className={`${cardBg} rounded-xl p-4`}>
|
||||||
|
<div className="flex items-center justify-between mb-3">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="font-bold text-base tracking-wide">
|
||||||
|
<Blur>{v.plateNumber}</Blur>
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-gray-500 bg-white/70 px-2 py-0.5 rounded-full border border-gray-200">
|
||||||
|
{v.vehicleType}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="text-right">
|
||||||
|
<span className={`text-lg font-bold ${completionColor}`}>
|
||||||
|
{(v.completionRate * 100).toFixed(1)}%
|
||||||
|
</span>
|
||||||
|
<div className="text-xs text-gray-400">完成率</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="text-xs text-gray-500 mb-2">{v.targetName}</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2 text-xs mb-3">
|
||||||
|
<div className="bg-white/60 rounded-lg p-2">
|
||||||
|
<div className="text-gray-400 mb-0.5">累计里程</div>
|
||||||
|
<div className="font-semibold text-gray-700">{fmtKm(v.totalMileage)} km</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white/60 rounded-lg p-2">
|
||||||
|
<div className="text-gray-400 mb-0.5">年度目标</div>
|
||||||
|
<div className="font-semibold text-gray-700">{fmtKm(v.yearTarget)} km</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white/60 rounded-lg p-2">
|
||||||
|
<div className="text-gray-400 mb-0.5 flex items-center gap-0.5">
|
||||||
|
<MapPin size={10} />区域
|
||||||
|
</div>
|
||||||
|
<div className="font-semibold text-gray-700 truncate">{v.region}</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white/60 rounded-lg p-2">
|
||||||
|
<div className="text-gray-400 mb-0.5">客户日均</div>
|
||||||
|
<div className="font-semibold text-gray-700">{fmtKm(v.customerAvgDaily)} km</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{v.customer && (
|
||||||
|
<div className="text-xs text-gray-500">
|
||||||
|
客户：<span className="font-medium text-gray-700"><Blur>{v.customer}</Blur></span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Reason Card */}
|
||||||
|
<div className="bg-blue-50 border border-blue-100 rounded-xl p-3 text-sm">
|
||||||
|
<span className="font-semibold text-blue-700 mr-2">建议原因</span>
|
||||||
|
<span className="text-blue-600">{s.reason}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Candidates Section */}
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-2 mb-1">
|
||||||
|
<Truck size={15} className="text-gray-500" />
|
||||||
|
<span className="font-semibold text-gray-800 text-sm">推荐替换车辆</span>
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-gray-400 mb-2">基于车型、区域及里程匹配</div>
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
{s.candidates.map(c => {
|
||||||
|
const alreadySent = sentPlates.has(c.plateNumber);
|
||||||
|
const predColor =
|
||||||
|
c.canQualifyAfterSwap ? 'text-emerald-600' : 'text-amber-600';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={c.plateNumber}
|
||||||
|
className="border border-gray-200 rounded-xl p-3 bg-white"
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between mb-2">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="font-bold text-sm tracking-wide">
|
||||||
|
<Blur>{c.plateNumber}</Blur>
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full">
|
||||||
|
{c.vehicleType}
|
||||||
|
</span>
|
||||||
|
{c.targetName ? (
|
||||||
|
<span className="text-xs text-gray-400">{c.targetName}</span>
|
||||||
|
) : (
|
||||||
|
<span className="text-xs text-gray-400">库存</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{c.canQualifyAfterSwap ? (
|
||||||
|
<span className="flex items-center gap-1 text-xs font-medium text-emerald-700 bg-emerald-50 border border-emerald-200 px-2 py-0.5 rounded-full">
|
||||||
|
<CheckCircle size={11} />换后可达标
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<span className="flex items-center gap-1 text-xs font-medium text-amber-700 bg-amber-50 border border-amber-200 px-2 py-0.5 rounded-full">
|
||||||
|
<AlertTriangle size={11} />需关注
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2 text-xs mb-3">
|
||||||
|
<div className="bg-gray-50 rounded-lg p-2">
|
||||||
|
<div className="text-gray-400 mb-0.5">当前里程</div>
|
||||||
|
<div className="font-semibold text-gray-700">{fmtKm(c.totalMileage)} km</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-rose-50 rounded-lg p-2">
|
||||||
|
<div className="text-rose-400 mb-0.5">里程缺口</div>
|
||||||
|
<div className="font-semibold text-rose-600">{fmtKm(c.mileageGap)} km</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-gray-50 rounded-lg p-2">
|
||||||
|
<div className="text-gray-400 mb-0.5 flex items-center gap-0.5">
|
||||||
|
<MapPin size={10} />区域
|
||||||
|
</div>
|
||||||
|
<div className="font-semibold text-gray-700 truncate">{c.region}</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-gray-50 rounded-lg p-2">
|
||||||
|
<div className="text-gray-400 mb-0.5">换后预测</div>
|
||||||
|
<div className={`font-semibold ${predColor}`}>{fmtKm(c.predictedAfterSwap)} km</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() => handleNotify(c)}
|
||||||
|
disabled={sending || alreadySent}
|
||||||
|
className={`w-full flex items-center justify-center gap-1.5 text-xs font-medium py-2 rounded-lg transition-colors ${
|
||||||
|
alreadySent
|
||||||
|
? 'bg-gray-100 text-gray-400 cursor-not-allowed'
|
||||||
|
: 'bg-indigo-600 hover:bg-indigo-700 text-white disabled:opacity-50 disabled:cursor-not-allowed'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{alreadySent ? (
|
||||||
|
<>
|
||||||
|
<CheckCircle size={13} />已发送
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Send size={13} />发送替换通知
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<div className="border-t border-gray-100 px-4 py-3 flex justify-end flex-shrink-0">
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="px-5 py-2 text-sm font-medium text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
|
||||||
|
>
|
||||||
|
关闭
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user