fix(metrics): 更新多个视图中的指标计算方式描述
refactor(header): 重构高级经理指挥台的头部组件,支持路由导航显示
This commit is contained in:
@@ -160,27 +160,27 @@ const tooltip = reactive({
|
|||||||
const metricDescriptions = {
|
const metricDescriptions = {
|
||||||
centerPerformance: {
|
centerPerformance: {
|
||||||
title: '中心总业绩计算方式',
|
title: '中心总业绩计算方式',
|
||||||
description: '统计本月中心所有销售团队的成交单数总和,与上期同比计算增长率。月目标完成率 = 当月实际成交单数 / 月度目标单数 × 100%'
|
description: '月目标完成率 = 当月成交单数 / 月度目标单数 × 100%'
|
||||||
},
|
},
|
||||||
activeGroups: {
|
activeGroups: {
|
||||||
title: '活跃组数计算方式',
|
title: '活跃组数计算方式',
|
||||||
description: '统计当前有业务活动的销售团队数量。活跃标准:本月有通话记录或成交记录的团队。总人数为所有活跃团队的人员总和'
|
description: '本月有通话记录或成交记录的团队。总人数为所有活跃团队的人员总和'
|
||||||
},
|
},
|
||||||
conversionRate: {
|
conversionRate: {
|
||||||
title: '中心转化率计算方式',
|
title: '中心转化率计算方式',
|
||||||
description: '中心转化率 = 总成交客户数 / 总接触客户数 × 100%。与上期对比显示增长趋势,行业平均值作为参考基准'
|
description: '中心转化率 = 总成交客户数 / 总接触客户数 × 100%'
|
||||||
},
|
},
|
||||||
totalCalls: {
|
totalCalls: {
|
||||||
title: '总通话次数计算方式',
|
title: '总通话次数计算方式',
|
||||||
description: '统计所有销售人员的通话总次数,包括接听和拨出。有效通话指通话时长超过30秒的通话记录'
|
description: '所有销售人员的通话总次数,包括接听和拨出。有效通话指通话时长超过30秒的通话记录'
|
||||||
},
|
},
|
||||||
newCustomers: {
|
newCustomers: {
|
||||||
title: '新增客户计算方式',
|
title: '新增客户计算方式',
|
||||||
description: '统计本期新录入系统的客户数量。意向客户指经过初步沟通,有明确购买意向的客户数量'
|
description: '本期新录入系统的客户数量。意向客户指经过初步沟通,有明确购买意向的客户数量'
|
||||||
},
|
},
|
||||||
depositConversion: {
|
depositConversion: {
|
||||||
title: '定金转化计算方式',
|
title: '定金转化计算方式',
|
||||||
description: '定金转化率 = 缴纳定金客户数 / 意向客户总数 × 100%。平均定金转化率为本月日均转化率'
|
description: '定金转化率 = 缴纳定金客户数 / 意向客户总数 × 100%'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -175,27 +175,27 @@ const tooltip = reactive({
|
|||||||
const metricDescriptions = {
|
const metricDescriptions = {
|
||||||
teamPerformance: {
|
teamPerformance: {
|
||||||
title: '团队总业绩计算方式',
|
title: '团队总业绩计算方式',
|
||||||
description: '统计所有团队成员在选定时间范围内的成交金额总和,包括全款订单和定金订单的累计业绩。'
|
description: '所有团队成员在选定时间范围内的成交金额总和,包括全款订单和定金订单的累计业绩。'
|
||||||
},
|
},
|
||||||
activeGroups: {
|
activeGroups: {
|
||||||
title: '活跃组数计算方式',
|
title: '活跃组数计算方式',
|
||||||
description: '统计当前有成员在线且有业务活动的团队组数,以及各组的总人数统计。'
|
description: '当前有成员在线且有业务活动的团队组数,以及各组的总人数统计。'
|
||||||
},
|
},
|
||||||
conversionRate: {
|
conversionRate: {
|
||||||
title: '团队转化率计算方式',
|
title: '团队转化率计算方式',
|
||||||
description: '团队总成交单数 ÷ 团队总新增客户数 × 100%,反映整个团队将潜在客户转化为成交客户的综合能力。'
|
description: '团队总成交单数 ÷ 团队总新增客户数 × 100%'
|
||||||
},
|
},
|
||||||
totalCalls: {
|
totalCalls: {
|
||||||
title: '总通话次数计算方式',
|
title: '总通话次数计算方式',
|
||||||
description: '统计所有团队成员在选定时间范围内的通话总次数,包括外呼、接听等所有通话记录。'
|
description: '所有团队成员在选定时间范围内的通话总次数,包括外呼、接听等所有通话记录。'
|
||||||
},
|
},
|
||||||
newCustomers: {
|
newCustomers: {
|
||||||
title: '新增客户计算方式',
|
title: '新增客户计算方式',
|
||||||
description: '统计所有团队成员在选定时间范围内新建档的客户总数,包括意向客户和潜在客户。'
|
description: '所有团队成员在选定时间范围内新建档的客户总数,包括意向客户和潜在客户。'
|
||||||
},
|
},
|
||||||
depositConversion: {
|
depositConversion: {
|
||||||
title: '定金转化计算方式',
|
title: '定金转化计算方式',
|
||||||
description: '定金订单数 ÷ 总成交单数 × 100%,反映客户从意向到实际付定金的转化效果。'
|
description: '定金订单数 ÷ 总成交单数 × 100%'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -4,11 +4,31 @@
|
|||||||
<header class="dashboard-header">
|
<header class="dashboard-header">
|
||||||
<div class="header-content">
|
<div class="header-content">
|
||||||
<div class="logo-section">
|
<div class="logo-section">
|
||||||
<div class="header-text">
|
<!-- 动态顶栏:根据是否有路由参数显示不同内容 -->
|
||||||
<h1>高级经理指挥台</h1>
|
<!-- 路由跳转时的顶栏:面包屑 + 姓名 -->
|
||||||
<p>统筹多组运营,优化资源配置,驱动业绩增长,实现团队协同发展。</p>
|
<div v-if="isRouteNavigation" class="route-header">
|
||||||
|
<div class="breadcrumb">
|
||||||
|
<span class="breadcrumb-item" @click="goBack">团队管理</span>
|
||||||
|
<span class="breadcrumb-separator">></span>
|
||||||
|
<span class="breadcrumb-item current">{{ routeUserName }}高级经理指挥台</span>
|
||||||
|
</div>
|
||||||
|
<div class="user-name">
|
||||||
|
{{ routeUserName }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 自己登录时的顶栏:原有样式 -->
|
||||||
|
<template v-else>
|
||||||
|
<div class="header-text">
|
||||||
|
<h1>高级经理指挥台</h1>
|
||||||
|
<p>统筹多组运营,优化资源配置,驱动业绩增长,实现团队协同发展。</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<div v-if="!isRouteNavigation">
|
||||||
|
<!-- 用户下拉菜单 -->
|
||||||
|
<UserDropdown class="header-ringht" style="margin-left: auto;" />
|
||||||
</div>
|
</div>
|
||||||
<UserDropdown class="header-ringht" style="margin-left: auto;" />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
@@ -204,6 +224,22 @@ const userStore = useUserStore()
|
|||||||
// 路由实例
|
// 路由实例
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
||||||
|
// 判断是否为路由导航(有路由参数)
|
||||||
|
const isRouteNavigation = computed(() => {
|
||||||
|
const routeUserName = router.currentRoute.value.query.user_name || router.currentRoute.value.params.user_name
|
||||||
|
return !!routeUserName
|
||||||
|
})
|
||||||
|
|
||||||
|
// 获取路由传递的用户名
|
||||||
|
const routeUserName = computed(() => {
|
||||||
|
return router.currentRoute.value.query.user_name || router.currentRoute.value.params.user_name || ''
|
||||||
|
})
|
||||||
|
|
||||||
|
// 返回上一页
|
||||||
|
const goBack = () => {
|
||||||
|
router.go(-1)
|
||||||
|
}
|
||||||
|
|
||||||
// Loading状态
|
// Loading状态
|
||||||
const isLoading = ref(false)
|
const isLoading = ref(false)
|
||||||
// 团队详情加载状态
|
// 团队详情加载状态
|
||||||
@@ -1180,4 +1216,53 @@ const hideTooltip = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 路由导航样式
|
||||||
|
.route-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.breadcrumb {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
|
||||||
|
.breadcrumb-item {
|
||||||
|
color: #64748b;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
|
&:not(.current) {
|
||||||
|
cursor: pointer;
|
||||||
|
transition: color 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #3b82f6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.current {
|
||||||
|
color: #1e293b;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb-separator {
|
||||||
|
color: #94a3b8;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-name {
|
||||||
|
color: #1e293b;
|
||||||
|
font-size: 1.125rem;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -116,23 +116,23 @@ const tooltip = reactive({
|
|||||||
const metricDescriptions = {
|
const metricDescriptions = {
|
||||||
conversionRate: {
|
conversionRate: {
|
||||||
title: '成交率计算方式',
|
title: '成交率计算方式',
|
||||||
description: '成交单数 ÷ 总线索数 × 100%'
|
description: '成交单数 ÷ 本期总客户数 × 100%'
|
||||||
},
|
},
|
||||||
totalDeals: {
|
totalDeals: {
|
||||||
title: '成交单数计算方式',
|
title: '成交单数计算方式',
|
||||||
description: '统计销售人员在选定时间范围内成功签约的订单总数,包括所有已确认的成交订单。'
|
description: '在选定时间范围内成功签约的订单总数,包括所有已确认的成交订单。'
|
||||||
},
|
},
|
||||||
plusVRate: {
|
plusVRate: {
|
||||||
title: '加微率计算方式',
|
title: '加微率计算方式',
|
||||||
description: '成功添加微信的客户数 ÷ 总接触客户数 × 100%,反映客户对销售人员的初步信任度。'
|
description: '成功添加微信的客户数 ÷ 本期全部客户数 × 100%'
|
||||||
},
|
},
|
||||||
groupRate: {
|
groupRate: {
|
||||||
title: '入群率计算方式',
|
title: '入群率计算方式',
|
||||||
description: '成功邀请进入微信群的客户数 ÷ 已添加微信的客户数 × 100%,反映客户的参与积极性。'
|
description: '成功邀请进入微信群的客户数 ÷ 本期全部客户数 × 100%'
|
||||||
},
|
},
|
||||||
formFillingRate: {
|
formFillingRate: {
|
||||||
title: '表单填写率计算方式',
|
title: '表单填写率计算方式',
|
||||||
description: '完成表单填写的客户数 ÷ 总邀请填写表单的客户数 × 100%,反映客户的配合度和意向强度。'
|
description: '填写表单的客户数 ÷ 本期总客户数 × 100%'
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user