From 570f59f93fab2e5f05e401b9b690faa6408fc034 Mon Sep 17 00:00:00 2001
From: lbw_9527443 <780139497@qq.com>
Date: Fri, 22 Aug 2025 20:25:28 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=9B=A2=E9=98=9F=E6=8C=87=E6=A0=87):=20?=
 =?UTF-8?q?=E4=B8=BA=E5=9B=A2=E9=98=9F=E6=8C=87=E6=A0=87=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=B7=A5=E5=85=B7=E6=8F=90=E7=A4=BA=E8=AF=B4=E6=98=8E=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

为转化率、通话次数等团队指标添加工具提示功能，显示各指标的计算方式和定义
取消secondTop.vue中两处被注释的初始化数据加载调用
---
 my-vue-app/src/views/secondTop/secondTop.vue  |   4 +-
 .../senorManger/components/CenterOverview.vue | 124 ++++++++++++++++--
 .../components/StatisticalIndicators.vue      |  84 +++++++++++-
 .../src/views/senorManger/seniorManager.vue   |  63 ++++++++-
 4 files changed, 256 insertions(+), 19 deletions(-)

diff --git a/my-vue-app/src/views/secondTop/secondTop.vue b/my-vue-app/src/views/secondTop/secondTop.vue
index 45289d5..ade79a7 100644
--- a/my-vue-app/src/views/secondTop/secondTop.vue
+++ b/my-vue-app/src/views/secondTop/secondTop.vue
@@ -748,8 +748,8 @@ const conversionRateVsAverage = ref({})
       await CenterConversionRateVsAverage()
       await CenterSeniorManagerList()
       // 获取优秀录音
-      // await getGoodRecord()
-      // await CenterGroupList('all') // 初始化加载全部高级经理数据
+      await getGoodRecord()
+      await CenterGroupList('all') // 初始化加载全部高级经理数据
     } catch (error) {
       console.error('数据加载失败:', error)
     } finally {
diff --git a/my-vue-app/src/views/senorManger/components/CenterOverview.vue b/my-vue-app/src/views/senorManger/components/CenterOverview.vue
index bdf02d0..24aa494 100644
--- a/my-vue-app/src/views/senorManger/components/CenterOverview.vue
+++ b/my-vue-app/src/views/senorManger/components/CenterOverview.vue
@@ -4,7 +4,10 @@
     <div class="overview-grid">
       <div class="overview-card primary">
         <div class="card-header">
-          <span class="card-title">团队总业绩</span>
+          <span class="card-title">
+            团队总业绩
+            <span class="info-icon" @mouseenter="showTooltip($event, 'teamPerformance')" @mouseleave="hideTooltip">ⓘ</span>
+          </span>
           <span class="card-trend positive">{{ totalPerformance.team_current_vs_previous_deals }} vs 上期</span>
         </div>
         <div class="card-value">{{ totalPerformance.current_team_odd_numbers||0 }}</div>
@@ -13,7 +16,10 @@
       
       <div class="overview-card">
         <div class="card-header">
-          <span class="card-title">活跃组数</span>
+          <span class="card-title">
+            活跃组数
+            <span class="info-icon" @mouseenter="showTooltip($event, 'activeGroups')" @mouseleave="hideTooltip">ⓘ</span>
+          </span>
           <span class="card-trend stable">{{ activeGroups.total_group_count }}/{{ activeGroups.total_group_count }} 组</span>
         </div>
         <div class="card-value">{{ activeGroups.total_group_count }} 组</div>
@@ -22,7 +28,10 @@
       
       <div class="overview-card">
         <div class="card-header">
-          <span class="card-title">团队转化率</span>
+          <span class="card-title">
+            团队转化率
+            <span class="info-icon" @mouseenter="showTooltip($event, 'conversionRate')" @mouseleave="hideTooltip">ⓘ</span>
+          </span>
           <span class="card-trend positive">{{ conversionRate.team_current_vs_previous_deals }} vs 上期</span>
         </div>
         <div class="card-value">{{ conversionRate.center_conversion_rate }}</div>
@@ -31,7 +40,10 @@
       
       <div class="overview-card">
         <div class="card-header">
-          <span class="card-title">总通话次数</span>
+          <span class="card-title">
+            总通话次数
+            <span class="info-icon" @mouseenter="showTooltip($event, 'totalCalls')" @mouseleave="hideTooltip">ⓘ</span>
+          </span>
           <span class="card-trend positive">{{ totalCalls.total_call_count_vs_yesterday }} vs 上期</span>
         </div>
         <div class="card-value">{{ totalCalls.total_call_count }}</div>
@@ -40,7 +52,10 @@
       
       <div class="overview-card">
         <div class="card-header">
-          <span class="card-title">新增客户</span>
+          <span class="card-title">
+            新增客户
+            <span class="info-icon" @mouseenter="showTooltip($event, 'newCustomers')" @mouseleave="hideTooltip">ⓘ</span>
+          </span>
           <span class="card-trend positive">{{ newCustomers.new_customer_vs_yesterday }} vs 上期</span>
         </div>
         <div class="card-value">{{ newCustomers.new_customer }} 人</div>
@@ -49,19 +64,31 @@
       
       <div class="overview-card">
         <div class="card-header">
-          <span class="card-title">定金转化</span>
+          <span class="card-title">
+            定金转化
+            <span class="info-icon" @mouseenter="showTooltip($event, 'depositConversion')" @mouseleave="hideTooltip">ⓘ</span>
+          </span>
           <span class="card-trend positive">{{ depositConversions.deposit_conversion_vs_previous }} vs 上期</span>
         </div>
         <div class="card-value">{{ depositConversions.current_deposit_conversion_rate }}</div>
         <div class="card-subtitle">本月定金转化率: {{ depositConversions.monthly_deposit_conversion_rate }}</div>
       </div>
     </div>
-  
+    
+    <!-- Tooltip 组件 -->
+    <Tooltip 
+      :visible="tooltip.visible"
+      :x="tooltip.x"
+      :y="tooltip.y"
+      :title="tooltip.title"
+      :description="tooltip.description"
+    />
   </div>
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { computed, reactive } from 'vue'
+import Tooltip from '@/components/Tooltip.vue'
 
 // 中心整体概览组件
 const props = defineProps({
@@ -103,6 +130,60 @@ const depositConversions = computed(() => {
   console.log(999991111,props.overallTeamPerformance.depositConversions)
   return props.overallTeamPerformance.depositConversions
 })
+
+// 工具提示状态
+const tooltip = reactive({
+  visible: false,
+  x: 0,
+  y: 0,
+  title: '',
+  description: ''
+})
+
+// 指标描述
+const metricDescriptions = {
+  teamPerformance: {
+    title: '团队总业绩计算方式',
+    description: '统计所有团队成员在选定时间范围内的成交金额总和，包括全款订单和定金订单的累计业绩。'
+  },
+  activeGroups: {
+    title: '活跃组数计算方式',
+    description: '统计当前有成员在线且有业务活动的团队组数，以及各组的总人数统计。'
+  },
+  conversionRate: {
+    title: '团队转化率计算方式',
+    description: '团队总成交单数 ÷ 团队总新增客户数 × 100%，反映整个团队将潜在客户转化为成交客户的综合能力。'
+  },
+  totalCalls: {
+    title: '总通话次数计算方式',
+    description: '统计所有团队成员在选定时间范围内的通话总次数，包括外呼、接听等所有通话记录。'
+  },
+  newCustomers: {
+    title: '新增客户计算方式',
+    description: '统计所有团队成员在选定时间范围内新建档的客户总数，包括意向客户和潜在客户。'
+  },
+  depositConversion: {
+    title: '定金转化计算方式',
+    description: '定金订单数 ÷ 总成交单数 × 100%，反映客户从意向到实际付定金的转化效果。'
+  }
+}
+
+// 显示工具提示
+const showTooltip = (event, metricType) => {
+  const metric = metricDescriptions[metricType]
+  if (metric) {
+    tooltip.title = metric.title
+    tooltip.description = metric.description
+    tooltip.x = event.clientX
+    tooltip.y = event.clientY
+    tooltip.visible = true
+  }
+}
+
+// 隐藏工具提示
+const hideTooltip = () => {
+  tooltip.visible = false
+}
 </script>
 
 <style lang="scss" scoped>
@@ -146,6 +227,15 @@ const depositConversions = computed(() => {
         color: rgba(255, 255, 255, 0.9);
       }
       
+      .card-title .info-icon {
+        color: rgba(255, 255, 255, 0.7);
+        
+        &:hover {
+          color: rgba(255, 255, 255, 1);
+          opacity: 1;
+        }
+      }
+      
       .card-trend {
         color: rgba(255, 255, 255, 0.8);
       }
@@ -166,6 +256,24 @@ const depositConversions = computed(() => {
       color: #64748b;
       font-size: 0.9rem;
       font-weight: 500;
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+      
+      .info-icon {
+        color: #94a3b8;
+        font-size: 0.75rem;
+        cursor: pointer;
+        opacity: 0.7;
+        transition: all 0.2s ease;
+        margin-left: 0.25rem;
+        
+        &:hover {
+          opacity: 1;
+          color: #3b82f6;
+          transform: scale(1.1);
+        }
+      }
     }
     
     .card-trend {
diff --git a/my-vue-app/src/views/senorManger/components/StatisticalIndicators.vue b/my-vue-app/src/views/senorManger/components/StatisticalIndicators.vue
index a4d3dab..a25e41a 100644
--- a/my-vue-app/src/views/senorManger/components/StatisticalIndicators.vue
+++ b/my-vue-app/src/views/senorManger/components/StatisticalIndicators.vue
@@ -6,42 +6,50 @@
           <i class="el-icon-chat-dot-round"></i>
         </div>
         <div class="kpi-value">{{ customerCommunicationRate.active_customer_communication_rate||0 }}</div>
-        <p>活跃客户沟通率</p>
+        <p>活跃客户沟通率 <i class="el-icon-warning info-icon" @mouseenter="showTooltip($event, 'customerCommunicationRate')" @mouseleave="hideTooltip">ⓘ</i></p>
       </div>
       <div class="kpi-item stat-item">
         <div class="stat-icon response-time">
           <i class="el-icon-timer"></i>
         </div>
         <div class="kpi-value">{{ averageResponseTime.average_answer_time||0 }}<span class="kpi-unit">分钟</span></div>
-        <p>平均应答时间</p>
+        <p>平均应答时间 <i class="el-icon-warning info-icon" @mouseenter="showTooltip($event, 'averageResponseTime')" @mouseleave="hideTooltip">ⓘ</i></p>
       </div>
       <div class="kpi-item stat-item">
         <div class="stat-icon timeout-rate">
           <i class="el-icon-warning"></i>
         </div>
         <div class="kpi-value">{{ timeoutResponseRate.timeout_rate||0 }}</div>
-        <p>超时应答率</p>
+        <p>超时应答率 <i class="el-icon-warning info-icon" @mouseenter="showTooltip($event, 'timeoutResponseRate')" @mouseleave="hideTooltip">ⓘ</i></p>
       </div>
       <div class="kpi-item stat-item">
         <div class="stat-icon severe-timeout-rate">
           <i class="el-icon-warning-outline"></i>
         </div>
         <div class="kpi-value">{{ timeoutResponseRate.serious_timeout_rate||0 }}</div>
-        <p>严重超时应答率</p>
+        <p>严重超时应答率 <i class="el-icon-warning info-icon" @mouseenter="showTooltip($event, 'severeTimeoutRate')" @mouseleave="hideTooltip">ⓘ</i></p>
       </div>
       <div class="kpi-item stat-item">
         <div class="stat-icon form-rate">
           <i class="el-icon-document"></i>
         </div>
         <div class="kpi-value">{{ formCompletionRate.table_filling_rate||0 }}</div>
-        <p>表格填写率</p>
+        <p>表格填写率 <i class="el-icon-warning info-icon" @mouseenter="showTooltip($event, 'formCompletionRate')" @mouseleave="hideTooltip">ⓘ</i></p>
       </div>
     </div>
+    <Tooltip
+      :visible="tooltip.visible"
+      :x="tooltip.x"
+      :y="tooltip.y"
+      :title="tooltip.title"
+      :description="tooltip.description"
+    />
   </div>
 </template>
 
 <script setup>
-import { defineProps } from 'vue';
+import { defineProps, reactive } from 'vue';
+import Tooltip from '@/components/Tooltip.vue';
 
 defineProps({
   customerCommunicationRate: {
@@ -65,6 +73,56 @@ defineProps({
     default: 0
   }
 });
+
+// 工具提示状态
+const tooltip = reactive({
+  visible: false,
+  x: 0,
+  y: 0,
+  title: '',
+  description: ''
+});
+
+// 指标描述
+const metricDescriptions = {
+  customerCommunicationRate: {
+    title: '活跃客户沟通率计算方式',
+    description: '有效沟通的活跃客户数 ÷ 总活跃客户数 × 100%，反映团队与活跃客户的沟通覆盖程度。'
+  },
+  averageResponseTime: {
+    title: '平均应答时间计算方式',
+    description: '所有通话的应答时间总和 ÷ 通话总次数，以分钟为单位，反映团队的响应效率。'
+  },
+  timeoutResponseRate: {
+    title: '超时应答率计算方式',
+    description: '超时应答的通话次数 ÷ 总通话次数 × 100%，超时标准通常为30秒以上。'
+  },
+  severeTimeoutRate: {
+    title: '严重超时应答率计算方式',
+    description: '严重超时应答的通话次数 ÷ 总通话次数 × 100%，严重超时标准通常为60秒以上。'
+  },
+  formCompletionRate: {
+    title: '表格填写率计算方式',
+    description: '已完成填写的表格数量 ÷ 应填写的表格总数 × 100%，反映团队的工作完成度。'
+  }
+};
+
+// 显示工具提示
+const showTooltip = (event, metricType) => {
+  const metric = metricDescriptions[metricType];
+  if (metric) {
+    tooltip.title = metric.title;
+    tooltip.description = metric.description;
+    tooltip.x = event.clientX;
+    tooltip.y = event.clientY;
+    tooltip.visible = true;
+  }
+};
+
+// 隐藏工具提示
+const hideTooltip = () => {
+  tooltip.visible = false;
+};
 </script>
 
 <style scoped>
@@ -117,4 +175,18 @@ p {
 .timeout-rate { color: #E6A23C; }
 .severe-timeout-rate { color: #F56C6C; }
 .form-rate { color: #909399; }
+
+.info-icon {
+  color: #909399;
+  font-size: 12px;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity 0.3s ease;
+  margin-left: 4px;
+}
+
+.info-icon:hover {
+  opacity: 1;
+  color: #409EFF;
+}
 </style>
\ No newline at end of file
diff --git a/my-vue-app/src/views/senorManger/seniorManager.vue b/my-vue-app/src/views/senorManger/seniorManager.vue
index 6f90b43..6b26a40 100644
--- a/my-vue-app/src/views/senorManger/seniorManager.vue
+++ b/my-vue-app/src/views/senorManger/seniorManager.vue
@@ -112,13 +112,21 @@
                 
                 <div class="metric-row">
                   <div class="metric-item">
-                    <span class="metric-label">转化率</span>
+                    <span class="metric-label">转化率<i class="info-icon" @mouseenter="showTooltip($event, 'teamPerformance')" @mouseleave="hideTooltip">ⓘ</i></span>
                     <span class="metric-value">{{ member.conversion_rate_this_period }}</span>
                   </div>
                   <div class="metric-item">
                     <span class="metric-label">通话次数</span>
                     <span class="metric-value">{{ member.call_count_this_period }}</span>
                   </div>
+                  <!-- Tooltip 组件 -->
+                  <Tooltip 
+                    :visible="tooltip.visible"
+                    :x="tooltip.x"
+                    :y="tooltip.y"
+                    :title="tooltip.title"
+                    :description="tooltip.description"
+                  />
                 </div>
                 
                 <div class="metric-row">
@@ -149,7 +157,8 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
-
+import { computed, reactive } from 'vue'
+import Tooltip from '@/components/Tooltip.vue'
 import CenterOverview from './components/CenterOverview.vue'
 import GroupComparison from './components/GroupComparison.vue'
 import GroupRanking from './components/GroupRanking.vue'
@@ -540,6 +549,41 @@ const getStatusText = (status) => {
   }
   return statusMap[status] || '未知'
 }
+
+
+// 工具提示状态
+const tooltip = reactive({
+  visible: false,
+  x: 0,
+  y: 0,
+  title: '',
+  description: ''
+})
+
+// 指标描述
+const metricDescriptions = {
+  teamPerformance: {
+    title: '转化率',
+    description: '本期最终成交/本期客户总数'
+  }
+}
+
+// 显示工具提示
+const showTooltip = (event, metricType) => {
+  const metric = metricDescriptions[metricType]
+  if (metric) {
+    tooltip.title = metric.title
+    tooltip.description = metric.description
+    tooltip.x = event.clientX
+    tooltip.y = event.clientY
+    tooltip.visible = true
+  }
+}
+
+// 隐藏工具提示
+const hideTooltip = () => {
+  tooltip.visible = false
+}
 </script>
 
 <style lang="scss" scoped>
@@ -924,7 +968,20 @@ const getStatusText = (status) => {
     }
   }
 }
-
+.info-icon {
+        color: #94a3b8;
+        font-size: 0.75rem;
+        cursor: pointer;
+        opacity: 0.7;
+        transition: all 0.2s ease;
+        margin-left: 0.25rem;
+        
+        &:hover {
+          opacity: 1;
+          color: #3b82f6;
+          transform: scale(1.1);
+        }
+      }
 // 客户详情区域
 .customer-detail-section {
   background: white;