feat(mileage): 支持车型按考核年度查看

src/modules/mileage/StatisticsView.tsx

@@ -9,7 +9,7 @@ import {
   Truck, ChevronDown, Maximize2, Minimize2,
   Search, ArrowUpDown, X, RotateCcw, Calendar,
 } from 'lucide-react';
-import type { TargetSummary, TargetVehicle, TrendPoint } from './types';
+import type { TargetSummary, TargetVehicle, TargetYearlyAssessment, TrendPoint } from './types';
 import { fetchTargets, fetchTargetVehicles, fetchTrend } from './api';
 import Blur from '../../components/Blur';
 
@@ -19,11 +19,25 @@ function getDefaultDate(): string {
   return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
 }
 
+function getCurrentDateLabel(): string {
+  const now = new Date();
+  return `${now.getFullYear()}.${now.getMonth() + 1}.${now.getDate()}`;
+}
+
 function fmtKm(value: number): string {
   if (value >= 10000) return (value / 10000).toFixed(2) + '万';
   return value.toLocaleString();
 }
 
+function fmtPercent(value: number): string {
+  return `${value.toFixed(1)}%`;
+}
+
+function getTargetAssessment(target: TargetSummary, selectedYear?: number): TargetYearlyAssessment | null {
+  if (target.yearlyAssessments.length === 0) return null;
+  return target.yearlyAssessments.find(item => item.yearNumber === selectedYear) || target.yearlyAssessments[0];
+}
+
 function shortTargetName(name: string): string {
   // Extract the number and a short description
   const match = name.match(/(\d+)[辆台](.+)/);
@@ -39,6 +53,7 @@ function shortTargetName(name: string): string {
 }
 
 export default function StatisticsView() {
+  const currentDateLabel = getCurrentDateLabel();
   const [targets, setTargets] = useState<TargetSummary[]>([]);
   const [trendData, setTrendData] = useState<TrendPoint[]>([]);
   const [targetVehiclesMap, setTargetVehiclesMap] = useState<Record<number, TargetVehicle[]>>({});
@@ -46,7 +61,8 @@ export default function StatisticsView() {
 
   const [chartType, setChartType] = useState<'bar' | 'line' | 'area'>('bar');
   const [isTableFullscreen, setIsTableFullscreen] = useState(false);
-  const [expandedModel, setExpandedModel] = useState<string | null>(null);
+  const [expandedTargetId, setExpandedTargetId] = useState<number | null>(null);
+  const [assessmentYearMap, setAssessmentYearMap] = useState<Record<number, number>>({});
   const [viewAllTargetId, setViewAllTargetId] = useState<number | null>(null);
   const [viewAllTargetName, setViewAllTargetName] = useState<string>('');
   const [viewAllSearch, setViewAllSearch] = useState('');
@@ -54,12 +70,25 @@ export default function StatisticsView() {
   const [viewAllDate, setViewAllDate] = useState(getDefaultDate);
   const [viewAllLoading, setViewAllLoading] = useState(false);
 
+  const selectedTarget = targets.find(t => t.id === selectedTargetId);
+  const selectedAssessment = selectedTarget ? getTargetAssessment(selectedTarget, assessmentYearMap[selectedTarget.id]) : null;
+  const selectedCompletion = selectedAssessment?.completionRate ?? selectedTarget?.avgCompletion ?? 0;
+
   // Load targets on mount
   useEffect(() => {
     fetchTargets().then(data => {
-      setTargets(data);
-      if (data.length > 0 && !selectedTargetId) {
-        setSelectedTargetId(data[0].id);
+      const focused = data.find(item => item.targetName.includes('羚牛136')) || data[0];
+      const ordered = focused
+        ? [focused, ...data.filter(item => item.id !== focused.id)]
+        : data;
+      setTargets(ordered);
+      if (ordered.length > 0 && !selectedTargetId) {
+        setSelectedTargetId(focused.id);
+        setExpandedTargetId(focused.id);
+        setAssessmentYearMap(Object.fromEntries(ordered.map(item => [item.id, item.yearlyAssessments[0]?.yearNumber || 1])));
+        fetchTargetVehicles(focused.id).then(vehicles => {
+          setTargetVehiclesMap(prev => ({ ...prev, [focused.id]: vehicles }));
+        }).catch(() => {});
       }
     }).catch(() => {});
   }, []);
@@ -103,7 +132,7 @@ export default function StatisticsView() {
         <div className="flex-none landscape:flex-1 landscape:w-2/3 space-y-4 flex flex-col overflow-y-auto no-scrollbar min-w-0">
           {/* KPI Cards in Landscape — linked to selected target */}
           {(() => {
-            const sel = targets.find(t => t.id === selectedTargetId);
+            const sel = selectedTarget;
             return (
             <div className="hidden landscape:grid grid-cols-4 gap-3 flex-shrink-0">
               <div className="bg-white border border-slate-100 p-3 rounded-2xl shadow-sm">
@@ -130,7 +159,7 @@ export default function StatisticsView() {
               <div className="bg-white border border-slate-100 p-3 rounded-2xl shadow-sm">
                 <div className="text-[10px] font-bold text-slate-400 uppercase mb-1">完成率</div>
                 <div className="text-lg font-black text-slate-900 tracking-tighter">
-                  {(sel?.avgCompletion ?? 0).toFixed(1)}
+                  {selectedCompletion.toFixed(1)}
                   <span className="text-blue-500 text-[10px] ml-1">%</span>
                 </div>
               </div>
@@ -224,12 +253,17 @@ export default function StatisticsView() {
 
           <div className="grid grid-cols-1 gap-1.5 overflow-y-auto no-scrollbar pb-2">
             {targets.map((target, idx) => (
+              (() => {
+                const assessment = getTargetAssessment(target, assessmentYearMap[target.id]);
+                const primaryCompletion = assessment?.completionRate ?? target.avgCompletion;
+                const primaryQualified = assessment?.qualifiedCount ?? target.yearQualifiedCount;
+                const primaryQualifiedLabel = assessment ? `${assessment.label}达标:` : '达标:';
+                return (
               <div
                 key={idx}
                 className="bg-white px-3 py-2 rounded-xl border border-slate-100 shadow-sm flex flex-col active:bg-slate-50 transition-all cursor-pointer"
                 onClick={() => {
-                  const name = target.targetName;
-                  setExpandedModel(expandedModel === name ? null : name);
+                  setExpandedTargetId(expandedTargetId === target.id ? null : target.id);
                   if (!targetVehiclesMap[target.id]) {
                     fetchTargetVehicles(target.id).then(data => {
                       setTargetVehiclesMap(prev => ({ ...prev, [target.id]: data }));
@@ -249,12 +283,12 @@ export default function StatisticsView() {
                       </div>
                       <div className="flex items-center gap-2">
                         <div className="flex items-center gap-1">
-                          <span className="text-[9px] text-slate-400">完成率:</span>
-                          <span className={`text-[9px] font-bold ${target.avgCompletion >= 90 ? 'text-emerald-500' : 'text-blue-500'}`}>{target.avgCompletion.toFixed(1)}%</span>
+                          <span className="text-[9px] text-slate-400">{assessment ? `${assessment.label}完成:` : '完成率:'}</span>
+                          <span className={`text-[9px] font-bold ${primaryCompletion >= 90 ? 'text-emerald-500' : 'text-blue-500'}`}>{fmtPercent(primaryCompletion)}</span>
                         </div>
                         <div className="flex items-center gap-1">
-                          <span className="text-[9px] text-slate-400">达标:</span>
-                          <span className="text-[9px] font-bold text-slate-600">{target.yearQualifiedCount}台</span>
+                          <span className="text-[9px] text-slate-400">{primaryQualifiedLabel}</span>
+                          <span className="text-[9px] font-bold text-slate-600">{primaryQualified}台</span>
                         </div>
                       </div>
                     </div>
@@ -269,7 +303,7 @@ export default function StatisticsView() {
                       </div>
                     </div>
                     <motion.div
-                      animate={{ rotate: expandedModel === target.targetName ? 180 : 0 }}
+                      animate={{ rotate: expandedTargetId === target.id ? 180 : 0 }}
                       className="text-slate-300"
                     >
                       <ChevronDown size={14} />
@@ -278,7 +312,7 @@ export default function StatisticsView() {
                 </div>
 
                 <AnimatePresence>
-                  {expandedModel === target.targetName && (
+                  {expandedTargetId === target.id && (
                     <motion.div
                       initial={{ height: 0, opacity: 0 }}
                       animate={{ height: 'auto', opacity: 1 }}
@@ -286,43 +320,85 @@ export default function StatisticsView() {
                       className="overflow-hidden"
                     >
                       <div className="pt-3 mt-2 border-t border-slate-50 grid grid-cols-2 gap-x-4 gap-y-3">
-                        <div className="space-y-0.5">
-                          <p className="text-[8px] font-bold text-slate-400 uppercase tracking-wider">考核区间</p>
-                          {target.periods.map((p, i) => (
-                            <p key={i} className="text-[10px] font-black text-slate-700">{p}</p>
-                          ))}
+                        <div className="col-span-2 flex items-center justify-between gap-3 bg-blue-50/70 p-2 rounded-lg">
+                          <span className="text-[10px] font-black text-blue-700">考核年度</span>
+                          <select
+                            value={assessment?.yearNumber || ''}
+                            onClick={(e) => e.stopPropagation()}
+                            onChange={(e) => {
+                              e.stopPropagation();
+                              setAssessmentYearMap(prev => ({ ...prev, [target.id]: Number(e.target.value) }));
+                            }}
+                            className="bg-white border border-blue-100 rounded-lg px-2 py-1 text-[10px] font-bold text-blue-700 outline-none"
+                          >
+                            {target.yearlyAssessments.map(item => (
+                              <option key={item.yearNumber} value={item.yearNumber}>
+                                {item.label}
+                              </option>
+                            ))}
+                          </select>
                         </div>
-                        <div className="space-y-0.5">
-                          <p className="text-[8px] font-bold text-slate-400 uppercase tracking-wider">总考核里程</p>
-                          <p className="text-[10px] font-black text-slate-700">{fmtKm(target.totalMileagePerVehicle * target.vehicleCount)} km</p>
-                        </div>
-                        <div className="space-y-0.5">
-                          <p className="text-[8px] font-bold text-slate-400 uppercase tracking-wider">年考核任务/辆</p>
-                          <p className="text-[10px] font-black text-slate-700">{fmtKm(target.annualMileagePerVehicle)} km</p>
-                        </div>
-                        <div className="space-y-0.5">
-                          <p className="text-[8px] font-bold text-slate-400 uppercase tracking-wider">50%达标数</p>
-                          <p className="text-[10px] font-black text-blue-600">{target.halfQualifiedCount} 台</p>
-                        </div>
-                        <div className="space-y-0.5">
-                          <p className="text-[8px] font-bold text-slate-400 uppercase tracking-wider">本年需完成</p>
-                          <p className="text-[10px] font-black text-slate-700">{fmtKm(target.currentYearTarget)} km</p>
-                        </div>
-                        <div className="space-y-0.5">
-                          <p className="text-[8px] font-bold text-slate-400 uppercase tracking-wider">已完成(截止3.31)</p>
-                          <p className="text-[10px] font-black text-emerald-600">{fmtKm(target.currentYearCompleted)} km</p>
-                        </div>
-                        <div className="space-y-0.5">
-                          <p className="text-[8px] font-bold text-slate-400 uppercase tracking-wider">未完成总数</p>
-                          <p className="text-[10px] font-black text-rose-500">{fmtKm(target.remaining)} km</p>
-                        </div>
-                        <div className="space-y-0.5">
-                          <p className="text-[8px] font-bold text-slate-400 uppercase tracking-wider">日均需完成</p>
-                          <p className="text-[10px] font-black text-blue-500">{fmtKm(target.dailyTarget)} km</p>
+                        <div className="col-span-2 bg-slate-50/80 rounded-lg p-2 grid grid-cols-2 gap-3">
+                          <div className="space-y-0.5">
+                            <p className="text-[8px] font-bold text-slate-400 uppercase tracking-wider">总考核区间</p>
+                            {target.periods.map((p, i) => (
+                              <p key={i} className="text-[10px] font-black text-slate-700">{p}</p>
+                            ))}
+                          </div>
+                          <div className="space-y-0.5">
+                            <p className="text-[8px] font-bold text-slate-400 uppercase tracking-wider">总考核里程</p>
+                            <p className="text-[10px] font-black text-slate-700">{fmtKm(target.totalMileagePerVehicle * target.vehicleCount)} km</p>
+                          </div>
                         </div>
+                        {assessment ? (
+                          <>
+                            <div className="space-y-0.5">
+                              <p className="text-[8px] font-bold text-slate-400 uppercase tracking-wider">{assessment.label}区间</p>
+                              <p className="text-[10px] font-black text-slate-700">{assessment.startDate} ~ {assessment.endDate}</p>
+                            </div>
+                            <div className="space-y-0.5">
+                              <p className="text-[8px] font-bold text-slate-400 uppercase tracking-wider">{assessment.label}任务/辆</p>
+                              <p className="text-[10px] font-black text-slate-700">{fmtKm(target.annualMileagePerVehicle * assessment.yearNumber)} km</p>
+                            </div>
+                            <div className="space-y-0.5">
+                              <p className="text-[8px] font-bold text-slate-400 uppercase tracking-wider">{assessment.label}考核车辆</p>
+                              <p className="text-[10px] font-black text-blue-600">{assessment.vehicleCount} 台</p>
+                            </div>
+                            <div className="space-y-0.5">
+                              <p className="text-[8px] font-bold text-slate-400 uppercase tracking-wider">{assessment.label}需完成</p>
+                              <p className="text-[10px] font-black text-slate-700">{fmtKm(assessment.target)} km</p>
+                            </div>
+                            <div className="space-y-0.5">
+                              <p className="text-[8px] font-bold text-slate-400 uppercase tracking-wider">{assessment.label}已完成(截止{currentDateLabel})</p>
+                              <p className="text-[10px] font-black text-emerald-600">{fmtKm(assessment.completed)} km</p>
+                            </div>
+                            <div className="space-y-0.5">
+                              <p className="text-[8px] font-bold text-slate-400 uppercase tracking-wider">{assessment.label}完成率</p>
+                              <p className="text-[10px] font-black text-blue-600">{fmtPercent(assessment.completionRate)}</p>
+                            </div>
+                            <div className="space-y-0.5">
+                              <p className="text-[8px] font-bold text-slate-400 uppercase tracking-wider">{assessment.label}达标率</p>
+                              <p className="text-[10px] font-black text-emerald-600">{fmtPercent(assessment.qualifiedRate)} ({assessment.qualifiedCount}台)</p>
+                            </div>
+                            <div className="space-y-0.5">
+                              <p className="text-[8px] font-bold text-slate-400 uppercase tracking-wider">{assessment.label}剩余里程</p>
+                              <p className="text-[10px] font-black text-rose-500">{fmtKm(assessment.remaining)} km</p>
+                            </div>
+                            <div className="space-y-0.5">
+                              <p className="text-[8px] font-bold text-slate-400 uppercase tracking-wider">{assessment.label}日均需完成</p>
+                              <p className="text-[10px] font-black text-blue-500">
+                                {assessment.daysLeft > 0 ? `${fmtKm(assessment.dailyTarget)} km` : '已到期'}
+                              </p>
+                            </div>
+                          </>
+                        ) : (
+                          <div className="col-span-2 bg-slate-50 p-2 rounded-lg text-[10px] font-bold text-slate-400">
+                            暂无第一年度车辆，当前车型车辆已进入后续考核年度。
+                          </div>
+                        )}
                         <div className="col-span-2 flex items-center justify-between bg-slate-50 p-2 rounded-lg">
-                          <span className="text-[9px] font-bold text-slate-500">剩余考核天数</span>
-                          <span className="text-[10px] font-black text-slate-900">{target.daysLeft} 天</span>
+                          <span className="text-[9px] font-bold text-slate-500">{assessment ? `${assessment.label}剩余考核天数` : '剩余考核天数'}</span>
+                          <span className="text-[10px] font-black text-slate-900">{assessment?.daysLeft ?? target.daysLeft} 天</span>
                         </div>
 
                         {/* Vehicle List Detail */}
@@ -363,6 +439,8 @@ export default function StatisticsView() {
                   )}
                 </AnimatePresence>
               </div>
+                );
+              })()
             ))}
           </div>
         </div>
@@ -391,7 +469,7 @@ export default function StatisticsView() {
                   <span className="text-slate-700">|</span>
                   <span className="text-slate-500">车辆 <span className="text-white font-black">{targets.reduce((sum, t) => sum + t.vehicleCount, 0)}</span> 台</span>
                   <span className="text-slate-700">|</span>
-                  <span className="text-slate-500">完成率 <span className="text-white font-black">{targets.length > 0 ? (targets.reduce((sum, t) => sum + t.avgCompletion, 0) / targets.length).toFixed(1) : '0.0'}</span> <span className="text-blue-400">%</span></span>
+                  <span className="text-slate-500">所选年度完成率 <span className="text-white font-black">{targets.length > 0 ? (targets.reduce((sum, t) => sum + (getTargetAssessment(t, assessmentYearMap[t.id])?.completionRate ?? t.avgCompletion), 0) / targets.length).toFixed(1) : '0.0'}</span> <span className="text-blue-400">%</span></span>
                 </div>
               </div>
               <div className="flex items-center gap-2">
@@ -417,12 +495,12 @@ export default function StatisticsView() {
                   <tr className="border-b border-slate-800/60">
                     <th className="px-3 py-2 text-[10px] font-bold text-slate-500 uppercase sticky left-0 bg-slate-900 z-20 min-w-[100px]">车型</th>
                     <th className="px-3 py-2 text-[10px] font-bold text-slate-500 uppercase text-center w-12">台数</th>
-                    <th className="px-3 py-2 text-[10px] font-bold text-slate-500 uppercase min-w-[140px]">完成进度</th>
-                    <th className="px-3 py-2 text-[10px] font-bold text-slate-500 uppercase text-right">年任务/辆</th>
-                    <th className="px-3 py-2 text-[10px] font-bold text-emerald-500 uppercase text-center">达标</th>
+                    <th className="px-3 py-2 text-[10px] font-bold text-slate-500 uppercase min-w-[140px]">年度进度</th>
+                    <th className="px-3 py-2 text-[10px] font-bold text-slate-500 uppercase text-right">年度任务/辆</th>
+                    <th className="px-3 py-2 text-[10px] font-bold text-emerald-500 uppercase text-center">年度达标</th>
                     <th className="px-3 py-2 text-[10px] font-bold text-blue-400 uppercase text-center">50%达标</th>
                     <th className="px-3 py-2 text-[10px] font-bold text-white uppercase text-right">今日里程</th>
-                    <th className="px-3 py-2 text-[10px] font-bold text-slate-500 uppercase text-right">本年目标</th>
+                    <th className="px-3 py-2 text-[10px] font-bold text-slate-500 uppercase text-right">年度目标</th>
                     <th className="px-3 py-2 text-[10px] font-bold text-slate-500 uppercase text-right">已完成</th>
                     <th className="px-3 py-2 text-[10px] font-bold text-rose-400 uppercase text-right">未完成</th>
                     <th className="px-3 py-2 text-[10px] font-bold text-slate-500 uppercase text-center w-14">余天</th>
@@ -430,10 +508,22 @@ export default function StatisticsView() {
                   </tr>
                 </thead>
                 <tbody className="divide-y divide-slate-800/30">
-                  {targets.map((target, idx) => (
+                  {targets.map((target, idx) => {
+                    const assessment = getTargetAssessment(target, assessmentYearMap[target.id]);
+                    const completion = assessment?.completionRate ?? target.avgCompletion;
+                    const qualified = assessment?.qualifiedCount ?? target.yearQualifiedCount;
+                    const halfQualified = assessment?.halfQualifiedCount ?? target.halfQualifiedCount;
+                    const goal = assessment?.target ?? target.currentYearTarget;
+                    const completed = assessment?.completed ?? target.currentYearCompleted;
+                    const remainingMileage = assessment?.remaining ?? target.remaining;
+                    const days = assessment?.daysLeft ?? target.daysLeft;
+                    const daily = assessment?.dailyTarget ?? target.dailyTarget;
+                    const taskPerVehicle = target.annualMileagePerVehicle * (assessment?.yearNumber || 1);
+                    return (
                     <tr key={idx} className="hover:bg-slate-800/20 transition-colors">
                       <td className="px-3 py-3 sticky left-0 bg-slate-950 z-10 border-r border-slate-800/40">
                         <div className="text-xs font-bold text-white whitespace-nowrap">{target.targetName}</div>
+                        <div className="text-[9px] text-blue-400 font-bold mt-0.5">{assessment?.label || '当前年度'}</div>
                         <div className="text-[9px] text-slate-500 mt-0.5">{target.periods.map((p, i) => <span key={i} className="block">{p}</span>)}</div>
                       </td>
                       <td className="px-3 py-3 text-xs font-bold text-slate-300 text-center">{target.vehicleCount}</td>
@@ -441,28 +531,31 @@ export default function StatisticsView() {
                         <div className="flex items-center gap-2">
                           <div className="flex-1 h-1.5 bg-slate-800 rounded-full overflow-hidden">
                             <div
-                              className={`h-full rounded-full ${target.avgCompletion >= 90 ? 'bg-emerald-500' : target.avgCompletion >= 50 ? 'bg-amber-500' : 'bg-amber-500/60'}`}
-                              style={{ width: `${Math.min(target.avgCompletion, 100)}%` }}
+                              className={`h-full rounded-full ${completion >= 90 ? 'bg-emerald-500' : completion >= 50 ? 'bg-amber-500' : 'bg-amber-500/60'}`}
+                              style={{ width: `${Math.min(completion, 100)}%` }}
                             />
                           </div>
-                          <span className="text-[10px] font-black text-white w-10 text-right">{target.avgCompletion.toFixed(1)}%</span>
+                          <span className="text-[10px] font-black text-white w-10 text-right">{completion.toFixed(1)}%</span>
                         </div>
                         <div className="flex justify-between mt-1 text-[9px] text-slate-500">
-                          <span>{fmtKm(target.cumulativeTotal)}</span>
-                          <span>/ {fmtKm(target.totalMileagePerVehicle * target.vehicleCount)} km</span>
+                          <span>{fmtKm(completed)}</span>
+                          <span>/ {fmtKm(goal)} km</span>
                         </div>
                       </td>
-                      <td className="px-3 py-3 text-xs text-slate-300 text-right">{fmtKm(target.annualMileagePerVehicle)} km</td>
-                      <td className="px-3 py-3 text-xs font-black text-emerald-400 text-center">{target.yearQualifiedCount}</td>
-                      <td className="px-3 py-3 text-xs font-black text-blue-400 text-center">{target.halfQualifiedCount}</td>
+                      <td className="px-3 py-3 text-xs text-slate-300 text-right">{fmtKm(taskPerVehicle)} km</td>
+                      <td className="px-3 py-3 text-xs font-black text-emerald-400 text-center">{qualified}</td>
+                      <td className="px-3 py-3 text-xs font-black text-blue-400 text-center">{halfQualified}</td>
                       <td className="px-3 py-3 text-xs font-black text-white text-right">{fmtKm(target.todayTotal)} km</td>
-                      <td className="px-3 py-3 text-xs text-slate-400 text-right">{fmtKm(target.currentYearTarget)} km</td>
-                      <td className="px-3 py-3 text-xs text-emerald-400/80 text-right">{fmtKm(target.currentYearCompleted)} km</td>
-                      <td className="px-3 py-3 text-xs font-bold text-rose-400 text-right">{fmtKm(target.remaining)} km</td>
-                      <td className="px-3 py-3 text-xs text-slate-300 text-center">{target.daysLeft}</td>
-                      <td className="px-3 py-3 text-xs font-bold text-blue-400 text-right">{fmtKm(target.dailyTarget)} km</td>
+                      <td className="px-3 py-3 text-xs text-slate-400 text-right">{fmtKm(goal)} km</td>
+                      <td className="px-3 py-3 text-xs text-emerald-400/80 text-right">{fmtKm(completed)} km</td>
+                      <td className="px-3 py-3 text-xs font-bold text-rose-400 text-right">{fmtKm(remainingMileage)} km</td>
+                      <td className="px-3 py-3 text-xs text-slate-300 text-center">{days}</td>
+                      <td className="px-3 py-3 text-xs font-bold text-blue-400 text-right">
+                        {assessment && days === 0 ? '已到期' : `${fmtKm(daily)} km`}
+                      </td>
                     </tr>
-                  ))}
+                    );
+                  })}
                 </tbody>
               </table>
             </div>

src/modules/mileage/types.ts

@@ -63,6 +63,36 @@ export interface TargetSummary {
   remaining: number;
   daysLeft: number;
   dailyTarget: number;
+  firstYearVehicleCount: number;
+  firstYearTarget: number;
+  firstYearCompleted: number;
+  firstYearRemaining: number;
+  firstYearCompletionRate: number;
+  firstYearQualifiedCount: number;
+  firstYearQualifiedRate: number;
+  firstYearHalfQualifiedCount: number;
+  firstYearDaysLeft: number;
+  firstYearDailyTarget: number;
+  firstYearStartDate: string | null;
+  firstYearEndDate: string | null;
+  yearlyAssessments: TargetYearlyAssessment[];
+}
+
+export interface TargetYearlyAssessment {
+  yearNumber: number;
+  label: string;
+  vehicleCount: number;
+  target: number;
+  completed: number;
+  remaining: number;
+  completionRate: number;
+  qualifiedCount: number;
+  qualifiedRate: number;
+  halfQualifiedCount: number;
+  daysLeft: number;
+  dailyTarget: number;
+  startDate: string | null;
+  endDate: string | null;
 }
 
 export interface TargetVehicle {

src/server/routes/mileage/targets.ts

@@ -32,6 +32,58 @@ app.get('/', async (c) => {
     const statsMap = new Map<number, any>();
     for (const s of vehicleStats) statsMap.set(s.target_id, s);
 
+    const [firstYearRows] = await pool.execute(`
+      SELECT
+        v.target_id,
+        COUNT(*) as first_year_total,
+        SUM(t.annual_mileage_per_vehicle) as first_year_target,
+        SUM(LEAST(v.current_mileage, t.annual_mileage_per_vehicle)) as first_year_completed,
+        SUM(GREATEST(t.annual_mileage_per_vehicle - v.current_mileage, 0)) as first_year_remaining,
+        SUM(LEAST(v.current_mileage, t.annual_mileage_per_vehicle)) / NULLIF(SUM(t.annual_mileage_per_vehicle), 0) as first_year_completion_rate,
+        SUM(CASE WHEN v.current_mileage >= t.annual_mileage_per_vehicle THEN 1 ELSE 0 END) as first_year_qualified_count,
+        SUM(CASE WHEN v.current_mileage >= t.annual_mileage_per_vehicle * 0.5 THEN 1 ELSE 0 END) as first_year_half_qualified_count,
+        DATE_FORMAT(MIN(v.assessment_start_date), '%Y-%m-%d') as first_year_start_date,
+        DATE_FORMAT(MAX(DATE_SUB(DATE_ADD(v.assessment_start_date, INTERVAL 1 YEAR), INTERVAL 1 DAY)), '%Y-%m-%d') as first_year_end_date
+      FROM tab_mileage_assessment_vehicle v
+      JOIN tab_mileage_assessment_target t ON t.id = v.target_id AND t.is_deleted = 0
+      WHERE v.is_deleted = 0
+      GROUP BY v.target_id
+    `) as [any[], unknown];
+
+    const firstYearMap = new Map<number, any>();
+    for (const s of firstYearRows) firstYearMap.set(s.target_id, s);
+
+    const [yearlyRows] = await pool.execute(`
+      SELECT
+        v.target_id,
+        y.year_number,
+        COUNT(*) as vehicle_count,
+        SUM(t.annual_mileage_per_vehicle * y.year_number) as target_mileage,
+        SUM(LEAST(v.current_mileage, t.annual_mileage_per_vehicle * y.year_number)) as completed_mileage,
+        SUM(GREATEST(t.annual_mileage_per_vehicle * y.year_number - v.current_mileage, 0)) as remaining_mileage,
+        SUM(LEAST(v.current_mileage, t.annual_mileage_per_vehicle * y.year_number))
+          / NULLIF(SUM(t.annual_mileage_per_vehicle * y.year_number), 0) as completion_rate,
+        SUM(CASE WHEN v.current_mileage >= t.annual_mileage_per_vehicle * y.year_number THEN 1 ELSE 0 END) as qualified_count,
+        SUM(CASE WHEN v.current_mileage >= t.annual_mileage_per_vehicle * y.year_number * 0.5 THEN 1 ELSE 0 END) as half_qualified_count,
+        DATE_FORMAT(MIN(DATE_ADD(v.assessment_start_date, INTERVAL y.year_number - 1 YEAR)), '%Y-%m-%d') as start_date,
+        DATE_FORMAT(MAX(DATE_SUB(DATE_ADD(v.assessment_start_date, INTERVAL y.year_number YEAR), INTERVAL 1 DAY)), '%Y-%m-%d') as end_date
+      FROM tab_mileage_assessment_vehicle v
+      JOIN tab_mileage_assessment_target t ON t.id = v.target_id AND t.is_deleted = 0
+      JOIN (
+        SELECT 1 as year_number UNION ALL SELECT 2 UNION ALL SELECT 3 UNION ALL SELECT 4 UNION ALL SELECT 5
+      ) y ON y.year_number <= LEAST(t.assessment_years, v.current_year_number)
+      WHERE v.is_deleted = 0
+      GROUP BY v.target_id, y.year_number
+      ORDER BY v.target_id, y.year_number
+    `) as [any[], unknown];
+
+    const yearlyMap = new Map<number, any[]>();
+    for (const row of yearlyRows) {
+      const list = yearlyMap.get(row.target_id) || [];
+      list.push(row);
+      yearlyMap.set(row.target_id, list);
+    }
+
     const [periodRows] = await pool.execute(`
       SELECT target_id,
              DATE_FORMAT(assessment_start_date, '%Y-%m-%d') as start_date,
@@ -71,12 +123,43 @@ app.get('/', async (c) => {
     const now = new Date();
     const result = targets.map((t: any) => {
       const s = statsMap.get(t.id) || {};
+      const fy = firstYearMap.get(t.id) || {};
       const currentYearTarget = Number(s.current_year_target) || 0;
       const currentYearCompleted = Number(s.current_year_completed) || 0;
       const remaining = Math.max(0, currentYearTarget - currentYearCompleted);
       const yearEnd = s.year_end_date ? new Date(s.year_end_date) : now;
       const daysLeft = Math.max(1, Math.ceil((yearEnd.getTime() - now.getTime()) / 86400000));
       const dailyTarget = remaining / daysLeft;
+      const firstYearEnd = fy.first_year_end_date ? new Date(fy.first_year_end_date) : now;
+      const firstYearDaysLeft = Math.max(0, Math.ceil((firstYearEnd.getTime() - now.getTime()) / 86400000));
+      const firstYearRemaining = Number(fy.first_year_remaining) || 0;
+      const firstYearVehicleCount = Number(fy.first_year_total) || 0;
+      const firstYearQualifiedCount = Number(fy.first_year_qualified_count) || 0;
+      const yearlyAssessments = (yearlyMap.get(t.id) || []).map((row: any) => {
+        const vehicleCount = Number(row.vehicle_count) || 0;
+        const qualifiedCount = Number(row.qualified_count) || 0;
+        const remainingMileage = Number(row.remaining_mileage) || 0;
+        const endDate = row.end_date ? new Date(row.end_date) : now;
+        const assessmentDaysLeft = Math.max(0, Math.ceil((endDate.getTime() - now.getTime()) / 86400000));
+        const yearNumber = Number(row.year_number) || 0;
+
+        return {
+          yearNumber,
+          label: `第${yearNumber}年`,
+          vehicleCount,
+          target: Number(row.target_mileage) || 0,
+          completed: Number(row.completed_mileage) || 0,
+          remaining: remainingMileage,
+          completionRate: (Number(row.completion_rate) || 0) * 100,
+          qualifiedCount,
+          qualifiedRate: vehicleCount > 0 ? (qualifiedCount / vehicleCount) * 100 : 0,
+          halfQualifiedCount: Number(row.half_qualified_count) || 0,
+          daysLeft: assessmentDaysLeft,
+          dailyTarget: assessmentDaysLeft > 0 ? Math.round((remainingMileage / assessmentDaysLeft) * 10) / 10 : 0,
+          startDate: row.start_date || null,
+          endDate: row.end_date || null,
+        };
+      });
 
       const periods = periodsMap.get(t.id) || [];
       if (periods.length === 0) {
@@ -104,6 +187,19 @@ app.get('/', async (c) => {
         remaining,
         daysLeft,
         dailyTarget: Math.round(dailyTarget * 10) / 10,
+        firstYearVehicleCount,
+        firstYearTarget: Number(fy.first_year_target) || 0,
+        firstYearCompleted: Number(fy.first_year_completed) || 0,
+        firstYearRemaining,
+        firstYearCompletionRate: (Number(fy.first_year_completion_rate) || 0) * 100,
+        firstYearQualifiedCount,
+        firstYearQualifiedRate: firstYearVehicleCount > 0 ? (firstYearQualifiedCount / firstYearVehicleCount) * 100 : 0,
+        firstYearHalfQualifiedCount: Number(fy.first_year_half_qualified_count) || 0,
+        firstYearDaysLeft,
+        firstYearDailyTarget: firstYearDaysLeft > 0 ? Math.round((firstYearRemaining / firstYearDaysLeft) * 10) / 10 : 0,
+        firstYearStartDate: fy.first_year_start_date || null,
+        firstYearEndDate: fy.first_year_end_date || null,
+        yearlyAssessments,
       };
     });