From 1d63829ed6382b39df9d3c374ddc19575d893d5b Mon Sep 17 00:00:00 2001
From: lbw_9527443 <780139497@qq.com>
Date: Fri, 12 Sep 2025 17:19:41 +0800
Subject: [PATCH] =?UTF-8?q?fix(CustomerDetail):=20=E7=A7=BB=E9=99=A4SOP?=
 =?UTF-8?q?=E5=88=86=E6=9E=90=E6=8C=89=E9=92=AE=E7=9A=84=E5=8A=A0=E8=BD=BD?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E9=99=90=E5=88=B6=E5=B9=B6=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?API=E5=9C=B0=E5=9D=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

refactor(RawDataCards): 重构通话记录卡片布局并添加时间格式化功能

- 在CustomerDetail组件中，简化SOP分析按钮的状态逻辑并更新API地址
- 在RawDataCards组件中，重新设计操作按钮布局，添加时间显示功能并优化样式
---
 .../person/components/CustomerDetail.vue      |  6 +-
 .../views/person/components/RawDataCards.vue  | 73 +++++++++++++++----
 2 files changed, 63 insertions(+), 16 deletions(-)

diff --git a/my-vue-app/src/views/person/components/CustomerDetail.vue b/my-vue-app/src/views/person/components/CustomerDetail.vue
index 9451300..f427b7e 100644
--- a/my-vue-app/src/views/person/components/CustomerDetail.vue
+++ b/my-vue-app/src/views/person/components/CustomerDetail.vue
@@ -15,9 +15,9 @@
           <button 
             @click="startSopAnalysis" 
             class="analysis-button sop-button"
-            :disabled="isSopAnalysisLoading || !hasCallData"
+            :disabled="!hasCallData"
           >
-            {{ isSopAnalysisLoading ? 'SOP分析中...' : (hasCallData ? 'SOP通话分析' : '暂无通话数据') }}
+            {{ hasCallData ? 'SOP通话分析' : '暂无通话数据'}}
           </button>
           <!-- <button 
             @click="startDemandAnalysis" 
@@ -363,7 +363,7 @@ ${callData.length > 0 && callData[0].record_context ? callData[0].record_context
     //     console.log('SOP通话分析完成');
     //   }
     // );
-    const res= await axios.get('http://192.168.3.112:6002/api/v1/call',
+    const res= await axios.get('https://analysis.api.nycjy.cn/api/v1/call',
     {
       params:{
         wechat_id:props.selectedContact.wechat_id
diff --git a/my-vue-app/src/views/person/components/RawDataCards.vue b/my-vue-app/src/views/person/components/RawDataCards.vue
index b63fbbb..ac79189 100644
--- a/my-vue-app/src/views/person/components/RawDataCards.vue
+++ b/my-vue-app/src/views/person/components/RawDataCards.vue
@@ -93,14 +93,19 @@
                       <span class="call-duration">客户: {{ call.customer_name }}</span>
                     </div>
                     <div class="call-actions">
-                      <button class="action-btn download-btn" @click="downloadRecording(call)">
-                        <i class="icon-download"></i>
-                        录音下载
-                      </button>
-                      <button class="action-btn view-btn" @click="viewTranscript(call)">
-                        <i class="icon-view"></i>
-                        查看原文
-                      </button>
+                      <div class="action-buttons">
+                        <button class="action-btn download-btn" @click="downloadRecording(call)">
+                          <i class="icon-download"></i>
+                          录音下载
+                        </button>
+                        <button class="action-btn view-btn" @click="viewTranscript(call)">
+                          <i class="icon-view"></i>
+                          查看原文
+                        </button>
+                      </div>
+                      <div class="call-time-info">
+                        <span class="call-duration">{{ formatDateTime(call.record_create_time) }}</span>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -278,6 +283,26 @@ const viewTranscript = async (call) => {
     alert('该通话记录暂无原文内容')
   }
 }
+
+// 时间格式化方法
+const formatDateTime = (dateTimeString) => {
+  if (!dateTimeString) return '暂无时间'
+  
+  try {
+    const date = new Date(dateTimeString)
+    const year = date.getFullYear()
+    const month = String(date.getMonth() + 1).padStart(2, '0')
+    const day = String(date.getDate()).padStart(2, '0')
+    const hours = String(date.getHours()).padStart(2, '0')
+    const minutes = String(date.getMinutes()).padStart(2, '0')
+    const seconds = String(date.getSeconds()).padStart(2, '0')
+    
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+  } catch (error) {
+    console.error('时间格式化错误:', error)
+    return dateTimeString
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -531,17 +556,25 @@ const viewTranscript = async (call) => {
     
     .call-actions {
       display: flex;
-      gap: 12px;
+      justify-content: space-between;
+      align-items: center;
       margin-top: 12px;
+      padding-top: 8px;
+      border-top: 1px solid #f3f4f6;
+      
+      .action-buttons {
+        display: flex;
+        gap: 8px;
+      }
       
       .action-btn {
         display: flex;
         align-items: center;
         gap: 6px;
-        padding: 8px 12px;
+        padding: 6px 10px;
         border: none;
         border-radius: 6px;
-        font-size: 12px;
+        font-size: 11px;
         font-weight: 500;
         cursor: pointer;
         transition: all 0.2s ease;
@@ -553,6 +586,7 @@ const viewTranscript = async (call) => {
           &:hover {
             background: #bfdbfe;
             transform: translateY(-1px);
+            box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
           }
         }
         
@@ -563,12 +597,13 @@ const viewTranscript = async (call) => {
           &:hover {
             background: #a7f3d0;
             transform: translateY(-1px);
+            box-shadow: 0 2px 4px rgba(5, 150, 105, 0.2);
           }
         }
         
         i {
-          width: 14px;
-          height: 14px;
+          width: 12px;
+          height: 12px;
           
           &.icon-download::before {
             content: '⬇';
@@ -579,6 +614,18 @@ const viewTranscript = async (call) => {
           }
         }
       }
+      
+      .call-time-info {
+        .call-duration {
+          font-size: 11px;
+          color: #6b7280;
+          font-weight: 500;
+          background: #f9fafb;
+          padding: 4px 8px;
+          border-radius: 4px;
+          border: 1px solid #e5e7eb;
+        }
+      }
     }
   }
 }