From 575a08ed3ad2046bafdebb5c9feeee89e4ff481c Mon Sep 17 00:00:00 2001
From: lbw_9527443 <780139497@qq.com>
Date: Fri, 10 Oct 2025 21:56:02 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E4=BC=9A=E5=91=98=E8=AF=A6=E6=83=85):=20?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=BA=8C=E9=98=B6=E5=88=86=E6=9E=90=E6=8A=A5?=
 =?UTF-8?q?=E5=91=8A=E5=8A=9F=E8=83=BD=E5=B9=B6=E4=BC=98=E5=8C=96=E6=8C=87?=
 =?UTF-8?q?=E5=AF=BC=E5=BB=BA=E8=AE=AE=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

重构会员详情组件，添加二阶分析报告功能，包括周期切换和报告加载状态显示。优化指导建议部分的布局结构，将分析报告与原有指导建议分开显示。调整样式以提升用户体验，并修复部分代码格式问题。
---
 my-vue-app/src/api/manager.js                 |   2 +-
 .../maneger/components/MemberDetails.vue      | 293 +++++++++++++-----
 2 files changed, 217 insertions(+), 78 deletions(-)

diff --git a/my-vue-app/src/api/manager.js b/my-vue-app/src/api/manager.js
index 0728b45..4f60bd4 100644
--- a/my-vue-app/src/api/manager.js
+++ b/my-vue-app/src/api/manager.js
@@ -45,7 +45,7 @@ export const getGroupCallDuration = (params) => {
   return https.post('/api/v1/manager/group_call_duration', params)
 }
 // 二二阶分析报告   /api/v1/sales/get_call_text
-export const getSecondOrderAnalysisReport = (params) => {
+export const GetSecondOrderAnalysisReport = (params) => {
   return https.post('/api/v1/manager/group_call_text', params)
 }
 
diff --git a/my-vue-app/src/views/maneger/components/MemberDetails.vue b/my-vue-app/src/views/maneger/components/MemberDetails.vue
index 0bd6747..58fee97 100644
--- a/my-vue-app/src/views/maneger/components/MemberDetails.vue
+++ b/my-vue-app/src/views/maneger/components/MemberDetails.vue
@@ -52,38 +52,42 @@
     <div class="guidance-section">
       <div class="guidance-header" @click="toggleGuidanceCollapse">
         <h3>💡 指导建议</h3>
-              <div class="period-switcher">
-            <button @click="switchAnalysisPeriod('day')" :class="{ active: analysisPeriod === 'day' }">当日</button>
-            <button @click="switchAnalysisPeriod('camp')" :class="{ active: analysisPeriod === 'camp' }">当期</button>
-            <button @click="switchAnalysisPeriod('month')" :class="{ active: analysisPeriod === 'month' }">当月</button>
-          </div>
+        <div class="period-switcher">
+          <button @click="switchAnalysisPeriod('day')" :class="{ active: analysisPeriod === 'day' }">当日</button>
+          <button @click="switchAnalysisPeriod('camp')" :class="{ active: analysisPeriod === 'camp' }">当期</button>
+          <button @click="switchAnalysisPeriod('month')" :class="{ active: analysisPeriod === 'month' }">当月</button>
+        </div>
         <div class="collapse-toggle" :class="{ 'collapsed': isGuidanceCollapsed }">
           <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
             <path d="M8 4l4 4H4l4-4z"/>
           </svg>
         </div>
       </div>
-      <div class="guidance-cards" v-show="!isGuidanceCollapsed" :class="{ 'collapsing': isGuidanceCollapsed }">
-        <div class="guidance-card" v-if="getGuidanceForMember(memberDetails).length > 0">
-          <div class="guidance-item" v-for="(guidance, index) in getGuidanceForMember(memberDetails)" :key="index">
-            <div class="guidance-icon" :class="guidance.type">
-              {{ guidance.icon }}
-            </div>
-            <div class="guidance-content">
-              <h4 class="guidance-title">{{ guidance.title }}</h4>
-              <p class="guidance-description">{{ guidance.description }}</p>
-              <div class="guidance-action" v-if="guidance.action">
-                <span class="action-label">建议行动:</span>
-                <span class="action-text">{{ guidance.action }}</span>
+      <div class="guidance-content" v-show="!isGuidanceCollapsed" :class="{ 'collapsing': isGuidanceCollapsed }">
+        <!-- 分析报告内容 -->
+        <div class="analysis-report">
+          <div v-if="isReportLoading" class="loading">正在生成分析报告...</div>
+          <div v-else class="report-content">{{ analysisReport }}</div>
+        </div>
+        
+        <!-- 原有指导建议内容 -->
+        <div class="guidance-cards">
+          <div class="guidance-card" v-if="getGuidanceForMember(selectedMember).length > 0">
+            <div class="guidance-item" v-for="(guidance, index) in getGuidanceForMember(selectedMember)" :key="index">
+              <div class="guidance-icon" :class="guidance.type">
+                {{ guidance.icon }}
+              </div>
+              <div class="guidance-content">
+                <h4 class="guidance-title">{{ guidance.title }}</h4>
+                <p class="guidance-description">{{ guidance.description }}</p>
+                <div class="guidance-action" v-if="guidance.action">
+                  <span class="action-label">建议行动:</span>
+                  <span class="action-text">{{ guidance.action }}</span>
+                </div>
               </div>
             </div>
           </div>
         </div>
-        <div class="no-guidance" v-else>
-          <div class="celebration-icon">🎉</div>
-          <h4>表现优秀！</h4>
-          <p>{{ memberDetails?.user_name || selectedMember?.user_name || selectedMember?.name }} 的各项指标都很不错，继续保持这种状态！</p>
-        </div>
       </div>
     </div>
     
@@ -137,8 +141,10 @@
 </template>
 
 <script setup>
-import { ref, defineProps, watch, nextTick, reactive } from 'vue'
+import { ref, defineProps, watch, nextTick, reactive, onMounted } from 'vue'
 import Tooltip from '@/components/Tooltip.vue'
+import { GetSecondOrderAnalysisReport } from '@/api/manager.js'
+import { SimpleChatService } from '@/utils/ChatService.js'
 
 // 定义props
 const props = defineProps({
@@ -159,7 +165,13 @@ const isDetailsCollapsed = ref(false)
 const isGuidanceCollapsed = ref(false)
 
 // 录音列表折叠状态（默认展开）
-const isRecordingsCollapsed = ref(false)
+const isRecordingsCollapsed = ref(true)
+
+// 分析周期
+const analysisPeriod = ref('day') // 默认周期为当日
+const analysisReport = ref('') // 分析报告内容
+const isReportLoading = ref(false) // 报告加载状态
+const chatService_02 = ref(null) // 用于生成分析报告的聊天服务实例
 
 // 工具提示状态
 const tooltip = reactive({
@@ -199,6 +211,64 @@ const toggleDetailsCollapse = () => {
   isDetailsCollapsed.value = !isDetailsCollapsed.value
 }
 
+// 切换分析周期
+const switchAnalysisPeriod = (period) => {
+  analysisPeriod.value = period
+  // 切换周期后重新获取分析报告
+  CenterGetSecondOrderAnalysisReport(analysisPeriod.value )
+}
+
+// 获取二阶分析报告
+async function CenterGetSecondOrderAnalysisReport(time) {
+  // 如果聊天服务实例不存在，则创建一个新的实例
+  if (!chatService_02.value) {
+    // 注意：这里使用与PersonalDashboard.vue相同的API密钥
+    chatService_02.value = new SimpleChatService('app-MGaBOx5QFblsMZ7dSkxKJDKm')
+  }
+  
+  // 设置加载状态
+  isReportLoading.value = true
+  analysisReport.value = ''
+  
+  try {
+    // 准备请求参数
+    const params = {
+      user_name:props.memberDetails?.user_name,
+      time: time // 使用当前选择的周期
+    }
+    // 调用API获取分析报告数据
+    const response = await GetSecondOrderAnalysisReport(params)
+    
+    // 检查数据是否为空
+    if (!response.data.records || response.data.records.length === 0) {
+      console.error('数据为空')
+      analysisReport.value = '数据为空'
+      isReportLoading.value = false
+      return
+    }
+    
+    // 将记录数组转换为字符串
+    const records = response.data.records.join('\n')
+    
+    // 使用聊天服务发送消息并处理流式响应
+    chatService_02.value.sendMessage(
+      records, // 使用API返回的文本数据
+      (update) => {
+        // 实时更新报告内容
+        analysisReport.value = update.content
+      },
+      () => {
+        // 流结束时的操作
+        isReportLoading.value = false
+      }
+    )
+  } catch (error) {
+    console.error('获取二阶分析报告失败:', error)
+    analysisReport.value = '获取分析报告失败，请稍后重试。'
+    isReportLoading.value = false
+  }
+}
+
 // 切换指导建议折叠状态
 const toggleGuidanceCollapse = () => {
   isGuidanceCollapsed.value = !isGuidanceCollapsed.value
@@ -339,20 +409,24 @@ const getGuidanceForMember = (member) => {
   return guidance.slice(0, 3) // 最多显示3个建议
 }
 
-// 监听selectedMember变化，重置滚动条位置
-watch(() => props.selectedMember, () => {
-  nextTick(() => {
-    // 获取member-details容器元素并重置滚动位置
-    const memberDetailsEl = document.querySelector('.member-details')
-    if (memberDetailsEl) {
-      // 使用平滑滚动动画
-      memberDetailsEl.scrollTo({
-        top: 0,
-        behavior: 'smooth'
-      })
-    }
-  })
-}, { immediate: false })
+// 监听selectedMember变化
+watch(() => props.selectedMember, (newMember) => {
+  if (newMember) {
+    // 重置滚动位置
+    nextTick(() => {
+      const container = document.querySelector('.member-details')
+      if (container) {
+        container.scrollTop = 0
+      }
+    })
+  }
+})
+
+// 组件挂载时初始化分析报告
+onMounted(() => {
+  // 初始化时获取当日的分析报告
+  CenterGetSecondOrderAnalysisReport()
+})
 </script>
 
 <style lang="scss" scoped>
@@ -698,12 +772,69 @@ watch(() => props.selectedMember, () => {
   }
 }
 
+// 分析报告样式
+.analysis-report {
+  background: #f8fafc;
+  border-radius: 8px;
+  padding: 1rem;
+  margin-bottom: 1.25rem;
+  border: 1px solid #e2e8f0;
+  min-height: 100px;
+  
+  .loading {
+    text-align: center;
+    color: #64748b;
+    font-style: italic;
+    padding: 1rem;
+  }
+  
+  .report-content {
+    white-space: pre-wrap;
+    line-height: 1.5;
+    color: #1e293b;
+    font-size: 0.9rem;
+  }
+}
+
 .guidance-cards {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
 }
 
+// 周期切换按钮样式
+.period-switcher {
+  display: flex;
+  gap: 0.5rem;
+  margin-left: auto;
+  
+  button {
+    padding: 0.25rem 0.75rem;
+    border: 1px solid #cbd5e1;
+    background: white;
+    border-radius: 16px;
+    font-size: 0.85rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    
+    &:hover {
+      background: #f1f5f9;
+      border-color: #94a3b8;
+    }
+    
+    &.active {
+      background: #3b82f6;
+      color: white;
+      border-color: #3b82f6;
+      
+      &:hover {
+        background: #2563eb;
+        border-color: #2563eb;
+      }
+    }
+  }
+}
+
 .guidance-card {
   background: white;
   border-radius: 8px;
@@ -911,47 +1042,55 @@ watch(() => props.selectedMember, () => {
   }
   
   // 指导建议适配
-  .guidance-section {
-    margin-top: 1rem;
-    
-    .guidance-header {
-      h3 {
-        font-size: 1rem;
-      }
-    }
-    
-    .guidance-item {
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 0.5rem;
-      padding: 0.5rem 0;
-      
-      .guidance-icon {
-        width: 28px;
-        height: 28px;
-        font-size: 0.9rem;
-      }
-    }
-    
-    .guidance-title {
-      font-size: 0.85rem;
-    }
-    
-    .guidance-description {
-      font-size: 0.75rem;
-    }
-    
-    .guidance-action {
-      .action-label {
-        font-size: 0.7rem;
-      }
-      
-      .action-text {
-        font-size: 0.75rem;
-        padding: 0.4rem;
-      }
+.guidance-section {
+  margin-top: 1rem;
+  
+  .guidance-header {
+    h3 {
+      font-size: 1rem;
     }
   }
+  
+  .analysis-report {
+    padding: 0.75rem;
+    
+    .report-content {
+      font-size: 0.8rem;
+    }
+  }
+  
+  .guidance-item {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+    padding: 0.5rem 0;
+    
+    .guidance-icon {
+      width: 28px;
+      height: 28px;
+      font-size: 0.9rem;
+    }
+  }
+  
+  .guidance-title {
+    font-size: 0.85rem;
+  }
+  
+  .guidance-description {
+    font-size: 0.75rem;
+  }
+  
+  .guidance-action {
+    .action-label {
+      font-size: 0.7rem;
+    }
+    
+    .action-text {
+      font-size: 0.75rem;
+      padding: 0.4rem;
+    }
+  }
+}
 }
 
 @media (max-width: 480px) {