feat(platform): prioritize fleet monitoring dashboard
This commit is contained in:
lingniu
@@ -1408,28 +1408,28 @@ export function Dashboard({
|
||||
<div className="vp-page">
|
||||
<PageHeader title="车辆服务工作台" description="面向客户的车辆地图、实时监控、轨迹回放、里程统计、自定义时间监控、历史查询、告警通知和数据导出" />
|
||||
<Spin spinning={loading}>
|
||||
<Card bordered className="vp-customer-cockpit" bodyStyle={{ padding: 0 }}>
|
||||
<div className="vp-customer-cockpit-main">
|
||||
<div className="vp-customer-cockpit-copy">
|
||||
<Card bordered className="vp-fleet-monitor" bodyStyle={{ padding: 0 }}>
|
||||
<div className="vp-fleet-monitor-map">
|
||||
<div className="vp-fleet-monitor-copy">
|
||||
<Space wrap>
|
||||
<Tag color="blue">客户车辆监控中心</Tag>
|
||||
<Tag color="green">按车服务</Tag>
|
||||
<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={3} style={{ margin: 0 }}>客户只需要回答：车在哪、跑了多少、发生了什么</Typography.Title>
|
||||
<Typography.Title heading={3} style={{ margin: 0 }}>先看车在哪里，再处理轨迹、里程、告警和导出</Typography.Title>
|
||||
<Typography.Text type="secondary">
|
||||
32960、808、宇通 MQTT 都只是车辆数据来源。产品主线围绕车辆本身提供实时地图、轨迹回放、里程统计、时间窗监控、历史查询、告警通知和数据导出。
|
||||
32960、808、宇通 MQTT 只是数据证据。客户主流程围绕车辆本身：地图看车、实时状态、时间窗复盘、里程统计、历史数据导出和告警通知。
|
||||
</Typography.Text>
|
||||
<Space wrap>
|
||||
<Button theme="solid" type="primary" onClick={() => onOpenMap({ online: 'online' })}>打开车辆地图</Button>
|
||||
<Button theme="light" type="primary" onClick={openTimeMonitorHistory}>时间窗复盘</Button>
|
||||
<Button theme="light" type="primary" onClick={openTimeMonitorRaw}>导出历史数据</Button>
|
||||
<Button theme="light" onClick={copyCustomerServiceGuide}>复制客户说明</Button>
|
||||
</Space>
|
||||
</div>
|
||||
<div className="vp-customer-cockpit-metrics">
|
||||
<VehicleMap
|
||||
points={commandMapPoints}
|
||||
maxFallbackPoints={120}
|
||||
heightClassName="vp-fleet-monitor-map-canvas"
|
||||
fallbackLabel="显示车辆实时坐标预览"
|
||||
/>
|
||||
<div className="vp-fleet-monitor-stats">
|
||||
{customerCockpitMetrics.map((item) => (
|
||||
<button key={item.label} type="button" className="vp-customer-cockpit-metric" onClick={item.onClick} aria-label={`客户车辆监控 ${item.label} ${item.value}`}>
|
||||
<button key={item.label} type="button" className="vp-fleet-monitor-stat" onClick={item.onClick} aria-label={`车辆监控指标 ${item.label} ${item.value}`}>
|
||||
<Tag color={item.color}>{item.label}</Tag>
|
||||
<strong>{item.value}</strong>
|
||||
<span>{item.detail}</span>
|
||||
@@ -1437,10 +1437,14 @@ export function Dashboard({
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="vp-customer-cockpit-rail">
|
||||
<div className="vp-customer-cockpit-workflows">
|
||||
<div className="vp-fleet-monitor-panel">
|
||||
<div className="vp-fleet-monitor-panel-head">
|
||||
<Typography.Text strong>客户工作流</Typography.Text>
|
||||
<Button size="small" theme="light" type="primary" onClick={copyCustomerServiceGuide}>复制说明</Button>
|
||||
</div>
|
||||
<div className="vp-fleet-monitor-actions">
|
||||
{customerCockpitWorkflows.map((item) => (
|
||||
<button key={item.title} type="button" className="vp-customer-cockpit-workflow" onClick={item.onClick} aria-label={`客户车辆工作流 ${item.title} ${item.action}`}>
|
||||
<button key={item.title} type="button" className="vp-fleet-monitor-action" onClick={item.onClick} aria-label={`客户车辆工作流 ${item.title} ${item.action}`}>
|
||||
<span>{item.title}</span>
|
||||
<strong>{item.action}</strong>
|
||||
<small>{item.description}</small>
|
||||
@@ -1448,9 +1452,22 @@ export function Dashboard({
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="vp-customer-cockpit-trust">
|
||||
<div className="vp-fleet-monitor-time">
|
||||
<Space wrap>
|
||||
<Tag color="blue">自定义时间窗</Tag>
|
||||
<Tag color={timeMonitorScope().keyword ? 'green' : 'grey'}>{timeMonitorScope().keyword ? '单车' : '全域'}</Tag>
|
||||
</Space>
|
||||
<strong>{timeMonitorSummary}</strong>
|
||||
<span>同一时间窗会同步用于轨迹回放、区间里程、历史查询和告警复盘。</span>
|
||||
<Space wrap>
|
||||
<Button size="small" theme="solid" type="primary" onClick={openTimeMonitorHistory}>轨迹回放</Button>
|
||||
<Button size="small" theme="light" type="primary" onClick={openTimeMonitorMileage}>里程统计</Button>
|
||||
<Button size="small" theme="light" type="primary" onClick={openTimeMonitorRaw}>数据导出</Button>
|
||||
</Space>
|
||||
</div>
|
||||
<div className="vp-fleet-monitor-trust">
|
||||
{customerTrustSignals.map((item) => (
|
||||
<div key={item.label} className="vp-customer-cockpit-trust-item">
|
||||
<div key={item.label} className="vp-fleet-monitor-trust-item">
|
||||
<span>{item.label}</span>
|
||||
<strong>{item.value}</strong>
|
||||
<small>{item.detail}</small>
|
||||
@@ -1459,65 +1476,6 @@ export function Dashboard({
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Card bordered className="vp-customer-hero" bodyStyle={{ padding: 0 }}>
|
||||
<div className="vp-customer-hero-map">
|
||||
<div className="vp-customer-hero-copy">
|
||||
<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={3} style={{ margin: 0 }}>先看车在哪里，再看车发生了什么</Typography.Title>
|
||||
<Typography.Text type="secondary">
|
||||
平台已把多路接入数据归并为同一套车辆服务。客户每天要直接完成车辆地图监控、轨迹回放、里程统计、时间窗复盘、告警闭环和数据导出。
|
||||
</Typography.Text>
|
||||
<Space wrap>
|
||||
<Button theme="solid" type="primary" onClick={() => onOpenMap({ online: 'online' })}>打开实时地图</Button>
|
||||
<Button theme="light" type="primary" onClick={() => onOpenHistory()}>轨迹回放</Button>
|
||||
<Button theme="light" type="primary" onClick={() => onOpenMileage({})}>里程统计</Button>
|
||||
<Button theme="light" type="primary" onClick={openTimeMonitorRaw}>历史数据</Button>
|
||||
<Button theme="light" onClick={copyCustomerServiceGuide}>复制客户说明</Button>
|
||||
</Space>
|
||||
</div>
|
||||
<VehicleMap
|
||||
points={commandMapPoints}
|
||||
maxFallbackPoints={80}
|
||||
heightClassName="vp-customer-hero-map-canvas"
|
||||
fallbackLabel="显示车辆实时坐标预览"
|
||||
/>
|
||||
</div>
|
||||
<div className="vp-customer-hero-side">
|
||||
<div className="vp-customer-hero-side-head">
|
||||
<Typography.Text strong>车辆服务路径</Typography.Text>
|
||||
<Button size="small" theme="light" type="primary" onClick={copyCustomerServiceGuide}>复制说明</Button>
|
||||
</div>
|
||||
<div className="vp-customer-journey">
|
||||
{customerJourneySteps.map((item) => (
|
||||
<button
|
||||
key={item.step}
|
||||
type="button"
|
||||
className="vp-customer-journey-item"
|
||||
onClick={item.onClick}
|
||||
aria-label={`车辆服务路径 ${item.title} ${item.action}`}
|
||||
>
|
||||
<span>{item.step}</span>
|
||||
<strong>{item.title}</strong>
|
||||
<em>{item.action}</em>
|
||||
<small>{item.detail}</small>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="vp-customer-health-grid">
|
||||
{customerHealthItems.map((item) => (
|
||||
<button key={item.label} type="button" className="vp-customer-health-item" onClick={item.onClick} aria-label={`车辆运营 ${item.label} ${item.value}`}>
|
||||
<Tag color={item.color}>{item.label}</Tag>
|
||||
<strong>{item.value}</strong>
|
||||
<span>{item.detail}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Card bordered title="车辆服务指挥台" style={{ marginBottom: 16 }}>
|
||||
<div className="vp-command-center-grid">
|
||||
{commandCenterItems.map((item) => (
|
||||
|
||||
Reference in New Issue
Block a user