xzt_data_screen/docs/网络货运数据大屏规划.md

网络货运智慧运营中心规划

1. 产品定位

本项目是一套无需后台接口、可离线演示的网络货运数据大屏。画面围绕“货源、运力、运输、履约、风控、效益”展开，用一个 1920×1080 驾驶舱讲清从货源发布到车辆履约的完整业务链路。

目标观众为平台管理者、企业客户及展示来宾。首版采用阿里 DataV 类工业科技视觉，但不复制具体模板；核心记忆点是中央全国货运态势图、贯穿全屏的线路流光，以及风险发生时地图与告警面板同步响应。

2. 信息架构

顶部全局区

• 平台累计运单：累计业务规模
• 今日运输吨位：当日承运货重
• 今日运费金额：当日运单含税运费
• 当前在途车辆：处于运输中的去重车辆
• 活跃司机：当日有接单、装卸或运输行为的司机
• 累计运输里程：已完成及在途运单里程

左侧供给区

1. 运单量趋势：最近 12 小时发布与完成运单
2. 货物类型：钢材、煤炭、建材、农产品、快消、机械、化工
3. 运力状态：空闲、待装、装货、运输、待卸、异常
4. 车辆构成：高栏、厢式、平板、冷藏、罐式
5. 货源城市排行：货源量前五城市

中央态势区

1. 伪 3D 中国地图与视觉地台
2. 重点物流枢纽脉冲
3. 城际货运飞线与流动光点
4. 车辆沿线路移动
5. 省份业务热度与货运光柱
6. 当前焦点线路图文浮层

右侧运营区

1. 实时风险预警
2. 准时装货、准时送达、回单上传履约仪表
3. 区域经营排行
4. 司机行为雷达
5. 吨公里运价、空驶率、车辆利用率、等待时长

底部调度区

1. 实时运单流水
2. 热门线路排行
3. 智能调度匹配过程
4. 节省空驶里程、碳减排、新能源车辆占比

3. 视觉规范

• 基准画布：1920×1080，整体等比缩放并居中
• 背景：#020913 至 #061b2d，叠加道路网格、噪点和径向辉光
• 主色：青蓝 #19d9ff，用于常规数据与线路
• 辅色：深蓝 #1668ff、紫青 #6af2e7
• 强调：金色 #ffc857，用于金额、重点线路和排名
• 风险：橙色 #ff8a34、红色 #ff415d
• 字体：标题使用窄体科技字族回退，正文使用中文黑体回退；数字使用等宽字族
• 面板：透明深蓝底、切角、细描边、四角短线与顶部扫描光，不使用通用圆角白卡
• 动画：首屏分层进入 800–1400ms；飞线 3–6s；扫描 6–10s；告警呼吸 1.8s
• 降级：系统开启减少动态效果时，停止粒子、扫描与循环位移动画

4. 数据模型与口径

运单

字段包括运单号、货物、重量、起点、终点、距离、单价、运费、车辆、司机、状态、计划及实际时间。

• 运费 = 重量 × 距离 × 吨公里单价
• 状态为待调度、待装、运输中、待卸、已完成、异常
• 总运单 = 各状态运单之和

车辆与司机

车辆字段包括车牌、车型、载重、状态、当前位置、线路进度和新能源标记。司机字段包括姓名、评分、接单数、准时率、安全分和活跃状态。

• 在途车辆数不大于活跃车辆数
• 一个运输中运单绑定一辆车和一名司机
• 车辆位置由线路起终点及进度插值得到

线路与区域

线路包含起终点、坐标、距离、运单量、运输吨位、平均运价、准时率和风险数。区域数据由线路和运单聚合，不单独随机生成。

风险

风险包括轨迹偏离、长时停留、疲劳驾驶、超速、人车不一致、围栏异常。每条风险绑定车辆、线路、等级、发生时间和处理状态。

效益

• 空驶率 = 空驶里程 ÷ 总行驶里程
• 车辆利用率 = 执行任务车辆 ÷ 可用车辆
• 回单上传率 = 已上传回单完成单 ÷ 已完成运单
• 碳减排为减少空驶里程乘以统一排放因子，仅作为演示估算值

5. 模拟策略

采用固定随机种子生成基础数据，确保刷新后业务规模稳定；运行时每 2 秒推进车辆位置，每 4 秒新增或完成一笔运单，每 6–12 秒触发一次可控风险。所有图表共享同一数据源，禁止各组件自行产生互相冲突的随机数。

演示规模为 30 个物流节点、10 条重点线路、约 180 辆车辆、240 名司机和 600–1000 笔运单。晚间线路活跃度、货物占比、地区规模与价格保持符合行业展示语境的差异。

6. 素材规范

• 生成式素材：夜间智慧物流园区、重卡侧前方透明主体、调度中心氛围背景
• 自制 SVG：车型剪影、货类图标、风险图标、科技边框、雷达和道路纹理
• 地图：使用项目内中国 GeoJSON，边界仅用于数据展示
• 图片统一转换为 WebP，压暗高光、叠加青蓝色调，不携带品牌、水印或文字
• 外部素材必须记录来源及商用许可；无法确认授权时不用

7. 组件与数据流

页面容器只负责布局。模拟器提供只读状态和明确操作；各面板通过 props 接收数据，通过事件上报选中的区域、线路或车辆。地图渲染层接受统一的 MapScene，首版连接 ECharts，二期可替换为 Three.js 而不改变业务组件。

8. 性能目标

• 生产构建无 TypeScript 错误
• 主流 Chromium 浏览器正常运行
• 1920×1080 展示机上常态动画目标 50–60 FPS
• 首屏本地资源加载目标低于 3 秒
• 1366×768 与 2560×1440 下完整等比显示，无裁切、无横向滚动
• 定时器和图表实例在组件卸载时全部销毁

9. 验收清单

1. 页面包含不少于 16 个独立信息模块，且图表、图像和数据文字比例均衡
2. 中央地图具备立体地台、枢纽、飞线、车辆点和焦点线路
3. 告警列表、地图异常线路与顶部风险提示能够联动
4. 模拟数据满足金额、运单状态、车辆及区域聚合关系
5. 运单列表、车辆位置和时间持续更新且长时间运行稳定
6. 背景、卡车主体及行业 SVG 素材风格统一，无版权风险
7. 支持全屏比例适配和减少动态效果
8. 完成类型检查、生产构建、浏览器截图及多分辨率验收

10. 二期真 3D

首版不引入重型模型。二期在现有 MapRenderer 边界内增加 Three.js 渲染器，加载压缩后的 GLTF 卡车、地形挤出、光带道路和镜头巡航。业务数据、指标面板及交互协议保持不变。