feat(统计模式): 添加按月/按期统计切换功能并优化客户阶段显示

- 在CenterOverview组件中添加统计模式切换按钮
- 实现统计模式切换逻辑并触发数据重新加载
- 优化SalesTimelineWithTaskList的客户阶段显示和计算逻辑
- 更新API调用参数以支持不同统计模式
- 调整样式和布局以适应新功能

my-vue-app/src/views/secondTop/components/CenterOverview.vue

@@ -1,14 +1,28 @@
 <template>
   <div class="center-overview">
-    <h2>中心整体概览</h2>
+    <div class="overview-header">
+      <h2>中心整体概览</h2>
+      <div class="stats-toggle">
+        <button 
+          :class="['toggle-btn', { active: statsMode === 'monthly' }]"
+          @click="switchStatsMode('monthly')"
+        >
+          按月统计
+        </button>
+        <button 
+          :class="['toggle-btn', { active: statsMode === 'period' }]"
+          @click="switchStatsMode('period')"
+        >
+          按期统计
+        </button>
+      </div>
+    </div>
     <div class="overview-grid">
       <div class="overview-card primary">
         <div class="card-header">
           <span class="card-title">
             中心总业绩
-            <i
-                  @mouseenter="showTooltip($event, 'centerPerformance')"
-                  @mouseleave="hideTooltip">ⓘ</i>
+            <i @mouseenter="showTooltip($event, 'centerPerformance')" @mouseleave="hideTooltip">ⓘ</i>
           </span>
           <span class="card-trend positive">{{ props.overallData.CenterPerformance?.center_monthly_vs_previous_deals }} vs 上期</span>
         </div>
@@ -100,9 +114,24 @@
 </template>
 
 <script setup>
-import { reactive } from 'vue'
+import { reactive, ref } from 'vue'
 import Tooltip from '@/components/Tooltip.vue'
 
+// 统计模式状态
+const statsMode = ref('monthly') // 默认按月统计
+
+// 定义emit事件
+const emit = defineEmits(['update-check-type'])
+
+// 切换统计模式
+const switchStatsMode = (mode) => {
+  statsMode.value = mode
+  // 向父组件发送事件，修改CheckType的值
+  const checkTypeValue = mode === 'monthly' ? 'month' : 'period'
+  emit('update-check-type', checkTypeValue)
+  console.log('切换统计模式:', mode, '发送CheckType值:', checkTypeValue)
+}
+
 // 中心整体概览组件
 const props = defineProps({
   overallData: {
@@ -352,8 +381,69 @@ const hideTooltip = () => {
   }
 }
 
+// 切换按钮样式
+.overview-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+  
+  h2 {
+    margin: 0;
+    color: #1e293b;
+    font-size: 1.5rem;
+    font-weight: 600;
+  }
+  
+  .stats-toggle {
+    display: flex;
+    background: #f1f5f9;
+    border-radius: 8px;
+    padding: 4px;
+    gap: 2px;
+    
+    .toggle-btn {
+      padding: 8px 16px;
+      border: none;
+      background: transparent;
+      color: #64748b;
+      font-size: 0.875rem;
+      font-weight: 500;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      
+      &:hover {
+        background: #e2e8f0;
+        color: #475569;
+      }
+      
+      &.active {
+        background: #ffffff;
+        color: #0f172a;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+      }
+    }
+  }
+}
+
 // 移动端适配
 @media (max-width: 768px) {
+  .overview-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+    
+    .stats-toggle {
+      align-self: stretch;
+      
+      .toggle-btn {
+        flex: 1;
+        text-align: center;
+      }
+    }
+  }
+  
   .center-overview {
     padding: 1rem;
     

my-vue-app/src/views/secondTop/secondTop.vue

@@ -39,7 +39,7 @@
       <!-- Top Section - Center Overview and Action Items -->
       <div class="top-section">
         <!-- Center Performance Overview -->
-        <CenterOverview :overall-data="overallCenterPerformance" />
+        <CenterOverview :overall-data="overallCenterPerformance" @update-check-type="updateCheckType" />
 
         <!-- Action Items (Compact) -->
         <div class="action-items-compact">
@@ -181,6 +181,7 @@
   const router = useRouter();
   // 用户store实例
   const userStore = useUserStore();
+  const CheckType = ref('month')
   // 营期调控逻辑
     // This would ideally come from a prop or API call based on the logged-in user
 const centerData = ref({
@@ -417,7 +418,10 @@ const centerData = ref({
     const params = getRequestParams()
     const hasParams = params.user_name
     try {
-      const res = await getOverallCenterPerformance(hasParams ? params : undefined)
+      const res = await getOverallCenterPerformance(hasParams ? {
+        ...params,
+        check_type: CheckType.value
+      } : {check_type: CheckType.value})
       if (res.code === 200) {
         overallCenterPerformance.value.CenterPerformance = res.data
       }
@@ -430,7 +434,10 @@ const centerData = ref({
     const params = getRequestParams()
     const hasParams = params.user_name
     try {
-      const res = await getTotalGroupCount(hasParams ? params : undefined)
+      const res = await getTotalGroupCount(hasParams ? {
+        ...params,
+        check_type: CheckType.value
+      } : {check_type: CheckType.value})
       if (res.code === 200) {
         overallCenterPerformance.value.TotalGroupCount = res.data
       }
@@ -443,7 +450,10 @@ const centerData = ref({
     const params = getRequestParams()
     const hasParams = params.user_name
     try {
-      const res = await getCenterConversionRate(hasParams ? params : undefined)
+      const res = await getCenterConversionRate(hasParams ? {
+        ...params,
+        check_type: CheckType.value
+      } : {check_type: CheckType.value})
       if (res.code === 200) {
         overallCenterPerformance.value.CenterConversionRate = res.data
       }
@@ -456,7 +466,10 @@ const centerData = ref({
     const params = getRequestParams()
     const hasParams = params.user_name
     try {
-      const res = await getTotalCallCount(hasParams ? params : undefined)
+      const res = await getTotalCallCount(hasParams ? {
+        ...params,
+        check_type: CheckType.value
+      } : {check_type: CheckType.value})
       if (res.code === 200) {
         overallCenterPerformance.value.TotalCallCount = res.data
       }
@@ -469,7 +482,10 @@ const centerData = ref({
     const params = getRequestParams()
     const hasParams = params.user_name
     try {
-      const res = await getNewCustomer(hasParams ? params : undefined)
+      const res = await getNewCustomer(hasParams ? {
+        ...params,
+        check_type: CheckType.value
+      } : {check_type: CheckType.value})
       if (res.code === 200) {
         overallCenterPerformance.value.NewCustomer = res.data
       }
@@ -482,7 +498,10 @@ const centerData = ref({
     const params = getRequestParams()
     const hasParams = params.user_name
     try {
-      const res = await getDepositConversionRate(hasParams ? params : undefined)
+      const res = await getDepositConversionRate(hasParams ? {
+        ...params,
+        check_type: CheckType.value
+      } : {check_type: CheckType.value})
       if (res.code === 200) {
         overallCenterPerformance.value.DepositConversionRate = res.data
       }
@@ -773,6 +792,27 @@ const conversionRateVsAverage = ref({})
     }
   })
 
+  // 更新CheckType并重新获取数据
+  const updateCheckType = async (newValue) => {
+    CheckType.value = newValue
+    console.log('CheckType已更新为:', newValue)
+    
+    // 重新调用相关API函数
+    isLoading.value = true
+    try {
+      await CenterOverallCenterPerformance()
+      await CenterTotalGroupCount()
+      await CenterConversionRate()
+      await CenterTotalCallCount()
+      await CenterNewCustomer()
+      await CenterDepositConversionRate()
+    } catch (error) {
+      console.error('重新获取数据失败:', error)
+    } finally {
+      isLoading.value = false
+    }
+  }
+
 // 工具提示状态
 const tooltip = reactive({
   visible: false,