From 859821dfb33565f08dac00d482bde33b7025e1e0 Mon Sep 17 00:00:00 2001 From: lbw_9527443 <780139497@qq.com> Date: Thu, 9 Oct 2025 22:02:20 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E5=88=86=E6=9E=90=E6=8A=A5=E5=91=8A):=20?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=BA=8C=E6=9C=9F=E5=88=86=E6=9E=90=E6=8A=A5?= =?UTF-8?q?=E5=91=8A=E5=8A=9F=E8=83=BD=E5=B9=B6=E4=BC=98=E5=8C=96UI?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 在MemberDetails和PersonalDashboard组件中添加二期分析报告功能 - 统一分析周期参数为'day'、'camp'、'month' - 优化模态框头部布局和按钮样式 - 添加获取二期分析报告的API调用 - 调整baseURL为本地开发环境 --- my-vue-app/src/utils/https.js | 4 +- .../maneger/components/MemberDetails.vue | 5 + .../person/components/PersonalDashboard.vue | 195 +++++++----------- my-vue-app/src/views/person/sale.vue | 2 +- 4 files changed, 78 insertions(+), 128 deletions(-) diff --git a/my-vue-app/src/utils/https.js b/my-vue-app/src/utils/https.js index 07a1086..a845c4b 100644 --- a/my-vue-app/src/utils/https.js +++ b/my-vue-app/src/utils/https.js @@ -5,8 +5,8 @@ import { useUserStore } from '@/stores/user' // 创建axios实例 const service = axios.create({ - baseURL: 'https://mldash.nycjy.cn/' || '', // API基础路径，支持完整URL - // baseURL: 'http://192.168.15.121:8890' || '', // API基础路径，支持完整URL + // baseURL: 'https://mldash.nycjy.cn/' || '', // API基础路径，支持完整URL + baseURL: 'http://192.168.15.121:8890' || '', // API基础路径，支持完整URL timeout: 100000, // 请求超时时间 headers: { 'Content-Type': 'application/json;charset=UTF-8' diff --git a/my-vue-app/src/views/maneger/components/MemberDetails.vue b/my-vue-app/src/views/maneger/components/MemberDetails.vue index 3e406c2..0bd6747 100644 --- a/my-vue-app/src/views/maneger/components/MemberDetails.vue +++ b/my-vue-app/src/views/maneger/components/MemberDetails.vue @@ -52,6 +52,11 @@

💡 指导建议

+
+ + + +
diff --git a/my-vue-app/src/views/person/components/PersonalDashboard.vue b/my-vue-app/src/views/person/components/PersonalDashboard.vue index 42e2ffc..ebd6cb4 100644 --- a/my-vue-app/src/views/person/components/PersonalDashboard.vue +++ b/my-vue-app/src/views/person/components/PersonalDashboard.vue @@ -111,20 +111,20 @@

阶段分析报告

+
+ + + +
-
- - - -
-
+

当日分析报告

这里是当日分析报告的占位文本。

-
+

当期分析报告

这里是当期分析报告的占位文本。

@@ -146,11 +146,30 @@ import { ref, reactive, onMounted, onBeforeUnmount, computed, watch } from 'vue' import StatisticData from './StatisticData.vue'; import * as echarts from 'echarts'; import Chart from 'chart.js/auto'; -import {getTableFillingRate,getAverageResponseTime,getWeeklyActiveCommunicationRate,getTimeoutResponseRate} from "@/api/api.js" +import {getSecondOrderAnalysisReport} from "@/api/api.js" import { useUserStore } from "@/stores/user"; +import { useRouter } from "vue-router"; // 用户store const userStore = useUserStore(); +// 路由实例 +const router = useRouter(); + +// 获取通用请求参数的函数 +const getRequestParams = () => { + const params = {} + // 只从路由参数获取 + const routeUserLevel = router.currentRoute.value.query.user_level || router.currentRoute.value.params.user_level + const routeUserName = router.currentRoute.value.query.user_name || router.currentRoute.value.params.user_name + // 如果路由有参数，使用路由参数 + if (routeUserLevel) { + params.user_level = routeUserLevel.toString() + } + if (routeUserName) { + params.user_name = routeUserName + } + return params +} // 定义props const props = defineProps({ kpiData: { @@ -191,112 +210,12 @@ const props = defineProps({ } }); -// 分析报告数据 -const analysisData = ref({ - today: { - overallScore: 82, - targetCompletion: 72, - keyMetrics: [ - { - name: '通话量', - current: 42, - target: 50, - trend: 'positive', - trendText: '↗ +5%' - }, - { - name: '接通率', - current: 75, - target: 80, - trend: 'neutral', - trendText: '→ 持平' - }, - { - name: '转化率', - current: 15, - target: 15, - trend: 'positive', - trendText: '↗ +2%' - }, - { - name: '客户满意度', - current: 4.5, - target: 4.5, - trend: 'positive', - trendText: '↗ +0.3' - } - ] - }, - current: { - overallScore: 78, - targetCompletion: 65, - keyMetrics: [ - { - name: '通话量', - current: 185, - target: 200, - trend: 'neutral', - trendText: '→ -2%' - }, - { - name: '接通率', - current: 68, - target: 80, - trend: 'negative', - trendText: '↘ -5%' - }, - { - name: '转化率', - current: 12, - target: 15, - trend: 'negative', - trendText: '↘ -3%' - }, - { - name: '客户满意度', - current: 4.2, - target: 4.5, - trend: 'neutral', - trendText: '→ -0.1' - } - ] - }, - month: { - overallScore: 85, - targetCompletion: 78, - keyMetrics: [ - { - name: '通话量', - current: 520, - target: 600, - trend: 'positive', - trendText: '↗ +8%' - }, - { - name: '接通率', - current: 72, - target: 80, - trend: 'neutral', - trendText: '→ -1%' - }, - { - name: '转化率', - current: 14, - target: 15, - trend: 'neutral', - trendText: '→ -0.5%' - }, - { - name: '客户满意度', - current: 4.3, - target: 4.5, - trend: 'positive', - trendText: '↗ +0.1' - } - ] - } -}); - +async function CenterGetSecondOrderAnalysisReport(time) { + const params = getRequestParams() + const hasParams = {...params,time:time} + const res = await getSecondOrderAnalysisReport(hasParams) + console.log(res) +} // Chart.js 实例 const chartInstances = {}; @@ -454,11 +373,12 @@ const hideTooltip = () => { // 阶段分析报告模态框状态 const showAnalysisModal = ref(false); -const analysisPeriod = ref('today'); // 'today', 'current', 'month' +const analysisPeriod = ref('day'); // 'day', 'current', 'month' // 显示阶段分析报告模态框 const showSecondOrderAnalysisReport = () => { showAnalysisModal.value = true; + CenterGetSecondOrderAnalysisReport(analysisPeriod.value) }; // 关闭阶段分析报告模态框 @@ -469,6 +389,7 @@ const closeAnalysisModal = () => { // 切换分析周期 const switchAnalysisPeriod = (period) => { analysisPeriod.value = period; + CenterGetSecondOrderAnalysisReport(period) }; @@ -870,7 +791,14 @@ $white: #ffffff; gap: 16px; } + .modal-header { + padding-left: 15px; + padding-right: 15px; + } + .modal-title { + font-size: 16px; + } } @@ -929,10 +857,10 @@ $white: #ffffff; .modal-header { display: flex; - justify-content: space-between; align-items: center; - padding: 20px; + padding: 16px 20px; border-bottom: 1px solid #ebeef5; + flex-shrink: 0; } .modal-title { @@ -940,6 +868,7 @@ $white: #ffffff; font-size: 18px; font-weight: 600; color: #303133; + margin-right: auto; // 将标题推到最左边 } .modal-close-btn { @@ -954,6 +883,9 @@ $white: #ffffff; display: flex; align-items: center; justify-content: center; + margin-left: 16px; // 与按钮组保持间距 + flex-shrink: 0; + &:hover { color: #303133; @@ -968,32 +900,45 @@ $white: #ffffff; .period-switcher { display: flex; - gap: 10px; - margin-bottom: 20px; + flex-shrink: 0; // 防止按钮组在空间不足时被压缩 } .period-switcher button { - flex: 1; - padding: 10px 15px; + padding: 6px 14px; border: 1px solid #dcdfe6; background: white; - border-radius: 4px; + border-radius: 0; cursor: pointer; - font-size: 14px; + font-size: 13px; transition: all 0.3s ease; + margin-left: -1px; // 让边框重叠，形成一体化效果 + + &:first-child { + border-radius: 4px 0 0 4px; + margin-left: 0; + } + + &:last-child { + border-radius: 0 4px 4px 0; + } &:hover { - border-color: #409eff; + border-color: #a0cfff; color: #409eff; + z-index: 1; + position: relative; } &.active { background: #409eff; border-color: #409eff; color: white; + z-index: 2; + position: relative; } } + .analysis-content h4 { margin-top: 0; margin-bottom: 15px; @@ -1005,4 +950,4 @@ $white: #ffffff; color: #606266; line-height: 1.6; } -``` \ No newline at end of file + \ No newline at end of file diff --git a/my-vue-app/src/views/person/sale.vue b/my-vue-app/src/views/person/sale.vue index 9cc6a6e..b92e1af 100644 --- a/my-vue-app/src/views/person/sale.vue +++ b/my-vue-app/src/views/person/sale.vue @@ -189,7 +189,7 @@ import FeedbackForm from "@/components/FeedbackForm.vue"; import {getCustomerAttendance,getTodayCall,getProblemDistribution,getTableFillingRate,getAverageResponseTime, getWeeklyActiveCommunicationRate,getTimeoutResponseRate,getCustomerCallInfo,getCustomerChatInfo,getCustomerFormInfo, getConversionRateAndAllocatedData,getCustomerAttendanceAfterClass4,getPayMoneyCustomers,getSalesFunnel,getGoldContactTime, - getAvgCallTime,getCallSuccessRate} from "@/api/api.js" + getAvgCallTime,getCallSuccessRate,getSecondOrderAnalysisReport} from "@/api/api.js" // 路由实例 const router = useRouter();