feat(团队指标): 为团队指标添加工具提示说明功能

为转化率、通话次数等团队指标添加工具提示功能,显示各指标的计算方式和定义
取消secondTop.vue中两处被注释的初始化数据加载调用
This commit is contained in:
2025-08-22 20:25:28 +08:00
parent d53dd95c4e
commit 570f59f93f
4 changed files with 256 additions and 19 deletions

View File

@@ -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;