diff --git a/vehicle-data-platform/apps/web/src/pages/Realtime.tsx b/vehicle-data-platform/apps/web/src/pages/Realtime.tsx index adb54e32..6370953a 100644 --- a/vehicle-data-platform/apps/web/src/pages/Realtime.tsx +++ b/vehicle-data-platform/apps/web/src/pages/Realtime.tsx @@ -353,6 +353,7 @@ export function Realtime({ .slice(0, 5); const defaultMapRow = mapServiceRows[0] ?? rows.find((row) => isValidCoordinate(row) && canOpenVehicle(row.vin)); const selectedMapRow = rows.find((row, index) => realtimeMapPointId(row, index) === selectedMapPointId) ?? defaultMapRow; + const selectedMapPointKey = selectedMapRow ? realtimeMapPointId(selectedMapRow, rows.indexOf(selectedMapRow)) : selectedMapPointId; const mapPoints: VehicleMapPoint[] = rows.map((row, index) => ({ id: realtimeMapPointId(row, index), label: row.plate || row.vin || 'unknown', @@ -416,6 +417,14 @@ export function Realtime({ amapConfigured, sourceIssueRows }), '实时摘要'); + const selectRealtimeRow = (row: VehicleRealtimeRow) => { + const index = rows.indexOf(row); + if (index < 0) return; + setSelectedMapPointId(realtimeMapPointId(row, index)); + }; + const selectRealtimeMapPoint = (point: VehicleMapPoint) => { + setSelectedMapPointId(point.id); + }; return (
@@ -485,8 +494,8 @@ export function Realtime({ setSelectedMapPointId(point.id)} + selectedId={selectedMapPointKey} + onPointSelect={selectRealtimeMapPoint} fallbackLabel="高德地图未配置,显示实时坐标预览" />
@@ -597,11 +606,11 @@ export function Realtime({ role="button" tabIndex={0} className={`vp-map-service-item vp-map-service-item-button ${selectedMapRow?.vin === row.vin ? 'vp-map-service-item-selected' : ''}`} - onClick={() => setSelectedMapPointId(realtimeMapPointId(row, rows.indexOf(row)))} + onClick={() => selectRealtimeRow(row)} onKeyDown={(event) => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); - setSelectedMapPointId(realtimeMapPointId(row, rows.indexOf(row))); + selectRealtimeRow(row); } }} > @@ -722,6 +731,7 @@ export function Realtime({ width: 190, render: (_: unknown, row: VehicleRealtimeRow) => ( + @@ -732,7 +742,13 @@ export function Realtime({ )} - + diff --git a/vehicle-data-platform/apps/web/src/test/App.test.tsx b/vehicle-data-platform/apps/web/src/test/App.test.tsx index 3909e019..92deeb19 100644 --- a/vehicle-data-platform/apps/web/src/test/App.test.tsx +++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx @@ -8329,6 +8329,12 @@ test('selects realtime map vehicle from fallback map point', async () => { expect(within(selectedPanel as HTMLElement).getByText('粤A选中2')).toBeInTheDocument(); }); expect(within(selectedPanel as HTMLElement).getByText('42 km/h')).toBeInTheDocument(); + + const locateButtons = screen.getAllByRole('button', { name: '地图定位' }); + fireEvent.click(locateButtons[0]); + expect(within(selectedPanel as HTMLElement).getByText('粤A选中1')).toBeInTheDocument(); + fireEvent.click(locateButtons[1]); + expect(within(selectedPanel as HTMLElement).getByText('粤A选中2')).toBeInTheDocument(); }); test('opens vehicle service from realtime map service queue', async () => {