d29e2a821b
列表页增强 KPI 看板、筛选与批量导出/上传及 PRD；维护能力拆至证照管理-编辑页，支持八类证照分卡保存与 OCR 校验。 Co-authored-by: Cursor <cursoragent@cursor.com>
3094 lines
120 KiB
JavaScript
3094 lines
120 KiB
JavaScript
// 【重要】必须使用 const Component 作为组件变量名
|
||
// 运维管理 - 车辆业务 - 证照管理（台账列表页）
|
||
|
||
const { useState, useEffect, useMemo, useRef } = React;
|
||
const moment = window.moment || window.dayjs;
|
||
const antd = window.antd;
|
||
const {
|
||
Form,
|
||
Input,
|
||
Select,
|
||
Button,
|
||
DatePicker,
|
||
Card,
|
||
Row,
|
||
Col,
|
||
Space,
|
||
Badge,
|
||
Alert,
|
||
InputNumber,
|
||
Divider,
|
||
Switch,
|
||
Spin,
|
||
Tooltip,
|
||
Modal,
|
||
Progress,
|
||
Popover,
|
||
Tabs,
|
||
Table,
|
||
Tag,
|
||
message,
|
||
Checkbox,
|
||
Upload
|
||
} = antd;
|
||
|
||
const CERT_EXPORT_OPTIONS = [
|
||
{ key: 'driverLicense', label: '行驶证', folder: '行驶证' },
|
||
{ key: 'transportLicense', label: '道路运输证', folder: '道路运输证' },
|
||
{ key: 'registrationCert', label: '登记证', folder: '登记证' },
|
||
{ key: 'specialEquipCert', label: '特种设备使用登记证', folder: '特种设备使用登记证' },
|
||
{ key: 'specialEquipDecal', label: '特种设备使用标识', folder: '特种设备使用标识' },
|
||
{ key: 'safetyValve', label: '安全阀', folder: '安全阀' },
|
||
{ key: 'pressureGauge', label: '压力表', folder: '压力表' }
|
||
];
|
||
|
||
const BATCH_UPLOAD_CERT_OPTIONS = [
|
||
{ key: 'driverLicense', label: '行驶证' },
|
||
{ key: 'transportLicense', label: '道路运输证' },
|
||
{ key: 'registrationCert', label: '登记证', photoOnly: true },
|
||
{ key: 'specialEquipCert', label: '特种设备使用登记证', photoOnly: true },
|
||
{ key: 'specialEquipDecal', label: '特种设备使用标识' }
|
||
];
|
||
|
||
const isBatchUploadPhotoOnlyType = (certType) => (
|
||
BATCH_UPLOAD_CERT_OPTIONS.find((o) => o.key === certType)?.photoOnly === true
|
||
);
|
||
|
||
const BATCH_UPLOAD_OPERATOR = '张明辉';
|
||
|
||
const LC_LICENSES_STORAGE_KEY = 'oneos_lc_licenses_v1';
|
||
const LC_EDIT_PLATE_KEY = 'oneos_lc_edit_plate';
|
||
const LC_NAV_TARGET_KEY = 'oneos_lc_navigate_target';
|
||
const LC_NAV_EVENT = 'oneos-lc-return-list';
|
||
|
||
const loadLicensesFromStorage = () => {
|
||
try {
|
||
const raw = localStorage.getItem(LC_LICENSES_STORAGE_KEY);
|
||
if (!raw) return null;
|
||
const parsed = JSON.parse(raw);
|
||
return parsed && typeof parsed === 'object' ? parsed : null;
|
||
} catch {
|
||
return null;
|
||
}
|
||
};
|
||
|
||
const persistLicensesToStorage = (data) => {
|
||
try {
|
||
localStorage.setItem(LC_LICENSES_STORAGE_KEY, JSON.stringify(data));
|
||
} catch {
|
||
/* ignore */
|
||
}
|
||
};
|
||
|
||
const goLicenseEditPage = (plateNo, master) => {
|
||
try {
|
||
sessionStorage.setItem(LC_EDIT_PLATE_KEY, plateNo);
|
||
persistLicensesToStorage(master);
|
||
} catch {
|
||
/* ignore */
|
||
}
|
||
if (typeof window.__axhubNavigate === 'function') {
|
||
window.__axhubNavigate('证照管理-编辑');
|
||
message.success(`已进入 [${plateNo}] 资质维护`);
|
||
return;
|
||
}
|
||
message.info(`已带入 [${plateNo}] 车辆信息，请打开「证照管理-编辑」页面继续维护`);
|
||
};
|
||
|
||
|
||
/** 列表「证件状态」列：八类证照，双行四列展示 */
|
||
const LIST_CERT_STATUS_ITEMS = [
|
||
{ key: 'driverLicense', label: '行驶证', fullLabel: '行驶证' },
|
||
{ key: 'transportLicense', label: '运输证', fullLabel: '道路运输证', mergedTransport: true },
|
||
{ key: 'registrationCert', label: '登记', fullLabel: '机动车登记证书' },
|
||
{ key: 'specialEquipCert', label: '特种', fullLabel: '特种设备使用登记证' },
|
||
{ key: 'specialEquipDecal', label: '特设标', fullLabel: '特种设备使用标识' },
|
||
{ key: 'hydrogenCard', label: '加氢卡', fullLabel: '加氢卡' },
|
||
{ key: 'safetyValve', label: '安全阀', fullLabel: '安全阀检验' },
|
||
{ key: 'pressureGauge', label: '压力表', fullLabel: '压力表检验' }
|
||
];
|
||
|
||
/** 列表表头：过长标题拆为多行，收窄列宽便于一屏展示 */
|
||
const tableTitleMultiline = (...lines) => (
|
||
<div className="lc-table-th-multiline">
|
||
{lines.map((line, idx) => (
|
||
<span key={idx} className="lc-table-th-line">{line}</span>
|
||
))}
|
||
</div>
|
||
);
|
||
|
||
const listColumnHeaderCell = () => ({ className: 'lc-th-wrap' });
|
||
|
||
const BATCH_EXPORT_RULE_LINES = [
|
||
'按当前筛选条件（含 KPI 看板筛选）导出，勾选证照类型各生成一个文件夹，最终打包为 ZIP。',
|
||
'文件夹内文件以车牌号命名；仅 1 张影像时为「车牌号.jpg」，多张依次为「车牌号-1」「车牌号-2」……'
|
||
];
|
||
|
||
/** 批量导出影像命名：单张=车牌号，多张=车牌号-序号 */
|
||
const buildExportPhotoBaseName = (plateNo, index, total) => {
|
||
if (total <= 1) return plateNo;
|
||
return `${plateNo}-${index + 1}`;
|
||
};
|
||
|
||
/** 列表排序：退出运营车辆置底，组内保持原台账顺序 */
|
||
const sortVehiclesRetiredLast = (vehicles) => {
|
||
const active = [];
|
||
const retired = [];
|
||
vehicles.forEach((v) => {
|
||
if (v.status === '退出运营') retired.push(v);
|
||
else active.push(v);
|
||
});
|
||
return [...active, ...retired];
|
||
};
|
||
|
||
/** 多车牌：优先按行解析，单行内仍支持逗号分隔 */
|
||
const parseMultiPlates = (text) => {
|
||
const raw = (text || '').trim();
|
||
if (!raw) return [];
|
||
const lines = raw.split(/\r?\n/).map((line) => line.trim()).filter(Boolean);
|
||
const expanded = lines.flatMap((line) => {
|
||
if (/[,，、;；]/.test(line)) {
|
||
return line.split(/[,，、;；]+/).map((s) => s.trim()).filter(Boolean);
|
||
}
|
||
return [line];
|
||
});
|
||
return [...new Set(expanded.map((s) => s.toUpperCase()))];
|
||
};
|
||
|
||
const loadJsZip = () => new Promise((resolve, reject) => {
|
||
if (typeof window !== 'undefined' && window.JSZip) {
|
||
resolve(window.JSZip);
|
||
return;
|
||
}
|
||
const script = document.createElement('script');
|
||
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js';
|
||
script.async = true;
|
||
script.onload = () => (window.JSZip ? resolve(window.JSZip) : reject(new Error('JSZip load failed')));
|
||
script.onerror = () => reject(new Error('JSZip script error'));
|
||
document.head.appendChild(script);
|
||
});
|
||
|
||
const fetchImageBlob = async (url) => {
|
||
try {
|
||
const res = await fetch(url, { mode: 'cors' });
|
||
if (!res.ok) return null;
|
||
return await res.blob();
|
||
} catch {
|
||
return null;
|
||
}
|
||
};
|
||
|
||
const downloadBlobFile = (blob, filename) => {
|
||
const a = document.createElement('a');
|
||
a.href = URL.createObjectURL(blob);
|
||
a.download = filename;
|
||
a.click();
|
||
URL.revokeObjectURL(a.href);
|
||
};
|
||
|
||
const formatExportFilename = () => {
|
||
const d = new Date();
|
||
const pad = (n) => String(n).padStart(2, '0');
|
||
return `${d.getFullYear()}${pad(d.getMonth() + 1)}${pad(d.getDate())}_${pad(d.getHours())}${pad(d.getMinutes())}`;
|
||
};
|
||
|
||
const normalizePlateNo = (plate) => (plate || '').trim().toUpperCase();
|
||
|
||
const findVehicleByPlate = (plate) => {
|
||
const key = normalizePlateNo(plate);
|
||
return MOCK_VEHICLES.find((v) => normalizePlateNo(v.plateNo) === key) || null;
|
||
};
|
||
|
||
/** 批量 OCR：识别车牌须在证照台账中存在，否则视为校验失败 */
|
||
const validateBatchOcrPlate = (ocrPlateNo) => {
|
||
const normalized = normalizePlateNo(ocrPlateNo);
|
||
if (!normalized) {
|
||
return { plateValid: false, ocrPlateNo: '', matchedPlateNo: '', plateError: '未识别到车牌号，请更换清晰照片后重试' };
|
||
}
|
||
const vehicle = findVehicleByPlate(normalized);
|
||
if (!vehicle) {
|
||
return {
|
||
plateValid: false,
|
||
ocrPlateNo: normalized,
|
||
matchedPlateNo: '',
|
||
plateError: `识别车牌「${normalized}」与证照台账不一致，请核对照片是否为台账车辆证照`
|
||
};
|
||
}
|
||
return { plateValid: true, ocrPlateNo: vehicle.plateNo, matchedPlateNo: vehicle.plateNo, plateError: '' };
|
||
};
|
||
|
||
const buildMockBatchOcrItem = (certType, photoIndex) => {
|
||
const samplePlate = MOCK_VEHICLES[photoIndex % MOCK_VEHICLES.length]?.plateNo || '沪A00000';
|
||
const isMismatch = Math.random() < 0.2;
|
||
const rawOcrPlate = isMismatch ? '京A88888' : samplePlate;
|
||
const plateCheck = validateBatchOcrPlate(rawOcrPlate);
|
||
|
||
if (certType === 'driverLicense') {
|
||
const fields = {
|
||
regDate: '2024-06-05',
|
||
issueDate: '2024-06-05',
|
||
scrapDate: '2039-06-04',
|
||
expireDate: '2026-06-30',
|
||
updateType: '批量上传'
|
||
};
|
||
return { ...plateCheck, fields };
|
||
}
|
||
if (certType === 'transportLicense') {
|
||
return {
|
||
...plateCheck,
|
||
fields: {
|
||
licenseNo: '交字310115582910号',
|
||
issueDate: '2024-08-15',
|
||
expireDate: '2026-08-31',
|
||
inspectValidUntil: '2026-07-31'
|
||
}
|
||
};
|
||
}
|
||
if (certType === 'registrationCert' || certType === 'specialEquipCert') {
|
||
return { ...plateCheck, fields: {} };
|
||
}
|
||
if (certType === 'specialEquipDecal') {
|
||
return {
|
||
...plateCheck,
|
||
fields: { nextInspectDate: '2027-05-20' }
|
||
};
|
||
}
|
||
return { ...plateCheck, fields: {} };
|
||
};
|
||
|
||
const countBatchOcrResults = (results) => {
|
||
if (!results || !results.length) return { ocrSuccessCount: 0, ocrFailCount: 0 };
|
||
const ocrSuccessCount = results.filter((r) => r.plateValid).length;
|
||
return { ocrSuccessCount, ocrFailCount: results.length - ocrSuccessCount };
|
||
};
|
||
|
||
/** 按车牌聚合识别结果，逐张确认时每组对应一个车牌及其全部照片 */
|
||
const buildOcrConfirmGroups = (results) => {
|
||
const order = [];
|
||
const map = new Map();
|
||
(results || []).forEach((item, sourceIndex) => {
|
||
const plateKey = item.plateValid
|
||
? normalizePlateNo(item.matchedPlateNo || item.ocrPlateNo)
|
||
: `__invalid__${sourceIndex}`;
|
||
if (!map.has(plateKey)) {
|
||
map.set(plateKey, {
|
||
plateNo: item.matchedPlateNo || item.ocrPlateNo || '',
|
||
plateValid: !!item.plateValid,
|
||
items: [],
|
||
fields: { ...(item.fields || {}) }
|
||
});
|
||
order.push(plateKey);
|
||
}
|
||
const group = map.get(plateKey);
|
||
group.items.push({ ...item, sourceIndex });
|
||
if (item.fields) Object.assign(group.fields, item.fields);
|
||
});
|
||
return order.map((k) => map.get(k));
|
||
};
|
||
|
||
const createEmptyLicenseRecord = () => ({
|
||
driverLicense: { photos: [], regDate: '', issueDate: '', scrapDate: '', expireDate: '', updateType: '直接上传', updateTime: '', updateUser: '' },
|
||
transportLicense: { photos: [], licenseNo: '', issueDate: '', expireDate: '', inspectValidUntil: '', updateTime: '', updateUser: '' },
|
||
registrationCert: { photos: [] },
|
||
specialEquipCert: { photos: [] },
|
||
specialEquipDecal: { photos: [], nextInspectDate: '', updateTime: '', updateUser: '' },
|
||
hydrogenCard: { cardNo: '', cardType: '中石化加氢卡', balance: 0, issueDate: '', issueUser: '' },
|
||
safetyValve: { photos: [], inspectDate: '', nextInspectDate: '' },
|
||
pressureGauge: { photos: [], inspectDate: '', nextInspectDate: '' }
|
||
});
|
||
|
||
const applyBatchOcrGroupToCert = (existingCert, certType, group, operator) => {
|
||
const photos = group.items.map((it) => it.photoUrl).filter(Boolean);
|
||
const f = group.fields || {};
|
||
const now = new Date().toLocaleString('zh-CN', { hour12: false });
|
||
const base = existingCert ? JSON.parse(JSON.stringify(existingCert)) : {};
|
||
|
||
if (certType === 'driverLicense') {
|
||
const maxPhotos = photos.slice(0, 4);
|
||
return {
|
||
...base,
|
||
photos: maxPhotos,
|
||
regDate: f.regDate || base.regDate || '',
|
||
issueDate: f.issueDate || base.issueDate || '',
|
||
scrapDate: f.scrapDate || base.scrapDate || '',
|
||
expireDate: f.expireDate || base.expireDate || '',
|
||
updateType: f.updateType || '批量上传',
|
||
updateTime: now,
|
||
updateUser: operator || base.updateUser || ''
|
||
};
|
||
}
|
||
if (certType === 'transportLicense') {
|
||
return {
|
||
...base,
|
||
photos: photos.length ? photos.slice(0, 1) : base.photos || [],
|
||
licenseNo: f.licenseNo || base.licenseNo || '',
|
||
issueDate: f.issueDate || base.issueDate || '',
|
||
expireDate: f.expireDate || base.expireDate || '',
|
||
inspectValidUntil: f.inspectValidUntil || base.inspectValidUntil || '',
|
||
updateTime: now,
|
||
updateUser: operator || base.updateUser || ''
|
||
};
|
||
}
|
||
if (certType === 'specialEquipDecal') {
|
||
return {
|
||
...base,
|
||
photos: photos.length ? photos : base.photos || [],
|
||
nextInspectDate: f.nextInspectDate || base.nextInspectDate || '',
|
||
updateTime: now,
|
||
updateUser: operator || base.updateUser || ''
|
||
};
|
||
}
|
||
if (certType === 'registrationCert') {
|
||
return {
|
||
...base,
|
||
photos: photos.length ? photos : base.photos || []
|
||
};
|
||
}
|
||
if (certType === 'specialEquipCert') {
|
||
return {
|
||
...base,
|
||
photos: photos.length ? photos.slice(0, 1) : base.photos || []
|
||
};
|
||
}
|
||
return base;
|
||
};
|
||
|
||
// 常用矢量图标，保证 100% 渲染且支持高保真样式
|
||
const ICONS = {
|
||
ocr: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 22V4c0-.5.2-1 .6-1.4C5 2.2 5.5 2 6 2h12c.5 0 1 .2 1.4.6.4.4.6.9.6 1.4v18l-5-4-5 4-5-4-5 4z"/></svg>,
|
||
upload: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>,
|
||
camera: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>,
|
||
warning: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>,
|
||
card: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>,
|
||
success: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>,
|
||
delete: <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>,
|
||
shield: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>,
|
||
vehicle: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="1" y="3" width="15" height="13"/><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>,
|
||
edit: <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4z"/></svg>,
|
||
filter: <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
|
||
};
|
||
|
||
// 预设的车辆列表（扩充至 5 辆以完美支持台账数据测试）
|
||
const MOCK_VEHICLES = [
|
||
{ plateNo: '沪A03561F', brand: '宇通', model: '49吨牵引车头', vin: 'LMRKH9AC0R1004086', status: '自营' },
|
||
{ plateNo: '粤B58888F', brand: '福田', model: '奥铃4.5吨冷藏车', vin: 'LGHXCAE28M6789012', status: '租赁' },
|
||
{ plateNo: '苏E33333', brand: '陕汽', model: '德龙X3000混动牵引车', vin: 'LSXCH9AE8M1094857', status: '自营' },
|
||
{ plateNo: '京A12345', brand: '东风', model: 'DFH1180厢式货车', vin: 'LKLG7C4E4NA774759', status: '退出运营' },
|
||
{ plateNo: '浙A88888', brand: '宇通', model: '氢燃料电池大巴', vin: 'LMRKH9AE2P9876543', status: '库存' }
|
||
];
|
||
|
||
// 模拟预设的所有车辆证照档案数据库
|
||
const INITIAL_LICENSE_DATA = {
|
||
'沪A03561F': {
|
||
driverLicense: {
|
||
photos: ['https://picsum.photos/seed/license1/600/400', 'https://picsum.photos/seed/license2/600/400'],
|
||
regDate: '2024-06-05',
|
||
issueDate: '2024-06-05',
|
||
scrapDate: '2039-06-04',
|
||
expireDate: '2026-06-30', // 行驶证 29 天后到期（临期警告）
|
||
updateType: '直接上传',
|
||
updateTime: '2026-05-28 14:32:00',
|
||
updateUser: '李明辉',
|
||
shNextEvaluation: '2026-12-05'
|
||
},
|
||
transportLicense: {
|
||
photos: ['https://picsum.photos/seed/transport/600/400'],
|
||
licenseNo: '交字310115102345号',
|
||
issueDate: '2024-07-12',
|
||
expireDate: '2026-07-31', // 证件有效期 60 天后到期（临期临界）
|
||
inspectValidUntil: '2026-07-20', // 审验有效期 49 天后（临期）
|
||
updateTime: '2026-05-10 11:20:00',
|
||
updateUser: '陈高伟'
|
||
},
|
||
registrationCert: { photos: ['https://picsum.photos/seed/regcert1/600/400'] },
|
||
specialEquipCert: { photos: ['https://picsum.photos/seed/spec1/600/400'] },
|
||
specialEquipDecal: { photos: ['https://picsum.photos/seed/spec2/600/400'], nextInspectDate: '2027-05-20' },
|
||
hydrogenCard: { cardNo: 'H2-9988-7766-5544', cardType: '中石化加氢卡', balance: 12850.50, issueDate: '2025-01-15 14:30', issueUser: '能源管理部-张晓' },
|
||
safetyValve: { photos: ['https://picsum.photos/seed/valve/600/400'], inspectDate: '2025-10-10', nextInspectDate: '2026-10-09' },
|
||
pressureGauge: { photos: ['https://picsum.photos/seed/gauge/600/400'], inspectDate: '2025-12-15', nextInspectDate: '2026-06-14' }
|
||
},
|
||
'粤B58888F': {
|
||
driverLicense: { photos: [], regDate: '', issueDate: '', scrapDate: '', expireDate: '', updateType: '直接上传', updateTime: '', updateUser: '' },
|
||
transportLicense: {
|
||
photos: ['https://picsum.photos/seed/trans_ocr/600/400'],
|
||
licenseNo: '粤字440301102947号',
|
||
issueDate: '2024-07-20',
|
||
expireDate: '2026-07-20',
|
||
inspectValidUntil: '2026-08-15',
|
||
updateTime: '2026-05-15 09:30:00',
|
||
updateUser: '黄志杰'
|
||
},
|
||
registrationCert: { photos: [] },
|
||
specialEquipCert: { photos: [] },
|
||
specialEquipDecal: { photos: [], nextInspectDate: '' },
|
||
hydrogenCard: { cardNo: 'H2-5566-4433-2211', cardType: '中石化加氢卡', balance: 5200.00, issueDate: '2025-03-10 10:15', issueUser: '能源管理部-张晓' },
|
||
safetyValve: { photos: [], inspectDate: '', nextInspectDate: '' },
|
||
pressureGauge: { photos: [], inspectDate: '', nextInspectDate: '' }
|
||
},
|
||
'京A12345': {
|
||
driverLicense: { photos: [], regDate: '', issueDate: '', scrapDate: '', expireDate: '', updateType: '直接上传', updateTime: '', updateUser: '' },
|
||
transportLicense: { photos: [], licenseNo: '', issueDate: '', expireDate: '', inspectValidUntil: '', updateTime: '', updateUser: '' },
|
||
registrationCert: { photos: [] },
|
||
specialEquipCert: { photos: [] },
|
||
specialEquipDecal: { photos: [], nextInspectDate: '' },
|
||
hydrogenCard: { cardNo: '', cardType: '中石化加氢卡', balance: 0, issueDate: '', issueUser: '' },
|
||
safetyValve: { photos: [], inspectDate: '', nextInspectDate: '' },
|
||
pressureGauge: { photos: [], inspectDate: '', nextInspectDate: '' }
|
||
},
|
||
'苏E33333': {
|
||
driverLicense: {
|
||
photos: ['https://picsum.photos/seed/su_lic/600/400'],
|
||
regDate: '2024-05-16',
|
||
issueDate: '2024-05-16',
|
||
scrapDate: '2039-05-15',
|
||
expireDate: '2026-05-15', // 已过期（逾期 17 天）
|
||
updateType: '直接上传',
|
||
updateTime: '2026-05-01 10:00:00',
|
||
updateUser: '王东东'
|
||
},
|
||
transportLicense: {
|
||
photos: ['https://picsum.photos/seed/su_trans/600/400'],
|
||
licenseNo: '苏字320501104829号',
|
||
issueDate: '2024-08-10',
|
||
expireDate: '2026-08-10',
|
||
inspectValidUntil: '2026-08-10',
|
||
updateTime: '2026-05-12 15:40:00',
|
||
updateUser: '王东东'
|
||
},
|
||
registrationCert: { photos: [] },
|
||
specialEquipCert: { photos: [] },
|
||
specialEquipDecal: { photos: [], nextInspectDate: '' },
|
||
hydrogenCard: { cardNo: '', cardType: '中石化加氢卡', balance: 0, issueDate: '', issueUser: '' },
|
||
safetyValve: { photos: [], inspectDate: '', nextInspectDate: '' },
|
||
pressureGauge: { photos: [], inspectDate: '', nextInspectDate: '' }
|
||
},
|
||
'浙A88888': {
|
||
driverLicense: {
|
||
photos: ['https://picsum.photos/seed/zhe1/600/400'],
|
||
regDate: '2025-01-01',
|
||
issueDate: '2025-01-01',
|
||
scrapDate: '2040-01-01',
|
||
expireDate: '2027-12-31', // 正常
|
||
updateType: '直接上传',
|
||
updateTime: '2026-01-10 11:00:00',
|
||
updateUser: '张小凡'
|
||
},
|
||
transportLicense: {
|
||
photos: ['https://picsum.photos/seed/zhe2/600/400'],
|
||
licenseNo: '浙字330101582910号',
|
||
issueDate: '2025-01-05',
|
||
expireDate: '2027-12-31',
|
||
inspectValidUntil: '2027-12-31',
|
||
updateTime: '2026-01-10 11:00:00',
|
||
updateUser: '张小凡'
|
||
},
|
||
registrationCert: { photos: ['https://picsum.photos/seed/zhe3/600/400'] },
|
||
specialEquipCert: { photos: [] },
|
||
specialEquipDecal: { photos: [], nextInspectDate: '' },
|
||
hydrogenCard: { cardNo: 'H2-8888-6666-5555', cardType: '中石化加氢卡', balance: 8800.00, issueDate: '2025-05-20 16:30', issueUser: '能源管理部-张晓' },
|
||
safetyValve: { photos: ['https://picsum.photos/seed/zhe_v/600/400'], inspectDate: '2025-12-20', nextInspectDate: '2026-12-19' },
|
||
pressureGauge: { photos: ['https://picsum.photos/seed/zhe_g/600/400'], inspectDate: '2025-12-20', nextInspectDate: '2026-12-19' }
|
||
}
|
||
};
|
||
|
||
const PAGE_STYLE = `
|
||
.lc-edit-page {
|
||
font-family: system-ui, -apple-system, sans-serif;
|
||
color: #1e293b;
|
||
}
|
||
.lc-page-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 20px;
|
||
}
|
||
.lc-page-title {
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
color: #0f172a;
|
||
margin: 0;
|
||
}
|
||
.lc-layout-row {
|
||
display: flex;
|
||
gap: 24px;
|
||
flex: 1;
|
||
min-height: 0;
|
||
}
|
||
.lc-sidebar {
|
||
width: 320px;
|
||
flex-shrink: 0;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.lc-content-area {
|
||
flex: 1;
|
||
min-width: 0;
|
||
height: 100%;
|
||
overflow-y: auto;
|
||
padding-right: 12px;
|
||
padding-bottom: 80px;
|
||
}
|
||
.lc-content-area::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
.lc-content-area::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
.lc-content-area::-webkit-scrollbar-thumb {
|
||
background: #cbd5e1;
|
||
border-radius: 3px;
|
||
}
|
||
.lc-content-area::-webkit-scrollbar-thumb:hover {
|
||
background: #94a3b8;
|
||
}
|
||
.lc-sticky-card {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
min-height: 0;
|
||
}
|
||
.lc-sidebar-card {
|
||
border-radius: 16px !important;
|
||
border: 1px solid #e2e8f0 !important;
|
||
box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.05) !important;
|
||
overflow: hidden !important;
|
||
}
|
||
.lc-sidebar-card-index {
|
||
flex: 1;
|
||
min-height: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.lc-sidebar-card-index .ant-card-body {
|
||
flex: 1;
|
||
min-height: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
padding: 12px 16px !important;
|
||
}
|
||
.lc-sidebar-info-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 10px 0;
|
||
border-bottom: 1px dashed #f1f5f9;
|
||
}
|
||
.lc-sidebar-info-row:last-child {
|
||
border-bottom: none;
|
||
}
|
||
.lc-sidebar-label {
|
||
font-size: 13px;
|
||
color: #64748b;
|
||
}
|
||
.lc-sidebar-val {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: #0f172a;
|
||
}
|
||
.lc-nav-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding-right: 4px;
|
||
}
|
||
.lc-nav-list::-webkit-scrollbar {
|
||
width: 4px;
|
||
}
|
||
.lc-nav-list::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
.lc-nav-list::-webkit-scrollbar-thumb {
|
||
background: #cbd5e1;
|
||
border-radius: 2px;
|
||
}
|
||
.lc-nav-list::-webkit-scrollbar-thumb:hover {
|
||
background: #94a3b8;
|
||
}
|
||
.lc-nav-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 8px 12px;
|
||
border-radius: 8px;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
color: #475569;
|
||
background: #f8fafc;
|
||
border: 1px solid #f1f5f9;
|
||
cursor: pointer;
|
||
transition: all .2s ease;
|
||
}
|
||
.lc-nav-item:hover {
|
||
background: #f1f5f9;
|
||
border-color: #cbd5e1;
|
||
color: #0f172a;
|
||
}
|
||
.lc-nav-item.active {
|
||
background: #ecfdf5;
|
||
border-color: #a7f3d0;
|
||
color: #065f46;
|
||
font-weight: 600;
|
||
box-shadow: 0 2px 8px -2px rgba(16, 185, 129, 0.1);
|
||
}
|
||
.lc-card {
|
||
border-radius: 16px !important;
|
||
border: 1px solid #e2e8f0 !important;
|
||
box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.05) !important;
|
||
transition: border-color .3s, box-shadow .3s;
|
||
overflow: hidden !important;
|
||
}
|
||
.lc-card:hover {
|
||
border-color: #cbd5e1 !important;
|
||
box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08) !important;
|
||
}
|
||
.lc-card .ant-card-head {
|
||
border-bottom: 1px solid #f1f5f9 !important;
|
||
background: #fafbfc;
|
||
padding: 14px 24px !important;
|
||
}
|
||
.lc-card-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
color: #0f172a;
|
||
}
|
||
.lc-card-subtitle {
|
||
font-size: 11px;
|
||
font-weight: 400;
|
||
color: #94a3b8;
|
||
margin-top: 2px;
|
||
}
|
||
.lc-upload-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 12px;
|
||
}
|
||
.lc-upload-box {
|
||
aspect-ratio: 4/3;
|
||
border: 1.5px dashed #cbd5e1;
|
||
border-radius: 12px;
|
||
background: #f8fafc;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
color: #64748b;
|
||
transition: all .2s ease;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.lc-upload-box:hover {
|
||
border-color: #10b981;
|
||
background: #ecfdf5;
|
||
color: #10b981;
|
||
}
|
||
.lc-image-thumb {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
.lc-image-mask {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: rgba(15, 23, 42, 0.6);
|
||
opacity: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 12px;
|
||
transition: opacity .2s ease;
|
||
color: #fff;
|
||
}
|
||
.lc-upload-box:hover .lc-image-mask {
|
||
opacity: 1;
|
||
}
|
||
.lc-image-action-btn {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
background: rgba(255,255,255,0.15);
|
||
backdrop-filter: blur(4px);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
transition: background .2s;
|
||
}
|
||
.lc-image-action-btn:hover {
|
||
background: rgba(255,255,255,0.3);
|
||
}
|
||
.lc-image-action-btn.delete:hover {
|
||
background: #ef4444;
|
||
}
|
||
.lc-ocr-tag {
|
||
background: #fef3c7;
|
||
color: #d97706;
|
||
border: 1px solid #fde68a;
|
||
font-size: 11px;
|
||
padding: 1px 6px;
|
||
border-radius: 4px;
|
||
font-weight: 600;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
.lc-ocr-scanline {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
height: 3px;
|
||
background: linear-gradient(90deg, transparent, #10b981, transparent);
|
||
animation: lc-scan 1.5s infinite linear;
|
||
z-index: 10;
|
||
box-shadow: 0 0 8px #10b981;
|
||
}
|
||
@keyframes lc-scan {
|
||
0% { top: 0%; }
|
||
50% { top: 100%; }
|
||
100% { top: 0%; }
|
||
}
|
||
.lc-sh-badge {
|
||
background: #f5f3ff;
|
||
color: #7c3aed;
|
||
border: 1px solid #ddd6fe;
|
||
font-size: 11px;
|
||
padding: 1px 6px;
|
||
border-radius: 4px;
|
||
font-weight: 600;
|
||
}
|
||
.lc-form-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 16px 20px;
|
||
}
|
||
.lc-form-grid .ant-form-item {
|
||
margin-bottom: 0 !important;
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
}
|
||
.lc-form-grid .ant-form-item-label {
|
||
padding-bottom: 6px !important;
|
||
text-align: left !important;
|
||
}
|
||
.lc-form-grid .ant-form-item-control {
|
||
width: 100% !important;
|
||
}
|
||
.lc-form-grid .ant-form-item-control-input-content {
|
||
display: flex !important;
|
||
width: 100% !important;
|
||
}
|
||
.lc-form-grid .ant-form-item-control-input-content > * {
|
||
width: 100% !important;
|
||
}
|
||
.lc-form-group-title {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: #475569;
|
||
margin-bottom: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
.lc-h2-refuel-card {
|
||
width: 100%;
|
||
height: 160px;
|
||
border-radius: 16px;
|
||
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
|
||
position: relative;
|
||
overflow: hidden;
|
||
padding: 20px;
|
||
color: #fff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
box-shadow: 0 8px 30px rgba(15, 23, 42, 0.15);
|
||
}
|
||
.lc-h2-refuel-card::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: -20%;
|
||
right: -20%;
|
||
width: 180px;
|
||
height: 180px;
|
||
border-radius: 50%;
|
||
background: radial-gradient(circle, rgba(16, 185, 129, 0.2) 0%, transparent 70%);
|
||
filter: blur(20px);
|
||
}
|
||
.lc-h2-card-logo {
|
||
font-size: 16px;
|
||
font-weight: 800;
|
||
letter-spacing: 0.05em;
|
||
background: linear-gradient(90deg, #10b981, #34d399);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
.lc-h2-card-number {
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
font-family: monospace;
|
||
letter-spacing: 0.1em;
|
||
color: #f1f5f9;
|
||
}
|
||
.lc-h2-card-balance {
|
||
font-size: 24px;
|
||
font-weight: 800;
|
||
font-family: monospace;
|
||
color: #34d399;
|
||
}
|
||
.lc-h2-card-meta {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 11px;
|
||
color: #94a3b8;
|
||
}
|
||
.lc-page-footer {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: rgba(255, 255, 255, 0.85);
|
||
backdrop-filter: blur(12px);
|
||
border-top: 1px solid #e2e8f0;
|
||
padding: 12px 24px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 12px;
|
||
z-index: 100;
|
||
box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.03);
|
||
}
|
||
.lc-ocr-flash {
|
||
animation: flash-green .4s ease-out 2;
|
||
}
|
||
@keyframes flash-green {
|
||
0% { background-color: transparent; }
|
||
50% { background-color: rgba(16, 185, 129, 0.15); }
|
||
100% { background-color: transparent; }
|
||
}
|
||
|
||
/* ==================== 列表台账页面专属样式 ==================== */
|
||
.lc-filter-card.ant-card {
|
||
border-radius: 16px !important;
|
||
border: 1px solid #e2e8f0 !important;
|
||
box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.03) !important;
|
||
margin-bottom: 16px;
|
||
}
|
||
.lc-filter-card > .ant-card-head {
|
||
border-bottom: 1px solid #f1f5f9 !important;
|
||
min-height: auto;
|
||
padding: 12px 20px !important;
|
||
}
|
||
.lc-filter-card > .ant-card-head .ant-card-head-title {
|
||
font-size: 15px !important;
|
||
font-weight: 700 !important;
|
||
color: #0f172a !important;
|
||
padding: 0 !important;
|
||
}
|
||
.lc-filter-card > .ant-card-body {
|
||
padding: 16px 20px 20px !important;
|
||
}
|
||
.lc-filter-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 14px 24px;
|
||
}
|
||
@media (max-width: 1100px) {
|
||
.lc-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||
}
|
||
@media (max-width: 720px) {
|
||
.lc-filter-grid { grid-template-columns: 1fr; }
|
||
}
|
||
.lc-filter-field {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
min-width: 0;
|
||
}
|
||
.lc-filter-field-label {
|
||
flex: 0 0 72px;
|
||
text-align: right;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
color: #475569;
|
||
line-height: 1.4;
|
||
white-space: nowrap;
|
||
}
|
||
.lc-filter-field-control {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
.lc-filter-field-control .ant-input,
|
||
.lc-filter-field-control .ant-select {
|
||
width: 100%;
|
||
}
|
||
.lc-multi-plate-pop {
|
||
width: 320px;
|
||
padding: 4px 2px;
|
||
}
|
||
.lc-multi-plate-pop-hint {
|
||
font-size: 12px;
|
||
color: #64748b;
|
||
margin-bottom: 8px;
|
||
line-height: 1.5;
|
||
}
|
||
.lc-multi-plate-pop-actions {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 8px;
|
||
margin-top: 10px;
|
||
}
|
||
.lc-multi-plate-trigger {
|
||
cursor: pointer;
|
||
}
|
||
.lc-multi-plate-trigger .ant-input {
|
||
cursor: pointer;
|
||
}
|
||
.lc-filter-actions {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 8px;
|
||
margin-top: 16px;
|
||
padding-top: 16px;
|
||
border-top: 1px solid #f1f5f9;
|
||
}
|
||
.lc-alert-stats-row {
|
||
display: grid;
|
||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||
gap: 12px;
|
||
margin-bottom: 16px;
|
||
}
|
||
@media (max-width: 1200px) {
|
||
.lc-alert-stats-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||
}
|
||
@media (max-width: 768px) {
|
||
.lc-alert-stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||
}
|
||
.lc-alert-card {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 12px;
|
||
padding: 14px 30px 14px 16px;
|
||
border-radius: 12px;
|
||
border: 1px solid #e2e8f0;
|
||
background: #fff;
|
||
position: relative;
|
||
overflow: hidden;
|
||
min-width: 0;
|
||
}
|
||
.lc-alert-card-main {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
.lc-alert-card-icon {
|
||
flex-shrink: 0;
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.lc-alert-card-val {
|
||
font-size: 26px;
|
||
font-weight: 800;
|
||
line-height: 1.1;
|
||
color: #0f172a;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.lc-alert-card-title {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: #334155;
|
||
margin-top: 2px;
|
||
}
|
||
.lc-alert-card-tip-anchor {
|
||
position: absolute;
|
||
top: 8px;
|
||
right: 8px;
|
||
z-index: 2;
|
||
line-height: 0;
|
||
}
|
||
.lc-alert-card-tip {
|
||
width: 18px;
|
||
height: 18px;
|
||
border-radius: 50%;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #94a3b8;
|
||
background: rgba(255, 255, 255, 0.92);
|
||
border: 1px solid #e2e8f0;
|
||
cursor: help;
|
||
line-height: 0;
|
||
}
|
||
.lc-alert-card-tip:hover {
|
||
color: #64748b;
|
||
border-color: #cbd5e1;
|
||
background: #fff;
|
||
}
|
||
.lc-alert-card--total { background: linear-gradient(135deg, #f8fafc 0%, #fff 100%); }
|
||
.lc-alert-card--total .lc-alert-card-icon { background: #e2e8f0; color: #475569; }
|
||
.lc-alert-card--normal { background: linear-gradient(135deg, #ecfdf5 0%, #fff 55%); border-color: #bbf7d0; }
|
||
.lc-alert-card--normal .lc-alert-card-icon { background: #d1fae5; color: #059669; }
|
||
.lc-alert-card--normal .lc-alert-card-val { color: #047857; }
|
||
.lc-alert-card--warning { background: linear-gradient(135deg, #fff7ed 0%, #fff 55%); border-color: #fed7aa; }
|
||
.lc-alert-card--warning .lc-alert-card-icon { background: #ffedd5; color: #ea580c; }
|
||
.lc-alert-card--warning .lc-alert-card-val { color: #c2410c; }
|
||
.lc-alert-card--expired { background: linear-gradient(135deg, #fef2f2 0%, #fff 55%); border-color: #fecaca; }
|
||
.lc-alert-card--expired .lc-alert-card-icon { background: #fee2e2; color: #dc2626; }
|
||
.lc-alert-card--expired .lc-alert-card-val { color: #b91c1c; }
|
||
.lc-alert-card--unuploaded { background: linear-gradient(135deg, #f8fafc 0%, #fff 55%); }
|
||
.lc-alert-card--unuploaded .lc-alert-card-icon { background: #f1f5f9; color: #64748b; }
|
||
.lc-alert-card--unuploaded .lc-alert-card-val { color: #64748b; }
|
||
.lc-alert-card-clickable {
|
||
cursor: pointer;
|
||
transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
|
||
}
|
||
.lc-alert-card-clickable:hover {
|
||
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
|
||
}
|
||
.lc-alert-card-active {
|
||
box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.2) !important;
|
||
border-color: #165dff !important;
|
||
}
|
||
.lc-table-section { margin-bottom: 0; }
|
||
.lc-table-toolbar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 10px 16px;
|
||
margin-bottom: 8px;
|
||
min-height: 32px;
|
||
}
|
||
.lc-table-cert-legend-outer {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
justify-content: flex-start;
|
||
gap: 10px;
|
||
padding: 6px 4px;
|
||
}
|
||
.lc-table-toolbar-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
margin-left: auto;
|
||
}
|
||
.lc-cert-legend-items {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
color: #64748b;
|
||
}
|
||
.lc-cert-legend-item {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
.lc-cert-legend-item--help { cursor: help; }
|
||
.lc-plate-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 800;
|
||
font-size: 13px;
|
||
height: 25px;
|
||
padding: 0 10px;
|
||
border-radius: 5px;
|
||
letter-spacing: 0.05em;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.06);
|
||
border: 1.5px solid #000000;
|
||
}
|
||
.lc-plate-blue {
|
||
background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%);
|
||
color: #ffffff;
|
||
border-color: #3b82f6;
|
||
}
|
||
.lc-plate-yellow {
|
||
background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%);
|
||
color: #0f172a;
|
||
border-color: #facc15;
|
||
}
|
||
.lc-plate-green {
|
||
background: linear-gradient(90deg, #34d399 0%, #a7f3d0 50%, #34d399 100%);
|
||
color: #0f172a;
|
||
border-color: #10b981;
|
||
}
|
||
.lc-table-card {
|
||
background: #ffffff;
|
||
border-radius: 16px;
|
||
border: 1px solid #e2e8f0;
|
||
box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.03);
|
||
overflow: hidden;
|
||
}
|
||
.lc-table-cert-legend-label {
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: #64748b;
|
||
}
|
||
.lc-table-card .ant-table-thead > tr > th {
|
||
background: #f8fafc !important;
|
||
color: #475569 !important;
|
||
font-weight: 700 !important;
|
||
font-size: 13px !important;
|
||
border-bottom: 1px solid #e2e8f0 !important;
|
||
padding: 12px 16px !important;
|
||
vertical-align: middle;
|
||
}
|
||
.lc-table-card .ant-table-thead > tr > th.lc-th-wrap {
|
||
padding: 8px 8px !important;
|
||
text-align: center;
|
||
vertical-align: middle;
|
||
}
|
||
.lc-table-th-multiline {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 2px;
|
||
line-height: 1.3;
|
||
white-space: normal;
|
||
word-break: keep-all;
|
||
}
|
||
.lc-table-th-line {
|
||
display: block;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
color: #475569;
|
||
}
|
||
.lc-list-table .ant-table-wrapper,
|
||
.lc-list-table .ant-table {
|
||
width: 100% !important;
|
||
}
|
||
.lc-list-table .ant-table-content table {
|
||
table-layout: fixed;
|
||
width: 100% !important;
|
||
}
|
||
.lc-cell-ellipsis {
|
||
display: block;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.lc-list-table .ant-table-tbody > tr:not(.ant-table-measure-row) > td {
|
||
padding: 10px 8px !important;
|
||
}
|
||
.lc-table-card .ant-table-tbody > tr.ant-table-measure-row,
|
||
.lc-table-card .ant-table-tbody > tr.ant-table-measure-row > td {
|
||
height: 0 !important;
|
||
max-height: 0 !important;
|
||
padding: 0 !important;
|
||
margin: 0 !important;
|
||
border: none !important;
|
||
line-height: 0 !important;
|
||
font-size: 0 !important;
|
||
overflow: hidden !important;
|
||
visibility: hidden !important;
|
||
}
|
||
.lc-table-card .ant-table-tbody > tr:not(.ant-table-measure-row) > td {
|
||
padding: 14px 16px !important;
|
||
border-bottom: 1px solid #f1f5f9 !important;
|
||
}
|
||
.lc-table-card .ant-table-tbody > tr:not(.ant-table-measure-row):hover > td {
|
||
background: #f8fafc !important;
|
||
}
|
||
.lc-table-card .ant-table-tbody > tr.lc-row-retired:not(.ant-table-measure-row) > td {
|
||
background: #f8fafc !important;
|
||
color: #94a3b8;
|
||
}
|
||
.lc-table-card .ant-table-tbody > tr.lc-row-retired:hover > td {
|
||
background: #f1f5f9 !important;
|
||
}
|
||
.lc-table-card .ant-table-tbody > tr.lc-row-retired .lc-muted-text {
|
||
color: #94a3b8 !important;
|
||
}
|
||
.lc-table-card .ant-table-tbody > tr.lc-row-retired .ant-badge-status-text {
|
||
color: #94a3b8 !important;
|
||
}
|
||
.lc-mini-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
padding: 2px 6px;
|
||
border-radius: 4px;
|
||
}
|
||
.lc-mini-badge-success { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
|
||
.lc-mini-badge-warning { background: #fff7ed; color: #ea580c; border: 1px solid #ffedd5; }
|
||
.lc-mini-badge-error { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
|
||
.lc-mini-badge-default { background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; }
|
||
.lc-list-cert-status-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
grid-template-rows: auto auto;
|
||
gap: 3px 2px;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
}
|
||
.lc-list-cert-status-item {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
min-width: 0;
|
||
line-height: 1.2;
|
||
}
|
||
.lc-list-cert-status-item .ant-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 2px;
|
||
max-width: 100%;
|
||
font-size: 10px;
|
||
}
|
||
.lc-list-cert-status-item .ant-badge-status-dot {
|
||
width: 5px !important;
|
||
height: 5px !important;
|
||
top: 0 !important;
|
||
}
|
||
.lc-list-cert-status-item .ant-badge-status-text {
|
||
font-size: 10px !important;
|
||
white-space: nowrap;
|
||
margin-left: 2px !important;
|
||
}
|
||
.lc-list-status-badge-wrap {
|
||
display: inline-flex;
|
||
max-width: 100%;
|
||
}
|
||
.lc-list-status-badge-wrap .ant-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
max-width: 100%;
|
||
}
|
||
.lc-list-status-badge-text {
|
||
font-size: 10px;
|
||
white-space: nowrap;
|
||
line-height: 1.2;
|
||
}
|
||
.lc-list-date-cell-status {
|
||
margin-top: 3px;
|
||
}
|
||
|
||
.lc-dot-indicator {
|
||
width: 7px;
|
||
height: 7px;
|
||
border-radius: 50%;
|
||
display: inline-block;
|
||
}
|
||
.lc-batch-export-types {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 10px 16px;
|
||
margin-top: 8px;
|
||
}
|
||
@media (max-width: 640px) {
|
||
.lc-batch-export-types { grid-template-columns: 1fr; }
|
||
}
|
||
.lc-batch-ocr-confirm {
|
||
display: grid;
|
||
grid-template-columns: minmax(200px, 340px) 1fr;
|
||
gap: 20px;
|
||
min-height: 420px;
|
||
}
|
||
@media (max-width: 900px) {
|
||
.lc-batch-ocr-confirm { grid-template-columns: 1fr; }
|
||
}
|
||
.lc-batch-ocr-photos {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
max-height: 480px;
|
||
overflow-y: auto;
|
||
}
|
||
.lc-batch-ocr-photo-main {
|
||
border-radius: 12px;
|
||
border: 1px solid #e2e8f0;
|
||
overflow: hidden;
|
||
cursor: zoom-in;
|
||
background: #f8fafc;
|
||
}
|
||
.lc-batch-ocr-photo-main img {
|
||
width: 100%;
|
||
display: block;
|
||
max-height: 280px;
|
||
object-fit: contain;
|
||
}
|
||
.lc-batch-ocr-thumb-row {
|
||
display: flex;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.lc-batch-ocr-thumb {
|
||
width: 56px;
|
||
height: 56px;
|
||
border-radius: 8px;
|
||
border: 2px solid transparent;
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
opacity: 0.75;
|
||
}
|
||
.lc-batch-ocr-thumb.active {
|
||
border-color: #10b981;
|
||
opacity: 1;
|
||
}
|
||
.lc-batch-ocr-thumb--fail {
|
||
border-color: #ef4444 !important;
|
||
opacity: 1;
|
||
}
|
||
.lc-batch-ocr-thumb img { width: 100%; height: 100%; object-fit: cover; }
|
||
.lc-batch-ocr-plate-readonly {
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
color: #0f172a;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
.lc-batch-ocr-step-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
margin-bottom: 14px;
|
||
padding: 10px 14px;
|
||
background: #f8fafc;
|
||
border: 1px solid #e2e8f0;
|
||
border-radius: 10px;
|
||
}
|
||
.lc-batch-ocr-step-val {
|
||
font-size: 18px;
|
||
font-weight: 800;
|
||
color: #0f172a;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.lc-batch-ocr-photo-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
|
||
gap: 8px;
|
||
margin-bottom: 10px;
|
||
}
|
||
`;
|
||
|
||
const Component = function () {
|
||
// 核心共享数据库状态，使编辑修改在列表中实时生效！
|
||
const [allLicenses, setAllLicenses] = useState(() => (
|
||
loadLicensesFromStorage() || JSON.parse(JSON.stringify(INITIAL_LICENSE_DATA))
|
||
));
|
||
|
||
const patchAllLicenses = (updater) => {
|
||
setAllLicenses((prev) => {
|
||
const next = typeof updater === 'function' ? updater(prev) : updater;
|
||
persistLicensesToStorage(next);
|
||
return next;
|
||
});
|
||
};
|
||
|
||
const DEFAULT_LIST_FILTERS = {
|
||
plateNo: '',
|
||
plateNos: '',
|
||
vin: '',
|
||
brand: '',
|
||
model: '',
|
||
operateStatus: '全部'
|
||
};
|
||
const [listFilters, setListFilters] = useState(() => ({ ...DEFAULT_LIST_FILTERS }));
|
||
const [appliedFilters, setAppliedFilters] = useState(() => ({ ...DEFAULT_LIST_FILTERS }));
|
||
const [multiPlateOpen, setMultiPlateOpen] = useState(false);
|
||
const [multiPlateDraft, setMultiPlateDraft] = useState('');
|
||
|
||
|
||
const [previewOpen, setPreviewOpen] = useState(false);
|
||
const [previewUrl, setPreviewUrl] = useState('');
|
||
const [prdOpen, setPrdOpen] = useState(false);
|
||
/** total | normal | warning | expired | unuploaded */
|
||
const [kpiFilter, setKpiFilter] = useState('total');
|
||
|
||
useEffect(() => {
|
||
const refreshFromStorage = () => {
|
||
const stored = loadLicensesFromStorage();
|
||
if (stored) setAllLicenses(stored);
|
||
};
|
||
const onReturn = () => {
|
||
try {
|
||
if (sessionStorage.getItem(LC_NAV_TARGET_KEY) === 'list') {
|
||
sessionStorage.removeItem(LC_NAV_TARGET_KEY);
|
||
refreshFromStorage();
|
||
}
|
||
} catch {
|
||
/* ignore */
|
||
}
|
||
};
|
||
window.addEventListener(LC_NAV_EVENT, onReturn);
|
||
onReturn();
|
||
return () => window.removeEventListener(LC_NAV_EVENT, onReturn);
|
||
}, []);
|
||
|
||
const [batchExportOpen, setBatchExportOpen] = useState(false);
|
||
const [exportCertTypes, setExportCertTypes] = useState([]);
|
||
const [batchOcrOpen, setBatchOcrOpen] = useState(false);
|
||
const [batchOcrCertType, setBatchOcrCertType] = useState('driverLicense');
|
||
const [batchOcrFileList, setBatchOcrFileList] = useState([]);
|
||
const [ocrTasks, setOcrTasks] = useState([]);
|
||
const [ocrConfirmOpen, setOcrConfirmOpen] = useState(false);
|
||
const [ocrConfirmTask, setOcrConfirmTask] = useState(null);
|
||
const [ocrConfirmGroups, setOcrConfirmGroups] = useState([]);
|
||
const [ocrConfirmGroupIdx, setOcrConfirmGroupIdx] = useState(0);
|
||
const [ocrConfirmPhotoIdx, setOcrConfirmPhotoIdx] = useState(0);
|
||
const ocrTaskTimersRef = useRef({});
|
||
|
||
// 辅助函数：根据车牌前缀获取车牌颜色类别
|
||
const getPlateClass = (plate) => {
|
||
if (plate.endsWith('F') || plate.endsWith('D') || plate.length === 8) {
|
||
return 'lc-plate-green'; // 绿牌（新能源车）
|
||
}
|
||
if (plate.startsWith('粤') || plate.startsWith('京')) {
|
||
return 'lc-plate-blue'; // 蓝牌（普通货车）
|
||
}
|
||
return 'lc-plate-yellow'; // 黄牌（中重卡）
|
||
};
|
||
|
||
// 辅助函数：获取到期天数
|
||
const getDiffDays = (dateStr) => {
|
||
if (!dateStr) return null;
|
||
const expDate = new Date(dateStr);
|
||
const today = new Date('2026-06-01'); // 锚定今天日期 2026-06-01
|
||
expDate.setHours(0, 0, 0, 0);
|
||
today.setHours(0, 0, 0, 0);
|
||
const diffTime = expDate.getTime() - today.getTime();
|
||
return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
||
};
|
||
|
||
const mergeLicenseStatusTypes = (a, b) => {
|
||
const rank = { expired: 0, warning: 1, unuploaded: 2, success: 3 };
|
||
return (rank[a] ?? 9) <= (rank[b] ?? 9) ? a : b;
|
||
};
|
||
|
||
const getListCertStatus = (plateNo, item) => {
|
||
if (item.mergedTransport) {
|
||
const cert = getLicenseStatus(plateNo, 'transportLicense', { dateField: 'expireDate' });
|
||
const inspect = getLicenseStatus(plateNo, 'transportLicense', { dateField: 'inspectValidUntil' });
|
||
const type = mergeLicenseStatusTypes(cert.type, inspect.type);
|
||
return {
|
||
type,
|
||
text: `证件有效期：${cert.text}；审验有效期：${inspect.text}`
|
||
};
|
||
}
|
||
const st = getLicenseStatus(plateNo, item.key);
|
||
return { type: st.type, text: st.text };
|
||
};
|
||
|
||
// 获取单个车辆各证件的到期状态（道路运输证可通过 dateField 区分证件有效期 / 审验有效期）
|
||
const getLicenseStatus = (plate, key, options = {}) => {
|
||
const item = allLicenses[plate]?.[key];
|
||
if (!item) return { type: 'unuploaded', text: '未上传', diffDays: null };
|
||
|
||
if (key === 'hydrogenCard') {
|
||
return item.cardNo ? { type: 'success', text: '已绑定', diffDays: null } : { type: 'unuploaded', text: '未绑定', diffDays: null };
|
||
}
|
||
|
||
if (!item.photos || item.photos.length === 0) {
|
||
return { type: 'unuploaded', text: '未上传', diffDays: null };
|
||
}
|
||
|
||
// 针对有日期的
|
||
const today = new Date('2026-06-01');
|
||
today.setHours(0,0,0,0);
|
||
|
||
let dateValue = '';
|
||
let warnThreshold = 30; // 默认30天警告
|
||
|
||
if (key === 'driverLicense') {
|
||
dateValue = item.expireDate;
|
||
warnThreshold = 90; // 行驶证 90 天
|
||
} else if (key === 'transportLicense') {
|
||
dateValue = options.dateField === 'inspectValidUntil' ? item.inspectValidUntil : item.expireDate;
|
||
warnThreshold = 60; // 运输证 60 天
|
||
} else if (key === 'specialEquipDecal') {
|
||
dateValue = item.nextInspectDate;
|
||
warnThreshold = 60; // 特种设备使用标识 60 天
|
||
} else if (key === 'safetyValve' || key === 'pressureGauge') {
|
||
dateValue = item.nextInspectDate;
|
||
warnThreshold = 60; // 安全阀 / 压力表 60 天
|
||
}
|
||
|
||
if (!dateValue) {
|
||
return { type: 'success', text: '正常', diffDays: null }; // 已上传照片无日期的默认为正常
|
||
}
|
||
|
||
const expDate = new Date(dateValue);
|
||
expDate.setHours(0, 0, 0, 0);
|
||
const diffDays = Math.ceil((expDate.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
|
||
|
||
if (diffDays <= 0) {
|
||
return { type: 'expired', text: `已到期 (逾期 ${Math.abs(diffDays)} 天)`, diffDays };
|
||
}
|
||
if (diffDays <= warnThreshold) {
|
||
return { type: 'warning', text: `临期 (${diffDays} 天后)`, diffDays };
|
||
}
|
||
return { type: 'success', text: '正常', diffDays };
|
||
};
|
||
|
||
const mapLicenseTypeToBadge = (type) => {
|
||
if (type === 'success') return 'success';
|
||
if (type === 'warning') return 'warning';
|
||
if (type === 'expired') return 'error';
|
||
return 'default';
|
||
};
|
||
|
||
/** 列表日期列：状态文案单行展示，完整说明放 Tooltip */
|
||
const getListStatusShortText = (status) => {
|
||
const { type, text, diffDays } = status || {};
|
||
if (type === 'warning') {
|
||
return diffDays != null ? `临期${diffDays}天` : '临期';
|
||
}
|
||
if (type === 'expired') {
|
||
return diffDays != null ? `逾期${Math.abs(diffDays)}天` : '已到期';
|
||
}
|
||
if (type === 'unuploaded') return text === '未绑定' ? '未绑定' : '未上传';
|
||
return text || '正常';
|
||
};
|
||
|
||
const renderListLicenseStatusBadge = (status) => (
|
||
<Tooltip title={status?.text || ''}>
|
||
<span className="lc-list-status-badge-wrap">
|
||
<Badge
|
||
status={mapLicenseTypeToBadge(status?.type)}
|
||
text={<span className="lc-list-status-badge-text">{getListStatusShortText(status)}</span>}
|
||
/>
|
||
</span>
|
||
</Tooltip>
|
||
);
|
||
|
||
const isRetiredVehicle = (record) => record?.status === '退出运营';
|
||
|
||
const CERT_STATUS_LEGEND = (
|
||
<div className="lc-cert-legend-items">
|
||
<span className="lc-cert-legend-item"><Badge status="success" style={{ fontSize: 8 }} />正常</span>
|
||
<Tooltip title="行驶证≤90天 / 道路运输证≤60天 / 特种设备标识≤60天 / 安全阀≤60天 / 压力表≤60天">
|
||
<span className="lc-cert-legend-item lc-cert-legend-item--help"><Badge status="warning" style={{ fontSize: 8 }} />临期</span>
|
||
</Tooltip>
|
||
<Tooltip title="行驶证检验有效期到期 / 道路运输证有效期/检验时间到期 / 安全阀、压力表下次检验到期">
|
||
<span className="lc-cert-legend-item lc-cert-legend-item--help"><Badge status="error" style={{ fontSize: 8 }} />已到期</span>
|
||
</Tooltip>
|
||
<span className="lc-cert-legend-item"><Badge status="default" style={{ fontSize: 8 }} />未上传</span>
|
||
</div>
|
||
);
|
||
|
||
const isTransportLicenseWarning = (plateNo) => (
|
||
getLicenseStatus(plateNo, 'transportLicense', { dateField: 'expireDate' }).type === 'warning'
|
||
|| getLicenseStatus(plateNo, 'transportLicense', { dateField: 'inspectValidUntil' }).type === 'warning'
|
||
);
|
||
|
||
const isTransportLicenseExpired = (plateNo) => (
|
||
getLicenseStatus(plateNo, 'transportLicense', { dateField: 'expireDate' }).type === 'expired'
|
||
|| getLicenseStatus(plateNo, 'transportLicense', { dateField: 'inspectValidUntil' }).type === 'expired'
|
||
);
|
||
|
||
const isQualificationNormal = (plateNo) => {
|
||
const d = getLicenseStatus(plateNo, 'driverLicense');
|
||
const tCert = getLicenseStatus(plateNo, 'transportLicense', { dateField: 'expireDate' });
|
||
const tInspect = getLicenseStatus(plateNo, 'transportLicense', { dateField: 'inspectValidUntil' });
|
||
return d.type === 'success' && tCert.type === 'success' && tInspect.type === 'success';
|
||
};
|
||
|
||
const isCertNearExpiry = (plateNo) => {
|
||
if (isTransportLicenseWarning(plateNo)) return true;
|
||
const keys = ['driverLicense', 'specialEquipDecal', 'safetyValve', 'pressureGauge'];
|
||
return keys.some((key) => getLicenseStatus(plateNo, key).type === 'warning');
|
||
};
|
||
|
||
const isCoreCertExpired = (plateNo) => {
|
||
if (isTransportLicenseExpired(plateNo)) return true;
|
||
const keys = ['driverLicense', 'safetyValve', 'pressureGauge'];
|
||
return keys.some((key) => getLicenseStatus(plateNo, key).type === 'expired');
|
||
};
|
||
|
||
const isCertPendingUpload = (plateNo) => {
|
||
const keys = ['driverLicense', 'transportLicense', 'specialEquipCert', 'specialEquipDecal'];
|
||
return keys.some((key) => getLicenseStatus(plateNo, key).type === 'unuploaded');
|
||
};
|
||
|
||
const matchKpiFilter = (plateNo, filterKey) => {
|
||
if (filterKey === 'total') return true;
|
||
if (filterKey === 'normal') return isQualificationNormal(plateNo);
|
||
if (filterKey === 'warning') return isCertNearExpiry(plateNo);
|
||
if (filterKey === 'expired') return isCoreCertExpired(plateNo);
|
||
if (filterKey === 'unuploaded') return isCertPendingUpload(plateNo);
|
||
return true;
|
||
};
|
||
|
||
const handleKpiCardClick = (key) => {
|
||
setKpiFilter(key);
|
||
};
|
||
|
||
// ==================== 统计面板数据动态推算 ====================
|
||
const stats = useMemo(() => {
|
||
let normal = 0;
|
||
let warning = 0;
|
||
let expired = 0;
|
||
let unuploaded = 0;
|
||
|
||
MOCK_VEHICLES.forEach((v) => {
|
||
if (isQualificationNormal(v.plateNo)) normal++;
|
||
if (isCertNearExpiry(v.plateNo)) warning++;
|
||
if (isCoreCertExpired(v.plateNo)) expired++;
|
||
if (isCertPendingUpload(v.plateNo)) unuploaded++;
|
||
});
|
||
|
||
return {
|
||
total: MOCK_VEHICLES.length,
|
||
normal,
|
||
warning,
|
||
expired,
|
||
unuploaded,
|
||
};
|
||
}, [allLicenses]);
|
||
|
||
const brandOptions = useMemo(() => {
|
||
return [...new Set(MOCK_VEHICLES.map(v => v.brand))].map(b => ({ label: b, value: b }));
|
||
}, []);
|
||
|
||
const modelOptions = useMemo(() => {
|
||
return [...new Set(MOCK_VEHICLES.map(v => v.model))].map(m => ({ label: m, value: m }));
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
return () => {
|
||
Object.values(ocrTaskTimersRef.current).forEach((id) => clearInterval(id));
|
||
};
|
||
}, []);
|
||
|
||
const runBatchOcrTask = (taskId) => {
|
||
if (ocrTaskTimersRef.current[taskId]) clearInterval(ocrTaskTimersRef.current[taskId]);
|
||
ocrTaskTimersRef.current[taskId] = setInterval(() => {
|
||
setOcrTasks((prev) => {
|
||
const task = prev.find((t) => t.id === taskId);
|
||
if (!task || task.status === 'done') return prev;
|
||
const nextProgress = Math.min(100, task.progress + 12 + Math.floor(Math.random() * 18));
|
||
if (nextProgress < 100) {
|
||
return prev.map((t) => (t.id === taskId ? { ...t, progress: nextProgress } : t));
|
||
}
|
||
clearInterval(ocrTaskTimersRef.current[taskId]);
|
||
delete ocrTaskTimersRef.current[taskId];
|
||
const results = task.photos.map((ph, idx) => ({
|
||
...buildMockBatchOcrItem(task.certType, idx),
|
||
photoUrl: ph.url,
|
||
photoName: ph.name
|
||
}));
|
||
const { ocrSuccessCount, ocrFailCount } = countBatchOcrResults(results);
|
||
return prev.map((t) => (t.id === taskId ? {
|
||
...t,
|
||
progress: 100,
|
||
status: 'done',
|
||
results,
|
||
ocrSuccessCount,
|
||
ocrFailCount
|
||
} : t));
|
||
});
|
||
}, 450);
|
||
};
|
||
|
||
const handleStartBatchOcr = () => {
|
||
if (!batchOcrFileList.length) {
|
||
message.warning('请先上传至少一张证照照片');
|
||
return;
|
||
}
|
||
const photos = batchOcrFileList.map((f) => ({
|
||
url: f.url || (f.originFileObj ? URL.createObjectURL(f.originFileObj) : ''),
|
||
name: f.name
|
||
}));
|
||
const task = {
|
||
id: `ocr-${Date.now()}`,
|
||
certType: batchOcrCertType,
|
||
certLabel: BATCH_UPLOAD_CERT_OPTIONS.find((o) => o.key === batchOcrCertType)?.label || '',
|
||
operator: BATCH_UPLOAD_OPERATOR,
|
||
operateTime: new Date().toLocaleString('zh-CN', { hour12: false }),
|
||
photoCount: photos.length,
|
||
progress: 0,
|
||
status: 'running',
|
||
photos,
|
||
results: null
|
||
};
|
||
setOcrTasks((prev) => [task, ...prev]);
|
||
setBatchOcrFileList([]);
|
||
runBatchOcrTask(task.id);
|
||
message.success('已创建批量上传任务');
|
||
};
|
||
|
||
const currentOcrConfirmGroup = ocrConfirmGroups[ocrConfirmGroupIdx] || null;
|
||
const ocrConfirmTotalSheets = ocrConfirmGroups.length;
|
||
|
||
const closeOcrConfirm = () => {
|
||
setOcrConfirmOpen(false);
|
||
setOcrConfirmTask(null);
|
||
setOcrConfirmGroups([]);
|
||
setOcrConfirmGroupIdx(0);
|
||
setOcrConfirmPhotoIdx(0);
|
||
};
|
||
|
||
const finishOcrConfirmFlow = (lastPlate) => {
|
||
if (ocrConfirmTask?.id) {
|
||
setOcrTasks((prev) => prev.map((t) => (
|
||
t.id === ocrConfirmTask.id ? { ...t, confirmDone: true } : t
|
||
)));
|
||
}
|
||
const photoOnly = isBatchUploadPhotoOnlyType(ocrConfirmTask?.certType);
|
||
message.success(
|
||
lastPlate
|
||
? (photoOnly ? `全部确认完成，末次已同步 ${lastPlate} 证照照片` : `全部确认完成，末次已更新 ${lastPlate} 证照`)
|
||
: '全部逐张确认完成'
|
||
);
|
||
closeOcrConfirm();
|
||
};
|
||
|
||
const goToNextOcrConfirmGroup = (lastUpdatedPlate) => {
|
||
if (ocrConfirmGroupIdx >= ocrConfirmGroups.length - 1) {
|
||
finishOcrConfirmFlow(lastUpdatedPlate);
|
||
return;
|
||
}
|
||
setOcrConfirmGroupIdx((i) => i + 1);
|
||
setOcrConfirmPhotoIdx(0);
|
||
};
|
||
|
||
const openOcrConfirm = (task) => {
|
||
if (task.progress < 100 || !task.results) return;
|
||
const groups = buildOcrConfirmGroups(task.results);
|
||
if (!groups.length) {
|
||
message.warning('暂无上传结果可确认');
|
||
return;
|
||
}
|
||
setOcrConfirmTask(task);
|
||
setOcrConfirmGroups(JSON.parse(JSON.stringify(groups)));
|
||
setOcrConfirmGroupIdx(0);
|
||
setOcrConfirmPhotoIdx(0);
|
||
setOcrConfirmOpen(true);
|
||
};
|
||
|
||
const updateOcrConfirmField = (fieldKey, value) => {
|
||
setOcrConfirmGroups((prev) => prev.map((g, i) => (
|
||
i === ocrConfirmGroupIdx ? { ...g, fields: { ...g.fields, [fieldKey]: value } } : g
|
||
)));
|
||
};
|
||
|
||
const handleOcrConfirmSkip = () => {
|
||
message.info('已跳过本张，进入下一张确认');
|
||
goToNextOcrConfirmGroup();
|
||
};
|
||
|
||
const handleOcrConfirmSubmit = () => {
|
||
if (!ocrConfirmTask || !currentOcrConfirmGroup) return;
|
||
if (!currentOcrConfirmGroup.plateValid) {
|
||
message.error('当前识别车牌未通过校验，请跳过或重新识别');
|
||
return;
|
||
}
|
||
const plateNo = currentOcrConfirmGroup.plateNo;
|
||
const certType = ocrConfirmTask.certType;
|
||
const certLabel = ocrConfirmTask.certLabel;
|
||
const photoOnly = isBatchUploadPhotoOnlyType(certType);
|
||
|
||
patchAllLicenses((prev) => {
|
||
const copy = JSON.parse(JSON.stringify(prev));
|
||
if (!copy[plateNo]) copy[plateNo] = createEmptyLicenseRecord();
|
||
const existing = copy[plateNo][certType] || {};
|
||
copy[plateNo][certType] = applyBatchOcrGroupToCert(
|
||
existing,
|
||
certType,
|
||
currentOcrConfirmGroup,
|
||
BATCH_UPLOAD_OPERATOR
|
||
);
|
||
return copy;
|
||
});
|
||
|
||
message.success(
|
||
photoOnly
|
||
? `已同步 ${plateNo} 的${certLabel}照片至台账`
|
||
: `已更新 ${plateNo} 的${certLabel}`
|
||
);
|
||
goToNextOcrConfirmGroup(plateNo);
|
||
};
|
||
|
||
const renderOcrPlateValidation = (group) => {
|
||
if (!group) return null;
|
||
if (group.plateValid) {
|
||
return (
|
||
<Alert
|
||
type="success"
|
||
showIcon
|
||
message="车牌校验通过"
|
||
description={
|
||
<span>
|
||
OCR 识别车牌：<span className="lc-batch-ocr-plate-readonly">{group.plateNo}</span>
|
||
<span style={{ marginLeft: 8, fontSize: 12, color: '#64748b' }}>（已匹配台账车辆，不可修改）</span>
|
||
</span>
|
||
}
|
||
style={{ marginBottom: 14, borderRadius: 10 }}
|
||
/>
|
||
);
|
||
}
|
||
return (
|
||
<Alert
|
||
type="error"
|
||
showIcon
|
||
message="车牌校验失败"
|
||
description={
|
||
<div>
|
||
{group.plateNo ? (
|
||
<p style={{ margin: '0 0 6px' }}>
|
||
OCR 识别车牌：<strong style={{ color: '#b91c1c' }}>{group.plateNo}</strong>
|
||
</p>
|
||
) : null}
|
||
<p style={{ margin: 0, fontSize: 12 }}>
|
||
{group.items[0]?.plateError || '识别车牌与证照台账不一致，请跳过本张后继续'}
|
||
</p>
|
||
</div>
|
||
}
|
||
style={{ marginBottom: 14, borderRadius: 10 }}
|
||
/>
|
||
);
|
||
};
|
||
|
||
const handleBatchExport = async () => {
|
||
if (!exportCertTypes.length) {
|
||
message.warning('请至少勾选一种证照类型');
|
||
return;
|
||
}
|
||
const hide = message.loading({ content: '正在按筛选结果打包导出...', key: 'batchExport', duration: 0 });
|
||
try {
|
||
const JSZipLib = await loadJsZip();
|
||
const zip = new JSZipLib();
|
||
let fileCount = 0;
|
||
const selectedOpts = CERT_EXPORT_OPTIONS.filter((o) => exportCertTypes.includes(o.key));
|
||
|
||
for (const opt of selectedOpts) {
|
||
const folder = zip.folder(opt.folder);
|
||
for (const v of filteredVehicles) {
|
||
const lic = allLicenses[v.plateNo]?.[opt.key];
|
||
if (!lic) continue;
|
||
|
||
const photos = lic.photos || [];
|
||
if (!photos.length) continue;
|
||
for (let i = 0; i < photos.length; i += 1) {
|
||
const blob = await fetchImageBlob(photos[i]);
|
||
const baseName = buildExportPhotoBaseName(v.plateNo, i, photos.length);
|
||
if (blob) folder.file(`${baseName}.jpg`, blob);
|
||
else folder.file(`${baseName}_链接.txt`, photos[i]);
|
||
fileCount += 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
if (fileCount === 0) {
|
||
hide();
|
||
message.warning('当前筛选条件下，所选证照类型均无可用文件可导出');
|
||
return;
|
||
}
|
||
|
||
const blob = await zip.generateAsync({ type: 'blob' });
|
||
downloadBlobFile(blob, `证照批量导出_${formatExportFilename()}.zip`);
|
||
hide();
|
||
message.success({ content: `导出完成，共 ${fileCount} 个文件，已按证照类型分文件夹打包`, key: 'batchExport' });
|
||
setBatchExportOpen(false);
|
||
} catch {
|
||
hide();
|
||
message.error({ content: '打包导出失败，请检查网络后重试', key: 'batchExport' });
|
||
}
|
||
};
|
||
|
||
const renderOcrConfirmFields = (certType, group) => {
|
||
if (isBatchUploadPhotoOnlyType(certType)) return null;
|
||
const f = group?.fields || {};
|
||
const fieldDisabled = !group?.plateValid;
|
||
if (certType === 'driverLicense') {
|
||
return (
|
||
<div className="lc-form-grid">
|
||
<Form.Item label={<span style={{ fontWeight: 600 }}>注册日期</span>} required>
|
||
<DatePicker
|
||
disabled={fieldDisabled}
|
||
value={f.regDate ? moment(f.regDate) : null}
|
||
onChange={(_, ds) => updateOcrConfirmField('regDate', ds)}
|
||
style={{ width: '100%' }}
|
||
/>
|
||
</Form.Item>
|
||
<Form.Item label={<span style={{ fontWeight: 600 }}>发证日期</span>} required>
|
||
<DatePicker
|
||
disabled={fieldDisabled}
|
||
value={f.issueDate ? moment(f.issueDate) : null}
|
||
onChange={(_, ds) => updateOcrConfirmField('issueDate', ds)}
|
||
style={{ width: '100%' }}
|
||
/>
|
||
</Form.Item>
|
||
<Form.Item label={<span style={{ fontWeight: 600 }}>强制报废日期</span>}>
|
||
<DatePicker
|
||
disabled={fieldDisabled}
|
||
value={f.scrapDate ? moment(f.scrapDate) : null}
|
||
onChange={(_, ds) => updateOcrConfirmField('scrapDate', ds)}
|
||
style={{ width: '100%' }}
|
||
/>
|
||
</Form.Item>
|
||
<Form.Item label={<span style={{ fontWeight: 600 }}>检验有效期至</span>} required>
|
||
<DatePicker
|
||
disabled={fieldDisabled}
|
||
value={f.expireDate ? moment(f.expireDate) : null}
|
||
onChange={(_, ds) => updateOcrConfirmField('expireDate', ds)}
|
||
style={{ width: '100%' }}
|
||
/>
|
||
</Form.Item>
|
||
</div>
|
||
);
|
||
}
|
||
if (certType === 'transportLicense') {
|
||
return (
|
||
<div className="lc-form-grid">
|
||
<Form.Item label={<span style={{ fontWeight: 600 }}>经营许可证号</span>} required>
|
||
<Input
|
||
disabled={fieldDisabled}
|
||
value={f.licenseNo || ''}
|
||
onChange={(e) => updateOcrConfirmField('licenseNo', e.target.value)}
|
||
placeholder="例如：交字31011..."
|
||
/>
|
||
</Form.Item>
|
||
<Form.Item label={<span style={{ fontWeight: 600 }}>核发时间</span>} required>
|
||
<DatePicker
|
||
disabled={fieldDisabled}
|
||
value={f.issueDate ? moment(f.issueDate) : null}
|
||
onChange={(_, ds) => updateOcrConfirmField('issueDate', ds)}
|
||
style={{ width: '100%' }}
|
||
/>
|
||
</Form.Item>
|
||
<Form.Item label={<span style={{ fontWeight: 600 }}>证件有效期</span>} required>
|
||
<DatePicker
|
||
disabled={fieldDisabled}
|
||
value={f.expireDate ? moment(f.expireDate) : null}
|
||
onChange={(_, ds) => updateOcrConfirmField('expireDate', ds)}
|
||
style={{ width: '100%' }}
|
||
/>
|
||
</Form.Item>
|
||
<Form.Item label={<span style={{ fontWeight: 600 }}>审验有效期</span>} required>
|
||
<DatePicker
|
||
disabled={fieldDisabled}
|
||
value={f.inspectValidUntil ? moment(f.inspectValidUntil) : null}
|
||
onChange={(_, ds) => updateOcrConfirmField('inspectValidUntil', ds)}
|
||
style={{ width: '100%' }}
|
||
/>
|
||
</Form.Item>
|
||
</div>
|
||
);
|
||
}
|
||
return (
|
||
<div className="lc-form-grid">
|
||
<Form.Item label={<span style={{ fontWeight: 600 }}>下次检验日期</span>} required>
|
||
<DatePicker
|
||
disabled={fieldDisabled}
|
||
value={f.nextInspectDate ? moment(f.nextInspectDate) : null}
|
||
onChange={(_, ds) => updateOcrConfirmField('nextInspectDate', ds)}
|
||
style={{ width: '100%' }}
|
||
placeholder="选择检验截止日期"
|
||
/>
|
||
</Form.Item>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const batchOcrTaskColumns = [
|
||
{ title: '操作人', dataIndex: 'operator', width: 88 },
|
||
{ title: '操作时间', dataIndex: 'operateTime', width: 168 },
|
||
{ title: '证照类型', dataIndex: 'certLabel', width: 140 },
|
||
{ title: '照片数量', dataIndex: 'photoCount', width: 88, align: 'center' },
|
||
{
|
||
title: 'OCR结果',
|
||
key: 'ocrStats',
|
||
width: 128,
|
||
render: (_, record) => {
|
||
if (record.status !== 'done') return <span style={{ color: '#94a3b8' }}>—</span>;
|
||
return (
|
||
<Space size={4} wrap>
|
||
<Tag color="success" style={{ margin: 0 }}>成功 {record.ocrSuccessCount ?? 0}</Tag>
|
||
<Tag color="error" style={{ margin: 0 }}>失败 {record.ocrFailCount ?? 0}</Tag>
|
||
</Space>
|
||
);
|
||
}
|
||
},
|
||
{
|
||
title: '处理进度',
|
||
dataIndex: 'progress',
|
||
width: 160,
|
||
render: (val, record) => (
|
||
<Progress percent={val} size="small" status={record.status === 'done' ? 'success' : 'active'} />
|
||
)
|
||
},
|
||
{
|
||
title: '操作',
|
||
key: 'action',
|
||
width: 88,
|
||
render: (_, record) => (
|
||
<Button
|
||
type="link"
|
||
size="small"
|
||
disabled={record.progress < 100}
|
||
style={{ padding: 0, fontWeight: 600 }}
|
||
onClick={() => openOcrConfirm(record)}
|
||
>
|
||
{record.confirmDone ? '已确认' : '逐张确认'}
|
||
</Button>
|
||
)
|
||
}
|
||
];
|
||
|
||
const filterVehiclesByFilters = (vehicles, f, kpi) => {
|
||
const plateKey = (f.plateNo || '').trim().toLowerCase();
|
||
const multiPlates = parseMultiPlates(f.plateNos);
|
||
const vinKey = (f.vin || '').trim().toLowerCase();
|
||
const brandKey = (f.brand || '').trim().toLowerCase();
|
||
const modelKey = (f.model || '').trim().toLowerCase();
|
||
|
||
return vehicles.filter((v) => {
|
||
const plateUpper = v.plateNo.toUpperCase();
|
||
if (multiPlates.length) {
|
||
if (!multiPlates.includes(plateUpper)) return false;
|
||
} else if (plateKey && !v.plateNo.toLowerCase().includes(plateKey)) return false;
|
||
if (vinKey && !v.vin.toLowerCase().includes(vinKey)) return false;
|
||
if (brandKey && !v.brand.toLowerCase().includes(brandKey)) return false;
|
||
if (modelKey && !v.model.toLowerCase().includes(modelKey)) return false;
|
||
if (f.operateStatus !== '全部' && v.status !== f.operateStatus) return false;
|
||
if (!matchKpiFilter(v.plateNo, kpi)) return false;
|
||
return true;
|
||
});
|
||
};
|
||
|
||
const handleListFilterQuery = () => {
|
||
const plates = parseMultiPlates(multiPlateDraft);
|
||
const next = {
|
||
...listFilters,
|
||
plateNos: multiPlateDraft.trim(),
|
||
plateNo: plates.length ? '' : listFilters.plateNo,
|
||
};
|
||
setListFilters(next);
|
||
setAppliedFilters(next);
|
||
setMultiPlateOpen(false);
|
||
const hitCount = filterVehiclesByFilters(MOCK_VEHICLES, next, kpiFilter).length;
|
||
if (plates.length) {
|
||
message.success(`已按 ${plates.length} 个车牌筛选，命中 ${hitCount} 条记录`);
|
||
} else {
|
||
message.success(`已按筛选条件更新列表，共 ${hitCount} 条记录`);
|
||
}
|
||
};
|
||
|
||
const handleListFilterReset = () => {
|
||
const next = { ...DEFAULT_LIST_FILTERS };
|
||
setListFilters(next);
|
||
setAppliedFilters(next);
|
||
setMultiPlateDraft('');
|
||
setMultiPlateOpen(false);
|
||
message.info('已重置筛选条件');
|
||
};
|
||
|
||
const appliedMultiPlates = useMemo(
|
||
() => parseMultiPlates(appliedFilters.plateNos),
|
||
[appliedFilters.plateNos]
|
||
);
|
||
|
||
const multiPlateTriggerText = useMemo(() => {
|
||
if (!appliedMultiPlates.length) return '';
|
||
if (appliedMultiPlates.length <= 2) return appliedMultiPlates.join('、');
|
||
return `已选 ${appliedMultiPlates.length} 个车牌`;
|
||
}, [appliedMultiPlates]);
|
||
|
||
const handleMultiPlateOpenChange = (open) => {
|
||
setMultiPlateOpen(open);
|
||
if (open) setMultiPlateDraft(listFilters.plateNos || '');
|
||
};
|
||
|
||
const handleMultiPlateDraftClear = () => {
|
||
setMultiPlateDraft('');
|
||
setListFilters((prev) => ({ ...prev, plateNos: '' }));
|
||
};
|
||
|
||
const renderFilterField = (label, control) => (
|
||
<div className="lc-filter-field">
|
||
<span className="lc-filter-field-label">{label}</span>
|
||
<div className="lc-filter-field-control">{control}</div>
|
||
</div>
|
||
);
|
||
|
||
// ==================== 车辆列表筛选逻辑 ====================
|
||
const filteredVehicles = useMemo(
|
||
() => sortVehiclesRetiredLast(filterVehiclesByFilters(MOCK_VEHICLES, appliedFilters, kpiFilter)),
|
||
[appliedFilters, allLicenses, kpiFilter]
|
||
);
|
||
|
||
// ==================== 列表台账表格列配置 ====================
|
||
const listColumns = [
|
||
{
|
||
title: '车牌号',
|
||
dataIndex: 'plateNo',
|
||
key: 'plateNo',
|
||
width: 96,
|
||
onHeaderCell: listColumnHeaderCell,
|
||
render: (plate, record) => (
|
||
<span
|
||
className={`lc-muted-text ${isRetiredVehicle(record) ? '' : ''}`}
|
||
style={{ fontWeight: 600, fontSize: 13, color: isRetiredVehicle(record) ? '#94a3b8' : '#0f172a' }}
|
||
>
|
||
{plate}
|
||
</span>
|
||
)
|
||
},
|
||
{
|
||
title: tableTitleMultiline('车辆识别代码', '（VIN码）'),
|
||
dataIndex: 'vin',
|
||
key: 'vin',
|
||
width: 112,
|
||
onHeaderCell: listColumnHeaderCell,
|
||
render: (vin, record) => (
|
||
<Tooltip title={vin}>
|
||
<span
|
||
className="lc-muted-text lc-cell-ellipsis"
|
||
style={{ fontFamily: 'monospace', fontSize: 11, color: isRetiredVehicle(record) ? '#94a3b8' : '#475569' }}
|
||
>
|
||
{vin}
|
||
</span>
|
||
</Tooltip>
|
||
)
|
||
},
|
||
{
|
||
title: tableTitleMultiline('运营', '状态'),
|
||
dataIndex: 'status',
|
||
key: 'status',
|
||
width: 72,
|
||
onHeaderCell: listColumnHeaderCell,
|
||
render: (status) => (
|
||
<span style={{ fontSize: 13, fontWeight: 600, color: status === '退出运营' ? '#94a3b8' : '#334155' }}>
|
||
{status}
|
||
</span>
|
||
)
|
||
},
|
||
{
|
||
title: '品牌',
|
||
dataIndex: 'brand',
|
||
key: 'brand',
|
||
width: 72,
|
||
onHeaderCell: listColumnHeaderCell,
|
||
render: (brand, record) => (
|
||
<span className="lc-muted-text" style={{ fontSize: 13, fontWeight: 600, color: isRetiredVehicle(record) ? '#94a3b8' : '#0f172a' }}>
|
||
{brand}
|
||
</span>
|
||
)
|
||
},
|
||
{
|
||
title: '型号',
|
||
dataIndex: 'model',
|
||
key: 'model',
|
||
width: 108,
|
||
onHeaderCell: listColumnHeaderCell,
|
||
render: (model, record) => (
|
||
<Tooltip title={model}>
|
||
<span
|
||
className="lc-muted-text lc-cell-ellipsis"
|
||
style={{ fontSize: 12, color: isRetiredVehicle(record) ? '#94a3b8' : '#475569' }}
|
||
>
|
||
{model}
|
||
</span>
|
||
</Tooltip>
|
||
)
|
||
},
|
||
{
|
||
title: tableTitleMultiline('行驶证', '到期时间'),
|
||
key: 'driverLicense',
|
||
width: 92,
|
||
onHeaderCell: listColumnHeaderCell,
|
||
render: (record) => {
|
||
const status = getLicenseStatus(record.plateNo, 'driverLicense');
|
||
const dateVal = allLicenses[record.plateNo]?.driverLicense?.expireDate;
|
||
const muted = isRetiredVehicle(record);
|
||
|
||
return (
|
||
<div>
|
||
<div style={{ fontSize: 12, fontWeight: 600, color: muted ? '#94a3b8' : (dateVal ? '#334155' : '#94a3b8') }}>
|
||
{dateVal || '—'}
|
||
</div>
|
||
<div className="lc-list-date-cell-status">
|
||
{renderListLicenseStatusBadge(status)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
},
|
||
{
|
||
title: tableTitleMultiline('道路运输证', '证件有效期'),
|
||
key: 'transportLicenseExpire',
|
||
width: 92,
|
||
onHeaderCell: listColumnHeaderCell,
|
||
render: (record) => {
|
||
const status = getLicenseStatus(record.plateNo, 'transportLicense', { dateField: 'expireDate' });
|
||
const dateVal = allLicenses[record.plateNo]?.transportLicense?.expireDate;
|
||
const muted = isRetiredVehicle(record);
|
||
|
||
return (
|
||
<div>
|
||
<div style={{ fontSize: 12, fontWeight: 600, color: muted ? '#94a3b8' : (dateVal ? '#334155' : '#94a3b8') }}>
|
||
{dateVal || '—'}
|
||
</div>
|
||
<div className="lc-list-date-cell-status">
|
||
{renderListLicenseStatusBadge(status)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
},
|
||
{
|
||
title: tableTitleMultiline('道路运输证', '审验有效期'),
|
||
key: 'transportLicenseInspect',
|
||
width: 92,
|
||
onHeaderCell: listColumnHeaderCell,
|
||
render: (record) => {
|
||
const status = getLicenseStatus(record.plateNo, 'transportLicense', { dateField: 'inspectValidUntil' });
|
||
const dateVal = allLicenses[record.plateNo]?.transportLicense?.inspectValidUntil;
|
||
const muted = isRetiredVehicle(record);
|
||
|
||
return (
|
||
<div>
|
||
<div style={{ fontSize: 12, fontWeight: 600, color: muted ? '#94a3b8' : (dateVal ? '#334155' : '#94a3b8') }}>
|
||
{dateVal || '—'}
|
||
</div>
|
||
<div className="lc-list-date-cell-status">
|
||
{renderListLicenseStatusBadge(status)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
},
|
||
{
|
||
title: tableTitleMultiline('特种设备标识', '到期时间'),
|
||
key: 'specialEquipDecal',
|
||
width: 92,
|
||
onHeaderCell: listColumnHeaderCell,
|
||
render: (record) => {
|
||
const status = getLicenseStatus(record.plateNo, 'specialEquipDecal');
|
||
const dateVal = allLicenses[record.plateNo]?.specialEquipDecal?.nextInspectDate;
|
||
const muted = isRetiredVehicle(record);
|
||
|
||
return (
|
||
<div>
|
||
<div style={{ fontSize: 12, fontWeight: 600, color: muted ? '#94a3b8' : (dateVal ? '#334155' : '#94a3b8') }}>
|
||
{dateVal || '—'}
|
||
</div>
|
||
<div className="lc-list-date-cell-status">
|
||
{renderListLicenseStatusBadge(status)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
},
|
||
{
|
||
title: tableTitleMultiline('证件', '状态'),
|
||
key: 'allCertStatus',
|
||
width: 272,
|
||
onHeaderCell: listColumnHeaderCell,
|
||
render: (record) => {
|
||
const muted = isRetiredVehicle(record);
|
||
const labelColor = muted ? '#94a3b8' : '#64748b';
|
||
|
||
return (
|
||
<div className="lc-list-cert-status-grid">
|
||
{LIST_CERT_STATUS_ITEMS.map((item) => {
|
||
const st = getListCertStatus(record.plateNo, item);
|
||
return (
|
||
<Tooltip
|
||
key={item.key}
|
||
title={`${item.fullLabel}：${st.text}`}
|
||
>
|
||
<span className="lc-list-cert-status-item">
|
||
<Badge
|
||
status={mapLicenseTypeToBadge(st.type)}
|
||
text={<span style={{ fontSize: 10, color: labelColor }}>{item.label}</span>}
|
||
/>
|
||
</span>
|
||
</Tooltip>
|
||
);
|
||
})}
|
||
</div>
|
||
);
|
||
}
|
||
},
|
||
{
|
||
title: '操作',
|
||
key: 'action',
|
||
width: 64,
|
||
onHeaderCell: listColumnHeaderCell,
|
||
render: (record) => (
|
||
<Button
|
||
type="link"
|
||
size="small"
|
||
className="lc-action-btn"
|
||
style={{ fontWeight: 600, color: '#10b981', padding: 0 }}
|
||
onClick={() => goLicenseEditPage(record.plateNo, allLicenses)}
|
||
>
|
||
管理
|
||
</Button>
|
||
)
|
||
}
|
||
];
|
||
|
||
return (
|
||
<div className="lc-edit-page" style={{ padding: '24px 24px 80px', height: '100vh', display: 'flex', flexDirection: 'column', background: 'linear-gradient(165deg, #f1f5f9 0%, #f8fafc 50%, #f1f5f9 100%)', overflow: 'hidden', boxSizing: 'border-box' }}>
|
||
<style>{PAGE_STYLE}</style>
|
||
|
||
{/* ======================================================== */}
|
||
{/* ======================= 1. 列表台账视图 =================== */}
|
||
{/* ======================================================== */}
|
||
<div style={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
|
||
|
||
{/* 顶栏 */}
|
||
<div className="lc-page-header" style={{ marginBottom: 16, display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
|
||
<Button
|
||
type="default"
|
||
icon={<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ marginRight: 4, verticalAlign: 'middle' }}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>}
|
||
style={{ borderRadius: '8px', border: '1px solid #cbd5e1', fontWeight: 600, display: 'inline-flex', alignItems: 'center', boxShadow: '0 1px 2px rgba(0,0,0,0.05)', color: '#475569' }}
|
||
onClick={() => setPrdOpen(true)}
|
||
>
|
||
查看需求说明
|
||
</Button>
|
||
</div>
|
||
|
||
{/* 筛选条件 */}
|
||
<Card className="lc-filter-card" title="筛选条件" bordered={false}>
|
||
<div className="lc-filter-grid">
|
||
{renderFilterField('车牌号', (
|
||
<Input
|
||
placeholder={appliedMultiPlates.length ? '已启用多车牌筛选' : '请输入车牌号'}
|
||
allowClear
|
||
disabled={appliedMultiPlates.length > 0}
|
||
value={listFilters.plateNo}
|
||
onChange={e => setListFilters(prev => ({ ...prev, plateNo: e.target.value }))}
|
||
onPressEnter={handleListFilterQuery}
|
||
style={{ borderRadius: 8 }}
|
||
/>
|
||
))}
|
||
{renderFilterField('多车牌', (
|
||
<Popover
|
||
open={multiPlateOpen}
|
||
onOpenChange={handleMultiPlateOpenChange}
|
||
trigger="click"
|
||
placement="bottomLeft"
|
||
overlayClassName="lc-multi-plate-popover"
|
||
content={
|
||
<div className="lc-multi-plate-pop">
|
||
<div className="lc-multi-plate-pop-hint">
|
||
每行一个车牌号，可从 Excel 等批量复制粘贴；点击「查询」后列表展示全部命中车辆。
|
||
</div>
|
||
<Input.TextArea
|
||
value={multiPlateDraft}
|
||
onChange={(e) => setMultiPlateDraft(e.target.value)}
|
||
placeholder={'沪A03561F\n粤B58888F\n苏E33333'}
|
||
autoSize={{ minRows: 5, maxRows: 10 }}
|
||
style={{ borderRadius: 8, fontFamily: 'monospace', fontSize: 13 }}
|
||
/>
|
||
<div className="lc-multi-plate-pop-actions">
|
||
<Button size="small" onClick={handleMultiPlateDraftClear}>清空</Button>
|
||
<Button
|
||
size="small"
|
||
type="primary"
|
||
onClick={() => {
|
||
setListFilters((prev) => ({ ...prev, plateNos: multiPlateDraft.trim() }));
|
||
setMultiPlateOpen(false);
|
||
}}
|
||
>
|
||
收起
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
}
|
||
>
|
||
<Input
|
||
className="lc-multi-plate-trigger"
|
||
readOnly
|
||
allowClear={!!multiPlateTriggerText}
|
||
placeholder="点击输入多个车牌（每行一个）"
|
||
value={multiPlateTriggerText}
|
||
onClick={() => setMultiPlateOpen(true)}
|
||
onClear={(e) => {
|
||
e.stopPropagation();
|
||
handleMultiPlateDraftClear();
|
||
setAppliedFilters((prev) => ({ ...prev, plateNos: '' }));
|
||
}}
|
||
style={{ borderRadius: 8 }}
|
||
suffix={
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" strokeWidth="2" style={{ pointerEvents: 'none' }}>
|
||
<polyline points="6 9 12 15 18 9" />
|
||
</svg>
|
||
}
|
||
/>
|
||
</Popover>
|
||
))}
|
||
{renderFilterField('VIN码', (
|
||
<Input
|
||
placeholder="请输入车辆识别代码"
|
||
allowClear
|
||
value={listFilters.vin}
|
||
onChange={e => setListFilters(prev => ({ ...prev, vin: e.target.value }))}
|
||
onPressEnter={handleListFilterQuery}
|
||
style={{ borderRadius: 8 }}
|
||
/>
|
||
))}
|
||
{renderFilterField('品牌', (
|
||
<Select
|
||
placeholder="请选择或输入品牌"
|
||
allowClear
|
||
showSearch
|
||
value={listFilters.brand || undefined}
|
||
onChange={val => setListFilters(prev => ({ ...prev, brand: val || '' }))}
|
||
options={brandOptions}
|
||
filterOption={(input, option) => (option?.label || '').toLowerCase().includes(input.toLowerCase())}
|
||
style={{ width: '100%' }}
|
||
dropdownStyle={{ borderRadius: 8 }}
|
||
/>
|
||
))}
|
||
{renderFilterField('车型', (
|
||
<Select
|
||
placeholder="请选择或输入车型"
|
||
allowClear
|
||
showSearch
|
||
value={listFilters.model || undefined}
|
||
onChange={val => setListFilters(prev => ({ ...prev, model: val || '' }))}
|
||
options={modelOptions}
|
||
filterOption={(input, option) => (option?.label || '').toLowerCase().includes(input.toLowerCase())}
|
||
style={{ width: '100%' }}
|
||
dropdownStyle={{ borderRadius: 8 }}
|
||
/>
|
||
))}
|
||
{renderFilterField('运营状态', (
|
||
<Select
|
||
placeholder="全部"
|
||
value={listFilters.operateStatus}
|
||
onChange={val => setListFilters(prev => ({ ...prev, operateStatus: val }))}
|
||
style={{ width: '100%' }}
|
||
dropdownStyle={{ borderRadius: 8 }}
|
||
>
|
||
<Select.Option value="全部">全部</Select.Option>
|
||
<Select.Option value="租赁">租赁</Select.Option>
|
||
<Select.Option value="自营">自营</Select.Option>
|
||
<Select.Option value="库存">库存</Select.Option>
|
||
<Select.Option value="退出运营">退出运营</Select.Option>
|
||
</Select>
|
||
))}
|
||
</div>
|
||
<div className="lc-filter-actions">
|
||
<Button onClick={handleListFilterReset}>重置</Button>
|
||
<Button type="primary" onClick={handleListFilterQuery}>查询</Button>
|
||
</div>
|
||
</Card>
|
||
|
||
{/* 资质预警看板（筛选与列表之间） */}
|
||
<div className="lc-alert-stats-row">
|
||
{[
|
||
{
|
||
key: 'total',
|
||
type: 'total',
|
||
title: '监管车辆总数',
|
||
desc: '纳入证照台账管理的车辆',
|
||
val: stats.total,
|
||
icon: ICONS.vehicle
|
||
},
|
||
{
|
||
key: 'normal',
|
||
type: 'normal',
|
||
title: '资质全部正常',
|
||
desc: '行驶证/道路运输证/特种设备登记证/特种设备标志均已上传，并在有效期内',
|
||
val: stats.normal,
|
||
icon: ICONS.success
|
||
},
|
||
{
|
||
key: 'warning',
|
||
type: 'warning',
|
||
title: '证件临期预警',
|
||
desc: '行驶证≤90天 / 道路运输证≤60天 / 特种设备标识≤60天 / 安全阀≤60天 / 压力表≤60天',
|
||
val: stats.warning,
|
||
icon: ICONS.warning
|
||
},
|
||
{
|
||
key: 'expired',
|
||
type: 'expired',
|
||
title: '已逾期',
|
||
desc: '行驶证检验有效期到期 / 道路运输证有效期/检验时间到期 / 安全阀下次检验到期 / 压力表下次检验到期',
|
||
val: stats.expired,
|
||
icon: ICONS.warning
|
||
},
|
||
{
|
||
key: 'unuploaded',
|
||
type: 'unuploaded',
|
||
title: '证照待补录',
|
||
desc: '核心证照：行驶证、道路运输证、特种设备登记证、特种设备标识。任一类未上传影像即计为待补录。',
|
||
val: stats.unuploaded,
|
||
icon: ICONS.shield
|
||
}
|
||
].map(card => (
|
||
<div
|
||
key={card.key}
|
||
role="button"
|
||
tabIndex={0}
|
||
className={`lc-alert-card lc-alert-card--${card.type} lc-alert-card-clickable${kpiFilter === card.key ? ' lc-alert-card-active' : ''}`}
|
||
onClick={() => handleKpiCardClick(card.key)}
|
||
onKeyDown={(e) => {
|
||
if (e.key === 'Enter' || e.key === ' ') {
|
||
e.preventDefault();
|
||
handleKpiCardClick(card.key);
|
||
}
|
||
}}
|
||
>
|
||
<div className="lc-alert-card-tip-anchor">
|
||
<Tooltip title={card.desc} placement="topRight" overlayStyle={{ maxWidth: 340 }}>
|
||
<span
|
||
className="lc-alert-card-tip"
|
||
role="img"
|
||
aria-label={`${card.title}说明`}
|
||
onClick={(e) => e.stopPropagation()}
|
||
onMouseDown={(e) => e.stopPropagation()}
|
||
>
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
|
||
<circle cx="12" cy="12" r="10" />
|
||
<line x1="12" y1="16" x2="12" y2="12" />
|
||
<line x1="12" y1="8" x2="12.01" y2="8" />
|
||
</svg>
|
||
</span>
|
||
</Tooltip>
|
||
</div>
|
||
<div className="lc-alert-card-icon">{card.icon}</div>
|
||
<div className="lc-alert-card-main">
|
||
<div className="lc-alert-card-val">{card.val}</div>
|
||
<div className="lc-alert-card-title">{card.title}</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* 表格台账区域：图示左上，批量操作右上 */}
|
||
<div className="lc-table-section" style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
|
||
<div className="lc-table-toolbar">
|
||
<div className="lc-table-cert-legend-outer">
|
||
<span className="lc-table-cert-legend-label">证件状态图示</span>
|
||
{CERT_STATUS_LEGEND}
|
||
</div>
|
||
<div className="lc-table-toolbar-actions">
|
||
<Button
|
||
type="primary"
|
||
style={{ borderRadius: 8, fontWeight: 600, background: 'linear-gradient(135deg, #10b981 0%, #059669 100%)', border: 'none' }}
|
||
onClick={() => setBatchExportOpen(true)}
|
||
>
|
||
批量导出证照
|
||
</Button>
|
||
<Button
|
||
type="default"
|
||
style={{ borderRadius: 8, fontWeight: 600, borderColor: '#10b981', color: '#059669' }}
|
||
onClick={() => setBatchOcrOpen(true)}
|
||
>
|
||
批量上传证照
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
<div className="lc-table-card" style={{ flex: 1, overflowY: 'auto', display: 'flex', flexDirection: 'column' }}>
|
||
<Table
|
||
className="lc-list-table"
|
||
columns={listColumns}
|
||
dataSource={filteredVehicles}
|
||
rowKey="plateNo"
|
||
rowClassName={(record) => (record.status === '退出运营' ? 'lc-row-retired' : '')}
|
||
pagination={false}
|
||
locale={{ emptyText: <div style={{ padding: '40px 0' }}><svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" strokeWidth="1.5" style={{ marginBottom: 12 }}><circle cx="12" cy="12" r="10"/><line x1="8" y1="12" x2="16" y2="12"/></svg><div style={{ color: '#94a3b8' }}>暂无符合检索条件的证照车辆</div></div> }}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* ======================================================== */}
|
||
{/* ======================= 2. 批量导出 / 批量上传 ============== */}
|
||
{/* ======================================================== */}
|
||
|
||
<Modal
|
||
open={batchExportOpen}
|
||
title="批量导出证照"
|
||
width={520}
|
||
centered
|
||
okText="开始导出"
|
||
cancelText="取消"
|
||
onCancel={() => setBatchExportOpen(false)}
|
||
onOk={handleBatchExport}
|
||
>
|
||
<Alert
|
||
type="info"
|
||
showIcon
|
||
style={{ marginBottom: 14, borderRadius: 10 }}
|
||
message="导出规则"
|
||
description={
|
||
<ul style={{ margin: '6px 0 0', paddingLeft: 18, fontSize: 12, color: '#475569' }}>
|
||
{BATCH_EXPORT_RULE_LINES.map((line) => (
|
||
<li key={line} style={{ marginBottom: 4 }}>{line}</li>
|
||
))}
|
||
</ul>
|
||
}
|
||
/>
|
||
<Checkbox.Group
|
||
className="lc-batch-export-types"
|
||
value={exportCertTypes}
|
||
onChange={setExportCertTypes}
|
||
>
|
||
{CERT_EXPORT_OPTIONS.map((opt) => (
|
||
<Checkbox key={opt.key} value={opt.key}>{opt.label}</Checkbox>
|
||
))}
|
||
</Checkbox.Group>
|
||
<div style={{ marginTop: 14, fontSize: 12, color: '#94a3b8' }}>
|
||
当前筛选命中 <strong style={{ color: '#0f172a' }}>{filteredVehicles.length}</strong> 辆车
|
||
</div>
|
||
</Modal>
|
||
|
||
<Modal
|
||
open={batchOcrOpen}
|
||
title="批量上传证照"
|
||
width={880}
|
||
centered
|
||
footer={null}
|
||
onCancel={() => setBatchOcrOpen(false)}
|
||
destroyOnClose={false}
|
||
>
|
||
<Card size="small" bordered={false} style={{ background: '#f8fafc', borderRadius: 12, marginBottom: 16 }}>
|
||
<div style={{ marginBottom: 12, fontWeight: 600, color: '#0f172a' }}>新建上传任务</div>
|
||
<div style={{ marginBottom: 12 }}>
|
||
<span style={{ fontSize: 12, color: '#64748b', marginRight: 12 }}>证照类型</span>
|
||
<Select
|
||
value={batchOcrCertType}
|
||
onChange={setBatchOcrCertType}
|
||
style={{ minWidth: 260 }}
|
||
options={BATCH_UPLOAD_CERT_OPTIONS.map((o) => ({ label: o.label, value: o.key }))}
|
||
/>
|
||
</div>
|
||
<p style={{ margin: '0 0 12px', fontSize: 12, color: '#64748b', lineHeight: 1.5 }}>
|
||
登记证、特种设备使用登记证：识别车牌通过后仅需确认同步照片；行驶证、道路运输证、特种设备使用标识需核对识别字段。
|
||
</p>
|
||
<Upload
|
||
multiple
|
||
accept="image/*"
|
||
listType="picture-card"
|
||
fileList={batchOcrFileList}
|
||
beforeUpload={() => false}
|
||
onChange={({ fileList }) => setBatchOcrFileList(fileList)}
|
||
>
|
||
{batchOcrFileList.length < 20 && (
|
||
<div>
|
||
<div style={{ fontSize: 24, color: '#94a3b8' }}>+</div>
|
||
<div style={{ marginTop: 8, fontSize: 12 }}>上传照片</div>
|
||
</div>
|
||
)}
|
||
</Upload>
|
||
<div style={{ marginTop: 12, display: 'flex', justifyContent: 'flex-end' }}>
|
||
<Button type="primary" onClick={handleStartBatchOcr} style={{ borderRadius: 8, fontWeight: 600 }}>
|
||
生成上传任务
|
||
</Button>
|
||
</div>
|
||
</Card>
|
||
<div style={{ fontWeight: 600, marginBottom: 8, color: '#0f172a' }}>上传任务列表</div>
|
||
<Table
|
||
size="small"
|
||
rowKey="id"
|
||
columns={batchOcrTaskColumns}
|
||
dataSource={ocrTasks}
|
||
pagination={{ pageSize: 5, showSizeChanger: false }}
|
||
locale={{ emptyText: '暂无任务，请在上方上传照片并生成任务' }}
|
||
scroll={{ x: 880 }}
|
||
/>
|
||
</Modal>
|
||
|
||
<Modal
|
||
open={ocrConfirmOpen}
|
||
title={
|
||
ocrConfirmTask && currentOcrConfirmGroup
|
||
? `上传确认 · ${ocrConfirmTask.certLabel} · ${currentOcrConfirmGroup.plateNo || '未识别车牌'}`
|
||
: '上传确认（逐张确认）'
|
||
}
|
||
width={960}
|
||
centered
|
||
footer={
|
||
<Space>
|
||
<Button onClick={closeOcrConfirm}>取消</Button>
|
||
{currentOcrConfirmGroup && !currentOcrConfirmGroup.plateValid ? (
|
||
<Button onClick={handleOcrConfirmSkip}>跳过本张</Button>
|
||
) : null}
|
||
<Button
|
||
type="primary"
|
||
disabled={!currentOcrConfirmGroup?.plateValid}
|
||
onClick={handleOcrConfirmSubmit}
|
||
>
|
||
{isBatchUploadPhotoOnlyType(ocrConfirmTask?.certType)
|
||
? (ocrConfirmGroupIdx >= ocrConfirmTotalSheets - 1 ? '提交并同步照片' : '提交并同步照片，下一张')
|
||
: (ocrConfirmGroupIdx >= ocrConfirmTotalSheets - 1 ? '提交并更新' : '提交并更新，下一张')}
|
||
</Button>
|
||
</Space>
|
||
}
|
||
onCancel={closeOcrConfirm}
|
||
>
|
||
{currentOcrConfirmGroup && (
|
||
<div>
|
||
<div className="lc-batch-ocr-step-bar">
|
||
<div>
|
||
<div style={{ fontSize: 12, color: '#64748b', marginBottom: 2 }}>逐张确认进度</div>
|
||
<div className="lc-batch-ocr-step-val">
|
||
当前 {ocrConfirmGroupIdx + 1} / {ocrConfirmTotalSheets} 张
|
||
</div>
|
||
</div>
|
||
<Tag color={currentOcrConfirmGroup.plateValid ? 'success' : 'error'}>
|
||
{currentOcrConfirmGroup.plateValid
|
||
? (isBatchUploadPhotoOnlyType(ocrConfirmTask?.certType) ? '可同步照片' : '可提交更新')
|
||
: '车牌校验失败'}
|
||
</Tag>
|
||
</div>
|
||
<div className="lc-batch-ocr-confirm">
|
||
<div className="lc-batch-ocr-photos">
|
||
<div style={{ fontSize: 12, fontWeight: 600, color: '#475569', marginBottom: 8 }}>
|
||
本车牌上传照片（共 {currentOcrConfirmGroup.items.length} 张）
|
||
</div>
|
||
<div className="lc-batch-ocr-photo-grid">
|
||
{currentOcrConfirmGroup.items.map((it, idx) => (
|
||
<div
|
||
key={idx}
|
||
className={`lc-batch-ocr-thumb${idx === ocrConfirmPhotoIdx ? ' active' : ''}`}
|
||
onClick={() => setOcrConfirmPhotoIdx(idx)}
|
||
title={it.photoName || `照片${idx + 1}`}
|
||
>
|
||
<img src={it.photoUrl} alt={it.photoName || `图${idx + 1}`} />
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div
|
||
className="lc-batch-ocr-photo-main"
|
||
onClick={() => {
|
||
const url = currentOcrConfirmGroup.items[ocrConfirmPhotoIdx]?.photoUrl;
|
||
if (url) { setPreviewUrl(url); setPreviewOpen(true); }
|
||
}}
|
||
>
|
||
<img
|
||
src={currentOcrConfirmGroup.items[ocrConfirmPhotoIdx]?.photoUrl}
|
||
alt="证照预览"
|
||
/>
|
||
</div>
|
||
<div style={{ fontSize: 12, color: '#64748b', marginTop: 8 }}>
|
||
预览第 {ocrConfirmPhotoIdx + 1} 张 · 点击大图可放大
|
||
</div>
|
||
</div>
|
||
<div>
|
||
{isBatchUploadPhotoOnlyType(ocrConfirmTask?.certType) ? (
|
||
<>
|
||
{renderOcrPlateValidation(currentOcrConfirmGroup)}
|
||
<Alert
|
||
type="info"
|
||
showIcon
|
||
message="仅同步照片至台账"
|
||
description="登记证、特种设备使用登记证不识别业务字段；车牌校验通过后，将本页照片写入该车对应证照。"
|
||
style={{ borderRadius: 10 }}
|
||
/>
|
||
</>
|
||
) : (
|
||
<>
|
||
<div style={{ marginBottom: 12, fontWeight: 700, color: '#0f172a' }}>
|
||
识别字段（可编辑，提交后写入该车辆证照）
|
||
</div>
|
||
{renderOcrPlateValidation(currentOcrConfirmGroup)}
|
||
<Form layout="vertical">
|
||
{renderOcrConfirmFields(ocrConfirmTask?.certType, currentOcrConfirmGroup)}
|
||
</Form>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</Modal>
|
||
|
||
{/* ======================================================== */}
|
||
{/* ======================= 4. 公共大图/PRD 弹窗 ============== */}
|
||
{/* ======================================================== */}
|
||
|
||
{/* 照片预览大图弹窗 */}
|
||
<Modal
|
||
open={previewOpen}
|
||
title="证件照片高清预览"
|
||
footer={null}
|
||
onCancel={() => setPreviewOpen(false)}
|
||
width={720}
|
||
centered
|
||
>
|
||
<img src={previewUrl} style={{ width: '100%', borderRadius: 8, objectFit: 'contain' }} alt="大图" />
|
||
</Modal>
|
||
|
||
{/* 需求说明弹窗（产品经理视角 PRD） */}
|
||
<Modal
|
||
open={prdOpen}
|
||
title={
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 17, fontWeight: 800, color: '#0f172a' }}>
|
||
<span style={{
|
||
width: 28,
|
||
height: 28,
|
||
borderRadius: 6,
|
||
background: 'linear-gradient(135deg, #10B981 0%, #059669 100%)',
|
||
display: 'inline-flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
color: '#fff',
|
||
fontSize: 14
|
||
}}>📋</span>
|
||
<span>车辆证照管理 · 产品需求说明（PRD）</span>
|
||
</div>
|
||
}
|
||
footer={[
|
||
<Button key="close" type="primary" style={{ borderRadius: 8, background: 'linear-gradient(135deg, #10B981 0%, #059669 100%)', border: 'none' }} onClick={() => setPrdOpen(false)}>
|
||
我已了解
|
||
</Button>
|
||
]}
|
||
onCancel={() => setPrdOpen(false)}
|
||
width={980}
|
||
centered
|
||
style={{ top: 20 }}
|
||
bodyStyle={{ maxHeight: '72vh', overflowY: 'auto', padding: '12px 24px 24px' }}
|
||
>
|
||
<div style={{ fontSize: 13, lineHeight: 1.65, color: '#334155' }}>
|
||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 16, fontSize: 12, color: '#64748b' }}>
|
||
<Tag color="green">本页：证照台账列表（监管台）</Tag>
|
||
<Tag>模块路径：运维管理 > 车辆业务 > 证照管理</Tag>
|
||
<Tag>文档版本：V1.1</Tag>
|
||
<Tag>读者：产品 / 运营 / 合规 / 研发测试</Tag>
|
||
</div>
|
||
|
||
<Alert
|
||
type="info"
|
||
showIcon
|
||
style={{ marginBottom: 16, borderRadius: 12 }}
|
||
message={<span style={{ fontWeight: 700 }}>本文档说明「证照管理」列表页能力</span>}
|
||
description="单车证照录入、OCR、分卡保存等在独立页面「证照管理-编辑」；两页通过 session 车牌 + 本地证照库同步。维护页需求见其页面内「查看需求说明」。"
|
||
/>
|
||
|
||
<Tabs defaultActiveKey="core" size="middle" tabBarGutter={12} type="card" className="lc-prd-tabs">
|
||
<Tabs.TabPane tab="⭐ 核心逻辑" key="core">
|
||
<div style={{ marginTop: 10 }}>
|
||
<div style={{ background: 'linear-gradient(135deg, #ecfdf5 0%, #f8fafc 100%)', border: '2px solid #6ee7b7', borderRadius: 12, padding: '14px 18px', marginBottom: 16 }}>
|
||
<div style={{ fontWeight: 800, fontSize: 15, color: '#047857', marginBottom: 10 }}>产品定位（本页）</div>
|
||
<p style={{ margin: '0 0 8px' }}>
|
||
<strong>监管台：</strong>对全量车辆证照进行<strong>检索、预警、批量导出/上传、进入单车维护</strong>，不承担逐车表单编辑。
|
||
</p>
|
||
<p style={{ margin: 0 }}>
|
||
<strong>价值：</strong>让合规专员「先看见风险车辆 → 再处理单车」，批量作业与台账维护分工清晰。
|
||
</p>
|
||
</div>
|
||
|
||
<div style={{ fontWeight: 800, fontSize: 14, color: '#0f172a', marginBottom: 10 }}>端到端主流程</div>
|
||
<ol style={{ paddingLeft: 20, margin: '0 0 18px', lineHeight: 1.75 }}>
|
||
<li><strong>进入列表</strong> → 默认展示全量监管车辆（退出运营置底、行置灰）</li>
|
||
<li><strong>筛选 / 点击看板</strong> → 缩小待处理范围（看板计数不随筛选变，见规则②）</li>
|
||
<li><strong>行内读数</strong> → 到期列 +「证件状态」八类状态点（双行四列）</li>
|
||
<li><strong>单车维护</strong> →「管理」进入「证照管理-编辑」，分卡保存后回写列表与看板</li>
|
||
<li><strong>批量作业</strong> → 按当前筛选结果导出 ZIP，或批量上传 OCR 任务确认入库</li>
|
||
</ol>
|
||
|
||
<div style={{ fontWeight: 800, fontSize: 14, color: '#b91c1c', marginBottom: 10 }}>【重点】五条必读业务规则</div>
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 18 }}>
|
||
<div style={{ background: '#fffbeb', border: '1px solid #fcd34d', borderRadius: 10, padding: '10px 14px' }}>
|
||
<strong style={{ color: '#92400e' }}>① 运营状态归并</strong>
|
||
<span style={{ color: '#78350f' }}> — 主数据「可运营」「待运营」在本模块统一为「库存」；筛选「库存」须命中上述车辆；列表与维护页一致。</span>
|
||
</div>
|
||
<div style={{ background: '#eff6ff', border: '1px solid #93c5fd', borderRadius: 10, padding: '10px 14px' }}>
|
||
<strong style={{ color: '#1d4ed8' }}>② 看板 vs 筛选</strong>
|
||
<span style={{ color: '#1e3a8a' }}> — 看板按<strong>全量台账</strong>统计，不随筛选变化；点击看板仅过滤<strong>列表</strong>，可与筛选叠加。</span>
|
||
</div>
|
||
<div style={{ background: '#fef2f2', border: '1px solid #fecaca', borderRadius: 10, padding: '10px 14px' }}>
|
||
<strong style={{ color: '#991b1b' }}>③ 临期 / 逾期口径</strong>
|
||
<span style={{ color: '#7f1d1d' }}> — 行驶证 ≤90 天临期；运输证<strong>证件有效期、审验有效期</strong>分列展示、分别算状态；特设标 / 安全阀 / 压力表 ≤60 天临期；≤0 天为已到期。</span>
|
||
</div>
|
||
<div style={{ background: '#f5f3ff', border: '1px solid #c4b5fd', borderRadius: 10, padding: '10px 14px' }}>
|
||
<strong style={{ color: '#5b21b6' }}>④ 批量上传</strong>
|
||
<span style={{ color: '#4c1d95' }}> — OCR 车牌须在台账；按车牌聚合确认；登记证 / 特种设备使用登记证<strong>仅同步照片</strong>。</span>
|
||
</div>
|
||
<div style={{ background: '#f0fdf4', border: '1px solid #86efac', borderRadius: 10, padding: '10px 14px' }}>
|
||
<strong style={{ color: '#166534' }}>⑤ 数据同步</strong>
|
||
<span style={{ color: '#14532d' }}> — 「管理」写 session 车牌；维护页保存、批量确认写回证照库，列表 KPI 与行状态联动更新。</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ fontWeight: 700, color: '#0f172a', marginBottom: 8 }}>看板五项指标（点击可筛列表，口径以 ⓘ 为准）</div>
|
||
<table style={{ width: '100%', borderCollapse: 'collapse', border: '1px solid #e2e8f0', fontSize: 12 }}>
|
||
<thead>
|
||
<tr style={{ background: '#f8fafc' }}>
|
||
<th style={{ padding: '8px 12px', textAlign: 'left', borderBottom: '1px solid #e2e8f0' }}>指标</th>
|
||
<th style={{ padding: '8px 12px', textAlign: 'left', borderBottom: '1px solid #e2e8f0' }}>统计逻辑</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td style={{ padding: '8px 12px', borderBottom: '1px solid #f1f5f9', fontWeight: 600 }}>监管车辆总数</td><td style={{ padding: '8px 12px', borderBottom: '1px solid #f1f5f9' }}>全部台账车辆；点击恢复全量</td></tr>
|
||
<tr><td style={{ padding: '8px 12px', borderBottom: '1px solid #f1f5f9', fontWeight: 600 }}>资质全部正常</td><td style={{ padding: '8px 12px', borderBottom: '1px solid #f1f5f9' }}>行驶证 + 运输证（证件有效期、审验有效期）均在有效期内</td></tr>
|
||
<tr><td style={{ padding: '8px 12px', borderBottom: '1px solid #f1f5f9', fontWeight: 600 }}>证件临期预警</td><td style={{ padding: '8px 12px', borderBottom: '1px solid #f1f5f9' }}>行驶证 90 天内；运输证/特设标/安全阀/压力表 60 天内（运输证两日期任一即计入）</td></tr>
|
||
<tr><td style={{ padding: '8px 12px', borderBottom: '1px solid #f1f5f9', fontWeight: 600 }}>已逾期</td><td style={{ padding: '8px 12px', borderBottom: '1px solid #f1f5f9' }}>行驶证到期；运输证证件或审验到期；安全阀/压力表下次检验到期</td></tr>
|
||
<tr><td style={{ padding: '8px 12px', fontWeight: 600 }}>证照待补录</td><td style={{ padding: '8px 12px' }}>四类核心证照任一未上传：行驶证、道路运输证、特种设备使用登记证、特种设备使用标识</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</Tabs.TabPane>
|
||
|
||
<Tabs.TabPane tab="📊 本页功能" key="list">
|
||
<div style={{ marginTop: 10 }}>
|
||
<div style={{ fontWeight: 700, color: '#0f172a', marginBottom: 8 }}>1. 页面结构（自上而下）</div>
|
||
<ol style={{ paddingLeft: 20, margin: '0 0 16px' }}>
|
||
<li>右上角「查看需求说明」（本文档）</li>
|
||
<li><strong>筛选条件</strong>：三列网格；「查询」生效、「重置」清空</li>
|
||
<li><strong>资质预警看板</strong>：五项 KPI，ⓘ 看口径，点击筛列表</li>
|
||
<li><strong>证照台账表格</strong>：左上图例、右上批量导出/上传</li>
|
||
</ol>
|
||
|
||
<div style={{ fontWeight: 700, color: '#0f172a', marginBottom: 8 }}>2. 筛选逻辑</div>
|
||
<table style={{ width: '100%', borderCollapse: 'collapse', border: '1px solid #e2e8f0', marginBottom: 12, fontSize: 12 }}>
|
||
<thead>
|
||
<tr style={{ background: '#f8fafc' }}>
|
||
<th style={{ padding: '8px 12px', textAlign: 'left', borderBottom: '1px solid #e2e8f0' }}>筛选项</th>
|
||
<th style={{ padding: '8px 12px', textAlign: 'left', borderBottom: '1px solid #e2e8f0' }}>规则</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td style={{ padding: '8px 12px', borderBottom: '1px solid #f1f5f9' }}>车牌号</td><td style={{ padding: '8px 12px', borderBottom: '1px solid #f1f5f9' }}>模糊匹配；启用多车牌时禁用</td></tr>
|
||
<tr><td style={{ padding: '8px 12px', borderBottom: '1px solid #f1f5f9', fontWeight: 600, color: '#b45309' }}>多车牌</td><td style={{ padding: '8px 12px', borderBottom: '1px solid #f1f5f9' }}><strong>点击输入框</strong>展开文本域，每行一个车牌（支持 Excel 粘贴）；点「查询」后<strong>精确匹配</strong>并展示全部命中，提示命中条数</td></tr>
|
||
<tr><td style={{ padding: '8px 12px', borderBottom: '1px solid #f1f5f9' }}>VIN码</td><td style={{ padding: '8px 12px', borderBottom: '1px solid #f1f5f9' }}>模糊匹配</td></tr>
|
||
<tr><td style={{ padding: '8px 12px', borderBottom: '1px solid #f1f5f9' }}>品牌 / 车型</td><td style={{ padding: '8px 12px', borderBottom: '1px solid #f1f5f9' }}>可搜索下拉，可清空</td></tr>
|
||
<tr><td style={{ padding: '8px 12px', fontWeight: 600, color: '#b45309' }}>运营状态</td><td style={{ padding: '8px 12px' }}>全部 / 租赁 / 自营 / <strong style={{ color: '#ea580c' }}>库存</strong> / 退出运营；选库存含主数据可运营、待运营</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<p style={{ fontSize: 12, color: '#64748b', margin: '0 0 16px' }}>筛选与看板点击可叠加；修改筛选项后须点「查询」才生效。</p>
|
||
|
||
<div style={{ fontWeight: 700, color: '#0f172a', marginBottom: 8 }}>3. 列表字段与交互</div>
|
||
<table style={{ width: '100%', borderCollapse: 'collapse', border: '1px solid #e2e8f0', fontSize: 12, marginBottom: 16 }}>
|
||
<thead>
|
||
<tr style={{ background: '#f8fafc' }}>
|
||
<th style={{ padding: '8px 12px', textAlign: 'left', borderBottom: '1px solid #e2e8f0' }}>列 / 能力</th>
|
||
<th style={{ padding: '8px 12px', textAlign: 'left', borderBottom: '1px solid #e2e8f0' }}>说明</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td style={{ padding: '8px 12px', borderBottom: '1px solid #f1f5f9' }}>基础信息</td><td style={{ padding: '8px 12px', borderBottom: '1px solid #f1f5f9' }}>车牌、VIN、运营状态、品牌、型号；表头过长字段支持两行展示</td></tr>
|
||
<tr><td style={{ padding: '8px 12px', borderBottom: '1px solid #f1f5f9' }}>三类到期列</td><td style={{ padding: '8px 12px', borderBottom: '1px solid #f1f5f9' }}>行驶证到期；运输证<strong>证件有效期</strong>与<strong>审验有效期</strong>分列；特种设备标识到期；日期下 Badge 单行展示（临期N天/逾期N天），悬停看全文</td></tr>
|
||
<tr><td style={{ padding: '8px 12px', borderBottom: '1px solid #f1f5f9', fontWeight: 600 }}>证件状态</td><td style={{ padding: '8px 12px', borderBottom: '1px solid #f1f5f9' }}><strong>八类证照</strong>双行四列：行驶/运输/登记/特种 · 特设标/加氢/安全阀/压力表；绿正常、橙临期、红到期、灰未上传（加氢：已绑定/未绑定）；运输证状态取两日期最严重</td></tr>
|
||
<tr><td style={{ padding: '8px 12px', borderBottom: '1px solid #f1f5f9', fontWeight: 600, color: '#059669' }}>管理</td><td style={{ padding: '8px 12px', borderBottom: '1px solid #f1f5f9' }}>跳转「证照管理-编辑」；<strong>无删除</strong></td></tr>
|
||
<tr><td style={{ padding: '8px 12px', borderBottom: '1px solid #f1f5f9' }}>退出运营</td><td style={{ padding: '8px 12px', borderBottom: '1px solid #f1f5f9' }}>行置灰，同筛选结果内<strong>固定排底部</strong>，仍可点管理</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div style={{ fontWeight: 700, color: '#0f172a', marginBottom: 8 }}>4. 批量导出证照</div>
|
||
<p style={{ fontSize: 12, color: '#64748b', margin: '0 0 8px' }}>入口：列表右上方。范围：<strong>当前筛选命中车辆</strong>（含看板筛选）。类型：7 类影像（<strong>不含加氢卡</strong>）。</p>
|
||
<ul style={{ paddingLeft: 20, margin: '0 0 10px', fontSize: 12 }}>
|
||
{BATCH_EXPORT_RULE_LINES.map((line) => (
|
||
<li key={line} style={{ marginBottom: 6 }}>{line}</li>
|
||
))}
|
||
</ul>
|
||
<div style={{ fontSize: 12, color: '#64748b', background: '#f8fafc', border: '1px solid #e2e8f0', borderRadius: 8, padding: '10px 14px', fontFamily: 'monospace', lineHeight: 1.6 }}>
|
||
证照批量导出_时间戳.zip → 按类型分文件夹 → 沪A03561F.jpg / 粤B58888F-1.jpg …
|
||
</div>
|
||
|
||
<div style={{ fontWeight: 700, color: '#0f172a', margin: '18px 0 8px' }}>5. 批量上传证照</div>
|
||
<p style={{ fontSize: 12, margin: '0 0 8px' }}>入口：列表右上方。一次任务仅选<strong>一种</strong>证照类型。</p>
|
||
<table style={{ width: '100%', borderCollapse: 'collapse', border: '1px solid #e2e8f0', fontSize: 12, marginBottom: 10 }}>
|
||
<thead>
|
||
<tr style={{ background: '#f8fafc' }}>
|
||
<th style={{ padding: '8px 12px', textAlign: 'left', borderBottom: '1px solid #e2e8f0' }}>阶段</th>
|
||
<th style={{ padding: '8px 12px', textAlign: 'left', borderBottom: '1px solid #e2e8f0' }}>逻辑要点</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td style={{ padding: '8px 12px', borderBottom: '1px solid #f1f5f9' }}>建任务</td><td style={{ padding: '8px 12px', borderBottom: '1px solid #f1f5f9' }}>多图上传 → 生成任务 → 列表展示 OCR 成功/失败条数、处理进度</td></tr>
|
||
<tr><td style={{ padding: '8px 12px', borderBottom: '1px solid #f1f5f9' }}>逐张确认</td><td style={{ padding: '8px 12px', borderBottom: '1px solid #f1f5f9' }}>按<strong>车牌聚合</strong>；页头「当前 M/总 N 张」为车牌数；同页展示该车牌全部照片</td></tr>
|
||
<tr><td style={{ padding: '8px 12px', borderBottom: '1px solid #f1f5f9', fontWeight: 600 }}>仅照片类</td><td style={{ padding: '8px 12px', borderBottom: '1px solid #f1f5f9' }}>登记证、特种设备使用登记证：车牌通过 →「提交并同步照片」</td></tr>
|
||
<tr><td style={{ padding: '8px 12px', borderBottom: '1px solid #f1f5f9' }}>字段类</td><td style={{ padding: '8px 12px', borderBottom: '1px solid #f1f5f9' }}>行驶证、道路运输证、特种设备使用标识：可编辑识别字段 →「提交并更新」</td></tr>
|
||
<tr><td style={{ padding: '8px 12px' }}>异常</td><td style={{ padding: '8px 12px' }}>车牌不在台账 → 失败，可「跳过本张」；全部确认后任务显示「已确认」</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</Tabs.TabPane>
|
||
|
||
<Tabs.TabPane tab="🔗 单车维护" key="maintain">
|
||
<div style={{ marginTop: 10 }}>
|
||
<Alert type="success" showIcon style={{ marginBottom: 14, borderRadius: 10 }} message="维护能力在独立页面「证照管理-编辑」" description="本列表页仅提供入口，不在此页编辑表单。" />
|
||
<ul style={{ paddingLeft: 20, margin: '0 0 14px', lineHeight: 1.75 }}>
|
||
<li><strong>进入：</strong>列表「管理」→ session 写入车牌 → 打开编辑页（支持 Axhub 导航）</li>
|
||
<li><strong>布局：</strong>左车辆信息 + 八类证照索引（状态点）；右八类卡片锚点滚动</li>
|
||
<li><strong>保存：</strong>分卡片「保存该项」，非整页提交；未保存切换车辆二次确认</li>
|
||
<li><strong>安全：</strong>行驶证/运输证 OCR 车牌须与当前车一致，否则阻断并清空无效图</li>
|
||
<li><strong>回写：</strong>保存后更新证照库，返回列表后看板与行状态刷新</li>
|
||
</ul>
|
||
<p style={{ fontSize: 12, color: '#64748b', margin: 0 }}>八类证照字段、照片生命周期、沪牌等级评定等详见「证照管理-编辑」页内 PRD。</p>
|
||
</div>
|
||
</Tabs.TabPane>
|
||
|
||
<Tabs.TabPane tab="⚙️ 业务规则" key="rules">
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginTop: 10, fontSize: 12 }}>
|
||
<div style={{ border: '2px solid #fbbf24', background: '#fffbeb', padding: '12px 14px', borderRadius: 8 }}>
|
||
<div style={{ fontWeight: 800, fontSize: 13, color: '#92400e', marginBottom: 8 }}>运营状态归并（接口必读）</div>
|
||
<table style={{ width: '100%', borderCollapse: 'collapse', background: '#fff', borderRadius: 6, overflow: 'hidden' }}>
|
||
<thead>
|
||
<tr style={{ background: '#fef3c7' }}>
|
||
<th style={{ padding: '8px 10px', textAlign: 'left', borderBottom: '1px solid #fde68a' }}>主数据</th>
|
||
<th style={{ padding: '8px 10px', textAlign: 'left', borderBottom: '1px solid #fde68a' }}>本模块展示</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td style={{ padding: '8px 10px', borderBottom: '1px solid #fef3c7' }}>租赁 / 自营 / 退出运营</td><td style={{ padding: '8px 10px', borderBottom: '1px solid #fef3c7' }}>同左</td></tr>
|
||
<tr style={{ background: '#fff7ed' }}><td style={{ padding: '8px 10px', borderBottom: '1px solid #fef3c7', fontWeight: 700, color: '#c2410c' }}>可运营、待运营</td><td style={{ padding: '8px 10px', borderBottom: '1px solid #fef3c7', fontWeight: 700, color: '#c2410c' }}>库存</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div style={{ borderLeft: '3px solid #10b981', background: '#f0fdf4', padding: '10px 14px', borderRadius: '0 8px 8px 0' }}>
|
||
<strong>到期感知阈值</strong>
|
||
<ul style={{ margin: '6px 0 0', paddingLeft: 18 }}>
|
||
<li>行驶证：≤90 天临期，≤0 天到期</li>
|
||
<li>道路运输证：证件有效期、审验有效期各算，≤60 天临期</li>
|
||
<li>特种设备标识 / 安全阀 / 压力表：下次检验 ≤60 天临期</li>
|
||
<li>登记类、特种设备使用登记证：有图无日期视为正常（列表状态点）</li>
|
||
</ul>
|
||
</div>
|
||
<div style={{ borderLeft: '3px solid #06b6d4', background: '#ecfeff', padding: '10px 14px', borderRadius: '0 8px 8px 0' }}>
|
||
<strong>批量与筛选</strong>
|
||
<p style={{ margin: '6px 0 0' }}>批量导出/上传均基于<strong>当前列表筛选结果</strong>（含 KPI 点击后的列表范围），与看板全量统计独立。</p>
|
||
</div>
|
||
</div>
|
||
</Tabs.TabPane>
|
||
|
||
<Tabs.TabPane tab="✅ 验收标准" key="accept">
|
||
<div style={{ marginTop: 10, fontSize: 12 }}>
|
||
<div style={{ fontWeight: 700, color: '#0f172a', marginBottom: 8 }}>列表页验收清单</div>
|
||
<ul style={{ paddingLeft: 20, margin: '0 0 14px', lineHeight: 1.7 }}>
|
||
<li>可运营/待运营展示为库存；筛库存可命中</li>
|
||
<li>多车牌：每行一车、查询后精确匹配并提示条数</li>
|
||
<li>看板全量统计；点击看板仅筛列表；ⓘ 展示口径</li>
|
||
<li>八类证件状态双行展示；到期 Badge 不换行</li>
|
||
<li>批量导出 7 类 ZIP 命名规则；批量上传 5 类及确认流</li>
|
||
<li>管理跳转编辑页；保存后列表与 KPI 一致</li>
|
||
<li>退出运营置底置灰；无删除</li>
|
||
</ul>
|
||
<div style={{ fontWeight: 700, color: '#0f172a', marginBottom: 8 }}>本期不做</div>
|
||
<ul style={{ paddingLeft: 20, margin: 0, color: '#64748b' }}>
|
||
<li>列表页内嵌单车维护（已拆至编辑页）</li>
|
||
<li>台账车辆删除、批量导入台账</li>
|
||
<li>年审状态作列表筛选项</li>
|
||
<li>加氢卡页面内编辑（能源模块回写）</li>
|
||
</ul>
|
||
</div>
|
||
</Tabs.TabPane>
|
||
</Tabs>
|
||
</div>
|
||
</Modal>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Component;
|