524 lines
29 KiB
TypeScript
524 lines
29 KiB
TypeScript
import { IconAlertTriangle, IconChevronDown, IconChevronRight, IconChevronUp, IconClose, IconRefresh, IconSearch } from '@douyinfe/semi-icons';
|
|
import { Button, Card, Empty, Input, RadioGroup, Select, Spin, Table, Tag, TextArea } from '@douyinfe/semi-ui';
|
|
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
|
import { useDeferredValue, useEffect, useMemo, useState } from 'react';
|
|
import { api } from '../../api/client';
|
|
import type { ReconciliationIssue, ReconciliationSummary } from '../../api/types';
|
|
import { InlineError } from '../shared/AsyncState';
|
|
import { MobileFilterToggle } from '../shared/MobileFilterToggle';
|
|
import { PlatformTime } from '../shared/PlatformTime';
|
|
import { TablePagination } from '../shared/TablePagination';
|
|
import { WorkspaceMetricRail } from '../shared/WorkspaceMetricRail';
|
|
import { WorkspacePanelHeader } from '../shared/WorkspacePanelHeader';
|
|
import { WorkspaceSideSheet } from '../shared/WorkspaceSideSheet';
|
|
import { detailTriggerRow } from '../shared/detailTriggerRow';
|
|
import { QUERY_MEMORY } from '../queryPolicy';
|
|
import { useMobileLayout } from '../hooks/useMobileLayout';
|
|
|
|
const DESKTOP_PAGE_SIZE = 50;
|
|
const MOBILE_PAGE_SIZE = 20;
|
|
const activeStatuses = new Set(['pending', 'confirmed_source_a', 'confirmed_source_b']);
|
|
function statusLabel(status: string) {
|
|
return {
|
|
pending: '待处理',
|
|
confirmed_source_a: '确认来源 A',
|
|
confirmed_source_b: '确认来源 B',
|
|
no_action: '无需处理',
|
|
fixed: '已修复',
|
|
recovered: '已恢复'
|
|
}[status] ?? status;
|
|
}
|
|
|
|
function severityLabel(severity: string) {
|
|
return { critical: '严重', major: '重要', minor: '一般' }[severity] ?? severity;
|
|
}
|
|
|
|
function ReconciliationSeverityTag({ severity }: { severity: string }) {
|
|
const color = severity === 'critical' ? 'red' : severity === 'major' ? 'orange' : 'grey';
|
|
return <Tag className={`v2-reconcile-severity is-${severity}`} color={color} type="light" size="small">{severityLabel(severity)}</Tag>;
|
|
}
|
|
|
|
function ReconciliationStatusTag({ status }: { status: string }) {
|
|
const color = status === 'pending' ? 'orange' : status === 'confirmed_source_a' || status === 'confirmed_source_b' ? 'blue' : status === 'fixed' || status === 'recovered' ? 'green' : 'grey';
|
|
return <Tag className={`v2-reconcile-status is-${status}`} color={color} type="light" size="small">{statusLabel(status)}</Tag>;
|
|
}
|
|
|
|
function ruleLabel(rule: string) {
|
|
return {
|
|
DUPLICATE_PLATE: '重复车牌',
|
|
DUPLICATE_PHONE: '重复终端',
|
|
UNBOUND_SOURCE: '来源未绑定',
|
|
SOURCE_MISSING: '主车无来源',
|
|
POSITION_DRIFT: '位置漂移',
|
|
MILEAGE_REVERSE: '里程倒退',
|
|
MILEAGE_JUMP: '里程跳变',
|
|
MILEAGE_SOURCE_DIVERGENCE: '里程来源差异',
|
|
FLEET_COUNT_MISMATCH: '车辆总数不一致',
|
|
BUSINESS_SCOPE_UNBOUND: '业务车辆未绑定',
|
|
AUTH_SCOPE_BUSINESS_MISMATCH: '授权与业务范围不一致'
|
|
}[rule] ?? rule;
|
|
}
|
|
|
|
function categoryLabel(category: string) {
|
|
return {
|
|
identity: '身份',
|
|
source: '数据来源',
|
|
location: '实时位置',
|
|
mileage: '里程',
|
|
fleet: '车队口径',
|
|
business: '业务范围'
|
|
}[category] ?? category;
|
|
}
|
|
|
|
const evidenceLabels: Record<string, string> = {
|
|
date: '统计日期',
|
|
protocol: '协议来源',
|
|
protocols: '协议来源',
|
|
dailyMileageKm: '当日里程',
|
|
latestTotalMileageKm: '最新总里程',
|
|
derivedStartMileageKm: '推算起始总里程',
|
|
minimumKm: '来源最小里程',
|
|
maximumKm: '来源最大里程',
|
|
differenceKm: '来源里程差',
|
|
distanceM: '坐标差距',
|
|
sourceA: '来源 A 快照',
|
|
sourceB: '来源 B 快照',
|
|
longitude: '经度',
|
|
latitude: '纬度',
|
|
receivedAt: '平台接收时间',
|
|
sourceHash: '来源指纹',
|
|
vin: '车辆 VIN',
|
|
vins: '关联 VIN',
|
|
plate: '车牌',
|
|
vinCount: '关联车辆数',
|
|
identifierHash: '终端标识指纹',
|
|
latestSeen: '最近上报',
|
|
bindingSource: '绑定依据',
|
|
boundVehicles: '主车辆数',
|
|
sourceUnionVehicles: '来源车辆并集',
|
|
unboundSourceVehicles: '未绑定来源数',
|
|
scopeVersion: '业务范围版本',
|
|
customerId: '客户 ID',
|
|
customerName: '客户名称',
|
|
contractCode: '合同编号',
|
|
projectName: '项目名称',
|
|
departmentName: '所属部门',
|
|
responsibleUserName: '责任人',
|
|
userId: '账号 ID',
|
|
username: '账号',
|
|
customerRef: '客户标识',
|
|
grantValidFrom: '授权生效时间'
|
|
};
|
|
|
|
const mileageEvidenceKeys = new Set(['dailyMileageKm', 'latestTotalMileageKm', 'derivedStartMileageKm', 'minimumKm', 'maximumKm', 'differenceKm']);
|
|
|
|
function evidenceLabel(key: string) {
|
|
return evidenceLabels[key] ?? key;
|
|
}
|
|
|
|
function evidenceScalar(key: string, value: unknown) {
|
|
if (value == null || value === '') return '—';
|
|
if (typeof value === 'number') {
|
|
const formatted = value.toLocaleString('zh-CN', { maximumFractionDigits: 3 });
|
|
if (mileageEvidenceKeys.has(key)) return `${formatted} km`;
|
|
if (key === 'distanceM') return `${formatted} m`;
|
|
return formatted;
|
|
}
|
|
if (Array.isArray(value)) return value.map(String).join('、') || '—';
|
|
if (typeof value === 'boolean') return value ? '是' : '否';
|
|
return String(value);
|
|
}
|
|
|
|
function EvidenceValue({ name, value }: { name: string; value: unknown }) {
|
|
if (value && typeof value === 'object' && !Array.isArray(value)) {
|
|
return <div className="v2-reconcile-evidence-object">
|
|
{Object.entries(value as Record<string, unknown>).map(([key, nested]) => <span key={key}>
|
|
<small>{evidenceLabel(key)}</small>
|
|
<strong>{evidenceScalar(key, nested)}</strong>
|
|
</span>)}
|
|
</div>;
|
|
}
|
|
return <strong className="v2-reconcile-evidence-value">{evidenceScalar(name, value)}</strong>;
|
|
}
|
|
|
|
function reviewStatusOptions(issue: ReconciliationIssue) {
|
|
const options = [{ value: 'pending', label: '待复核' }];
|
|
if (issue.protocolA && issue.protocolB) {
|
|
options.push(
|
|
{ value: 'confirmed_source_a', label: `采信 ${issue.protocolA}` },
|
|
{ value: 'confirmed_source_b', label: `采信 ${issue.protocolB}` }
|
|
);
|
|
}
|
|
options.push(
|
|
{ value: 'no_action', label: '无需处理' },
|
|
{ value: 'fixed', label: '已修复' }
|
|
);
|
|
return options;
|
|
}
|
|
|
|
function reviewGuidance(issue: ReconciliationIssue) {
|
|
return {
|
|
POSITION_DRIFT: '先比对两个来源的接收时间、车辆工况与当前位置，再判断可信来源；系统不会仅凭坐标差自动覆盖原始数据。',
|
|
MILEAGE_REVERSE: '先核对原始总里程、单位换算和统计起止值；确认计算链路恢复后，再将问题标记为已修复。',
|
|
MILEAGE_JUMP: '先核对仪表总里程、GPS 里程及跨日边界，排除单位或设备重置后再形成结论。',
|
|
MILEAGE_SOURCE_DIVERGENCE: '对照仪表里程与 GPS 里程的原始报文、上报周期和业务口径，再选择本次可信来源。',
|
|
DUPLICATE_PLATE: '核对车辆档案、VIN 与业务归属，确认真实主车辆后再处理重复绑定。',
|
|
DUPLICATE_PHONE: '核对终端换绑记录与设备清单，避免将正常换车误判为重复终端。',
|
|
UNBOUND_SOURCE: '先确认来源 VIN 的车辆档案和业务归属，再完成主车辆绑定。',
|
|
SOURCE_MISSING: '核对设备接入、绑定关系与最近上报，确认是离线、未接入还是身份缺失。',
|
|
FLEET_COUNT_MISMATCH: '分别核对主车辆、实时来源并集和未绑定来源，避免直接修改统计总数。',
|
|
BUSINESS_SCOPE_UNBOUND: '核对 OneOS 当前业务范围与中台主车辆档案，再补齐主车辆绑定。',
|
|
AUTH_SCOPE_BUSINESS_MISMATCH: '核对客户账号授权区间与 OneOS 活跃业务范围，再调整车辆权限。'
|
|
}[issue.ruleCode] ?? '先核对原始证据、影响对象和时间范围，再选择结论并留下可追溯说明。';
|
|
}
|
|
|
|
function ReconciliationTrend({ data, maxTrend }: {
|
|
data?: ReconciliationSummary;
|
|
maxTrend: number;
|
|
}) {
|
|
return <Card className="v2-reconcile-trend" bodyStyle={{ padding: 0 }}>
|
|
<WorkspacePanelHeader
|
|
variant="compact"
|
|
title="趋势明细"
|
|
description="最近 14 次自动对账运行的存量、新增与恢复"
|
|
meta={<span>最近运行 <PlatformTime className="v2-ops-time" value={data?.lastRunAt} sourceZone="utc" /></span>}
|
|
/>
|
|
<div>{data?.trend.slice(-14).map((item) => <article key={item.date}><time>{item.date.slice(5)}</time><div title={`存量 ${item.active}，新增 ${item.new}，恢复 ${item.recovered}`}><i className="is-active" style={{ width: `${Math.max(2, item.active / maxTrend * 100)}%` }} /><i className="is-new" style={{ width: `${Math.max(0, item.new / maxTrend * 100)}%` }} /><i className="is-recovered" style={{ width: `${Math.max(0, item.recovered / maxTrend * 100)}%` }} /></div><b>{item.active}</b></article>)}</div>
|
|
{!data?.trend.length ? <p>完成首次每日检测后显示趋势。</p> : null}
|
|
<footer><span><i className="is-active" />存量</span><span><i className="is-new" />新增</span><span><i className="is-recovered" />恢复</span></footer>
|
|
</Card>;
|
|
}
|
|
|
|
function ReconciliationDetail({ issue, onClose, sheet = false }: { issue: ReconciliationIssue; onClose: () => void; sheet?: boolean }) {
|
|
const queryClient = useQueryClient();
|
|
const [status, setStatus] = useState(issue.status === 'recovered' ? 'pending' : issue.status);
|
|
const [note, setNote] = useState(issue.resolutionNote ?? '');
|
|
useEffect(() => {
|
|
setStatus(issue.status === 'recovered' ? 'pending' : issue.status);
|
|
setNote(issue.resolutionNote ?? '');
|
|
}, [issue.id, issue.resolutionNote, issue.status]);
|
|
const save = useMutation({
|
|
mutationFn: () => api.updateReconciliationIssue(issue.id, { version: issue.version, status, note: note.trim() }),
|
|
onSuccess: async (updated) => {
|
|
queryClient.setQueryData(['reconciliation-detail', issue.id], updated);
|
|
await Promise.all([
|
|
queryClient.invalidateQueries({ queryKey: ['reconciliation-summary'] }),
|
|
queryClient.invalidateQueries({ queryKey: ['reconciliation-issues'] })
|
|
]);
|
|
}
|
|
});
|
|
const requiresNote = status !== 'pending';
|
|
const evidenceEntries = Object.entries(issue.evidence ?? {});
|
|
const statusOptions = reviewStatusOptions(issue);
|
|
return <Card className={`v2-reconcile-detail${sheet ? ' is-sheet' : ''}`} bodyStyle={{ padding: 0 }} aria-label="差异证据与处置">
|
|
{!sheet ? <WorkspacePanelHeader
|
|
className="v2-reconcile-detail-heading"
|
|
title={issue.title}
|
|
description={ruleLabel(issue.ruleCode)}
|
|
meta={<span className="v2-reconcile-detail-status"><ReconciliationSeverityTag severity={issue.severity} /><ReconciliationStatusTag status={issue.status} /></span>}
|
|
actions={<Button theme="borderless" type="tertiary" icon={<IconClose />} onClick={onClose} aria-label="关闭差异详情" />}
|
|
/> : null}
|
|
<div className="v2-reconcile-detail-body">
|
|
{!sheet ? <section className="v2-reconcile-identity">
|
|
<div><small>车辆</small><strong>{issue.plate || '未登记车牌'}</strong><span>{issue.vin || '非单车差异'}</span></div>
|
|
<div><small>来源</small><strong>{[issue.protocolA, issue.protocolB].filter(Boolean).join(' ↔ ') || '平台口径'}</strong><span>累计发现 {issue.occurrenceCount.toLocaleString('zh-CN')} 次</span></div>
|
|
<div><small>时间</small><strong><PlatformTime className="v2-ops-time" value={issue.lastSeenAt} sourceZone="utc" /></strong><span>首次 <PlatformTime className="v2-ops-time" value={issue.firstSeenAt} sourceZone="utc" /></span></div>
|
|
</section> : null}
|
|
<section className="v2-reconcile-decision-guide">
|
|
<IconAlertTriangle />
|
|
<div><strong>复核提示</strong><p>{reviewGuidance(issue)}</p></div>
|
|
</section>
|
|
<p className="v2-reconcile-summary"><strong>命中说明</strong><span>{issue.summary}</span></p>
|
|
<Card className="v2-reconcile-evidence" bodyStyle={{ padding: 0 }}>
|
|
<WorkspacePanelHeader
|
|
variant="compact"
|
|
title="规则证据"
|
|
description="中文口径优先，保留原始字段名便于技术追溯"
|
|
meta={`${evidenceEntries.length} 项`}
|
|
/>
|
|
<dl>{evidenceEntries.map(([key, value]) => <div className={value && typeof value === 'object' && !Array.isArray(value) ? 'is-object' : undefined} key={key}>
|
|
<dt><strong>{evidenceLabel(key)}</strong>{evidenceLabel(key) !== key ? <code>{key}</code> : null}</dt>
|
|
<dd><EvidenceValue name={key} value={value} /></dd>
|
|
</div>)}</dl>
|
|
</Card>
|
|
<Card className="v2-reconcile-review" bodyStyle={{ padding: 0 }}>
|
|
<WorkspacePanelHeader variant="compact" title="复核结论" description="结论会写入处理履历，不改写原始证据" meta={`版本 v${issue.version}`} />
|
|
<label><span id="reconcile-review-status-label">选择结论</span><RadioGroup aria-labelledby="reconcile-review-status-label" type="button" buttonSize="small" value={status} options={statusOptions} onChange={(event) => setStatus(String(event.target.value))} /></label>
|
|
<label><span>说明{requiresNote ? '（必填）' : '（可选）'}</span><TextArea aria-label={`说明${requiresNote ? '（必填）' : '（可选）'}`} value={note} maxCount={500} autosize={{ minRows: 3, maxRows: 6 }} onChange={setNote} placeholder="记录核对来源、原始值、责任人或修复结果" /></label>
|
|
<Button theme="solid" disabled={save.isPending || (requiresNote && !note.trim())} loading={save.isPending} onClick={() => save.mutate()}>保存结论并记录履历</Button>
|
|
{save.isError ? <p role="alert">{save.error instanceof Error ? save.error.message : '保存失败'}</p> : null}
|
|
</Card>
|
|
<Card className="v2-reconcile-actions" bodyStyle={{ padding: 0 }}>
|
|
<WorkspacePanelHeader variant="compact" title="处理履历" meta={`${issue.actions?.length ?? 0} 条`} />
|
|
{issue.actions?.length ? <ol>{issue.actions.map((action) => <li key={action.id}><i /><div><strong>{statusLabel(action.toStatus)}</strong><p>{action.note || action.action}</p><span>{action.actor} · <PlatformTime className="v2-ops-time" value={action.createdAt} sourceZone="utc" /></span></div></li>)}</ol> : <p>暂无处理记录。</p>}
|
|
</Card>
|
|
</div>
|
|
</Card>;
|
|
}
|
|
|
|
export default function ReconciliationCenter() {
|
|
const mobileLayout = useMobileLayout();
|
|
const pageSize = mobileLayout ? MOBILE_PAGE_SIZE : DESKTOP_PAGE_SIZE;
|
|
const [keyword, setKeyword] = useState('');
|
|
const deferredKeyword = useDeferredValue(keyword.trim());
|
|
const [status, setStatus] = useState('active');
|
|
const [severity, setSeverity] = useState('all');
|
|
const [ruleCode, setRuleCode] = useState('all');
|
|
const [offset, setOffset] = useState(0);
|
|
const [selectedID, setSelectedID] = useState('');
|
|
const [filtersCollapsed, setFiltersCollapsed] = useState(true);
|
|
const [trendExpanded, setTrendExpanded] = useState(false);
|
|
const closeDetail = () => setSelectedID('');
|
|
const openDetail = (id: string) => {
|
|
setTrendExpanded(false);
|
|
setSelectedID(id);
|
|
};
|
|
const toggleTrend = () => {
|
|
setSelectedID('');
|
|
setTrendExpanded((value) => !value);
|
|
};
|
|
useEffect(() => setOffset(0), [deferredKeyword, mobileLayout, ruleCode, severity, status]);
|
|
|
|
const summary = useQuery({
|
|
queryKey: ['reconciliation-summary', 30],
|
|
queryFn: ({ signal }) => api.reconciliationSummary(30, signal),
|
|
staleTime: 60_000,
|
|
gcTime: QUERY_MEMORY.summaryGcTime
|
|
});
|
|
const issues = useQuery({
|
|
queryKey: ['reconciliation-issues', deferredKeyword, ruleCode, severity, status, pageSize, offset],
|
|
queryFn: ({ signal }) => api.reconciliationIssues({
|
|
keyword: deferredKeyword, ruleCode, severity, status, limit: pageSize, offset
|
|
}, signal),
|
|
staleTime: 20_000,
|
|
gcTime: QUERY_MEMORY.highVolumeGcTime
|
|
});
|
|
const detail = useQuery({
|
|
queryKey: ['reconciliation-detail', selectedID],
|
|
queryFn: ({ signal }) => api.reconciliationIssue(selectedID, signal),
|
|
enabled: Boolean(selectedID),
|
|
staleTime: 10_000,
|
|
gcTime: QUERY_MEMORY.optionGcTime
|
|
});
|
|
const maxTrend = useMemo(() => {
|
|
let result = 1;
|
|
for (const item of summary.data?.trend ?? []) result = Math.max(result, item.active, item.new, item.recovered);
|
|
return result;
|
|
}, [summary.data?.trend]);
|
|
const refresh = () => Promise.all([summary.refetch(), issues.refetch(), selectedID ? detail.refetch() : Promise.resolve()]);
|
|
const data = summary.data;
|
|
const page = issues.data;
|
|
const activeCount = page?.items.filter((item) => activeStatuses.has(item.status)).length ?? 0;
|
|
const currentPage = Math.floor(offset / pageSize) + 1;
|
|
const totalPages = Math.max(1, Math.ceil((page?.total ?? 0) / pageSize));
|
|
const issueRows = page?.items ?? [];
|
|
const activeFilterCount = Number(Boolean(deferredKeyword)) + Number(severity !== 'all') + Number(ruleCode !== 'all');
|
|
const filterSummary = `${status === 'active' ? '活跃差异' : statusLabel(status)} · ${(page?.total ?? 0).toLocaleString('zh-CN')} 条${activeFilterCount ? ` · 另 ${activeFilterCount} 项` : ''}`;
|
|
const selectedIssue = detail.data ?? issueRows.find((item) => item.id === selectedID);
|
|
const detailPanel = selectedID && detail.isPending
|
|
? <Card className="v2-reconcile-detail is-sheet" bodyStyle={{ padding: 0 }}><div className="v2-reconcile-detail-loading" role="status"><Spin size="middle" tip="正在读取差异证据…" /></div></Card>
|
|
: selectedID && detail.isError
|
|
? <Card className="v2-reconcile-detail is-sheet" bodyStyle={{ padding: 0 }}><InlineError message={detail.error.message} onRetry={() => detail.refetch()} /></Card>
|
|
: detail.data
|
|
? <ReconciliationDetail issue={detail.data} onClose={closeDetail} sheet />
|
|
: null;
|
|
const columns = [
|
|
{ title: '问题 / 等级', dataIndex: 'title', width: 286, render: (_value: string, item: ReconciliationIssue) => <span className="v2-reconcile-cell v2-reconcile-issue-cell"><span><strong>{item.title}</strong><ReconciliationSeverityTag severity={item.severity} /></span><small>{ruleLabel(item.ruleCode)} · 命中 {item.occurrenceCount.toLocaleString('zh-CN')} 次</small></span> },
|
|
{ title: '车辆', dataIndex: 'plate', width: 176, render: (_value: string, item: ReconciliationIssue) => <span className="v2-reconcile-cell"><strong>{item.plate || '非单车差异'}</strong><small>{item.vin || '平台级口径'}</small></span> },
|
|
{ title: '证据来源', dataIndex: 'protocolA', width: 164, render: (_value: string, item: ReconciliationIssue) => <span className="v2-reconcile-cell"><strong>{[item.protocolA, item.protocolB].filter(Boolean).join(' / ') || '平台口径'}</strong><small>{categoryLabel(item.category)}</small></span> },
|
|
{ title: '最近发现', dataIndex: 'lastSeenAt', width: 190, render: (_value: string, item: ReconciliationIssue) => <span className="v2-reconcile-cell"><strong><PlatformTime className="v2-ops-time" value={item.lastSeenAt} sourceZone="utc" /></strong><small>首次 <PlatformTime className="v2-ops-time" value={item.firstSeenAt} sourceZone="utc" /></small></span> },
|
|
{ title: '状态', dataIndex: 'status', width: 112, render: (value: string) => <ReconciliationStatusTag status={value} /> }
|
|
];
|
|
|
|
return <><Card className="v2-reconcile-center" bodyStyle={{ padding: 0 }}>
|
|
<WorkspacePanelHeader
|
|
className="v2-reconcile-heading"
|
|
eyebrow="自动对账"
|
|
tone="health"
|
|
title="质量问题队列"
|
|
description="自动发现并合并重复问题；复核人员基于原始证据形成结论，不直接改写数据。"
|
|
meta="每日自动对账"
|
|
actions={<>
|
|
<Button
|
|
className="v2-reconcile-trend-open v2-workspace-mobile-tool-button is-muted"
|
|
theme="borderless"
|
|
type="tertiary"
|
|
icon={trendExpanded ? <IconChevronUp /> : <IconChevronDown />}
|
|
aria-label="30 天趋势"
|
|
aria-expanded={trendExpanded}
|
|
aria-controls="v2-reconcile-trend"
|
|
onClick={toggleTrend}
|
|
>30 天趋势</Button>
|
|
<Button className="v2-workspace-mobile-tool-button is-muted" theme="light" icon={<IconRefresh />} aria-label="刷新结果" loading={summary.isFetching || issues.isFetching} onClick={refresh}>刷新结果</Button>
|
|
</>}
|
|
/>
|
|
{summary.isError ? <InlineError message={summary.error.message} onRetry={() => summary.refetch()} /> : null}
|
|
<WorkspaceMetricRail
|
|
variant="queue"
|
|
className="v2-reconcile-metric-rail"
|
|
ariaLabel="差异处置队列概览"
|
|
items={[
|
|
{
|
|
label: '待复核',
|
|
value: data?.pending.toLocaleString('zh-CN') ?? '—',
|
|
note: `活跃 ${data?.active.toLocaleString('zh-CN') ?? '—'} 项`,
|
|
tone: 'primary'
|
|
},
|
|
{
|
|
label: 'SLA 超时',
|
|
value: data?.overSla.toLocaleString('zh-CN') ?? '—',
|
|
note: data?.overSla ? '超过 24 小时' : '当前无超时',
|
|
tone: data?.overSla ? 'danger' : 'success'
|
|
},
|
|
{
|
|
label: '已确认来源',
|
|
value: data?.confirmed.toLocaleString('zh-CN') ?? '—',
|
|
note: '保留活跃差异',
|
|
emphasis: 'secondary'
|
|
},
|
|
{
|
|
label: '已自动恢复',
|
|
value: data?.recovered.toLocaleString('zh-CN') ?? '—',
|
|
note: '规则不再命中',
|
|
tone: 'success',
|
|
emphasis: 'secondary'
|
|
}
|
|
]}
|
|
context={<span aria-live="polite"><small>当前筛选</small><strong>{(page?.total ?? 0).toLocaleString('zh-CN')}</strong><em>按严重程度、最近发现时间排序</em></span>}
|
|
/>
|
|
<div className="v2-reconcile-layout">
|
|
<div className="v2-reconcile-main">
|
|
<MobileFilterToggle
|
|
title="筛选差异"
|
|
summary={filterSummary}
|
|
expanded={!filtersCollapsed}
|
|
collapsedLabel="修改"
|
|
onToggle={() => setFiltersCollapsed((value) => !value)}
|
|
/>
|
|
<div className={`v2-reconcile-toolbar${filtersCollapsed ? ' is-mobile-collapsed' : ''}`}>
|
|
<Input className="v2-reconcile-search" prefix={<IconSearch />} aria-label="搜索差异车辆或规则" value={keyword} onChange={setKeyword} placeholder="车牌、VIN、标题或说明" />
|
|
<span className="v2-sr-only" id="reconcile-status-filter-label">筛选差异状态</span>
|
|
<Select aria-labelledby="reconcile-status-filter-label" value={status} onChange={(value) => setStatus(String(value))} optionList={[
|
|
{ value: 'active', label: '活跃差异' }, { value: 'pending', label: '待处理' },
|
|
{ value: 'confirmed_source_a', label: '确认来源 A' }, { value: 'confirmed_source_b', label: '确认来源 B' },
|
|
{ value: 'recovered', label: '已恢复' }, { value: 'fixed', label: '已修复' },
|
|
{ value: 'no_action', label: '无需处理' }, { value: 'all', label: '全部状态' }
|
|
]} />
|
|
<span className="v2-sr-only" id="reconcile-severity-filter-label">筛选严重程度</span>
|
|
<Select aria-labelledby="reconcile-severity-filter-label" value={severity} onChange={(value) => setSeverity(String(value))} optionList={[
|
|
{ value: 'all', label: '全部等级' }, { value: 'critical', label: '严重' },
|
|
{ value: 'major', label: '重要' }, { value: 'minor', label: '一般' }
|
|
]} />
|
|
<span className="v2-sr-only" id="reconcile-rule-filter-label">筛选差异规则</span>
|
|
<Select aria-labelledby="reconcile-rule-filter-label" value={ruleCode} onChange={(value) => setRuleCode(String(value))} optionList={[
|
|
{ value: 'all', label: '全部规则' },
|
|
...(data?.byRule.map((item) => ({ value: item.name, label: `${ruleLabel(item.name)} · ${item.count}` })) ?? [])
|
|
]} />
|
|
</div>
|
|
{issues.isError ? <InlineError message={issues.error.message} onRetry={() => issues.refetch()} /> : null}
|
|
<div
|
|
className="v2-reconcile-table-wrap is-scroll-region"
|
|
role="region"
|
|
aria-label="差异队列，可上下滚动"
|
|
tabIndex={0}
|
|
>
|
|
{!mobileLayout ? <Table className="v2-reconcile-table" columns={columns} dataSource={issueRows} rowKey="id" pagination={false} scroll={{ x: 934 }} onRow={(item) => item ? detailTriggerRow({
|
|
className: selectedID === item.id ? 'is-selected' : '',
|
|
expanded: selectedID === item.id,
|
|
label: `查看 ${item.plate || item.title} 差异证据`,
|
|
testId: `reconcile-row-${item.id}`,
|
|
onOpen: () => openDetail(item.id)
|
|
}) : ({})} /> : <div className="v2-reconcile-mobile-list">{issueRows.map((item) => <Card key={item.id} className={`v2-reconcile-mobile-card${selectedID === item.id ? ' is-selected' : ''}`} bodyStyle={{ padding: 0 }}>
|
|
<Button theme="borderless" type="tertiary" className="v2-reconcile-mobile-action" aria-pressed={selectedID === item.id} aria-expanded={selectedID === item.id} aria-label={`查看 ${item.plate || item.title} 差异证据`} onClick={() => openDetail(item.id)}>
|
|
<span className="v2-reconcile-mobile-content">
|
|
<header><strong>{item.plate || '平台级差异'}</strong><span><ReconciliationSeverityTag severity={item.severity} /><ReconciliationStatusTag status={item.status} /></span></header>
|
|
<p>{item.title}</p>
|
|
<span className="v2-reconcile-mobile-meta"><span>{[item.protocolA, item.protocolB].filter(Boolean).join(' / ') || '平台口径'}</span><PlatformTime className="v2-ops-time" value={item.lastSeenAt} sourceZone="utc" /></span>
|
|
<footer><span>{ruleLabel(item.ruleCode)} · 命中 {item.occurrenceCount.toLocaleString('zh-CN')} 次</span><span>证据与处置<IconChevronRight /></span></footer>
|
|
</span>
|
|
</Button>
|
|
</Card>)}</div>}
|
|
{issues.isPending ? <div className="v2-reconcile-loading" role="status"><Spin size="middle" tip="正在读取差异队列…" /></div> : null}
|
|
{!issues.isPending && !issueRows.length ? <Empty className="v2-reconcile-empty" title="当前筛选条件没有差异" description="调整状态、等级、规则或搜索条件后重试。" /> : null}
|
|
</div>
|
|
<footer className="v2-reconcile-pagination"><TablePagination page={currentPage} totalPages={totalPages} info={`共 ${(page?.total ?? 0).toLocaleString('zh-CN')} 条 · 本页 ${activeCount} 条活跃`} onPageChange={(next) => setOffset((next - 1) * pageSize)} /></footer>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
<WorkspaceSideSheet
|
|
className="v2-reconcile-detail-sidesheet"
|
|
variant="detail"
|
|
visible={Boolean(selectedID)}
|
|
placement={mobileLayout ? 'bottom' : 'right'}
|
|
width={mobileLayout ? undefined : 680}
|
|
height={mobileLayout ? 'min(88dvh, 780px)' : undefined}
|
|
ariaLabel="差异证据与处置"
|
|
closeLabel="关闭差异证据与处置"
|
|
title={selectedIssue?.title ?? '差异证据与处置'}
|
|
description={selectedIssue ? `${ruleLabel(selectedIssue.ruleCode)} · 原始证据、复核结论与处理履历` : '正在加载规则证据与处置履历'}
|
|
badge={selectedIssue ? `${severityLabel(selectedIssue.severity)} · ${statusLabel(selectedIssue.status)}` : '读取中'}
|
|
badgeColor={selectedIssue?.severity === 'critical' ? 'red' : selectedIssue?.severity === 'major' ? 'orange' : 'grey'}
|
|
summaryItems={selectedIssue ? [
|
|
{
|
|
label: '车辆',
|
|
value: selectedIssue.plate || '平台级差异',
|
|
detail: selectedIssue.vin || '非单车口径',
|
|
tone: 'primary'
|
|
},
|
|
{
|
|
label: '证据来源',
|
|
value: [selectedIssue.protocolA, selectedIssue.protocolB].filter(Boolean).join(' ↔ ') || '平台口径',
|
|
detail: `累计发现 ${selectedIssue.occurrenceCount.toLocaleString('zh-CN')} 次`,
|
|
tone: selectedIssue.severity === 'critical' ? 'danger' : 'warning'
|
|
},
|
|
{
|
|
label: '最近发现',
|
|
value: <PlatformTime className="v2-ops-time" value={selectedIssue.lastSeenAt} sourceZone="utc" />,
|
|
detail: <span>首次 <PlatformTime className="v2-ops-time" value={selectedIssue.firstSeenAt} sourceZone="utc" /></span>,
|
|
tone: 'neutral'
|
|
}
|
|
] : []}
|
|
onCancel={closeDetail}
|
|
>
|
|
{detailPanel}
|
|
</WorkspaceSideSheet>
|
|
<WorkspaceSideSheet
|
|
className="v2-reconcile-trend-sidesheet"
|
|
variant="detail"
|
|
visible={trendExpanded}
|
|
placement={mobileLayout ? 'bottom' : 'right'}
|
|
width={mobileLayout ? undefined : 520}
|
|
height={mobileLayout ? 'min(72dvh, 620px)' : undefined}
|
|
ariaLabel="30 天差异趋势"
|
|
closeLabel="关闭 30 天差异趋势"
|
|
title="30 天差异趋势"
|
|
description="查看自动对账的差异存量、新增与恢复走势"
|
|
badge="每日自动对账"
|
|
badgeColor="blue"
|
|
summaryItems={[
|
|
{
|
|
label: '活跃差异',
|
|
value: data?.active.toLocaleString('zh-CN') ?? '—',
|
|
detail: `${data?.pending.toLocaleString('zh-CN') ?? '—'} 项待复核`,
|
|
tone: 'warning'
|
|
},
|
|
{
|
|
label: 'SLA 超时',
|
|
value: data?.overSla.toLocaleString('zh-CN') ?? '—',
|
|
detail: '超过 24 小时',
|
|
tone: data?.overSla ? 'danger' : 'success'
|
|
},
|
|
{
|
|
label: '已自动恢复',
|
|
value: data?.recovered.toLocaleString('zh-CN') ?? '—',
|
|
detail: '规则已不再命中',
|
|
tone: 'success'
|
|
}
|
|
]}
|
|
onCancel={() => setTrendExpanded(false)}
|
|
>
|
|
{trendExpanded ? <div id="v2-reconcile-trend"><ReconciliationTrend data={data} maxTrend={maxTrend} /></div> : null}
|
|
</WorkspaceSideSheet>
|
|
</>;
|
|
}
|