diff --git a/vehicle-data-platform/apps/web/src/pages/Vehicles.tsx b/vehicle-data-platform/apps/web/src/pages/Vehicles.tsx index 29594b5d..c0296552 100644 --- a/vehicle-data-platform/apps/web/src/pages/Vehicles.tsx +++ b/vehicle-data-platform/apps/web/src/pages/Vehicles.tsx @@ -1,13 +1,13 @@ -import { Button, Card, Form, Select, Space, Table, Toast } from '@douyinfe/semi-ui'; +import { Button, Card, Form, Select, Space, Table, Tag, Toast } from '@douyinfe/semi-ui'; import { useEffect, useMemo, useState } from 'react'; import { api } from '../api/client'; -import type { VehicleRow } from '../api/types'; +import type { VehicleCoverageRow } from '../api/types'; import { DataEmpty } from '../components/DataEmpty'; import { PageHeader } from '../components/PageHeader'; import { StatusTag } from '../components/StatusTag'; export function Vehicles({ onOpenVehicle }: { onOpenVehicle: (vin: string) => void }) { - const [rows, setRows] = useState([]); + const [rows, setRows] = useState([]); const [loading, setLoading] = useState(true); const load = (values?: Record) => { @@ -15,7 +15,10 @@ export function Vehicles({ onOpenVehicle }: { onOpenVehicle: (vin: string) => vo const params = new URLSearchParams({ limit: '20' }); if (values?.keyword) params.set('keyword', values.keyword); if (values?.protocol) params.set('protocol', values.protocol); - api.vehicles(params) + if (values?.coverage) params.set('coverage', values.coverage); + if (values?.online) params.set('online', values.online); + if (values?.bindingStatus) params.set('bindingStatus', values.bindingStatus); + api.vehicleCoverage(params) .then((page) => setRows(page.items)) .catch((error: Error) => Toast.error(error.message)) .finally(() => setLoading(false)); @@ -29,27 +32,47 @@ export function Vehicles({ onOpenVehicle }: { onOpenVehicle: (vin: string) => vo { title: '车牌', dataIndex: 'plate', width: 120 }, { title: '手机号', dataIndex: 'phone', width: 130 }, { title: 'OEM', dataIndex: 'oem', width: 120 }, - { title: '协议', dataIndex: 'protocol', width: 120 }, - { title: '在线', render: (_: unknown, row: VehicleRow) => }, + { + title: '来源', + width: 260, + render: (_: unknown, row: VehicleCoverageRow) => ( + + {row.protocols.map((protocol) => {protocol})} + + ) + }, + { title: '覆盖', width: 90, render: (_: unknown, row: VehicleCoverageRow) => `${row.onlineSourceCount}/${row.sourceCount}` }, + { title: '在线', width: 90, render: (_: unknown, row: VehicleCoverageRow) => }, { title: '最后在线', dataIndex: 'lastSeen', width: 170 }, - { title: '位置', dataIndex: 'locationText' }, - { title: '绑定分', dataIndex: 'bindingScore', width: 90 }, - { title: '操作', render: (_: unknown, row: VehicleRow) => } + { title: '绑定', width: 90, render: (_: unknown, row: VehicleCoverageRow) => {row.bindingStatus === 'bound' ? '已绑定' : '未绑定'} }, + { title: '操作', width: 110, render: (_: unknown, row: VehicleCoverageRow) => } ], [onOpenVehicle] ); return (
- +
load(values as Record)}> - + GB32960 JT808 YUTONG_MQTT + + 单源 + 多源 + + + 在线 + 离线 + + + 已绑定 + 未绑定 +