From 08b26b5fa01ae10eee00ac183d484efe16eb8dee Mon Sep 17 00:00:00 2001
From: LYFxiaoan <lyfxinchen@163.com>
Date: Thu, 24 Jul 2025 15:16:19 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E9=A2=9C=E8=89=B2=E7=BB=9F?=
 =?UTF-8?q?=E4=B8=80=E3=80=81=E4=BF=AE=E5=A4=8D=E5=BA=97=E9=93=BA=E9=A2=84?=
 =?UTF-8?q?=E6=B5=8B=E5=9B=BE=E8=A1=A8=E6=A0=87=E9=A2=98=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E9=94=99=E8=AF=AF=E3=80=81=E7=BB=9F=E4=B8=80=E6=A8=A1=E5=9E=8B?=
 =?UTF-8?q?=E6=97=B6=E9=97=B4=E6=98=BE=E7=A4=BA=E6=A0=BC=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/prediction/GlobalPredictionView.vue |  39 +++++++++++++++---
 .../prediction/ProductPredictionView.vue      |  39 +++++++++++++++---
 .../views/prediction/StorePredictionView.vue  |  39 +++++++++++++++---
 lyf开发日志记录文档.md                        |  27 ++++++++++++
 prediction_history.db                         | Bin 167936 -> 167936 bytes
 server/api.py                                 |  22 +++++++++-
 6 files changed, 147 insertions(+), 19 deletions(-)

diff --git a/UI/src/views/prediction/GlobalPredictionView.vue b/UI/src/views/prediction/GlobalPredictionView.vue
index abd4fcf..d7e221e 100644
--- a/UI/src/views/prediction/GlobalPredictionView.vue
+++ b/UI/src/views/prediction/GlobalPredictionView.vue
@@ -47,7 +47,7 @@
         <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 prop="created_at" label="创建时间" :formatter="formatDateTime" />
           <el-table-column label="操作">
             <template #default="{ row }">
               <el-button
@@ -136,6 +136,20 @@ const handlePageChange = (page) => {
   pagination.currentPage = page
 }
 
+const formatDateTime = (row, column, cellValue) => {
+  if (!cellValue) return ''
+  const date = new Date(cellValue)
+  return date.toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false
+  }).replace(/\//g, '-')
+}
+
 const fetchModelTypes = async () => {
   try {
     const response = await axios.get('/api/model_types')
@@ -263,10 +277,15 @@ const renderChart = () => {
       responsive: true,
       maintainAspectRatio: false,
       plugins: {
+        legend: {
+          labels: {
+            color: 'white' // 图例文字颜色
+          }
+        },
         title: {
           display: true,
           text: `全局模型 (${predictionResult.value.model_type}) - 销量预测趋势图`,
-          color: '#303133',
+          color: 'white',
           font: {
             size: 20,
             weight: 'bold',
@@ -275,7 +294,7 @@ const renderChart = () => {
         subtitle: {
             display: true,
             text: subtitleText,
-            color: '#606266',
+            color: 'white',
             font: {
               size: 14,
             },
@@ -288,7 +307,11 @@ const renderChart = () => {
         x: {
           title: {
             display: true,
-            text: '日期'
+            text: '日期',
+            color: 'white'
+          },
+          ticks: {
+            color: 'white' // X轴刻度文字颜色
           },
           grid: {
             display: false
@@ -297,10 +320,14 @@ const renderChart = () => {
         y: {
           title: {
             display: true,
-            text: '销量'
+            text: '销量',
+            color: 'white'
+          },
+          ticks: {
+            color: 'white' // Y轴刻度文字颜色
           },
           grid: {
-            color: '#e9e9e9',
+            color: 'rgba(255, 255, 255, 0.2)', // 网格线颜色
             drawBorder: false,
           },
           beginAtZero: true
diff --git a/UI/src/views/prediction/ProductPredictionView.vue b/UI/src/views/prediction/ProductPredictionView.vue
index 47a76a0..45530cc 100644
--- a/UI/src/views/prediction/ProductPredictionView.vue
+++ b/UI/src/views/prediction/ProductPredictionView.vue
@@ -56,7 +56,7 @@
           <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 prop="created_at" label="创建时间" :formatter="formatDateTime" />
           <el-table-column label="操作">
             <template #default="{ row }">
               <el-button
@@ -146,6 +146,20 @@ const handlePageChange = (page) => {
   pagination.currentPage = page
 }
 
+const formatDateTime = (row, column, cellValue) => {
+  if (!cellValue) return ''
+  const date = new Date(cellValue)
+  return date.toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false
+  }).replace(/\//g, '-')
+}
+
 const fetchModelTypes = async () => {
   try {
     const response = await axios.get('/api/model_types')
@@ -273,10 +287,15 @@ const renderChart = () => {
       responsive: true,
       maintainAspectRatio: false,
       plugins: {
+        legend: {
+          labels: {
+            color: 'white' // 图例文字颜色
+          }
+        },
         title: {
           display: true,
           text: `${predictionResult.value.product_name} - 销量预测趋势图`,
-          color: '#303133',
+          color: 'white',
           font: {
             size: 20,
             weight: 'bold',
@@ -285,7 +304,7 @@ const renderChart = () => {
         subtitle: {
             display: true,
             text: subtitleText,
-            color: '#606266',
+            color: 'white',
             font: {
               size: 14,
             },
@@ -298,7 +317,11 @@ const renderChart = () => {
         x: {
           title: {
             display: true,
-            text: '日期'
+            text: '日期',
+            color: 'white'
+          },
+          ticks: {
+            color: 'white' // X轴刻度文字颜色
           },
           grid: {
             display: false
@@ -307,10 +330,14 @@ const renderChart = () => {
         y: {
           title: {
             display: true,
-            text: '销量'
+            text: '销量',
+            color: 'white'
+          },
+          ticks: {
+            color: 'white' // Y轴刻度文字颜色
           },
           grid: {
-            color: '#e9e9e9',
+            color: 'rgba(255, 255, 255, 0.2)', // 网格线颜色
             drawBorder: false,
           },
           beginAtZero: true
diff --git a/UI/src/views/prediction/StorePredictionView.vue b/UI/src/views/prediction/StorePredictionView.vue
index 25aad44..06dabf3 100644
--- a/UI/src/views/prediction/StorePredictionView.vue
+++ b/UI/src/views/prediction/StorePredictionView.vue
@@ -56,7 +56,7 @@
           <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 prop="created_at" label="创建时间" :formatter="formatDateTime" />
           <el-table-column label="操作">
             <template #default="{ row }">
               <el-button
@@ -161,6 +161,20 @@ const handlePageChange = (page) => {
   pagination.currentPage = page
 }
 
+const formatDateTime = (row, column, cellValue) => {
+  if (!cellValue) return ''
+  const date = new Date(cellValue)
+  return date.toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false
+  }).replace(/\//g, '-')
+}
+
 const fetchModelTypes = async () => {
   try {
     const response = await axios.get('/api/model_types')
@@ -300,10 +314,15 @@ const renderChart = () => {
       responsive: true,
       maintainAspectRatio: false,
       plugins: {
+        legend: {
+          labels: {
+            color: 'white' // 图例文字颜色
+          }
+        },
         title: {
           display: true,
           text: `${predictionResult.value.store_name} - 销量预测趋势图`,
-          color: '#303133',
+          color: 'white',
           font: {
             size: 20,
             weight: 'bold',
@@ -312,7 +331,7 @@ const renderChart = () => {
         subtitle: {
             display: true,
             text: subtitleText,
-            color: '#606266',
+            color: 'white',
             font: {
               size: 14,
             },
@@ -325,7 +344,11 @@ const renderChart = () => {
         x: {
           title: {
             display: true,
-            text: '日期'
+            text: '日期',
+            color: 'white'
+          },
+          ticks: {
+            color: 'white' // X轴刻度文字颜色
           },
           grid: {
             display: false
@@ -334,10 +357,14 @@ const renderChart = () => {
         y: {
           title: {
             display: true,
-            text: '销量'
+            text: '销量',
+            color: 'white'
+          },
+          ticks: {
+            color: 'white' // Y轴刻度文字颜色
           },
           grid: {
-            color: '#e9e9e9',
+            color: 'rgba(255, 255, 255, 0.2)', // 网格线颜色
             drawBorder: false,
           },
           beginAtZero: true
diff --git a/lyf开发日志记录文档.md b/lyf开发日志记录文档.md
index 6f1bafd..a35e9e4 100644
--- a/lyf开发日志记录文档.md
+++ b/lyf开发日志记录文档.md
@@ -324,3 +324,30 @@
     2.  **修正数据访问**: 在 `startPrediction` 方法中，将API响应的核心数据 `response.data.data` 赋值给 `predictionResult`。
     3.  **标准化日期**: 在 `renderChart` 方法的开头，增加了一个 `formatDate` 辅助函数，并在处理数据时立即调用它，将所有日期都统一转换为 `'YYYY-MM-DD'` 格式的字符串，从而一举解决了数据点丢失和标题格式错误的双重问题。
 - **最终结论**: 至此，所有预测视图的前后端数据链路和UI展示功能均已修复，系统功能恢复正常。
+
+
+---
+
+## 2025-07-24：UI/UX 优化与后端逻辑统一
+**开发者**: Roo (AI Assistant) & lyf
+
+### 14:30 - 统一预测图表颜色风格
+- **任务**: 根据用户反馈，将所有预测结果图表的文字颜色（包括标题、副标题、图例、坐标轴）统一修改为白色，以适应深色UI背景。
+- **实施**:
+    - 逐一修改了 `ProductPredictionView.vue`, `StorePredictionView.vue`, 和 `GlobalPredictionView.vue`。
+    - 在 `Chart.js` 的 `options` 配置中，将所有相关的 `color` 属性设置为 `'white'`，并将网格线颜色调整为半透明白色 `rgba(255, 255, 255, 0.2)`。
+
+### 14:50 - 修复“按店铺预测”图表标题显示错误
+- **问题**: “按店铺预测”的图表标题显示为 `undefined`。
+- **根本原因**: 后端 `server/api.py` 在处理店铺预测时，没有查询并返回真实的店铺名称，导致前端无法获取该数据。
+- **修复方案 (后端优先)**:
+    1.  在 `server/api.py` 中新增了 `get_store_name` 辅助函数，用于根据 `store_id` 查询店铺名称。
+    2.  修改了 `/api/prediction` 接口，在 `training_mode` 为 `'store'` 时，调用新函数获取店铺名，并将其以 `store_name` 字段返回给前端。
+- **结论**: 通过统一后端逻辑，确保了数据源的正确性，从根本上解决了问题。
+
+### 15:05 - 统一模型列表时间显示格式
+- **任务**: 根据用户要求，将所有预测页面模型列表中的“创建时间”从ISO格式统一为 `YYYY-MM-DD HH:MM:SS` 的24小时制格式。
+- **实施**:
+    - 逐一修改了 `ProductPredictionView.vue`, `StorePredictionView.vue`, 和 `GlobalPredictionView.vue`。
+    - 在 `<script setup>` 中添加了 `formatDateTime` 辅助函数。
+    - 在 `<el-table-column>` 中使用 `:formatter="formatDateTime"` 属性来应用该格式化函数，实现了UI显示的统一。
diff --git a/prediction_history.db b/prediction_history.db
index 64b4d8102e34fb1b4dc79b138c3fceb344566fc2..fe92e74ca6ab194855e6b6fda215f8aad06174a2 100644
GIT binary patch
delta 6858
zcmdT}TWB2D8J5N}a(8!jB>5t_wk+APU9IgIpZjHviBn2k=tJUyAA(Dyxow(Q(&{d`
z5M;SgLklH#*X|^5CN*jEU^}X5UHZ_6_MrqyAQakC2*d^1F>N1AFE1rc|1&Ek5^Gr#
z=!1pOvYP)t|2h9R|Lr?Ee>HdhYVP7Ld#<UesRX|{_}zA?Pd3jj3|w>e<ehinK~s<O
zALrlB1LtqfJ?AgZ2hN|I-#hO)?=H-pwr)*#eBIs#I=$2Iv2P4MN>%vi8?1fM^QEu!
z=00r7|G~MDe<k;!le142e^EH){IT%6;x_x&&b<AG{nz}NLSOz9huVAWk>Z`gxAI>o
z{3uU~mEv*d8~N*ne-&T5g?nGm&Gv0N-HZZ?sKnakGOoC+qP43O6RspER5J9DX7rp<
z3@PVA`4t!WMlt5X^}`UmNa;W_NtMK6CRG$cglG`B)Q>=sMZ{HMDBPG~P6E!ukcZPo
zaaL*?OB5*AN0PYA=dr7B0P2CLsL-dpBJfmtNZ*&Cl+5Kgj$B5xa05j&d`MoAek>yz
zO&Z16_m!%Ip{o&W%SaHq0ftk6UJx_wBSON7)FRf=tj{EJeeN@tabLPB(#)kw3nT(R
zh%^~Dnkovk_HpE*h#S9A>;|DmZVcN*l1m(NG-ecK$eEHNaD7H$Z%qPM30R^l6~#gx
zV5;I#qewUp6xg4215P!Zk_tcwBR4d*z(Yp48Znw7qP|}V1D6XBGk7PiVpzCg%(;)^
zN(F^+HB}S=4QUj+Bnm-M6SFNiA2Ak7>~k!!8a9e7q(m{sT}?<8{MLY#k3$B|BO-~$
zksrw+qgg>LLKsUIafl8kD1b^ZEJ0E*Dk6fk8Z?SJKuBsGxKhO2WufM7AhiNa8B#<=
zaS)2LMlqS2w)Wqux)(c|&;9g7OK)Fq;X;!$;^c}S+5feFV<)z-3x$6a{#>|GxMDwJ
zzhl2*j~0GgxKL{w=xVVKIDdz*Ef;1xTDm)%u|$Ybg@*>mCx*^-wRAtxj4=ElLMO)j
z;qgj!Y$zU^SxYe8Xk=<F-O1I0GoP8CSS|TXFy7X(v$Oey!D`?SrY9U*OLKH@OE>@2
zo7(8`w!x9cvsD`(4X<T!s8M%tE#0%V-r>EsJ|4>L+q@Mj%${!-F5WI&Z2spnKe*bm
z#mc?eWFO1D38?=tH#@)MTzk{$?vtHI_clNEozeF8?Q^@b6p!T>wRrojdlxQ$bn};s
z*RR~4zj5!oulC)4_0rv&wZ*q@mr{(DHT%=Q`lkp%gu6((gtd~S99nssmk}*f?kPw$
zoxJw6b);Q*LQ~18L|ih>F{#b%*^xY3v^v|RhnT`hV#pjUq?Sfh`_)z>VTy1hVUd7x
zCsRo>a1s^?Pl7ECsjM+aRO7@yXu0Mw=n0~@ri{VrbeoY<x(!wc_EwtW)L1g=zzWzy
zf&ngsWEiR_tMzx61~Qae@1^nT@cfr&4BX>Se9gc;nZli=1Sjw9w~ifHkpklr)v>sL
zIXC)ONRkr=tlh;FQY<|oFnF9?eA+r(pp1GP3&prZ$x+ApVjWM)ln1p#0H~T$uGuo4
z4&~SbKrv-RO3ISngBG&Eb&pa(;UQ7UlLZSGsX(4m0t>){@}#){rVWN|loO9ZM#HWG
zVJ;HvSe?oBlGW8tIR)DY-U*oDMt1W_s{~Q7ZaYeWv>~oHThBGw$8$5SKij<9dTwFv
zq^0IhOxN)}xdPt|oh!w6=L!^8<6E2Fb<jj9DZ{BvJc{JfKI_OvKy)^P_w~@+G1X8B
zvb6H${9dCH?0!@!NW9SMtOLuq2dRu%3hc&8|2{tpPIZt^Og6+P$}k3Hh|fGLb6lp(
zlbj|!GnV&QMJJSk)%jj~zWZ?h`t#pX)tqRknptMT&s#NZfDn~2_pmS>!Zf1C3dDyM
zO~)z?WEhW^qHnx0`e0;UZ(`06eZ>?yL_J|h1AqJ)&cg!mP+tb;Q{=8$ZAH^^Hd#GQ
ztuM9w*y>rBYq!2Rzj+J*-HAJ?X*Y4&&a*I!`Utr=|C7aq^Y<^GU%Y(d?v;1$e*Z=~
zBGrZc<C8<nBNMLINmgdM%!tP!mqZ$!MT)fautowvhi;4<YiHWjow@*6kCsH#8*i7H
zksi9jOh^wGL{?{Rc@IXC=KavwtI)m+OApENwq0pgU)oluk1^rNCk5;9^Xn3=rQjTG
z2+l0zD_d{^as<OP#2`F3MsSv9vv{9EcWLWLhZ*AeDHDb-x3?!x&Fxy|qmQDakL=y8
zOJjWP{f@59DJx6bj#)dBL!q?`(j5@R*dtUEnWp=ZHsnzz2v<-&83$5XyR*BqK4M}J
zaU>`ZR;mQBRwIIN>}odx4x_n%@sUeHJ{{Rp5fE?0U=5>Mv--&1VQguw3CyH0o5Jq(
zB`|NAB`|FgQ-VMPI3ugi?68C(u#ct090)8<PPJIwZ5aMYsRRLIa6OPbc)>zP5sa#c
zz`ciJ3a$-~^zIw!pYjJM<9+2`<ROHBmtdwiGV`xOwUO=H+X#%kQc!`hg7ZLxeeaM}
zo`r)-g%nl-$O1(IObx}+i~cZJGG46q&PZQe7Olcj8IeCzU$xp1kc>}6^^<`Uz~UL#
zz-VBe*RvoT#Y=l}ATe++f)ED&C5?nG+XIgnM;a3#HsWOvMgF<|>Qp?|4_`p(40sK`
z0w9L?Be<r~^oW6i0bM|d1KN;R6gD+aDbO!~Llg8>seyeEa2t6544g|M(8EMCMp6Ta
z5?BkQ0b-RBkfgdm-r%j9V4)a}O=WUZSng5;-VxUO^{=;jyWVJSF)$_zo^>3)!FzpB
z{{|!kAGO{pWyygwgMQv?wLF{KWVJQ54z|2)wJpq97I5Q1Q;}A2<1F_lkIbsi%Z*u?
zK(1jA0v@>W-kFWYjr;s8kS%q9vke^}%QaNC4gfGh2VfZ3=tk)Pr7Yg3(A^%Kwk~g}
zk0@L6h817il3$qnxD|r9+7QH9E+GG(K@8o3vNB>G+!_eTO>-Nufhb;jGclXt(zYJO
zJBAwp&v22u4&dwaXoE5>Gvq<_1SY*9Q69(u)KaY&YN!<}Z^75P1kX?_fCU1MlzPy6
Z7)nd-W6lC=H+xEbEB*zrmh&lc{{z@Y*zf=V

delta 226
zcmZozz}2vTYl1Xy5d#B*CJ=K0vBX3TbH<{L2}}6J*!k}Q1sF8=fAfFi|H%J_|2h97
z{<|9+W0^LWFG}N`d{<swO_0}}fqxx87q2_t4*u(WBD{zATX|>lzUDXPE#P~|m&Rwy
zAH&zbS<pb1ck%-*mg$Y<Oe&l6btechW^Hm{QQ#5ey~Ds?z|Y0^g7@EKodgLc{<lEI
zn|LQH<SB0co6DudDh_mlW;4%(?K~40zxXc}*q|_J0qa&)rr-RF88-+3+1ptanEv~-
XF|y|{u;*-SOk&@jQ_eJn10)LoTRcSE

diff --git a/server/api.py b/server/api.py
index 27702b2..34cce8e 100644
--- a/server/api.py
+++ b/server/api.py
@@ -1389,7 +1389,9 @@ def predict():
             if not store_id:
                 return jsonify({"status": "error", "error": "店铺模式需要 store_id"}), 400
             model_identifier = f"store_{store_id}"
-            product_name = f"店铺 {store_id} 整体"
+            # 修复：调用 get_store_name 获取真实的店铺名称
+            store_name = get_store_name(store_id) or f"店铺 {store_id}"
+            product_name = store_name # 保持product_name字段用于日志和历史记录
         else:  # 默认为 'product' 模式
             if not product_id:
                 return jsonify({"status": "error", "error": "药品模式需要 product_id"}), 400
@@ -1466,6 +1468,10 @@ def predict():
             'prediction_data': prediction_result.get('prediction_data', [])
         }
         
+        # 修复：如果是在店铺模式下，确保返回结果中包含 store_name
+        if training_mode == 'store':
+            response_data['data']['store_name'] = store_name
+        
         # 调试日志
         print("=== 预测API响应数据结构 (v3) ===")
         print(f"history_data 长度: {len(response_data['history_data'])}")
@@ -2556,6 +2562,20 @@ def get_product_name(product_id):
     except Exception as e:
         print(f"获取产品名称失败: {str(e)}")
         return None
+# 获取店铺名称的辅助函数
+def get_store_name(store_id):
+    """根据店铺ID获取店铺名称"""
+    try:
+        from utils.multi_store_data_utils import get_available_stores
+        stores = get_available_stores()
+        for store in stores:
+            if store['store_id'] == store_id:
+                return store['store_name']
+        return None
+    except Exception as e:
+        print(f"获取店铺名称失败: {str(e)}")
+        return None
+
 
 # run_prediction 函数已被移除，因为其逻辑已完全整合到 /api/prediction 路由处理函数中