feat(platform): filter vehicle coverage
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import { Button, Card, Col, Row, 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 { api } from '../api/client';
|
||||
import type { DashboardSummary, LinkHealth, ProtocolStat, RealtimeLocationRow, VehicleCoverageRow, VehicleRow } from '../api/types';
|
||||
@@ -17,6 +17,20 @@ export function Dashboard({ onOpenVehicle }: { onOpenVehicle: (vin: string) => v
|
||||
const [coverage, setCoverage] = useState<VehicleCoverageRow[]>([]);
|
||||
const [locations, setLocations] = useState<RealtimeLocationRow[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [coverageLoading, setCoverageLoading] = useState(false);
|
||||
|
||||
const loadCoverage = (values?: Record<string, string>) => {
|
||||
setCoverageLoading(true);
|
||||
const params = new URLSearchParams({ limit: '8' });
|
||||
if (values?.keyword) params.set('keyword', values.keyword);
|
||||
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) => setCoverage(page.items))
|
||||
.catch((error: Error) => Toast.error(error.message))
|
||||
.finally(() => setCoverageLoading(false));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
Promise.all([
|
||||
@@ -93,7 +107,27 @@ export function Dashboard({ onOpenVehicle }: { onOpenVehicle: (vin: string) => v
|
||||
<Typography.Text>Kafka 当前消费积压:{summary?.kafkaLag ?? 0}</Typography.Text>
|
||||
</Card>
|
||||
<Card title="车辆服务覆盖" bordered style={{ marginTop: 16 }}>
|
||||
<Form layout="horizontal" onSubmit={(values) => loadCoverage(values as Record<string, string>)} style={{ marginBottom: 12 }}>
|
||||
<Form.Input field="keyword" label="关键词" placeholder="VIN / 车牌 / 手机号 / OEM" style={{ width: 240 }} />
|
||||
<Form.Select field="coverage" label="来源覆盖" placeholder="全部" style={{ width: 130 }}>
|
||||
<Select.Option value="single">单源</Select.Option>
|
||||
<Select.Option value="multi">多源</Select.Option>
|
||||
</Form.Select>
|
||||
<Form.Select field="online" label="在线" placeholder="全部" style={{ width: 130 }}>
|
||||
<Select.Option value="online">在线</Select.Option>
|
||||
<Select.Option value="offline">离线</Select.Option>
|
||||
</Form.Select>
|
||||
<Form.Select field="bindingStatus" label="绑定" placeholder="全部" style={{ width: 130 }}>
|
||||
<Select.Option value="bound">已绑定</Select.Option>
|
||||
<Select.Option value="unbound">未绑定</Select.Option>
|
||||
</Form.Select>
|
||||
<Space>
|
||||
<Button htmlType="submit" theme="solid" type="primary">筛选</Button>
|
||||
<Button onClick={() => loadCoverage()}>重置</Button>
|
||||
</Space>
|
||||
</Form>
|
||||
<Table
|
||||
loading={coverageLoading}
|
||||
pagination={false}
|
||||
rowKey="vin"
|
||||
dataSource={coverage}
|
||||
|
||||
Reference in New Issue
Block a user