feat(platform): add vehicle data management console

2026-07-03 20:55:54 +08:00
parent 0d8916df47
commit 859bc3e9ee
45 changed files with 6837 additions and 0 deletions
--- a/vehicle-data-platform/apps/web/src/pages/Quality.tsx
+++ b/vehicle-data-platform/apps/web/src/pages/Quality.tsx
@@ -0,0 +1,57 @@
+import { Card, Col, Row, Table, Tag, Toast } from '@douyinfe/semi-ui';
+import { useEffect, useState } from 'react';
+import { api } from '../api/client';
+import type { OpsHealth, QualityIssueRow } from '../api/types';
+import { PageHeader } from '../components/PageHeader';
+
+export function Quality() {
+  const [issues, setIssues] = useState<QualityIssueRow[]>([]);
+  const [health, setHealth] = useState<OpsHealth | null>(null);
+
+  useEffect(() => {
+    api.qualityIssues(new URLSearchParams({ limit: '20' }))
+      .then((page) => setIssues(page.items))
+      .catch((error: Error) => Toast.error(error.message));
+    api.opsHealth()
+      .then(setHealth)
+      .catch((error: Error) => Toast.error(error.message));
+  }, []);
+
+  return (
+    <div className="vp-page">
+      <PageHeader title="数据质量" description="断链、VIN 缺失、字段缺失和链路健康的排查入口" />
+      <Row gutter={16}>
+        <Col span={8}><Card bordered title="Kafka Lag">{health?.kafkaLag ?? 0}</Card></Col>
+        <Col span={8}><Card bordered title="Redis 在线 Key">{health?.redisOnlineKeys ?? 0}</Card></Col>
+        <Col span={8}><Card bordered title="存储写入">{health?.tdengineWritable && health.mysqlWritable ? '正常' : '异常'}</Card></Col>
+      </Row>
+      <Card bordered title="质量问题" style={{ marginTop: 16 }}>
+        <Table
+          rowKey="vin"
+          dataSource={issues}
+          pagination={false}
+          columns={[
+            { title: 'VIN', dataIndex: 'vin' },
+            { title: '车牌', dataIndex: 'plate' },
+            { title: '协议', dataIndex: 'protocol' },
+            { title: '问题', dataIndex: 'issueType' },
+            { title: '级别', render: (_: unknown, row: QualityIssueRow) => <Tag color={row.severity === 'error' ? 'red' : 'orange'}>{row.severity}</Tag> },
+            { title: '最后时间', dataIndex: 'lastSeen' },
+            { title: '说明', dataIndex: 'detail' }
+          ]}
+        />
+      </Card>
+      <Card bordered title="链路健康" style={{ marginTop: 16 }}>
+        <Table
+          dataSource={health?.linkHealth ?? []}
+          pagination={false}
+          columns={[
+            { title: '链路', dataIndex: 'name' },
+            { title: '状态', dataIndex: 'status' },
+            { title: '说明', dataIndex: 'detail' }
+          ]}
+        />
+      </Card>
+    </div>
+  );
+}