From 168493f76f0264c80e229614146b4325ce58ec4c Mon Sep 17 00:00:00 2001
From: lingniu <lingniu@lingnius-Mac-mini.local>
Date: Sun, 5 Jul 2026 21:03:30 +0800
Subject: [PATCH] feat(platform): surface map situation on dashboard

---
 .../apps/web/src/pages/Dashboard.tsx          | 32 ++++++++
 .../apps/web/src/styles/global.css            | 77 +++++++++++++++++++
 .../apps/web/src/test/App.test.tsx            |  5 ++
 3 files changed, 114 insertions(+)

diff --git a/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx b/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx
index ea458396..e25873e3 100644
--- a/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx
+++ b/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx
@@ -1933,6 +1933,38 @@ export function Dashboard({
             ))}
           </div>
         </section>
+        <section className="vp-customer-map-situation" aria-label="车辆地图态势">
+          <div className="vp-customer-map-situation-map">
+            <VehicleMap
+              points={commandMapPoints}
+              maxFallbackPoints={120}
+              heightClassName="vp-customer-map-situation-canvas"
+              fallbackLabel="显示车辆实时坐标预览"
+            />
+          </div>
+          <div className="vp-customer-map-situation-panel">
+            <Space wrap>
+              <Tag color="blue">车辆地图态势</Tag>
+              <Tag color={amapConfigured ? 'green' : 'orange'}>{amapConfigured ? '高德地图可用' : '坐标预览'}</Tag>
+              <Tag color={(summary?.issueVehicles ?? 0) > 0 ? 'orange' : 'green'}>{formatCount(summary?.issueVehicles)} 告警</Tag>
+            </Space>
+            <Typography.Title heading={5} style={{ margin: 0 }}>先看在线车辆在哪里，再决定是否回放轨迹、核对里程、导出数据或通知处理。</Typography.Title>
+            <div className="vp-customer-map-situation-metrics">
+              {customerCockpitMetrics.slice(1, 4).map((item) => (
+                <button key={item.label} type="button" onClick={item.onClick} aria-label={`车辆地图态势 ${item.label} ${item.value}`}>
+                  <span>{item.label}</span>
+                  <strong>{item.value}</strong>
+                </button>
+              ))}
+            </div>
+            <Space wrap>
+              <Button size="small" theme="solid" type="primary" aria-label="车辆地图态势 打开实时地图" onClick={() => onOpenMap({ online: 'online' })}>打开实时地图</Button>
+              <Button size="small" theme="light" type="primary" aria-label="车辆地图态势 回放轨迹" onClick={openTimeMonitorHistory}>回放轨迹</Button>
+              <Button size="small" theme="light" type="primary" onClick={openTimeMonitorMileage}>统计查询</Button>
+              <Button size="small" theme="light" type="warning" onClick={() => onOpenQuality()}>告警通知</Button>
+            </Space>
+          </div>
+        </section>
         <section className="vp-customer-service-command" aria-label="客户车辆服务总控台">
           <div className="vp-customer-service-command-main">
             <div className="vp-customer-service-command-copy">
diff --git a/vehicle-data-platform/apps/web/src/styles/global.css b/vehicle-data-platform/apps/web/src/styles/global.css
index 91096929..97365b46 100644
--- a/vehicle-data-platform/apps/web/src/styles/global.css
+++ b/vehicle-data-platform/apps/web/src/styles/global.css
@@ -1248,6 +1248,83 @@ body {
   overflow: hidden;
 }
 
+.vp-customer-map-situation {
+  margin-bottom: 16px;
+  padding: 14px;
+  border: 1px solid rgba(22, 100, 255, 0.16);
+  border-radius: 8px;
+  background: #ffffff;
+  display: grid;
+  grid-template-columns: minmax(420px, 1.1fr) minmax(300px, 0.9fr);
+  gap: 14px;
+  align-items: stretch;
+}
+
+.vp-customer-map-situation-map {
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid var(--vp-border);
+  border-radius: 8px;
+  background: #f8fbff;
+}
+
+.vp-customer-map-situation-canvas {
+  min-height: 260px;
+}
+
+.vp-customer-map-situation-panel {
+  min-width: 0;
+  display: grid;
+  align-content: center;
+  gap: 12px;
+}
+
+.vp-customer-map-situation-panel .semi-typography {
+  color: var(--vp-text);
+  line-height: 24px;
+}
+
+.vp-customer-map-situation-metrics {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.vp-customer-map-situation-metrics button {
+  min-width: 0;
+  padding: 10px;
+  border: 1px solid var(--vp-border);
+  border-radius: 8px;
+  background: #fbfcff;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+  display: grid;
+  gap: 4px;
+  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
+}
+
+.vp-customer-map-situation-metrics button:hover,
+.vp-customer-map-situation-metrics button:focus-visible {
+  border-color: rgba(22, 100, 255, 0.42);
+  background: #f5f9ff;
+  box-shadow: 0 0 0 3px rgba(22, 100, 255, 0.08);
+  outline: none;
+}
+
+.vp-customer-map-situation-metrics span {
+  color: var(--vp-text-muted);
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.vp-customer-map-situation-metrics strong {
+  color: var(--vp-text);
+  font-size: 18px;
+  line-height: 24px;
+}
+
 .vp-customer-service-journey {
   margin-bottom: 16px;
   padding: 14px;
diff --git a/vehicle-data-platform/apps/web/src/test/App.test.tsx b/vehicle-data-platform/apps/web/src/test/App.test.tsx
index 16c19015..a71f74c2 100644
--- a/vehicle-data-platform/apps/web/src/test/App.test.tsx
+++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx
@@ -709,6 +709,11 @@ test('dashboard prioritizes customer vehicle service command over data sources',
   expect(screen.getByRole('button', { name: '车辆服务闭环 3 锁定时间窗 1 天窗口 自定义时间' })).toBeInTheDocument();
   expect(screen.getByRole('button', { name: '车辆服务闭环 4 复盘统计 4 活跃 轨迹统计' })).toBeInTheDocument();
   expect(screen.getByRole('button', { name: '车辆服务闭环 5 交付闭环 7 告警 导出通知' })).toBeInTheDocument();
+  expect(screen.getByText('车辆地图态势')).toBeInTheDocument();
+  expect(screen.getByText('先看在线车辆在哪里，再决定是否回放轨迹、核对里程、导出数据或通知处理。')).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '车辆地图态势 打开实时地图' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '车辆地图态势 回放轨迹' })).toBeInTheDocument();
+  expect(screen.getByText('车辆地图态势').compareDocumentPosition(screen.getByText('客户车辆服务总控台')) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
   expect(await screen.findByText('客户车辆服务总控台')).toBeInTheDocument();
   expect(screen.getByText('三个接入来源统一沉到证据层，首页只回答客户怎么监控车辆、回放轨迹、核对里程、导出数据和处理告警。')).toBeInTheDocument();
   expect(screen.getByRole('button', { name: '客户车辆服务总控台 实时地图 208 在线 进入地图' })).toBeInTheDocument();