shishengliang/lingniu-vehicle-ingest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(platform): frame realtime as vehicle service

Browse Source
This commit is contained in:
lingniu
2026-07-04 04:53:21 +08:00
parent 04645c888d
commit 2dfe0fbf3a
2 changed files with 92 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
vehicle-data-platform/apps/web/src/pages/Realtime.tsx
View File

@@ -1,4 +1,4 @@
import { Button, Card, Form, Select, Space, Table, Tabs, Tag, Toast } from '@douyinfe/semi-ui';
import { Button, Card, Form, Select, Space, Table, Tabs, Tag, Toast, Typography } from '@douyinfe/semi-ui';
import { useEffect, useState } from 'react';
import { api } from '../api/client';
import type { VehicleRealtimeRow } from '../api/types';
@@ -27,6 +27,10 @@ function vehicleServiceStatus(row: VehicleRealtimeRow) {
return { label: '服务正常', color: 'green' as const };
}
function sourceEvidenceText(row: VehicleRealtimeRow) {
return `${row.onlineSourceCount}/${row.sourceCount} 来源在线`;
}
export function Realtime({ onOpenVehicle }: { onOpenVehicle: (vin: string, protocol?: string) => void }) {
const [rows, setRows] = useState<VehicleRealtimeRow[]>([]);
const [loading, setLoading] = useState(true);
@@ -55,7 +59,7 @@ export function Realtime({ onOpenVehicle }: { onOpenVehicle: (vin: string, proto
return (
<div className="vp-page">
<PageHeader title="实时车辆" description="以车辆为主对象查看最新位置、在线来源和核心实时数据" />
<PageHeader title="车辆服务实时态" description="以车辆为主对象查看最新位置、在线来源和核心实时数据，协议只作为来源证据" />
<Card bordered>
<Form layout="horizontal" onSubmit={(values) => {
const nextFilters = values as Record<string, string>;
@@ -104,10 +108,29 @@ export function Realtime({ onOpenVehicle }: { onOpenVehicle: (vin: string, proto
onPageSizeChange: (pageSize) => load(filters, 1, pageSize)
}}
columns={[
{ title: 'VIN', dataIndex: 'vin' },
{ title: '车牌', dataIndex: 'plate' },
{ title: '车牌', dataIndex: 'plate', width: 120 },
{ title: 'VIN', dataIndex: 'vin', width: 190 },
{
title: '来源',
title: '车辆服务状态',
width: 130,
render: (_: unknown, row: VehicleRealtimeRow) => {
const status = vehicleServiceStatus(row);
return <Tag color={status.color}>{status.label}</Tag>;
}
},
{
title: '车辆核心数据',
width: 230,
render: (_: unknown, row: VehicleRealtimeRow) => (
<Space spacing={4} wrap>
<Tag color="blue">{row.speedKmh ?? '-'} km/h</Tag>
<Tag color="green">SOC {row.socPercent ?? '-'}%</Tag>
<Typography.Text type="tertiary">{row.totalMileageKm ?? '-'} km</Typography.Text>
</Space>
)
},
{
title: '来源证据',
width: 260,
render: (_: unknown, row: VehicleRealtimeRow) => (
<Space spacing={4} wrap>
@@ -117,21 +140,9 @@ export function Realtime({ onOpenVehicle }: { onOpenVehicle: (vin: string, proto
</Space>
)
},
{ title: '覆盖', width: 90, render: (_: unknown, row: VehicleRealtimeRow) => `${row.onlineSourceCount}/${row.sourceCount}` },
{
title: '车辆服务状态',
width: 130,
render: (_: unknown, row: VehicleRealtimeRow) => {
const status = vehicleServiceStatus(row);
return <Tag color={status.color}>{status.label}</Tag>;
}
},
{ title: '证据覆盖', width: 120, render: (_: unknown, row: VehicleRealtimeRow) => sourceEvidenceText(row) },
{ title: '在线', width: 90, render: (_: unknown, row: VehicleRealtimeRow) => <StatusTag status={row.online ? 'ok' : 'offline'} /> },
{ title: '速度 km/h', dataIndex: 'speedKmh' },
{ title: 'SOC %', dataIndex: 'socPercent' },
{ title: '总里程 km', dataIndex: 'totalMileageKm' },
{ title: '最新来源', dataIndex: 'primaryProtocol' },
{ title: '最后时间', dataIndex: 'lastSeen' },
{ title: '最后时间', dataIndex: 'lastSeen', width: 170 },
{
title: '操作',
width: 110,