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 { PageHeader } from '../components/PageHeader';
|
||||||
import { StatusTag } from '../components/StatusTag';
|
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 }) {
|
export function Vehicles({ onOpenVehicle }: { onOpenVehicle: (vin: string) => void }) {
|
||||||
const [rows, setRows] = useState<VehicleCoverageRow[]>([]);
|
const [rows, setRows] = useState<VehicleCoverageRow[]>([]);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
@@ -37,9 +53,17 @@ export function Vehicles({ onOpenVehicle }: { onOpenVehicle: (vin: string) => vo
|
|||||||
{ title: '车牌', dataIndex: 'plate', width: 120 },
|
{ title: '车牌', dataIndex: 'plate', width: 120 },
|
||||||
{ title: '手机号', dataIndex: 'phone', width: 130 },
|
{ title: '手机号', dataIndex: 'phone', width: 130 },
|
||||||
{ title: 'OEM', dataIndex: 'oem', width: 120 },
|
{ 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: '来源',
|
title: '来源',
|
||||||
width: 260,
|
width: 240,
|
||||||
render: (_: unknown, row: VehicleCoverageRow) => (
|
render: (_: unknown, row: VehicleCoverageRow) => (
|
||||||
<Space spacing={4} wrap>
|
<Space spacing={4} wrap>
|
||||||
{row.protocols.map((protocol) => <Tag key={protocol} color="blue">{protocol}</Tag>)}
|
{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 () => {
|
test('switches vehicle detail to a source from the coverage cards', async () => {
|
||||||
window.history.replaceState(null, '', '/#/detail?keyword=VIN001');
|
window.history.replaceState(null, '', '/#/detail?keyword=VIN001');
|
||||||
const fetchMock = vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {
|
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 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
|
## Interaction Rules
|
||||||
|
|
||||||
- Tables are the default data surface.
|
- Tables are the default data surface.
|
||||||
|
|||||||
Reference in New Issue
Block a user