xz2000
adb5e0f2b4
起点: 最初的系统功能基本，但代码存在重复，缺乏统一标准。我们从修复一个 xgboost_trainer.py 中的 NameError 开始。 核心工作: 统一工件保存: 将所有模型训练脚本 (xgboost, kan, tcn 等) 中保存模型和图表的逻辑进行了重构，提取到 server/utils/visualization.py 和 server/utils/model_manager.py 中，确保了所有训练器都遵循统一、健壮的模式。 修复绘图Bug: 修正了 visualization.py 中损失曲线图文件名生成不正确的bug，并更新了所有训练脚本以适应新的、更通用的 plot_loss_curve 函数。 第二阶段：数据库与API的现代化改造 问题: 原有的数据库设计过于简单，依赖文件名或复合键来识别模型，非常脆弱且难以扩展。 核心工作: 数据库重新设计: 在 server/api.py 中，我对数据库进行了彻底的重新设计。 废弃了旧的 model_versions 表，引入了新的 models 表，为每个模型实例分配一个唯一的 model_uid。此表现在存储了模型的全方位元数据，如类型、训练范围、参数、性能指标和工件路径。 重构了 prediction_history 表，使其通过 model_uid 与 models 表关联，并使用灵活的 JSON 字段（如 prediction_scope）来存储预测范围，以优雅地支持“按产品”、“按店铺”和“全局”等不同模式。 API大规模重构: 数据库的变更引发了对后端API的全面重构。 /api/models: 完全重写，以从新的 models 表中查询数据。 /api/prediction: 接口被简化，现在只接受一个核心参数 model_uid，而不是之前的一系列零散参数。 /api/prediction/history: 同样被重写以适应新的表结构。 第三阶段：前后端联调与Bug修复周期 问题: 后端的重大重构导致了前端功能失效，暴露出前后端接口定义不匹配的问题。 核心工作: 修复模型列表显示: 解决了因后端 /api/models 返回的JSON键与前端期望（product_name, store_name）不符，而导致的“药品名称”和“店铺名称”列为空的问题。 修复预测功能: 解决了因前端向 /api/prediction 发送旧格式的请求体而导致的“预测失败”问题。我修改了所有三个预测视图（ProductPredictionView.vue, StorePredictionView.vue, GlobalPredictionView.vue），使其发送后端现在需要的 model_uid。 修复UI视觉问题: 修复了预测按钮上的加载动画（spinner）失效的问题。原因是前端脚本逻辑中的键已更新为 model_uid，但模板中的 :loading 绑定仍错误地指向了旧的 model_id。 第四阶段：历史记录页面的最终完善 问题: 历史记录页面存在多个深层bug，包括列表为空、数据显示不正确以及筛选功能失效。 核心工作: 修复空列表: 解决了因后端 get_prediction_history 函数查询了不存在的数据库列而导致历史记录为空的问题。修复方案是改用 json_extract 函数来正确查询嵌套在JSON字段中的 product_id。 修正产品名称显示: 解决了列表中产品名称显示为内部标识符的bug。根据您的要求，我在不修改数据库记录的前提下，通过在后端读取数据时动态查询产品名并修正返回给前端的数据，解决了这个问题。 实现动态筛选下拉框: 解决了产品筛选下拉框为空的问题。根据您的最终指示，我修改了 HistoryView.vue，使其从返回的历史记录数据中动态提取唯一的产品列表来填充下拉框，移除了原有的独立API调用，使筛选功能更加智能和高效。
药店销售预测系统 - 前端界面
这是一个使用 Vue 3, Vite, Element Plus 和 Vue Router 构建的前端管理界面，用于与药店销售预测系统的后端API进行交互。
功能模块
- 首页: 系统功能概览和快捷入口。
- 数据管理: 浏览产品数据，上传新的销售数据Excel文件。
- 模型训练: 选择产品和模型类型，启动异步训练任务，并实时查看任务状态。
- 模型预测: 对指定产品进行销售预测，支持单模型预测和多模型效果对比，并提供可视化图表。
- 模型管理: 查看、筛选、搜索、导入、导出和删除已训练的模型。
技术栈
- Vue 3: 渐进式JavaScript框架。
- Vite: 下一代前端开发与构建工具。
- Vue Router: Vue.js 的官方路由。
- Element Plus: 基于 Vue 3 的桌面端组件库。
- Axios: 一个基于 promise 的 HTTP 库。
- Chart.js: 用于数据可视化的JavaScript图表库。
安装和运行
前提条件
步骤
-
进入UI目录
cd UI -
安装依赖 使用 npm:
npm install或者使用 pnpm:
pnpm install或者使用 yarn:
yarn -
启动开发服务器
npm run dev该命令会启动一个本地开发服务器，你可以在浏览器中访问
http://localhost:5173(或终端提示的其他端口) 来查看界面。重要:
- 请确保后端的Flask API服务正在运行中。
- Vite配置文件中已设置了代理，所有
/api开头的请求都会被转发到http://127.0.0.1:5000。
-
构建生产版本
npm run build该命令会将项目打包到
dist目录，用于生产环境部署。