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

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

View File

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

View File

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

View File

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

View File

@ -4,168 +4,163 @@
<template #header> <template #header>
<div class="card-header"> <div class="card-header">
<span>按店铺预测</span> <span>按店铺预测</span>
<el-tooltip content="使用针对特定店铺训练的模型进行销售预测"> <el-tooltip content="对系统中的所有店铺模型进行批量或单个预测">
<el-icon><QuestionFilled /></el-icon> <el-icon><QuestionFilled /></el-icon>
</el-tooltip> </el-tooltip>
</div> </div>
</template> </template>
<div class="model-selection-section"> <div class="controls-section">
<h4>🎯 选择预测模型</h4> <el-form :model="filters" label-width="80px" inline>
<el-form :model="form" label-width="120px"> <el-form-item label="目标店铺">
<el-row :gutter="20"> <StoreSelector
<el-col :span="8"> v-model="filters.store_id"
<el-form-item label="目标店铺"> :show-all-option="true"
<StoreSelector all-option-label="所有店铺"
v-model="form.store_id" clearable
@change="handleStoreChange" />
:show-all-option="false" </el-form-item>
/> <el-form-item label="算法类型">
</el-form-item> <el-select v-model="filters.model_type" placeholder="所有类型" clearable value-key="id" style="width: 200px;">
</el-col> <el-option
<el-col :span="8"> v-for="item in modelTypes"
<el-form-item label="算法类型"> :key="item.id"
<el-select :label="item.name"
v-model="form.model_type" :value="item"
placeholder="选择算法" />
@change="handleModelTypeChange" </el-select>
style="width: 100%" </el-form-item>
:disabled="!form.store_id" <el-form-item label="预测天数">
> <el-input-number v-model="form.future_days" :min="1" :max="365" />
<el-option </el-form-item>
v-for="item in modelTypes" <el-form-item label="历史天数">
:key="item.id" <el-input-number v-model="form.history_lookback_days" :min="7" :max="365" />
:label="item.name" </el-form-item>
:value="item.id" <el-form-item label="起始日期">
/> <el-date-picker
</el-select> v-model="form.start_date"
</el-form-item> type="date"
</el-col> placeholder="选择日期"
</el-row> format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
<el-row :gutter="20" v-if="form.model_type"> :clearable="false"
<el-col :span="5"> />
<el-form-item label="模型版本"> </el-form-item>
<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>
</el-form> </el-form>
</div> </div>
<div class="prediction-actions"> <!-- 模型列表 -->
<el-button <div class="model-list-section">
type="primary" <h4>📦 可用店铺模型列表</h4>
size="large" <el-table :data="paginatedModelList" style="width: 100%" v-loading="modelsLoading">
@click="startPrediction" <el-table-column prop="store_name" label="店铺名称" sortable />
:loading="predicting" <el-table-column prop="model_type" label="模型类型" sortable />
:disabled="!canPredict" <el-table-column prop="version" label="版本" />
> <el-table-column prop="created_at" label="创建时间" />
<el-icon><TrendCharts /></el-icon> <el-table-column label="操作">
开始预测 <template #default="{ row }">
</el-button> <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> </div>
</el-card> </el-card>
<el-card v-if="predictionResult" style="margin-top: 20px"> <!-- 预测结果弹窗 -->
<template #header> <el-dialog v-model="dialogVisible" title="📈 预测结果" width="70%">
<div class="card-header">
<span>📈 预测结果</span>
</div>
</template>
<div class="prediction-chart"> <div class="prediction-chart">
<canvas ref="chartCanvas" width="800" height="400"></canvas> <canvas ref="chartCanvas" width="800" height="400"></canvas>
</div> </div>
</el-card> <template #footer>
<el-button @click="dialogVisible = false">关闭</el-button>
</template>
</el-dialog>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, reactive, onMounted, computed, watch, nextTick } from 'vue' import { ref, reactive, onMounted, nextTick, computed } from 'vue'
import axios from 'axios' 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 { QuestionFilled, TrendCharts } from '@element-plus/icons-vue'
import Chart from 'chart.js/auto' import Chart from 'chart.js/auto'
import StoreSelector from '../../components/StoreSelector.vue' import StoreSelector from '../../components/StoreSelector.vue'
const modelList = ref([])
const modelTypes = ref([]) const modelTypes = ref([])
const availableVersions = ref([]) const modelsLoading = ref(false)
const versionsLoading = ref(false) const predicting = reactive({})
const predicting = ref(false) const stores = ref([])
const dialogVisible = ref(false)
const predictionResult = ref(null) const predictionResult = ref(null)
const chartCanvas = ref(null) const chartCanvas = ref(null)
let chart = null let chart = null
const form = reactive({ const form = reactive({
training_mode: 'store',
store_id: '',
model_type: '',
version: '',
future_days: 7, future_days: 7,
history_lookback_days: 30, history_lookback_days: 30,
start_date: '', start_date: '',
analyze_result: true analyze_result: true // UI
}) })
const canPredict = computed(() => { const filters = reactive({
return form.store_id && form.model_type && form.version 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 () => { const fetchModelTypes = async () => {
try { try {
const response = await axios.get('/api/model_types') const response = await axios.get('/api/model_types')
@ -177,47 +172,41 @@ const fetchModelTypes = async () => {
} }
} }
const fetchAvailableVersions = async () => { const fetchModels = async () => {
if (!form.store_id || !form.model_type) { modelsLoading.value = true
availableVersions.value = []
return
}
try { try {
versionsLoading.value = true const response = await axios.get('/api/models', { params: { training_mode: 'store' } })
const url = `/api/models/store/${form.store_id}/${form.model_type}/versions`
const response = await axios.get(url)
if (response.data.status === 'success') { if (response.data.status === 'success') {
availableVersions.value = response.data.data.versions || [] modelList.value = response.data.data
if (response.data.data.latest_version) { } else {
form.version = response.data.data.latest_version ElMessage.error('获取模型列表失败')
}
} }
} catch (error) { } catch (error) {
availableVersions.value = [] ElMessage.error('获取模型列表失败')
} finally { } finally {
versionsLoading.value = false modelsLoading.value = false
} }
} }
const handleStoreChange = () => { const fetchStores = async () => {
form.model_type = '' try {
form.version = '' const response = await axios.get('/api/stores')
availableVersions.value = [] if (response.data.status === 'success') {
} stores.value = response.data.data
}
const handleModelTypeChange = () => { } catch (error) {
form.version = '' ElMessage.error('获取店铺列表失败')
fetchAvailableVersions() }
} }
const startPrediction = async () => { const startPrediction = async (model) => {
predicting[model.model_id] = true
try { try {
predicting.value = true
const payload = { const payload = {
training_mode: form.training_mode, training_mode: 'store',
store_id: form.store_id, store_id: model.store_id,
model_type: form.model_type, model_type: model.model_type,
version: form.version, version: model.version,
future_days: form.future_days, future_days: form.future_days,
history_lookback_days: form.history_lookback_days, history_lookback_days: form.history_lookback_days,
start_date: form.start_date, start_date: form.start_date,
@ -227,15 +216,16 @@ const startPrediction = async () => {
if (response.data.status === 'success') { if (response.data.status === 'success') {
predictionResult.value = response.data.data predictionResult.value = response.data.data
ElMessage.success('预测完成!') ElMessage.success('预测完成!')
dialogVisible.value = true
await nextTick() await nextTick()
renderChart() renderChart()
} else { } else {
ElMessage.error(response.data.message || '预测失败') ElMessage.error(response.data.error || '预测失败')
} }
} catch (error) { } catch (error) {
ElMessage.error('预测请求失败') ElMessage.error(error.response?.data?.error || '预测请求失败')
} finally { } 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 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 historyMap = new Map(historyData.map(p => [p.date, p.sales]))
const predictionMap = new Map(predictionData.map(p => [p.date, p.predicted_sales])) const predictionMap = new Map(predictionData.map(p => [p.date, p.predicted_sales]))
@ -312,8 +302,8 @@ const renderChart = () => {
plugins: { plugins: {
title: { title: {
display: true, display: true,
text: `${predictionResult.value.product_name} - 销量预测趋势图`, text: `${predictionResult.value.store_name} - 销量预测趋势图`,
color: '#ffffff', color: '#303133',
font: { font: {
size: 20, size: 20,
weight: 'bold', weight: 'bold',
@ -322,7 +312,7 @@ const renderChart = () => {
subtitle: { subtitle: {
display: true, display: true,
text: subtitleText, text: subtitleText,
color: '#6c757d', color: '#606266',
font: { font: {
size: 14, size: 14,
}, },
@ -335,7 +325,7 @@ const renderChart = () => {
x: { x: {
title: { title: {
display: true, display: true,
text: '日期 (日)' text: '日期'
}, },
grid: { grid: {
display: false display: false
@ -358,14 +348,12 @@ const renderChart = () => {
} }
onMounted(() => { onMounted(() => {
fetchStores()
fetchModels()
fetchModelTypes() fetchModelTypes()
const today = new Date() const today = new Date()
form.start_date = today.toISOString().split('T')[0] form.start_date = today.toISOString().split('T')[0]
}) })
watch([() => form.store_id, () => form.model_type], () => {
fetchAvailableVersions()
})
</script> </script>
<style scoped> <style scoped>
@ -377,15 +365,11 @@ watch([() => form.store_id, () => form.model_type], () => {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.model-selection-section h4 { .controls-section, .model-list-section {
margin-bottom: 16px;
}
.prediction-actions {
display: flex;
justify-content: center;
margin-top: 20px; margin-top: 20px;
padding-top: 20px; }
border-top: 1px solid #ebeef5; .model-list-section h4 {
margin-bottom: 16px;
} }
.prediction-chart { .prediction-chart {
margin-top: 20px; 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 from core.config import DEFAULT_MODEL_DIR
class ModelManager: class ModelManager:
"""统一模型管理器""" """统一模型管理器"""
@ -216,9 +217,9 @@ class ModelManager:
model_info['modified_at'] = datetime.fromtimestamp( model_info['modified_at'] = datetime.fromtimestamp(
os.path.getmtime(model_file) os.path.getmtime(model_file)
).isoformat() ).isoformat()
models.append(model_info) models.append(model_info)
except Exception as e: except Exception as e:
print(f"处理模型文件失败 {model_file}: {e}") print(f"处理模型文件失败 {model_file}: {e}")
continue 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)