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 { Button, Card, Col, Form, Row, Select, Space, Spin, Table, Tag, Toast, Typography } from '@douyinfe/semi-ui';
|
||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
import { api } from '../api/client';
|
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 { PageHeader } from '../components/PageHeader';
|
||||||
import { StatusTag } from '../components/StatusTag';
|
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 }) {
|
export function Dashboard({ onOpenVehicle, onOpenQuality }: { onOpenVehicle: (vin: string) => void; onOpenQuality: () => void }) {
|
||||||
const [summary, setSummary] = useState<DashboardSummary | null>(null);
|
const [summary, setSummary] = useState<DashboardSummary | null>(null);
|
||||||
const [vehicles, setVehicles] = useState<VehicleRow[]>([]);
|
|
||||||
const [coverage, setCoverage] = useState<VehicleCoverageRow[]>([]);
|
const [coverage, setCoverage] = useState<VehicleCoverageRow[]>([]);
|
||||||
const [locations, setLocations] = useState<VehicleRealtimeRow[]>([]);
|
const [locations, setLocations] = useState<VehicleRealtimeRow[]>([]);
|
||||||
const [qualityIssues, setQualityIssues] = useState<QualityIssueRow[]>([]);
|
const [qualityIssues, setQualityIssues] = useState<QualityIssueRow[]>([]);
|
||||||
@@ -40,14 +39,12 @@ export function Dashboard({ onOpenVehicle, onOpenQuality }: { onOpenVehicle: (vi
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
Promise.all([
|
Promise.all([
|
||||||
api.dashboardSummary(),
|
api.dashboardSummary(),
|
||||||
api.vehicles(new URLSearchParams({ limit: '5' })),
|
|
||||||
api.vehicleCoverage(new URLSearchParams({ limit: '8' })),
|
api.vehicleCoverage(new URLSearchParams({ limit: '8' })),
|
||||||
api.vehicleRealtime(new URLSearchParams({ limit: '8' })),
|
api.vehicleRealtime(new URLSearchParams({ limit: '8' })),
|
||||||
api.qualityIssues(new URLSearchParams({ limit: '5' }))
|
api.qualityIssues(new URLSearchParams({ limit: '5' }))
|
||||||
])
|
])
|
||||||
.then(([nextSummary, vehiclePage, coveragePage, locationPage, qualityPage]) => {
|
.then(([nextSummary, coveragePage, locationPage, qualityPage]) => {
|
||||||
setSummary(nextSummary);
|
setSummary(nextSummary);
|
||||||
setVehicles(vehiclePage.items);
|
|
||||||
setCoverage(coveragePage.items);
|
setCoverage(coveragePage.items);
|
||||||
setLocations(locationPage.items);
|
setLocations(locationPage.items);
|
||||||
setQualityIssues(qualityPage.items);
|
setQualityIssues(qualityPage.items);
|
||||||
@@ -201,12 +198,21 @@ export function Dashboard({ onOpenVehicle, onOpenQuality }: { onOpenVehicle: (vi
|
|||||||
<Card title="最新车辆" bordered>
|
<Card title="最新车辆" bordered>
|
||||||
<Table
|
<Table
|
||||||
pagination={false}
|
pagination={false}
|
||||||
dataSource={vehicles}
|
rowKey="vin"
|
||||||
|
dataSource={locations}
|
||||||
columns={[
|
columns={[
|
||||||
{ title: '车牌', dataIndex: 'plate' },
|
{ title: '车牌', dataIndex: 'plate' },
|
||||||
{ title: 'VIN', dataIndex: 'vin' },
|
{ 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>
|
</Card>
|
||||||
|
|||||||
Reference in New Issue
Block a user