LiuRui/DJKB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

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

124
my-vue-app/src/views/senorManger/components/CenterOverview.vue
View File

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