From 4ad91cabe3637a4eedad5747546f154658edf1f1 Mon Sep 17 00:00:00 2001
From: lbw_9527443 <780139497@qq.com>
Date: Fri, 29 Aug 2025 16:04:36 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E8=90=A5=E6=9C=9F=E7=AE=A1=E7=90=86):=20?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=8E=86=E5=8F=B2=E8=90=A5=E6=9C=9F=E6=9F=A5?=
 =?UTF-8?q?=E7=9C=8B=E4=B8=8E=E5=88=87=E6=8D=A2=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在API层新增获取历史营期和切换历史营期的接口方法
- 在日历组件中添加历史营期查看界面和状态指示器
- 实现历史营期列表展示、选中切换和返回当前营期功能
- 调整统计模式切换按钮顺序并修正参数传递逻辑
- 添加相关样式优化选中状态和操作按钮的交互效果
---
 my-vue-app/src/api/secondTop.js               |   9 +-
 .../views/secondTop/components/Calendar.vue   | 230 +++++++++++++++---
 .../secondTop/components/CenterOverview.vue   |  15 +-
 3 files changed, 218 insertions(+), 36 deletions(-)

diff --git a/my-vue-app/src/api/secondTop.js b/my-vue-app/src/api/secondTop.js
index 126e845..bf59aa3 100644
--- a/my-vue-app/src/api/secondTop.js
+++ b/my-vue-app/src/api/secondTop.js
@@ -72,7 +72,14 @@ export const getExcellentRecordFile = (params) => {
 export const changeCampPeriod = (params) => {
   return https.post('/api/v1/level_four/overview/change_camp_period', params)
 }
-
+// 获取历史营期  /api/v1/level_four/overview/get_history_camp_period
+export const getHistoryCampPeriod = (params) => {
+  return https.post('/api/v1/level_four/overview/get_history_camp_period', params)
+}
+// 切换历史营期   /api/v1/level_four/overview/switch_history_camp_period
+export const switchHistoryCampPeriod = (params) => {
+  return https.post('/api/v1/level_four/overview/switch_history_camp_period', params)
+}
 
 
 
diff --git a/my-vue-app/src/views/secondTop/components/Calendar.vue b/my-vue-app/src/views/secondTop/components/Calendar.vue
index db74070..03cce9d 100644
--- a/my-vue-app/src/views/secondTop/components/Calendar.vue
+++ b/my-vue-app/src/views/secondTop/components/Calendar.vue
@@ -27,6 +27,12 @@
           </svg>
           历史
         </button>
+        <button v-if="isViewingHistory" @click="returnToCurrentPeriod" class="current-btn">
+          <svg viewBox="0 0 24 24" width="16" height="16">
+            <path fill="currentColor" d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6M12,8A4,4 0 0,0 8,12A4,4 0 0,0 12,16A4,4 0 0,0 16,12A4,4 0 0,0 12,8Z"/>
+          </svg>
+          返回当前
+        </button>
         <button @click="nextMonth" class="nav-btn">
           <svg viewBox="0 0 24 24" width="16" height="16">
             <path fill="currentColor" d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
@@ -35,6 +41,22 @@
       </div>
     </div>
 
+    <!-- 营期状态指示器 -->
+    <div class="period-indicator">
+      <div v-if="isViewingHistory" class="history-indicator">
+        <svg viewBox="0 0 24 24" width="16" height="16">
+          <path fill="currentColor" d="M13,3A9,9 0 0,0 4,12H1L4.89,15.89L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3Z"/>
+        </svg>
+        <span>正在查看：第{{ selectedHistoryPeriod.periodNum }}期历史营期</span>
+      </div>
+      <div v-else class="current-indicator">
+        <svg viewBox="0 0 24 24" width="16" height="16">
+          <path fill="currentColor" d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6M12,8A4,4 0 0,0 8,12A4,4 0 0,0 12,16A4,4 0 0,0 16,12A4,4 0 0,0 12,8Z"/>
+        </svg>
+        <span>当前营期</span>
+      </div>
+    </div>
+
     <!-- 星期标题 -->
     <div class="weekdays">
       <div v-for="day in weekdays" :key="day" class="weekday">
@@ -222,9 +244,15 @@
           <p>暂无历史营期记录</p>
         </div>
         <div v-else class="history-list">
-          <div v-for="(period, index) in historyPeriods" :key="index" class="history-item">
+          <div v-for="(period, index) in historyPeriods" :key="index" 
+               class="history-item" 
+               :class="{ 'selected': selectedHistoryPeriod && selectedHistoryPeriod.periodNum === period.periodNum }"
+               @click="switchToHistoryPeriod(period)">
             <div class="period-info">
-              <div class="period-title">第 {{ index + 1 }} 期营期</div>
+              <div class="period-title">
+                第 {{ period.periodNum }} 期营期
+                <span v-if="selectedHistoryPeriod && selectedHistoryPeriod.periodNum === period.periodNum" class="selected-badge">当前查看</span>
+              </div>
               <div class="period-details">
                 <div class="detail-row">
                   <span class="label">开始时间：</span>
@@ -258,7 +286,7 @@
 import { ref, computed, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { useUserStore } from '@/stores/user';
-import {getCampPeriodAdmin, changeCampPeriod} from '@/api/secondTop.js'
+import {getCampPeriodAdmin,changeCampPeriod,getHistoryCampPeriod,switchHistoryCampPeriod} from '@/api/secondTop.js'
 
 // 响应式数据
 const currentYear = ref(new Date().getFullYear());
@@ -285,6 +313,8 @@ const nextCampRestDays = ref();
 // 历史营期弹框相关
 const showHistoryModal = ref(false);
 const historyPeriods = ref([]);
+const selectedHistoryPeriod = ref(null); // 当前选中的历史营期
+const isViewingHistory = ref(false); // 是否正在查看历史营期
 
 // 获取本地时区的今日日期字符串
 const getTodayString = () => {
@@ -482,35 +512,78 @@ const showHistory = async () => {
 // 方法：加载历史营期数据
 const loadHistoryPeriods = async () => {
   try {
-    // 这里可以调用API获取历史营期数据
-    // const result = await getHistoryCampPeriods();
-    // 模拟历史营期数据
-    historyPeriods.value = [
-      {
-        startDate: '2024-01-15',
-        endDate: '2024-01-28',
-        dataDays: 10,
-        restDays: 4,
+    // 调用API获取历史营期数据
+    const params = {
+      user_level: userStore.userInfo.user_level.toString(),
+      user_name: userStore.userInfo.username
+    };
+    
+    const result = await getHistoryCampPeriod(params);
+    
+    if (result && result.data && result.data.history_camp_period) {
+      // 将API返回的数据映射到组件需要的格式
+      historyPeriods.value = result.data.history_camp_period.map(period => ({
+        periodNum: period.history_camp_period_num,
+        startDate: period.start_time,
+        endDate: period.end_time,
+        dataDays: period.receipt_data_days,
+        restDays: period.rest_days,
         status: 'completed'
-      },
-      {
-        startDate: '2024-02-01',
-        endDate: '2024-02-14',
-        dataDays: 8,
-        restDays: 6,
-        status: 'completed'
-      },
-      {
-        startDate: '2024-02-20',
-        endDate: '2024-03-05',
-        dataDays: 12,
-        restDays: 2,
-        status: 'completed'
-      }
-    ];
+      }));
+    } else {
+      historyPeriods.value = [];
+    }
   } catch (error) {
     console.error('加载历史营期数据失败:', error);
     historyPeriods.value = [];
+    alert('加载历史营期数据失败，请重试');
+  }
+};
+
+// 方法：切换到历史营期
+const switchToHistoryPeriod = async (period) => {
+  try {
+    const params = {
+      center_leader: userStore.userInfo.username || "潘加俊",
+      history_camp_period_num: period.periodNum
+    };
+    
+    const result = await switchHistoryCampPeriod(params);
+    
+    if (result && result.code === 200) {
+      // 设置当前选中的历史营期
+      selectedHistoryPeriod.value = period;
+      isViewingHistory.value = true;
+      
+      // 关闭历史营期弹框
+      showHistoryModal.value = false;
+      
+      // 重新获取营期数据以更新日历显示
+      await CenterCampPeriodAdmin();
+      
+      alert(`已切换到第${period.periodNum}期历史营期`);
+    } else {
+      alert('切换历史营期失败，请重试');
+    }
+  } catch (error) {
+    console.error('切换历史营期失败:', error);
+    alert('切换历史营期失败，请重试');
+  }
+};
+
+// 方法：返回当前营期
+const returnToCurrentPeriod = async () => {
+  try {
+    selectedHistoryPeriod.value = null;
+    isViewingHistory.value = false;
+    
+    // 重新获取当前营期数据
+    await CenterCampPeriodAdmin();
+    
+    alert('已返回当前营期');
+  } catch (error) {
+    console.error('返回当前营期失败:', error);
+    alert('返回当前营期失败，请重试');
   }
 };
 
@@ -1564,4 +1637,105 @@ onMounted(async () => {
   background: linear-gradient(135deg, #ffc107, #fd7e14);
   color: white;
 }
+
+/* 历史营期选中状态样式 */
+.history-item {
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border: 2px solid transparent;
+}
+
+.history-item:hover {
+  background: rgba(0, 123, 255, 0.05);
+  border-color: rgba(0, 123, 255, 0.2);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
+}
+
+.history-item.selected {
+  background: rgba(0, 123, 255, 0.1);
+  border-color: #007bff;
+  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
+}
+
+.history-item.selected .period-title {
+  color: #007bff;
+  font-weight: 600;
+}
+
+.selected-badge {
+  display: inline-block;
+  background: linear-gradient(135deg, #007bff, #0056b3);
+  color: white;
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: 10px;
+  margin-left: 8px;
+  font-weight: 500;
+}
+
+/* 返回当前营期按钮样式 */
+.current-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  background: linear-gradient(135deg, #28a745, #20c997);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2);
+}
+
+.current-btn:hover {
+  background: linear-gradient(135deg, #218838, #1e7e34);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
+}
+
+.current-btn:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2);
+}
+
+/* 营期状态指示器样式 */
+.period-indicator {
+  display: flex;
+  justify-content: center;
+  padding: 8px 0;
+  margin-bottom: 8px;
+  border-bottom: 1px solid #e9ecef;
+}
+
+.history-indicator,
+.current-indicator {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border-radius: 20px;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.history-indicator {
+  background: linear-gradient(135deg, #ffc107, #fd7e14);
+  color: white;
+  box-shadow: 0 2px 4px rgba(255, 193, 7, 0.3);
+}
+
+.current-indicator {
+  background: linear-gradient(135deg, #28a745, #20c997);
+  color: white;
+  box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
+}
+
+.history-indicator svg,
+.current-indicator svg {
+  flex-shrink: 0;
+}
 </style>
\ No newline at end of file
diff --git a/my-vue-app/src/views/secondTop/components/CenterOverview.vue b/my-vue-app/src/views/secondTop/components/CenterOverview.vue
index bd79905..2d06d30 100644
--- a/my-vue-app/src/views/secondTop/components/CenterOverview.vue
+++ b/my-vue-app/src/views/secondTop/components/CenterOverview.vue
@@ -3,18 +3,19 @@
     <div class="overview-header">
       <h2>中心整体概览</h2>
       <div class="stats-toggle">
+         <button 
+          :class="['toggle-btn', { active: statsMode === 'period' }]"
+          @click="switchStatsMode('period')"
+        >
+          按期统计
+        </button>
         <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">
@@ -126,7 +127,7 @@ const emit = defineEmits(['update-check-type'])
 const switchStatsMode = (mode) => {
   statsMode.value = mode
   // 向父组件发送事件，修改CheckType的值
-  const checkTypeValue = mode === 'monthly' ? 'month' : 'period'
+  const checkTypeValue = mode === 'monthly' ? 'period':'month'
   emit('update-check-type', checkTypeValue)
   console.log('切换统计模式:', mode, '发送CheckType值:', checkTypeValue)
 }