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

feat(platform-web): link summary kpis to vehicle filters

Browse Source
This commit is contained in:
lingniu
2026-07-04 03:32:51 +08:00
parent 948dc774d0
commit a2ccc4a498
7 changed files with 141 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
vehicle-data-platform/apps/web/src/pages/Dashboard.tsx
View File

@@ -51,7 +51,7 @@ function rowServiceStatus(row: { serviceStatus?: { title: string; severity: stri
return { label: '服务正常', color: 'green' as const };
}
export function Dashboard({ onOpenVehicle, onOpenQuality }: { onOpenVehicle: (vin: string) => void; onOpenQuality: () => void }) {
export function Dashboard({ onOpenVehicle, onOpenQuality, onOpenVehicles }: { onOpenVehicle: (vin: string) => void; onOpenQuality: () => void; onOpenVehicles: (filters?: Record<string, string>) => void }) {
const [summary, setSummary] = useState<DashboardSummary | null>(null);
const [serviceSummary, setServiceSummary] = useState<VehicleServiceSummary | null>(null);
const [coverage, setCoverage] = useState<VehicleCoverageRow[]>([]);
@@ -95,11 +95,11 @@ export function Dashboard({ onOpenVehicle, onOpenQuality }: { onOpenVehicle: (vi
.finally(() => setLoading(false));
}, []);
const kpis = [
{ label: '总车辆', value: formatCount(serviceSummary?.totalVehicles) },
{ label: '在线车辆', value: formatCount(serviceSummary?.onlineVehicles ?? summary?.onlineVehicles) },
{ label: '多源车辆', value: formatCount(serviceSummary?.multiSourceVehicles) },
{ label: '身份未绑定', value: formatCount(serviceSummary?.identityRequiredVehicles) }
const kpis: Array<{ label: string; value: string; filters: Record<string, string> }> = [
{ label: '总车辆', value: formatCount(serviceSummary?.totalVehicles), filters: {} },
{ label: '在线车辆', value: formatCount(serviceSummary?.onlineVehicles ?? summary?.onlineVehicles), filters: { online: 'online' } },
{ label: '多源车辆', value: formatCount(serviceSummary?.multiSourceVehicles), filters: { coverage: 'multi' } },
{ label: '身份未绑定', value: formatCount(serviceSummary?.identityRequiredVehicles), filters: { serviceStatus: 'identity_required' } }
];
return (
@@ -108,9 +108,11 @@ export function Dashboard({ onOpenVehicle, onOpenQuality }: { onOpenVehicle: (vi
<Spin spinning={loading}>
<div className="vp-kpi-grid">
{kpis.map((item) => (
<Card key={item.label} bordered>
<Card key={item.label} bordered className="vp-kpi-card" bodyStyle={{ padding: 0 }}>
<button className="vp-kpi-button" type="button" onClick={() => onOpenVehicles(item.filters)} aria-label={`${item.label} ${item.value}`}>
<div className="vp-kpi-value">{item.value}</div>
<div className="vp-kpi-label">{item.label}</div>
</button>
</Card>
))}
</div>

11
vehicle-data-platform/apps/web/src/pages/Vehicles.tsx
View File

@@ -28,10 +28,10 @@ function vehicleServiceStatus(row: VehicleCoverageRow) {
return { label: '服务正常', color: 'green' as const };
}
export function Vehicles({ onOpenVehicle }: { onOpenVehicle: (vin: string) => void }) {
export function Vehicles({ onOpenVehicle, initialFilters = {} }: { onOpenVehicle: (vin: string) => void; initialFilters?: Record<string, string> }) {
const [rows, setRows] = useState<VehicleCoverageRow[]>([]);
const [loading, setLoading] = useState(true);
const [filters, setFilters] = useState<Record<string, string>>({});
const [filters, setFilters] = useState<Record<string, string>>(initialFilters);
const [pagination, setPagination] = useState({ currentPage: 1, pageSize: 20, total: 0 });
const load = (values: Record<string, string> = filters, page = pagination.currentPage, pageSize = pagination.pageSize) => {
@@ -52,7 +52,10 @@ export function Vehicles({ onOpenVehicle }: { onOpenVehicle: (vin: string) => vo
.finally(() => setLoading(false));
};
useEffect(() => load(), []);
useEffect(() => {
setFilters(initialFilters);
load(initialFilters, 1, pagination.pageSize);
}, [JSON.stringify(initialFilters)]);
const columns = useMemo(
() => [
@@ -90,7 +93,7 @@ export function Vehicles({ onOpenVehicle }: { onOpenVehicle: (vin: string) => vo
<div className="vp-page">
<PageHeader title="车辆服务" description="以 VIN 为主对象维护车辆身份、数据来源覆盖、在线状态和绑定状态" />
<Card bordered>
<Form layout="horizontal" onSubmit={(values) => {
<Form key={JSON.stringify(filters)} initValues={filters} layout="horizontal" onSubmit={(values) => {
const nextFilters = values as Record<string, string>;
setFilters(nextFilters);
load(nextFilters, 1, pagination.pageSize);