feat(销售看板): 优化排行榜组件并添加数据格式化逻辑

重构排行榜组件显示布局，移除成交单数显示并突出转化率
添加数据格式化逻辑将API响应转换为组件所需格式
修改客户类型选择器默认值和选项文本
为排行榜组件添加期间变化事件处理

my-vue-app/src/views/topOne/components/PersonalSalesRanking.vue

@@ -30,7 +30,6 @@
           <div class="employee-dept">{{ item.department }}</div>
         </div>
               <div class="employee-stats">
-            <span class="deals">成交: {{ item.deals }}单</span>
             <span class="conversion">转化率: {{ item.conversionRate }}%</span>
           </div>
         <div class="performance-section">

my-vue-app/src/views/topOne/components/RankingList.vue

@@ -2,10 +2,10 @@
   <div class="dashboard-card">
     <div class="card-header">
       <h3>团队业绩排行榜</h3>
-      <select v-model="rankingPeriod" class="period-select">
-        <option value="month">本期</option>
+      <select v-model="rankingPeriod" class="period-select" @change="onPeriodChange">
+        <option value="periods">本期</option>
         <option value="month">月度</option>
-        <option value="month">年度</option>
+        <option value="year">年度</option>
       </select>
     </div>
     <div class="ranking-list">
@@ -13,20 +13,23 @@
         <div class="rank-number" :class="getRankClass(index)">
           {{ index + 1 }}
         </div>
-        <div class="employee-info">
-          <div class="employee-name">{{ item.name }}</div>
-          <div class="employee-dept">{{ item.department }}</div>
-        </div>
-        <div class="performance-value">
-          ¥{{ formatNumber(item.performance) }}
+        <div class="employee-info-container">
+          <div class="employee-info">
+            <div class="employee-name">{{ item.name }}</div>
+          </div>
+          <div class="employee-dept">转化率：{{ item.average_deals_per_member }}</div>
+          <div class="performance-value">
+            成交单数：{{ formatNumber(item.performance) }}
+          </div>
         </div>
+    
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { defineProps, ref } from 'vue';
+import { defineProps, ref, defineEmits } from 'vue';
 
 defineProps({
   rankingData: Array,
@@ -34,7 +37,13 @@ defineProps({
   getRankClass: Function
 });
 
-const rankingPeriod = ref('month');
+const emit = defineEmits(['period-change']);
+
+const rankingPeriod = ref('periods');
+
+const onPeriodChange = () => {
+  emit('period-change', rankingPeriod.value);
+};
 </script>
 
 <style scoped>
@@ -98,8 +107,16 @@ const rankingPeriod = ref('month');
   color: #CD7F32;
 }
 
-.employee-info {
+.employee-info-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   flex-grow: 1;
+  gap: 10px;
+}
+
+.employee-info {
+  flex: 1;
 }
 
 .employee-name {
@@ -109,9 +126,13 @@ const rankingPeriod = ref('month');
 .employee-dept {
   font-size: 12px;
   color: #666;
+  flex: 1;
+  text-align: center;
 }
 
 .performance-value {
   font-weight: bold;
+  flex: 1;
+  text-align: right;
 }
 </style>

my-vue-app/src/views/topOne/topone.vue

@@ -29,14 +29,14 @@
     <!-- 第二行 -->
     <div class="dashboard-row row-3">
       <!-- 转化漏斗 -->
-      <funnel-chart
-        :funnel-data="funnelData"
-        :comparison-data="comparisonData"
-        @time-range-change="handleTimeRangeChange"
-      />
+      <funnel-chart 
+          :funnel-data="formattedFunnelData" 
+          :comparison-data="formattedComparisonData"
+          @time-range-change="handleTimeRangeChange"
+        />
       <!-- 销售个人业绩排行榜 -->
       <personal-sales-ranking
-        :ranking-data="rankingData"
+        :ranking-data="formattedSalesRankingData"
         :format-number="formatNumber"
         :get-rank-class="getRankClass"
         @period-change="handleRankingPeriodChange"
@@ -52,12 +52,13 @@
     <div class="dashboard-row row-3">
       <!-- 业绩排行榜 -->
       <ranking-list
-        :ranking-data="rankingData"
+        :ranking-data="formattedRankingData"
         :format-number="formatNumber"
         :get-rank-class="getRankClass"
+        @period-change="getCenterSalesRank"
       />
       <!-- 客户类型占比 -->
-      <customer-type :ranking-data="customerTypeData" />
+      <customer-type :customer-data="customerTypeRatio" @category-change="getCustomerTypeRatio" />
       <!-- 客户迫切解决的问题排行榜 -->
       <problem-ranking :ranking-data="problemRankingData" />
     </div>
@@ -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()
+
+
 });
 </script>