fix(metrics): 更新多个视图中的指标计算方式描述

refactor(header): 重构高级经理指挥台的头部组件,支持路由导航显示
This commit is contained in:
2025-08-26 12:00:02 +08:00
parent 58c6ec1c53
commit d7c8a9e173
4 changed files with 106 additions and 21 deletions

View File

@@ -175,27 +175,27 @@ const tooltip = reactive({
const metricDescriptions = {
teamPerformance: {
title: '团队总业绩计算方式',
description: '统计所有团队成员在选定时间范围内的成交金额总和,包括全款订单和定金订单的累计业绩。'
description: '所有团队成员在选定时间范围内的成交金额总和,包括全款订单和定金订单的累计业绩。'
},
activeGroups: {
title: '活跃组数计算方式',
description: '统计当前有成员在线且有业务活动的团队组数,以及各组的总人数统计。'
description: '当前有成员在线且有业务活动的团队组数,以及各组的总人数统计。'
},
conversionRate: {
title: '团队转化率计算方式',
description: '团队总成交单数 ÷ 团队总新增客户数 × 100%,反映整个团队将潜在客户转化为成交客户的综合能力。'
description: '团队总成交单数 ÷ 团队总新增客户数 × 100%'
},
totalCalls: {
title: '总通话次数计算方式',
description: '统计所有团队成员在选定时间范围内的通话总次数,包括外呼、接听等所有通话记录。'
description: '所有团队成员在选定时间范围内的通话总次数,包括外呼、接听等所有通话记录。'
},
newCustomers: {
title: '新增客户计算方式',
description: '统计所有团队成员在选定时间范围内新建档的客户总数,包括意向客户和潜在客户。'
description: '所有团队成员在选定时间范围内新建档的客户总数,包括意向客户和潜在客户。'
},
depositConversion: {
title: '定金转化计算方式',
description: '定金订单数 ÷ 总成交单数 × 100%,反映客户从意向到实际付定金的转化效果。'
description: '定金订单数 ÷ 总成交单数 × 100%'
}
}

View File

@@ -4,11 +4,31 @@
<header class="dashboard-header">
<div class="header-content">
<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>
<UserDropdown class="header-ringht" style="margin-left: auto;" />
</div>
</div>
</header>
@@ -204,6 +224,22 @@ const userStore = useUserStore()
// 路由实例
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状态
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>