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

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 { VehicleCoverageRow } from '../api/types';
import { DataEmpty } from '../components/DataEmpty';
import { PageHeader } from '../components/PageHeader';
import { StatusTag } from '../components/StatusTag';

function vehicleServiceStatus(row: VehicleCoverageRow) {
  if (row.serviceStatus) {
    return {
      label: row.serviceStatus.title,
      color: row.serviceStatus.severity === 'ok' ? 'green' as const : row.serviceStatus.severity === 'error' ? 'red' as const : 'orange' as const
    };
  }
  if (row.bindingStatus !== 'bound') {
    return { label: '身份未绑定', color: 'orange' as const };
  }
  if (row.sourceCount <= 0) {
    return { label: '暂无数据来源', color: 'orange' as const };
  }
  if (row.onlineSourceCount <= 0) {
    return { label: '车辆离线', color: 'red' as const };
  }
  if (row.onlineSourceCount < row.sourceCount) {
    return { label: '部分来源离线', color: 'orange' as const };
  }
  return { label: '服务正常', color: 'green' as const };
}

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>>(initialFilters);
  const [pagination, setPagination] = useState({ currentPage: 1, pageSize: 20, total: 0 });

  const load = (values: Record<string, string> = filters, page = pagination.currentPage, pageSize = pagination.pageSize) => {
    setLoading(true);
    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);
    if (values?.serviceStatus) params.set('serviceStatus', values.serviceStatus);
    api.vehicleCoverage(params)
      .then((nextPage) => {
        setRows(nextPage.items);
        setPagination({ currentPage: page, pageSize, total: nextPage.total });
      })
      .catch((error: Error) => Toast.error(error.message))
      .finally(() => setLoading(false));
  };

  useEffect(() => {
    setFilters(initialFilters);
    load(initialFilters, 1, pagination.pageSize);
  }, [JSON.stringify(initialFilters)]);

  const columns = useMemo(
    () => [
      { title: 'VIN', dataIndex: 'vin', width: 190 },
      { title: '车牌', dataIndex: 'plate', width: 120 },
      { title: '手机号', dataIndex: 'phone', width: 130 },
      { title: 'OEM', dataIndex: 'oem', width: 120 },
      {
        title: '车辆服务状态',
        width: 130,
        render: (_: unknown, row: VehicleCoverageRow) => {
          const status = vehicleServiceStatus(row);
          return <Tag color={status.color}>{status.label}</Tag>;
        }
      },
      {
        title: '来源',
        width: 240,
        render: (_: unknown, row: VehicleCoverageRow) => (
          <Space spacing={4} wrap>
            {row.protocols.map((protocol) => <Tag key={protocol} color="blue">{protocol}</Tag>)}
          </Space>
        )
      },
      { title: '覆盖', width: 90, render: (_: unknown, row: VehicleCoverageRow) => `${row.onlineSourceCount}/${row.sourceCount}` },
      { title: '在线', width: 90, render: (_: unknown, row: VehicleCoverageRow) => <StatusTag status={row.online ? 'ok' : 'offline'} /> },
      { title: '最后在线', dataIndex: 'lastSeen', width: 170 },
      { title: '绑定', width: 90, render: (_: unknown, row: VehicleCoverageRow) => <Tag color={row.bindingStatus === 'bound' ? 'green' : 'orange'}>{row.bindingStatus === 'bound' ? '已绑定' : '未绑定'}</Tag> },
      { title: '操作', width: 110, render: (_: unknown, row: VehicleCoverageRow) => <Button onClick={() => onOpenVehicle(row.vin)}>车辆服务</Button> }
    ],
    [onOpenVehicle]
  );

  return (
    <div className="vp-page">
      <PageHeader title="车辆服务" description="以 VIN 为主对象维护车辆身份、数据来源覆盖、在线状态和绑定状态" />
      <Card bordered>
        <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);
        }}>
          <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>
            <Select.Option value="JT808">JT808</Select.Option>
            <Select.Option value="YUTONG_MQTT">YUTONG_MQTT</Select.Option>
          </Form.Select>
          <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="serviceStatus" label="服务状态" placeholder="全部" style={{ width: 150 }} data-testid="service-status-filter">
            <Select.Option value="healthy">服务正常</Select.Option>
            <Select.Option value="degraded">部分来源离线</Select.Option>
            <Select.Option value="offline">车辆离线</Select.Option>
            <Select.Option value="identity_required">身份未绑定</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={() => {
              setFilters({});
              load({}, 1, pagination.pageSize);
            }}>重置</Button>
          </Space>
        </Form>
      </Card>
      <Card bordered style={{ marginTop: 16 }}>
        {rows.length === 0 && !loading ? (
          <DataEmpty />
        ) : (
          <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>
  );
}