基于 Vue 3 + ECharts + Express + SQLite 的可视化大屏与业务管理系统——YOLOv8 高精度车辆行人检测与计数系统

YOLOv8 高精度车辆行人检测与计数系统

基于 Vue 3 + ECharts + Express + SQLite 的可视化大屏与业务管理系统，面向 YOLOv8 训练监控、检测计数、区域态势分析、机器学习推理演示，以及可配置的整站主题样式。

系统支持：用户名 / 手机号登录、三角色权限、SQLite 本地存储、Excel 导入导出、四页数据大屏 + 区域下钻、三维交通地球图、系统样式实时配置（含中国地图配色联动）等。

项目简介

本项目模拟一套完整的「YOLOv8 车辆 / 行人检测与计数」业务平台，适合作为毕业设计、课程设计或可视化大屏演示工程。

核心能力

训练过程可视化 展示 Loss、mAP、Precision、Recall、GPU / 内存等指标；管理员与操作员可动态调整学习率、批次大小、优化器等超参。
全国 / 区域态势大屏 覆盖 34 个省级行政区（含港澳台）。全国地图支持色阶填色与省会节点；点击省份可进入区域详情大屏。
三维交通可视化 在地球上以 Bar3D、三维散点、陆路走廊动效等形式展示全球交通流量与拥堵（主题为交通，非真实人口统计）。
业务管理后台 用户管理、检测数据 CRUD、Excel 导入导出、SQLite 路径配置与表统计。
机器学习预测页 支持手动调参推理与上传文件推理（后端为业务演示用的仿真结果，可扩展为真实模型服务）。
整站主题系统 可配置背景、字体、主色、圆角等；预设多套主题；全国检测态势地图的中国地图配色会随主题实时变化。

默认访问地址

服务	地址
前端（Vite）	http://localhost:5173
后端（Express）	http://localhost:3001
API 代理	前端 `/api` → `http://localhost:3001`

功能特性

账号与权限

能力	说明
登录方式	用户名或手机号 + 密码
登录页	仿淘宝 PC 登录：顶栏品牌、橙色横幅、右侧白卡片、密码 / 扫码切换
角色	`admin` 管理员 / `operator` 操作员 / `viewer` 观察员
鉴权	JWT Bearer；前端路由守卫 + 后端中间件
用户管理	增删改查、重置密码、启停账号（仅管理员）

数据管理

检测记录增删改查、按地区 / 关键词筛选、分页
Excel（.xlsx）导入，支持中英文字段名映射
导出：检测记录、训练指标、区域数据、用户列表
SQLite 数据库路径配置、重连、表记录数统计

可视化大屏

页面	路由	说明
态势地图 / 三维交通	`/screen/map`	默认首页；中间可切换 Bar3D / 全国地图 / 全球交通散点
训练监控	`/screen/training`	训练曲线、资源占用、参数调控、线性回归等
数据分析	`/screen/analytics`	单轴散点、雷达、盒须、热力、日历热力、关系图
三维可视化	`/screen/globe`	三维散点、散点矩阵、三维建筑、Flights、GraphGL
区域详情	`/screen/region/:code`	地图下钻后的分时与天气统计

主题与体验

整站浅色淘宝风工作台（可切换为科技蓝、暗色大屏等）
「系统样式设置」页实时预览并本地持久化
中国地图省份底色、热力色阶、节点与提示框颜色跟随主题
弹窗支持点击遮罩 / Esc / 关闭按钮关闭；消息提示可点击消失

技术栈

前端

技术	用途
Vue 3	组合式 API
Vite 6	开发与构建
Vue Router 4	路由与权限守卫
Pinia	用户状态、主题状态
Element Plus	表单、表格、对话框等
ECharts 5	二维图表、中国地图
echarts-gl	三维地球、Bar3D、GraphGL
echarts-stat	线性回归等统计变换
Axios	HTTP 与 Token 拦截
Sass	样式预处理

后端

技术	用途
Express	REST API
better-sqlite3	SQLite 持久化
jsonwebtoken	登录鉴权
bcryptjs	密码哈希
multer	文件上传
xlsx	Excel 导入导出
cors	跨域

系统架构

复制代码

浏览器 (Vue3 + ECharts + Pinia 主题)
    │  HTTP /api  (Vite 代理 → :3001)
    ▼
Express API
    ├── /api/auth        登录、用户 CRUD
    ├── /api/data        检测数据、导入导出、数据库配置
    ├── /api/dashboard   大屏聚合、训练指标、图表数据
    └── /api/predict     推理调参、上传预测、日志
    ▼
SQLite (server/data/yolo_system.db)

本地浏览器
    └── localStorage
         ├── token / user          登录态
         └── yolo_system_theme     系统样式配置

数据流简述

用户登录获取 JWT，后续请求携带 Authorization: Bearer <token>。
大屏并行请求 overview、map-data、training-metrics 等聚合接口。
管理页对 detection_records、users 等进行 CRUD，并可导入导出。
预测页提交参数或文件，后端返回仿真检测结果并写入 prediction_logs。
样式设置写入 localStorage，通过 CSS 变量与地图配色函数实时作用于界面。

环境要求

Node.js ：建议 >= 18（推荐 20.x）
npm ：>= 9
操作系统：Windows / macOS / Linux
编译环境 ：better-sqlite3 为原生模块；Windows 若安装失败，请安装 Visual Studio Build Tools（含"使用 C++ 的桌面开发"）

快速开始

1. 安装依赖

复制代码

cd Vue10
npm install

2. 初始化数据库（可选）

服务启动时会自动初始化；也可手动执行：

复制代码

npm run init-db

初始化内容：

创建业务表
写入演示账号
同步 34 个省级行政区
生成训练指标、检测记录等示例数据

3. 启动开发环境

复制代码

npm run dev

同时启动：

前端：http://localhost:5173
后端：http://localhost:3001

也可分开启动：

复制代码

npm run server   # 仅后端
npm run client   # 仅前端

4. 生产构建

复制代码

npm run build
npm run preview

生产环境需保证前端静态资源与 /api 可访问（同域或反向代理）。

停止服务

若使用 npm run dev / npm run server 启动，可在对应终端按 Ctrl + C 结束。

若端口仍被占用，可在 PowerShell 中结束占用进程：

复制代码

# 结束 3001 / 5173 端口进程
foreach ($p in 3001, 5173) {
  Get-NetTCPConnection -LocalPort $p -ErrorAction SilentlyContinue |
    Select-Object -ExpandProperty OwningProcess -Unique |
    ForEach-Object { Stop-Process -Id $_ -Force -ErrorAction SilentlyContinue }
}

演示账号与权限

账号	密码	手机号	角色	说明
`admin`	`admin123`	`13800000001`	管理员	全部功能
`operator`	`operator123`	`13800000002`	操作员	数据管理、训练调参、预测、大屏
`viewer`	`viewer123`	`13900000003`	观察员	主要查看大屏与样式设置

权限矩阵

功能模块	admin	operator	viewer
四页大屏 + 区域大屏	✓	✓	✓
系统样式设置	✓	✓	✓
机器学习预测	✓	✓	✗
数据管理 / 导入导出	✓	✓	✗
训练参数动态调整	✓	✓	✗
用户管理	✓	✗	✗
数据库连接设置	✓	✗	✗

页面与模块说明

1. 登录页 `/login`

仿淘宝 PC 登录：顶栏、暖色横幅、右侧白色登录卡
密码登录 / 扫码登录切换（扫码为示意）
支持记住账号；用户名或手机号登录
提示条可点击关闭

2. 态势地图页 `/screen/map`（默认首页）

中间三个标签（默认第一个）：

Bar3D - 全球人口分布 数据含义为全球交通流量：柱高 = 车辆检测量，颜色 = 拥堵等级；地球底图含国界纹理。
全国检测态势地图 34 省色阶填色 + 省会涟漪节点；点击省份进入区域大屏。 地图配色随「系统样式设置」中的主色 / 背景等实时变化。
全球交通流量（三维散点） 枢纽散点、路段监测点、陆路走廊动效。

左右侧：检测总量、类别占比、省份 TOP、训练状态、AQI 雷达、告警省份。

3. 训练监控页 `/screen/training`

顶部调节学习率、batch、Epochs、优化器（admin / operator）
多图展示训练过程与聚合分析

4. 数据分析页 `/screen/analytics`

置信度单轴散点、AQI 雷达、盒须图、2w 热力、日历热力、区域关系图

5. 三维可视化页 `/screen/globe`

置信度三维散点、散点矩阵、三维建筑、Flights、GraphGL
说明：全球人口 Bar3D / 航线地球等主视图已迁至第一页中间切换区

6. 区域详情页 `/screen/region/:code`

区域 KPI、分时曲线、天气分布、检测明细表

7. 机器学习预测 `/predict`

手动参数：模型、置信度、IoU、尺寸、最大检测数、设备
上传图像 / 视频 / 数据文件
结果：KPI、柱状图、检测框列表、历史日志

8. 管理后台

页面	路由	角色
用户管理	`/admin/users`	admin
数据管理	`/admin/data`	admin / operator
数据库设置	`/admin/database`	admin
系统样式设置	`/admin/theme`	全部登录用户

系统样式设置详解

路径：/admin/theme（顶栏「样式设置」）

可配置项

类别	项目
颜色	页面背景、面板背景、顶栏背景、内容浅底色、主色、悬停色、正文 / 标题 / 次要文字、边框、表头背景
字体	字体系列、基础字号（12--18）
形态	圆角半径（0--16）

内置预设

预设	说明
淘宝橙（默认）	与登录页一致的暖橙浅色风
科技蓝	蓝色主色、偏商务后台
暗色大屏	深色背景，适合大屏演示
清新绿	绿色主色、浅绿底
典雅紫	紫色主色、较大圆角

持久化与生效方式

配置保存在浏览器 localStorage 键：yolo_system_theme
通过 CSS 变量（如 --accent、--bg-page）作用于顶栏、面板、按钮、表格等
全国地图通过 buildMapThemeColors() 根据当前主题生成底色、描边、热力色阶、节点色与提示框样式
修改后可实时预览；点击「保存样式」写入本地；「恢复默认」回到淘宝橙

可视化图表清单

第一页（中间可切换）

图表	说明
Bar3D - 全球人口分布	地球三维柱图，交通流量 / 拥堵
全国检测态势地图	中国省份 Map + EffectScatter（主题联动）
三维散点 · 全球交通流量	拥堵散点 + 陆路走廊 Lines3D

第二页 · 训练监控

图表	说明
渐变堆叠面积图	Train / Val Loss 与 mAP
带背景色柱状图	GPU / 内存
柱状图标签旋转	Batch 随 Epoch 变化
嵌套环形图	Precision / Recall / mAP
饼图纹理	目标类别分布
数据聚合	天气维度堆叠柱
聚合过程可视化	分时柱 + 累计折线
线性回归	echarts-stat：Epoch--mAP

第三页 · 数据分析

图表	说明
单轴散点图	置信度按时段分布
AQI - 雷达图	多城市空气与交通指标
数据聚合盒须图	天气维度车辆数
热力图 · 2w 数据	小时 × 星期
日历热力图	全年检测强度
笛卡尔 Graph	区域关联

第四页 · 三维可视化

图表	说明
三维散点图	检测置信度空间
三维散点 + 散点矩阵	多维两两散点
三维建筑	区域 × 时段高度
Flights	国内城市航线迁徙
GraphGL	大规模图谱

数据库设计

默认库文件：server/data/yolo_system.db
配置文件：server/data/db-config.json

主要数据表

表名	说明
`users`	账号、手机号、角色、状态、密码哈希
`regions`	省级行政区（名称、编码、经纬度、累计车/人、告警）
`detection_records`	检测明细（地区、摄像头、车/人等计数、置信度、天气、AQI、时间）
`training_metrics`	按 Epoch 的训练指标与资源占用
`training_config`	当前训练超参
`prediction_logs`	预测日志（参数、结果、文件名）
`system_settings`	键值型系统配置

服务启动时由 server/provinces.js 同步 34 省数据；若区域结构变化会重建区域并重灌检测示例数据。

接口概览

基础前缀：/api 鉴权：除登录与健康检查外需 JWT。

认证 `/api/auth`

方法	路径	说明
POST	`/login`	登录
GET	`/profile`	当前用户
GET	`/users`	用户列表（admin）
POST	`/users`	新增用户（admin）
PUT	`/users/:id`	更新用户（admin）
DELETE	`/users/:id`	删除用户（admin）

数据 `/api/data`

方法	路径	说明
GET	`/detections`	检测分页
POST / PUT / DELETE	`/detections[/:id]`	增改删
GET	`/export`	导出 Excel（`table`）
POST	`/import`	导入 Excel
GET / PUT	`/db-config`	数据库路径（admin）
GET	`/db-tables`	表统计（admin）

大屏 `/api/dashboard`

方法	路径	说明
GET	`/overview`	总览
GET	`/map-data`	地图数据
GET	`/region/:code`	区域详情
GET	`/training-metrics`	训练曲线
PUT	`/training-config`	更新训练参数
GET	`/chart/heatmap`	2w 热力
GET	`/chart/calendar`	日历热力
GET	`/chart/aqi`	AQI 雷达
GET	`/chart/aggregation`	天气 / 分时聚合

预测 `/api/predict`

方法	路径	说明
POST	`/predict`	手动推理
POST	`/predict-upload`	上传推理
GET	`/logs`	预测日志

健康检查：GET /api/health

目录结构

复制代码

Vue10/
├── index.html
├── package.json
├── vite.config.js              # 别名 @、/api 代理
├── README.md
├── public/
│   └── favicon.svg
├── server/                     # Express + SQLite
│   ├── index.js
│   ├── db.js
│   ├── auth.js
│   ├── init-db.js
│   ├── provinces.js            # 34 省同步
│   ├── data/                   # 运行后生成 db
│   ├── uploads/
│   └── routes/
│       ├── auth.js
│       ├── data.js
│       ├── dashboard.js
│       └── predict.js
└── src/
    ├── main.js                 # 启动、主题初始化、弹窗关闭增强
    ├── App.vue
    ├── api/                    # Axios 与接口
    ├── stores/
    │   ├── user.js             # 登录态
    │   └── theme.js            # 主题预设、CSS 变量、地图配色
    ├── router/index.js
    ├── layouts/MainLayout.vue
    ├── components/EChart.vue   # ECharts + taobaoLight 主题
    ├── data/globeCharts.js     # Bar3D / 交通地球 option
    ├── utils/
    │   ├── earthTexture.js     # 国界地球纹理
    │   ├── chartTheme.js       # ECharts 浅色主题注册
    │   └── uiDismiss.js        # 消息点击关闭
    ├── styles/global.scss      # CSS 变量与通用面板
    └── views/
        ├── Login.vue
        ├── Predict.vue
        ├── admin/
        │   ├── Users.vue
        │   ├── DataManage.vue
        │   ├── Database.vue
        │   └── ThemeSettings.vue
        └── screen/
            ├── ScreenMap.vue
            ├── ScreenTraining.vue
            ├── ScreenAnalytics.vue
            ├── ScreenGlobe.vue
            └── ScreenRegion.vue

常用脚本

命令	说明
`npm install`	安装依赖
`npm run dev`	同时启动前后端
`npm run client`	仅前端
`npm run server`	仅后端
`npm run init-db`	初始化 / 同步数据库
`npm run build`	前端生产构建
`npm run preview`	预览构建产物

配置说明

前端代理（`vite.config.js`）

复制代码

server: {
  port: 5173,
  proxy: {
    '/api': {
      target: 'http://localhost:3001',
      changeOrigin: true
    }
  }
}

后端端口

复制代码

# Windows PowerShell
$env:PORT=3001; npm run server

复制代码

# Linux / macOS
PORT=3001 npm run server

JWT 密钥

生产环境请设置：

复制代码

$env:JWT_SECRET="your-strong-secret"

SQLite 路径

页面：管理员 →「数据库设置」
或编辑：server/data/db-config.json

主题存储键

localStorage.yolo_system_theme

交互与体验说明

弹窗关闭：点击灰色遮罩、按 Esc、点右上角 × 均可关闭对话框；确认框同样支持点击遮罩关闭。
消息提示 ：接口错误等 ElMessage 可点击整条提示关闭。
登录提示条：登录页黄色提示可整条点击关闭。
地图下钻：全国态势地图中点击省份或省会节点 → 区域详情大屏。
主题联动：修改「样式设置」后，顶栏 / 卡片 / 按钮，以及中国地图配色会立即变化；保存后刷新仍保留。

二次开发指引

目标	建议入口
增删页面路由 / 权限	`src/router/index.js`、`MainLayout.vue` 菜单
改接口	`server/routes/*`、`src/api/index.js`
改大屏图表	`src/views/screen/*`、`src/data/globeCharts.js`
改主题与地图配色	`src/stores/theme.js`（`buildMapThemeColors`）、`ThemeSettings.vue`
接入真实 YOLOv8	替换 `server/routes/predict.js` 中的仿真逻辑

常见问题

1. `better-sqlite3` 安装失败

安装对应平台 C++ 构建工具后重新 npm install。Windows 建议 Visual Studio Build Tools。

2. 前端打开但接口失败

确认后端在 3001 运行，访问：

复制代码

http://localhost:3001/api/health

3. 中国地图 / 地球国界未显示

中国地图：阿里云 DataV GeoJSON
地球国界：World GeoJSON CDN

网络受限时会降级为简化图形或本地备用纹理。

4. 权限不足

观察员无法进入用户管理、数据管理、预测等页，会被重定向到态势地图。请使用对应角色账号。

5. 省份不是 34 个

重启后端触发 syncProvinces，或执行 npm run init-db 后重启。

6. 预测是否真实 YOLOv8？

否。当前为演示仿真推理 。接入真实模型请改造 server/routes/predict.js。

7. 主题改了但地图颜色没变？

确认在「全国态势地图」标签下查看；若仍异常，刷新页面。主题依赖 Pinia + buildMapThemeColors 重算 option。

8. 强制结束后终端显示异常退出码？

在 Windows 上强制结束进程可能出现退出码 4294967295，属于正常现象，不代表代码错误。

版本信息

项	内容
项目名称	`yolov8-detection-dashboard`
版本	`1.0.0`
用途	学习 / 演示 / 课程设计参考
许可	仅供学习与演示使用

如需二次开发，建议优先阅读：

src/router/index.js --- 路由与权限
server/routes/ --- API 层
src/views/screen/ --- 大屏展示
src/stores/theme.js --- 主题与地图配色

https://github.com/zhangsansh/Vue-3-ECharts-Express-SQLite-YOLOv8.githttps://github.com/zhangsansh/Vue-3-ECharts-Express-SQLite-YOLOv8.git

基于 Vue 3 + ECharts + Express + SQLite 的可视化大屏与业务管理系统——YOLOv8 高精度车辆行人检测与计数系统

YOLOv8 高精度车辆行人检测与计数系统

目录

项目简介

核心能力

默认访问地址

功能特性

账号与权限

数据管理

可视化大屏

主题与体验

技术栈

前端

后端

系统架构

数据流简述

环境要求

快速开始

1. 安装依赖

2. 初始化数据库（可选）

3. 启动开发环境

4. 生产构建

停止服务

演示账号与权限

权限矩阵

页面与模块说明

1. 登录页 /login

2. 态势地图页 /screen/map（默认首页）

3. 训练监控页 /screen/training

4. 数据分析页 /screen/analytics

5. 三维可视化页 /screen/globe

6. 区域详情页 /screen/region/:code

7. 机器学习预测 /predict

8. 管理后台

系统样式设置详解

可配置项

内置预设

持久化与生效方式

可视化图表清单

第一页（中间可切换）

第二页 · 训练监控

第三页 · 数据分析

第四页 · 三维可视化

数据库设计

主要数据表

接口概览

认证 /api/auth

数据 /api/data

大屏 /api/dashboard

预测 /api/predict

目录结构

常用脚本

配置说明

前端代理（vite.config.js）

后端端口

JWT 密钥

SQLite 路径

主题存储键

交互与体验说明

二次开发指引

常见问题

1. better-sqlite3 安装失败

2. 前端打开但接口失败

3. 中国地图 / 地球国界未显示

4. 权限不足

5. 省份不是 34 个

6. 预测是否真实 YOLOv8？

7. 主题改了但地图颜色没变？

8. 强制结束后终端显示异常退出码？

版本信息

1. 登录页 `/login`

2. 态势地图页 `/screen/map`（默认首页）

3. 训练监控页 `/screen/training`

4. 数据分析页 `/screen/analytics`

5. 三维可视化页 `/screen/globe`

6. 区域详情页 `/screen/region/:code`

7. 机器学习预测 `/predict`

认证 `/api/auth`

数据 `/api/data`

大屏 `/api/dashboard`

预测 `/api/predict`

前端代理（`vite.config.js`）

1. `better-sqlite3` 安装失败