feat(platform-web): show vehicle list service status
This commit is contained in:
@@ -6,6 +6,22 @@ import { DataEmpty } from '../components/DataEmpty';
|
||||
import { PageHeader } from '../components/PageHeader';
|
||||
import { StatusTag } from '../components/StatusTag';
|
||||
|
||||
function vehicleServiceStatus(row: VehicleCoverageRow) {
|
||||
if (row.bindingStatus !== 'bound') {
|
||||
return { label: '身份未绑定', color: 'orange' as const };
|
||||
}
|
||||
if (row.sourceCount <= 0) {
|
||||
return { label: '暂无数据来源', color: 'orange' as const };
|
||||
}
|
||||
if (row.onlineSourceCount <= 0) {
|
||||
return { label: '车辆离线', color: 'red' as const };
|
||||
}
|
||||
if (row.onlineSourceCount < row.sourceCount) {
|
||||
return { label: '部分来源离线', color: 'orange' as const };
|
||||
}
|
||||
return { label: '服务正常', color: 'green' as const };
|
||||
}
|
||||
|
||||
export function Vehicles({ onOpenVehicle }: { onOpenVehicle: (vin: string) => void }) {
|
||||
const [rows, setRows] = useState<VehicleCoverageRow[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
@@ -37,9 +53,17 @@ export function Vehicles({ onOpenVehicle }: { onOpenVehicle: (vin: string) => vo
|
||||
{ title: '车牌', dataIndex: 'plate', width: 120 },
|
||||
{ title: '手机号', dataIndex: 'phone', width: 130 },
|
||||
{ title: 'OEM', dataIndex: 'oem', width: 120 },
|
||||
{
|
||||
title: '车辆服务状态',
|
||||
width: 130,
|
||||
render: (_: unknown, row: VehicleCoverageRow) => {
|
||||
const status = vehicleServiceStatus(row);
|
||||
return <Tag color={status.color}>{status.label}</Tag>;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '来源',
|
||||
width: 260,
|
||||
width: 240,
|
||||
render: (_: unknown, row: VehicleCoverageRow) => (
|
||||
<Space spacing={4} wrap>
|
||||
{row.protocols.map((protocol) => <Tag key={protocol} color="blue">{protocol}</Tag>)}
|
||||
|
||||
@@ -245,6 +245,55 @@ test('keeps primary protocol when opening vehicle service from realtime vehicles
|
||||
});
|
||||
});
|
||||
|
||||
test('shows vehicle service status in vehicle list', async () => {
|
||||
window.history.replaceState(null, '', '/#/vehicles');
|
||||
vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {
|
||||
const path = String(input);
|
||||
if (path.includes('/api/vehicles/coverage')) {
|
||||
return {
|
||||
ok: true,
|
||||
json: async () => ({
|
||||
data: {
|
||||
items: [{
|
||||
vin: 'VIN-DEGRADED-001',
|
||||
plate: '粤AG18312',
|
||||
phone: '13307795425',
|
||||
oem: 'G7s',
|
||||
protocols: ['GB32960', 'JT808'],
|
||||
sourceCount: 2,
|
||||
onlineSourceCount: 1,
|
||||
online: true,
|
||||
lastSeen: '2026-07-03 20:12:10',
|
||||
bindingStatus: 'bound'
|
||||
}],
|
||||
total: 1,
|
||||
limit: 20,
|
||||
offset: 0
|
||||
},
|
||||
traceId: 'trace-test',
|
||||
timestamp: 1783094400000
|
||||
})
|
||||
} as Response;
|
||||
}
|
||||
return {
|
||||
ok: true,
|
||||
json: async () => ({
|
||||
data: path.includes('/api/ops/health')
|
||||
? { linkHealth: [], kafkaLag: 0, redisOnlineKeys: 0, tdengineWritable: true, mysqlWritable: true, runtime: { requestTimeoutMs: 5000 } }
|
||||
: { items: [], total: 0, limit: 10, offset: 0 },
|
||||
traceId: 'trace-test',
|
||||
timestamp: 1783094400000
|
||||
})
|
||||
} as Response;
|
||||
});
|
||||
|
||||
render(<App />);
|
||||
|
||||
expect(await screen.findByText('VIN-DEGRADED-001')).toBeInTheDocument();
|
||||
expect(screen.getByText('车辆服务状态')).toBeInTheDocument();
|
||||
expect(screen.getByText('部分来源离线')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('switches vehicle detail to a source from the coverage cards', async () => {
|
||||
window.history.replaceState(null, '', '/#/detail?keyword=VIN001');
|
||||
const fetchMock = vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {
|
||||
|
||||
@@ -20,6 +20,8 @@ The product model is vehicle-first. GB32960, JT808, and Yutong MQTT are ingestio
|
||||
|
||||
Vehicle service coverage is always shown at VIN level. A vehicle may have one or more ingestion sources, but upper product views should summarize source count, online source count, last seen time, and binding status before drilling into protocol-specific diagnostics.
|
||||
|
||||
Vehicle lists should expose a vehicle-level service status derived from binding and source coverage: identity required, no data source, offline, degraded, or healthy. Protocol tags remain attribution and troubleshooting context, not the primary status.
|
||||
|
||||
## Interaction Rules
|
||||
|
||||
- Tables are the default data surface.
|
||||
|
||||
Reference in New Issue
Block a user