# Databoard

**Repository Path**: mtoooo/databoard

## Basic Information

- **Project Name**: Databoard
- **Description**: 汽车测试看板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-05
- **Last Updated**: 2025-11-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# XX汽车性能稳定性测试看板

基于 Flask（后端）与 ECharts（前端）的实时看板，展示速度、温度、振动、电量、稳定性评分、故障率等指标，并在世界地图上以涟漪散点展示全球测试车辆的位置与描述信息。后端接口使用随机数模拟动态数据。

## 目录结构

```
TranEC/
├─ backend/
│  ├─ app.py                  # Flask 应用与接口
│  ├─ requirements.txt        # 后端依赖
│  └─ templates/
│     └─ index.html           # 前端看板（由 Flask 渲染）
└─ frontend/                  # 早期独立静态页面（现已集成到 Flask，可选）
```

![img.png](templates%2Fimg.png)

## 项目架构

- **后端（Flask）**: 提供页面模板渲染与数据接口（`/api/metrics`、`/api/vehicles`、`/api/world`、`/health`）。
- **前端（ECharts + Jinja2 模板）**: 由 `backend/templates/index.html` 渲染，定时轮询后端接口进行实时更新。
- **地图数据**: 通过后端代理外部世界地图 GeoJSON，或读取本地 `backend/static/world.json`。

```mermaid
flowchart LR
  subgraph Browser[浏览器]
    E[ECharts 前端\nbackend/templates/index.html]
  end

  subgraph Flask[Flask 后端]
    TPL[(Jinja2 模板渲染)]
    API1[/GET /api/metrics/]
    API2[/GET /api/vehicles/]
    API3[/GET /api/world/]
    H[/GET /health/]
  end

  subgraph Data[数据源]
    GEO[(外部/本地\n世界地图 GeoJSON)]
  end

  E <-->|SSR| TPL
  E -->|2s 轮询| API1
  E -->|4s 轮询| API2
  E -->|初始化/缓存| API3
  API3 -->|requests/读取| GEO
  E --> H
```

## 快速开始

1) 安装依赖并启动后端
```
cd backend
python3 -m venv venv && source venv/bin/activate
pip install -r requirements.txt
python app.py
```
默认监听: http://127.0.0.1:5000/

2) 打开看板
- 浏览器访问: http://127.0.0.1:5000/

> 说明：当前前端已集成在 Flask 模板中，无需单独起静态服务器。

## 提供的接口

- GET `/api/metrics`
  - 返回单次随机指标（车速、发动机温度、振动、电量、稳定性评分、故障率）
- GET `/api/vehicles`
  - 返回多个地区的测试车辆点位与描述（含经纬度、速度、振动、温度、状态、描述文案）
- GET `/api/world`
  - 代理返回世界地图 GeoJSON（用于前端注册 world 地图），避免外网/CORS 问题
- GET `/health`
  - 健康检查

## 前端功能概览（`backend/templates/index.html`）

- KPI 指标：车速、发动机温度、振动、故障率
- 折线图：车速趋势、发动机温度趋势（保留最近 60 个点）
- 仪表盘：稳定性评分（0-100）
- 柱状图：振动/电量快照
- 世界地图：涟漪散点展示全球车辆点位，悬浮提示展示描述信息
- 轮询：
  - 指标每 2 秒刷新 `/api/metrics`
  - 车辆点位每 4 秒刷新 `/api/vehicles`
  - 世界地图数据从 `/api/world` 加载并注册

## 常见问题

- 地图未显示
  - 确认 `/api/world` 接口 200 且响应 JSON
  - 浏览器控制台无 `echarts.registerMap` 报错
  - 网络代理或公司网络屏蔽时，`/api/world` 仍由后端代理，无需直连外网
- 无数据或数字不更新
  - 检查 `/api/metrics` 和 `/api/vehicles` 是否 200
  - 浏览器硬刷新（Mac: Cmd+Shift+R）
- 端口占用
  - 修改 `backend/app.py` 中 `app.run(..., port=5000)` 的端口，或释放占用端口

## 自定义与扩展

- 新增指标：在后端 `/api/metrics` 增加字段，并在前端相应更新图表与 KPI
- 点样式/颜色：调整 `effectScatter` 的 `itemStyle`、`symbolSize` 或根据状态设色
- 离线地图：可将世界 GeoJSON 放入 `backend/static/world.json`，并将前端的地图 URL 指向 `/static/world.json`

## 依赖版本

- Flask 3.0+
- flask-cors 4.0+
- requests 2.31+
- ECharts 5.x（通过 CDN 加载）