From 544a66b8fa9fe8a03125cd4659bc3d2141956e1f Mon Sep 17 00:00:00 2001
From: lbw_9527443 <780139497@qq.com>
Date: Thu, 21 Aug 2025 10:47:41 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=AF=BC=E8=88=AA):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=8F=8C=E5=87=BB=E5=AF=BC=E8=88=AA=E5=8A=9F=E8=83=BD=E5=B9=B6?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=95=B0=E6=8D=AE=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在GroupComparison组件中添加双击部门跳转到经理页面的功能
- 在secondTop组件中添加双击成员跳转到销售页面的功能
- 优化topOne组件中客户迫切问题排行榜的数据格式转换
- 在RankingList组件中增加展示条目并添加排序功能
- 在SalesTimelineWithTaskList组件中替换alert弹窗为自定义模态框
- 优化secondTop组件路由跳转逻辑，避免重复请求
---
 .../components/SalesTimelineWithTaskList.vue  | 144 ++++++++++++++++--
 .../secondTop/components/GroupComparison.vue  |  16 ++
 my-vue-app/src/views/secondTop/secondTop.vue  |  33 +++-
 .../views/topOne/components/RankingList.vue   |  88 ++++++++++-
 my-vue-app/src/views/topOne/topone.vue        |  13 +-
 5 files changed, 265 insertions(+), 29 deletions(-)

diff --git a/my-vue-app/src/views/person/components/SalesTimelineWithTaskList.vue b/my-vue-app/src/views/person/components/SalesTimelineWithTaskList.vue
index edf5cea..cecb41e 100644
--- a/my-vue-app/src/views/person/components/SalesTimelineWithTaskList.vue
+++ b/my-vue-app/src/views/person/components/SalesTimelineWithTaskList.vue
@@ -116,12 +116,37 @@
         </div>
       </div>
     </div>
+
+    <!-- 发言内容弹窗 -->
+    <div v-if="showModal" class="modal-overlay" @click="closeModal">
+      <div class="modal-content" @click.stop>
+        <div class="modal-header">
+          <h3>直播发言内容</h3>
+          <button class="close-btn" @click="closeModal">×</button>
+        </div>
+        <div class="modal-body">
+          <div v-if="!modalMessages || modalMessages.length === 0" class="no-messages">
+            暂无发言内容
+          </div>
+          <div v-else class="messages-list">
+            <div v-for="(message, index) in modalMessages" :key="index" class="message-item">
+              <span class="message-number">{{ index + 1 }}.</span>
+              <span class="message-content">{{ message }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
 import { computed, ref } from 'vue';
 
+// 弹窗相关的响应式数据
+const showModal = ref(false);
+const modalMessages = ref([]);
+
 // 定义props
 const props = defineProps({
   data: {
@@ -303,18 +328,13 @@ const getHealthIndicator = (score) => {
 
 // 显示发言内容弹框
 const showSpeakMessages = (speakMessages) => {
-  if (!speakMessages || speakMessages.length === 0) {
-    alert('暂无发言内容');
-    return;
-  }
-  
-  // 格式化发言内容
-  let content = '直播发言内容:\n\n';
-  speakMessages.forEach((message, index) => {
-    content += `${index + 1}. ${message}\n\n`;
-  });
-  
-  alert(content);
+  modalMessages.value = speakMessages || [];
+  showModal.value = true;
+};
+
+const closeModal = () => {
+  showModal.value = false;
+  modalMessages.value = [];
 };
 
 
@@ -1031,5 +1051,105 @@ $indigo: #4f46e5;
   }
 }
 
+/* 弹窗样式 */
+.modal-overlay {
+  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: white;
+  border-radius: 8px;
+  width: 90%;
+  max-width: 600px;
+  max-height: 80vh;
+  overflow: hidden;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  border-bottom: 1px solid #e5e7eb;
+  background-color: #f9fafb;
+}
+
+.modal-header h3 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #374151;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+  color: #6b7280;
+  padding: 0;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+}
+
+.close-btn:hover {
+  background-color: #e5e7eb;
+  color: #374151;
+}
+
+.modal-body {
+  padding: 20px;
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
+.no-messages {
+  text-align: center;
+  color: #6b7280;
+  font-size: 16px;
+  padding: 40px 20px;
+}
+
+.messages-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.message-item {
+  display: flex;
+  gap: 8px;
+  padding: 12px;
+  background-color: #f9fafb;
+  border-radius: 6px;
+  border-left: 3px solid #3b82f6;
+}
+
+.message-number {
+  font-weight: 600;
+  color: #3b82f6;
+  min-width: 20px;
+}
+
+.message-content {
+  flex: 1;
+  line-height: 1.5;
+  color: #374151;
+}
 
 </style>
\ No newline at end of file
diff --git a/my-vue-app/src/views/secondTop/components/GroupComparison.vue b/my-vue-app/src/views/secondTop/components/GroupComparison.vue
index d8e9c23..6f48381 100644
--- a/my-vue-app/src/views/secondTop/components/GroupComparison.vue
+++ b/my-vue-app/src/views/secondTop/components/GroupComparison.vue
@@ -22,6 +22,7 @@
           class="ranking-card"
           :class="getRankingClass(index)"
           @click="$emit('select-group', group)"
+          @dblclick="navigateToManager(group)"
         >
           <div class="rank-badge">{{ index + 1 }}</div>
           <div class="group-info">
@@ -47,6 +48,7 @@
 
 <script setup>
 import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
 
 const props = defineProps({
   groups: {
@@ -65,6 +67,9 @@ const props = defineProps({
 
 const emit = defineEmits(['select-group', 'manager-change'])
 
+// 路由实例
+const router = useRouter()
+
 // 选中的高级经理
 const selectedManager = ref('all')
 
@@ -267,6 +272,17 @@ const getRankingClass = (index) => {
   return 'rank-other'
 }
 
+// 处理部门双击事件，跳转到经理页面
+const navigateToManager = (group) => {
+  router.push({
+    path: '/senior-manager',
+    query: {
+      user_name: group.id,
+      user_level: 3
+    }
+  })
+}
+
 // 获取趋势图标
 const getTrendIcon = (trend) => {
   const icons = {
diff --git a/my-vue-app/src/views/secondTop/secondTop.vue b/my-vue-app/src/views/secondTop/secondTop.vue
index b0f0547..c23ea42 100644
--- a/my-vue-app/src/views/secondTop/secondTop.vue
+++ b/my-vue-app/src/views/secondTop/secondTop.vue
@@ -43,7 +43,7 @@
             </div>
           </template>
           
-          <div>
+          <div v-if="!isRouteNavigation">
             <!-- 用户下拉菜单 -->
             <UserDropdown />
           </div>
@@ -107,7 +107,7 @@
 
         <div class="members-grid">
           <div v-for="member in selectedGroup.members" :key="member.id" class="member-card"
-            :class="getStatusClass(member.status)">
+            :class="getStatusClass(member.status)" @dblclick="navigateToSale(member.name)">
             <div class="member-header">
               <div class="member-info">
                 <h3 class="member-name">{{ member.name }}</h3>
@@ -250,7 +250,7 @@ const centerData = ref({
       stage.endDate = stageEndDate.toISOString().split('T')[0];
     });
   };
-
+// 保存营期
   const saveCampSettings = async () => {
     recalculateStageDates();
     
@@ -358,9 +358,6 @@ const centerData = ref({
     }
   }
 
-
-
-
   // 组别数据
   const groups = ref([])
   // loading 状态
@@ -692,10 +689,32 @@ const conversionRateVsAverage = ref({})
     }
     return statusMap[status] || '未知'
   }
+
+  // 双击成员卡片跳转到销售页面
+  const navigateToSale = (userName) => {
+    router.push({
+      path: '/sale',
+      query: {
+        user_name: userName,
+        user_level: '1'
+      }
+    })
+  }
   onMounted(async () => {
     try {
       isLoading.value = true
-      await CenterCampPeriodAdmin()
+      
+      // 判断页面进入方式：如果是通过路由跳转进入（URL中有user_name和user_level参数），则不发送CenterCampPeriodAdmin请求
+      // 如果是直接登录进入页面，则发送请求
+      const currentQuery = router.currentRoute.value.query
+      const isFromRoute = currentQuery.fromRoute || 
+                         sessionStorage.getItem('fromRoute') || 
+                         (currentQuery.user_name && currentQuery.user_level)
+      
+      if (!isFromRoute) {
+        // 直接登录进入页面时才调用CenterCampPeriodAdmin
+        await CenterCampPeriodAdmin()
+      }
       // CenterCampPeriodAdmin中已经调用了recalculateStageDates，这里不需要重复调用
       await CenterOverallCenterPerformance()
       await CenterTotalGroupCount()
diff --git a/my-vue-app/src/views/topOne/components/RankingList.vue b/my-vue-app/src/views/topOne/components/RankingList.vue
index b802bc2..a4bde9d 100644
--- a/my-vue-app/src/views/topOne/components/RankingList.vue
+++ b/my-vue-app/src/views/topOne/components/RankingList.vue
@@ -9,7 +9,7 @@
       </select>
     </div>
     <div class="ranking-list">
-      <div v-for="(item, index) in rankingData.slice(0, 4)" :key="item.id" class="ranking-item">
+      <div v-for="(item, index) in rankingData.slice(0, 8)" :key="item.id" class="ranking-item">
         <div class="rank-number" :class="getRankClass(index)">
           {{ index + 1 }}
         </div>
@@ -62,12 +62,15 @@ const rankingData = computed(() => {
     return [];
   }
   
-  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
-  }));
+  // 转换数据格式并按total_deals从大到小排序
+  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
+    }))
+    .sort((a, b) => b.performance - a.performance); // 按total_deals从大到小排序
 });
 
 // 获取全中心业绩排行榜数据
@@ -79,6 +82,77 @@ async function getCenterSalesRank(data) {
     const res = await getCenterPerformanceRank(params);
     console.log('获取中心业绩排行榜:', res);
     centerSalesRank.value = res.data;
+    /**
+     * 0
+: 
+{center_leader: "潘加俊", total_deals: 0, average_deals_per_member: 0}
+average_deals_per_member
+: 
+0
+center_leader
+: 
+"潘加俊"
+total_deals
+: 
+0
+1
+: 
+{center_leader: "张三丰", total_deals: 44, average_deals_per_member: 1}
+average_deals_per_member
+: 
+1
+center_leader
+: 
+"张三丰"
+total_deals
+: 
+44
+2
+: 
+{center_leader: "朱一航", total_deals: 0, average_deals_per_member: 0}
+average_deals_per_member
+: 
+0
+center_leader
+: 
+"朱一航"
+total_deals
+: 
+0
+3
+: 
+{center_leader: "程琦", total_deals: 0, average_deals_per_member: 0}
+average_deals_per_member
+: 
+0
+center_leader
+: 
+"程琦"
+total_deals
+: 
+0
+4
+: 
+{center_leader: "王卓琳", total_deals: 6, average_deals_per_member: 0}
+average_deals_per_member
+: 
+0
+center_leader
+: 
+"王卓琳"
+total_deals
+: 
+6
+5
+: 
+{center_leader: "伍晶晶", total_deals: 5, average_deals_per_member: 0}
+average_deals_per_member
+: 
+0
+center_leader
+: 
+"伍晶晶"
+     */
   } catch (error) {
     console.error('获取全中心业绩排行榜失败:', error);
   }
diff --git a/my-vue-app/src/views/topOne/topone.vue b/my-vue-app/src/views/topOne/topone.vue
index 1006c63..1a0b2d0 100644
--- a/my-vue-app/src/views/topOne/topone.vue
+++ b/my-vue-app/src/views/topOne/topone.vue
@@ -520,7 +520,6 @@ async function getCustomerTypeRatio(data) {
   }
   try {
     const res = await getCustomerTypeDistribution(params)
-    console.log(1222222,res)
     customerTypeRatio.value = res.data
   } catch (error) {
     console.error("获取客户类型占比失败:", error);
@@ -528,11 +527,20 @@ async function getCustomerTypeRatio(data) {
 }
 // 客户迫切解决的问题排行榜
 const customerUrgency = ref({});
+const problemRankingData = ref([]);
+
 async function getCustomerUrgency() {
   try {
     const res = await getUrgentNeedToAddress()
-    console.log(1222222,res)
     customerUrgency.value = res.data
+    
+    // 将API返回的数据转换为ProblemRanking组件需要的格式
+    if (res.data && res.data.company_urgent_issue_ratio) {
+      problemRankingData.value = Object.entries(res.data.company_urgent_issue_ratio).map(([name, value]) => ({
+        name,
+        value
+      }));
+    }
   } catch (error) {
     console.error("获取客户迫切解决的问题排行榜失败:", error);
   }
@@ -542,7 +550,6 @@ const levelTree = ref({});
 async function CusotomGetLevelTree() {
   try {
     const res = await getLevelTree()
-    console.log(1222222,res)
     levelTree.value = res.data
   } catch (error) {
     console.error("获取级别树失败:", error);