feat(团队分析): 添加团队和部门分析功能及弹窗

- 在api中添加获取团队各组分析报告的接口
- 在secondTop和seniorManager视图中添加团队分析弹窗组件
- 实现部门分析弹窗功能
- 添加样式和交互逻辑处理团队分析数据展示

my-vue-app/src/api/senorManger.js

@@ -84,4 +84,9 @@ export const getExcellentRecordFile = (params) => {
   return https.post('/api/v1/level_three/overview/get_current_center_excellent_record_file', params)
 }
 
+// 团队下各组分析报告 /api/v1/level_three/overview/team_every_group_report
+export const getTeamEveryGroupReport = (params) => {
+  return https.post('/api/v1/level_three/overview/team_every_group_report', params)
+}
+
 

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

@@ -113,7 +113,20 @@
             </div>
           </div>
           <div class="group-performance">
-           <button>团队整体分析</button>
+           <button @click="showTeamAnalysisModal">团队整体分析</button>
+          </div>
+        </div>
+
+        <!-- 团队整体分析弹窗 -->
+        <div v-if="showTeamAnalysis" class="team-analysis-modal" @click.self="closeTeamAnalysisModal">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h3>团队整体分析</h3>
+              <button class="close-btn" @click="closeTeamAnalysisModal">×</button>
+            </div>
+            <div class="modal-body">
+              <p>这里是团队整体分析的内容</p>
+            </div>
           </div>
         </div>
 
@@ -286,6 +299,9 @@ const cardVisibility = ref({
 // FeedbackForm 控制变量
 const showFeedbackForm = ref(false)
 
+// 团队整体分析弹窗控制变量
+const showTeamAnalysis = ref(false)
+
 // 更新卡片显示状态
 const updateCardVisibility = (newVisibility) => {
   Object.assign(cardVisibility.value, newVisibility)
@@ -300,6 +316,15 @@ const showFeedbackFormModal = () => {
 const closeFeedbackFormModal = () => {
   showFeedbackForm.value = false
 }
+
+// 团队整体分析弹窗控制方法
+const showTeamAnalysisModal = () => {
+  showTeamAnalysis.value = true
+}
+
+const closeTeamAnalysisModal = () => {
+  showTeamAnalysis.value = false
+}
   // 营期调控逻辑
     // This would ideally come from a prop or API call based on the logged-in user
 const centerData = ref({
@@ -1639,6 +1664,76 @@ const hideTooltip = () => {
     }
   }
   
+  /* 团队分析弹窗样式 */
+  .team-analysis-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+  }
+
+  .team-analysis-modal .modal-content {
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    width: 80%;
+    max-width: 600px;
+    max-height: 80vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .team-analysis-modal .modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem;
+    border-bottom: 1px solid #e2e8f0;
+  }
+
+  .team-analysis-modal .modal-header h3 {
+    margin: 0;
+    color: #1a202c;
+    font-size: 1.25rem;
+  }
+
+  .team-analysis-modal .close-btn {
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    cursor: pointer;
+    color: #718096;
+    padding: 0;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .team-analysis-modal .close-btn:hover {
+    color: #1a202c;
+  }
+
+  .team-analysis-modal .modal-body {
+    padding: 1rem;
+    overflow-y: auto;
+    flex: 1;
+  }
+
+  .team-analysis-modal .modal-body p {
+    margin: 0;
+    color: #4a5568;
+    line-height: 1.5;
+  }
+  
   // 路由导航顶栏样式
   .route-header {
     display: flex;

my-vue-app/src/views/senorManger/seniorManager.vue

@@ -28,12 +28,26 @@
           <div v-if="!isRouteNavigation">
             <!-- 用户下拉菜单 -->
           <div style="display: flex; align-items: center; gap: 20px;">
+    <button @click="showDepartmentAnalysisModal" class="feedback-btn">部门分析</button>
     <button @click="showFeedbackFormModal" class="feedback-btn">意见反馈</button>
     <FeedbackForm 
       :is-visible="showFeedbackForm"
       @close="closeFeedbackFormModal"
       @submit-feedback="closeFeedbackFormModal"
     />
+    <!-- 部门分析弹窗 -->
+    <div v-if="showDepartmentAnalysis" class="department-analysis-modal" @click.self="closeDepartmentAnalysisModal">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h3>部门分析</h3>
+          <button class="close-btn" @click="closeDepartmentAnalysisModal">×</button>
+        </div>
+        <div class="modal-body">
+          <p>这里是部门分析的内容</p>
+          <!-- 你可以在这里添加具体的部门分析内容 -->
+        </div>
+      </div>
+    </div>
     <UserDropdown 
       :card-visibility="cardVisibility"
       @update-card-visibility="updateCardVisibility"
@@ -131,7 +145,31 @@
             </div>
            
              <div class="group-performance">
-           <button>团队整体分析</button>
+           <button @click="showTeamAnalysisModal">团队整体分析</button>
+          </div>
+          </div>
+          
+          <!-- 团队分析弹窗 -->
+          <div v-if="showTeamAnalysis" class="team-analysis-modal" @click.self="closeTeamAnalysisModal">
+            <div class="modal-content">
+              <div class="modal-header">
+                <h3>团队整体分析</h3>
+                <button class="close-btn" @click="closeTeamAnalysisModal">×</button>
+              </div>
+              <div class="modal-body">
+                <div v-if="teamAnalysisData && teamAnalysisData.length > 0">
+                  <div v-for="(report, index) in teamAnalysisData" :key="index" class="report-item">
+                    <h4>报告时间: {{ report.start_time }} 至 {{ report.end_time }}</h4>
+                    <div v-if="report.report && report.report !== 'None' && report.report.trim() !== ''" class="report-content" v-html="formatReportContent(report.report)"></div>
+                    <div v-else class="no-report">
+                      <p>暂无分析报告</p>
+                    </div>
+                  </div>
+                </div>
+                <div v-else>
+                  <p>暂无团队分析数据</p>
+                </div>
+              </div>
             </div>
           </div>
           
@@ -219,7 +257,7 @@ import PerformanceComparison from './components/PerformanceComparison.vue'; // 1
 import { getOverallTeamPerformance,getTotalGroupCount,getConversionRate,getTotalCallCount,
          getNewCustomer,getDepositConversionRate,getActiveCustomerCommunicationRate,getAverageAnswerTime,
          getTimeoutRate,getTableFillingRate,getUrgentNeedToAddress,getTeamRanking,getTeamRankingInfo,
-         getAbnormalResponseRate,getTeamSalesFunnel,getExcellentRecordFile } from '@/api/senorManger.js'  
+         getAbnormalResponseRate,getTeamSalesFunnel,getExcellentRecordFile,getTeamEveryGroupReport } from '@/api/senorManger.js'  
 import { useUserStore } from '@/stores/user.js'
 import FeedbackForm from "@/components/FeedbackForm.vue";
 
@@ -351,6 +389,12 @@ const formCompletionRate = ref(90)
 const CheckType = ref('month')
 // FeedbackForm 控制变量
 const showFeedbackForm = ref(false)
+// 部门分析弹窗控制变量
+const showDepartmentAnalysis = ref(false)
+// 团队分析弹窗控制变量
+const showTeamAnalysis = ref(false)
+// 团队分析数据
+const teamAnalysisData = ref([])
 
 // 更新CheckType的方法
 const updateCheckType = async (newValue) => {
@@ -371,6 +415,60 @@ const closeFeedbackFormModal = () => {
   showFeedbackForm.value = false
 }
 
+// 部门分析弹窗控制方法
+const showDepartmentAnalysisModal = () => {
+  showDepartmentAnalysis.value = true
+}
+
+const closeDepartmentAnalysisModal = () => {
+  showDepartmentAnalysis.value = false
+}
+
+// 团队分析弹窗控制方法
+const showTeamAnalysisModal = async () => {
+  showTeamAnalysis.value = true
+  // 获取团队分析数据
+  try {
+    const params = {
+      department_name: selectedGroup.value.name + '-' + selectedGroup.value.leader
+    }
+    const response = await getTeamEveryGroupReport(params)
+    // 根据API响应结构调整数据处理逻辑
+    if (response.data) {
+      if (Array.isArray(response.data)) {
+        // 如果response.data本身就是数组
+        teamAnalysisData.value = response.data
+      } else if (response.data.data && Array.isArray(response.data.data)) {
+        // 如果response.data.data是数组
+        teamAnalysisData.value = response.data.data
+      } else {
+        // 其他情况，可能是单个对象
+        teamAnalysisData.value = [response.data]
+      }
+    }
+  } catch (error) {
+    console.error('获取团队分析数据失败:', error)
+  }
+}
+
+const closeTeamAnalysisModal = () => {
+  showTeamAnalysis.value = false
+}
+
+// 格式化报告内容
+const formatReportContent = (content) => {
+  if (!content) return ''
+  // 将Markdown格式的标题转换为HTML标签
+  return content
+    .replace(/### (.*?)(?=\n|$)/g, '<h3>$1</h3>')
+    .replace(/## (.*?)(?=\n|$)/g, '<h2>$1</h2>')
+    .replace(/# (.*?)(?=\n|$)/g, '<h1>$1</h1>')
+    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+    .replace(/\*(.*?)\*/g, '<em>$1</em>')
+    .replace(/\n\n/g, '</p><p>')
+    .replace(/\n/g, '<br>')
+}
+
 // 卡片显示状态
 const cardVisibility = ref({
   centerOverview: true,
@@ -1618,4 +1716,199 @@ const hideTooltip = () => {
 .feedback-btn:hover {
   background-color: #3182ce;
 }
+
+/* 部门分析弹窗样式 */
+.department-analysis-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  width: 80%;
+  max-width: 600px;
+  max-height: 80vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.modal-header h3 {
+  margin: 0;
+  color: #1a202c;
+  font-size: 1.25rem;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  color: #718096;
+  padding: 0;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.close-btn:hover {
+  color: #1a202c;
+}
+
+.modal-body {
+  padding: 1rem;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.modal-body p {
+  margin: 0;
+  color: #4a5568;
+  line-height: 1.5;
+}
+
+/* 团队分析弹窗样式 */
+.team-analysis-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.team-analysis-modal .modal-content {
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  width: 80%;
+  max-width: 600px;
+  max-height: 80vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.team-analysis-modal .modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.team-analysis-modal .modal-header h3 {
+  margin: 0;
+  color: #1a202c;
+  font-size: 1.25rem;
+}
+
+.team-analysis-modal .close-btn {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  color: #718096;
+  padding: 0;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.team-analysis-modal .close-btn:hover {
+  color: #1a202c;
+}
+
+.team-analysis-modal .modal-body {
+  padding: 1rem;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.team-analysis-modal .modal-body p {
+  margin: 0;
+  color: #4a5568;
+  line-height: 1.5;
+}
+
+.team-analysis-modal .report-item {
+  margin-bottom: 20px;
+  padding: 15px;
+  border: 1px solid #e2e8f0;
+  border-radius: 5px;
+  background-color: #f8fafc;
+}
+
+.team-analysis-modal .report-item h4 {
+  margin-top: 0;
+  color: #1a202c;
+  border-bottom: 1px solid #e2e8f0;
+  padding-bottom: 5px;
+}
+
+.team-analysis-modal .report-content {
+  margin-top: 10px;
+  color: #4a5568;
+  line-height: 1.6;
+}
+
+.team-analysis-modal .report-content h1,
+.team-analysis-modal .report-content h2,
+.team-analysis-modal .report-content h3 {
+  margin-top: 15px;
+  margin-bottom: 10px;
+  color: #1a202c;
+}
+
+.team-analysis-modal .report-content h1 {
+  font-size: 1.5rem;
+}
+
+.team-analysis-modal .report-content h2 {
+  font-size: 1.3rem;
+}
+
+.team-analysis-modal .report-content h3 {
+  font-size: 1.1rem;
+}
+
+.team-analysis-modal .report-content strong {
+  font-weight: bold;
+}
+
+.team-analysis-modal .report-content em {
+  font-style: italic;
+}
+
+.team-analysis-modal .no-report {
+  text-align: center;
+  color: #718096;
+  font-style: italic;
+}
 </style>