diff --git a/vehicle-data-platform/apps/web/src/pages/Vehicles.tsx b/vehicle-data-platform/apps/web/src/pages/Vehicles.tsx index 34b10589..7086c2db 100644 --- a/vehicle-data-platform/apps/web/src/pages/Vehicles.tsx +++ b/vehicle-data-platform/apps/web/src/pages/Vehicles.tsx @@ -714,6 +714,40 @@ export function Vehicles({ } ], [exportVehicles, filters.keyword, onOpenHistory, onOpenMap, onOpenMileage, onOpenRealtime, rows.length, serviceScopeFilters, summary?.onlineVehicles]); const primaryAction = actionQueue[0]; + const vehicleAssetTasks = [ + { + title: '最近上报', + value: `${(summary?.onlineVehicles ?? 0).toLocaleString()} 在线`, + detail: '按最近仍在上报的车辆进入实时监控和地图态势。', + action: '只看在线', + color: 'green' as const, + onClick: () => applyFilters({ ...filters, online: 'online' }) + }, + { + title: '待关注车辆', + value: `${((summary?.noDataVehicles ?? 0) + (summary?.unboundVehicles ?? 0)).toLocaleString()} 待处理`, + detail: '无来源、未绑定或来源缺失的车辆先进入处置队列。', + action: '查看异常', + color: ((summary?.noDataVehicles ?? 0) + (summary?.unboundVehicles ?? 0)) > 0 ? 'orange' as const : 'green' as const, + onClick: () => applyFilters(primaryAction ? { ...filters, ...primaryAction.filters } : { ...filters, serviceStatus: 'degraded' }) + }, + { + title: '身份待维护', + value: `${(summary?.unboundVehicles ?? 0).toLocaleString()} 未绑定`, + detail: '复制当前页身份维护清单,用于补齐车牌、手机号、VIN 和 OEM。', + action: '维护清单', + color: (summary?.unboundVehicles ?? 0) > 0 || (summary?.archiveIncompleteVehicles ?? 0) > 0 ? 'orange' as const : 'green' as const, + onClick: copyIdentityMaintenanceList + }, + { + title: '报表导出', + value: `${rows.length.toLocaleString()} 当前页`, + detail: '导出车辆资产清单,后续按车辆进入轨迹、统计和历史证据。', + action: '导出车辆', + color: rows.length > 0 ? 'blue' as const : 'grey' as const, + onClick: exportVehicles + } + ]; const vehicleDecisionItems = [ { title: '在线车辆', @@ -1016,6 +1050,34 @@ export function Vehicles({ + +
+
+ + 资产管理 + {filters.keyword?.trim() ? '单车' : '车辆池'} + + 像车队资产系统一样,把车辆清单直接转成最近上报、待关注、身份维护和报表导出。 + 车辆中心不只是查表,客户要能从这里直接完成看车、筛异常、维护身份和导出车辆报表。 +
+
+ {vehicleAssetTasks.map((item) => ( + + ))} +
+
+
diff --git a/vehicle-data-platform/apps/web/src/styles/global.css b/vehicle-data-platform/apps/web/src/styles/global.css index def63be5..d8160244 100644 --- a/vehicle-data-platform/apps/web/src/styles/global.css +++ b/vehicle-data-platform/apps/web/src/styles/global.css @@ -2230,6 +2230,88 @@ button.vp-realtime-command-item:focus-visible { line-height: 20px; } +.vp-vehicle-asset-board { + display: grid; + grid-template-columns: minmax(280px, 0.62fr) minmax(0, 1.38fr); + gap: 16px; +} + +.vp-vehicle-asset-summary { + min-height: 156px; + padding: 14px; + border: 1px solid rgba(22, 100, 255, 0.22); + border-radius: var(--vp-radius); + background: #f6f9ff; + display: grid; + gap: 10px; + align-content: start; +} + +.vp-vehicle-asset-summary strong { + color: var(--vp-text); + font-size: 18px; + line-height: 25px; + font-weight: 700; +} + +.vp-vehicle-asset-summary span { + color: var(--vp-text-muted); + font-size: 13px; + line-height: 20px; +} + +.vp-vehicle-asset-grid { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 12px; +} + +.vp-vehicle-asset-item { + min-height: 156px; + padding: 12px; + border: 1px solid var(--vp-border); + border-radius: 8px; + background: #fbfcff; + color: inherit; + cursor: pointer; + font: inherit; + text-align: left; + display: grid; + gap: 9px; + align-content: start; +} + +.vp-vehicle-asset-item:hover, +.vp-vehicle-asset-item:focus-visible { + border-color: rgba(22, 100, 255, 0.45); + background: #f5f9ff; + box-shadow: var(--vp-shadow-sm); + outline: none; +} + +.vp-vehicle-asset-item strong { + color: var(--vp-text); + font-size: 18px; + line-height: 24px; + font-weight: 700; + word-break: break-word; +} + +.vp-vehicle-asset-item span { + color: var(--vp-text-muted); + font-size: 12px; + line-height: 18px; +} + +.vp-vehicle-asset-item em { + color: var(--vp-primary); + font-size: 12px; + font-style: normal; + font-weight: 700; + line-height: 18px; + align-self: end; +} + .vp-vehicle-question-board { display: grid; grid-template-columns: minmax(280px, 0.62fr) minmax(0, 1.38fr); @@ -6931,6 +7013,8 @@ button.vp-realtime-command-item:focus-visible { .vp-vehicle-service-grid, .vp-vehicle-lookup-head, .vp-vehicle-lookup-grid, + .vp-vehicle-asset-board, + .vp-vehicle-asset-grid, .vp-vehicle-question-board, .vp-vehicle-question-grid, .vp-vehicle-decision-grid, 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 46bf47bc..c037b236 100644 --- a/vehicle-data-platform/apps/web/src/test/App.test.tsx +++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx @@ -2073,6 +2073,12 @@ test('shows vehicle service result summary on vehicle list filters', async () => expect(screen.getByText('轨迹与位置')).toBeInTheDocument(); expect(screen.getAllByText('数据交付').length).toBeGreaterThanOrEqual(1); expect(screen.getByRole('button', { name: /复制客户查车路径/ })).toBeInTheDocument(); + expect(screen.getByText('车辆资产作业栏')).toBeInTheDocument(); + expect(screen.getByText('像车队资产系统一样,把车辆清单直接转成最近上报、待关注、身份维护和报表导出。')).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '车辆资产作业 最近上报 只看在线' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '车辆资产作业 待关注车辆 查看异常' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '车辆资产作业 身份待维护 维护清单' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '车辆资产作业 报表导出 导出车辆' })).toBeInTheDocument(); expect(screen.getByText('车辆客户常问')).toBeInTheDocument(); expect(screen.getByText('把车辆池问题翻译成找车、在线、异常和交付动作')).toBeInTheDocument(); expect(screen.getByRole('button', { name: '车辆客户常问 客户要找某辆车怎么办? 聚焦找车' })).toBeInTheDocument(); diff --git a/vehicle-data-platform/docs/fleet-platform-product-research.md b/vehicle-data-platform/docs/fleet-platform-product-research.md index 696fb340..c1e6c1f2 100644 --- a/vehicle-data-platform/docs/fleet-platform-product-research.md +++ b/vehicle-data-platform/docs/fleet-platform-product-research.md @@ -14,12 +14,15 @@ - Samsara 的车队远程信息产品强调实时 GPS、车辆诊断、路线导航、燃料/能源监控和风险告警。这对应本项目的客户主路径:实时地图、车辆状态、轨迹、统计、告警。参考:https://www.samsara.com/products/telematics - Verizon Connect 的车队管理公开页面把 dashboards、reports、alerts、near real-time location、driver behavior、routing visibility 放在核心能力中。这说明客户视角需要“监控、报表、告警、路线/位置”并列,而不是把 Kafka、Redis、TDengine 放在第一层。参考:https://www.verizonconnect.com/ - Geotab 关于远程车队管理的说明把数据流描述为:车辆采集位置和健康信息,经网络到云端,再在 Web/Mobile dashboard 展示实时报告和告警。这与本项目架构一致,但产品表达应从 dashboard 和 alerts 开始,而不是从接入来源开始。参考:https://www.geotab.com/blog/remote-fleet-management/ +- Fleetio 的车辆资产和报表资料把 Vehicle List、Vehicle Details、Service History、Service Schedule 等作为车队管理的高频入口。这说明车辆中心不能只是数据覆盖表,还要提供最近车辆、待维护车辆、服务历史/报表导出的资产作业入口。参考:https://www.fleetio.com/ 和 https://www.fleetio.com/blog/fleet-management-reports +- Azuga 的车队跟踪资料强调实时跟踪、车辆资产保护、维护告警和洞察报表。这对应本项目车辆中心的作业栏:最近上报、待关注车辆、身份维护和报表导出。参考:https://www.azuga.com/ ## 对标后的产品改造规则 - 首页第一屏只回答客户任务:看车在哪、查某段时间、导出证据、处理告警。 - “32960 / 808 / MQTT”不作为主任务名称,只在车辆档案、历史证据、运维质量中作为来源可信度出现。 - 自定义时间窗必须成为跨页面共享的查询意图:轨迹、里程、历史数据、告警复盘使用同一组参数。 +- 车辆中心要像资产系统一样把车辆清单变成作业入口:最近上报、待关注、身份维护、报表导出,而不是只提供表格筛选。 - 内部可观测性继续保留,但默认折叠在运维/依据层,避免客户把系统理解为“协议接入平台”。 ## 本项目采用的产品原则