From 233b7311fefb1fc3eab011b15ffd9da43958b29d Mon Sep 17 00:00:00 2001 From: lbw_9527443 <780139497@qq.com> Date: Wed, 13 Aug 2025 10:47:18 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=8A=A0=E8=BD=BD?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=B9=B6=E4=BC=98=E5=8C=96=E5=9B=A2=E9=98=9F?= =?UTF-8?q?=E8=AF=A6=E6=83=85=E9=A1=B5=E5=8A=A0=E8=BD=BD=E4=BD=93=E9=AA=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增Loading组件用于全局加载状态显示 - 在团队详情页添加加载状态提示 - 优化API请求时的加载状态管理 - 更新axios基础URL配置 --- my-vue-app/src/components/Loading.vue | 107 +++++++ my-vue-app/src/utils/https.js | 2 +- .../src/views/senorManger/seniorManager.vue | 271 +++++++++++------- 3 files changed, 277 insertions(+), 103 deletions(-) create mode 100644 my-vue-app/src/components/Loading.vue diff --git a/my-vue-app/src/components/Loading.vue b/my-vue-app/src/components/Loading.vue new file mode 100644 index 0000000..653ff9f --- /dev/null +++ b/my-vue-app/src/components/Loading.vue @@ -0,0 +1,107 @@ + + + + + \ No newline at end of file diff --git a/my-vue-app/src/utils/https.js b/my-vue-app/src/utils/https.js index 26c8cfd..85e7267 100644 --- a/my-vue-app/src/utils/https.js +++ b/my-vue-app/src/utils/https.js @@ -5,7 +5,7 @@ import { useUserStore } from '@/stores/user' // 创建axios实例 const service = axios.create({ - baseURL: 'http://192.168.15.53:8890' || '', // API基础路径，支持完整URL + baseURL: 'http://192.168.15.51:8890' || '', // API基础路径，支持完整URL timeout: 30000, // 请求超时时间 headers: { 'Content-Type': 'application/json;charset=UTF-8' diff --git a/my-vue-app/src/views/senorManger/seniorManager.vue b/my-vue-app/src/views/senorManger/seniorManager.vue index 5341b26..a90cace 100644 --- a/my-vue-app/src/views/senorManger/seniorManager.vue +++ b/my-vue-app/src/views/senorManger/seniorManager.vue @@ -55,72 +55,81 @@
-
-

{{ selectedGroup.name }} - 团队成员详情

-
-
- 组长: - {{ selectedGroup.leader }} -
-
- 成员数: - {{ teamPerformanceDetail.group_details.length }}人 -
-
- 今日业绩: - {{ formatCurrency(selectedGroup.todayPerformance) }} -
-
- 转化率: - {{ selectedGroup.conversionRate }}% -
-
+ +
+ +
正在加载团队详情...
-
-
-
-
-

{{ member.name }}

+ +
+
+

{{ selectedGroup.name }} - 团队成员详情

+
+
+ 组长: + {{ selectedGroup.leader }}
-
-
-
-
- 今日业绩 - {{ member.today_performance }} +
+ 成员数: + {{ teamPerformanceDetail.group_details?.length || 0 }}人 +
+
+ 今日业绩: + {{ formatCurrency(selectedGroup.todayPerformance) }} +
+
+ 转化率: + {{ selectedGroup.conversionRate }}% +
+
+
+ +
+
+
+
+

{{ member.name }}

+
+
+
+
+
+ 今日业绩 + {{ member.today_performance }} -
-
- 月度业绩 - {{ member.monthly_performance }} +
+
+ 月度业绩 + {{ member.monthly_performance }} +
-
- -
-
- 转化率 - {{ member.conversion_rate_this_period }} + +
+
+ 转化率 + {{ member.conversion_rate_this_period }} +
+
+ 通话次数 + {{ member.call_count_this_period }} +
-
- 通话次数 - {{ member.call_count_this_period }} -
-
- -
-
- 新增客户 - {{ member.new_customers_this_period }} -
-
- 成交订单 - {{ member.deals_this_period }} + +
+
+ 新增客户 + {{ member.new_customers_this_period }} +
+
+ 成交订单 + {{ member.deals_this_period }} +
@@ -131,6 +140,9 @@
+ + +
@@ -144,6 +156,7 @@ import TeamAlerts from '../maneger/components/TeamAlerts.vue' import ProblemRanking from './components/ProblemRanking.vue' import StatisticalIndicators from './components/StatisticalIndicators.vue' import UserDropdown from '@/components/UserDropdown.vue' +import Loading from '@/components/Loading.vue' import { getOverallTeamPerformance,getTotalGroupCount,getConversionRate,getTotalCallCount, getNewCustomer,getDepositConversionRate,getActiveCustomerCommunicationRate,getAverageAnswerTime, getTimeoutRate,getTableFillingRate,getUrgentNeedToAddress,getTeamRanking,getTeamRankingInfo } from '@/api/senorManger.js' @@ -158,6 +171,11 @@ const formCompletionRate = ref(90) const userStore = useUserStore() +// Loading状态 +const isLoading = ref(false) +// 团队详情加载状态 +const isTeamDetailLoading = ref(false) + // 整体概览 const overallTeamPerformance = ref({ totalPerformance: {}, @@ -331,7 +349,39 @@ async function fetchUrgentNeedToAddress() { "少玩手机": "0.00%", "回归学校": "0.00%", "心理健康": "0.00%" - }, + } + } + } + } +} + +// 团队详情加载样式 +.team-loading { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 3rem; + + .loading-spinner { + width: 40px; + height: 40px; + border: 4px solid #f3f3f3; + border-top: 4px solid #3498db; + border-radius: 50%; + animation: spin 1s linear infinite; + margin-bottom: 1rem; + } + + .loading-text { + color: #666; + font-size: 0.9rem; + } +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); }, "urgent_issue_consultations": { "成绩提升": 0, "少玩手机": 0, @@ -349,7 +399,6 @@ async function fetchUrgentNeedToAddress() { const teamRanking = ref({}) async function fetchTeamRanking() { - console.log(555555,userStore.userInfo) const params={ user_name: userStore.userInfo.username, user_level: userStore.userInfo.user_level.toString(), @@ -357,31 +406,6 @@ async function fetchTeamRanking() { try { const response = await getTeamRanking(params) teamRanking.value = response.data - /** - * "data": { - "user_name": "陈盼良", - "user_level": 3, - "formal_plural": { - "巅峰五部-时永帅": 2, - "技术部": 0, - "星火一部--张瑾": 4, - "美团业务支持部": 0, - "星耀三部-周毅": 3, - "亮剑二部-田贵星": 2, - "巅峰三部--刘东洋": 0 - }, - "composition_transformation": { - "巅峰五部-时永帅": "0.00%", - "技术部": "0.00%", - "星火一部--张瑾": "11.43%", - "美团业务支持部": "0.00%", - "星耀三部-周毅": "15.00%", - "亮剑二部-田贵星": "5.71%", - "巅峰三部--刘东洋": "0.00%" - } - } - */ - console.log('团队业绩排名:', response.data) } catch (error) { console.error('获取团队业绩排名失败:', error) } @@ -399,26 +423,31 @@ async function fetchTeamPerformanceDetail(department) { teamPerformanceDetail.value = {} const response = await getTeamRankingInfo(params) teamPerformanceDetail.value = response.data - console.log('团队业绩详情:', response.data) } catch (error) { console.error('获取团队业绩详情失败:', error) } } // 初始化时获取数据 onMounted(async ()=>{ - // await fetchOverallTeamPerformance() - // await fetchActiveGroups() - // await fetchConversionRate() - // await fetchTotalCallCount() - // await fetchNewCustomers() - // await fetchDepositConversions() - // await fetchCustomerCommunicationRate() - // await fetchAverageResponseTime() - // await fetchTimeoutRate() - // await fetchTableFillingRate() - await fetchUrgentNeedToAddress() - await fetchTeamRanking() - + try { + isLoading.value = true + await fetchOverallTeamPerformance() + await fetchActiveGroups() + await fetchConversionRate() + await fetchTotalCallCount() + await fetchNewCustomers() + await fetchDepositConversions() + await fetchCustomerCommunicationRate() + await fetchAverageResponseTime() + await fetchTimeoutRate() + await fetchTableFillingRate() + await fetchUrgentNeedToAddress() + await fetchTeamRanking() + } catch (error) { + console.error('数据加载失败:', error) + } finally { + isLoading.value = false + } }) // 组别数据 @@ -427,7 +456,7 @@ const groups=[] const selectedGroup = ref(groups[0]) // 选择组别函数 -const selectGroup = (group) => { +const selectGroup = async (group) => { selectedGroup.value = group // 获取部门名称并调用团队业绩详情接口 // 从teamRanking数据中查找对应的原始部门名称 @@ -445,7 +474,16 @@ const selectGroup = (group) => { } } console.log('选中的部门:', group.name, '-> 发送的部门名称:', department) - fetchTeamPerformanceDetail(department) + + // 设置团队详情加载状态 + isTeamDetailLoading.value = true + try { + await fetchTeamPerformanceDetail(department) + } catch (error) { + console.error('获取团队详情失败:', error) + } finally { + isTeamDetailLoading.value = false + } } // 格式化货币 @@ -860,6 +898,35 @@ const getStatusText = (status) => { margin-top: 1rem; } +// 团队详情加载状态 +.team-loading { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 3rem; + + .loading-spinner { + width: 40px; + height: 40px; + border: 3px solid #e2e8f0; + border-top: 3px solid #3b82f6; + border-radius: 50%; + animation: spin 1s linear infinite; + margin-bottom: 1rem; + } + + .loading-text { + color: #64748b; + font-size: 0.9rem; + } +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + // 移动端适配 @media (max-width: 768px) { .dashboard-header {