feat(platform): focus unresolved vehicle detail on binding
This commit is contained in:
lingniu
@@ -83,6 +83,21 @@ export function VehicleDetail({
|
|||||||
const online = summary?.online || identity?.online || false;
|
const online = summary?.online || identity?.online || false;
|
||||||
const lastSeen = summary?.lastSeen || latest?.lastSeen || '-';
|
const lastSeen = summary?.lastSeen || latest?.lastSeen || '-';
|
||||||
const formKey = `${query.keyword}-${query.protocol ?? ''}`;
|
const formKey = `${query.keyword}-${query.protocol ?? ''}`;
|
||||||
|
const qualityTable = (
|
||||||
|
<Table
|
||||||
|
loading={loading}
|
||||||
|
pagination={false}
|
||||||
|
rowKey={(row?: QualityIssueRow) => `${row?.protocol ?? ''}-${row?.issueType ?? ''}-${row?.lastSeen ?? ''}`}
|
||||||
|
dataSource={detail?.quality.items ?? []}
|
||||||
|
columns={[
|
||||||
|
{ title: '来源', dataIndex: 'protocol', width: 130 },
|
||||||
|
{ title: '问题', dataIndex: 'issueType', width: 150 },
|
||||||
|
{ title: '级别', width: 110, render: (_: unknown, row: QualityIssueRow) => <Tag color={row.severity === 'error' ? 'red' : 'orange'}>{row.severity}</Tag> },
|
||||||
|
{ title: '最后时间', dataIndex: 'lastSeen', width: 190 },
|
||||||
|
{ title: '说明', dataIndex: 'detail' }
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="vp-page">
|
<div className="vp-page">
|
||||||
@@ -142,53 +157,66 @@ export function VehicleDetail({
|
|||||||
) : null}
|
) : null}
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<Card bordered title="数据来源覆盖" style={{ marginTop: 16 }}>
|
{hasResolvedVIN ? (
|
||||||
{detail?.sourceStatus?.length ? (
|
<>
|
||||||
<div className="vp-source-grid">
|
<Card bordered title="数据来源覆盖" style={{ marginTop: 16 }}>
|
||||||
{detail.sourceStatus.map((source) => (
|
{detail?.sourceStatus?.length ? (
|
||||||
<div key={source.protocol} className="vp-source-card">
|
<div className="vp-source-grid">
|
||||||
<div className="vp-source-card-head">
|
{detail.sourceStatus.map((source) => (
|
||||||
<Space>
|
<div key={source.protocol} className="vp-source-card">
|
||||||
<Tag color={source.protocol === summary?.primaryProtocol ? 'blue' : 'grey'}>{source.protocol}</Tag>
|
<div className="vp-source-card-head">
|
||||||
<StatusTag status={source.online ? 'ok' : 'offline'} />
|
<Space>
|
||||||
</Space>
|
<Tag color={source.protocol === summary?.primaryProtocol ? 'blue' : 'grey'}>{source.protocol}</Tag>
|
||||||
<Typography.Text type="tertiary">{source.lastSeen || '无上报'}</Typography.Text>
|
<StatusTag status={source.online ? 'ok' : 'offline'} />
|
||||||
</div>
|
</Space>
|
||||||
<Space spacing={4} wrap>
|
<Typography.Text type="tertiary">{source.lastSeen || '无上报'}</Typography.Text>
|
||||||
{sourceCapabilities.map((item) => (
|
</div>
|
||||||
<Tag key={item.key} color={source[item.key] ? 'green' : 'grey'}>
|
<Space spacing={4} wrap>
|
||||||
{item.label}{source[item.key] ? '有' : '无'}
|
{sourceCapabilities.map((item) => (
|
||||||
</Tag>
|
<Tag key={item.key} color={source[item.key] ? 'green' : 'grey'}>
|
||||||
))}
|
{item.label}{source[item.key] ? '有' : '无'}
|
||||||
</Space>
|
</Tag>
|
||||||
|
))}
|
||||||
|
</Space>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
))}
|
) : (
|
||||||
</div>
|
<Typography.Text type="secondary">暂未查询到该车辆的数据来源覆盖。</Typography.Text>
|
||||||
) : (
|
)}
|
||||||
<Typography.Text type="secondary">暂未查询到该车辆的数据来源覆盖。</Typography.Text>
|
</Card>
|
||||||
)}
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card bordered title="来源诊断明细" style={{ marginTop: 16 }}>
|
<Card bordered title="来源诊断明细" style={{ marginTop: 16 }}>
|
||||||
<Table
|
<Table
|
||||||
loading={loading}
|
loading={loading}
|
||||||
pagination={false}
|
pagination={false}
|
||||||
rowKey="protocol"
|
rowKey="protocol"
|
||||||
dataSource={detail?.sourceStatus ?? []}
|
dataSource={detail?.sourceStatus ?? []}
|
||||||
columns={[
|
columns={[
|
||||||
{ title: '来源', dataIndex: 'protocol', width: 130 },
|
{ title: '来源', dataIndex: 'protocol', width: 130 },
|
||||||
{ title: '在线', width: 100, render: (_: unknown, row: VehicleSourceStatus) => <StatusTag status={row.online ? 'ok' : 'offline'} /> },
|
{ title: '在线', width: 100, render: (_: unknown, row: VehicleSourceStatus) => <StatusTag status={row.online ? 'ok' : 'offline'} /> },
|
||||||
{ title: '最后时间', dataIndex: 'lastSeen', width: 190 },
|
{ title: '最后时间', dataIndex: 'lastSeen', width: 190 },
|
||||||
{ title: '实时', width: 90, render: (_: unknown, row: VehicleSourceStatus) => <Tag color={row.hasRealtime ? 'green' : 'grey'}>{row.hasRealtime ? '有' : '无'}</Tag> },
|
{ title: '实时', width: 90, render: (_: unknown, row: VehicleSourceStatus) => <Tag color={row.hasRealtime ? 'green' : 'grey'}>{row.hasRealtime ? '有' : '无'}</Tag> },
|
||||||
{ title: '历史', width: 90, render: (_: unknown, row: VehicleSourceStatus) => <Tag color={row.hasHistory ? 'green' : 'grey'}>{row.hasHistory ? '有' : '无'}</Tag> },
|
{ title: '历史', width: 90, render: (_: unknown, row: VehicleSourceStatus) => <Tag color={row.hasHistory ? 'green' : 'grey'}>{row.hasHistory ? '有' : '无'}</Tag> },
|
||||||
{ title: 'RAW', width: 90, render: (_: unknown, row: VehicleSourceStatus) => <Tag color={row.hasRaw ? 'green' : 'grey'}>{row.hasRaw ? '有' : '无'}</Tag> },
|
{ title: 'RAW', width: 90, render: (_: unknown, row: VehicleSourceStatus) => <Tag color={row.hasRaw ? 'green' : 'grey'}>{row.hasRaw ? '有' : '无'}</Tag> },
|
||||||
{ title: '里程', width: 90, render: (_: unknown, row: VehicleSourceStatus) => <Tag color={row.hasMileage ? 'green' : 'grey'}>{row.hasMileage ? '有' : '无'}</Tag> }
|
{ title: '里程', width: 90, render: (_: unknown, row: VehicleSourceStatus) => <Tag color={row.hasMileage ? 'green' : 'grey'}>{row.hasMileage ? '有' : '无'}</Tag> }
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
</Card>
|
</Card>
|
||||||
|
</>
|
||||||
|
) : null}
|
||||||
|
|
||||||
<Card bordered style={{ marginTop: 16 }}>
|
{!hasResolvedVIN ? (
|
||||||
<Tabs>
|
<Card bordered style={{ marginTop: 16 }}>
|
||||||
|
<Tabs>
|
||||||
|
<Tabs.TabPane tab="质量问题" itemKey="quality">
|
||||||
|
{qualityTable}
|
||||||
|
</Tabs.TabPane>
|
||||||
|
</Tabs>
|
||||||
|
</Card>
|
||||||
|
) : (
|
||||||
|
<Card bordered style={{ marginTop: 16 }}>
|
||||||
|
<Tabs>
|
||||||
<Tabs.TabPane tab="实时状态" itemKey="realtime">
|
<Tabs.TabPane tab="实时状态" itemKey="realtime">
|
||||||
<div className="vp-realtime-strip">
|
<div className="vp-realtime-strip">
|
||||||
{[
|
{[
|
||||||
@@ -271,22 +299,11 @@ export function VehicleDetail({
|
|||||||
/>
|
/>
|
||||||
</Tabs.TabPane>
|
</Tabs.TabPane>
|
||||||
<Tabs.TabPane tab="质量问题" itemKey="quality">
|
<Tabs.TabPane tab="质量问题" itemKey="quality">
|
||||||
<Table
|
{qualityTable}
|
||||||
loading={loading}
|
|
||||||
pagination={false}
|
|
||||||
rowKey={(row?: QualityIssueRow) => `${row?.protocol ?? ''}-${row?.issueType ?? ''}-${row?.lastSeen ?? ''}`}
|
|
||||||
dataSource={detail?.quality.items ?? []}
|
|
||||||
columns={[
|
|
||||||
{ title: '来源', dataIndex: 'protocol', width: 130 },
|
|
||||||
{ title: '问题', dataIndex: 'issueType', width: 150 },
|
|
||||||
{ title: '级别', width: 110, render: (_: unknown, row: QualityIssueRow) => <Tag color={row.severity === 'error' ? 'red' : 'orange'}>{row.severity}</Tag> },
|
|
||||||
{ title: '最后时间', dataIndex: 'lastSeen', width: 190 },
|
|
||||||
{ title: '说明', dataIndex: 'detail' }
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</Tabs.TabPane>
|
</Tabs.TabPane>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
</Card>
|
</Card>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user