基于 Vue 3 + ECharts + Three.js + Express + SQLite 打造的生活垃圾分类监测与可视化平台——深度学习生活垃圾分类数据可视化大屏

深度学习生活垃圾分类数据可视化大屏基于Vue 3 ECharts Three.js Express SQLite打造的生活垃圾分类监测与可视化平台。系统围绕「可回收物 / 厨余垃圾 / 有害垃圾 / 其他垃圾」四大类提供登录鉴权、三维交互大屏、多页图表分析、数据与用户管理、样式配置以及基于图片上传的智能分类预测能力。目录项目简介功能特性技术栈环境要求快速开始演示账号与权限页面与路由说明图表清单智能预测说明数据库说明API 接口概览目录结构常用脚本配置与主题常见问题项目简介本项目面向垃圾分类业务场景将深度学习识别结果、收运统计与可视化大屏结合形成「登录 → 大屏总览 → 多维分析 → 管理运维 → 智能预测」的完整闭环。核心亮点主题化抖音风格登录页左右分栏布局左侧手机信息流 分类介绍右侧登录卡片背景采用系统主题色青绿 / 深蓝支持账号与手机号登录并带图形验证码。中央全屏 3D 模型Three.js 四色垃圾桶场景支持拖拽旋转、滚轮缩放、点击查看分类重量 / 条目 / 置信度。透明叠加图表层图表以玻璃拟态面板浮于 3D 场景之上上下导航切换多页大屏。权限分级管理员、编辑者、访客看到不同菜单与操作能力。SQLite 本地数据用户、垃圾记录、分类月度统计、预测日志、系统设置均落库支持导入导出与路径切换。智能预测工作台上传垃圾照片结合文件名关键词与主色分析给出分类类型、细分类别与准确率并支持参数滑条调试。功能特性登录与安全账号登录 / 手机号登录切换Canvas 图形验证码点击可刷新JWT Token 鉴权密码 bcrypt 加密存储路由守卫按角色拦截无权限页面数据可视化大屏页面说明总览大屏中央 3D 左右透明图表堆叠面积、背景柱状、嵌套环、标签旋转柱、纹理饼、雷达等趋势分析数据聚合、聚合过程、线性回归、单轴散点、盒须图、热力图结构分析日历热力、矩形树图、旭日图、树图⇄旭日过渡、多棵树、径向树关系网络Graph、关系图、依赖关系图、桑基图节点样式 / 渐变边、漏斗图时空分布仪表盘、阶段速度表、主题河流、象形柱图、农历日历、平行坐标高级图表相关矩阵热力 / 散点、组合面积 / 柱 / 环 / 雷达漏斗业务管理用户管理管理员增删改查、角色分配数据管理管理员 / 编辑者垃圾记录 CRUD、关键词筛选、Excel / JSON 导入导出数据库设置管理员查看 SQLite 路径与表记录数可切换数据库文件路径样式设置管理员主色、辅色、背景、字体、图表透明度、面板模糊度实时预览并持久化智能预测必须上传图片后才能识别输出四大分类 细分类别 准确率 / 置信度 投放提示可调温度系数、置信度阈值、Top-K 等参数「显示全部内容」开关控制细节参数与历史记录展示预测结果写入predict_logs表技术栈层级技术前端框架Vue 3Composition API、Vue Router 4、PiniaUI 组件Element Plus、element-plus/icons-vue可视化ECharts 6、Three.jsOrbitControls构建工具Vite 5、Sass后端Express 5、Multer上传、CORS数据库better-sqlite3SQLite鉴权jsonwebtoken、bcryptjs其他axios、dayjs、xlsx、file-saver环境要求Node.js建议v20.15本项目已在 Node 20 下调优依赖版本npm10.x及以上操作系统Windows / macOS / Linux浏览器Chrome、Edge 等现代浏览器需支持 WebGL 以显示 3D快速开始1. 安装依赖cd Vue17 npm install若better-sqlite3原生模块异常可执行npm rebuild better-sqlite32. 启动开发环境前后端同时启动npm run dev启动成功后服务地址前端Vitehttp://localhost:5173后端APIhttp://localhost:3001前端已通过代理将/api、/uploads转发到后端开发时直接访问5173即可。3. 仅启动某一端npm run client # 仅前端 npm run server # 仅后端nodemon 热更新4. 生产构建npm run build # 输出到 dist/ npm run preview # 预览前端构建结果 npm start # 仅启动后端 API演示账号与权限首次启动会自动初始化 SQLite并写入以下演示账号用户名密码角色手机号能力说明adminadmin123管理员13800000000全部功能用户 / 数据 / 数据库 / 样式 / 预测 / 大屏editoreditor123编辑者13900000000大屏、数据管理含导入导出、预测viewerviewer123访客13700000000大屏浏览、智能预测只读类操作权限矩阵功能admineditorviewer可视化大屏✓✓✓智能预测✓✓✓数据管理 CRUD / 导入导出✓✓✗用户管理✓✗✗数据库设置✓✗✗样式设置✓✗✗页面与路由说明路由页面权限/login登录页公开/screen/overview总览大屏登录用户/screen/charts1趋势分析登录用户/screen/charts2结构分析登录用户/screen/charts3关系网络登录用户/screen/charts4时空分布登录用户/screen/charts5高级图表登录用户/predict智能预测登录用户/manage/data数据管理admin / editor/manage/users用户管理admin/manage/database数据库设置admin/settings/style样式设置admin布局说明登录后使用ScreenLayout顶部为页面导航与时钟 / 用户信息底部为管理与预测入口中间为主内容区。图表清单系统覆盖多类 ECharts 示例风格图表按页面分布如下总览渐变堆叠面积图、带背景色柱状图、柱状图标签旋转、嵌套环形图、饼图纹理、AQI 雷达图趋势数据聚合、聚合过程可视化、线性回归、单轴散点图、盒须图、热力图结构日历热力图、基础矩形树图、圆角旭日图、矩形树图与旭日图动画过渡、多棵树、径向树状图关系笛卡尔 Graph、关系图自动隐藏重叠标签、NPM 风格依赖关系图、桑基图节点自定义、桑基图渐变色边、漏斗图时空带标签数字动画仪表盘、阶段速度仪表盘、主题河流图、象形柱图、农历日历图、AQI 平行坐标高级相关矩阵热力图 / 散点图及多种组合图智能预测说明预测逻辑位于server/predict.js流程如下前端上传图片并提取缩略主色avgR / avgG / avgB后端优先按文件名关键词匹配分类如 bottle→可回收物battery→有害垃圾若无关键词则按主色启发式判断绿棕偏厨余、蓝青偏可回收、红橙偏有害、灰暗偏其他结合温度系数生成四类置信度分布返回predicted垃圾大类subcategory细分类别accuracy/confidence准确率置信度tip投放建议results四类完整得分调试建议温度越低Top1 越尖锐准确率观感更高置信度阈值过滤低分结果Top-K控制展示前几名类别说明当前为演示级规则 特征启发识别便于本地联调展示可替换为真实深度学习推理服务。数据库说明默认路径server/data/waste.db上传目录server/uploads/首次启动自动建表并灌入约 800 条垃圾记录样例以及 12 个月分类统计主要数据表表名说明users用户账号、密码哈希、手机号、角色waste_records垃圾收运 / 识别明细分类、重量、区域、置信度、来源、日期等category_stats分类 × 月份汇总predict_logs预测历史system_settings主题样式、数据库路径等键值配置可在「数据库设置」页面查看各表记录数并修改 SQLite 文件路径后重新连接。API 接口概览基础前缀http://localhost:3001/api除验证码与登录外其余接口需 HeaderAuthorization: Bearer token方法路径说明GET/captcha获取验证码POST/login登录账号或手机号GET/me当前用户信息GET/POST/PUT/DELETE/users用户管理GET/POST/PUT/DELETE/waste垃圾数据 CRUDGET/waste/export导出全部数据POST/waste/import批量导入GET/stats/overview大屏统计汇总GET/stats/category-month月度分类统计GET/PUT/settings读取 / 保存系统设置GET/db/info数据库与表信息POST/predict上传图片并预测multipartGET/predict/logs预测历史静态资源/uploads/*用于访问已上传图片。目录结构Vue17/ ├── index.html # 入口 HTML ├── package.json # 依赖与脚本 ├── vite.config.js # Vite 配置别名 、代理 ├── README.md ├── server/ │ ├── index.js # Express 路由与中间件 │ ├── db.js # SQLite 初始化、种子数据 │ ├── predict.js # 垃圾分类预测逻辑 │ ├── data/ # SQLite 数据库文件 │ └── uploads/ # 上传图片 └── src/ ├── main.js # 应用入口 ├── App.vue ├── api/index.js # Axios 封装与接口 ├── router/index.js # 路由与权限守卫 ├── stores/ # Piniauser / theme ├── styles/global.scss # 全局样式与深色表格主题 ├── utils/chartTheme.js # ECharts 主题辅助 ├── layouts/ScreenLayout.vue ├── components/ │ ├── ChartPanel.vue # 通用图表容器 │ └── Waste3DModel.vue # 3D 垃圾桶模型 └── views/ ├── Login.vue ├── Predict.vue ├── screen/ # 各分页大屏 ├── manage/ # 用户 / 数据 / 数据库 └── settings/ # 样式设置常用脚本命令说明npm run dev同时启动前端 后端开发推荐npm run client仅启动 Vite 前端npm run server仅启动 Expressnodemonnpm run build前端生产构建npm run preview预览构建产物npm start生产方式启动后端配置与主题默认主题变量可在「样式设置」中修改并保存到数据库主色#00d4aa辅色#1a8cff背景#0a1628字体Noto Sans SC 等图表透明度、面板模糊度可调前端通过 CSS 变量--primary、--bg等全局生效登录页背景与强调色同步读取主题 Store保证与大屏视觉一致代理配置见vite.config.js/api→http://localhost:3001/uploads→http://localhost:3001常见问题1. 端口被占用若 5173 或 3001 已被占用请结束对应进程后重试或修改vite.config.js/server/index.js中的端口。2. better-sqlite3 安装失败npm rebuild better-sqlite3仍失败时可检查是否安装了与 Node 版本匹配的构建工具Windows 需 Visual Studio Build Tools。3. 3D 场景空白请确认浏览器开启硬件加速并允许 WebGL刷新页面或切换到「总览大屏」重试。4. 表格出现白底全局已在src/styles/global.scss对.dark-table做深色覆盖若仍异常强制刷新浏览器缓存。5. 预测必须上传图片接口强制要求上传图片文件文件名包含分类关键词如battery.jpg、banana.png时识别更稳定。6. 如何停止开发服务在运行npm run dev的终端按Ctrl C或结束对应 Node 进程。许可证本项目仅供学习、演示与课程设计使用。GitHub - zhangsansh/Vue-3-ECharts-Three.js-Express-SQLite: 基于Vue 3 ECharts Three.js Express SQLite打造的生活垃圾分类监测与可视化平台。系统围绕「可回收物 / 厨余垃圾 / 有害垃圾 / 其他垃圾」四大类提供登录鉴权、三维交互大屏、多页图表分析、数据与用户管理、样式配置以及基于图片上传的智能分类预测能力。 · GitHub基于Vue 3 ECharts Three.js Express SQLite打造的生活垃圾分类监测与可视化平台。系统围绕「可回收物 / 厨余垃圾 / 有害垃圾 / 其他垃圾」四大类提供登录鉴权、三维交互大屏、多页图表分析、数据与用户管理、样式配置以及基于图片上传的智能分类预测能力。 - zhangsansh/Vue-3-ECharts-Three.js-Express-SQLitehttps://github.com/zhangsansh/Vue-3-ECharts-Three.js-Express-SQLite.git