将药品预测的修改,同步到店铺和全局预测界面

This commit is contained in:
xz2000 2025-07-23 15:18:46 +08:00
parent e1980b3755
commit af3d174ac6
8 changed files with 306 additions and 348 deletions

View File

@ -225,8 +225,8 @@ body > .el-popper,
/* 遮罩层 */
.el-overlay {
background-color: rgba(6, 15, 28, 0.7) !important;
backdrop-filter: blur(2px) !important;
background-color: rgba(0, 0, 0, 0) !important; /* 完全透明 */
pointer-events: auto !important; /* 确保能拦截点击事件 */
}
/* 分页控件 */
@ -595,3 +595,4 @@ textarea::placeholder {
.el-drawer__close-btn:hover {
color: #5d9cff !important;
}

View File

@ -102,10 +102,10 @@ const data = ref({
//
const featureCards = [
{
title: '数据管理',
description: '管理产品和销售数据',
title: '店铺管理',
description: '查看店铺信息',
icon: 'FolderOpened',
path: '/data',
path: '/store-management',
type: 'data'
},
{

View File

@ -4,156 +4,138 @@
<template #header>
<div class="card-header">
<span>全局模型预测</span>
<el-tooltip content="使用全局通用模型进行销售预测">
<el-tooltip content="对系统中的所有全局模型进行批量或单个预测">
<el-icon><QuestionFilled /></el-icon>
</el-tooltip>
</div>
</template>
<div class="model-selection-section">
<h4>🎯 选择预测模型</h4>
<el-form :model="form" label-width="120px">
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="算法类型">
<el-select
v-model="form.model_type"
placeholder="选择算法"
@change="handleModelTypeChange"
style="width: 100%"
>
<el-option
v-for="item in modelTypes"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20" v-if="form.model_type">
<el-col :span="5">
<el-form-item label="模型版本">
<el-select
v-model="form.version"
placeholder="选择版本"
style="width: 100%"
:disabled="!availableVersions.length"
:loading="versionsLoading"
>
<el-option
v-for="version in availableVersions"
:key="version"
:label="version"
:value="version"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="预测天数">
<el-input-number
v-model="form.future_days"
:min="1"
:max="365"
style="width: 100%"
/>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="历史天数">
<el-input-number
v-model="form.history_lookback_days"
:min="7"
:max="365"
style="width: 100%"
/>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="起始日期">
<el-date-picker
v-model="form.start_date"
type="date"
placeholder="选择日期"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
style="width: 100%"
:clearable="false"
/>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="预测分析">
<el-switch
v-model="form.analyze_result"
active-text="开启"
inactive-text="关闭"
/>
</el-form-item>
</el-col>
</el-row>
<div class="controls-section">
<el-form :model="filters" label-width="80px" inline>
<el-form-item label="算法类型">
<el-select v-model="filters.model_type" placeholder="所有类型" clearable value-key="id" style="width: 200px;">
<el-option
v-for="item in modelTypes"
:key="item.id"
:label="item.name"
:value="item"
/>
</el-select>
</el-form-item>
<el-form-item label="预测天数">
<el-input-number v-model="form.future_days" :min="1" :max="365" />
</el-form-item>
<el-form-item label="历史天数">
<el-input-number v-model="form.history_lookback_days" :min="7" :max="365" />
</el-form-item>
<el-form-item label="起始日期">
<el-date-picker
v-model="form.start_date"
type="date"
placeholder="选择日期"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
:clearable="false"
/>
</el-form-item>
</el-form>
</div>
<div class="prediction-actions">
<el-button
type="primary"
size="large"
@click="startPrediction"
:loading="predicting"
:disabled="!canPredict"
>
<el-icon><TrendCharts /></el-icon>
开始预测
</el-button>
<!-- 模型列表 -->
<div class="model-list-section">
<h4>🌍 可用全局模型列表</h4>
<el-table :data="paginatedModelList" style="width: 100%" v-loading="modelsLoading">
<el-table-column prop="model_type" label="模型类型" sortable />
<el-table-column prop="version" label="版本" />
<el-table-column prop="created_at" label="创建时间" />
<el-table-column label="操作">
<template #default="{ row }">
<el-button
type="primary"
size="small"
@click="startPrediction(row)"
:loading="predicting[row.model_id]"
>
<el-icon><TrendCharts /></el-icon>
开始预测
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
background
layout="prev, pager, next"
:total="filteredModelList.length"
:page-size="pagination.pageSize"
@current-change="handlePageChange"
style="margin-top: 20px; justify-content: center;"
/>
</div>
</el-card>
<el-card v-if="predictionResult" style="margin-top: 20px">
<template #header>
<div class="card-header">
<span>📈 预测结果</span>
</div>
</template>
<!-- 预测结果弹窗 -->
<el-dialog v-model="dialogVisible" title="📈 预测结果" width="70%" :modal="false" modal-class="no-overlay">
<div class="prediction-chart">
<canvas ref="chartCanvas" width="800" height="400"></canvas>
</div>
</el-card>
<template #footer>
<el-button @click="dialogVisible = false">关闭</el-button>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { ref, reactive, onMounted, computed, watch, nextTick } from 'vue'
import { ref, reactive, onMounted, nextTick, computed } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { ElMessage, ElDialog, ElTable, ElTableColumn, ElButton, ElIcon, ElCard, ElTooltip, ElForm, ElFormItem, ElInputNumber, ElDatePicker, ElSelect, ElOption, ElPagination } from 'element-plus'
import { QuestionFilled, TrendCharts } from '@element-plus/icons-vue'
import Chart from 'chart.js/auto'
const modelList = ref([])
const modelTypes = ref([])
const availableVersions = ref([])
const versionsLoading = ref(false)
const predicting = ref(false)
const modelsLoading = ref(false)
const predicting = reactive({})
const dialogVisible = ref(false)
const predictionResult = ref(null)
const chartCanvas = ref(null)
let chart = null
const form = reactive({
training_mode: 'global',
model_type: '',
version: '',
future_days: 7,
history_lookback_days: 30,
start_date: '',
analyze_result: true
analyze_result: true // UI
})
const canPredict = computed(() => {
return form.model_type && form.version
const filters = reactive({
model_type: null
})
const pagination = reactive({
currentPage: 1,
pageSize: 8
})
const filteredModelList = computed(() => {
return modelList.value.filter(model => {
const modelTypeMatch = !filters.model_type || model.model_type === filters.model_type
return modelTypeMatch
})
})
const paginatedModelList = computed(() => {
const start = (pagination.currentPage - 1) * pagination.pageSize
const end = start + pagination.pageSize
return filteredModelList.value.slice(start, end)
})
const handlePageChange = (page) => {
pagination.currentPage = page
}
const fetchModelTypes = async () => {
try {
const response = await axios.get('/api/model_types')
@ -165,58 +147,48 @@ const fetchModelTypes = async () => {
}
}
const fetchAvailableVersions = async () => {
if (!form.model_type) {
availableVersions.value = []
return
}
const fetchModels = async () => {
modelsLoading.value = true
try {
versionsLoading.value = true
const url = `/api/models/global/${form.model_type}/versions`
const response = await axios.get(url)
const response = await axios.get('/api/models', { params: { training_mode: 'global' } })
if (response.data.status === 'success') {
availableVersions.value = response.data.data.versions || []
if (response.data.data.latest_version) {
form.version = response.data.data.latest_version
}
modelList.value = response.data.data
} else {
ElMessage.error('获取模型列表失败')
}
} catch (error) {
availableVersions.value = []
ElMessage.error('获取模型列表失败')
} finally {
versionsLoading.value = false
modelsLoading.value = false
}
}
const handleModelTypeChange = () => {
form.version = ''
fetchAvailableVersions()
}
const startPrediction = async () => {
const startPrediction = async (model) => {
predicting[model.model_id] = true
try {
predicting.value = true
const payload = {
training_mode: 'global', //
model_type: form.model_type,
version: form.version,
training_mode: 'global',
model_type: model.model_type,
version: model.version,
future_days: form.future_days,
history_lookback_days: form.history_lookback_days,
start_date: form.start_date,
analyze_result: form.analyze_result
analyze_result: form.analyze_result,
}
const response = await axios.post('/api/prediction', payload)
if (response.data.status === 'success') {
predictionResult.value = response.data.data
ElMessage.success('预测完成!')
dialogVisible.value = true
await nextTick()
renderChart()
} else {
ElMessage.error(response.data.message || '预测失败')
ElMessage.error(response.data.error || '预测失败')
}
} catch (error) {
ElMessage.error('预测请求失败')
ElMessage.error(error.response?.data?.error || '预测请求失败')
} finally {
predicting.value = false
predicting[model.model_id] = false
}
}
@ -237,7 +209,7 @@ const renderChart = () => {
}
const allLabels = [...new Set([...historyData.map(p => p.date), ...predictionData.map(p => p.date)])].sort()
const simplifiedLabels = allLabels.map(date => date.split('-')[2]);
const simplifiedLabels = allLabels.map(date => date.split('-').slice(1).join('/'));
const historyMap = new Map(historyData.map(p => [p.date, p.sales]))
const predictionMap = new Map(predictionData.map(p => [p.date, p.predicted_sales]))
@ -293,8 +265,8 @@ const renderChart = () => {
plugins: {
title: {
display: true,
text: '全局销量预测趋势图',
color: '#ffffff',
text: `全局模型 (${predictionResult.value.model_type}) - 销量预测趋势图`,
color: '#303133',
font: {
size: 20,
weight: 'bold',
@ -303,7 +275,7 @@ const renderChart = () => {
subtitle: {
display: true,
text: subtitleText,
color: '#6c757d',
color: '#606266',
font: {
size: 14,
},
@ -316,7 +288,7 @@ const renderChart = () => {
x: {
title: {
display: true,
text: '日期 (日)'
text: '日期'
},
grid: {
display: false
@ -339,14 +311,11 @@ const renderChart = () => {
}
onMounted(() => {
fetchModels()
fetchModelTypes()
const today = new Date()
form.start_date = today.toISOString().split('T')[0]
})
watch(() => form.model_type, () => {
fetchAvailableVersions()
})
</script>
<style scoped>
@ -358,17 +327,19 @@ watch(() => form.model_type, () => {
justify-content: space-between;
align-items: center;
}
.model-selection-section h4 {
margin-bottom: 16px;
}
.prediction-actions {
display: flex;
justify-content: center;
.controls-section, .model-list-section {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #ebeef5;
}
.model-list-section h4 {
margin-bottom: 16px;
}
.prediction-chart {
margin-top: 20px;
}
</style>
<style>
.no-overlay {
background-color: transparent !important;
}
</style>

View File

@ -17,15 +17,16 @@
v-model="filters.product_id"
:show-all-option="true"
all-option-label="所有药品"
clearable
/>
</el-form-item>
<el-form-item label="算法类型">
<el-select v-model="filters.model_type" placeholder="所有类型" clearable>
<el-select v-model="filters.model_type" placeholder="所有类型" clearable value-key="id" style="width: 200px;">
<el-option
v-for="item in modelTypes"
:key="item.id"
:label="item.name"
:value="item.id"
:value="item"
/>
</el-select>
</el-form-item>
@ -119,7 +120,7 @@ const form = reactive({
const filters = reactive({
product_id: '',
model_type: ''
model_type: null
})
const pagination = reactive({
@ -340,7 +341,7 @@ onMounted(() => {
margin-top: 20px;
}
.filters-section h4, .global-settings-section h4, .model-list-section h4 {
margin-bottom: 16px;
margin-bottom: 20px;
}
.prediction-chart {
margin-top: 20px;

View File

@ -4,168 +4,163 @@
<template #header>
<div class="card-header">
<span>按店铺预测</span>
<el-tooltip content="使用针对特定店铺训练的模型进行销售预测">
<el-tooltip content="对系统中的所有店铺模型进行批量或单个预测">
<el-icon><QuestionFilled /></el-icon>
</el-tooltip>
</div>
</template>
<div class="model-selection-section">
<h4>🎯 选择预测模型</h4>
<el-form :model="form" label-width="120px">
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="目标店铺">
<StoreSelector
v-model="form.store_id"
@change="handleStoreChange"
:show-all-option="false"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="算法类型">
<el-select
v-model="form.model_type"
placeholder="选择算法"
@change="handleModelTypeChange"
style="width: 100%"
:disabled="!form.store_id"
>
<el-option
v-for="item in modelTypes"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20" v-if="form.model_type">
<el-col :span="5">
<el-form-item label="模型版本">
<el-select
v-model="form.version"
placeholder="选择版本"
style="width: 100%"
:disabled="!availableVersions.length"
:loading="versionsLoading"
>
<el-option
v-for="version in availableVersions"
:key="version"
:label="version"
:value="version"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="预测天数">
<el-input-number
v-model="form.future_days"
:min="1"
:max="365"
style="width: 100%"
/>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="历史天数">
<el-input-number
v-model="form.history_lookback_days"
:min="7"
:max="365"
style="width: 100%"
/>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="起始日期">
<el-date-picker
v-model="form.start_date"
type="date"
placeholder="选择日期"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
style="width: 100%"
:clearable="false"
/>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="预测分析">
<el-switch
v-model="form.analyze_result"
active-text="开启"
inactive-text="关闭"
/>
</el-form-item>
</el-col>
</el-row>
<div class="controls-section">
<el-form :model="filters" label-width="80px" inline>
<el-form-item label="目标店铺">
<StoreSelector
v-model="filters.store_id"
:show-all-option="true"
all-option-label="所有店铺"
clearable
/>
</el-form-item>
<el-form-item label="算法类型">
<el-select v-model="filters.model_type" placeholder="所有类型" clearable value-key="id" style="width: 200px;">
<el-option
v-for="item in modelTypes"
:key="item.id"
:label="item.name"
:value="item"
/>
</el-select>
</el-form-item>
<el-form-item label="预测天数">
<el-input-number v-model="form.future_days" :min="1" :max="365" />
</el-form-item>
<el-form-item label="历史天数">
<el-input-number v-model="form.history_lookback_days" :min="7" :max="365" />
</el-form-item>
<el-form-item label="起始日期">
<el-date-picker
v-model="form.start_date"
type="date"
placeholder="选择日期"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
:clearable="false"
/>
</el-form-item>
</el-form>
</div>
<div class="prediction-actions">
<el-button
type="primary"
size="large"
@click="startPrediction"
:loading="predicting"
:disabled="!canPredict"
>
<el-icon><TrendCharts /></el-icon>
开始预测
</el-button>
<!-- 模型列表 -->
<div class="model-list-section">
<h4>📦 可用店铺模型列表</h4>
<el-table :data="paginatedModelList" style="width: 100%" v-loading="modelsLoading">
<el-table-column prop="store_name" label="店铺名称" sortable />
<el-table-column prop="model_type" label="模型类型" sortable />
<el-table-column prop="version" label="版本" />
<el-table-column prop="created_at" label="创建时间" />
<el-table-column label="操作">
<template #default="{ row }">
<el-button
type="primary"
size="small"
@click="startPrediction(row)"
:loading="predicting[row.model_id]"
>
<el-icon><TrendCharts /></el-icon>
开始预测
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
background
layout="prev, pager, next"
:total="filteredModelList.length"
:page-size="pagination.pageSize"
@current-change="handlePageChange"
style="margin-top: 20px; justify-content: center;"
/>
</div>
</el-card>
<el-card v-if="predictionResult" style="margin-top: 20px">
<template #header>
<div class="card-header">
<span>📈 预测结果</span>
</div>
</template>
<!-- 预测结果弹窗 -->
<el-dialog v-model="dialogVisible" title="📈 预测结果" width="70%">
<div class="prediction-chart">
<canvas ref="chartCanvas" width="800" height="400"></canvas>
</div>
</el-card>
<template #footer>
<el-button @click="dialogVisible = false">关闭</el-button>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { ref, reactive, onMounted, computed, watch, nextTick } from 'vue'
import { ref, reactive, onMounted, nextTick, computed } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { ElMessage, ElDialog, ElTable, ElTableColumn, ElButton, ElIcon, ElCard, ElTooltip, ElForm, ElFormItem, ElInputNumber, ElDatePicker, ElSelect, ElOption, ElPagination } from 'element-plus'
import { QuestionFilled, TrendCharts } from '@element-plus/icons-vue'
import Chart from 'chart.js/auto'
import StoreSelector from '../../components/StoreSelector.vue'
const modelList = ref([])
const modelTypes = ref([])
const availableVersions = ref([])
const versionsLoading = ref(false)
const predicting = ref(false)
const modelsLoading = ref(false)
const predicting = reactive({})
const stores = ref([])
const dialogVisible = ref(false)
const predictionResult = ref(null)
const chartCanvas = ref(null)
let chart = null
const form = reactive({
training_mode: 'store',
store_id: '',
model_type: '',
version: '',
future_days: 7,
history_lookback_days: 30,
start_date: '',
analyze_result: true
analyze_result: true // UI
})
const canPredict = computed(() => {
return form.store_id && form.model_type && form.version
const filters = reactive({
store_id: '',
model_type: null
})
const pagination = reactive({
currentPage: 1,
pageSize: 8
})
const storeNameMap = computed(() => {
return stores.value.reduce((acc, store) => {
acc[store.store_id] = store.store_name
return acc
}, {})
})
const modelsWithNames = computed(() => {
return modelList.value.map(model => ({
...model,
store_name: storeNameMap.value[model.store_id] || model.store_id
}))
})
const filteredModelList = computed(() => {
return modelsWithNames.value.filter(model => {
const storeMatch = !filters.store_id || model.store_id === filters.store_id
const modelTypeMatch = !filters.model_type || model.model_type === filters.model_type
return storeMatch && modelTypeMatch
})
})
const paginatedModelList = computed(() => {
const start = (pagination.currentPage - 1) * pagination.pageSize
const end = start + pagination.pageSize
return filteredModelList.value.slice(start, end)
})
const handlePageChange = (page) => {
pagination.currentPage = page
}
const fetchModelTypes = async () => {
try {
const response = await axios.get('/api/model_types')
@ -177,47 +172,41 @@ const fetchModelTypes = async () => {
}
}
const fetchAvailableVersions = async () => {
if (!form.store_id || !form.model_type) {
availableVersions.value = []
return
}
const fetchModels = async () => {
modelsLoading.value = true
try {
versionsLoading.value = true
const url = `/api/models/store/${form.store_id}/${form.model_type}/versions`
const response = await axios.get(url)
const response = await axios.get('/api/models', { params: { training_mode: 'store' } })
if (response.data.status === 'success') {
availableVersions.value = response.data.data.versions || []
if (response.data.data.latest_version) {
form.version = response.data.data.latest_version
}
modelList.value = response.data.data
} else {
ElMessage.error('获取模型列表失败')
}
} catch (error) {
availableVersions.value = []
ElMessage.error('获取模型列表失败')
} finally {
versionsLoading.value = false
modelsLoading.value = false
}
}
const handleStoreChange = () => {
form.model_type = ''
form.version = ''
availableVersions.value = []
}
const handleModelTypeChange = () => {
form.version = ''
fetchAvailableVersions()
}
const startPrediction = async () => {
const fetchStores = async () => {
try {
const response = await axios.get('/api/stores')
if (response.data.status === 'success') {
stores.value = response.data.data
}
} catch (error) {
ElMessage.error('获取店铺列表失败')
}
}
const startPrediction = async (model) => {
predicting[model.model_id] = true
try {
predicting.value = true
const payload = {
training_mode: form.training_mode,
store_id: form.store_id,
model_type: form.model_type,
version: form.version,
training_mode: 'store',
store_id: model.store_id,
model_type: model.model_type,
version: model.version,
future_days: form.future_days,
history_lookback_days: form.history_lookback_days,
start_date: form.start_date,
@ -227,15 +216,16 @@ const startPrediction = async () => {
if (response.data.status === 'success') {
predictionResult.value = response.data.data
ElMessage.success('预测完成!')
dialogVisible.value = true
await nextTick()
renderChart()
} else {
ElMessage.error(response.data.message || '预测失败')
ElMessage.error(response.data.error || '预测失败')
}
} catch (error) {
ElMessage.error('预测请求失败')
ElMessage.error(error.response?.data?.error || '预测请求失败')
} finally {
predicting.value = false
predicting[model.model_id] = false
}
}
@ -256,7 +246,7 @@ const renderChart = () => {
}
const allLabels = [...new Set([...historyData.map(p => p.date), ...predictionData.map(p => p.date)])].sort()
const simplifiedLabels = allLabels.map(date => date.split('-')[2]);
const simplifiedLabels = allLabels.map(date => date.split('-').slice(1).join('/'));
const historyMap = new Map(historyData.map(p => [p.date, p.sales]))
const predictionMap = new Map(predictionData.map(p => [p.date, p.predicted_sales]))
@ -312,8 +302,8 @@ const renderChart = () => {
plugins: {
title: {
display: true,
text: `${predictionResult.value.product_name} - 销量预测趋势图`,
color: '#ffffff',
text: `${predictionResult.value.store_name} - 销量预测趋势图`,
color: '#303133',
font: {
size: 20,
weight: 'bold',
@ -322,7 +312,7 @@ const renderChart = () => {
subtitle: {
display: true,
text: subtitleText,
color: '#6c757d',
color: '#606266',
font: {
size: 14,
},
@ -335,7 +325,7 @@ const renderChart = () => {
x: {
title: {
display: true,
text: '日期 (日)'
text: '日期'
},
grid: {
display: false
@ -358,14 +348,12 @@ const renderChart = () => {
}
onMounted(() => {
fetchStores()
fetchModels()
fetchModelTypes()
const today = new Date()
form.start_date = today.toISOString().split('T')[0]
})
watch([() => form.store_id, () => form.model_type], () => {
fetchAvailableVersions()
})
</script>
<style scoped>
@ -377,15 +365,11 @@ watch([() => form.store_id, () => form.model_type], () => {
justify-content: space-between;
align-items: center;
}
.model-selection-section h4 {
margin-bottom: 16px;
}
.prediction-actions {
display: flex;
justify-content: center;
.controls-section, .model-list-section {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #ebeef5;
}
.model-list-section h4 {
margin-bottom: 16px;
}
.prediction-chart {
margin-top: 20px;

Binary file not shown.

View File

@ -13,6 +13,7 @@ from typing import List, Dict, Optional, Tuple
from core.config import DEFAULT_MODEL_DIR
class ModelManager:
"""统一模型管理器"""
@ -216,9 +217,9 @@ class ModelManager:
model_info['modified_at'] = datetime.fromtimestamp(
os.path.getmtime(model_file)
).isoformat()
models.append(model_info)
except Exception as e:
print(f"处理模型文件失败 {model_file}: {e}")
continue

View File

@ -421,4 +421,4 @@ def load_data(file_path=None, store_id=None):
"""
向后兼容的数据加载函数
"""
return load_multi_store_data(file_path, store_id=store_id)
return load_multi_store_data(file_path, store_id=store_id)