feat(platform): show vehicle-level latest dashboard
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user