深度学习蘑菇种类识别数据可视化系统基于Vue 3 ECharts Three.js Express SQLite打造的可视化大屏与业务管理系统面向蘑菇种类智能识别场景集登录鉴权、三维交互、多维图表、全球地图下钻、模型预测与后台管理于一体。目录项目简介功能特性技术栈环境要求快速开始演示账号与权限页面模块说明项目结构数据与接口地图能力说明常用脚本开发与构建常见问题项目简介本系统模拟「深度学习蘑菇种类识别」业务链路中的数据展示与运维管理能力用户登录后进入可视化大屏中央为可交互的 3D 蘑菇场景左右叠加透明 ECharts 图表支持全球 → 国家 → 省级 → 市级地图下钻展示各地识别样本与分类构成提供预测工作台支持参数滑条调试与图片上传预测管理员可进行用户管理、蘑菇数据 CRUD、导入导出、数据库连接配置与系统样式定制。本地默认使用SQLite文件库server/data/mushroom.db首次启动会自动建表并写入演示数据。功能特性登录与安全左右分栏登录页左侧系统介绍与主题图片右侧登录表单Canvas 粒子跳动连线背景特效图形验证码点击可刷新支持账号密码/手机号密码两种登录方式JWT 鉴权接口按角色鉴权三角色权限管理员 / 分析师 / 普通用户数据可视化大屏中央全屏 Three.js 3D 蘑菇模型可旋转、悬停高亮、点击选中选中后在中央展示主题数据卡片不遮挡左右图表上层左右透明图表层 顶部 KPI 底部分页导航多页图表切换覆盖常见大数据可视化类型大数据量面积图、渐变堆叠面积图缓动函数可视化、矩阵微型折线图堆叠柱状图归一化、阶梯瀑布图主题河流图、象形柱图、农历日历热力图相关矩阵热力图 / 散点图三维散点图、三维柱状图、三维散点与散点矩阵结合全球分布地图世界国家分布热力展示点击中国进入省级地图再点击进入市级 / 区县面包屑返回上级支持按样本量、种类数、准确率切换着色指标右侧展示区域摘要、分类饼图与选中区域详情内置全国约32 省 / 469 市区统计数据更贴近真实行政区划模型预测阈值、TopK、温度、特征增强、噪声等参数滑条调试图片拖拽 / 点击上传预测「显示全部内容」展开参数与模型说明页面与面板支持滚动完整查看长内容预测历史记录列表后台管理数据管理蘑菇数据增删改查、JSON/CSV 导入、JSON 导出用户管理添加 / 编辑 / 删除用户角色与状态控制管理员数据库设置SQLite / MySQL / PostgreSQL 连接信息配置与连接测试样式设置背景色/背景图、主色辅色强调色、字体、字号、图表透明度、深浅主题交互与体验管理表格透明背景消除 Element Plus 默认白底全局主题 CSS 变量样式设置即时生效页面滚动条统一美化保证内容完整可见技术栈层级技术前端框架Vue 3、Vite 5、Vue Router 4、PiniaUI 组件Element Plus、element-plus/icons-vue可视化ECharts 6、ECharts-GL、Three.js网络请求Axios后端Express、better-sqlite3、Morgan、Multer安全JWT、bcryptjs、svg-captcha数据格式SQLite、PapaParseCSV环境要求Node.js建议v20.15本项目已在 Node 20 验证npm10操作系统Windows / macOS / Linux浏览器Chrome / Edge / Firefox 近两年版本说明地图省市区边界首次下钻时会通过后端缓存 GeoJSON世界图与中国图已内置在public/geo/。快速开始1. 安装依赖在项目根目录执行# 前端依赖 npm install # 后端依赖 cd server npm install cd ..2. 启动开发环境方式一同时启动前后端推荐npm run dev:all方式二分别启动# 终端 1后端 API npm run dev:server # 终端 2前端 npm run dev3. 访问地址服务地址前端页面http://localhost:5173后端 APIhttp://localhost:3001健康检查http://localhost:3001/api/health前端已配置代理浏览器请求/api、/uploads会转发到后端3001端口。4. 生产构建可选# 构建前端静态资源到 dist/ npm run build # 预览构建结果 npm run preview # 仅启动后端生产模式 npm run start:server演示账号与权限用户名密码手机号角色可访问能力adminadmin12313800000000管理员全部页面与全部写操作analystadmin12313900000001分析师大屏、预测、数据管理可写useruser12313700000002普通用户大屏、预测只读业务数据权限说明普通用户查看大屏与地图、使用预测功能分析师在普通用户基础上可维护蘑菇数据增删改、导入管理员额外拥有用户管理、数据库设置、系统样式设置页面模块说明1. 登录页/login验证码必填错误会自动刷新登录成功后拉取远程样式配置并进入大屏2. 数据大屏/dashboard底部分页识别趋势分析分布与对比相关性分析三维深度洞察全球分布地图操作提示拖拽旋转 3D 场景点击蘑菇查看详情地图页世界 → 中国 → 省 → 市面包屑可返回3. 模型预测/prediction左侧参数滑条 说明可展开全部内容中间上传图片并预测右侧历史记录4. 数据管理/data关键字 / 可食性筛选新增、编辑、删除导入 JSON/CSV导出 JSON5. 用户管理/users管理员用户检索、添加、编辑、启停、删除6. 数据库设置/db-settings管理员保存连接配置测试当前 SQLite 可用性说明运行时默认仍使用内置 SQLite配置用于部署切换与演示7. 样式设置/style-settings管理员修改背景、颜色、字体、透明度等并保存到服务端项目结构Vue18/ ├── public/ │ └── geo/ # 本地世界/中国 GeoJSON ├── scripts/ │ └── dev-all.js # 同时启动前后端 ├── src/ │ ├── api/ # Axios 接口封装 │ ├── components/ │ │ ├── ChartBox.vue # ECharts 容器 │ │ ├── MapDrillDown.vue # 地图下钻 │ │ ├── Mushroom3D.vue # 中央 3D 场景 │ │ └── ParticleBg.vue # 登录粒子背景 │ ├── router/ # 路由与权限守卫 │ ├── stores/ # Pinia用户 / 主题 │ ├── styles/ # 全局样式与表格透明化 │ ├── utils/ # 图表配置、Geo 加载 │ └── views/ # 页面视图 ├── server/ │ ├── data/ │ │ ├── mushroom.db # SQLite 数据库自动生成 │ │ └── geo/ # 地图边界缓存 │ ├── middleware/ # JWT 鉴权中间件 │ ├── routes/ # auth/users/mushrooms/map/predict/settings │ ├── scripts/ # 如 refreshCities.js │ ├── uploads/ # 预测图片上传目录 │ ├── db.js # 建表与初始数据 │ ├── mapSeed.js # 地图国家/省/市种子数据 │ └── index.js # Express 入口 ├── package.json └── README.md数据与接口主要数据表SQLite表名说明users用户账号、手机号、角色、状态mushrooms蘑菇种类、毒性、样本、准确率等predictions用户预测历史stats_daily日度识别统计图表用map_regions国家 / 省 / 市地图统计system_settings系统样式键值配置db_config数据库连接配置主要 API 前缀前缀说明/api/auth验证码、登录、个人信息/api/users用户 CRUD管理员/api/mushrooms蘑菇数据与统计、导入导出/api/map地图统计、GeoJSON 代理缓存/api/predict图片/参数预测与历史/api/settings样式与数据库配置接口默认返回结构{ code: 0, message: 可选提示, data: {} }code ! 0或 HTTP 401/403 时前端会提示错误未登录会跳转登录页。地图能力说明下钻路径世界国家分布 └─ 中国省级 └─ 省份市级/区县 └─ 城市区县边界若有数据来源统计数据SQLitemap_regions项目内种子数据含加权样本量边界数据本地public/geo/world.json、public/geo/china.json后端缓存/api/map/geo/:code省市区首次访问后落盘到server/data/geo/刷新市级数据可选若需重新生成全国市级统计cd server node scripts/refreshCities.js常用脚本命令说明npm run dev启动前端 Vite 开发服务npm run dev:server启动后端nodemonnpm run dev:all同时启动前后端npm run build前端生产构建npm run preview预览构建产物npm run start:server后端生产启动node server/scripts/refreshCities.js刷新地图市级种子数据开发与构建前端代理vite.config.js中已配置/api→http://localhost:3001/uploads→http://localhost:3001主题变量系统样式通过 CSS 变量控制例如--app-bg背景色--app-primary/--app-secondary/--app-accent--app-font/--app-font-size--chart-opacity图表面板透明度可在「样式设置」页修改并持久化到数据库。上传目录预测图片保存在server/uploads/通过/uploads/...访问。常见问题1. 地图空白不显示确认已启动后端且public/geo/world.json、public/geo/china.json存在硬刷新浏览器Ctrl F5打开「全球分布地图」页若失败会显示错误提示与「重新加载」2. 登录提示验证码错误点击验证码图片刷新后再试后端控制台会打印当前验证码文本便于开发调试3. 端口被占用前端默认5173被占用时 Vite 会自动切换到5174等后端默认3001可按需修改server/index.js中的PORT4. 如何停止本地服务在对应终端使用Ctrl C或结束占用3001/5173的 Node 进程。5. 管理表格出现白底全局样式已对 Element Plus Table 做透明化处理若被自定义样式覆盖请检查页面内联样式是否重置了表格背景。许可证本项目用于学习与演示。如需用于生产环境请自行完善真实模型推理、安全加固、数据库备份与部署方案。GitHub - zhangsansh/Vue-3-ECharts-Three.js-Express-SQLite9: 基于Vue 3 ECharts Three.js Express SQLite打造的可视化大屏与业务管理系统面向蘑菇种类智能识别场景集登录鉴权、三维交互、多维图表、全球地图下钻、模型预测与后台管理于一体。 · GitHub基于Vue 3 ECharts Three.js Express SQLite打造的可视化大屏与业务管理系统面向蘑菇种类智能识别场景集登录鉴权、三维交互、多维图表、全球地图下钻、模型预测与后台管理于一体。 - zhangsansh/Vue-3-ECharts-Three.js-Express-SQLite9https://github.com/zhangsansh/Vue-3-ECharts-Three.js-Express-SQLite9.git
基于 Vue 3 + ECharts + Three.js + Express + SQLite 打造的可视化大屏与业务管理系统——深度学习蘑菇种类识别数据可视化系统
深度学习蘑菇种类识别数据可视化系统基于Vue 3 ECharts Three.js Express SQLite打造的可视化大屏与业务管理系统面向蘑菇种类智能识别场景集登录鉴权、三维交互、多维图表、全球地图下钻、模型预测与后台管理于一体。目录项目简介功能特性技术栈环境要求快速开始演示账号与权限页面模块说明项目结构数据与接口地图能力说明常用脚本开发与构建常见问题项目简介本系统模拟「深度学习蘑菇种类识别」业务链路中的数据展示与运维管理能力用户登录后进入可视化大屏中央为可交互的 3D 蘑菇场景左右叠加透明 ECharts 图表支持全球 → 国家 → 省级 → 市级地图下钻展示各地识别样本与分类构成提供预测工作台支持参数滑条调试与图片上传预测管理员可进行用户管理、蘑菇数据 CRUD、导入导出、数据库连接配置与系统样式定制。本地默认使用SQLite文件库server/data/mushroom.db首次启动会自动建表并写入演示数据。功能特性登录与安全左右分栏登录页左侧系统介绍与主题图片右侧登录表单Canvas 粒子跳动连线背景特效图形验证码点击可刷新支持账号密码/手机号密码两种登录方式JWT 鉴权接口按角色鉴权三角色权限管理员 / 分析师 / 普通用户数据可视化大屏中央全屏 Three.js 3D 蘑菇模型可旋转、悬停高亮、点击选中选中后在中央展示主题数据卡片不遮挡左右图表上层左右透明图表层 顶部 KPI 底部分页导航多页图表切换覆盖常见大数据可视化类型大数据量面积图、渐变堆叠面积图缓动函数可视化、矩阵微型折线图堆叠柱状图归一化、阶梯瀑布图主题河流图、象形柱图、农历日历热力图相关矩阵热力图 / 散点图三维散点图、三维柱状图、三维散点与散点矩阵结合全球分布地图世界国家分布热力展示点击中国进入省级地图再点击进入市级 / 区县面包屑返回上级支持按样本量、种类数、准确率切换着色指标右侧展示区域摘要、分类饼图与选中区域详情内置全国约32 省 / 469 市区统计数据更贴近真实行政区划模型预测阈值、TopK、温度、特征增强、噪声等参数滑条调试图片拖拽 / 点击上传预测「显示全部内容」展开参数与模型说明页面与面板支持滚动完整查看长内容预测历史记录列表后台管理数据管理蘑菇数据增删改查、JSON/CSV 导入、JSON 导出用户管理添加 / 编辑 / 删除用户角色与状态控制管理员数据库设置SQLite / MySQL / PostgreSQL 连接信息配置与连接测试样式设置背景色/背景图、主色辅色强调色、字体、字号、图表透明度、深浅主题交互与体验管理表格透明背景消除 Element Plus 默认白底全局主题 CSS 变量样式设置即时生效页面滚动条统一美化保证内容完整可见技术栈层级技术前端框架Vue 3、Vite 5、Vue Router 4、PiniaUI 组件Element Plus、element-plus/icons-vue可视化ECharts 6、ECharts-GL、Three.js网络请求Axios后端Express、better-sqlite3、Morgan、Multer安全JWT、bcryptjs、svg-captcha数据格式SQLite、PapaParseCSV环境要求Node.js建议v20.15本项目已在 Node 20 验证npm10操作系统Windows / macOS / Linux浏览器Chrome / Edge / Firefox 近两年版本说明地图省市区边界首次下钻时会通过后端缓存 GeoJSON世界图与中国图已内置在public/geo/。快速开始1. 安装依赖在项目根目录执行# 前端依赖 npm install # 后端依赖 cd server npm install cd ..2. 启动开发环境方式一同时启动前后端推荐npm run dev:all方式二分别启动# 终端 1后端 API npm run dev:server # 终端 2前端 npm run dev3. 访问地址服务地址前端页面http://localhost:5173后端 APIhttp://localhost:3001健康检查http://localhost:3001/api/health前端已配置代理浏览器请求/api、/uploads会转发到后端3001端口。4. 生产构建可选# 构建前端静态资源到 dist/ npm run build # 预览构建结果 npm run preview # 仅启动后端生产模式 npm run start:server演示账号与权限用户名密码手机号角色可访问能力adminadmin12313800000000管理员全部页面与全部写操作analystadmin12313900000001分析师大屏、预测、数据管理可写useruser12313700000002普通用户大屏、预测只读业务数据权限说明普通用户查看大屏与地图、使用预测功能分析师在普通用户基础上可维护蘑菇数据增删改、导入管理员额外拥有用户管理、数据库设置、系统样式设置页面模块说明1. 登录页/login验证码必填错误会自动刷新登录成功后拉取远程样式配置并进入大屏2. 数据大屏/dashboard底部分页识别趋势分析分布与对比相关性分析三维深度洞察全球分布地图操作提示拖拽旋转 3D 场景点击蘑菇查看详情地图页世界 → 中国 → 省 → 市面包屑可返回3. 模型预测/prediction左侧参数滑条 说明可展开全部内容中间上传图片并预测右侧历史记录4. 数据管理/data关键字 / 可食性筛选新增、编辑、删除导入 JSON/CSV导出 JSON5. 用户管理/users管理员用户检索、添加、编辑、启停、删除6. 数据库设置/db-settings管理员保存连接配置测试当前 SQLite 可用性说明运行时默认仍使用内置 SQLite配置用于部署切换与演示7. 样式设置/style-settings管理员修改背景、颜色、字体、透明度等并保存到服务端项目结构Vue18/ ├── public/ │ └── geo/ # 本地世界/中国 GeoJSON ├── scripts/ │ └── dev-all.js # 同时启动前后端 ├── src/ │ ├── api/ # Axios 接口封装 │ ├── components/ │ │ ├── ChartBox.vue # ECharts 容器 │ │ ├── MapDrillDown.vue # 地图下钻 │ │ ├── Mushroom3D.vue # 中央 3D 场景 │ │ └── ParticleBg.vue # 登录粒子背景 │ ├── router/ # 路由与权限守卫 │ ├── stores/ # Pinia用户 / 主题 │ ├── styles/ # 全局样式与表格透明化 │ ├── utils/ # 图表配置、Geo 加载 │ └── views/ # 页面视图 ├── server/ │ ├── data/ │ │ ├── mushroom.db # SQLite 数据库自动生成 │ │ └── geo/ # 地图边界缓存 │ ├── middleware/ # JWT 鉴权中间件 │ ├── routes/ # auth/users/mushrooms/map/predict/settings │ ├── scripts/ # 如 refreshCities.js │ ├── uploads/ # 预测图片上传目录 │ ├── db.js # 建表与初始数据 │ ├── mapSeed.js # 地图国家/省/市种子数据 │ └── index.js # Express 入口 ├── package.json └── README.md数据与接口主要数据表SQLite表名说明users用户账号、手机号、角色、状态mushrooms蘑菇种类、毒性、样本、准确率等predictions用户预测历史stats_daily日度识别统计图表用map_regions国家 / 省 / 市地图统计system_settings系统样式键值配置db_config数据库连接配置主要 API 前缀前缀说明/api/auth验证码、登录、个人信息/api/users用户 CRUD管理员/api/mushrooms蘑菇数据与统计、导入导出/api/map地图统计、GeoJSON 代理缓存/api/predict图片/参数预测与历史/api/settings样式与数据库配置接口默认返回结构{ code: 0, message: 可选提示, data: {} }code ! 0或 HTTP 401/403 时前端会提示错误未登录会跳转登录页。地图能力说明下钻路径世界国家分布 └─ 中国省级 └─ 省份市级/区县 └─ 城市区县边界若有数据来源统计数据SQLitemap_regions项目内种子数据含加权样本量边界数据本地public/geo/world.json、public/geo/china.json后端缓存/api/map/geo/:code省市区首次访问后落盘到server/data/geo/刷新市级数据可选若需重新生成全国市级统计cd server node scripts/refreshCities.js常用脚本命令说明npm run dev启动前端 Vite 开发服务npm run dev:server启动后端nodemonnpm run dev:all同时启动前后端npm run build前端生产构建npm run preview预览构建产物npm run start:server后端生产启动node server/scripts/refreshCities.js刷新地图市级种子数据开发与构建前端代理vite.config.js中已配置/api→http://localhost:3001/uploads→http://localhost:3001主题变量系统样式通过 CSS 变量控制例如--app-bg背景色--app-primary/--app-secondary/--app-accent--app-font/--app-font-size--chart-opacity图表面板透明度可在「样式设置」页修改并持久化到数据库。上传目录预测图片保存在server/uploads/通过/uploads/...访问。常见问题1. 地图空白不显示确认已启动后端且public/geo/world.json、public/geo/china.json存在硬刷新浏览器Ctrl F5打开「全球分布地图」页若失败会显示错误提示与「重新加载」2. 登录提示验证码错误点击验证码图片刷新后再试后端控制台会打印当前验证码文本便于开发调试3. 端口被占用前端默认5173被占用时 Vite 会自动切换到5174等后端默认3001可按需修改server/index.js中的PORT4. 如何停止本地服务在对应终端使用Ctrl C或结束占用3001/5173的 Node 进程。5. 管理表格出现白底全局样式已对 Element Plus Table 做透明化处理若被自定义样式覆盖请检查页面内联样式是否重置了表格背景。许可证本项目用于学习与演示。如需用于生产环境请自行完善真实模型推理、安全加固、数据库备份与部署方案。GitHub - zhangsansh/Vue-3-ECharts-Three.js-Express-SQLite9: 基于Vue 3 ECharts Three.js Express SQLite打造的可视化大屏与业务管理系统面向蘑菇种类智能识别场景集登录鉴权、三维交互、多维图表、全球地图下钻、模型预测与后台管理于一体。 · GitHub基于Vue 3 ECharts Three.js Express SQLite打造的可视化大屏与业务管理系统面向蘑菇种类智能识别场景集登录鉴权、三维交互、多维图表、全球地图下钻、模型预测与后台管理于一体。 - zhangsansh/Vue-3-ECharts-Three.js-Express-SQLite9https://github.com/zhangsansh/Vue-3-ECharts-Three.js-Express-SQLite9.git
