面向「宠物识别 + 图像生成」业务场景的Vue3 数据可视化大屏系统——基于深度学习的宠物识别图像生成 · 数据可视化大屏

基于深度学习的宠物识别图像生成 · 数据可视化大屏

面向「宠物识别 + 图像生成」业务场景的Vue3 数据可视化大屏系统。系统包含用户登录与权限管控、多页 ECharts 可视化、中央可交互 3D 宠物模型、世界/国家/省/市地图下钻、模型预测调试、数据与用户管理、数据库连接配置以及全局样式设置等完整能力。

目录

• 项目简介

• 技术栈

• 功能说明

• 项目结构

• 环境要求

• 安装与启动

• 默认账号与权限

• 页面与路由说明

• 后端接口概览

• 模型预测说明

• 地图下钻说明

• 数据存储说明

• 常见问题

• 构建与部署

项目简介

本系统以「基于深度学习的宠物识别图像生成方法」为主题，将识别准确率、生成质量、样本分布、品种统计等业务指标进行可视化展示，并提供可交互的 3D 模型与地图下钻能力，便于演示、监控与管理。

核心能力包括：

1. 登录认证：粒子特效登录页、服务端 SVG 验证码、账号/手机号登录、JWT 鉴权

2. 可视化大屏：中央全屏 3D 宠物模型 + 左右透明图表叠层，多页 ECharts 图表组合

3. 三维洞察：三维散点 / 三维柱状 / 散点矩阵，坐标轴使用业务语义标签

4. 地图分布：世界 → 国家 → 省 → 市逐级下钻

5. 模型预测：图片上传压缩、特征预提取、参数滑条调试、候选结果展示

6. 后台管理：宠物数据 CRUD、Excel 导入导出、用户管理、数据库连接、主题样式设置

技术栈

前端

后端

功能说明

1. 登录与安全

• 左侧系统介绍与示意图，右侧登录表单

• Canvas 粒子跳动背景特效

• 验证码由服务端生成 SVG 图片返回（不返回明文），点击图片或「刷新」可更换

• 支持账号登录/手机号登录

• 验证码一次性消费，错误或过期需重新获取

2. 可视化大屏（识别总览 / 生成分析 / 三维洞察）

• 布局：顶部目录 + 底部管理入口；中央 3D 模型全屏；左右图表半透明叠层

• 3D 模型：低多边形猫 / 狗形象，可拖拽旋转、点击查看样本数据，外围节点按物种展示

• 图表类型（组合使用）：

  • 大数据量面积图、渐变堆叠面积图、缓动函数可视化

  • 矩阵微型折线图、归一化堆叠柱状图、阶梯瀑布图

  • 主题河流图、象形柱图、日历热力图

  • 相关矩阵（热力 / 散点）

  • 三维散点图、三维柱状图、散点矩阵

3. 地图分布

• 世界地图按业务分类着色（猫识别热区、狗识别热区、生成高活跃等）

• 点击国家进入国家地图（中国为真实省级 GeoJSON）

• 再点击省级进入市级地区

• 支持面包屑 / 返回上一级 / 世界总览

4. 模型预测

• 阈值、温度、Top-K、模型版本、图像增强等参数可调

• 上传 JPG / PNG / WEBP / GIF（≤ 8MB），支持自动压缩与特征预提取

• 多信号融合打分（主色、亮度、冷暖、构图、文件名关键词、库内先验等）

• 展示 Top 结果、准确率、候选列表与历史记录

5. 数据与系统管理

管理页表格已做深色透明样式处理，并支持页面滚动条完整浏览内容。

项目结构

Vue19/ ├── index.html # 入口 HTML ├── package.json # 前端依赖与脚本 ├── vite.config.js # Vite 配置（代理 /api → 3001） ├── README.md ├── src/ │ ├── main.js # 应用入口 │ ├── App.vue │ ├── api/index.js # Axios 封装 │ ├── router/index.js # 路由与登录守卫 │ ├── stores/ # Pinia：user / theme │ ├── styles/global.scss # 全局主题与表格去白底 │ ├── utils/ │ │ ├── charts.js # ECharts 配置工厂 │ │ └── imagePredict.js # 图片校验、压缩、特征提取 │ ├── components/ │ │ ├── Particles.vue # 登录粒子特效 │ │ ├── Captcha.vue # 验证码组件 │ │ ├── ChartBox.vue # 图表容器 │ │ └── Pet3DModel.vue # Three.js 宠物 3D 模型 │ └── views/ │ ├── Login.vue │ ├── Layout.vue # 大屏外壳（上下导航） │ ├── Predict.vue │ ├── DataManage.vue │ ├── UserManage.vue │ ├── DbSettings.vue │ ├── StyleSettings.vue │ └── dashboard/ │ ├── Screen1.vue # 识别总览 │ ├── Screen2.vue # 生成分析 │ ├── Screen3.vue # 三维洞察 │ └── ScreenMap.vue # 地图分布 └── server/ ├── package.json ├── index.js # Express 主服务 ├── db.js # SQLite 初始化与种子数据 ├── mapData.js # 地图分层统计数据 ├── predictEngine.js # 预测引擎 ├── data/pet.db # SQLite 数据库文件（运行后生成） └── uploads/ # 上传图片目录

环境要求

• Node.js：建议18.x/20.x（本项目在 Node 20 下验证）

• npm：随 Node 安装即可

• 需能访问外网以加载地图 GeoJSON（世界地图 CDN、中国行政区划 DataV）

Windows 下若better-sqlite3安装失败，请确认已安装对应 Node 版本的构建工具，或使用已提供的兼容版本依赖。

安装与启动

1. 安装依赖

在项目根目录执行：

# 前端依赖 npm install ​ # 后端依赖 cd server npm install cd ..

2. 启动服务（需要两个终端）

终端 1 — 后端 API（端口 3001）

npm run server

看到类似输出表示成功：

Pet Dashboard API running at http://127.0.0.1:3001

终端 2 — 前端开发服务（端口 5173）

npm run dev

浏览器访问：http://localhost:5173/

3. 停止服务

在对应终端使用Ctrl + C，或结束占用3001/5173端口的进程。

默认账号与权限

系统首次启动会自动写入种子用户与示例宠物数据。

登录页支持：

• 账号 + 密码 + 验证码

• 手机号 + 密码 + 验证码（如13800000000）

页面与路由说明

未登录访问受保护路由会跳转到/login；无权限路由会回退到识别总览。

后端接口概览

基础地址：http://127.0.0.1:3001/api前端开发时通过 Vite 代理：/api→3001。

除验证码、登录外，其余接口一般需要请求头：

Authorization: Bearer <token>

模型预测说明

预测流程：

1. 前端校验格式与大小，可选压缩至最长边 1280

2. Canvas 提取主色、亮度、饱和度、构图比例等客户端特征

3. 服务端结合图像字节特征、文件名关键词、SQLite 品种先验、模型版本与增强开关进行多信号打分

4. Softmax + 置信度校准后返回 Top-K 候选

提升准确率的建议：

• 使用清晰、主体突出的宠物照片

• 文件名可包含品种关键词（如金毛.jpg、布偶猫.png）

• 优先选择模型版本PetGen-Net-v2，并开启「图像增强预处理」

• 温度系数偏低（如0.8~1.0）时结果更收敛

说明：当前预测引擎为演示用多特征融合方案，便于系统联调与可视化展示；生产环境可替换为真实深度学习推理服务。

地图下钻说明

层级路径：

世界地图 → 国家地图 → 省级地区 → 市级地区

• 中国：省级 / 市级使用阿里云 DataV 行政区划 GeoJSON（经后端代理，避免跨域）

• 其他国家：国家边界取自世界地图要素；省 / 市级采用业务分区可视化，可继续点击下钻

• 右侧提供分类图例、区域列表与当前选中详情；顶部面包屑可快速返回

首次进入地图页需要加载世界 GeoJSON，请保持网络畅通。

数据存储说明

• 数据库文件：server/data/pet.db（首次启动自动创建并写入种子数据）

• 主要数据表：

  • users：用户与角色

  • pet_records：宠物样本

  • chart_metrics：图表时序指标

  • system_settings：主题样式

  • db_config：数据库连接配置

  • predictions：预测历史

• 上传文件目录：server/uploads/

常见问题

1. 前端能打开，但登录或接口失败？请确认后端已启动在3001，且vite.config.js中/api代理配置正确。

2. 验证码一直提示错误？验证码为一次性；每次失败后需点击刷新。注意区分大小写不敏感，但仍需输入图片中的字符。

3. 地图空白或加载失败？检查网络是否可访问jsdelivr与geo.datav.aliyun.com；后端需正常代理/api/map/geo。

4. 表格出现白色背景？全局样式已覆盖 Element Plus 表格背景；若仍异常，请强制刷新浏览器缓存。

5. 如何彻底停止服务？在运行终端按Ctrl + C，或结束占用3001、5173的 Node 进程。

构建与部署

前端生产构建

npm run build

产物输出到dist/，可用任意静态服务器托管。注意将/api反向代理到后端服务。

后端生产启动

cd server node index.js

建议使用进程守护（如 PM2）：

pm2 start server/index.js --name pet-dashboard-api

环境建议

• 修改server/index.js中的 JWTSECRET

• 生产环境使用 HTTPS，并限制上传目录访问策略

• 按需备份server/data/pet.db

快速体验路径

1. 启动前后端，打开 http://localhost:5173

2. 使用admin / admin123+ 验证码登录

3. 依次查看：识别总览 → 生成分析 → 三维洞察 → 地图分布

4. 进入模型预测，上传一张宠物图片进行识别

5. 在数据管理中增删样本，在样式设置中调整主题色

License

本项目用于教学演示与可视化大屏实践，可按需自行扩展与二次开发。

GitHub - zhangsansh/Vue3-ECharts-Three.js-Express-SQLite: 面向「宠物识别 + 图像生成」业务场景的 Vue3 数据可视化大屏系统。系统包含用户登录与权限管控、多页 ECharts 可视化、中央可交互 3D 宠物模型、世界/国家/省/市地图下钻、模型预测调试、数据与用户管理、数据库连接配置以及全局样式设置等完整能力。 · GitHub面向「宠物识别 + 图像生成」业务场景的 Vue3 数据可视化大屏系统。系统包含用户登录与权限管控、多页 ECharts 可视化、中央可交互 3D 宠物模型、世界/国家/省/市地图下钻、模型预测调试、数据与用户管理、数据库连接配置以及全局样式设置等完整能力。 - zhangsansh/Vue3-ECharts-Three.js-Express-SQLitehttps://github.com/zhangsansh/Vue3-ECharts-Three.js-Express-SQLite.git