feat(platform-web): switch vehicle detail sources

2026-07-04 01:28:08 +08:00
parent edca567d52
commit a12d86e6f4
3 changed files with 135 additions and 18 deletions
--- a/vehicle-data-platform/apps/web/src/pages/VehicleDetail.tsx
+++ b/vehicle-data-platform/apps/web/src/pages/VehicleDetail.tsx
@@ -87,7 +87,14 @@ export function VehicleDetail({
  const qualityCount = detail?.quality?.total ?? 0;
  const online = resolution?.online || summary?.online || identity?.online || false;
  const lastSeen = resolution?.lastSeen || summary?.lastSeen || latest?.lastSeen || '-';
+  const activeProtocol = query.protocol?.trim() ?? '';
  const formKey = `${query.keyword}-${query.protocol ?? ''}`;
+  const switchSource = (nextProtocol = '') => {
+    const nextQuery = { keyword: resolvedVIN || query.keyword, protocol: nextProtocol };
+    setQuery(nextQuery);
+    onQueryChange?.(nextQuery.keyword, nextQuery.protocol);
+    load(nextQuery);
+  };
  const qualityTable = (
    <Table
      loading={loading}
@@ -167,26 +174,45 @@ export function VehicleDetail({
        <>
          <Card bordered title="数据来源覆盖" style={{ marginTop: 16 }}>
            {detail?.sourceStatus?.length ? (
-              <div className="vp-source-grid">
-                {detail.sourceStatus.map((source) => (
-                  <div key={source.protocol} className="vp-source-card">
-                    <div className="vp-source-card-head">
-                      <Space>
-                        <Tag color={source.protocol === summary?.primaryProtocol ? 'blue' : 'grey'}>{source.protocol}</Tag>
-                        <StatusTag status={source.online ? 'ok' : 'offline'} />
+              <>
+                <div className="vp-source-toolbar">
+                  <Space>
+                    <Tag color={activeProtocol ? 'grey' : 'blue'}>{activeProtocol ? `当前 ${activeProtocol}` : '当前 全部来源'}</Tag>
+                    <Button size="small" disabled={!activeProtocol} onClick={() => switchSource('')}>全部来源</Button>
+                  </Space>
+                </div>
+                <div className="vp-source-grid">
+                  {detail.sourceStatus.map((source) => (
+                    <div key={source.protocol} className={`vp-source-card${activeProtocol === source.protocol ? ' vp-source-card-active' : ''}`}>
+                      <div className="vp-source-card-head">
+                        <Space>
+                          <Tag color={source.protocol === summary?.primaryProtocol ? 'blue' : 'grey'}>{source.protocol}</Tag>
+                          <StatusTag status={source.online ? 'ok' : 'offline'} />
+                        </Space>
+                        <Typography.Text type="tertiary">{source.lastSeen || '无上报'}</Typography.Text>
+                      </div>
+                      <Space spacing={4} wrap>
+                        {sourceCapabilities.map((item) => (
+                          <Tag key={item.key} color={source[item.key] ? 'green' : 'grey'}>
+                            {item.label}{source[item.key] ? '有' : '无'}
+                          </Tag>
+                        ))}
                      </Space>
-                      <Typography.Text type="tertiary">{source.lastSeen || '无上报'}</Typography.Text>
+                      <div className="vp-source-card-actions">
+                        <Button
+                          size="small"
+                          theme={activeProtocol === source.protocol ? 'solid' : 'light'}
+                          type={activeProtocol === source.protocol ? 'primary' : 'tertiary'}
+                          disabled={activeProtocol === source.protocol}
+                          onClick={() => switchSource(source.protocol)}
+                        >
+                          仅看 {source.protocol}
+                        </Button>
+                      </div>
                    </div>
-                    <Space spacing={4} wrap>
-                      {sourceCapabilities.map((item) => (
-                        <Tag key={item.key} color={source[item.key] ? 'green' : 'grey'}>
-                          {item.label}{source[item.key] ? '有' : '无'}
-                        </Tag>
-                      ))}
-                    </Space>
-                  </div>
-                ))}
-              </div>
+                  ))}
+                </div>
+              </>
            ) : (
              <Typography.Text type="secondary">暂未查询到该车辆的数据来源覆盖。</Typography.Text>
            )}
--- a/vehicle-data-platform/apps/web/src/styles/global.css
+++ b/vehicle-data-platform/apps/web/src/styles/global.css
@@ -173,6 +173,10 @@ body {
  gap: 12px;
 }

+.vp-source-toolbar {
+  margin-bottom: 12px;
+}
+
 .vp-source-card {
  min-height: 86px;
  padding: 12px;
@@ -181,6 +185,11 @@ body {
  background: #fbfcff;
 }

+.vp-source-card-active {
+  border-color: rgba(22, 100, 255, 0.5);
+  background: rgba(22, 100, 255, 0.06);
+}
+
 .vp-source-card-head {
  display: flex;
  align-items: center;
@@ -189,6 +198,10 @@ body {
  margin-bottom: 12px;
 }

+.vp-source-card-actions {
+  margin-top: 12px;
+}
+
 .vp-realtime-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
--- a/vehicle-data-platform/apps/web/src/test/App.test.tsx
+++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx
@@ -243,3 +243,81 @@ test('keeps primary protocol when opening vehicle service from realtime vehicles
    expect(window.location.hash).toBe('#/detail?keyword=VIN-MQTT-001&protocol=YUTONG_MQTT');
  });
 });
+
+test('switches vehicle detail to a source from the coverage cards', async () => {
+  window.history.replaceState(null, '', '/#/detail?keyword=VIN001');
+  const fetchMock = vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {
+    const path = String(input);
+    if (path.includes('/api/vehicles/detail')) {
+      return {
+        ok: true,
+        json: async () => ({
+          data: {
+            vin: 'VIN001',
+            lookupKey: 'VIN001',
+            lookupResolved: true,
+            resolution: {
+              lookupKey: 'VIN001',
+              resolved: true,
+              vin: 'VIN001',
+              plate: '粤AG18312',
+              phone: '13307795425',
+              oem: 'G7s',
+              protocols: ['GB32960', 'JT808', 'YUTONG_MQTT'],
+              online: true,
+              lastSeen: '2026-07-03 20:12:10'
+            },
+            realtimeSummary: {
+              vin: 'VIN001',
+              plate: '粤AG18312',
+              phone: '13307795425',
+              oem: 'G7s',
+              protocols: ['GB32960', 'JT808', 'YUTONG_MQTT'],
+              sourceCount: 3,
+              onlineSourceCount: 2,
+              online: true,
+              primaryProtocol: 'GB32960',
+              longitude: 113.2,
+              latitude: 23.1,
+              speedKmh: 30,
+              socPercent: 78,
+              totalMileageKm: 100,
+              lastSeen: '2026-07-03 20:12:10'
+            },
+            sources: ['GB32960', 'JT808', 'YUTONG_MQTT'],
+            sourceStatus: [
+              { protocol: 'GB32960', online: true, lastSeen: '2026-07-03 20:12:10', hasRealtime: true, hasHistory: true, hasRaw: true, hasMileage: true },
+              { protocol: 'JT808', online: true, lastSeen: '2026-07-03 20:12:08', hasRealtime: true, hasHistory: true, hasRaw: true, hasMileage: true },
+              { protocol: 'YUTONG_MQTT', online: false, lastSeen: '2026-07-03 20:10:00', hasRealtime: true, hasHistory: false, hasRaw: true, hasMileage: false }
+            ],
+            realtime: [],
+            history: { items: [], total: 0, limit: 20, offset: 0 },
+            raw: { items: [], total: 0, limit: 10, offset: 0 },
+            mileage: { items: [], total: 0, limit: 20, offset: 0 },
+            quality: { items: [], total: 0, limit: 20, offset: 0 }
+          },
+          traceId: 'trace-test',
+          timestamp: 1783094400000
+        })
+      } as Response;
+    }
+    return {
+      ok: true,
+      json: async () => ({
+        data: { items: [], total: 0, limit: 10, offset: 0 },
+        traceId: 'trace-test',
+        timestamp: 1783094400000
+      })
+    } as Response;
+  });
+
+  render(<App />);
+
+  expect(await screen.findByText('VIN001')).toBeInTheDocument();
+  fireEvent.click(screen.getByRole('button', { name: '仅看 JT808' }));
+
+  await waitFor(() => {
+    expect(window.location.hash).toBe('#/detail?keyword=VIN001&protocol=JT808');
+  });
+  expect(fetchMock).toHaveBeenCalledWith(expect.stringContaining('/api/vehicles/detail?keyword=VIN001&protocol=JT808'), undefined);
+});