LiuRui/DJKB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 初始化Vue3项目并添加核心功能模块

Browse Source 
新增项目基础结构，包括Vue3、Pinia、Element Plus等核心依赖
添加路由配置和用户认证状态管理
实现销售数据看板、客户画像、团队管理等核心功能模块
集成图表库和API请求工具，完成基础样式配置
This commit is contained in:
lbw_9527443
2025-08-12 14:34:44 +08:00
commit f93236ab36
71 changed files with 32821 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

902
my-vue-app/src/views/maneger/components/MemberDetails.vue Normal file
View File

@@ -0,0 +1,902 @@
<template>
<div class="member-details">
<div class="details-header" @click="toggleDetailsCollapse">
<h2>{{ selectedMember.name }} 的详细数据</h2>
<div class="collapse-toggle" :class="{ 'collapsed': isDetailsCollapsed }">
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M8 4l4 4H4l4-4z"/>
</svg>
</div>
</div>
<div class="details-content">
<div class="details-grid" v-show="!isDetailsCollapsed" :class="{ 'collapsing': isDetailsCollapsed }">
<div class="detail-card">
<div class="detail-label">总通话次数</div>
<div class="detail-value">{{ selectedMember.calls }} 次</div>
</div>
<div class="detail-card">
<div class="detail-label">通话时长</div>
<div class="detail-value">{{ selectedMember.callTime }} 小时</div>
</div>
<div class="detail-card">
<div class="detail-label">新增客户</div>
<div class="detail-value">{{ selectedMember.newClients }} 人</div>
</div>
<div class="detail-card">
<div class="detail-label">成交单数</div>
<div class="detail-value">{{ selectedMember.deals }} 单</div>
</div>
<div class="detail-card">
<div class="detail-label">总业绩</div>
<div class="detail-value">¥{{ selectedMember.performance.toLocaleString() }}</div>
</div>
<div class="detail-card">
<div class="detail-label">平均单价</div>
<div class="detail-value">¥{{ selectedMember.avgDealValue.toLocaleString() }}</div>
</div>
</div>
</div>
<!-- 指导建议 -->
<div class="guidance-section">
<div class="guidance-header" @click="toggleGuidanceCollapse">
<h3>💡 指导建议</h3>
<div class="collapse-toggle" :class="{ 'collapsed': isGuidanceCollapsed }">
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M8 4l4 4H4l4-4z"/>
</svg>
</div>
</div>
<div class="guidance-cards" v-show="!isGuidanceCollapsed" :class="{ 'collapsing': isGuidanceCollapsed }">
<div class="guidance-card" v-if="getGuidanceForMember(selectedMember).length > 0">
<div class="guidance-item" v-for="(guidance, index) in getGuidanceForMember(selectedMember)" :key="index">
<div class="guidance-icon" :class="guidance.type">
{{ guidance.icon }}
</div>
<div class="guidance-content">
<h4 class="guidance-title">{{ guidance.title }}</h4>
<p class="guidance-description">{{ guidance.description }}</p>
<div class="guidance-action" v-if="guidance.action">
<span class="action-label">建议行动:</span>
<span class="action-text">{{ guidance.action }}</span>
</div>
</div>
</div>
</div>
<div class="no-guidance" v-else>
<div class="celebration-icon">🎉</div>
<h4>表现优秀！</h4>
<p>{{ selectedMember.name }} 的各项指标都很不错，继续保持这种状态！</p>
</div>
</div>
</div>
<!-- 录音列表 -->
<div class="recordings-section">
<div class="recordings-header" @click="toggleRecordingsCollapse">
<h3>🎧 通话录音</h3>
<div class="collapse-toggle" :class="{ 'collapsed': isRecordingsCollapsed }">
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M8 4l4 4H4l4-4z"/>
</svg>
</div>
</div>
<div class="recordings-content" v-show="!isRecordingsCollapsed" :class="{ 'collapsing': isRecordingsCollapsed }">
<div class="recordings-list" v-if="getRecordingsForMember(selectedMember).length > 0">
<div class="recording-item" v-for="(recording, index) in getRecordingsForMember(selectedMember)" :key="index">
<div class="recording-info">
<div class="recording-title">{{ recording.title }}</div>
<div class="recording-meta">
<span class="recording-date">{{ recording.date }}</span>
<span class="recording-duration">{{ recording.duration }}</span>
<span class="recording-type" :class="recording.type">{{ recording.typeLabel }}</span>
</div>
</div>
<button class="download-btn" @click="downloadRecording(recording)">
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M8 12l-4-4h3V4h2v4h3l-4 4z"/>
<path d="M2 14h12v1H2z"/>
</svg>
下载
</button>
</div>
</div>
<div class="no-recordings" v-else>
<div class="no-data-icon">📞</div>
<h4>暂无录音</h4>
<p>{{ selectedMember.name }} 还没有通话录音记录</p>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, defineProps, watch, nextTick } from 'vue'
// 定义props
const props = defineProps({
selectedMember: {
type: Object,
required: true
}
})
// 详细数据折叠状态
const isDetailsCollapsed = ref(false)
// 指导建议折叠状态（默认展开）
const isGuidanceCollapsed = ref(false)
// 录音列表折叠状态（默认展开）
const isRecordingsCollapsed = ref(false)
// 切换详细数据折叠状态
const toggleDetailsCollapse = () => {
isDetailsCollapsed.value = !isDetailsCollapsed.value
}
// 切换指导建议折叠状态
const toggleGuidanceCollapse = () => {
isGuidanceCollapsed.value = !isGuidanceCollapsed.value
}
// 切换录音列表折叠状态
const toggleRecordingsCollapse = () => {
isRecordingsCollapsed.value = !isRecordingsCollapsed.value
}
// 获取成员录音列表
const getRecordingsForMember = (member) => {
// 模拟录音数据，实际项目中应该从API获取
const recordings = [
{
id: 1,
title: '客户咨询 - 张先生',
date: '2024-01-15 14:30',
duration: '12:35',
type: 'consultation',
typeLabel: '咨询',
fileUrl: '/recordings/test_recording.m4a' // 使用测试文件
},
{
id: 2,
title: '跟进回访 - 李女士',
date: '2024-01-15 10:15',
duration: '8:42',
type: 'followup',
typeLabel: '回访',
fileUrl: '/recordings/test_recording.m4a' // 使用测试文件
},
{
id: 3,
title: '成交确认 - 王总',
date: '2024-01-14 16:20',
duration: '15:18',
type: 'deal',
typeLabel: '成交',
fileUrl: '/recordings/test_recording.m4a' // 使用测试文件
}
]
// 根据成员ID返回对应的录音，这里简化处理
return recordings.slice(0, Math.min(3, member.calls || 0))
}
// 下载录音文件
const downloadRecording = (recording) => {
// 创建下载链接
const link = document.createElement('a')
link.href = recording.fileUrl
link.download = `${recording.title}_${recording.date.replace(/[:\s]/g, '_')}.m4a`
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
// 实际项目中可能需要调用API来获取下载链接
console.log('下载录音:', recording.title)
}
// 获取成员指导建议
const getGuidanceForMember = (member) => {
const guidance = []
// 业绩相关建议
if (member.performance === 0) {
guidance.push({
type: 'urgent',
icon: '🚨',
title: '业绩突破',
description: '当前还未有成交记录，需要重点关注转化技巧和客户跟进。',
action: '建议参加销售技巧培训，加强客户需求挖掘'
})
} else if (member.performance < 80000) {
guidance.push({
type: 'warning',
icon: '📈',
title: '业绩提升',
description: '业绩有提升空间，可以通过优化沟通策略来提高转化率。',
action: '分析高业绩同事的沟通技巧，制定个人提升计划'
})
}
// 转化率相关建议
if (member.conversion < 3.0) {
guidance.push({
type: 'urgent',
icon: '🎯',
title: '转化率优化',
description: '转化率偏低，需要提升客户沟通和需求挖掘能力。',
action: '重点学习客户心理分析和异议处理技巧'
})
} else if (member.conversion < 6.0) {
guidance.push({
type: 'info',
icon: '💬',
title: '沟通技巧',
description: '转化率还有提升空间，建议优化沟通话术和客户关系维护。',
action: '观摩优秀同事的通话录音，学习有效沟通技巧'
})
}
// 通话相关建议
if (member.calls < 100) {
guidance.push({
type: 'warning',
icon: '📞',
title: '通话量提升',
description: '通话量偏少，增加客户接触频次有助于提升业绩。',
action: '制定每日通话计划，确保充足的客户接触量'
})
}
// 客户开发建议
if (member.newClients < 5) {
guidance.push({
type: 'info',
icon: '👥',
title: '客户开发',
description: '新客户开发数量较少，可以拓展更多潜在客户渠道。',
action: '利用社交媒体和转介绍扩大客户来源'
})
}
// 平均单价建议
if (member.avgDealValue > 0 && member.avgDealValue < 25000) {
guidance.push({
type: 'success',
icon: '💰',
title: '客单价提升',
description: '可以尝试推荐更高价值的课程套餐，提升平均客单价。',
action: '学习产品组合销售技巧，挖掘客户更深层次需求'
})
}
return guidance.slice(0, 3) // 最多显示3个建议
}
// 监听selectedMember变化，重置滚动条位置
watch(() => props.selectedMember, () => {
nextTick(() => {
// 获取member-details容器元素并重置滚动位置
const memberDetailsEl = document.querySelector('.member-details')
if (memberDetailsEl) {
// 使用平滑滚动动画
memberDetailsEl.scrollTo({
top: 0,
behavior: 'smooth'
})
}
})
}, { immediate: false })
</script>
<style lang="scss" scoped>
// Member Details
.member-details {
background: white;
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
height: 600px; // 固定高度
overflow-y: auto; // 整个卡片可滚动
// 自定义滚动条样式
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 3px;
}
&::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 3px;
&:hover {
background: #94a3b8;
}
}
h2 {
font-size: 1.2rem;
font-weight: 600;
color: #1e293b;
margin: 0 0 1.5rem 0;
}
.details-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
flex: 1;
align-content: start;
}
.detail-card {
background: #f8fafc;
border-radius: 8px;
padding: 0.5rem;
text-align: center;
.detail-label {
color: #64748b;
font-size: 0.85rem;
margin-bottom: 0.5rem;
}
.detail-value {
color: #1e293b;
font-size: 1.1rem;
font-weight: 600;
}
}
}
// 详细数据折叠功能样式
.details-header {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
padding: 0.5rem 0;
border-bottom: 1px solid #e2e8f0;
margin-bottom: 1rem;
transition: all 0.2s ease;
&:hover {
background-color: #f8fafc;
border-radius: 4px;
padding: 0.5rem;
margin: 0 -0.5rem 1rem -0.5rem;
}
h2 {
margin: 0;
font-size: 1.25rem;
font-weight: 600;
color: #1e293b;
}
}
.collapse-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 4px;
background-color: #f1f5f9;
color: #64748b;
transition: all 0.2s ease;
&:hover {
background-color: #e2e8f0;
color: #475569;
}
svg {
transition: transform 0.2s ease;
}
&.collapsed svg {
transform: rotate(180deg);
}
}
.details-grid {
transition: all 0.3s ease;
&.collapsing {
opacity: 0;
transform: translateY(-10px);
}
}
// 录音列表样式
.recordings-section {
margin-top: 1.5rem;
}
.recordings-header {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
padding: 0.5rem 0;
border-bottom: 1px solid #e2e8f0;
margin-bottom: 1rem;
transition: all 0.2s ease;
&:hover {
background-color: #f8fafc;
border-radius: 4px;
padding: 0.5rem;
margin: 0 -0.5rem 1rem -0.5rem;
}
h3 {
font-size: 1.1rem;
font-weight: 600;
color: #1e293b;
margin: 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
}
.recordings-content {
transition: all 0.3s ease;
&.collapsing {
opacity: 0;
transform: translateY(-10px);
}
}
.recordings-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.recording-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
transition: all 0.2s ease;
&:hover {
background: #f1f5f9;
border-color: #cbd5e1;
}
}
.recording-info {
flex: 1;
}
.recording-title {
font-size: 0.9rem;
font-weight: 600;
color: #1e293b;
margin-bottom: 0.5rem;
}
.recording-meta {
display: flex;
align-items: center;
gap: 1rem;
font-size: 0.8rem;
}
.recording-date {
color: #64748b;
}
.recording-duration {
color: #475569;
font-weight: 500;
}
.recording-type {
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 500;
&.consultation {
background: #dbeafe;
color: #1e40af;
}
&.followup {
background: #fef3c7;
color: #92400e;
}
&.deal {
background: #d1fae5;
color: #065f46;
}
}
.download-btn {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: #3b82f6;
color: white;
border: none;
border-radius: 6px;
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
&:hover {
background: #2563eb;
transform: translateY(-1px);
}
&:active {
transform: translateY(0);
}
svg {
flex-shrink: 0;
}
}
.no-recordings {
text-align: center;
padding: 2rem 1rem;
background: #f8fafc;
border-radius: 8px;
border: 1px solid #e2e8f0;
.no-data-icon {
font-size: 2rem;
margin-bottom: 0.5rem;
}
h4 {
font-size: 1rem;
font-weight: 600;
color: #64748b;
margin: 0 0 0.5rem 0;
}
p {
font-size: 0.9rem;
color: #94a3b8;
margin: 0;
}
}
// 指导建议样式
.guidance-section {
margin-top: 1.5rem;
}
.guidance-header {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
padding: 0.5rem 0;
border-bottom: 1px solid #e2e8f0;
margin-bottom: 1rem;
transition: all 0.2s ease;
&:hover {
background-color: #f8fafc;
border-radius: 4px;
padding: 0.5rem;
margin: 0 -0.5rem 1rem -0.5rem;
}
h3 {
font-size: 1.1rem;
font-weight: 600;
color: #1e293b;
margin: 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
}
.guidance-cards {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.guidance-card {
background: white;
border-radius: 8px;
padding: 1rem;
border: 1px solid #e2e8f0;
}
.guidance-item {
display: flex;
gap: 0.75rem;
padding: 0.75rem 0;
&:not(:last-child) {
border-bottom: 1px solid #f1f5f9;
}
}
.guidance-icon {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
flex-shrink: 0;
&.urgent {
background: #fef2f2;
border: 1px solid #fecaca;
}
&.warning {
background: #fffbeb;
border: 1px solid #fed7aa;
}
&.info {
background: #eff6ff;
border: 1px solid #bfdbfe;
}
&.success {
background: #f0fdf4;
border: 1px solid #bbf7d0;
}
}
.guidance-content {
flex: 1;
}
.guidance-title {
font-size: 0.9rem;
font-weight: 600;
color: #1e293b;
margin: 0 0 0.25rem 0;
}
.guidance-description {
font-size: 0.8rem;
color: #64748b;
margin: 0 0 0.5rem 0;
line-height: 1.4;
}
.guidance-action {
display: flex;
flex-direction: column;
gap: 0.25rem;
.action-label {
font-size: 0.75rem;
font-weight: 500;
color: #3b82f6;
}
.action-text {
font-size: 0.8rem;
color: #1e293b;
background: #f8fafc;
padding: 0.5rem;
border-radius: 4px;
border-left: 3px solid #3b82f6;
}
}
.no-guidance {
text-align: center;
padding: 2rem 1rem;
background: white;
border-radius: 8px;
border: 1px solid #e2e8f0;
.celebration-icon {
font-size: 2rem;
margin-bottom: 0.5rem;
}
h4 {
font-size: 1rem;
font-weight: 600;
color: #059669;
margin: 0 0 0.5rem 0;
}
p {
font-size: 0.9rem;
color: #64748b;
margin: 0;
}
}
// 移动端适配
@media (max-width: 768px) {
.member-details {
padding: 1rem;
height: auto;
max-height: 500px;
h2 {
font-size: 1.1rem;
margin-bottom: 1rem;
}
.details-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
.detail-card {
padding: 0.75rem;
.detail-label {
font-size: 0.8rem;
}
.detail-value {
font-size: 1rem;
}
}
}
// 录音列表适配
.recordings-section {
margin-top: 1rem;
.recordings-header {
h3 {
font-size: 1rem;
}
}
.recordings-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
}
.recording-item {
flex-direction: column;
align-items: stretch;
gap: 0.5rem;
padding: 0.75rem;
}
.recording-info {
.recording-title {
font-size: 0.8rem;
margin-bottom: 0.25rem;
line-height: 1.3;
}
.recording-meta {
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
.recording-date {
font-size: 0.7rem;
}
.recording-duration {
font-size: 0.7rem;
}
.recording-type {
align-self: flex-start;
font-size: 0.65rem;
padding: 0.2rem 0.4rem;
}
}
}
.download-btn {
align-self: center;
padding: 0.5rem 0.8rem;
font-size: 0.75rem;
svg {
width: 12px;
height: 12px;
}
}
}
// 指导建议适配
.guidance-section {
margin-top: 1rem;
.guidance-header {
h3 {
font-size: 1rem;
}
}
.guidance-item {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
padding: 0.5rem 0;
.guidance-icon {
width: 28px;
height: 28px;
font-size: 0.9rem;
}
}
.guidance-title {
font-size: 0.85rem;
}
.guidance-description {
font-size: 0.75rem;
}
.guidance-action {
.action-label {
font-size: 0.7rem;
}
.action-text {
font-size: 0.75rem;
padding: 0.4rem;
}
}
}
}
@media (max-width: 480px) {
.member-details {
padding: 0.75rem;
border-radius: 8px;
}
.recording-item {
padding: 0.6rem;
.recording-meta {
gap: 0.25rem;
font-size: 0.75rem;
}
.download-btn {
padding: 0.5rem 1rem;
font-size: 0.75rem;
}
}
.guidance-item {
.guidance-icon {
width: 24px;
height: 24px;
font-size: 0.8rem;
}
}
}
</style>

253
my-vue-app/src/views/maneger/components/PerformanceRanking.vue Normal file
View File

@@ -0,0 +1,253 @@
<template>
<div class="performance-ranking">
<h2>团队成员业绩排名</h2>
<div class="team-list">
<div class="ranking-table">
<div class="table-header">
<span>排名</span>
<span>姓名</span>
<span>总业绩</span>
<span>转化率</span>
<span>加微率</span>
<span>入群率</span>
</div>
<div
v-for="member in teamMembers"
:key="member.id"
class="table-row"
:class="{ active: selectedMember.id === member.id }"
@click="selectMember(member)"
>
<span class="rank">{{ member.rank }}</span>
<span class="name">{{ member.name }}</span>
<span class="performance">¥{{ member.performance.toLocaleString() }}</span>
<span class="conversion">{{ member.conversion }}%</span>
<span class="wechat-rate">{{ member.wechatRate || 0 }}%</span>
<span class="group-rate">{{ member.groupRate || 0 }}%</span>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue'
// 定义props
const props = defineProps({
teamMembers: {
type: Array,
required: true
},
selectedMember: {
type: Object,
required: true
}
})
// 定义emits
const emit = defineEmits(['select-member'])
// 选择成员函数
const selectMember = (member) => {
emit('select-member', member)
}
</script>
<style lang="scss" scoped>
// Performance Ranking
.performance-ranking {
background: white;
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
height: 600px; // 固定高度
display: flex;
flex-direction: column;
overflow: hidden;
h2 {
font-size: 1.2rem;
font-weight: 600;
color: #1e293b;
margin: 0 0 1rem 0;
flex-shrink: 0;
}
.team-list {
flex: 1;
overflow-y: auto;
padding-right: 0.5rem;
min-height: 0;
// 自定义滚动条样式
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 3px;
}
&::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 3px;
&:hover {
background: #94a3b8;
}
}
}
.ranking-table {
flex: 1;
display: flex;
flex-direction: column;
.table-header {
display: grid;
grid-template-columns: 60px 1fr 120px 80px 90px 90px;
gap: 0.8rem;
padding: 0.75rem 0;
border-bottom: 1px solid #e2e8f0;
font-weight: 600;
color: #64748b;
font-size: 0.85rem;
white-space: nowrap;
}
.table-row {
display: grid;
grid-template-columns: 60px 1fr 120px 80px 90px 90px;
gap: 0.8rem;
padding: 0.75rem 0;
border-bottom: 1px solid #f1f5f9;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
&:last-child {
border-bottom: none;
}
&:hover {
background-color: #f8fafc;
}
&.active {
background-color: #eff6ff;
border-left: 3px solid #3b82f6;
padding-left: calc(0.75rem - 3px);
}
.rank {
font-weight: 600;
color: #3b82f6;
}
.name {
color: #1e293b;
}
.performance {
color: #059669;
font-weight: 500;
}
.conversion {
color: #64748b;
}
.wechat-rate {
color: #7c3aed;
font-weight: 500;
}
.group-rate {
color: #dc2626;
font-weight: 500;
}
}
}
}
// 移动端适配
@media (max-width: 768px) {
.performance-ranking {
padding: 1rem;
height: auto;
max-height: 400px;
h2 {
font-size: 1.1rem;
}
.ranking-table {
.table-header {
grid-template-columns: 40px 1fr 70px 55px 55px 55px;
gap: 0.3rem;
font-size: 0.75rem;
padding: 0.5rem 0;
white-space: nowrap;
}
.table-row {
grid-template-columns: 40px 1fr 70px 55px 55px 55px;
gap: 0.3rem;
font-size: 0.8rem;
padding: 0.5rem 0;
white-space: nowrap;
.rank {
font-size: 0.8rem;
}
.name {
font-size: 0.8rem;
}
.performance {
font-size: 0.75rem;
}
.conversion {
font-size: 0.75rem;
}
.wechat-rate {
font-size: 0.75rem;
}
.group-rate {
font-size: 0.75rem;
}
}
}
}
}
@media (max-width: 480px) {
.performance-ranking {
padding: 0.75rem;
border-radius: 8px;
.ranking-table {
.table-header {
grid-template-columns: 30px 1fr 55px 45px 45px 45px;
gap: 0.2rem;
font-size: 0.7rem;
white-space: nowrap;
}
.table-row {
grid-template-columns: 30px 1fr 55px 45px 45px 45px;
gap: 0.2rem;
font-size: 0.75rem;
white-space: nowrap;
}
}
}
}
</style>

165
my-vue-app/src/views/maneger/components/SalesFunnel.vue Normal file
View File

@@ -0,0 +1,165 @@
<template>
<div class="sales-funnel">
<h2>团队销售漏斗</h2>
<p class="funnel-description">展示从线索到成交的各个环节转化情况，帮助数据驱动在各阶段的工作重点优化。</p>
<div class="funnel-chart">
<div class="funnel-stage" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
<span class="stage-label">线索总数</span>
<span class="stage-value">1000</span>
</div>
<div class="funnel-stage" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
<span class="stage-label">有效沟通</span>
<span class="stage-value">450</span>
</div>
<div class="funnel-stage" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
<span class="stage-label">到课数据</span>
<span class="stage-value">180</span>
</div>
<div class="funnel-stage" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
<span class="stage-label">预付定金</span>
<span class="stage-value">50</span>
</div>
<div class="funnel-stage" style="background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);">
<span class="stage-label">成功签单</span>
<span class="stage-value">12</span>
</div>
</div>
</div>
</template>
<script setup>
// 团队销售漏斗组件
</script>
<style lang="scss" scoped>
// Sales Funnel
.sales-funnel {
background: white;
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
h2 {
font-size: 1.2rem;
font-weight: 600;
color: #1e293b;
margin: 0 0 0.5rem 0;
}
.funnel-description {
color: #64748b;
font-size: 0.85rem;
margin: 0 0 1.5rem 0;
line-height: 1.4;
}
.funnel-chart {
display: flex;
align-items: center;
gap: 0;
height: 80px;
overflow: hidden;
}
.funnel-stage {
flex: 1;
height: 80px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
font-weight: 500;
position: relative;
clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%, 20px 50%);
&:first-child {
clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%);
}
&:last-child {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 20px 50%);
}
.stage-label {
font-size: 0.85rem;
margin-bottom: 0.25rem;
}
.stage-value {
font-size: 1.1rem;
font-weight: bold;
}
}
}
// 移动端适配
@media (max-width: 768px) {
.sales-funnel {
padding: 1rem;
h2 {
font-size: 1.1rem;
}
.funnel-description {
font-size: 0.8rem;
}
.funnel-chart {
height: auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 0.5rem;
}
.funnel-stage {
height: 50px;
clip-path: none;
border-radius: 8px;
&:nth-child(4) {
grid-column: 1;
grid-row: 2;
}
&:nth-child(5) {
grid-column: 2;
grid-row: 2;
}
.stage-label {
font-size: 0.75rem;
}
.stage-value {
font-size: 1rem;
}
}
}
}
@media (max-width: 480px) {
.sales-funnel {
padding: 0.75rem;
border-radius: 8px;
.funnel-chart {
height: auto;
}
.funnel-stage {
height: 40px;
.stage-label {
font-size: 0.7rem;
}
.stage-value {
font-size: 0.9rem;
}
}
}
}
</style>

115
my-vue-app/src/views/maneger/components/TeamAlerts.vue Normal file
View File

@@ -0,0 +1,115 @@
<template>
<div class="team-alerts">
<h2>团队异常预警</h2>
<div class="alert-list">
<div class="alert-item warning">
<span class="alert-icon">⚠</span>
<span>钱鑫有102人(预计)需今日跟进通话</span>
</div>
<div class="alert-item danger">
<span class="alert-icon">🔺</span>
<span>李娜今日预计电话工作量达30%</span>
</div>
<div class="alert-item info">
<span class="alert-icon">ℹ</span>
<span>高明明客户"王先生"下次未来电话记录</span>
</div>
</div>
</div>
</template>
<script setup>
// 团队异常预警组件
</script>
<style lang="scss" scoped>
// Team Alerts
.team-alerts {
// min-height: 350px;
// max-height: 400px;
background: white;
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
h2 {
font-size: 1.2rem;
font-weight: 600;
color: #1e293b;
margin: 0 0 1rem 0;
}
.alert-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.alert-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
border-radius: 8px;
font-size: 0.9rem;
&.warning {
background: #fef3c7;
color: #92400e;
.alert-icon {
color: #f59e0b;
}
}
&.danger {
background: #fee2e2;
color: #991b1b;
.alert-icon {
color: #ef4444;
}
}
&.info {
background: #dbeafe;
color: #1e40af;
.alert-icon {
color: #3b82f6;
}
}
}
}
// 移动端适配
@media (max-width: 768px) {
.team-alerts {
padding: 1rem;
h2 {
font-size: 1.1rem;
}
.alert-item {
padding: 0.5rem;
font-size: 0.8rem;
flex-direction: row;
align-items: center;
gap: 0.5rem;
.alert-icon {
font-size: 1.2rem;
flex-shrink: 0;
}
}
}
}
@media (max-width: 480px) {
.team-alerts {
padding: 0.75rem;
border-radius: 8px;
}
}
</style>

159
my-vue-app/src/views/maneger/components/TeamReport.vue Normal file
View File

@@ -0,0 +1,159 @@
<template>
<div class="team-report">
<h2>今日团队实时战报</h2>
<div class="report-grid">
<div class="report-card">
<div class="card-header">
<span class="card-title">团队总通话</span>
<span class="card-trend positive">+10% vs 昨日</span>
</div>
<div class="card-value">873 次</div>
</div>
<div class="report-card">
<div class="card-header">
<span class="card-title">有效通话时长</span>
<span class="card-trend negative">-5% vs 昨日</span>
</div>
<div class="card-value">25.4 小时</div>
</div>
<div class="report-card">
<div class="card-header">
<span class="card-title">新增意向客户</span>
<span class="card-trend positive">+15% vs 昨日</span>
</div>
<div class="card-value">43 人</div>
</div>
<div class="report-card">
<div class="card-header">
<span class="card-title">新增成交</span>
<span class="card-trend positive">+20% vs 昨日</span>
</div>
<div class="card-value">12 单</div>
</div>
<div class="report-card">
<div class="card-header">
<span class="card-title">总业绩</span>
<span class="card-trend positive">+8% vs 昨日</span>
</div>
<div class="card-value">65,000 元</div>
</div>
<div class="report-card">
<div class="card-header">
<span class="card-title">团队人均产出</span>
<span class="card-trend positive">+9% vs 昨日</span>
</div>
<div class="card-value">13,000 元</div>
</div>
</div>
</div>
</template>
<script setup>
// 今日团队实时战报组件
</script>
<style lang="scss" scoped>
// Team Report
.team-report {
background: white;
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
h2 {
font-size: 1.2rem;
font-weight: 600;
color: #1e293b;
margin: 0 0 1.5rem 0;
}
.report-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.report-card {
padding: 1rem;
border: 1px solid #e2e8f0;
border-radius: 8px;
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}
.card-title {
color: #64748b;
font-size: 0.85rem;
}
.card-trend {
font-size: 0.75rem;
font-weight: 500;
&.positive {
color: #059669;
}
&.negative {
color: #dc2626;
}
}
.card-value {
font-size: 1.5rem;
font-weight: bold;
color: #1e293b;
}
}
}
// 移动端适配
@media (max-width: 768px) {
.team-report {
padding: 1rem;
h2 {
font-size: 1.1rem;
margin-bottom: 1rem;
}
.report-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
.report-card {
padding: 0.75rem;
.card-header {
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
.card-title {
font-size: 0.8rem;
}
.card-trend {
font-size: 0.7rem;
}
.card-value {
font-size: 1.25rem;
}
}
}
}
@media (max-width: 480px) {
.team-report {
padding: 0.75rem;
border-radius: 8px;
}
}
</style>

1648
my-vue-app/src/views/maneger/manager.vue Normal file
View File

File diff suppressed because it is too large Load Diff