预测界面修改，添加模型列表，分页

UI/src/views/prediction/ProductPredictionView.vue

@@ -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">
+      <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">
+            <ProductSelector
-            <el-col :span="8">
+              v-model="filters.product_id"
-              <el-form-item label="目标药品">
+              :show-all-option="true"
-                <ProductSelector 
+              all-option-label="所有药品"
-                  v-model="form.product_id"
+            />
-                  @change="handleProductChange"
+          </el-form-item>
-                  :show-all-option="false"
+          <el-form-item label="算法类型">
-                />
+            <el-select v-model="filters.model_type" placeholder="所有类型" clearable>
-              </el-form-item>
+              <el-option
-            </el-col>
+                v-for="item in modelTypes"
-            <el-col :span="8">
+                :key="item.id"
-              <el-form-item label="算法类型">
+                :label="item.name"
-                <el-select
+                :value="item.id"
-                  v-model="form.model_type"
+              />
-                  placeholder="选择算法"
+            </el-select>
-                  @change="handleModelTypeChange"
+          </el-form-item>
-                  style="width: 100%"
+          <el-form-item label="预测天数">
-                  :disabled="!form.product_id"
+            <el-input-number v-model="form.future_days" :min="1" :max="365" />
-                >
+          </el-form-item>
-                  <el-option
+          <el-form-item label="历史天数">
-                    v-for="item in modelTypes"
+            <el-input-number v-model="form.history_lookback_days" :min="7" :max="365" />
-                    :key="item.id"
+          </el-form-item>
-                    :label="item.name"
+          <el-form-item label="起始日期">
-                    :value="item.id"
+            <el-date-picker
-                  />
+              v-model="form.start_date"
-                </el-select>
+              type="date"
-              </el-form-item>
+              placeholder="选择日期"
-            </el-col>
+              format="YYYY-MM-DD"
-          </el-row>
+              value-format="YYYY-MM-DD"
-
+              :clearable="false"
-          <el-row :gutter="20" v-if="form.model_type">
+            />
-            <el-col :span="5">
+          </el-form-item>
-              <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>
         </el-form>
       </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="product_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>
     </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">
         <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 modelsLoading = ref(false)
-const versionsLoading = ref(false)
+const predicting = reactive({})
-const predicting = ref(false)
+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(() => {
+const filters = reactive({
-  return form.product_id && form.model_type && form.version
+  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 () => {
+const fetchModels = async () => {
-  if (!form.product_id || !form.model_type) {
+  modelsLoading.value = true
-    availableVersions.value = []
-    return
-  }
   try {
-    versionsLoading.value = true
+    const response = await axios.get('/api/models', { params: { training_mode: 'product' } })
-    const url = `/api/models/${form.product_id}/${form.model_type}/versions`
-    const response = await axios.get(url)
     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) {
-    availableVersions.value = []
+    ElMessage.error('获取模型列表失败')
   } finally {
-    versionsLoading.value = false
+    modelsLoading.value = false
   }
 }
 
-const handleProductChange = () => {
+const startPrediction = async (model) => {
-  form.model_type = ''
+  predicting[model.model_id] = true
-  form.version = ''
-  availableVersions.value = []
-}
-
-const handleModelTypeChange = () => {
-  form.version = ''
-  fetchAvailableVersions()
-}
-
-const startPrediction = async () => {
   try {
-    predicting.value = true
     const payload = {
-      product_id: form.product_id,
+      product_id: model.product_id,
-      model_type: form.model_type,
+      model_type: model.model_type,
-      version: form.version,
+      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 {
+.filters-section, .global-settings-section, .model-list-section {
-  margin-bottom: 16px;
-}
-.prediction-actions {
-  display: flex;
-  justify-content: center;
   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;

server/api.py

@@ -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", 
+            "status": "success",
-            "data": formatted_models,
+            "data": processed_models,
             "pagination": pagination
         })
     except Exception as e:

xz修改记录日志和启动依赖.md

@@ -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`