hikvision-web 1.0.0

package/src/pages/VehicleForm.tsx

@@ -0,0 +1,231 @@
+/**
+ * 车辆表单页面（添加/编辑车辆）
+ * 
+ * 重要概念澄清（2026-05-23）：
+ * - 车辆群组 (car-group)：停车场功能，用于车辆出入控制
+ * - 车辆分类 (category)：系统预置分类（固定车、临时车等）+ 自定义群组
+ * 
+ * 注意：车辆群组仅用于停车场管理，与人员通行无关
+ */
+
+import { useEffect, useState } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { Form, Input, Select, Button, message, Card, Spin, Space } from 'antd';
+import { ArrowLeftOutlined, SaveOutlined, ReloadOutlined } from '@ant-design/icons';
+import { vehicleApi, vehicleGroupApi, personApi } from '../services/api';
+import { SYSTEM_CATEGORY_ID_ARRAY, getCategoryName } from '../utils/constants';
+
+const { Option } = Select;
+
+interface PersonItem {
+  personId: string;
+  personName: string;
+  orgName?: string;
+  jobNo?: string;
+}
+
+interface CarGroup {
+  groupId: string;
+  groupName: string;
+  groupType: '0' | '1';
+  type?: 'system' | 'custom';
+}
+
+export default function VehicleForm() {
+  const { vehicleId } = useParams();
+  const navigate = useNavigate();
+  const isEdit = !!vehicleId;
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [persons, setPersons] = useState<PersonItem[]>([]);
+  const [vehicleGroups, setVehicleGroups] = useState<CarGroup[]>([]);
+
+  useEffect(() => {
+    loadPersons();
+    loadVehicleGroups();
+    if (isEdit && vehicleId) {
+      loadVehicle();
+    }
+  }, [vehicleId]);
+
+  const loadPersons = async () => {
+    try {
+      const result: any = await personApi.list({ pageNo: 1, pageSize: 100 });
+      setPersons((result?.data?.list || result?.list || []).map((p: any) => ({
+        personId: p.personId,
+        personName: p.personName,
+        orgName: p.orgName,
+        jobNo: p.jobNo,
+      })));
+    } catch (error: any) {
+      console.error('加载人员失败:', error);
+    }
+  };
+
+  const loadVehicleGroups = async () => {
+    try {
+      const res: any = await vehicleGroupApi.list();
+      const list = res?.data || res || [];
+      // 添加 type 标识
+      const groupsWithType = (Array.isArray(list) ? list : []).map((g: any) => ({
+        ...g,
+        type: SYSTEM_CATEGORY_ID_ARRAY.includes(g.groupId) ? 'system' as const : 'custom' as const,
+      }));
+      setVehicleGroups(groupsWithType);
+    } catch (error) {
+      console.error('加载车辆群组失败:', error);
+    }
+  };
+
+  const loadVehicle = async () => {
+    if (!vehicleId) return;
+    setLoading(true);
+    try {
+      const data = await vehicleApi.getById(vehicleId);
+      const d = data?.data || data;
+      form.setFieldsValue({
+        plateNo: d.plateNo,
+        vehicleType: d.vehicleType,
+        vehicleColor: d.vehicleColor,
+        vehicleModel: d.vehicleModel,
+        personId: d.personId,
+        groupId: d.vehicleGroup || d.groupId,
+      });
+    } catch (error: any) {
+      message.error(`加载失败: ${error.message || error}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSubmit = async (values: any) => {
+    setSubmitting(true);
+    try {
+      const dto = {
+        plateNo: values.plateNo,
+        vehicleType: values.vehicleType as '0' | '1' | '2' | '3',
+        vehicleColor: values.vehicleColor,
+        vehicleModel: values.vehicleModel,
+        personId: values.personId,
+        groupId: values.groupId,
+      };
+
+      if (isEdit && vehicleId) {
+        await vehicleApi.update(vehicleId, dto);
+        message.success('更新成功');
+        navigate('/vehicle');
+      } else {
+        await vehicleApi.save(dto);
+        message.success('添加成功');
+        navigate('/vehicle');
+      }
+    } catch (error: any) {
+      message.error(`操作失败: ${error.message || error}`);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  // 渲染群组选项
+  const renderGroupOption = (g: CarGroup) => {
+    const label = g.type === 'system' 
+      ? `${g.groupName} (${getCategoryName(g.groupId)})`
+      : g.groupName;
+    return (
+      <Option key={g.groupId} value={g.groupId}>
+        {label}
+      </Option>
+    );
+  };
+
+  // 按类型分组显示
+  const systemGroups = vehicleGroups.filter(g => g.type === 'system');
+  const customGroups = vehicleGroups.filter(g => g.type === 'custom');
+
+  if (loading) {
+    return <div style={{ padding: 40, textAlign: 'center' }}><Spin size="large" /></div>;
+  }
+
+  return (
+    <div>
+      <div style={{ marginBottom: 16, display: 'flex', alignItems: 'center', gap: 8 }}>
+        <Button icon={<ArrowLeftOutlined />} onClick={() => navigate('/vehicle')}>返回</Button>
+        <h2>{isEdit ? '编辑车辆' : '添加车辆'}</h2>
+      </div>
+
+      <Card>
+        <Form
+          form={form}
+          layout="vertical"
+          onFinish={handleSubmit}
+          initialValues={{ vehicleType: '0' }}
+        >
+          <Form.Item
+            name="plateNo"
+            label="车牌号"
+            rules={[{ required: true, message: '请输入车牌号' }]}
+          >
+            <Input placeholder="如：京A12345" />
+          </Form.Item>
+
+          <Form.Item
+            name="vehicleType"
+            label="车辆类型"
+            rules={[{ required: true, message: '请选择车辆类型' }]}
+          >
+            <Select placeholder="请选择车辆类型">
+              <Option value="0">燃油车</Option>
+              <Option value="1">新能源车</Option>
+              <Option value="2">电动车</Option>
+              <Option value="3">其他</Option>
+            </Select>
+          </Form.Item>
+
+          <Form.Item name="vehicleColor" label="颜色">
+            <Input placeholder="如：白色、黑色" />
+          </Form.Item>
+
+          <Form.Item name="vehicleModel" label="品牌型号">
+            <Input placeholder="如：特斯拉 Model 3" />
+          </Form.Item>
+
+          <Form.Item name="personId" label="所属人员">
+            <Select placeholder="选择所属人员" showSearch allowClear>
+              {persons.map((p) => (
+                <Option key={p.personId} value={p.personId}>
+                  {p.personName} - {p.orgName || '-'} {p.jobNo ? `(${p.jobNo})` : ''}
+                </Option>
+              ))}
+            </Select>
+          </Form.Item>
+
+          <Form.Item name="groupId" label="车辆群组/分类">
+            <Select placeholder="选择车辆群组或分类" allowClear>
+              {systemGroups.length > 0 && (
+                <Select.OptGroup label="系统分类">
+                  {systemGroups.map(renderGroupOption)}
+                </Select.OptGroup>
+              )}
+              {customGroups.length > 0 && (
+                <Select.OptGroup label="自定义群组">
+                  {customGroups.map(renderGroupOption)}
+                </Select.OptGroup>
+              )}
+            </Select>
+          </Form.Item>
+
+          <Form.Item style={{ marginTop: 24 }}>
+            <Space>
+              <Button type="primary" htmlType="submit" icon={<SaveOutlined />} loading={submitting}>
+                {isEdit ? '保存修改' : '添加车辆'}
+              </Button>
+              <Button icon={<ReloadOutlined />} onClick={() => form.resetFields()}>重置</Button>
+              <Button onClick={() => navigate('/vehicle')}>取消</Button>
+            </Space>
+          </Form.Item>
+        </Form>
+      </Card>
+    </div>
+  );
+}

package/src/pages/VehicleList.tsx

@@ -0,0 +1,199 @@
+/**
+ * 车辆列表页面
+ */
+
+import { useEffect, useState } from 'react';
+import { Table, Button, Input, Space, Modal, Select, Tag, message } from 'antd';
+import { SearchOutlined, PlusOutlined, EditOutlined, DeleteOutlined, ReloadOutlined } from '@ant-design/icons';
+import { useAppStore } from '../store/appStore';
+import { vehicleApi } from '../services/api';
+import { Link } from 'react-router-dom';
+import { SYSTEM_CATEGORY_ID_ARRAY, getCategoryName } from '../utils/constants';
+
+const { Search } = Input;
+
+export default function VehicleList() {
+  const { vehicles, isVehicleLoading, loadVehicles } = useAppStore();
+
+  const [searchPlate, setSearchPlate] = useState('');
+  const [searchPerson, setSearchPerson] = useState('');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(20);
+  const [deleteModal, setDeleteModal] = useState<{ visible: boolean; vehicleId?: string; plateNo?: string }>({ visible: false });
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      loadVehicles({ pageNo: page, pageSize, plateNo: searchPlate, personName: searchPerson });
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [page, pageSize, searchPlate, searchPerson]);
+
+  const handleSearch = () => {
+    setPage(1);
+    loadVehicles({ pageNo: 1, pageSize, plateNo: searchPlate, personName: searchPerson });
+  };
+
+  const handleDelete = async () => {
+    if (!deleteModal.vehicleId) return;
+    try {
+      await vehicleApi.delete(deleteModal.vehicleId);
+      message.success('删除成功');
+      setDeleteModal({ visible: false });
+      loadVehicles({ pageNo: page, pageSize });
+    } catch (error: any) {
+      message.error(`删除失败: ${error.message || error}`);
+    }
+  };
+
+  const handleRefresh = () => {
+    loadVehicles({ pageNo: page, pageSize, plateNo: searchPlate, personName: searchPerson });
+  };
+
+  // 渲染群组名称
+  const renderGroupName = (record: any) => {
+    const groupId = record.vehicleGroup || record.categoryCode || record.groupId;
+    if (!groupId) return '-';
+    const isSystem = SYSTEM_CATEGORY_ID_ARRAY.includes(groupId);
+    if (isSystem) {
+      return <Tag color="blue">{getCategoryName(groupId)}</Tag>;
+    }
+    const label = record.vehicleGroupName || record.categoryName || record.groupName || groupId;
+    return <Tag color="green">{label}</Tag>;
+  };
+
+  const columns = [
+    {
+      title: '车辆 ID',
+      dataIndex: 'vehicleId',
+      key: 'vehicleId',
+      width: 200,
+      render: (text: string) => <code style={{ fontSize: 12 }}>{text}</code>,
+    },
+    {
+      title: '车牌号',
+      dataIndex: 'plateNo',
+      key: 'plateNo',
+      width: 120,
+    },
+    {
+      title: '车辆类型',
+      dataIndex: 'vehicleType',
+      key: 'vehicleType',
+      width: 80,
+      render: (t: string) => {
+        const map: Record<string, string> = { '0': '燃油车', '1': '新能源车', '2': '电动车', '3': '其他' };
+        return map[t] || t;
+      },
+    },
+    {
+      title: '颜色',
+      dataIndex: 'vehicleColor',
+      key: 'vehicleColor',
+      width: 80,
+    },
+    {
+      title: '品牌型号',
+      dataIndex: 'vehicleModel',
+      key: 'vehicleModel',
+      width: 120,
+    },
+    {
+      title: '所属人员',
+      dataIndex: 'personName',
+      key: 'personName',
+      width: 100,
+    },
+    {
+      title: '群组/分类',
+      dataIndex: 'groupId',
+      key: 'groupId',
+      width: 120,
+      render: ( _: any, record: any) => renderGroupName(record),
+    },
+    {
+      title: '操作',
+      key: 'actions',
+      width: 150,
+      render: (_: any, record: any) => (
+        <Space size="small">
+          <Link to={`/vehicle/edit/${record.vehicleId}`}>
+            <Button type="link" icon={<EditOutlined />} size="small">编辑</Button>
+          </Link>
+          <Button
+            type="link"
+            danger
+            icon={<DeleteOutlined />}
+            size="small"
+            onClick={() => setDeleteModal({ visible: true, vehicleId: record.vehicleId, plateNo: record.plateNo })}
+          >
+            删除
+          </Button>
+        </Space>
+      ),
+    },
+  ];
+
+  return (
+    <div>
+      <div style={{ marginBottom: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <h2 className="page-title" style={{ marginBottom: 0 }}>车辆管理</h2>
+        <Space>
+          <Link to="/vehicle/add">
+            <Button type="primary" icon={<PlusOutlined />}>添加车辆</Button>
+          </Link>
+        </Space>
+      </div>
+
+      <div style={{ marginBottom: 16, display: 'flex', gap: 8, alignItems: 'center' }}>
+        <Search
+          placeholder="搜索车牌号"
+          value={searchPlate}
+          onChange={(e) => setSearchPlate(e.target.value)}
+          onPressEnter={handleSearch}
+          style={{ width: 160 }}
+        />
+        <Input
+          placeholder="搜索人员"
+          value={searchPerson}
+          onChange={(e) => setSearchPerson(e.target.value)}
+          onPressEnter={handleSearch}
+          style={{ width: 160 }}
+        />
+        <Button icon={<SearchOutlined />} onClick={handleSearch}>搜索</Button>
+        <Button icon={<ReloadOutlined />} onClick={handleRefresh}>刷新</Button>
+        <Select
+          value={pageSize}
+          onChange={(v) => { setPageSize(v); setPage(1); }}
+          style={{ width: 100 }}
+          options={[{ value: 10, label: '10/页' }, { value: 20, label: '20/页' }, { value: 50, label: '50/页' }]}
+        />
+      </div>
+
+      <Table
+        columns={columns}
+        dataSource={vehicles}
+        rowKey="vehicleId"
+        loading={isVehicleLoading}
+        pagination={{
+          current: page,
+          pageSize,
+          showSizeChanger: true,
+          showTotal: (t) => `共 ${t} 条`,
+          onChange: (p, ps) => { setPage(p); setPageSize(ps); },
+        }}
+      />
+
+      <Modal
+        title="确认删除"
+        open={deleteModal.visible}
+        onOk={handleDelete}
+        onCancel={() => setDeleteModal({ visible: false })}
+        okText="确认删除"
+        okButtonProps={{ danger: true }}
+      >
+        <p>确定要删除车辆 <strong>{deleteModal.plateNo}</strong> 吗？</p>
+        <p style={{ color: '#ff4d4f' }}>此操作不可撤销！</p>
+      </Modal>
+    </div>
+  );
+}

package/src/services/api.ts

@@ -0,0 +1,128 @@
+/**
+ * API 服务层 - 浏览器端调用 Express API Server
+ */
+
+import axios from 'axios';
+
+const API_BASE = '/api';
+const API_KEY_STORAGE = 'hikvision_api_key';
+
+const apiClient = axios.create({
+  baseURL: API_BASE,
+  timeout: 30000,
+});
+
+apiClient.interceptors.response.use(
+  (response) => response.data,
+  (error) => Promise.reject(error)
+);
+
+// 请求拦截器：自动添加 API Key
+apiClient.interceptors.request.use(async (config) => {
+  const apiKey = localStorage.getItem(API_KEY_STORAGE);
+  if (apiKey) {
+    config.headers['x-api-key'] = apiKey;
+  }
+  return config;
+});
+
+
+// 保存 API Key 到本地存储
+export const saveApiKey = (key: string) => {
+  localStorage.setItem(API_KEY_STORAGE, key);
+};
+
+// 获取 API Key
+export const getApiKey = () => localStorage.getItem(API_KEY_STORAGE) || '';
+
+
+// 清除 API Key
+export const clearApiKey = () => localStorage.removeItem(API_KEY_STORAGE);
+
+// ========== 人员 API ==========
+export const personApi = {
+  list: (params: { pageNo: number; pageSize: number; personName?: string; orgIndexCode?: string }) =>
+    apiClient.get('/persons', { params }),
+  search: (params: { pageNo: number; pageSize: number; personName?: string }) =>
+    apiClient.get('/persons/search', { params: { pageNo: params.pageNo, pageSize: params.pageSize, name: params.personName } }),
+  getById: (personId: string) =>
+    apiClient.get(`/persons/${encodeURIComponent(personId)}`),
+  create: (data: any) => apiClient.post('/persons', data),
+  update: (personId: string, data: any) => apiClient.put(`/persons/${encodeURIComponent(personId)}`, data),
+  delete: (personId: string) => apiClient.delete(`/persons/${encodeURIComponent(personId)}`),
+  batchDelete: (personIds: string[]) => apiClient.post('/persons/batch-delete', { personIds }),
+
+};
+
+// ========== 组织 API ==========
+export const orgApi = {
+  list: () => apiClient.get('/orgs'),
+  getById: (orgIndexCode: string) =>
+    apiClient.get(`/orgs/${encodeURIComponent(orgIndexCode)}`),
+  getRoot: () => apiClient.get('/orgs/root'),
+  getChildren: (orgIndexCode: string) =>
+    apiClient.get(`/orgs/${encodeURIComponent(orgIndexCode)}/children`),
+  create: (data: any) => apiClient.post('/orgs', data),
+  update: (orgIndexCode: string, data: any) =>
+    apiClient.put(`/orgs/${encodeURIComponent(orgIndexCode)}`, data),
+  delete: (orgIndexCodes: string[]) =>
+    apiClient.delete('/orgs', { data: { orgIndexCodes } }),
+  sync: (params: { startTime: string; endTime: string }) =>
+    apiClient.post('/orgs/sync', params),
+};
+
+// ========== 卡片 API ==========
+export const cardApi = {
+  list: (params: { pageNo: number; pageSize: number; plateNo?: string; personName?: string }) =>
+    apiClient.get('/cards', { params }),
+  getByCardNo: (cardNo: string) =>
+    apiClient.get(`/cards/${encodeURIComponent(cardNo)}`),
+  batchIssue: (cards: any[]) => apiClient.post('/cards/issue', { cards }),
+  unbind: (personId: string, cardNo: string) => apiClient.post('/cards/unbind', { personId, cardNo }),
+  unloss: (cardNo: string) => apiClient.post('/cards/unloss', { cardNo }),
+};
+
+// ========== 车辆 API ==========
+export const vehicleApi = {
+  list: (params: { pageNo: number; pageSize: number; plateNo?: string; personName?: string }) =>
+    apiClient.get('/vehicles', { params }),
+  getById: (vehicleId: string) =>
+    apiClient.get(`/vehicles/${encodeURIComponent(vehicleId)}`),
+  save: (data: any) => apiClient.post('/vehicles', data),
+  saveOrUpdate: (data: any) => apiClient.post('/vehicles', data),
+  update: (vehicleId: string, data: any) => apiClient.put(`/vehicles/${encodeURIComponent(vehicleId)}`, data),
+  delete: (vehicleId: string) => apiClient.delete(`/vehicles/${encodeURIComponent(vehicleId)}`),
+};
+
+// ========== 分组 API ==========
+export const vehicleGroupApi = {
+  list: () => apiClient.get('/vehicle-groups'),
+  create: (data: any) => apiClient.post('/vehicle-groups', data),
+  update: (groupId: string, data: any) => apiClient.put(`/vehicle-groups/${encodeURIComponent(groupId)}`, data),
+  delete: (groupId: string) => apiClient.delete(`/vehicle-groups/${encodeURIComponent(groupId)}`),
+};
+
+// ========== 绑定关系 API ==========
+export const bindingApi = {
+  listPersonCardBindings: () => apiClient.get('/bindings/person-card'),
+  listPersonVehicleBindings: () => apiClient.get('/bindings/person-vehicle'),
+  getPersonBindings: (personId: string) => apiClient.get('/persons/' + personId + '/bindings'),
+  bindPersonCard: (personId: string, cardNo: string) => apiClient.post('/bindings/person-card', { personId, cardNo }),
+  unbindPersonCard: (personId: string, cardNo: string) => apiClient.delete(`/bindings/person-card?personId=${personId}&cardNo=${encodeURIComponent(cardNo)}`),
+  bindPersonVehicle: (personId: string, vehicleId: string) => apiClient.post('/bindings/person-vehicle', { personId, vehicleId }),
+  unbindPersonVehicle: (personId: string, vehicleId: string) => apiClient.delete(`/bindings/person-vehicle?personId=${personId}&vehicleId=${encodeURIComponent(vehicleId)}`),
+};
+
+// ========== 同步 API ==========
+export const syncApi = {
+  getStatus: () => apiClient.get('/sync/status'),
+  getRecords: (params: { pageNo: number; pageSize: number }) => apiClient.get('/sync/records', { params }),
+};
+
+// ========== 统计 API ==========
+export const statApi = {
+  getStats: () => apiClient.get('/stats'),
+  getPersonsByOrg: () => apiClient.get('/stats/persons-by-org'),
+  getVehiclesByStatus: () => apiClient.get('/stats/vehicles-by-status'),
+  getCardsByStatus: () => apiClient.get('/stats/cards-by-status'),
+};