From 814961d84ab4b7caa950910dd2501dcbc9fe52db Mon Sep 17 00:00:00 2001
From: lbw_9527443 <780139497@qq.com>
Date: Thu, 14 Aug 2025 22:14:03 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E4=B8=AD=E5=BF=83=E6=A6=82=E8=A7=88):=20?=
 =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E4=B8=AD=E5=BF=83=E6=A6=82=E8=A7=88=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=95=B0=E6=8D=AE=E5=8A=A8=E6=80=81=E7=BB=91=E5=AE=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将静态数据替换为通过props传入的动态数据，并更新API端点名称
---
 my-vue-app/src/api/secondTop.js               |    2 +-
 .../secondTop/components/CenterOverview.vue   |   49 +-
 my-vue-app/src/views/secondTop/secondTop.vue  | 1929 +++++++----------
 3 files changed, 824 insertions(+), 1156 deletions(-)

diff --git a/my-vue-app/src/api/secondTop.js b/my-vue-app/src/api/secondTop.js
index 1a48390..9440466 100644
--- a/my-vue-app/src/api/secondTop.js
+++ b/my-vue-app/src/api/secondTop.js
@@ -7,7 +7,7 @@ export const getOverallCenterPerformance = (params) => {
 
 // 活跃组数  /api/v1/level_four/overview/total_group_count
 export const getTotalGroupCount = (params) => {
-  return https.post('/api/v1/level_four/overview/total_group_count', params)
+  return https.post('/api/v1/level_four/overview/total_team_count', params)
 }
 
 // 中心转化率   /api/v1/level_four/overview/center_conversion_rate
diff --git a/my-vue-app/src/views/secondTop/components/CenterOverview.vue b/my-vue-app/src/views/secondTop/components/CenterOverview.vue
index 73aea65..14d8a32 100644
--- a/my-vue-app/src/views/secondTop/components/CenterOverview.vue
+++ b/my-vue-app/src/views/secondTop/components/CenterOverview.vue
@@ -5,55 +5,55 @@
       <div class="overview-card primary">
         <div class="card-header">
           <span class="card-title">中心总业绩</span>
-          <span class="card-trend positive">+12% vs 上期</span>
+          <span class="card-trend positive">{{ props.overallData.CenterPerformance?.center_monthly_vs_previous_deals }} vs 上期</span>
         </div>
-        <div class="card-value">552,000 元</div>
-        <div class="card-subtitle">月目标完成率: 56%</div>
+        <div class="card-value">{{ props.overallData.CenterPerformance.center_monthly_deal_count || '552,000' }} 元</div>
+        <div class="card-subtitle">月目标完成率: {{ props.overallData.CenterPerformance?.center_monthly_target_completion_rate || '56%' }}</div>
       </div>
       
       <div class="overview-card">
         <div class="card-header">
           <span class="card-title">活跃组数</span>
-          <span class="card-trend stable">5/5 组</span>
+          <span class="card-trend stable">{{ props.overallData.TotalGroupCount?.center_total_team_count}}/{{ props.overallData.TotalGroupCount?.center_total_team_count }} 组</span>
         </div>
-        <div class="card-value">5 组</div>
-        <div class="card-subtitle">总人数: 40人</div>
+        <div class="card-value">{{ props.overallData.TotalGroupCount?.center_total_team_count || '5' }} 组</div>
+        <div class="card-subtitle">总人数: {{ props.overallData.TotalGroupCount?.center_total_user_count || '40' }}人</div>
       </div>
       
       <div class="overview-card">
         <div class="card-header">
           <span class="card-title">中心转化率</span>
-          <span class="card-trend positive">+0.3% vs 上期</span>
+          <span class="card-trend positive">{{ props.overallData.CenterConversionRate?.center_monthly_vs_previous_deals }}vs 上期</span>
         </div>
-        <div class="card-value">5.2%</div>
-        <div class="card-subtitle">行业平均: 4.8%</div>
+        <div class="card-value">{{ props.overallData.CenterConversionRate?.center_conversion_rate || '5.2' }}</div>
+        <div class="card-subtitle">行业平均: {{ props.overallData.CenterConversionRate?.current_user_center_conversion_rate || '4.8' }}</div>
       </div>
       
       <div class="overview-card">
         <div class="card-header">
           <span class="card-title">总通话次数</span>
-          <span class="card-trend positive">+8% vs 上期</span>
+          <span class="card-trend positive">{{ props.overallData.TotalCallCount?.total_call_count_vs_yesterday}} vs 上期</span>
         </div>
-        <div class="card-value">1,247 次</div>
-        <div class="card-subtitle">有效通话: 892次</div>
+        <div class="card-value">{{ props.overallData.TotalCallCount?.total_call_count || '1,247' }} 次</div>
+        <div class="card-subtitle">有效通话: {{ props.overallData.TotalCallCount?.center_effective_call_count || '892' }}次</div>
       </div>
       
       <div class="overview-card">
         <div class="card-header">
           <span class="card-title">新增客户</span>
-          <span class="card-trend positive">+15% vs 上期</span>
+          <span class="card-trend positive">{{ props.overallData.NewCustomer?.center_new_leads_vs_previous_period }} vs 上期</span>
         </div>
-        <div class="card-value">117 人</div>
-        <div class="card-subtitle">意向客户: 89人</div>
+        <div class="card-value">{{ props.overallData.NewCustomer?.center_new_leads_count || '117' }} 人</div>
+        <div class="card-subtitle">意向客户: {{ props.overallData.NewCustomer?.center_new_v_customer_count || '89' }}人</div>
       </div>
       
       <div class="overview-card">
         <div class="card-header">
           <span class="card-title">定金转化</span>
-          <span class="card-trend positive">+18% vs 上期</span>
+          <span class="card-trend positive">{{ props.overallData.DepositConversionRate?.center_deposit_conversion_vs_previous }} vs 上期</span>
         </div>
-        <div class="card-value">40 单</div>
-        <div class="card-subtitle">平均定金转化率: 13,800元</div>
+        <div class="card-value">{{ props.overallData.DepositConversionRate?.center_current_deposit_conversion_rate || '0' }} </div>
+        <div class="card-subtitle">平均定金转化率: {{ props.overallData.DepositConversionRate?.center_monthly_deposit_conversion_rate || '0' }}</div>
       </div>
     </div>
   
@@ -62,6 +62,19 @@
 
 <script setup>
 // 中心整体概览组件
+const props = defineProps({
+  overallData: {
+    type: Object,
+    default: () => ({
+      CenterPerformance: {},
+      TotalGroupCount: {},
+      CenterConversionRate: {},
+      TotalCallCount: {},
+      NewCustomer: {},
+      DepositConversionRate: {}
+    })
+  }
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/my-vue-app/src/views/secondTop/secondTop.vue b/my-vue-app/src/views/secondTop/secondTop.vue
index eeac0bc..5b35bb8 100644
--- a/my-vue-app/src/views/secondTop/secondTop.vue
+++ b/my-vue-app/src/views/secondTop/secondTop.vue
@@ -6,29 +6,19 @@
         <div class="logo-section">
           <div class="header-text">
             <h1>中心组长指挥台</h1>
-            <p>统筹多组运营，优化资源配置，驱动业绩增长，实现团队协同发展。</p>              
+            <p>统筹多组运营，优化资源配置，驱动业绩增长，实现团队协同发展。</p>
           </div>
-          
+
           <!-- 营期阶段信息 -->
           <div class="stage-info" style="margin-left: 100px;">
             <span class="stage-label">营期所属阶段：</span>
             <span class="stage-value">接数据</span>
           </div>
-                 
-            <!-- 头像 -->
-              <div
-            class="header-ringht"
-            style="display: flex; align-items: center; gap: 10px;margin-left: auto;"
-          >
-            <img
-              src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
-              alt="用户头像"
-              class="avatar"
-              @error="handleAvatarError"
-              style="width: 35px; height: 35px"
-            />
-            <span>你好，管理员</span>
+          <div>
+            <!-- 用户下拉菜单 -->
+            <UserDropdown />
           </div>
+
         </div>
       </div>
     </header>
@@ -37,30 +27,26 @@
       <!-- Top Section - Center Overview and Action Items -->
       <div class="top-section">
         <!-- Center Performance Overview -->
-        <CenterOverview />
-        
+        <CenterOverview :overall-data="overallCenterPerformance" />
+
         <!-- Action Items (Compact) -->
         <div class="action-items-compact">
           <ActionItems :selected-group="selectedGroup" />
         </div>
       </div>
-   <div class="BB-section">
+      <div class="BB-section">
         <!--客户类型占比-->
         <CustomerType />
         <!-- 优秀录音 -->
-         <GoodMusic />
-         <!-- 客户问题排行 -->
-          <ProblemRanking />
+        <GoodMusic />
+        <!-- 客户问题排行 -->
+        <ProblemRanking :ranking-data="formattedUrgentNeedData" />
       </div>
       <!-- Bottom Section -->
       <div class="bottom-section">
         <!-- Left Section - Group Performance Ranking -->
         <div class="left-section">
-          <GroupRanking 
-            :groups="groups"
-            :selected-group="selectedGroup"
-            @select-group="selectGroup"
-          />
+          <GroupRanking :groups="groups" :selected-group="selectedGroup" @select-group="selectGroup" />
         </div>
 
         <!-- Right Section - Group Comparison -->
@@ -68,8 +54,8 @@
           <GroupComparison :groups="groups" @select-group="selectGroup" />
         </div>
       </div>
-   
-      
+
+
       <!-- Team Members Detail Section -->
       <div class="team-detail-section" v-if="selectedGroup">
         <div class="team-detail-header">
@@ -93,14 +79,10 @@
             </div>
           </div>
         </div>
-        
+
         <div class="members-grid">
-          <div 
-            v-for="member in selectedGroup.members" 
-            :key="member.id"
-            class="member-card"
-            :class="getStatusClass(member.status)"
-          >
+          <div v-for="member in selectedGroup.members" :key="member.id" class="member-card"
+            :class="getStatusClass(member.status)">
             <div class="member-header">
               <div class="member-info">
                 <h3 class="member-name">{{ member.name }}</h3>
@@ -112,7 +94,7 @@
                 <span class="join-date">入职: {{ member.joinDate }}</span>
               </div>
             </div>
-            
+
             <div class="member-metrics">
               <div class="metric-row">
                 <div class="metric-item">
@@ -124,7 +106,7 @@
                   <span class="metric-value">{{ formatCurrency(member.monthlyPerformance) }}</span>
                 </div>
               </div>
-              
+
               <div class="metric-row">
                 <div class="metric-item">
                   <span class="metric-label">转化率</span>
@@ -135,7 +117,7 @@
                   <span class="metric-value">{{ member.callCount }}</span>
                 </div>
               </div>
-              
+
               <div class="metric-row">
                 <div class="metric-item">
                   <span class="metric-label">新增客户</span>
@@ -156,1140 +138,814 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import CenterOverview from './components/CenterOverview.vue'
-import GroupComparison from './components/GroupComparison.vue'
-import GroupRanking from './components/GroupRanking.vue'
-import ActionItems from './components/ActionItems.vue'
-import CustomerDetail from './components/CustomerDetail.vue'
-import CustomerType from './components/CustomerType.vue'
-import GoodMusic from './components/GoodMusic.vue'
-import ProblemRanking from './components/ProblemRanking.vue'
-import seniorManager from './components/seniorManager.vue'
-import {getOverallCenterPerformance,getTotalGroupCount,getCenterConversionRate,getTotalCallCount,getNewCustomer
- , getDepositConversionRate,getCustomerTypeDistribution,getUrgentNeedToAddress,getCenterAdvancedManagerList,getTeamRanking,getTeamRankingInfo
-} from '@/api/secondTop.js'
-import { useRouter } from 'vue-router'
-import { useUserStore } from '@/stores/user.js'
-// 组别数据
-const groups = [
-  {
-    id: 1,
-    name: '精英组',
-    leader: '李主管',
-    memberCount: 8,
-    todayPerformance: 156000,
-    monthlyTarget: 800000,
-    monthlyProgress: 65,
-    conversionRate: 6.8,
-    avgCallTime: 7.2,
-    newClients: 28,
-    deals: 12,
-    status: 'excellent',
-    trend: 'up',
-    alerts: [],
-    members: [
-      {
-        id: 1,
-        name: '张小明',
-        position: '高级销售',
-        phone: '138****1234',
-        todayPerformance: 25000,
-        monthlyPerformance: 180000,
-        conversionRate: 8.2,
-        callCount: 45,
-        newClients: 6,
-        deals: 3,
-        status: 'excellent',
-        joinDate: '2022-03-15'
-      },
-      {
-        id: 2,
-        name: '王丽华',
-        position: '销售专员',
-        phone: '139****5678',
-        todayPerformance: 22000,
-        monthlyPerformance: 165000,
-        conversionRate: 7.5,
-        callCount: 38,
-        newClients: 5,
-        deals: 2,
-        status: 'excellent',
-        joinDate: '2021-08-20'
-      },
-      {
-        id: 3,
-        name: '刘强东',
-        position: '销售专员',
-        phone: '137****9012',
-        todayPerformance: 18000,
-        monthlyPerformance: 142000,
-        conversionRate: 6.8,
-        callCount: 42,
-        newClients: 4,
-        deals: 2,
-        status: 'good',
-        joinDate: '2022-01-10'
-      },
-      {
-        id: 4,
-        name: '陈美玲',
-        position: '销售专员',
-        phone: '136****3456',
-        todayPerformance: 20000,
-        monthlyPerformance: 158000,
-        conversionRate: 7.1,
-        callCount: 40,
-        newClients: 5,
-        deals: 2,
-        status: 'good',
-        joinDate: '2021-11-05'
-      },
-      {
-        id: 5,
-        name: '赵志伟',
-        position: '销售专员',
-        phone: '135****7890',
-        todayPerformance: 16000,
-        monthlyPerformance: 125000,
-        conversionRate: 6.2,
-        callCount: 35,
-        newClients: 3,
-        deals: 1,
-        status: 'good',
-        joinDate: '2022-05-18'
-      },
-      {
-        id: 6,
-        name: '孙晓燕',
-        position: '销售专员',
-        phone: '134****2345',
-        todayPerformance: 19000,
-        monthlyPerformance: 148000,
-        conversionRate: 6.9,
-        callCount: 37,
-        newClients: 4,
-        deals: 2,
-        status: 'good',
-        joinDate: '2021-12-12'
-      },
-      {
-        id: 7,
-        name: '周建华',
-        position: '销售专员',
-        phone: '133****6789',
-        todayPerformance: 17000,
-        monthlyPerformance: 135000,
-        conversionRate: 6.5,
-        callCount: 33,
-        newClients: 3,
-        deals: 1,
-        status: 'good',
-        joinDate: '2022-02-28'
-      },
-      {
-        id: 8,
-        name: '吴雅琴',
-        position: '销售专员',
-        phone: '132****0123',
-        todayPerformance: 19000,
-        monthlyPerformance: 152000,
-        conversionRate: 7.0,
-        callCount: 39,
-        newClients: 4,
-        deals: 2,
-        status: 'good',
-        joinDate: '2021-09-15'
-      }
-    ]
-  },
-  {
-    id: 2,
-    name: '冲锋组',
-    leader: '张主管',
-    memberCount: 10,
-    todayPerformance: 142000,
-    monthlyTarget: 900000,
-    monthlyProgress: 58,
-    conversionRate: 5.9,
-    avgCallTime: 6.8,
-    newClients: 32,
-    deals: 10,
-    status: 'good',
-    trend: 'up',
-    alerts: ['需要加强追单环节'],
-    members: [
-      {
-        id: 9,
-        name: '李建国',
-        position: '高级销售',
-        phone: '138****4567',
-        todayPerformance: 18000,
-        monthlyPerformance: 145000,
-        conversionRate: 6.8,
-        callCount: 42,
-        newClients: 4,
-        deals: 2,
-        status: 'good',
-        joinDate: '2021-06-10'
-      },
-      {
-        id: 10,
-        name: '马晓丽',
-        position: '销售专员',
-        phone: '139****8901',
-        todayPerformance: 16000,
-        monthlyPerformance: 128000,
-        conversionRate: 6.2,
-        callCount: 38,
-        newClients: 3,
-        deals: 1,
-        status: 'good',
-        joinDate: '2022-04-22'
-      },
-      {
-        id: 11,
-        name: '杨志强',
-        position: '销售专员',
-        phone: '137****2345',
-        todayPerformance: 14000,
-        monthlyPerformance: 112000,
-        conversionRate: 5.8,
-        callCount: 35,
-        newClients: 3,
-        deals: 1,
-        status: 'average',
-        joinDate: '2022-07-08'
-      },
-      {
-        id: 12,
-        name: '黄美娟',
-        position: '销售专员',
-        phone: '136****6789',
-        todayPerformance: 15000,
-        monthlyPerformance: 120000,
-        conversionRate: 6.0,
-        callCount: 36,
-        newClients: 3,
-        deals: 1,
-        status: 'good',
-        joinDate: '2021-10-30'
-      },
-      {
-        id: 13,
-        name: '林志华',
-        position: '销售专员',
-        phone: '135****0123',
-        todayPerformance: 13000,
-        monthlyPerformance: 105000,
-        conversionRate: 5.5,
-        callCount: 32,
-        newClients: 2,
-        deals: 1,
-        status: 'average',
-        joinDate: '2022-08-15'
-      },
-      {
-        id: 14,
-        name: '郑小芳',
-        position: '销售专员',
-        phone: '134****4567',
-        todayPerformance: 14000,
-        monthlyPerformance: 115000,
-        conversionRate: 5.9,
-        callCount: 34,
-        newClients: 3,
-        deals: 1,
-        status: 'good',
-        joinDate: '2021-12-05'
-      },
-      {
-        id: 15,
-        name: '何建明',
-        position: '销售专员',
-        phone: '133****8901',
-        todayPerformance: 12000,
-        monthlyPerformance: 98000,
-        conversionRate: 5.2,
-        callCount: 30,
-        newClients: 2,
-        deals: 0,
-        status: 'attention',
-        joinDate: '2022-09-20'
-      },
-      {
-        id: 16,
-        name: '谢雅琳',
-        position: '销售专员',
-        phone: '132****2345',
-        todayPerformance: 15000,
-        monthlyPerformance: 122000,
-        conversionRate: 6.1,
-        callCount: 37,
-        newClients: 4,
-        deals: 1,
-        status: 'good',
-        joinDate: '2021-07-18'
-      },
-      {
-        id: 17,
-        name: '罗志勇',
-        position: '销售专员',
-        phone: '131****6789',
-        todayPerformance: 13000,
-        monthlyPerformance: 108000,
-        conversionRate: 5.6,
-        callCount: 33,
-        newClients: 3,
-        deals: 1,
-        status: 'average',
-        joinDate: '2022-06-12'
-      },
-      {
-        id: 18,
-        name: '蔡美华',
-        position: '销售专员',
-        phone: '130****0123',
-        todayPerformance: 12000,
-        monthlyPerformance: 102000,
-        conversionRate: 5.4,
-        callCount: 31,
-        newClients: 2,
-        deals: 1,
-        status: 'average',
-        joinDate: '2022-03-25'
-      }
-    ]
-  },
-  {
-    id: 3,
-    name: '突破组',
-    leader: '王主管',
-    memberCount: 7,
-    todayPerformance: 89000,
-    monthlyTarget: 700000,
-    monthlyProgress: 45,
-    conversionRate: 4.2,
-    avgCallTime: 5.5,
-    newClients: 18,
-    deals: 6,
-    status: 'warning',
-    trend: 'down',
-    alerts: ['转化率偏低', '通话时长不足'],
-    members: [
-      {
-        id: 19,
-        name: '徐志强',
-        position: '销售专员',
-        phone: '138****7890',
-        todayPerformance: 15000,
-        monthlyPerformance: 118000,
-        conversionRate: 5.2,
-        callCount: 28,
-        newClients: 3,
-        deals: 1,
-        status: 'average',
-        joinDate: '2022-01-20'
-      },
-      {
-        id: 20,
-        name: '袁美丽',
-        position: '销售专员',
-        phone: '139****1234',
-        todayPerformance: 13000,
-        monthlyPerformance: 95000,
-        conversionRate: 4.8,
-        callCount: 25,
-        newClients: 2,
-        deals: 1,
-        status: 'attention',
-        joinDate: '2022-05-08'
-      },
-      {
-        id: 21,
-        name: '冯建华',
-        position: '销售专员',
-        phone: '137****5678',
-        todayPerformance: 12000,
-        monthlyPerformance: 88000,
-        conversionRate: 4.2,
-        callCount: 22,
-        newClients: 2,
-        deals: 0,
-        status: 'attention',
-        joinDate: '2022-08-30'
-      },
-      {
-        id: 22,
-        name: '邓小芳',
-        position: '销售专员',
-        phone: '136****9012',
-        todayPerformance: 11000,
-        monthlyPerformance: 82000,
-        conversionRate: 3.9,
-        callCount: 20,
-        newClients: 2,
-        deals: 1,
-        status: 'attention',
-        joinDate: '2022-09-15'
-      },
-      {
-        id: 23,
-        name: '韩志明',
-        position: '销售专员',
-        phone: '135****3456',
-        todayPerformance: 14000,
-        monthlyPerformance: 105000,
-        conversionRate: 4.6,
-        callCount: 26,
-        newClients: 3,
-        deals: 1,
-        status: 'average',
-        joinDate: '2021-11-22'
-      },
-      {
-        id: 24,
-        name: '曾雅琴',
-        position: '销售专员',
-        phone: '134****7890',
-        todayPerformance: 12000,
-        monthlyPerformance: 92000,
-        conversionRate: 4.1,
-        callCount: 23,
-        newClients: 2,
-        deals: 1,
-        status: 'attention',
-        joinDate: '2022-04-10'
-      },
-      {
-        id: 25,
-        name: '彭建国',
-        position: '销售专员',
-        phone: '133****1234',
-        todayPerformance: 12000,
-        monthlyPerformance: 90000,
-        conversionRate: 4.0,
-        callCount: 21,
-        newClients: 2,
-        deals: 1,
-        status: 'attention',
-        joinDate: '2022-07-05'
-      }
-    ]
-  },
-  {
-    id: 4,
-    name: '新星组',
-    leader: '赵主管',
-    memberCount: 6,
-    todayPerformance: 67000,
-    monthlyTarget: 600000,
-    monthlyProgress: 38,
-    conversionRate: 3.8,
-    avgCallTime: 4.9,
-    newClients: 15,
-    deals: 4,
-    status: 'attention',
-    trend: 'stable',
-    alerts: ['新人培训需加强', '客户跟进不及时'],
-    members: [
-      {
-        id: 26,
-        name: '廖志华',
-        position: '销售专员',
-        phone: '138****5678',
-        todayPerformance: 12000,
-        monthlyPerformance: 85000,
-        conversionRate: 4.2,
-        callCount: 18,
-        newClients: 3,
-        deals: 1,
-        status: 'attention',
-        joinDate: '2022-10-15'
-      },
-      {
-        id: 27,
-        name: '范美玲',
-        position: '销售专员',
-        phone: '139****9012',
-        todayPerformance: 11000,
-        monthlyPerformance: 78000,
-        conversionRate: 3.8,
-        callCount: 16,
-        newClients: 2,
-        deals: 0,
-        status: 'attention',
-        joinDate: '2022-11-20'
-      },
-      {
-        id: 28,
-        name: '方建明',
-        position: '销售专员',
-        phone: '137****3456',
-        todayPerformance: 10000,
-        monthlyPerformance: 72000,
-        conversionRate: 3.5,
-        callCount: 15,
-        newClients: 2,
-        deals: 1,
-        status: 'poor',
-        joinDate: '2022-12-08'
-      },
-      {
-        id: 29,
-        name: '石雅芳',
-        position: '销售专员',
-        phone: '136****7890',
-        todayPerformance: 11000,
-        monthlyPerformance: 80000,
-        conversionRate: 3.9,
-        callCount: 17,
-        newClients: 3,
-        deals: 1,
-        status: 'attention',
-        joinDate: '2022-09-28'
-      },
-      {
-        id: 30,
-        name: '姚志勇',
-        position: '销售专员',
-        phone: '135****1234',
-        todayPerformance: 12000,
-        monthlyPerformance: 88000,
-        conversionRate: 4.0,
-        callCount: 19,
-        newClients: 3,
-        deals: 1,
-        status: 'attention',
-        joinDate: '2022-08-12'
-      },
-      {
-        id: 31,
-        name: '汤美华',
-        position: '销售专员',
-        phone: '134****5678',
-        todayPerformance: 11000,
-        monthlyPerformance: 82000,
-        conversionRate: 3.7,
-        callCount: 16,
-        newClients: 2,
-        deals: 0,
-        status: 'attention',
-        joinDate: '2022-10-30'
-      }
-    ]
-  }
-]
-// 路由实例
-const router = useRouter();
-// 用户store实例
-const userStore = useUserStore();
+  import { ref, onMounted, computed } from 'vue'
 
-// 获取通用请求参数的函数
-const getRequestParams = () => {
-  const params = {}
-  // 只从路由参数获取
-  const routeUserLevel = router.currentRoute.value.query.user_level || router.currentRoute.value.params.user_level
-  const routeUserName = router.currentRoute.value.query.user_name || router.currentRoute.value.params.user_name
-  // 如果路由有参数，使用路由参数
-  if (routeUserLevel) {
-    params.user_level = routeUserLevel.toString()
-  }
-  if (routeUserName) {
-    params.user_name = routeUserName
-  }
+  import CenterOverview from './components/CenterOverview.vue'
+  import GroupComparison from './components/GroupComparison.vue'
+  import GroupRanking from './components/GroupRanking.vue'
+  import ActionItems from './components/ActionItems.vue'
+  import CustomerDetail from './components/CustomerDetail.vue'
+  import CustomerType from './components/CustomerType.vue'
+  import GoodMusic from './components/GoodMusic.vue'
+  import ProblemRanking from './components/ProblemRanking.vue'
+  import seniorManager from './components/seniorManager.vue'
+  import UserDropdown from '@/components/UserDropdown.vue'
+  import {
+    getOverallCenterPerformance, getTotalGroupCount, getCenterConversionRate, getTotalCallCount, getNewCustomer
+    , getDepositConversionRate, getCustomerTypeDistribution, getUrgentNeedToAddress, getCenterAdvancedManagerList, getTeamRanking, getTeamRankingInfo
+  } from '@/api/secondTop.js'
+  import { useRouter } from 'vue-router'
+  import { useUserStore } from '@/stores/user.js'
+  // 组别数据
+  const groups = ref([])
 
-  return params
-}
-// 中心整体概览
-const overallCenterPerformance = ref({
-  
-})
-// 中心总业绩  
-async function CenterOverallCenterPerformance() {
-  const params = getRequestParams()
-  try {
-    const res = await getOverallCenterPerformance(params)
-    if (res.code === 200) {
-      overallCenterPerformance.value = res.data
+  // 路由实例
+  const router = useRouter();
+  // 用户store实例
+  const userStore = useUserStore();
+
+  // 获取通用请求参数的函数
+  const getRequestParams = () => {
+    const params = {}
+    // 只从路由参数获取
+    const routeUserLevel = router.currentRoute.value.query.user_level || router.currentRoute.value.params.user_level
+    const routeUserName = router.currentRoute.value.query.user_name || router.currentRoute.value.params.user_name
+    // 如果路由有参数，使用路由参数
+    if (routeUserLevel) {
+      params.user_level = routeUserLevel.toString()
     }
-  } catch (error) {
-    console.error('获取中心整体概览失败:', error)
+    if (routeUserName) {
+      params.user_name = routeUserName
+    }
+
+    return params
   }
-}
+  // 中心整体概览
+  const overallCenterPerformance = ref({
+    CenterPerformance: {},
+    TotalGroupCount: {},
+    CenterConversionRate: {},
+    TotalCallCount: {},
+    NewCustomer: {},
+    DepositConversionRate: {}
+  })
+  // 客户类型
+  const customerTypeDistribution = ref({})
+  // 迫切解决的问题
+  const urgentNeedToAddress = ref({})
 
-// 当前选中的组别，默认为第一个
-const selectedGroup = ref(groups[0])
+  // 格式化迫切解决问题数据为组件所需格式
+  const formattedUrgentNeedData = computed(() => {
+    if (urgentNeedToAddress.value && urgentNeedToAddress.value.center_urgent_issue_ratio) {
+      return Object.entries(urgentNeedToAddress.value.center_urgent_issue_ratio).map(([name, value]) => ({
+        name,
+        value
+      }))
+    }
+    return []
+  })
 
-// 选择组别函数
-const selectGroup = (group) => {
-  selectedGroup.value = group
-}
 
-// 格式化货币
-const formatCurrency = (value) => {
-  if (value >= 10000) {
-    return (value / 10000).toFixed(1) + '万'
+  // 中心总业绩  
+  async function CenterOverallCenterPerformance() {
+    const params = getRequestParams()
+    const hasParams = params.user_name
+    try {
+      const res = await getOverallCenterPerformance(hasParams ? params : undefined)
+      if (res.code === 200) {
+        overallCenterPerformance.value.CenterPerformance = res.data
+      }
+    } catch (error) {
+      console.error('获取中心整体概览失败:', error)
+    }
   }
-  return value.toLocaleString()
-}
-
-// 获取状态样式类
-const getStatusClass = (status) => {
-  return `status-${status}`
-}
-
-// 获取状态文本
-const getStatusText = (status) => {
-  const statusMap = {
-    excellent: '优秀',
-    good: '良好',
-    average: '一般',
-    attention: '需关注',
-    poor: '待提升'
+  // 活跃组数
+  async function CenterTotalGroupCount() {
+    const params = getRequestParams()
+    const hasParams = params.user_name
+    try {
+      const res = await getTotalGroupCount(hasParams ? params : undefined)
+      if (res.code === 200) {
+        overallCenterPerformance.value.TotalGroupCount = res.data
+      }
+    } catch (error) {
+      console.error('获取中心整体概览失败:', error)
+    }
   }
-  return statusMap[status] || '未知'
-}
+  // 中心转化率
+  async function CenterConversionRate() {
+    const params = getRequestParams()
+    const hasParams = params.user_name
+    try {
+      const res = await getCenterConversionRate(hasParams ? params : undefined)
+      if (res.code === 200) {
+        overallCenterPerformance.value.CenterConversionRate = res.data
+      }
+    } catch (error) {
+      console.error('获取中心整体概览失败:', error)
+    }
+  }
+  // 中心通话次数
+  async function CenterTotalCallCount() {
+    const params = getRequestParams()
+    const hasParams = params.user_name
+    try {
+      const res = await getTotalCallCount(hasParams ? params : undefined)
+      if (res.code === 200) {
+        overallCenterPerformance.value.TotalCallCount = res.data
+      }
+    } catch (error) {
+      console.error('获取中心整体概览失败:', error)
+    }
+  }
+  // 新增客户
+  async function CenterNewCustomer() {
+    const params = getRequestParams()
+    const hasParams = params.user_name
+    try {
+      const res = await getNewCustomer(hasParams ? params : undefined)
+      if (res.code === 200) {
+        overallCenterPerformance.value.NewCustomer = res.data
+      }
+    } catch (error) {
+      console.error('获取中心整体概览失败:', error)
+    }
+  }
+  // 定金转化率
+  async function CenterDepositConversionRate() {
+    const params = getRequestParams()
+    const hasParams = params.user_name
+    try {
+      const res = await getDepositConversionRate(hasParams ? params : undefined)
+      if (res.code === 200) {
+        overallCenterPerformance.value.DepositConversionRate = res.data
+      }
+    } catch (error) {
+      console.error('获取中心整体概览失败:', error)
+    }
+  }
+  // 客户类型
+  async function CenterCustomerType() {
+    const params = getRequestParams()
+    const hasParams = params.user_name
+    try {
+      const res = await getCustomerTypeDistribution(hasParams ? params : undefined)
+      if (res.code === 200) {
+        customerTypeDistribution.value = res.data
+      }
+    } catch (error) {
+      console.error('获取中心整体概览失败:', error)
+    }
+  }
+  // 客户迫切解决的问题
+  async function CenterUrgentNeedToAddress() {
+    const params = getRequestParams()
+    const hasParams = params.user_name
+    try {
+      const res = await getUrgentNeedToAddress(hasParams ? params : undefined)
+      if (res.code === 200) {
+        urgentNeedToAddress.value = res.data
+        /**
+         * data
+: 
+{user_name: "刘瑞", user_level: 4,…}
+center_urgent_issue_counts
+: 
+{成绩提升: 1, 少玩手机: 1, 回归学校: 0, 心理健康: 0}
+回归学校
+: 
+0
+少玩手机
+: 
+1
+心理健康
+: 
+0
+成绩提升
+: 
+1
+center_urgent_issue_ratio
+: 
+{成绩提升: "50.00%", 少玩手机: "50.00%", 回归学校: "0.00%", 心理健康: "0.00%"}
+回归学校
+: 
+"0.00%"
+少玩手机
+: 
+"50.00%"
+心理健康
+: 
+"0.00%"
+成绩提升
+: 
+"50.00%"
+user_level
+: 
+4
+user_name
+: 
+"刘瑞"
+         */
+      }
+    } catch (error) {
+      console.error('获取中心整体概览失败:', error)
+    }
+  }
+
+
+
+
+  // 当前选中的组别，默认为第一个
+  const selectedGroup = ref(groups[0])
+
+  // 选择组别函数
+  const selectGroup = (group) => {
+    selectedGroup.value = group
+  }
+
+  // 格式化货币
+  const formatCurrency = (value) => {
+    if (value >= 10000) {
+      return (value / 10000).toFixed(1) + '万'
+    }
+    return value.toLocaleString()
+  }
+
+  // 获取状态样式类
+  const getStatusClass = (status) => {
+    return `status-${status}`
+  }
+
+  // 获取状态文本
+  const getStatusText = (status) => {
+    const statusMap = {
+      excellent: '优秀',
+      good: '良好',
+      average: '一般',
+      attention: '需关注',
+      poor: '待提升'
+    }
+    return statusMap[status] || '未知'
+  }
+  onMounted(async () => {
+    await CenterOverallCenterPerformance()
+    await CenterTotalGroupCount()
+    await CenterConversionRate()
+    await CenterTotalCallCount()
+    await CenterNewCustomer()
+    await CenterDepositConversionRate()
+    await CenterCustomerType()
+    await CenterUrgentNeedToAddress()
+
+  })
+
 </script>
 
 <style lang="scss" scoped>
-@import '@/assets/styles/main.scss';
+  @import '@/assets/styles/main.scss';
 
-.senior-manager-dashboard {
-  min-height: 100vh;
-  background-color: #f8fafc;
-}
-
-.dashboard-header {
-  background: white;
-  padding: 1.5rem 2rem;
-  border-bottom: 1px solid #e2e8f0;
-  
-  .header-content {
-    max-width: 1400px;
-    margin: 0 auto;
+  .senior-manager-dashboard {
+    min-height: 100vh;
+    background-color: #f8fafc;
   }
-  
-  .logo-section {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-  }
-  
-  .header-text {
-    h1 {
-      font-size: 1.6rem;
-      font-weight: bold;
-      color: #1e293b;
-      margin: 0 0 0.25rem 0;
-    }
-    
-    p {
-      color: #64748b;
-      margin: 0;
-      font-size: 0.95rem;
-    }
-  }
-  
-  .stage-info {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    
-    .stage-label {
-      color: #64748b;
-      font-size: 0.9rem;
-      font-weight: 500;
-    }
-    
-    .stage-value {
-      color: #3b82f6;
-      font-size: 0.9rem;
-      font-weight: 600;
-      background: #eff6ff;
-      padding: 0.25rem 0.75rem;
-      border-radius: 1rem;
-      margin-left: 0.5rem;
-    }
-  }
-}
 
-.dashboard-main {
-  max-width: 1400px;
-  margin: 0 auto;
-  padding: 1rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.top-section {
-  display: grid;
-  grid-template-columns: 2fr 1fr;
-  gap: 1rem;
-}
-
-.bottom-section {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 1rem;
-  margin-top: 1rem;
-}
-
-.left-section, .right-section {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.right-section {
-  max-height: 600px;
-  overflow: auto;
-}
-
-.action-items-compact {
-  height: 380px;
-  overflow: hidden;
-  
-  :deep(.action-items) {
-    height: 100%;
-    padding: 1rem;
-    
-    .actions-header {
-      margin-bottom: 1rem;
-      
-      h2 {
-        font-size: 1rem;
-      }
-      
-      .header-controls {
-        gap: 0.5rem;
-        
-        .priority-filter {
-          padding: 0.4rem;
-          font-size: 0.8rem;
-        }
-        
-        .add-btn {
-          padding: 0.4rem 0.8rem;
-          font-size: 0.8rem;
-        }
-      }
-    }
-    
-    .actions-summary {
-      grid-template-columns: repeat(4, 1fr);
-      gap: 0.5rem;
-      margin-bottom: 1rem;
-      
-      .summary-item {
-        padding: 0.5rem;
-        
-        .summary-count {
-          font-size: 1.2rem;
-        }
-        
-        .summary-label {
-          font-size: 0.7rem;
-        }
-      }
-    }
-    
-    .actions-list {
-      max-height: 230px;
-      overflow-y: auto;
-      
-      .action-item {
-        padding: 0.75rem;
-        margin-bottom: 0.5rem;
-        
-        .action-content {
-          .action-header {
-            margin-bottom: 0.25rem;
-            
-            .action-title {
-              font-size: 0.9rem;
-            }
-            
-            .action-meta {
-              gap: 0.25rem;
-              
-              .priority-badge {
-                padding: 0.2rem 0.4rem;
-                font-size: 0.7rem;
-              }
-              
-              .due-date {
-                font-size: 0.7rem;
-              }
-            }
-          }
-          
-          .action-description {
-            font-size: 0.8rem;
-            margin-bottom: 0.5rem;
-          }
-          
-          .action-details {
-            margin-bottom: 0.5rem;
-            
-            .detail-item {
-              font-size: 0.75rem;
-            }
-          }
-          
-          .action-footer {
-            .action-buttons {
-              .btn-edit, .btn-delete {
-                padding: 0.25rem 0.5rem;
-                font-size: 0.7rem;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-  
-  .customer-detail-section {
-    padding: 1rem;
-    margin-top: 0.75rem;
-  }
-}
-
-// BB-section 布局
-.BB-section {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  gap: 1rem;
-  margin-top: 1rem;
-  align-items: stretch;
-  
-  > * {
-    height: 100%;
-    min-height: 400px;
-  }
-}
-
-// 团队成员详情区域
-.team-detail-section {
-  background: white;
-  border-radius: 12px;
-  padding: 1.5rem;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  margin-top: 1rem;
-  
-  .team-detail-header {
-    margin-bottom: 2rem;
-    
-    h2 {
-      font-size: 1.4rem;
-      font-weight: 600;
-      color: #1e293b;
-      margin: 0 0 1rem 0;
-    }
-    
-    .team-summary {
-      display: flex;
-      gap: 2rem;
-      flex-wrap: wrap;
-      
-      .summary-item {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        
-        .label {
-          font-size: 0.9rem;
-          color: #64748b;
-          font-weight: 500;
-        }
-        
-        .value {
-          font-size: 0.9rem;
-          color: #1e293b;
-          font-weight: 600;
-        }
-      }
-    }
-  }
-  
-  .members-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-    gap: 1rem;
-    
-    .member-card {
-      background: #f8fafc;
-      border-radius: 10px;
-      padding: 1rem;
-      border: 1px solid #e2e8f0;
-      transition: all 0.2s ease;
-      
-      &:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-      }
-      
-      &.status-excellent {
-        border-left: 4px solid #10b981;
-        background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
-      }
-      
-      &.status-good {
-        border-left: 4px solid #3b82f6;
-        background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
-      }
-      
-      &.status-average {
-        border-left: 4px solid #f59e0b;
-        background: linear-gradient(135deg, #fffbeb 0%, #fefce8 100%);
-      }
-      
-      &.status-attention {
-        border-left: 4px solid #f97316;
-        background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
-      }
-      
-      &.status-poor {
-        border-left: 4px solid #ef4444;
-        background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
-      }
-      
-      .member-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: flex-start;
-        margin-bottom: 1rem;
-        
-        .member-info {
-          flex: 1;
-          
-          .member-name {
-            font-size: 1.1rem;
-            font-weight: 600;
-            color: #1e293b;
-            margin: 0 0 0.25rem 0;
-          }
-          
-          .member-position {
-            font-size: 0.85rem;
-            color: #64748b;
-            margin: 0 0 0.25rem 0;
-          }
-          
-          .member-phone {
-            font-size: 0.8rem;
-            color: #94a3b8;
-            margin: 0;
-          }
-        }
-        
-        .member-status {
-          display: flex;
-          flex-direction: column;
-          align-items: flex-end;
-          gap: 0.25rem;
-          
-          .status-badge {
-            padding: 0.25rem 0.5rem;
-            border-radius: 4px;
-            font-size: 0.75rem;
-            font-weight: 500;
-            
-            &.excellent {
-              background: #10b981;
-              color: white;
-            }
-            
-            &.good {
-              background: #3b82f6;
-              color: white;
-            }
-            
-            &.average {
-              background: #f59e0b;
-              color: white;
-            }
-            
-            &.attention {
-              background: #f97316;
-              color: white;
-            }
-            
-            &.poor {
-              background: #ef4444;
-              color: white;
-            }
-          }
-          
-          .join-date {
-            font-size: 0.75rem;
-            color: #94a3b8;
-          }
-        }
-      }
-      
-      .member-metrics {
-        .metric-row {
-          display: grid;
-          grid-template-columns: 1fr 1fr;
-          gap: 1rem;
-          margin-bottom: 0.75rem;
-          
-          &:last-child {
-            margin-bottom: 0;
-          }
-          
-          .metric-item {
-            display: flex;
-            flex-direction: column;
-            gap: 0.25rem;
-            
-            .metric-label {
-              font-size: 0.75rem;
-              color: #64748b;
-              font-weight: 500;
-            }
-            
-            .metric-value {
-              font-size: 0.9rem;
-              color: #1e293b;
-              font-weight: 600;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-// 客户详情区域
-.customer-detail-section {
-  background: white;
-  border-radius: 12px;
-  padding: 1.5rem;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  margin-top: 1rem;
-}
-
-// 移动端适配
-@media (max-width: 768px) {
   .dashboard-header {
-    padding: 1rem;
-    
+    background: white;
+    padding: 1.5rem 2rem;
+    border-bottom: 1px solid #e2e8f0;
+
+    .header-content {
+      max-width: 1400px;
+      margin: 0 auto;
+    }
+
+    .logo-section {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 1rem;
+    }
+
     .header-text {
       h1 {
-        font-size: 1.3rem;
+        font-size: 1.6rem;
+        font-weight: bold;
+        color: #1e293b;
+        margin: 0 0 0.25rem 0;
       }
-      
+
       p {
-        font-size: 0.85rem;
+        color: #64748b;
+        margin: 0;
+        font-size: 0.95rem;
+      }
+    }
+
+    .stage-info {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .stage-label {
+        color: #64748b;
+        font-size: 0.9rem;
+        font-weight: 500;
+      }
+
+      .stage-value {
+        color: #3b82f6;
+        font-size: 0.9rem;
+        font-weight: 600;
+        background: #eff6ff;
+        padding: 0.25rem 0.75rem;
+        border-radius: 1rem;
+        margin-left: 0.5rem;
       }
     }
-  }
-  
-  .dashboard-main {
-    padding: 0.5rem;
-    gap: 0.75rem;
-  }
-  
-  .top-section {
-    grid-template-columns: 1fr;
-  }
-  
-  .bottom-section {
-    grid-template-columns: 1fr;
   }
 
-  .BB-section {
-    grid-template-columns: 1fr;
-    gap: 0.75rem;
-  }
-  
-  .right-section {
-    height: auto;
-  }
-  
-  .action-items-compact {
-    height: 300px;
-    
-    :deep(.action-items) {
-      .actions-summary {
-        grid-template-columns: repeat(4, 1fr);
-        
-        .summary-item {
-          padding: 0.4rem;
-          
-          .summary-count {
-            font-size: 1rem;
-          }
-          
-          .summary-label {
-            font-size: 0.6rem;
-          }
-        }
-      }
-      
-      .actions-list {
-        max-height: 150px;
-      }
-    }
-  }
-  
-  .team-detail-section {
+  .dashboard-main {
+    max-width: 1400px;
+    margin: 0 auto;
     padding: 1rem;
-    margin-top: 0.75rem;
-    
-    .team-detail-header {
-      margin-bottom: 1.5rem;
-      
-      h2 {
-        font-size: 1.2rem;
-      }
-      
-      .team-summary {
-        gap: 1rem;
-        
-        .summary-item {
-          .label, .value {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .top-section {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    gap: 1rem;
+  }
+
+  .bottom-section {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+    margin-top: 1rem;
+  }
+
+  .left-section,
+  .right-section {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .right-section {
+    max-height: 600px;
+    overflow: auto;
+  }
+
+  .action-items-compact {
+    height: 380px;
+    overflow: hidden;
+
+    :deep(.action-items) {
+      height: 100%;
+      padding: 1rem;
+
+      .actions-header {
+        margin-bottom: 1rem;
+
+        h2 {
+          font-size: 1rem;
+        }
+
+        .header-controls {
+          gap: 0.5rem;
+
+          .priority-filter {
+            padding: 0.4rem;
+            font-size: 0.8rem;
+          }
+
+          .add-btn {
+            padding: 0.4rem 0.8rem;
             font-size: 0.8rem;
           }
         }
       }
-    }
-    
-    .members-grid {
-      grid-template-columns: 1fr;
-      gap: 0.75rem;
-      
-      .member-card {
-        padding: 0.75rem;
-        
-        .member-header {
-          flex-direction: column;
-          gap: 0.75rem;
-          
-          .member-status {
-            align-items: flex-start;
-            flex-direction: row;
-            gap: 0.5rem;
+
+      .actions-summary {
+        grid-template-columns: repeat(4, 1fr);
+        gap: 0.5rem;
+        margin-bottom: 1rem;
+
+        .summary-item {
+          padding: 0.5rem;
+
+          .summary-count {
+            font-size: 1.2rem;
+          }
+
+          .summary-label {
+            font-size: 0.7rem;
           }
         }
-        
+      }
+
+      .actions-list {
+        max-height: 230px;
+        overflow-y: auto;
+
+        .action-item {
+          padding: 0.75rem;
+          margin-bottom: 0.5rem;
+
+          .action-content {
+            .action-header {
+              margin-bottom: 0.25rem;
+
+              .action-title {
+                font-size: 0.9rem;
+              }
+
+              .action-meta {
+                gap: 0.25rem;
+
+                .priority-badge {
+                  padding: 0.2rem 0.4rem;
+                  font-size: 0.7rem;
+                }
+
+                .due-date {
+                  font-size: 0.7rem;
+                }
+              }
+            }
+
+            .action-description {
+              font-size: 0.8rem;
+              margin-bottom: 0.5rem;
+            }
+
+            .action-details {
+              margin-bottom: 0.5rem;
+
+              .detail-item {
+                font-size: 0.75rem;
+              }
+            }
+
+            .action-footer {
+              .action-buttons {
+
+                .btn-edit,
+                .btn-delete {
+                  padding: 0.25rem 0.5rem;
+                  font-size: 0.7rem;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .customer-detail-section {
+      padding: 1rem;
+      margin-top: 0.75rem;
+    }
+  }
+
+  // BB-section 布局
+  .BB-section {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 1rem;
+    margin-top: 1rem;
+    align-items: stretch;
+
+    >* {
+      height: 100%;
+      min-height: 400px;
+    }
+  }
+
+  // 团队成员详情区域
+  .team-detail-section {
+    background: white;
+    border-radius: 12px;
+    padding: 1.5rem;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    margin-top: 1rem;
+
+    .team-detail-header {
+      margin-bottom: 2rem;
+
+      h2 {
+        font-size: 1.4rem;
+        font-weight: 600;
+        color: #1e293b;
+        margin: 0 0 1rem 0;
+      }
+
+      .team-summary {
+        display: flex;
+        gap: 2rem;
+        flex-wrap: wrap;
+
+        .summary-item {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+
+          .label {
+            font-size: 0.9rem;
+            color: #64748b;
+            font-weight: 500;
+          }
+
+          .value {
+            font-size: 0.9rem;
+            color: #1e293b;
+            font-weight: 600;
+          }
+        }
+      }
+    }
+
+    .members-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+      gap: 1rem;
+
+      .member-card {
+        background: #f8fafc;
+        border-radius: 10px;
+        padding: 1rem;
+        border: 1px solid #e2e8f0;
+        transition: all 0.2s ease;
+
+        &:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        }
+
+        &.status-excellent {
+          border-left: 4px solid #10b981;
+          background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
+        }
+
+        &.status-good {
+          border-left: 4px solid #3b82f6;
+          background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
+        }
+
+        &.status-average {
+          border-left: 4px solid #f59e0b;
+          background: linear-gradient(135deg, #fffbeb 0%, #fefce8 100%);
+        }
+
+        &.status-attention {
+          border-left: 4px solid #f97316;
+          background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
+        }
+
+        &.status-poor {
+          border-left: 4px solid #ef4444;
+          background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
+        }
+
+        .member-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: flex-start;
+          margin-bottom: 1rem;
+
+          .member-info {
+            flex: 1;
+
+            .member-name {
+              font-size: 1.1rem;
+              font-weight: 600;
+              color: #1e293b;
+              margin: 0 0 0.25rem 0;
+            }
+
+            .member-position {
+              font-size: 0.85rem;
+              color: #64748b;
+              margin: 0 0 0.25rem 0;
+            }
+
+            .member-phone {
+              font-size: 0.8rem;
+              color: #94a3b8;
+              margin: 0;
+            }
+          }
+
+          .member-status {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-end;
+            gap: 0.25rem;
+
+            .status-badge {
+              padding: 0.25rem 0.5rem;
+              border-radius: 4px;
+              font-size: 0.75rem;
+              font-weight: 500;
+
+              &.excellent {
+                background: #10b981;
+                color: white;
+              }
+
+              &.good {
+                background: #3b82f6;
+                color: white;
+              }
+
+              &.average {
+                background: #f59e0b;
+                color: white;
+              }
+
+              &.attention {
+                background: #f97316;
+                color: white;
+              }
+
+              &.poor {
+                background: #ef4444;
+                color: white;
+              }
+            }
+
+            .join-date {
+              font-size: 0.75rem;
+              color: #94a3b8;
+            }
+          }
+        }
+
         .member-metrics {
           .metric-row {
-            grid-template-columns: 1fr;
-            gap: 0.5rem;
-            margin-bottom: 0.5rem;
-            
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 1rem;
+            margin-bottom: 0.75rem;
+
+            &:last-child {
+              margin-bottom: 0;
+            }
+
             .metric-item {
+              display: flex;
+              flex-direction: column;
+              gap: 0.25rem;
+
               .metric-label {
-                font-size: 0.7rem;
+                font-size: 0.75rem;
+                color: #64748b;
+                font-weight: 500;
               }
-              
+
               .metric-value {
-                font-size: 0.8rem;
+                font-size: 0.9rem;
+                color: #1e293b;
+                font-weight: 600;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // 客户详情区域
+  .customer-detail-section {
+    background: white;
+    border-radius: 12px;
+    padding: 1.5rem;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    margin-top: 1rem;
+  }
+
+  // 移动端适配
+  @media (max-width: 768px) {
+    .dashboard-header {
+      padding: 1rem;
+
+      .header-text {
+        h1 {
+          font-size: 1.3rem;
+        }
+
+        p {
+          font-size: 0.85rem;
+        }
+      }
+    }
+
+    .dashboard-main {
+      padding: 0.5rem;
+      gap: 0.75rem;
+    }
+
+    .top-section {
+      grid-template-columns: 1fr;
+    }
+
+    .bottom-section {
+      grid-template-columns: 1fr;
+    }
+
+    .BB-section {
+      grid-template-columns: 1fr;
+      gap: 0.75rem;
+    }
+
+    .right-section {
+      height: auto;
+    }
+
+    .action-items-compact {
+      height: 300px;
+
+      :deep(.action-items) {
+        .actions-summary {
+          grid-template-columns: repeat(4, 1fr);
+
+          .summary-item {
+            padding: 0.4rem;
+
+            .summary-count {
+              font-size: 1rem;
+            }
+
+            .summary-label {
+              font-size: 0.6rem;
+            }
+          }
+        }
+
+        .actions-list {
+          max-height: 150px;
+        }
+      }
+    }
+
+    .team-detail-section {
+      padding: 1rem;
+      margin-top: 0.75rem;
+
+      .team-detail-header {
+        margin-bottom: 1.5rem;
+
+        h2 {
+          font-size: 1.2rem;
+        }
+
+        .team-summary {
+          gap: 1rem;
+
+          .summary-item {
+
+            .label,
+            .value {
+              font-size: 0.8rem;
+            }
+          }
+        }
+      }
+
+      .members-grid {
+        grid-template-columns: 1fr;
+        gap: 0.75rem;
+
+        .member-card {
+          padding: 0.75rem;
+
+          .member-header {
+            flex-direction: column;
+            gap: 0.75rem;
+
+            .member-status {
+              align-items: flex-start;
+              flex-direction: row;
+              gap: 0.5rem;
+            }
+          }
+
+          .member-metrics {
+            .metric-row {
+              grid-template-columns: 1fr;
+              gap: 0.5rem;
+              margin-bottom: 0.5rem;
+
+              .metric-item {
+                .metric-label {
+                  font-size: 0.7rem;
+                }
+
+                .metric-value {
+                  font-size: 0.8rem;
+                }
               }
             }
           }
@@ -1297,5 +953,4 @@ const getStatusText = (status) => {
       }
     }
   }
-}
 </style>
\ No newline at end of file