supplier-dispatch-h5/public/res/year-statistic

年终总结看板 Dashboard

道路救援服务年终数据可视化看板项目。

项目结构

dashboard-demo/
├── index.html              # 主看板页面（支持URL参数动态加载数据）
├── data/
│   ├── 供应商年度KPI.xlsx    # 服务商KPI数据（主数据源）
│   ├── 师傅案件top3.xlsx     # 案件量TOP3师傅数据
│   ├── 师傅在线top3.xlsx     # 在线时长TOP3师傅数据
│   ├── 拒单率最高地区.xlsx    # 拒单率最高地区数据
│   └── 拒单率最高时段.xlsx    # 拒单率最高时段数据
└── README.md               # 项目说明

功能特性

• 深色主题数据可视化看板
• 直接读取Excel文件，无需转换为JSON
• 支持通过URL参数 ?providerId=XXX 切换不同服务商
• 右上角下拉框可实时切换服务商（自动从Excel读取服务商列表）
• 使用 Chart.js 实现饼状图和雷达图
• 使用 SheetJS (xlsx) 解析Excel文件
• 响应式布局，支持不同屏幕尺寸
• 数据与页面分离，便于维护

数据指标

看板展示以下数据指标：

1. 总案件量分布（饼状图）

   • 小修、困境、拖车三类案件占比

2. 年度聚合案件量

3. 案件量TOP3师傅

4. 车辆平均总在线时长

5. 在线时长TOP3师傅

6. 拒单率最高地区

7. 拒单率最高时段

8. APP使用率

   • 年度APP使用率展示

Excel数据结构

1. 供应商年度KPI.xlsx

列名	说明
服务商id	服务商唯一标识
服务商	服务商名称
完成案件量	总案件数量
拖车完成量	拖车案件数
小修完成量	小修案件数
困境完成量	困境案件数
聚合案件量	聚合案件数量
APP使用率.	APP使用率（小数形式，如0.998）
年度车辆平均总在线时长（小时）	车辆平均在线时长

2. 师傅案件top3.xlsx

列名	说明
服务商id	服务商唯一标识
服务商	服务商名称
服务人员工号	师傅姓名/工号
完成案件量	该师傅完成的案件数

3. 师傅在线top3.xlsx

列名	说明
服务商名称	服务商名称
司机姓名	师傅姓名
年度总在线时长（小时）	在线时长

4. 拒单率最高地区.xlsx

列名	说明
供应商名称	服务商名称
地区	拒单率最高的地区
拒单率	拒单率（小数形式）

5. 拒单率最高时段.xlsx

列名	说明
供应商名称	服务商名称
时段	拒单率最高的时段
拒单率	拒单率（小数形式）

使用方式

1. 启动本地服务器

由于页面使用 fetch 加载JSON数据，需要通过HTTP服务器访问：

cd C:\Users\Administrator\dashboard-demo

# 使用 Python
python -m http.server 8080

# 或使用 Node.js
npx serve .

# 或使用 PHP
php -S localhost:8080

2. 访问页面

• 默认服务商：http://localhost:8080（自动加载第一个服务商）
• 指定服务商：http://localhost:8080?providerId=1128（使用服务商id）
• 切换服务商：使用页面右上角的下拉框

3. 更新数据

直接替换 data/ 目录下的Excel文件即可，页面会自动读取最新数据。 服务商列表从Excel自动生成，无需手动配置。

技术栈

• HTML5 / CSS3
• JavaScript (ES6+)
• Chart.js - 图表库（饼图、雷达图）
• SheetJS (xlsx) - Excel文件解析
• CSS Grid / Flexbox - 布局

后续优化方向

• 添加更多图表类型（柱状图、折线图等）
• 支持时间范围筛选
• 添加数据导出功能
• 移动端适配优化
• 添加数据加载骨架屏
• 支持主题切换（深色/浅色）

更新日志

2025-01-21

• 改为直接读取Excel文件，无需JSON转换
• 服务商列表从Excel自动生成
• 将"AB段里程对比"改为"APP使用率"展示
• 新增服务商选择下拉框

2025-01-20

• 初始版本
• 实现基础看板布局
• 支持URL参数切换服务商
• 数据JSON化，与页面分离