feat(销售分析): 添加二阶分析报告功能
- 在api.js和manager.js中添加获取二阶分析报告的API接口 - 在个人仪表板中添加阶段分析报告按钮和模态框 - 移除不再使用的周分析组件 - 添加分析报告数据结构和样式
This commit is contained in:
@@ -1,8 +1,9 @@
|
||||
<template>
|
||||
<div class="personal-dashboard">
|
||||
<!-- 头部标题 -->
|
||||
<div class="dashboard-header">
|
||||
<div class="dashboard-header" style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<h2>个人工作仪表板</h2>
|
||||
<button @click="showSecondOrderAnalysisReport">阶段分析报告</button>
|
||||
</div>
|
||||
|
||||
<!-- 核心KPI & 统计卡片 -->
|
||||
@@ -38,7 +39,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 统计指标 -->
|
||||
<StatisticData
|
||||
<StatisticData
|
||||
:customerCommunicationRate="props.statisticsData.customerCommunicationRate"
|
||||
:averageResponseTime="props.statisticsData.averageResponseTime"
|
||||
:timeoutResponseRate="props.statisticsData.timeoutResponseRate"
|
||||
@@ -95,7 +96,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 指标说明 Tooltip -->
|
||||
<Tooltip
|
||||
:visible="tooltip.visible"
|
||||
@@ -104,7 +105,38 @@
|
||||
:title="tooltip.title"
|
||||
:description="tooltip.description"
|
||||
/>
|
||||
|
||||
|
||||
<!-- 阶段分析报告弹框 -->
|
||||
<div v-if="showAnalysisModal" class="modal-overlay" @click.self="closeAnalysisModal">
|
||||
<div class="modal-container">
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title">阶段分析报告</h3>
|
||||
<button class="modal-close-btn" @click="closeAnalysisModal">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="period-switcher">
|
||||
<button @click="switchAnalysisPeriod('today')" :class="{ active: analysisPeriod === 'today' }">当日</button>
|
||||
<button @click="switchAnalysisPeriod('current')" :class="{ active: analysisPeriod === 'current' }">当期</button>
|
||||
<button @click="switchAnalysisPeriod('month')" :class="{ active: analysisPeriod === 'month' }">当月</button>
|
||||
</div>
|
||||
<div class="analysis-content">
|
||||
<div v-if="analysisPeriod === 'today'">
|
||||
<h4>当日分析报告</h4>
|
||||
<p>这里是当日分析报告的占位文本。</p>
|
||||
</div>
|
||||
<div v-if="analysisPeriod === 'current'">
|
||||
<h4>当期分析报告</h4>
|
||||
<p>这里是当期分析报告的占位文本。</p>
|
||||
</div>
|
||||
<div v-if="analysisPeriod === 'month'">
|
||||
<h4>当月分析报告</h4>
|
||||
<p>这里是当月分析报告的占位文本。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -159,6 +191,112 @@ 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'
|
||||
}
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
// Chart.js 实例
|
||||
const chartInstances = {};
|
||||
|
||||
@@ -177,6 +315,10 @@ const tooltip = reactive({
|
||||
|
||||
// 指标说明配置
|
||||
const kpiDescriptions = {
|
||||
totalCalls: {
|
||||
title: '今日通话',
|
||||
description: '今日总共通话的次数。'
|
||||
},
|
||||
successRate: {
|
||||
title: '电话接通率',
|
||||
description: '拨通电话 ÷ 拨打的电话'
|
||||
@@ -189,6 +331,10 @@ const kpiDescriptions = {
|
||||
title: '成交转化率',
|
||||
description: '成交人数 ÷ 本期总数据。'
|
||||
},
|
||||
assignedData: {
|
||||
title: '本期分配数据',
|
||||
description: '本期内分配到的数据总量。'
|
||||
},
|
||||
wechatAddRate: {
|
||||
title: '加微率',
|
||||
description: '加微人数 ÷ 本期数据总人数'
|
||||
@@ -306,6 +452,25 @@ const hideTooltip = () => {
|
||||
tooltip.visible = false;
|
||||
};
|
||||
|
||||
// 阶段分析报告模态框状态
|
||||
const showAnalysisModal = ref(false);
|
||||
const analysisPeriod = ref('today'); // 'today', 'current', 'month'
|
||||
|
||||
// 显示阶段分析报告模态框
|
||||
const showSecondOrderAnalysisReport = () => {
|
||||
showAnalysisModal.value = true;
|
||||
};
|
||||
|
||||
// 关闭阶段分析报告模态框
|
||||
const closeAnalysisModal = () => {
|
||||
showAnalysisModal.value = false;
|
||||
};
|
||||
|
||||
// 切换分析周期
|
||||
const switchAnalysisPeriod = (period) => {
|
||||
analysisPeriod.value = period;
|
||||
};
|
||||
|
||||
|
||||
|
||||
watch(() => props.contactTimeData, () => {
|
||||
@@ -464,7 +629,7 @@ $white: #ffffff;
|
||||
justify-content: center;
|
||||
min-height: 120px;
|
||||
padding: 1rem 0.5rem;
|
||||
|
||||
|
||||
.stat-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
@@ -475,14 +640,14 @@ $white: #ffffff;
|
||||
font-size: 18px;
|
||||
color: $white;
|
||||
margin-bottom: 0.75rem;
|
||||
|
||||
|
||||
&.customer-rate { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
|
||||
&.response-time { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
|
||||
&.timeout-rate { background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); }
|
||||
&.form-rate { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); }
|
||||
&.severe-timeout-rate { background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%); }
|
||||
}
|
||||
|
||||
|
||||
.kpi-value {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
@@ -586,19 +751,19 @@ $white: #ffffff;
|
||||
.personal-dashboard { padding: 15px; }
|
||||
.stats-grid, .charts-section { grid-template-columns: 1fr; }
|
||||
.stat-card { flex-direction: row; }
|
||||
|
||||
|
||||
.dashboard-header {
|
||||
padding: 16px;
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.kpi-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
|
||||
.kpi-item {
|
||||
padding: 0.5rem;
|
||||
.kpi-value {
|
||||
@@ -608,49 +773,49 @@ $white: #ffffff;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.stats-grid-inner {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
.stat-item {
|
||||
min-height: 100px;
|
||||
padding: 0.75rem 0.25rem;
|
||||
|
||||
|
||||
.stat-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 16px;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
.kpi-value {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
|
||||
p {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.chart-container {
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
|
||||
.chart-header {
|
||||
padding: 16px 16px 12px;
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.chart-content {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@@ -659,52 +824,52 @@ $white: #ffffff;
|
||||
.personal-dashboard {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
||||
.dashboard-header {
|
||||
padding: 12px;
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.kpi-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
.kpi-item {
|
||||
padding: 0.75rem;
|
||||
.kpi-value {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.stats-grid-inner {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
|
||||
.stat-item {
|
||||
min-height: 80px;
|
||||
padding: 1rem;
|
||||
flex-direction: row;
|
||||
text-align: left;
|
||||
|
||||
|
||||
.stat-icon {
|
||||
margin-bottom: 0;
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.chart-container {
|
||||
min-height: 250px;
|
||||
}
|
||||
|
||||
|
||||
.charts-section {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@@ -719,7 +884,7 @@ $white: #ffffff;
|
||||
opacity: 0.7;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
color: #007bff;
|
||||
@@ -735,4 +900,109 @@ $white: #ffffff;
|
||||
position: relative;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
</style>
|
||||
|
||||
/* 模态框样式 */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
width: 90%;
|
||||
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: 20px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.modal-close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
color: #909399;
|
||||
padding: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:hover {
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 20px;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.period-switcher {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.period-switcher button {
|
||||
flex: 1;
|
||||
padding: 10px 15px;
|
||||
border: 1px solid #dcdfe6;
|
||||
background: white;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: #409eff;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #409eff;
|
||||
border-color: #409eff;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.analysis-content h4 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
color: #303133;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.analysis-content p {
|
||||
color: #606266;
|
||||
line-height: 1.6;
|
||||
}
|
||||
</style>```
|
||||
@@ -132,13 +132,6 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 周期分析区域 -->
|
||||
<section v-if="cardVisibility.weekAnalysis===false" class="week-analysis-section" style="width: 100%; margin-top: 24px;">
|
||||
<div class="section-content">
|
||||
<WeekAnalize :week-data="weekAnalysisData" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 自定义弹框 -->
|
||||
<div v-if="showModal" class="modal-overlay" @click="closeModal" @wheel.prevent @touchmove.prevent>
|
||||
<div class="modal-container" @click.stop @wheel.stop @touchmove.stop>
|
||||
|
||||
Reference in New Issue
Block a user