将药品预测的修改,同步到店铺和全局预测界面
This commit is contained in:
parent
e1980b3755
commit
af3d174ac6
@ -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;
|
||||
}
|
||||
|
||||
|
@ -102,10 +102,10 @@ const data = ref({
|
||||
// 功能卡片数据
|
||||
const featureCards = [
|
||||
{
|
||||
title: '数据管理',
|
||||
description: '管理产品和销售数据',
|
||||
title: '店铺管理',
|
||||
description: '查看店铺信息',
|
||||
icon: 'FolderOpened',
|
||||
path: '/data',
|
||||
path: '/store-management',
|
||||
type: 'data'
|
||||
},
|
||||
{
|
||||
|
@ -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>
|
@ -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;
|
||||
|
@ -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.
@ -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
|
||||
|
@ -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)
|
||||
|
Loading…
x
Reference in New Issue
Block a user