feat(platform): paginate vehicle coverage

vehicle-data-platform/apps/api/internal/platform/mysql_queries.go

@@ -9,6 +9,8 @@ import (
 type SQLQuery struct {
 	Text      string
 	Args      []any
+	CountText string
+	CountArgs []any
 }
 
 func buildVehicleListSQL(query url.Values) SQLQuery {
@@ -73,11 +75,17 @@ func buildVehicleCoverageSQL(query url.Values) SQLQuery {
 	case "unbound":
 		having = append(having, "MAX(CASE WHEN b.vin IS NOT NULL AND b.vin <> '' THEN 1 ELSE 0 END) = 0")
 	}
+	countArgs := append([]any(nil), args...)
 	args = append(args, limit, offset)
 	havingSQL := ""
 	if len(having) > 0 {
 		havingSQL = ` HAVING ` + strings.Join(having, " AND ") + ` `
 	}
+	groupSQL := `FROM vehicle_realtime_snapshot s ` +
+		`LEFT JOIN vehicle_identity_binding b ON b.vin = s.vin ` +
+		`WHERE ` + strings.Join(where, " AND ") + ` ` +
+		`GROUP BY s.vin, b.plate, b.phone, b.oem, b.vin ` +
+		havingSQL
 	return SQLQuery{
 		Text: `SELECT s.vin, ` +
 			`COALESCE(NULLIF(MAX(NULLIF(s.plate, '')), ''), b.plate, '') AS plate, ` +
@@ -88,13 +96,11 @@ func buildVehicleCoverageSQL(query url.Values) SQLQuery {
 			`CASE WHEN COUNT(DISTINCT CASE WHEN s.updated_at >= DATE_SUB(NOW(), INTERVAL 1 MINUTE) THEN s.protocol END) > 0 THEN 1 ELSE 0 END AS online, ` +
 			`COALESCE(DATE_FORMAT(MAX(s.updated_at), '%Y-%m-%d %H:%i:%s'), '') AS last_seen, ` +
 			`CASE WHEN b.vin IS NOT NULL AND b.vin <> '' THEN 'bound' ELSE 'unbound' END AS binding_status ` +
-			`FROM vehicle_realtime_snapshot s ` +
+			groupSQL +
-			`LEFT JOIN vehicle_identity_binding b ON b.vin = s.vin ` +
+			`ORDER BY MAX(s.updated_at) DESC, s.vin ASC LIMIT ? OFFSET ?`,
-			`WHERE ` + strings.Join(where, " AND ") + ` ` +
-			`GROUP BY s.vin, b.plate, b.phone, b.oem, b.vin ` +
-			havingSQL +
-			`ORDER BY MAX(s.updated_at) DESC LIMIT ? OFFSET ?`,
 		Args:      args,
+		CountText: `SELECT COUNT(*) FROM (SELECT s.vin ` + groupSQL + `) vehicle_coverage_count`,
+		CountArgs: countArgs,
 	}
 }
 

vehicle-data-platform/apps/api/internal/platform/production_store.go

@@ -91,6 +91,12 @@ func (s *ProductionStore) Vehicles(ctx context.Context, query url.Values) (Page[
 
 func (s *ProductionStore) VehicleCoverage(ctx context.Context, query url.Values) (Page[VehicleCoverageRow], error) {
 	built := buildVehicleCoverageSQL(query)
+	total := 0
+	if built.CountText != "" {
+		if err := s.db.QueryRowContext(ctx, built.CountText, built.CountArgs...).Scan(&total); err != nil {
+			return Page[VehicleCoverageRow]{}, err
+		}
+	}
 	rows, err := s.db.QueryContext(ctx, built.Text, built.Args...)
 	if err != nil {
 		return Page[VehicleCoverageRow]{}, err
@@ -112,7 +118,10 @@ func (s *ProductionStore) VehicleCoverage(ctx context.Context, query url.Values)
 		return Page[VehicleCoverageRow]{}, err
 	}
 	limit, offset := buildLimitOffset(query)
-	return Page[VehicleCoverageRow]{Items: items, Total: len(items), Limit: limit, Offset: offset}, nil
+	if built.CountText == "" {
+		total = len(items)
+	}
+	return Page[VehicleCoverageRow]{Items: items, Total: total, Limit: limit, Offset: offset}, nil
 }
 
 func (s *ProductionStore) RealtimeLocations(ctx context.Context, query url.Values) (Page[RealtimeLocationRow], error) {

vehicle-data-platform/apps/api/internal/platform/query_builders_test.go

@@ -22,7 +22,7 @@ func TestBuildVehicleListSQL(t *testing.T) {
 func TestBuildVehicleCoverageSQL(t *testing.T) {
 	query := url.Values{"keyword": {"粤A"}, "protocol": {"GB32960"}, "coverage": {"multi"}, "online": {"online"}, "bindingStatus": {"bound"}, "limit": {"8"}, "offset": {"16"}}
 	built := buildVehicleCoverageSQL(query)
-	for _, want := range []string{"GROUP BY s.vin", "HAVING", "GROUP_CONCAT(DISTINCT s.protocol", "source_count", "online_source_count"} {
+	for _, want := range []string{"GROUP BY s.vin", "HAVING", "GROUP_CONCAT(DISTINCT s.protocol", "source_count", "online_source_count", "ORDER BY MAX(s.updated_at) DESC, s.vin ASC"} {
 		if !strings.Contains(built.Text, want) {
 			t.Fatalf("SQL missing %q: %s", want, built.Text)
 		}
@@ -30,9 +30,15 @@ func TestBuildVehicleCoverageSQL(t *testing.T) {
 	if strings.Contains(built.Text, "1ORDER BY") || strings.Contains(built.Text, "0ORDER BY") {
 		t.Fatalf("SQL should keep whitespace before ORDER BY: %s", built.Text)
 	}
+	if !strings.Contains(built.CountText, "vehicle_coverage_count") || !strings.Contains(built.CountText, "HAVING") {
+		t.Fatalf("count SQL = %s", built.CountText)
+	}
 	if len(built.Args) != 9 || built.Args[0] != "%粤A%" || built.Args[6] != "GB32960" || built.Args[7] != 8 || built.Args[8] != 16 {
 		t.Fatalf("args = %#v", built.Args)
 	}
+	if len(built.CountArgs) != 7 || built.CountArgs[0] != "%粤A%" || built.CountArgs[6] != "GB32960" {
+		t.Fatalf("count args = %#v", built.CountArgs)
+	}
 }
 
 func TestBuildDailyMileageSQL(t *testing.T) {

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

@@ -9,17 +9,22 @@ import { StatusTag } from '../components/StatusTag';
 export function Vehicles({ onOpenVehicle }: { onOpenVehicle: (vin: string) => void }) {
   const [rows, setRows] = useState<VehicleCoverageRow[]>([]);
   const [loading, setLoading] = useState(true);
+  const [filters, setFilters] = useState<Record<string, string>>({});
+  const [pagination, setPagination] = useState({ currentPage: 1, pageSize: 20, total: 0 });
 
-  const load = (values?: Record<string, string>) => {
+  const load = (values: Record<string, string> = filters, page = pagination.currentPage, pageSize = pagination.pageSize) => {
     setLoading(true);
-    const params = new URLSearchParams({ limit: '20' });
+    const params = new URLSearchParams({ limit: String(pageSize), offset: String((page - 1) * pageSize) });
     if (values?.keyword) params.set('keyword', values.keyword);
     if (values?.protocol) params.set('protocol', values.protocol);
     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))
+      .then((nextPage) => {
+        setRows(nextPage.items);
+        setPagination({ currentPage: page, pageSize, total: nextPage.total });
+      })
       .catch((error: Error) => Toast.error(error.message))
       .finally(() => setLoading(false));
   };
@@ -54,7 +59,11 @@ export function Vehicles({ onOpenVehicle }: { onOpenVehicle: (vin: string) => vo
     <div className="vp-page">
       <PageHeader title="车辆台账" description="以 VIN 为主对象维护车辆身份、多源覆盖、在线状态和绑定状态" />
       <Card bordered>
-        <Form layout="horizontal" onSubmit={(values) => load(values as Record<string, string>)}>
+        <Form layout="horizontal" onSubmit={(values) => {
+          const nextFilters = values as Record<string, string>;
+          setFilters(nextFilters);
+          load(nextFilters, 1, pagination.pageSize);
+        }}>
           <Form.Input field="keyword" label="关键词" placeholder="VIN / 车牌 / 手机号 / OEM" style={{ width: 260 }} />
           <Form.Select field="protocol" label="协议" placeholder="全部协议" style={{ width: 180 }}>
             <Select.Option value="GB32960">GB32960</Select.Option>
@@ -75,7 +84,10 @@ export function Vehicles({ onOpenVehicle }: { onOpenVehicle: (vin: string) => vo
           </Form.Select>
           <Space>
             <Button htmlType="submit" theme="solid" type="primary">查询</Button>
-            <Button onClick={() => load()}>重置</Button>
+            <Button onClick={() => {
+              setFilters({});
+              load({}, 1, pagination.pageSize);
+            }}>重置</Button>
           </Space>
         </Form>
       </Card>
@@ -83,7 +95,20 @@ export function Vehicles({ onOpenVehicle }: { onOpenVehicle: (vin: string) => vo
         {rows.length === 0 && !loading ? (
           <DataEmpty />
         ) : (
-          <Table loading={loading} rowKey="vin" dataSource={rows} columns={columns} pagination={false} />
+          <Table
+            loading={loading}
+            rowKey="vin"
+            dataSource={rows}
+            columns={columns}
+            pagination={{
+              currentPage: pagination.currentPage,
+              pageSize: pagination.pageSize,
+              total: pagination.total,
+              showSizeChanger: true,
+              onPageChange: (page) => load(filters, page, pagination.pageSize),
+              onPageSizeChange: (pageSize) => load(filters, 1, pageSize)
+            }}
+          />
         )}
       </Card>
     </div>