基于深度学习的宠物识别图像生成 · 数据可视化大屏面向「宠物识别 图像生成」业务场景的Vue3 数据可视化大屏系统。系统包含用户登录与权限管控、多页 ECharts 可视化、中央可交互 3D 宠物模型、世界/国家/省/市地图下钻、模型预测调试、数据与用户管理、数据库连接配置以及全局样式设置等完整能力。目录项目简介技术栈功能说明项目结构环境要求安装与启动默认账号与权限页面与路由说明后端接口概览模型预测说明地图下钻说明数据存储说明常见问题构建与部署项目简介本系统以「基于深度学习的宠物识别图像生成方法」为主题将识别准确率、生成质量、样本分布、品种统计等业务指标进行可视化展示并提供可交互的 3D 模型与地图下钻能力便于演示、监控与管理。核心能力包括登录认证粒子特效登录页、服务端 SVG 验证码、账号/手机号登录、JWT 鉴权可视化大屏中央全屏 3D 宠物模型 左右透明图表叠层多页 ECharts 图表组合三维洞察三维散点 / 三维柱状 / 散点矩阵坐标轴使用业务语义标签地图分布世界 → 国家 → 省 → 市逐级下钻模型预测图片上传压缩、特征预提取、参数滑条调试、候选结果展示后台管理宠物数据 CRUD、Excel 导入导出、用户管理、数据库连接、主题样式设置技术栈前端技术用途Vue 3页面与组件Vite开发与构建Vue Router路由与权限守卫Pinia用户 / 主题状态Element PlusUI 组件ECharts / ECharts-GL二维与三维图表、地图Three.js中央可交互 3D 宠物模型AxiosHTTP 请求Sass样式后端技术用途ExpressREST APIbetter-sqlite3本地 SQLite 数据库JWT bcryptjs登录鉴权与密码加密Multer图片 / 文件上传xlsxExcel 导入导出功能说明1. 登录与安全左侧系统介绍与示意图右侧登录表单Canvas 粒子跳动背景特效验证码由服务端生成 SVG 图片返回不返回明文点击图片或「刷新」可更换支持账号登录/手机号登录验证码一次性消费错误或过期需重新获取2. 可视化大屏识别总览 / 生成分析 / 三维洞察布局顶部目录 底部管理入口中央 3D 模型全屏左右图表半透明叠层3D 模型低多边形猫 / 狗形象可拖拽旋转、点击查看样本数据外围节点按物种展示图表类型组合使用大数据量面积图、渐变堆叠面积图、缓动函数可视化矩阵微型折线图、归一化堆叠柱状图、阶梯瀑布图主题河流图、象形柱图、日历热力图相关矩阵热力 / 散点三维散点图、三维柱状图、散点矩阵3. 地图分布世界地图按业务分类着色猫识别热区、狗识别热区、生成高活跃等点击国家进入国家地图中国为真实省级 GeoJSON再点击省级进入市级地区支持面包屑 / 返回上一级 / 世界总览4. 模型预测阈值、温度、Top-K、模型版本、图像增强等参数可调上传 JPG / PNG / WEBP / GIF≤ 8MB支持自动压缩与特征预提取多信号融合打分主色、亮度、冷暖、构图、文件名关键词、库内先验等展示 Top 结果、准确率、候选列表与历史记录5. 数据与系统管理模块能力权限数据管理宠物样本增删改查、Excel 导入导出admin / analyst用户管理添加 / 编辑 / 删除用户角色分配admin数据库设置连接配置、测试、启用admin样式设置背景色、主色、字体、字号、面板透明度、标题admin管理页表格已做深色透明样式处理并支持页面滚动条完整浏览内容。项目结构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/ # Piniauser / 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、中国行政区划 DataVWindows 下若better-sqlite3安装失败请确认已安装对应 Node 版本的构建工具或使用已提供的兼容版本依赖。安装与启动1. 安装依赖在项目根目录执行# 前端依赖 npm install # 后端依赖 cd server npm install cd ..2. 启动服务需要两个终端终端 1 — 后端 API端口 3001npm run server看到类似输出表示成功Pet Dashboard API running at http://127.0.0.1:3001终端 2 — 前端开发服务端口 5173npm run dev浏览器访问http://localhost:5173/3. 停止服务在对应终端使用Ctrl C或结束占用3001/5173端口的进程。默认账号与权限系统首次启动会自动写入种子用户与示例宠物数据。用户名密码角色手机号权限说明adminadmin123管理员13800000000全部功能含用户 / 数据库 / 样式analystuser123分析员13700000000大屏、预测、数据管理可编辑vieweruser123访客13900000000大屏与预测只读无数据/用户管理登录页支持账号 密码 验证码手机号 密码 验证码如13800000000页面与路由说明路由页面说明/login登录公开页/screen/1识别总览3D 面积/堆叠/缓动/微型折线等/screen/2生成分析3D 主题河流/象形柱/日历/相关矩阵等/screen/3三维洞察3D 三维散点/柱状/散点矩阵/screen/map地图分布世界-国家-省-市下钻/predict模型预测上传图片与参数调试/data数据管理需 admin / analyst/users用户管理需 admin/db数据库设置需 admin/style样式设置需 admin未登录访问受保护路由会跳转到/login无权限路由会回退到识别总览。后端接口概览基础地址http://127.0.0.1:3001/api前端开发时通过 Vite 代理/api→3001。除验证码、登录外其余接口一般需要请求头Authorization: Bearer token方法路径说明GET/captcha获取验证码图片id imagePOST/login登录GET/me当前用户GET/POST/PUT/DELETE/users用户管理GET/POST/PUT/DELETE/pets宠物数据 CRUDGET/pets/export导出 ExcelPOST/pets/import导入 ExcelGET/dashboard/overview大屏汇总数据GET/dashboard/model-nodes3D 节点数据GET/dashboard/map-meta地图元数据GET/dashboard/map-stats地图分层统计GET/map/geoGeoJSON 代理POST/predict图片预测GET/predictions预测历史GET/PUT/settings系统样式GET/POST/PUT/DELETE/db-config数据库连接配置模型预测说明预测流程前端校验格式与大小可选压缩至最长边 1280Canvas 提取主色、亮度、饱和度、构图比例等客户端特征服务端结合图像字节特征、文件名关键词、SQLite 品种先验、模型版本与增强开关进行多信号打分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建议使用进程守护如 PM2pm2 start server/index.js --name pet-dashboard-api环境建议修改server/index.js中的 JWTSECRET生产环境使用 HTTPS并限制上传目录访问策略按需备份server/data/pet.db快速体验路径启动前后端打开 http://localhost:5173使用admin / admin123 验证码登录依次查看识别总览 → 生成分析 → 三维洞察 → 地图分布进入模型预测上传一张宠物图片进行识别在数据管理中增删样本在样式设置中调整主题色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
