预测界面修改，添加模型列表，分页
This commit is contained in:
parent
751de9b548
commit
e1980b3755
@ -4,168 +4,147 @@
|
||||
<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="目标药品">
|
||||
<ProductSelector
|
||||
v-model="form.product_id"
|
||||
@change="handleProductChange"
|
||||
: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.product_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="目标药品">
|
||||
<ProductSelector
|
||||
v-model="filters.product_id"
|
||||
:show-all-option="true"
|
||||
all-option-label="所有药品"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="算法类型">
|
||||
<el-select v-model="filters.model_type" placeholder="所有类型" clearable>
|
||||
<el-option
|
||||
v-for="item in modelTypes"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</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="product_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, ElRow, ElCol, ElPagination } from 'element-plus'
|
||||
import { QuestionFilled, TrendCharts } from '@element-plus/icons-vue'
|
||||
import Chart from 'chart.js/auto'
|
||||
import ProductSelector from '../../components/ProductSelector.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 dialogVisible = ref(false)
|
||||
const predictionResult = ref(null)
|
||||
const chartCanvas = ref(null)
|
||||
let chart = null
|
||||
|
||||
const form = reactive({
|
||||
training_mode: 'product',
|
||||
product_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.product_id && form.model_type && form.version
|
||||
const filters = reactive({
|
||||
product_id: '',
|
||||
model_type: ''
|
||||
})
|
||||
|
||||
const pagination = reactive({
|
||||
currentPage: 1,
|
||||
pageSize: 8
|
||||
})
|
||||
|
||||
const filteredModelList = computed(() => {
|
||||
return modelList.value.filter(model => {
|
||||
const productMatch = !filters.product_id || model.product_id === filters.product_id
|
||||
const modelTypeMatch = !filters.model_type || model.model_type === filters.model_type
|
||||
return productMatch && 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,67 +156,48 @@ const fetchModelTypes = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
const fetchAvailableVersions = async () => {
|
||||
if (!form.product_id || !form.model_type) {
|
||||
availableVersions.value = []
|
||||
return
|
||||
}
|
||||
const fetchModels = async () => {
|
||||
modelsLoading.value = true
|
||||
try {
|
||||
versionsLoading.value = true
|
||||
const url = `/api/models/${form.product_id}/${form.model_type}/versions`
|
||||
const response = await axios.get(url)
|
||||
const response = await axios.get('/api/models', { params: { training_mode: 'product' } })
|
||||
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 handleProductChange = () => {
|
||||
form.model_type = ''
|
||||
form.version = ''
|
||||
availableVersions.value = []
|
||||
}
|
||||
|
||||
const handleModelTypeChange = () => {
|
||||
form.version = ''
|
||||
fetchAvailableVersions()
|
||||
}
|
||||
|
||||
const startPrediction = async () => {
|
||||
const startPrediction = async (model) => {
|
||||
predicting[model.model_id] = true
|
||||
try {
|
||||
predicting.value = true
|
||||
const payload = {
|
||||
product_id: form.product_id,
|
||||
model_type: form.model_type,
|
||||
version: form.version,
|
||||
product_id: model.product_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,
|
||||
include_visualization: form.analyze_result,
|
||||
include_visualization: true, // 分析功能硬编码为开启
|
||||
}
|
||||
// Corrected API endpoint from /api/predict to /api/prediction
|
||||
const response = await axios.post('/api/prediction', payload)
|
||||
if (response.data.status === 'success') {
|
||||
// The backend response may have history_data and prediction_data at the top level
|
||||
predictionResult.value = response.data.data
|
||||
ElMessage.success('预测完成！')
|
||||
dialogVisible.value = true
|
||||
await nextTick()
|
||||
renderChart()
|
||||
} else {
|
||||
ElMessage.error(response.data.error || '预测失败')
|
||||
}
|
||||
} catch (error)
|
||||
{
|
||||
} catch (error) {
|
||||
ElMessage.error(error.response?.data?.error || '预测请求失败')
|
||||
} finally {
|
||||
predicting.value = false
|
||||
predicting[model.model_id] = false
|
||||
}
|
||||
}
|
||||
|
||||
@ -258,7 +218,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]))
|
||||
@ -315,7 +275,7 @@ const renderChart = () => {
|
||||
title: {
|
||||
display: true,
|
||||
text: `${predictionResult.value.product_name} - 销量预测趋势图`,
|
||||
color: '#ffffff',
|
||||
color: '#303133',
|
||||
font: {
|
||||
size: 20,
|
||||
weight: 'bold',
|
||||
@ -324,7 +284,7 @@ const renderChart = () => {
|
||||
subtitle: {
|
||||
display: true,
|
||||
text: subtitleText,
|
||||
color: '#6c757d',
|
||||
color: '#606266',
|
||||
font: {
|
||||
size: 14,
|
||||
},
|
||||
@ -337,7 +297,7 @@ const renderChart = () => {
|
||||
x: {
|
||||
title: {
|
||||
display: true,
|
||||
text: '日期 (日)'
|
||||
text: '日期'
|
||||
},
|
||||
grid: {
|
||||
display: false
|
||||
@ -360,14 +320,11 @@ const renderChart = () => {
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchModels()
|
||||
fetchModelTypes()
|
||||
const today = new Date()
|
||||
form.start_date = today.toISOString().split('T')[0]
|
||||
})
|
||||
|
||||
watch([() => form.product_id, () => form.model_type], () => {
|
||||
fetchAvailableVersions()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@ -379,15 +336,11 @@ watch([() => form.product_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;
|
||||
.filters-section, .global-settings-section, .model-list-section {
|
||||
margin-top: 20px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #ebeef5;
|
||||
}
|
||||
.filters-section h4, .global-settings-section h4, .model-list-section h4 {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.prediction-chart {
|
||||
margin-top: 20px;
|
||||
|
||||
Binary file not shown.
@ -203,6 +203,21 @@ class CustomJSONEncoder(json.JSONEncoder):
|
||||
return obj.isoformat()
|
||||
return super(CustomJSONEncoder, self).default(obj)
|
||||
|
||||
# Helper function to convert numpy types to native python types for JSON serialization
|
||||
def convert_numpy_types_for_json(obj):
|
||||
if isinstance(obj, dict):
|
||||
return {k: convert_numpy_types_for_json(v) for k, v in obj.items()}
|
||||
elif isinstance(obj, list):
|
||||
return [convert_numpy_types_for_json(item) for item in obj]
|
||||
elif isinstance(obj, (np.generic, np.floating, np.integer)):
|
||||
return obj.item()
|
||||
elif isinstance(obj, np.ndarray):
|
||||
return obj.tolist()
|
||||
elif pd.isna(obj):
|
||||
return None
|
||||
else:
|
||||
return obj
|
||||
|
||||
app = Flask(__name__)
|
||||
# 设置自定义JSON编码器
|
||||
app.json_encoder = CustomJSONEncoder
|
||||
@ -1464,7 +1479,7 @@ def predict():
|
||||
|
||||
# 调用辅助函数保存结果
|
||||
save_prediction_result(
|
||||
prediction_result=prediction_result,
|
||||
prediction_result=prediction_result.copy(),
|
||||
product_id=product_id or store_id or 'global',
|
||||
product_name=product_name_to_save,
|
||||
model_type=model_type,
|
||||
@ -2165,9 +2180,12 @@ def list_models():
|
||||
for i, model in enumerate(formatted_models):
|
||||
logger.info(f"[API] 模型 {i+1}: id='{model.get('model_id', 'EMPTY')}', filename='{model.get('filename', 'MISSING')}'")
|
||||
|
||||
# Manually convert numpy types to prevent JSON serialization errors
|
||||
processed_models = convert_numpy_types_for_json(formatted_models)
|
||||
|
||||
return jsonify({
|
||||
"status": "success",
|
||||
"data": formatted_models,
|
||||
"status": "success",
|
||||
"data": processed_models,
|
||||
"pagination": pagination
|
||||
})
|
||||
except Exception as e:
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
### 根目录启动
|
||||
`uv pip install loguru numpy pandas torch matplotlib flask flask_cors flask_socketio flasgger scikit-learn tqdm pytorch_tcn pyarrow`
|
||||
`uv pip install loguru numpy pandas torch matplotlib flask flask_cors flask_socketio flasgger scikit-learn tqdm pytorch_tcn pyarrow xgboost`
|
||||
|
||||
### UI
|
||||
`npm install` `npm run dev`
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user