From ca3df35ff9033d915845344135164f7ff4eb348a Mon Sep 17 00:00:00 2001
From: lbw_9527443 <780139497@qq.com>
Date: Mon, 18 Aug 2025 11:49:14 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E9=94=80=E5=94=AE=E7=9C=8B=E6=9D=BF):=20?=
=?UTF-8?q?=E4=BC=98=E5=8C=96=E6=8E=92=E8=A1=8C=E6=A6=9C=E7=BB=84=E4=BB=B6?=
=?UTF-8?q?=E5=B9=B6=E6=B7=BB=E5=8A=A0=E6=95=B0=E6=8D=AE=E6=A0=BC=E5=BC=8F?=
=?UTF-8?q?=E5=8C=96=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
重构排行榜组件显示布局,移除成交单数显示并突出转化率
添加数据格式化逻辑将API响应转换为组件所需格式
修改客户类型选择器默认值和选项文本
为排行榜组件添加期间变化事件处理
---
my-vue-app/src/api/top.js | 4 +-
.../secondTop/components/CustomerType.vue | 4 +-
.../components/PersonalSalesRanking.vue | 1 -
.../views/topOne/components/RankingList.vue | 45 +-
my-vue-app/src/views/topOne/topone.vue | 394 ++++++++++++++++--
5 files changed, 407 insertions(+), 41 deletions(-)
diff --git a/my-vue-app/src/api/top.js b/my-vue-app/src/api/top.js
index ed3dff5..0879fbf 100644
--- a/my-vue-app/src/api/top.js
+++ b/my-vue-app/src/api/top.js
@@ -31,8 +31,8 @@ export const getCompanyRealTimeProgress = () => {
}
// 获取全公司转化对比 /api/v1/level_five/overview/company_conversion_rate_vs_last
-export const getCompanyConversionRateVsLast = () => {
- return https.post('/api/v1/level_five/overview/company_conversion_rate_vs_last')
+export const getCompanyConversionRateVsLast = (params) => {
+ return https.post('/api/v1/level_five/overview/company_conversion_rate_vs_last', params)
}
// 获取全公司销售月度业绩红黑榜 /api/v1/level_five/overview/sales_monthly_performance
diff --git a/my-vue-app/src/views/secondTop/components/CustomerType.vue b/my-vue-app/src/views/secondTop/components/CustomerType.vue
index a7a1abb..e5b4155 100644
--- a/my-vue-app/src/views/secondTop/components/CustomerType.vue
+++ b/my-vue-app/src/views/secondTop/components/CustomerType.vue
@@ -4,7 +4,7 @@
diff --git a/my-vue-app/src/views/topOne/components/RankingList.vue b/my-vue-app/src/views/topOne/components/RankingList.vue
index 91a40cb..32d9c55 100644
--- a/my-vue-app/src/views/topOne/components/RankingList.vue
+++ b/my-vue-app/src/views/topOne/components/RankingList.vue
@@ -2,10 +2,10 @@
@@ -13,20 +13,23 @@
{{ index + 1 }}
-
-
{{ item.name }}
-
{{ item.department }}
-
-
\ No newline at end of file
diff --git a/my-vue-app/src/views/topOne/topone.vue b/my-vue-app/src/views/topOne/topone.vue
index aa73388..2f646e3 100644
--- a/my-vue-app/src/views/topOne/topone.vue
+++ b/my-vue-app/src/views/topOne/topone.vue
@@ -29,14 +29,14 @@
@@ -614,14 +615,91 @@ async function getRealTimeProgress() {
}
// 转化对比
const conversionComparison = ref({});
+
+// 计算属性:转换 conversionComparison 数据为 funnelData 格式
+const formattedFunnelData = computed(() => {
+ if (!conversionComparison.value || !conversionComparison.value.company_current_rate) {
+ return funnelData.value; // 返回默认数据
+ }
+
+ const currentData = conversionComparison.value.company_current_rate;
+ const stageOrder = ['线索总数', '加微', '到课', '付定金', '成交'];
+ const colors = ['#4CAF50', '#2196F3', '#FF9800', '#9C27B0', '#F44336'];
+
+ return stageOrder.map((stageName, index) => {
+ const count = currentData[stageName] || 0;
+ const totalCount = currentData['线索总数'] || 1;
+ const percentage = totalCount > 0 ? Math.round((count / totalCount) * 100) : 0;
+
+ return {
+ name: stageName,
+ count: count,
+ percentage: percentage,
+ color: colors[index]
+ };
+ });
+});
+
+// 计算属性:转换 conversionComparison 数据格式以适配 FunnelChart 组件
+const formattedComparisonData = computed(() => {
+ if (!conversionComparison.value || !conversionComparison.value.company_current_rate) {
+ return {};
+ }
+
+ const currentData = conversionComparison.value.company_current_rate;
+ const lastData = conversionComparison.value.company_last_rate;
+ const checkType = conversionComparison.value.check_type;
+
+ // 根据 check_type 确定时间范围键
+ const timeRangeKey = checkType === 'month' ? 'month' : 'period';
+ const stageOrder = ['线索总数', '加微', '到课', '付定金', '成交'];
+
+ const comparisonArray = stageOrder.map(stageName => ({
+ name: stageName,
+ count: lastData[stageName] || 0
+ }));
+
+ return {
+ [timeRangeKey]: comparisonArray
+ };
+});
+
async function getConversionComparison(data) {
const params={
- check_type:data,
+ check_type:data
}
try {
const res = await getCompanyConversionRateVsLast(params)
console.log(111111,res)
conversionComparison.value = res.data
+ /**
+ * "data": {
+ "user_name": "赵世敬",
+ "user_level": 5,
+ "check_type": "month",
+ "company_current_rate": {
+ "线索总数": 14050,
+ "加微": 3238,
+ "到课": 7613,
+ "付定金": 167,
+ "成交": 135
+ },
+ "company_last_rate": {
+ "线索总数": 17598,
+ "加微": 3328,
+ "到课": 3543,
+ "付定金": 0,
+ "成交": 0
+ },
+ "company_current_vs_last_rate": {
+ "线索总数": "-20.16%",
+ "加微": "-2.70%",
+ "到课": "+114.87%",
+ "付定金": "+∞%",
+ "成交": "+∞%"
+ }
+ }
+ */
} catch (error) {
console.error("获取转化对比失败:", error);
}
@@ -629,20 +707,231 @@ async function getConversionComparison(data) {
// 获取全公司销售月度业绩红黑榜 params:{"rank_type": "red" // "rank_type": "black"}
const companySalesRank = ref({});
+
+// 计算属性:转换 companySalesRank 数据格式以适配 PersonalSalesRanking 组件
+const formattedSalesRankingData = computed(() => {
+ if (!companySalesRank.value) {
+ return [];
+ }
+
+ // 根据 rank_type 选择对应的数据
+ const rankType = companySalesRank.value.rank_type;
+ const rankList = rankType === 'red'
+ ? companySalesRank.value.sales_monthly_performance_red
+ : companySalesRank.value.sales_monthly_performance_black;
+
+ if (!rankList) {
+ return [];
+ }
+
+ return rankList.map((item, index) => ({
+ id: index + 1,
+ name: item.name,
+ department: item.department,
+ performance: item.deal_count * 10000, // 假设每单10000元,可根据实际情况调整
+ deals: item.deal_count,
+ conversionRate: parseFloat(item.conversion_rate.replace('%', '')),
+ trend: rankType === 'red' ? 'up' : 'down', // 红榜为上升趋势,黑榜为下降趋势
+ growth: rankType === 'red' ? Math.random() * 20 : -(Math.random() * 20), // 红榜正增长,黑榜负增长
+ avatar: '/default-avatar.svg'
+ }));
+});
+
+// 处理销售排行榜期间变化
+const handleRankingPeriodChange = (period) => {
+ // 根据期间参数调用相应的函数,这里默认调用红榜数据
+ getCompanySalesRank('red');
+};
+
async function getCompanySalesRank(Rank) {
const params={
rank_type:Rank,
}
try {
const res = await getSalesMonthlyPerformance(params)
- console.log(1222222,res)
companySalesRank.value = res.data
+ /**
+ * "data": {
+ "user_name": "赵世敬",
+ "user_level": 5,
+ "rank_type": "red",
+ "sales_monthly_performance_red": [
+ {
+ "name": "贾星草",
+ "department": "洋葱管理层",
+ "deal_count": 2,
+ "conversion_rate": "2.78%",
+ "rank": 1
+ },
+ {
+ "name": "常志洁",
+ "department": "星火二部--王志恒",
+ "deal_count": 2,
+ "conversion_rate": "4.17%",
+ "rank": 2
+ },
+ {
+ "name": "李俊",
+ "department": "星火二部--王志恒",
+ "deal_count": 2,
+ "conversion_rate": "3.77%",
+ "rank": 3
+ },
+ {
+ "name": "高有桔",
+ "department": "勇士一部-张茂华",
+ "deal_count": 2,
+ "conversion_rate": "3.12%",
+ "rank": 4
+ },
+ {
+ "name": "马肖剑",
+ "department": "星耀三部-周毅",
+ "deal_count": 1,
+ "conversion_rate": "1.05%",
+ "rank": 5
+ },
+ {
+ "name": "刘思雨",
+ "department": "星耀三部-周毅",
+ "deal_count": 1,
+ "conversion_rate": "2.27%",
+ "rank": 6
+ },
+ {
+ "name": "王慧",
+ "department": "聚星三部--张卓",
+ "deal_count": 1,
+ "conversion_rate": "2.00%",
+ "rank": 7
+ },
+ {
+ "name": "寇帅杰",
+ "department": "巅峰一部-贾星草",
+ "deal_count": 1,
+ "conversion_rate": "2.13%",
+ "rank": 8
+ },
+ {
+ "name": "王奥博",
+ "department": "巅峰二部-纪洋洋",
+ "deal_count": 1,
+ "conversion_rate": "1.14%",
+ "rank": 9
+ },
+ {
+ "name": "董富忠",
+ "department": "巅峰三部--刘东洋",
+ "deal_count": 1,
+ "conversion_rate": "0.95%",
+ "rank": 10
+ }
+ ]
+ }
+ */
+ // 黑榜数据
+ /**
+ * "data": {
+ "user_name": "赵世敬",
+ "user_level": 5,
+ "rank_type": "black",
+ "sales_monthly_performance_black": [
+ {
+ "name": "马然",
+ "department": "美团业务支持部",
+ "deal_count": 0,
+ "conversion_rate": "0.00%",
+ "rank": 1
+ },
+ {
+ "name": "郭可英",
+ "department": "技术部",
+ "deal_count": 0,
+ "conversion_rate": "0.00%",
+ "rank": 2
+ },
+ {
+ "name": "杨启晨",
+ "department": "星火一部--张瑾",
+ "deal_count": 0,
+ "conversion_rate": "0.00%",
+ "rank": 3
+ },
+ {
+ "name": "程慧仟",
+ "department": "星耀三部-周毅",
+ "deal_count": 0,
+ "conversion_rate": "0.00%",
+ "rank": 4
+ },
+ {
+ "name": "常琳",
+ "department": "亮剑二部-田贵星",
+ "deal_count": 0,
+ "conversion_rate": "0.00%",
+ "rank": 5
+ },
+ {
+ "name": "李晓雪",
+ "department": "星火一部--张瑾",
+ "deal_count": 0,
+ "conversion_rate": "0.00%",
+ "rank": 6
+ },
+ {
+ "name": "杨朵朵",
+ "department": "星耀三部-周毅",
+ "deal_count": 0,
+ "conversion_rate": "0.00%",
+ "rank": 7
+ },
+ {
+ "name": "张明起",
+ "department": "星耀一部-吕明月",
+ "deal_count": 0,
+ "conversion_rate": "0.00%",
+ "rank": 8
+ },
+ {
+ "name": "刘英杰",
+ "department": "星耀一部-吕明月",
+ "deal_count": 0,
+ "conversion_rate": "0.00%",
+ "rank": 9
+ },
+ {
+ "name": "孟凡玉",
+ "department": "星耀一部-吕明月",
+ "deal_count": 0,
+ "conversion_rate": "0.00%",
+ "rank": 10
+ }
+ ]
+ }
+ */
} catch (error) {
console.error("获取销售月度业绩红黑榜失败:", error);
}
}
// 获取全中心业绩排行榜
const centerSalesRank = ref({});
+
+// 计算属性:转换 centerSalesRank 数据格式以适配 ranking-list 组件
+const formattedRankingData = computed(() => {
+ if (!centerSalesRank.value || !centerSalesRank.value.center_performance_periods_rank) {
+ return rankingData.value; // 返回默认数据
+ }
+
+ const rankList = centerSalesRank.value.center_performance_periods_rank;
+
+ return rankList.map((item, index) => ({
+ id: index + 1,
+ name: item.center_leader,
+ performance: item.total_deals,
+ average_deals_per_member: item.average_deals_per_member
+ }));
+});
+
async function getCenterSalesRank(data) {
const params={
check_type:data //periods、month、year
@@ -651,6 +940,25 @@ async function getCenterSalesRank(data) {
const res = await getCenterPerformanceRank(params)
console.log(1222222,res)
centerSalesRank.value = res.data
+ /**
+ * "data": {
+ "user_name": "赵世敬",
+ "user_level": 5,
+ "rank_type": "periods",
+ "center_performance_periods_rank": [
+ {
+ "center_leader": "郭可英",
+ "total_deals": 0,
+ "average_deals_per_member": 0
+ },
+ {
+ "center_leader": "刘瑞",
+ "total_deals": 4,
+ "average_deals_per_member": 0
+ }
+ ]
+ }
+ */
} catch (error) {
console.error("获取全中心业绩排行榜失败:", error);
}
@@ -665,6 +973,49 @@ async function getCustomerTypeRatio(data) {
const res = await getCustomerTypeDistribution(params)
console.log(1222222,res)
customerTypeRatio.value = res.data
+ /**
+ * data
+:
+customer_type_distribution
+:
+Array(7)
+0
+:
+{category: '初二', ratio: '37.50%'}
+1
+:
+{category: '高一', ratio: '18.75%'}
+2
+:
+{category: '初一', ratio: '12.50%'}
+3
+:
+{category: '五年级', ratio: '12.50%'}
+4
+:
+{category: '六年级', ratio: '6.25%'}
+5
+:
+{category: '三年级以下', ratio: '6.25%'}
+6
+:
+{category: '高三', ratio: '6.25%'}
+length
+:
+7
+[[Prototype]]
+:
+Array(0)
+distribution_type
+:
+"child_education"
+user_level
+:
+5
+user_name
+:
+"赵世敬"
+ */
} catch (error) {
console.error("获取客户类型占比失败:", error);
}
@@ -706,22 +1057,17 @@ async function getDetailData(level) {
}
}
-
-
-
-
-
-
-
-
-
-
onMounted(async() => {
// 页面初始化逻辑
- await getRealTimeProgress()
- await getTotalDeals()
- await getConversionComparison()
- await getCompanySalesRank('red')
+ // await getRealTimeProgress()
+ // await getTotalDeals()
+ // await getConversionComparison('month')
+ // await getCompanySalesRank('red')
+ // await getCenterSalesRank('periods')
+ await getCustomerTypeRatio('child_education')
+ await getCustomerUrgency()
+
+
});