feat(platform): show vehicle-level latest dashboard

This commit is contained in:
lingniu
2026-07-03 23:41:49 +08:00
parent fd60d2644e
commit 562c26f061

View File

@@ -1,7 +1,7 @@
import { Button, Card, Col, Form, Row, Select, Space, Spin, Table, Tag, Toast, Typography } from '@douyinfe/semi-ui';
import { useEffect, useState } from 'react';
import { api } from '../api/client';
import type { DashboardSummary, LinkHealth, ProtocolStat, QualityIssueRow, VehicleCoverageRow, VehicleRealtimeRow, VehicleRow } from '../api/types';
import type { DashboardSummary, LinkHealth, ProtocolStat, QualityIssueRow, VehicleCoverageRow, VehicleRealtimeRow } from '../api/types';
import { PageHeader } from '../components/PageHeader';
import { StatusTag } from '../components/StatusTag';
@@ -17,7 +17,6 @@ function formatLag(value?: number | null) {
export function Dashboard({ onOpenVehicle, onOpenQuality }: { onOpenVehicle: (vin: string) => void; onOpenQuality: () => void }) {
const [summary, setSummary] = useState<DashboardSummary | null>(null);
const [vehicles, setVehicles] = useState<VehicleRow[]>([]);
const [coverage, setCoverage] = useState<VehicleCoverageRow[]>([]);
const [locations, setLocations] = useState<VehicleRealtimeRow[]>([]);
const [qualityIssues, setQualityIssues] = useState<QualityIssueRow[]>([]);
@@ -40,14 +39,12 @@ export function Dashboard({ onOpenVehicle, onOpenQuality }: { onOpenVehicle: (vi
useEffect(() => {
Promise.all([
api.dashboardSummary(),
api.vehicles(new URLSearchParams({ limit: '5' })),
api.vehicleCoverage(new URLSearchParams({ limit: '8' })),
api.vehicleRealtime(new URLSearchParams({ limit: '8' })),
api.qualityIssues(new URLSearchParams({ limit: '5' }))
])
.then(([nextSummary, vehiclePage, coveragePage, locationPage, qualityPage]) => {
.then(([nextSummary, coveragePage, locationPage, qualityPage]) => {
setSummary(nextSummary);
setVehicles(vehiclePage.items);
setCoverage(coveragePage.items);
setLocations(locationPage.items);
setQualityIssues(qualityPage.items);
@@ -201,12 +198,21 @@ export function Dashboard({ onOpenVehicle, onOpenQuality }: { onOpenVehicle: (vi
<Card title="最新车辆" bordered>
<Table
pagination={false}
dataSource={vehicles}
rowKey="vin"
dataSource={locations}
columns={[
{ title: '车牌', dataIndex: 'plate' },
{ title: 'VIN', dataIndex: 'vin' },
{ title: '协议', dataIndex: 'protocol' },
{ title: '最后时间', dataIndex: 'lastSeen' }
{
title: '来源',
render: (_: unknown, row: VehicleRealtimeRow) => (
<Space spacing={4} wrap>
{row.protocols.map((protocol) => <Tag key={protocol} color={protocol === row.primaryProtocol ? 'blue' : 'grey'}>{protocol}</Tag>)}
</Space>
)
},
{ title: '最后时间', dataIndex: 'lastSeen' },
{ title: '操作', width: 110, render: (_: unknown, row: VehicleRealtimeRow) => <Button onClick={() => onOpenVehicle(row.vin)}></Button> }
]}
/>
</Card>