From 5e29aa77d624bad0374ef31be8f7c2bcb44779f6 Mon Sep 17 00:00:00 2001
From: lbw_9527443 <780139497@qq.com>
Date: Fri, 22 Aug 2025 21:59:58 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E8=A7=86=E5=9B=BE=E7=BB=84=E4=BB=B6):=20?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=8C=87=E6=A0=87=E6=8F=90=E7=A4=BA=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和DetailedDataTable.vue中添加工具提示组件，当用户悬停在指标标签上时显示计算方式的详细说明
---
 my-vue-app/src/views/secondTop/secondTop.vue  | 61 ++++++++++++++-
 .../topOne/components/DetailedDataTable.vue   | 74 +++++++++++++++++--
 2 files changed, 126 insertions(+), 9 deletions(-)

diff --git a/my-vue-app/src/views/secondTop/secondTop.vue b/my-vue-app/src/views/secondTop/secondTop.vue
index 6aa312c..e930ce9 100644
--- a/my-vue-app/src/views/secondTop/secondTop.vue
+++ b/my-vue-app/src/views/secondTop/secondTop.vue
@@ -134,13 +134,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.conversionRate }}%</span>
                 </div>
                 <div class="metric-item">
                   <span class="metric-label">通话次数</span>
                   <span class="metric-value">{{ member.callCount }}</span>
                 </div>
+                <!-- Tooltip 组件 -->
+                  <Tooltip 
+                    :visible="tooltip.visible"
+                    :x="tooltip.x"
+                    :y="tooltip.y"
+                    :title="tooltip.title"
+                    :description="tooltip.description"
+                  />
               </div>
 
               <div class="metric-row">
@@ -166,7 +174,7 @@
 </template>
 
 <script setup>
-  import { ref, onMounted, computed } from 'vue'
+  import { ref, onMounted, computed,reactive } from 'vue'
 
   import CenterOverview from './components/CenterOverview.vue'
   import GroupComparison from './components/GroupComparison.vue'
@@ -179,6 +187,7 @@
   import seniorManager from './components/seniorManager.vue'
   import UserDropdown from '@/components/UserDropdown.vue'
   import Loading from '@/components/Loading.vue'
+  import Tooltip from '@/components/Tooltip.vue'
   import {
     getOverallCenterPerformance, getTotalGroupCount, getCenterConversionRate, getTotalCallCount, getNewCustomer
     , getDepositConversionRate, getCustomerTypeDistribution, getUrgentNeedToAddress, getCenterAdvancedManagerList, getTeamRanking,
@@ -781,6 +790,39 @@ const conversionRateVsAverage = ref({})
     }
   })
 
+// 工具提示状态
+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>
@@ -1198,7 +1240,20 @@ const conversionRateVsAverage = ref({})
       }
     }
   }
-
+.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;
diff --git a/my-vue-app/src/views/topOne/components/DetailedDataTable.vue b/my-vue-app/src/views/topOne/components/DetailedDataTable.vue
index f553053..e0bf958 100644
--- a/my-vue-app/src/views/topOne/components/DetailedDataTable.vue
+++ b/my-vue-app/src/views/topOne/components/DetailedDataTable.vue
@@ -42,11 +42,11 @@
           <thead>
             <tr>
               <th>人员</th>
-              <th @click="sortBy('conversion_rate')" class="sortable">成交率 <span class="sort-icon" :class="{ active: sortField === 'conversion_rate' }">{{ sortOrder === 'desc' ? '↓' : '↑' }}</span></th>
-              <th @click="sortBy('total_deals')" class="sortable">成交单数 <span class="sort-icon" :class="{ active: sortField === 'total_deals' }">{{ sortOrder === 'desc' ? '↓' : '↑' }}</span></th>
-              <th>加微率</th>
-              <th>入群率</th>
-              <th>表单填写率</th>
+              <th @click="sortBy('conversion_rate')" class="sortable">成交率 <i class="info-icon" @mouseenter="showTooltip($event, 'conversionRate')" @mouseleave="hideTooltip" @click.stop>ⓘ</i> <span class="sort-icon" :class="{ active: sortField === 'conversion_rate' }">{{ sortOrder === 'desc' ? '↓' : '↑' }}</span></th>
+              <th @click="sortBy('total_deals')" class="sortable">成交单数 <i class="info-icon" @mouseenter="showTooltip($event, 'totalDeals')" @mouseleave="hideTooltip" @click.stop>ⓘ</i> <span class="sort-icon" :class="{ active: sortField === 'total_deals' }">{{ sortOrder === 'desc' ? '↓' : '↑' }}</span></th>
+              <th>加微率 <i class="info-icon" @mouseenter="showTooltip($event, 'plusVRate')" @mouseleave="hideTooltip">ⓘ</i></th>
+              <th>入群率 <i class="info-icon" @mouseenter="showTooltip($event, 'groupRate')" @mouseleave="hideTooltip">ⓘ</i></th>
+              <th>表单填写率 <i class="info-icon" @mouseenter="showTooltip($event, 'formFillingRate')" @mouseleave="hideTooltip">ⓘ</i></th>
             </tr>
           </thead>
           <tbody>
@@ -74,12 +74,22 @@
         </table>
       </div>
     </div>
+    
+    <!-- Tooltip 组件 -->
+    <Tooltip 
+      :visible="tooltip.visible" 
+      :x="tooltip.x" 
+      :y="tooltip.y" 
+      :title="tooltip.title" 
+      :description="tooltip.description" 
+    />
   </div>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, reactive } from 'vue';
 import { useRouter } from 'vue-router';
+import Tooltip from '@/components/Tooltip.vue';
 
 const props = defineProps({
    tableData: { type: Array, required: true },
@@ -93,6 +103,56 @@ const filters = ref({ centerLeader: '', advancedManager: '', manager: '', dealSt
 const sortField = ref('conversion_rate');
 const sortOrder = ref('desc');
 
+// Tooltip 状态管理
+const tooltip = reactive({
+  visible: false,
+  x: 0,
+  y: 0,
+  title: '',
+  description: ''
+});
+
+// 指标计算方式描述
+const metricDescriptions = {
+  conversionRate: {
+    title: '成交率计算方式',
+    description: '成交单数 ÷ 总线索数 × 100%，反映销售人员将潜在客户转化为实际成交的能力。'
+  },
+  totalDeals: {
+    title: '成交单数计算方式',
+    description: '统计销售人员在选定时间范围内成功签约的订单总数，包括所有已确认的成交订单。'
+  },
+  plusVRate: {
+    title: '加微率计算方式',
+    description: '成功添加微信的客户数 ÷ 总接触客户数 × 100%，反映客户对销售人员的初步信任度。'
+  },
+  groupRate: {
+    title: '入群率计算方式',
+    description: '成功邀请进入微信群的客户数 ÷ 已添加微信的客户数 × 100%，反映客户的参与积极性。'
+  },
+  formFillingRate: {
+    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;
+};
+
 const centerLeaders = computed(() => {
    return props.levelTree?.level_tree?.center_leaders || [];
  });
@@ -227,6 +287,8 @@ th { background: #f7fafc; padding: 12px 16px; text-align: left; font-weight: 600
 th.sortable { cursor: pointer; }
 .sort-icon { margin-left: 4px; opacity: 0.5; }
 .sort-icon.active { opacity: 1; color: #4299e1; }
+.info-icon { margin-left: 4px; color: #666; cursor: pointer; font-style: normal; font-size: 12px; transition: color 0.2s; }
+.info-icon:hover { color: #409eff; }
 td { padding: 16px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
 tr { cursor: pointer; transition: background-color 0.2s ease; }
 tr:hover { background-color: #f8fafc; }