OneTree/ShopTRAINING
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
ShopTRAINING/UI/src/App.vue
xz2000 b1b697117b **日期**: 2025-07-14 
**主题**: UI导航栏重构

### 描述
根据用户请求，对左侧功能导航栏进行了调整。

### 主要改动
1.  **删除“数据管理”**:
    *   从 `UI/src/App.vue` 的导航菜单中移除了“数据管理”项。
    *   从 `UI/src/router/index.js` 中删除了对应的 `/data` 路由。
    *   删除了视图文件 `UI/src/views/DataView.vue`。

2.  **提升“店铺管理”**:
    *   将“店铺管理”菜单项在 `UI/src/App.vue` 中的位置提升，以填补原“数据管理”的位置，使其在导航中更加突出。

### 涉及文件
*   `UI/src/App.vue`
*   `UI/src/router/index.js`
*   `UI/src/views/DataView.vue` (已删除)

**按药品模型预测**
---
**日期**: 2025-07-14
**主题**: 修复导航菜单高亮问题

### 描述
修复了首次进入或刷新页面时，左侧导航菜单项与当前路由不匹配导致不高亮的问题。

### 主要改动
*   **文件**: `UI/src/App.vue`
*   **修改**:
    1.  引入 `useRoute` 和 `computed`。
    2.  创建了一个计算属性 `activeMenu`，其值动态地等于当前路由的路径 (`route.path`)。
    3.  将 `el-menu` 组件的 `:default-active` 属性绑定到 `activeMenu`。

### 结果
确保了导航菜单的高亮状态始终与当前页面的URL保持同步。

---
**日期**: 2025-07-15
**主题**: 修复硬编码文件路径问题，提高项目可移植性

### 问题描述
项目在从一台计算机迁移到另一台时，由于数据文件路径被硬编码在代码中，导致程序无法找到数据文件而运行失败。

### 根本原因
多个Python文件（`predictor.py`, `multi_store_data_utils.py`）中直接写入了相对路径 `'data/timeseries_training_data_sample_10s50p.parquet'` 作为默认值。这种方式在不同运行环境下（如从根目录运行 vs 从子目录运行）会产生路径解析错误。

### 解决方案：集中配置，统一管理
1.  **修改 `server/core/config.py` (核心)**:
    *   动态计算并定义了一个全局变量 `PROJECT_ROOT`，它始终指向项目的根目录。
    *   基于 `PROJECT_ROOT`，使用 `os.path.join` 创建了一个跨平台的、绝对的默认数据路径 `DEFAULT_DATA_PATH` 和模型保存路径 `DEFAULT_MODEL_DIR`。
    *   这确保了无论从哪个位置执行代码，路径总能被正确解析。

2.  **修改 `server/utils/multi_store_data_utils.py`**:
    *   从 `server/core/config` 导入 `DEFAULT_DATA_PATH`。
    *   将所有数据加载函数的 `file_path` 参数的默认值从硬编码的字符串改为 `None`。
    *   在函数内部，如果 `file_path` 为 `None`，则自动使用导入的 `DEFAULT_DATA_PATH`。
    *   移除了原有的、复杂的、为了猜测正确路径而编写的冗余代码。

3.  **修改 `server/core/predictor.py`**:
    *   同样从 `server/core/config` 导入 `DEFAULT_DATA_PATH`。
    *   在初始化 `PharmacyPredictor` 时，如果未提供数据路径，则使用导入的 `DEFAULT_DATA_PATH` 作为默认值。

### 最终结果
通过将数据源路径集中到唯一的配置文件中进行管理，彻底解决了因硬编码路径导致的可移植性问题。项目现在可以在任何环境下可靠地运行。

---
### 未来如何修改数据源（例如，连接到服务器数据库）

本次重构为将来更换数据源打下了坚实的基础。操作非常简单：

1.  **定位配置文件**: 打开 `server/core/config.py` 文件。

2.  **修改数据源定义**:
    *   **当前 (文件)**:
        ```python
        DEFAULT_DATA_PATH = os.path.join(PROJECT_ROOT, 'data', 'timeseries_training_data_sample_10s50p.parquet')
        ```
    *   **未来 (数据库示例)**:
        您可以将这行替换为数据库连接字符串，或者添加新的数据库配置变量。例如：
        ```python
        # 注释掉或删除旧的文件路径配置
        # DEFAULT_DATA_PATH = ...

        # 新增数据库连接配置
        DATABASE_URL = "postgresql://user:password@your_server_ip:5432/your_database_name"
        ```

3.  **修改数据加载逻辑**:
    *   **定位数据加载函数**: 打开 `server/utils/multi_store_data_utils.py`。
    *   **修改 `load_multi_store_data` 函数**:
        *   引入数据库连接库（如 `sqlalchemy` 或 `psycopg2`）。
        *   修改函数逻辑，使其使用 `config.py` 中的 `DATABASE_URL` 来连接数据库，并执行SQL查询来获取数据，而不是读取文件。
        *   **示例**:
            ```python
            from sqlalchemy import create_engine
            from core.config import DATABASE_URL # 导入新的数据库配置

            def load_multi_store_data(...):
                # ...
                engine = create_engine(DATABASE_URL)
                query = "SELECT * FROM sales_data" # 根据需要构建查询
                df = pd.read_sql(query, engine)
                # ... 后续处理逻辑保持不变 ...
            ```
2025-07-15 10:37:33 +08:00

354 lines
8.8 KiB
Vue
Raw Blame History

<template>
<div class="app-container">
<div class="background-effects">
<div class="glow-circle circle-1"></div>
<div class="glow-circle circle-2"></div>
<div class="glow-circle circle-3"></div>
</div>
<el-container class="layout-container">
<el-aside width="220px" class="sidebar">
<div class="logo-container">
<div class="logo-icon">
<el-icon size="24"><DataAnalysis /></el-icon>
</div>
<h2 class="logo-text">药品销售预测</h2>
</div>
<el-scrollbar>
<el-menu
:default-active="activeMenu"
:default-openeds="['1']"
router
class="futuristic-menu"
background-color="transparent"
text-color="#e0e6ff"
active-text-color="#5d9cff">
<el-sub-menu index="1">
<template #title>
<el-icon><DataLine /></el-icon>
<span>功能导航</span>
</template>
<el-menu-item index="/">
<el-icon><House /></el-icon>首页概览
</el-menu-item>
<el-menu-item index="/store-management">
<el-icon><Shop /></el-icon>店铺管理
</el-menu-item>
<el-sub-menu index="training-submenu">
<template #title>
<el-icon><Cpu /></el-icon>
<span>模型训练</span>
</template>
<el-menu-item index="/training/product">
<el-icon><Coin /></el-icon>按药品训练
</el-menu-item>
<el-menu-item index="/training/store">
<el-icon><Shop /></el-icon>按店铺训练
</el-menu-item>
<el-menu-item index="/training/global">
<el-icon><Operation /></el-icon>全局模型训练
</el-menu-item>
</el-sub-menu>
<el-sub-menu index="prediction-submenu">
<template #title>
<el-icon><MagicStick /></el-icon>
<span>预测分析</span>
</template>
<el-menu-item index="/prediction/product">
<el-icon><Coin /></el-icon>按药品预测
</el-menu-item>
<el-menu-item index="/prediction/store">
<el-icon><Shop /></el-icon>按店铺预测
</el-menu-item>
<el-menu-item index="/prediction/global">
<el-icon><Operation /></el-icon>全局模型预测
</el-menu-item>
</el-sub-menu>
<el-menu-item index="/history">
<el-icon><Histogram /></el-icon>历史预测
</el-menu-item>
<el-menu-item index="/management">
<el-icon><Files /></el-icon>模型管理
</el-menu-item>
</el-sub-menu>
</el-menu>
</el-scrollbar>
<div class="sidebar-footer">
<el-tooltip content="系统版本: v1.0.0">
<div class="version-badge">v1.0.0</div>
</el-tooltip>
</div>
</el-aside>
<el-container>
<el-header class="header">
<div class="header-title">
<span class="glowing-text">智能药品销售预测系统</span>
</div>
<div class="header-controls">
<el-tooltip content="数据刷新">
<el-button circle size="small">
<el-icon><Refresh /></el-icon>
</el-button>
</el-tooltip>
<el-avatar size="small" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
</div>
</el-header>
<el-main class="main-content">
<router-view v-slot="{ Component }">
<transition name="fade" mode="out-in">
<component :is="Component" />
</transition>
</router-view>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { DataAnalysis, Refresh, DataLine, House, FolderOpened, Cpu, MagicStick, Files, Histogram, Coin, Shop, Operation } from '@element-plus/icons-vue'
const route = useRoute()
const activeMenu = computed(() => route.path)
</script>
<style>
/* 全局样式 */
:root {
--primary-dark: #0c1e35;
--primary-light: #1c3a64;
--accent-color: #5d9cff;
--accent-glow: #43a5f5;
--accent-purple: #ad7bee;
--text-light: #e0e6ff;
--card-bg: rgba(18, 36, 65, 0.6);
--card-border: rgba(93, 156, 255, 0.2);
--neon-glow: 0 0 10px rgba(93, 156, 255, 0.5), 0 0 20px rgba(93, 156, 255, 0.3);
}
body {
margin: 0;
padding: 0;
font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
background-color: var(--primary-dark);
color: var(--text-light);
overflow: hidden;
}
/* 页面过渡动画 */
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
/* 提高文本可读性 */
* {
text-shadow: 0 0 0.5px rgba(0, 0, 0, 0.1);
}
.main-content {
background-color: transparent !important;
padding: 20px;
}
</style>
<style scoped>
.app-container {
position: relative;
min-height: 100vh;
overflow: hidden;
}
.background-effects {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
overflow: hidden;
}
.glow-circle {
position: absolute;
border-radius: 50%;
filter: blur(60px);
}
.circle-1 {
top: -100px;
right: -100px;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(93, 156, 255, 0.3) 0%, rgba(18, 36, 65, 0) 70%);
animation: pulse 15s infinite alternate;
}
.circle-2 {
bottom: -150px;
left: -100px;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(173, 123, 238, 0.2) 0%, rgba(18, 36, 65, 0) 70%);
animation: pulse 20s infinite alternate-reverse;
}
.circle-3 {
top: 40%;
left: 50%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(67, 165, 245, 0.15) 0%, rgba(18, 36, 65, 0) 70%);
animation: pulse 12s infinite alternate;
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 0.5;
}
100% {
transform: scale(1.5);
opacity: 0.8;
}
}
.layout-container {
height: 100vh;
background-color: transparent;
}
.sidebar {
background: linear-gradient(180deg, var(--primary-dark) 0%, var(--primary-light) 100%);
border-right: 1px solid var(--card-border);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
}
.logo-container {
padding: 20px;
display: flex;
align-items: center;
gap: 12px;
border-bottom: 1px solid var(--card-border);
}
.logo-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 8px;
background: linear-gradient(135deg, var(--accent-color), var(--accent-purple));
box-shadow: var(--neon-glow);
color: white;
}
.logo-text {
margin: 0;
font-size: 18px;
font-weight: 500;
color: var(--text-light);
letter-spacing: 0.5px;
}
.futuristic-menu {
border-right: none !important;
margin-top: 10px;
}
.futuristic-menu :deep(.el-menu-item) {
height: 50px;
line-height: 50px;
margin: 5px 15px;
border-radius: 6px;
transition: all 0.3s;
}
.futuristic-menu :deep(.el-menu-item.is-active) {
background: linear-gradient(90deg, rgba(93, 156, 255, 0.2) 0%, rgba(93, 156, 255, 0) 100%);
box-shadow: -2px 0 0 var(--accent-color);
}
.futuristic-menu :deep(.el-menu-item:hover) {
background-color: rgba(255, 255, 255, 0.05);
}
.sidebar-footer {
margin-top: auto;
padding: 15px;
border-top: 1px solid var(--card-border);
text-align: center;
}
.version-badge {
display: inline-block;
padding: 2px 10px;
border-radius: 12px;
background-color: rgba(93, 156, 255, 0.1);
border: 1px solid var(--accent-color);
color: var(--accent-color);
font-size: 12px;
}
.header {
background: rgba(18, 36, 65, 0.4);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--card-border);
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
}
.header-title {
display: flex;
align-items: center;
}
.glowing-text {
font-size: 20px;
font-weight: 500;
color: var(--text-light);
text-shadow: 0 0 5px rgba(93, 156, 255, 0.5);
position: relative;
}
.header-controls {
display: flex;
align-items: center;
gap: 15px;
}
/* 自定义滚动条 */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar-thumb {
background: rgba(93, 156, 255, 0.3);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(93, 156, 255, 0.5);
}
</style>
Reference in New Issue View Git Blame Copy Permalink