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

Compare commits

base: LiuRui:2979e7e216404d90bd03d5b521a4713c81b085da
Branches Tags
LiuRui:main LiuRui:Breach
..
compare: LiuRui:Breach
Branches Tags
LiuRui:Breach LiuRui:main

23 Commits
2979e7e216 ... Breach

Author SHA1 Message Date
lbw_9527443
b2ce9d93db fix(导出): 修复客户数据导出功能并增强表单数据处理 
- 更新导出API端点以匹配后端接口变更
- 重构表单数据解析逻辑，支持多种数据结构格式
- 动态生成Excel列宽，避免数据截断
- 添加客户姓名字段到导出数据
- 优化重复字段处理，确保导出数据完整性
 2026-01-29 19:58:21 +08:00
lbw_9527443
8260b345dc feat(表单信息展示): 支持多表单数据展示和筛选功能 
- 重构表单数据解析逻辑，支持从数组格式中提取多表单数据
- 添加表单筛选按钮，可按表单标题筛选显示内容
- 优化数据结构处理，支持问答列表和旧格式的兼容
- 改进UI布局，添加表单标题和分割线提升可读性
 2026-01-23 18:56:46 +08:00
lbw_9527443
2cd59adfc9 feat(person): 在销售时间轴任务列表中增加已完成用户分组显示 
- 将待操作用户列表重构为独立的任务区块，根据选定阶段动态显示标题
- 新增已完成用户区块，根据销售阶段自动计算已完成联系人
- 为不同区块添加视觉区分样式，包括标题颜色和背景
- 添加阶段排序逻辑和表单完成状态检查函数
- 改进联系人数据构建函数以支持多种数据源
 2026-01-23 18:07:34 +08:00
lbw_9527443
baa89001c8 style(manager): 简化按钮文本并调整样式 
移除按钮的内边距，统一字体大小，简化切换按钮文本为"原文"和"分析"
 2026-01-12 14:55:05 +08:00
lbw_9527443
9b3c5da105 feat(manager): 添加优秀录音文件获取及展示功能 
新增获取优秀录音文件的API接口，并在管理页面添加GoodMusic组件展示录音文件列表
支持录音文件的下载、转文字及分析功能，优化了页面布局和间距
 2026-01-12 14:50:30 +08:00
lbw_9527443
a4c0aca1c2 refactor(CustomerDetail): 重构基础信息分析逻辑为调用API 
将原有的本地处理表单、聊天记录和通话记录的逻辑替换为直接调用后端API获取客户基础信息
 2025-12-19 11:48:00 +08:00
lbw_9527443
9f19b8fb66 Merge branch 'Breach' of https://git.yinlihupo.cn/LiuRui/DJKB into Breach 2025-11-25 20:37:27 +08:00
lbw_9527443
14ddd2839b fix(manager): 修复团队异常预警中可选链操作符的使用 
处理原始数据可能为undefined的情况，使用可选链操作符避免潜在的错误
 2025-11-25 20:37:26 +08:00
chenpanliang
6d2d3bda67 refactor(manager): 移除多余的part_count参数并简化请求参数 
简化团队分析请求逻辑，直接使用getRequestParams()获取参数，移除硬编码的part_count字段
 2025-11-25 18:49:41 +08:00
chenpanliang
b48b7749f2 feat(团队分析): 添加团队整体三阶分析报告功能 
- 在api/manager.js中添加获取团队分析报告的接口
- 在TeamReport组件中添加分析按钮并触发事件
- 在manager.vue中实现团队分析弹窗及相关逻辑
- 添加样式美化分析报告展示
 2025-11-25 17:53:54 +08:00
chenpanliang
2ba88eff08 feat(部门分析): 添加部门整体分析报告功能 
实现部门分析弹窗的数据获取与展示功能，新增getTeamEntiretyReport API接口
调整多个组件高度以优化布局
 2025-11-25 16:59:43 +08:00
chenpanliang
6cf6829334 feat(团队分析): 添加团队和部门分析功能及弹窗 
- 在api中添加获取团队各组分析报告的接口
- 在secondTop和seniorManager视图中添加团队分析弹窗组件
- 实现部门分析弹窗功能
- 添加样式和交互逻辑处理团队分析数据展示
 2025-11-25 16:11:07 +08:00
lbw_9527443
9d52b99414 refactor: 移除调试用的console.log语句 
清理多个组件和工具文件中用于调试的console.log语句，保持代码整洁
 2025-11-25 15:31:40 +08:00
chenpanliang
b9f74dc810 fix(统计指标): 修复数据未加载时显示异常问题 
修改统计指标组件和父组件的数据处理逻辑，确保在数据未加载或返回null时显示默认值0。同时将props类型从Number改为Object，并添加默认空对象防止访问属性错误。
 2025-11-25 15:26:34 +08:00
lbw_9527443
1647970bed fix(components): 为录音名称添加标题提示和文本溢出处理 
添加标题提示以显示完整录音名称，并设置文本溢出样式防止布局问题
 2025-11-21 19:36:34 +08:00
lbw_9527443
e696f768e6 feat(录音报告): 添加一键复制报告内容功能 
添加一键复制按钮到录音报告模态框，支持现代Clipboard API和传统复制方法。同时将录音名称显示为客户姓名（如果存在），否则使用默认名称。
 2025-11-21 16:35:00 +08:00
lbw_9527443
6b76d36946 feat: 更新应用图标、标题并调整弹窗尺寸 
修改应用图标为NYC_logo，更新页面标题为"暖洋葱家庭教育数据看板"
调整sale.vue中弹窗的最大宽度和高度以适应更多内容
 2025-11-19 15:21:36 +08:00
lbw_9527443
8e5f7335d8 feat(团队管理): 添加团队整体分析按钮并优化布局 
在secondTop和seniorManager页面添加团队整体分析按钮
调整seniorManager页面的团队详情头部布局，使其更灵活
为按钮添加悬停和点击效果
 2025-11-10 17:40:09 +08:00
lbw_9527443
5ff42dbbad fix(api): 修正二阶分析报告接口路径错误 
refactor(views): 重构阶段分析报告展示逻辑，使用新接口数据格式

feat(analytics): 添加umami网站统计脚本

feat(api): 新增优秀录音文件获取接口

style(views): 优化分析报告样式和布局
 2025-11-07 20:53:40 +08:00
lbw_9527443
b0c2f28d7f feat(录音管理): 添加优秀录音组件并优化API调用 
refactor(性能优化): 使用Promise.all并行请求核心KPI接口

style(样式调整): 修改ProblemRanking组件高度和内边距

chore: 移除调试用的console.log语句
 2025-10-29 17:11:57 +08:00
lbw_9527443
51091d097e 5555 2025-10-29 12:13:47 +08:00
lbw_9527443
86cf54b9de fix(router): 将首页重定向从/sale改为/login 
refactor: 移除seniorManager.vue中多余的空白行
 2025-10-27 12:11:25 +08:00
lbw_9527443
10fb9dd4f2 feat(销售时间线): 添加全部录音按钮及处理逻辑 
新增全部录音按钮并实现其点击事件处理逻辑，同时将API端点从本地地址改为生产环境地址。处理函数结构与未归属录音类似，但调用不同的API接口获取数据。
 2025-10-23 10:47:29 +08:00
28 changed files with 4229 additions and 538 deletions
Expand all files Collapse all files

5
my-vue-app/index.html
View File

@@ -2,9 +2,10 @@
<html lang="zh"> <html lang="zh">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" href="/NYC_logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title> <title>暖洋葱家庭教育数据看板</title>
<script defer src="https://umami.nycjy.cn/script.js" data-website-id="0d851950-9420-4c3e-a12a-c221fcf039b5"></script>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

BIN
my-vue-app/public/NYC_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 121 KiB

2
my-vue-app/src/api/api.js
View File

@@ -84,5 +84,5 @@ export const getCallSuccessRate = (params) => {
// 二阶分析报告 // 二阶分析报告
export const getSecondOrderAnalysisReport = (params) => { export const getSecondOrderAnalysisReport = (params) => {
return https.post('/api/v1/sales/get_call_text', params) return https.post('/api/v1/sales/get_second_analysis_report', params)
} }

13
my-vue-app/src/api/manager.js
View File

@@ -44,9 +44,9 @@ export const getGroupDetail = (params) => {
export const getGroupCallDuration = (params) => { export const getGroupCallDuration = (params) => {
return https.post('/api/v1/manager/group_call_duration', params) return https.post('/api/v1/manager/group_call_duration', params)
} }
// 二二阶分析报告 /api/v1/sales/get_call_text // 二阶分析报告 /api/v1/sales/get_call_text
export const GetSecondOrderAnalysisReport = (params) => { export const GetSecondOrderAnalysisReport = (params) => {
return https.post('/api/v1/manager/group_call_text', params) return https.post('/api/v1/manager/group_second_report', params)
} }
// 通话分类数据 /api/v1/manager/get_member_call_classify // 通话分类数据 /api/v1/manager/get_member_call_classify
@@ -54,3 +54,12 @@ export const getMemberCallClassify = (params) => {
return https.post('/api/v1/manager/get_member_call_classify', params) return https.post('/api/v1/manager/get_member_call_classify', params)
} }
// 团队整体三阶分析报告 /api/v1/manager/group_entirety_third_report
export const getGroupEntiretyThirdReport = (params) => {
return https.post('/api/v1/manager/group_entirety_third_report', params)
}
// 获取优秀录音文件 /api/v1/level_five/overview/get_excellent_record_file
export const getExcellentRecordFile = (params) => {
return https.post('/api/v1/level_five/overview/get_excellent_record_file', params)
}

2
my-vue-app/src/api/secondTop.js
View File

@@ -87,7 +87,7 @@ export const cancelSwitchHistoryCampPeriod = (params) => {
// 一键导出 api/v1/level_four/overview/export_customers // 一键导出 api/v1/level_four/overview/export_customers
export const exportCustomers = (params) => { export const exportCustomers = (params) => {
return https.post('/api/v1/level_four/overview/export_customers', params) return https.post('/api/v1/level_four/overview/export_all_customers_under_sales', params)
} }

15
my-vue-app/src/api/senorManger.js
View File

@@ -79,6 +79,19 @@ export const getTeamManyTarget = (params) => {
return https.post('/api/v1/level_three/overview/get_team_many_target', params) return https.post('/api/v1/level_three/overview/get_team_many_target', params)
} }
// 优秀录音 /api/v1/level_three/overview/get_current_center_excellent_record_file
export const getExcellentRecordFile = (params) => {
return https.post('/api/v1/level_three/overview/get_current_center_excellent_record_file', params)
}
// 团队下各组分析报告 /api/v1/level_three/overview/team_every_group_report
export const getTeamEveryGroupReport = (params) => {
return https.post('/api/v1/level_three/overview/team_every_group_report', params)
}
// 部门整体分析报告 /api/v1/level_three/overview/team_entirety_report
export const getTeamEntiretyReport = (params) => {
return https.post('/api/v1/level_three/overview/team_entirety_report', params)
}

4
my-vue-app/src/components/FeedbackForm.vue
View File

@@ -124,12 +124,12 @@ const handleSubmit = async () => {
const token = localStorage.getItem('token') || ''; const token = localStorage.getItem('token') || '';
// 发送 POST 请求到后端接口 // 发送 POST 请求到后端接口
const response = await axios.post('https://mldash.nycjy.cn/api/v1/submit_feedback', {project:'mldash',type: formData.type, content: formData.content}, { const response = await axios.post('https://feedback.api.nycjy.cn/api/v1/feedback/submit_feedback', {project:'mldash',type: formData.type, content: formData.content}, {
headers: { headers: {
'Authorization': `Bearer ${token}` 'Authorization': `Bearer ${token}`
} }
}); });
console.log('响应状态8888:', response.data.message); // console.log('响应状态8888:', response.data.message);
// 提交成功 // 提交成功
submitStatus.value = 'success'; submitStatus.value = 'success';
// 触发父组件的事件，并传递数据 // 触发父组件的事件，并传递数据

2
my-vue-app/src/router/index.js
View File

@@ -11,7 +11,7 @@ const routes = [
{ {
path: '/', path: '/',
name: 'Home', name: 'Home',
redirect: '/sale' redirect: '/login'
}, },
{ {
path: '/login', path: '/login',

1
my-vue-app/src/utils/https.js
View File

@@ -31,7 +31,6 @@ service.interceptors.request.use(
} }
// 显示加载状态 // 显示加载状态
if (config.showLoading !== false) { if (config.showLoading !== false) {
console.log('显示加载中...')
} }
return config return config
}, },

1144
my-vue-app/src/views/maneger/components/GoodMusic.vue Normal file
View File

File diff suppressed because it is too large Load Diff

201
my-vue-app/src/views/maneger/components/MemberDetails.vue
View File

@@ -85,11 +85,6 @@
<div class="guidance-section"> <div class="guidance-section">
<div class="guidance-header" @click="toggleGuidanceCollapse"> <div class="guidance-header" @click="toggleGuidanceCollapse">
<h3>💡 指导建议</h3> <h3>💡 指导建议</h3>
<div class="period-switcher">
<button @click="switchAnalysisPeriod('day')" :class="{ active: analysisPeriod === 'day' }">当日</button>
<button @click="switchAnalysisPeriod('camp')" :class="{ active: analysisPeriod === 'camp' }">当期</button>
<button @click="switchAnalysisPeriod('month')" :class="{ active: analysisPeriod === 'month' }">当月</button>
</div>
<div class="collapse-toggle" :class="{ 'collapsed': isGuidanceCollapsed }"> <div class="collapse-toggle" :class="{ 'collapsed': isGuidanceCollapsed }">
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"> <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M8 4l4 4H4l4-4z"/> <path d="M8 4l4 4H4l4-4z"/>
@@ -99,28 +94,18 @@
<div class="guidance-content" v-show="!isGuidanceCollapsed" :class="{ 'collapsing': isGuidanceCollapsed }"> <div class="guidance-content" v-show="!isGuidanceCollapsed" :class="{ 'collapsing': isGuidanceCollapsed }">
<!-- 分析报告内容 --> <!-- 分析报告内容 -->
<div class="analysis-report"> <div class="analysis-report">
<div v-if="isReportLoading" class="loading">正在生成分析报告...</div> <div v-if="isReportLoading" class="loading-message">正在生成分析报告...</div>
<div v-else-if="!analysisReport || (Array.isArray(analysisReport) && analysisReport.length === 0)" class="empty-message">
暂无分析报告数据
</div>
<div v-else-if="Array.isArray(analysisReport)">
<div v-for="(report, index) in analysisReport" :key="index" class="report-section">
<h4 class="report-title">{{ report.name }} ({{ report.start_time }} - {{ report.end_time }})</h4>
<div class="report-content" v-html="report.report.replace(/\n/g, '<br>')"></div>
</div>
</div>
<div v-else class="report-content">{{ analysisReport }}</div> <div v-else class="report-content">{{ analysisReport }}</div>
</div> </div>
<!-- 原有指导建议内容 -->
<div class="guidance-cards">
<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>
</div> </div>
</div> </div>
<!-- Tooltip 组件 --> <!-- Tooltip 组件 -->
@@ -224,53 +209,6 @@ const processedCallStats = computed(() => {
})).sort((a, b) => b.count - a.count); // 按通话次数降序排列 })).sort((a, b) => b.count - a.count); // 按通话次数降序排列
}); });
// 切换分析周期
const switchAnalysisPeriod = (period) => {
analysisPeriod.value = period
CenterGetSecondOrderAnalysisReport(analysisPeriod.value)
}
// 获取二阶分析报告
async function CenterGetSecondOrderAnalysisReport(time) {
if (!chatService_02.value) {
chatService_02.value = new SimpleChatService('app-MGaBOx5QFblsMZ7dSkxKJDKm')
}
isReportLoading.value = true
analysisReport.value = ''
try {
const params = {
user_name: props.memberDetails?.user_name,
time: time
}
const response = await GetSecondOrderAnalysisReport(params)
if (!response.data.records || response.data.records.length === 0) {
analysisReport.value = '当前周期暂无数据可供分析。'
isReportLoading.value = false
return
}
const records = response.data.records.join('\n')
chatService_02.value.sendMessage(
records,
(update) => {
analysisReport.value = update.content
},
() => {
isReportLoading.value = false
}
)
} catch (error) {
console.error('获取二阶分析报告失败:', error)
analysisReport.value = '获取分析报告失败，请稍后重试。'
isReportLoading.value = false
}
}
// 切换指导建议折叠状态 // 切换指导建议折叠状态
const toggleGuidanceCollapse = () => { const toggleGuidanceCollapse = () => {
isGuidanceCollapsed.value = !isGuidanceCollapsed.value isGuidanceCollapsed.value = !isGuidanceCollapsed.value
@@ -293,31 +231,6 @@ const hideTooltip = () => {
tooltip.visible = false tooltip.visible = false
} }
// 获取成员指导建议
const getGuidanceForMember = (member) => {
const guidance = []
if (!member) return guidance;
// 业绩相关建议
if (member.month_order_count === 0) {
guidance.push({ type: 'urgent', icon: '🚨', title: '业绩突破', description: '当前还未有成交记录，需要重点关注转化技巧和客户跟进。', action: '建议参加销售技巧培训，加强客户需求挖掘' })
} else if (member.month_order_count < 5) {
guidance.push({ type: 'warning', icon: '📈', title: '业绩提升', description: '业绩有提升空间，可以通过优化沟通策略来提高转化率。', action: '分析高业绩同事的沟通技巧，制定个人提升计划' })
}
// 转化率相关建议
if (member.conversion < 3.0) {
guidance.push({ type: 'urgent', icon: '🎯', title: '转化率优化', description: '转化率偏低，需要提升客户沟通和需求挖掘能力。', action: '重点学习客户心理分析和异议处理技巧' })
}
// 通话相关建议
if (member.call_count < 100) {
guidance.push({ type: 'warning', icon: '📞', title: '通话量提升', description: '通话量偏少，增加客户接触频次有助于提升业绩。', action: '制定每日通话计划，确保充足的客户接触量' })
}
return guidance.slice(0, 3);
}
// 【修改】函数现在从API获取数据并更新内部状态 // 【修改】函数现在从API获取数据并更新内部状态
async function updateCallClassificationData() { async function updateCallClassificationData() {
if (props.selectedMember && props.selectedMember.user_name) { if (props.selectedMember && props.selectedMember.user_name) {
@@ -325,6 +238,7 @@ async function updateCallClassificationData() {
const response = await getMemberCallClassify({ const response = await getMemberCallClassify({
user_name: props.selectedMember.user_name user_name: props.selectedMember.user_name
}); });
console.log('获取通话分类数据:', response.data);
// 将获取到的数据赋值给内部状态 // 将获取到的数据赋值给内部状态
callClassificationData.value = { callClassificationData.value = {
call_count_by_tag: response.call_count_by_tag || {}, call_count_by_tag: response.call_count_by_tag || {},
@@ -341,14 +255,33 @@ async function updateCallClassificationData() {
} }
} }
// 获取二阶分析报告数据
async function fetchAnalysisReport() {
if (props.selectedMember && props.selectedMember.user_name) {
isReportLoading.value = true;
try {
const response = await GetSecondOrderAnalysisReport({
user_name: props.selectedMember.user_name
});
console.log('获取分析报告数据:', response.data);
// 将获取到的数据赋值给分析报告变量
analysisReport.value = response.data;
} catch (error) {
console.error('获取分析报告失败:', error);
analysisReport.value = '';
} finally {
isReportLoading.value = false;
}
}
}
// 监听selectedMember变化 // 监听selectedMember变化
watch(() => props.selectedMember, (newMember) => { watch(() => props.selectedMember, (newMember) => {
if (newMember) { if (newMember) {
// 成员变化时，获取新的通话分类数据 // 成员变化时，获取新的通话分类数据
updateCallClassificationData(); updateCallClassificationData();
// 同时获取新的分析报告 // 获取分析报告数据
CenterGetSecondOrderAnalysisReport(analysisPeriod.value); fetchAnalysisReport();
// 重置滚动位置 // 重置滚动位置
nextTick(() => { nextTick(() => {
const container = document.querySelector('.member-details') const container = document.querySelector('.member-details')
@@ -656,14 +589,80 @@ watch(() => props.selectedMember, (newMember) => {
border: 1px solid #e2e8f0; border: 1px solid #e2e8f0;
min-height: 100px; min-height: 100px;
.loading { .loading-message {
text-align: center; text-align: center;
color: #64748b; color: #64748b;
font-style: italic; font-style: italic;
padding: 1rem; padding: 1rem;
} }
.empty-message {
text-align: center;
color: #94a3b8;
padding: 2rem;
font-style: italic;
}
.report-section {
margin-bottom: 1.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px dashed #e2e8f0;
&:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.report-title {
font-size: 1rem;
font-weight: 600;
color: #1e293b;
margin: 0 0 0.75rem 0;
padding: 0.5rem 0.75rem;
background: #ffffff;
border-left: 3px solid #3b82f6;
border-radius: 2px;
}
.report-content { .report-content {
white-space: pre-wrap;
line-height: 1.6;
color: #334155;
font-size: 0.9rem;
padding: 0 0.5rem;
h1, h2, h3 {
color: #1e293b;
margin: 1.25rem 0 0.75rem 0;
}
h3 {
font-size: 1.1rem;
border-bottom: 1px solid #e2e8f0;
padding-bottom: 0.25rem;
}
p {
margin: 0.5rem 0;
}
ul, ol {
margin: 0.75rem 0;
padding-left: 1.5rem;
}
li {
margin: 0.25rem 0;
}
strong {
font-weight: 600;
}
}
}
.report-content:not(.report-section .report-content) {
white-space: pre-wrap; white-space: pre-wrap;
line-height: 1.5; line-height: 1.5;
color: #1e293b; color: #1e293b;

35
my-vue-app/src/views/maneger/components/TeamReport.vue
View File

@@ -1,6 +1,9 @@
<template> <template>
<div class="team-report"> <div class="team-report">
<div class="header-container">
<h2>今日团队实时战报</h2> <h2>今日团队实时战报</h2>
<button class="analysis-button" @click="showTeamAnalysis">团队分析</button>
</div>
<div class="report-grid"> <div class="report-grid">
<div class="report-card"> <div class="report-card">
<div class="card-header"> <div class="card-header">
@@ -76,6 +79,9 @@ const props = defineProps({
} }
}) })
// 定义emit
const emit = defineEmits(['show-team-analysis'])
// 监听数据变化，用于调试 // 监听数据变化，用于调试
watch(() => props.weekTotalData, (newData) => { watch(() => props.weekTotalData, (newData) => {
console.log('TeamReport 收到的数据:', newData) console.log('TeamReport 收到的数据:', newData)
@@ -146,6 +152,11 @@ const showTooltip = (metricType, event) => {
const hideTooltip = () => { const hideTooltip = () => {
tooltip.visible = false tooltip.visible = false
} }
// 显示团队分析
const showTeamAnalysis = () => {
emit('show-team-analysis')
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -156,11 +167,33 @@ const hideTooltip = () => {
padding: 1.5rem; padding: 1.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
h2 { h2 {
font-size: 1.2rem; font-size: 1.2rem;
font-weight: 600; font-weight: 600;
color: #1e293b; color: #1e293b;
margin: 0 0 1.5rem 0; margin: 0;
}
.analysis-button {
background: #409eff;
color: white;
border: none;
border-radius: 4px;
padding: 8px 16px;
font-size: 0.9rem;
cursor: pointer;
transition: background-color 0.3s;
&:hover {
background: #337ecc;
}
} }
.report-grid { .report-grid {

442
my-vue-app/src/views/maneger/manager.vue
View File

@@ -37,9 +37,11 @@
<!-- Top Section - Team Alerts and Today's Report --> <!-- Top Section - Team Alerts and Today's Report -->
<div class="top-section"> <div class="top-section">
<!-- Team Alerts --> <!-- Team Alerts -->
<TeamAlerts :abnormalData="groupAbnormalResponse" /> <!-- <TeamAlerts :abnormalData="groupAbnormalResponse" /> -->
<GoodMusic :quality-calls="excellentRecord"
/>
<!-- Today's Team Report --> <!-- Today's Team Report -->
<TeamReport :weekTotalData="weekTotalData" /> <TeamReport :weekTotalData="weekTotalData" @show-team-analysis="fetchTeamAnalysis" />
</div> </div>
<!-- Sales Funnel Section --> <!-- Sales Funnel Section -->
@@ -65,11 +67,30 @@
</div> </div>
</main> </main>
</div> </div>
<!-- 团队分析弹窗 -->
<div v-if="showTeamAnalysisModal" class="modal-overlay" @click="showTeamAnalysisModal = false">
<div class="modal-content" @click.stop>
<div class="modal-header">
<h3>团队整体三阶分析报告</h3>
<button class="close-button" @click="showTeamAnalysisModal = false">×</button>
</div>
<div class="modal-body">
<div v-for="(report, index) in teamAnalysisData" :key="index" class="report-item">
<div class="report-meta">
<span class="time-range">{{ report.start_time }} 至 {{ report.end_time }}</span>
<span class="created-at">生成时间: {{ report.created_at }}</span>
</div>
<div class="report-content" v-html="formatReportContent(report.report)"></div>
</div>
</div>
</div>
</div>
</template> </template>
<script setup> <script setup>
import { ref, onMounted, computed } from "vue"; import { ref, onMounted, computed } from "vue";
import TeamAlerts from "./components/TeamAlerts.vue"; import TeamAlerts from "./components/TeamAlerts.vue";
import GoodMusic from "./components/GoodMusic.vue";
import TeamReport from "./components/TeamReport.vue"; import TeamReport from "./components/TeamReport.vue";
import SalesFunnel from "./components/SalesFunnel.vue"; import SalesFunnel from "./components/SalesFunnel.vue";
import PerformanceRanking from "./components/PerformanceRanking.vue"; import PerformanceRanking from "./components/PerformanceRanking.vue";
@@ -81,7 +102,7 @@ import CustomerDetail from "../person/components/CustomerDetail.vue";
import { useUserStore } from "@/stores/user"; import { useUserStore } from "@/stores/user";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import {getGroupAbnormalResponse, getWeekTotalCall, getWeekAddCustomerTotal, getWeekAddDealTotal, import {getGroupAbnormalResponse, getWeekTotalCall, getWeekAddCustomerTotal, getWeekAddDealTotal,
getWeekAddFeeTotal, getGroupFunnel,getPayDepositToMoneyRate,getGroupRanking, getGroupCallDuration,getGroupDetail} from "@/api/manager.js"; getWeekAddFeeTotal, getGroupFunnel,getPayDepositToMoneyRate,getGroupRanking, getGroupCallDuration,getGroupDetail, getGroupEntiretyThirdReport,getExcellentRecordFile} from "@/api/manager.js";
// 团队成员数据 // 团队成员数据
const teamMembers = [ const teamMembers = [
@@ -108,9 +129,10 @@ const userStore = useUserStore();
// 获取通用请求参数的函数 // 获取通用请求参数的函数
const getRequestParams = () => { const getRequestParams = () => {
const params = {} const params = {}
// 只从路由参数获取 // 从路由参数获取
const routeUserLevel = router.currentRoute.value.query.user_level || router.currentRoute.value.params.user_level 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 const routeUserName = router.currentRoute.value.query.user_name || router.currentRoute.value.params.user_name
// 如果路由有参数，使用路由参数 // 如果路由有参数，使用路由参数
if (routeUserLevel) { if (routeUserLevel) {
params.user_level = routeUserLevel.toString() params.user_level = routeUserLevel.toString()
@@ -119,6 +141,14 @@ const getRequestParams = () => {
params.user_name = routeUserName params.user_name = routeUserName
} }
// 如果没有路由参数，使用当前登录用户的信息
if (!params.user_level && userStore.userInfo?.user_level) {
params.user_level = userStore.userInfo.user_level.toString()
}
if (!params.user_name && userStore.userInfo?.username) {
params.user_name = userStore.userInfo.username
}
return params return params
} }
@@ -146,7 +176,7 @@ const weekTotalData = ref({
pay_deposit_to_money_rate: {}, pay_deposit_to_money_rate: {},
group_funnel: {}, group_funnel: {},
group_call_duration: {}, group_call_duration: {},
}); })
// 团队异常预警 // 团队异常预警
const groupAbnormalResponse = ref({}) const groupAbnormalResponse = ref({})
async function TeamGetGroupAbnormalResponse() { async function TeamGetGroupAbnormalResponse() {
@@ -161,9 +191,9 @@ async function TeamGetGroupAbnormalResponse() {
let alertId = 1 let alertId = 1
// 处理严重超时异常人员 // 处理严重超时异常人员
const timeoutPersons = rawData.erious_timeout_rate_abnorma || [] const timeoutPersons = rawData?.serious_timeout_rate_abnorma || []
// 处理表格填写异常人员 // 处理表格填写异常人员
const fillingPersons = rawData.table_filling_abnormal || [] const fillingPersons = rawData?.table_filling_abnormal || []
// 为每个异常人员生成独立的预警消息 // 为每个异常人员生成独立的预警消息
@@ -234,7 +264,48 @@ async function TeamGetWeekAddDealTotal() {
weekTotalData.value.week_add_deal_total = res.data weekTotalData.value.week_add_deal_total = res.data
} }
} }
// 月度总业绩 // 优秀录音
// 获取优秀录音
const excellentRecord = ref([]);
// 获取优秀录音文件
async function CentergetGoodRecord() {
console.log('CentergetGoodRecord 开始执行')
try {
const params = getRequestParams()
const params1 = {
user_level: userStore.userInfo?.user_level?.toString() || '',
user_name: userStore.userInfo?.username || ''
}
// 检查参数是否有效
const hasParams = params.user_name && params.user_level
const requestParams = hasParams ? {
...params,
} : params1
console.log('CentergetGoodRecord request params:', requestParams)
// 验证必要参数是否存在
if (!requestParams.user_name || !requestParams.user_level) {
console.error("缺少必要的请求参数:", requestParams);
return;
}
// 直接发送请求，不使用缓存
const res = await getExcellentRecordFile(requestParams)
console.log(972872132,res)
if (res && res.code === 200 && res.data) {
excellentRecord.value = res.data || []
console.log('获取优秀录音成功:', res.data)
} else {
console.error("获取优秀录音失败，响应数据不完整:", res);
excellentRecord.value = []
}
} catch (error) {
console.error("获取优秀录音失败:", error);
excellentRecord.value = []
}
}
// 定金转化 // 定金转化
@@ -286,6 +357,10 @@ async function TeamGetGroupRanking() {
const memberDetails = ref({}) const memberDetails = ref({})
// 团队分析数据
const teamAnalysisData = ref([])
const showTeamAnalysisModal = ref(false)
// 当前选中的成员，默认为空 // 当前选中的成员，默认为空
const selectedMember = ref(null); const selectedMember = ref(null);
@@ -318,18 +393,85 @@ week_order_count
} }
} }
// 获取团队分析数据
const fetchTeamAnalysis = async () => {
try {
showTeamAnalysisModal.value = true
const params = getRequestParams()
const response = await getGroupEntiretyThirdReport(params)
// 根据API响应结构调整数据处理逻辑
if (response.data) {
if (Array.isArray(response.data)) {
// 如果response.data本身就是数组
teamAnalysisData.value = response.data
} else if (response.data.data && Array.isArray(response.data.data)) {
// 如果response.data.data是数组
teamAnalysisData.value = response.data.data
} else {
// 其他情况，可能是单个对象
teamAnalysisData.value = [response.data]
}
}
} catch (error) {
console.error('获取团队分析数据失败:', error)
teamAnalysisData.value = []
}
}
// 格式化报告内容
const formatReportContent = (content) => {
if (!content || content === "None") {
return "<p>暂无分析报告内容</p>";
}
// 处理报告内容，保留换行和基本格式
let formattedContent = content
// 替换连续的换行符
.replace(/\n\s*\n/g, '</p><p>')
// 替换单个换行符为<br>
.replace(/\n/g, '<br>')
// 替换Markdown风格的标题为HTML标签
.replace(/^### (.*?)(<br>|$)/gim, '<h3>$1</h3>')
.replace(/^## (.*?)(<br>|$)/gim, '<h2>$1</h2>')
.replace(/^# (.*?)(<br>|$)/gim, '<h1>$1</h1>')
// 替换粗体
.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
// 替换斜体
.replace(/\*(.*?)\*/g, '<em>$1</em>')
// 替换无序列表项
.replace(/^\* (.*?)(<br>|$)/gim, '<li>$1</li>');
// 包装列表项到<ul>标签中
formattedContent = formattedContent.replace(/(<li>.*?<\/li>)+/g, '<ul>$&</ul>');
// 处理段落
if (!formattedContent.startsWith('<p>')) {
formattedContent = '<p>' + formattedContent;
}
if (!formattedContent.endsWith('</p>')) {
formattedContent = formattedContent + '</p>';
}
// 清理多余的<br>标签
formattedContent = formattedContent.replace(/<br><\/p>/g, '</p>');
return formattedContent;
}
// 团队异常预警 // 团队异常预警
onMounted(async () => { onMounted(async () => {
await TeamGetGroupAbnormalResponse() CentergetGoodRecord()
await TeamGetWeekTotalCall() TeamGetGroupAbnormalResponse()
await TeamGetGroupCallDuration() TeamGetWeekTotalCall()
await TeamGetWeekAddCustomerTotal() TeamGetGroupCallDuration()
await TeamGetWeekAddDealTotal() TeamGetWeekAddCustomerTotal()
await TeamGetWeekAddFeeTotal() TeamGetWeekAddDealTotal()
await TeamGetGroupFunnel() TeamGetWeekAddFeeTotal()
await TeamGetGroupRanking() TeamGetGroupFunnel()
TeamGetGroupRanking()
}) })
</script> </script>
@@ -646,12 +788,12 @@ onMounted(async () => {
.top-section { .top-section {
display: grid; display: grid;
grid-template-columns: 1fr 3fr; grid-template-columns: 1fr 3fr;
gap: 1rem; gap: 0.5rem;
// PC端保持一致布局 // PC端保持一致布局
@media (min-width: 1024px) { @media (min-width: 1024px) {
grid-template-columns: 1fr 3fr; grid-template-columns: 1fr 3fr;
gap: 1.5rem; gap: 1rem;
} }
// 平板端适配 // 平板端适配
@@ -676,7 +818,7 @@ onMounted(async () => {
.analytics-section { .analytics-section {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 1rem; gap: 0.5rem;
margin-bottom: 1rem; margin-bottom: 1rem;
// PC端保持一致布局 // PC端保持一致布局
@@ -1850,5 +1992,267 @@ onMounted(async () => {
} }
} }
} }
/* 团队分析弹窗样式 */
.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;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
max-width: 90vw;
max-height: 90vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
.modal-header {
padding: 1rem 1.5rem;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-header h3 {
margin: 0;
font-size: 1.25rem;
color: #333;
}
.close-button {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: #999;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.close-button:hover {
color: #333;
}
.modal-body {
padding: 1.5rem;
overflow-y: auto;
max-height: calc(90vh - 80px);
}
.report-item {
margin-bottom: 2rem;
}
.report-item:last-child {
margin-bottom: 0;
}
.report-meta {
display: flex;
justify-content: space-between;
margin-bottom: 1rem;
font-size: 0.9rem;
color: #666;
}
.report-content {
line-height: 1.6;
}
.report-content :deep(h1),
.report-content :deep(h2),
.report-content :deep(h3),
.report-content :deep(h4),
.report-content :deep(h5),
.report-content :deep(h6) {
margin: 1.5rem 0 1rem 0;
font-weight: 600;
}
.report-content :deep(h1) {
font-size: 1.75rem;
border-bottom: 2px solid #eee;
padding-bottom: 0.5rem;
}
.report-content :deep(h2) {
font-size: 1.5rem;
border-bottom: 1px solid #eee;
padding-bottom: 0.5rem;
}
.report-content :deep(h3) {
font-size: 1.25rem;
}
.report-content :deep(p) {
margin: 0.75rem 0;
}
.report-content :deep(ul),
.report-content :deep(ol) {
margin: 0.75rem 0;
padding-left: 1.5rem;
}
.report-content :deep(li) {
margin: 0.25rem 0;
}
.report-content :deep(strong) {
font-weight: 600;
}
.report-content :deep(em) {
font-style: italic;
}
}
/* 团队分析弹窗 */
.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;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
max-width: 90vw;
max-height: 90vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
.modal-header {
padding: 1rem 1.5rem;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-header h3 {
margin: 0;
font-size: 1.25rem;
color: #333;
}
.close-button {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: #999;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.close-button:hover {
color: #333;
}
.modal-body {
padding: 1.5rem;
overflow-y: auto;
max-height: calc(90vh - 80px);
}
.report-item {
margin-bottom: 2rem;
}
.report-item:last-child {
margin-bottom: 0;
}
.report-meta {
display: flex;
justify-content: space-between;
margin-bottom: 1rem;
font-size: 0.9rem;
color: #666;
}
.report-content {
line-height: 1.6;
}
.report-content :deep(h1),
.report-content :deep(h2),
.report-content :deep(h3),
.report-content :deep(h4),
.report-content :deep(h5),
.report-content :deep(h6) {
margin: 1.5rem 0 1rem 0;
font-weight: 600;
}
.report-content :deep(h1) {
font-size: 1.75rem;
border-bottom: 2px solid #eee;
padding-bottom: 0.5rem;
}
.report-content :deep(h2) {
font-size: 1.5rem;
border-bottom: 1px solid #eee;
padding-bottom: 0.5rem;
}
.report-content :deep(h3) {
font-size: 1.25rem;
}
.report-content :deep(p) {
margin: 0.75rem 0;
}
.report-content :deep(ul),
.report-content :deep(ol) {
margin: 0.75rem 0;
padding-left: 1.5rem;
}
.report-content :deep(li) {
margin: 0.25rem 0;
}
.report-content :deep(strong) {
font-weight: 600;
}
.report-content :deep(em) {
font-style: italic;
} }
</style> </style>

163
my-vue-app/src/views/person/components/CustomerDetail.vue
View File

@@ -186,87 +186,100 @@ watch(() => props.selectedContact, (newContact) => {
}, { immediate: true }); }, { immediate: true });
// 基础信息分析 // 基础信息分析
const startBasicAnalysis = async () => { // const startBasicAnalysis = async () => {
if (!props.selectedContact) return; // if (!props.selectedContact) return;
isBasicAnalysisLoading.value = true; // isBasicAnalysisLoading.value = true;
basicAnalysisResult.value = ''; // basicAnalysisResult.value = '';
// 构建表单信息 // // 构建表单信息
const formData = props.formInfo || []; // const formData = props.formInfo || [];
let formInfoText = '暂无表单信息'; // let formInfoText = '暂无表单信息';
// ** 适配新的 formInfo 数组格式 ** // // ** 适配新的 formInfo 数组格式 **
if (Array.isArray(formData) && formData.length > 0) { // if (Array.isArray(formData) && formData.length > 0) {
const allInfo = []; // const allInfo = [];
// 遍历新格式: [{ question_label: "...", answer: "..." }, ...] // // 遍历新格式: [{ question_label: "...", answer: "..." }, ...]
formData.forEach(item => { // formData.forEach(item => {
// 检查字段是否存在且答案有效 // // 检查字段是否存在且答案有效
if ( // if (
item.question_label && // item.question_label &&
item.answer && // item.answer &&
item.answer !== '暂无' && // item.answer !== '暂无' &&
item.answer !== '' // item.answer !== ''
) { // ) {
// 格式化为 "问题标签: 答案" // // 格式化为 "问题标签: 答案"
allInfo.push(`${item.question_label.trim()}: ${item.answer.trim()}`); // allInfo.push(`${item.question_label.trim()}: ${item.answer.trim()}`);
// }
// });
// // 格式化表单信息文本
// formInfoText = allInfo.length > 0
// ? `=== 问卷/表单信息 ===\n${allInfo.join('\n')}`
// : '暂无有效问卷/表单信息';
// }
// // ** 适配结束 **
// // 构建聊天记录信息
// const chatData = props.chatRecords || [];
// const chatInfoText = chatData.messages && chatData.messages.length > 0 ?
// `聊天记录数量: ${chatData.messages.length}条\n最近聊天内容: ${JSON.stringify(chatData.messages.slice(-3), null, 2)}` :
// '暂无聊天记录';
// // 构建通话记录信息
// const callData = props.callRecords || [];
// const callInfoText = callData.length > 0 ?
// `通话记录数量: ${callData.length}次\n通话记录详情: ${JSON.stringify(callData, null, 2)}` :
// '暂无通话记录';
// const query = `请对客户进行基础信息分析：
// 客户姓名：${props.selectedContact.name}
// 联系电话：${props.selectedContact.phone || '未提供'}
// 销售阶段：${props.selectedContact.salesStage || '未知'}
// === 表单信息 ===
// ${formInfoText}
// === 聊天记录 ===
// ${chatInfoText}
// === 通话记录 ===
// ${callData.length > 0 && callData[0].record_context ? callData[0].record_context : callInfoText}
// 请基于以上客户的表单信息、聊天记录和通话记录，分析客户的基本情况、背景信息和初步画像。`;
// try {
// await chatService_01.sendMessage(
// query,
// (update) => {
// basicAnalysisResult.value = update.content;
// },
// () => {
// isBasicAnalysisLoading.value = false;
// console.log('基础信息分析完成');
// }
// );
// } catch (error) {
// console.error('基础信息分析失败:', error);
// basicAnalysisResult.value = `分析失败: ${error.message}`;
// isBasicAnalysisLoading.value = false;
// }
// };
const startBasicAnalysis=async ()=>{
console.log("客户基础信息:", props.selectedContact);
const res=await https.post('api/v1/sales_timeline/get_customer_basic_info',{
user_name:props.selectedContact.name,
phone:props.selectedContact.phone
})
if(res.data){
basicAnalysisResult.value = res.data;
console.log("客户基础信息分析结果:", res);
}else{
basicAnalysisResult.value = '基础信息暂无数据'
} }
});
// 格式化表单信息文本
formInfoText = allInfo.length > 0
? `=== 问卷/表单信息 ===\n${allInfo.join('\n')}`
: '暂无有效问卷/表单信息';
}
// ** 适配结束 **
// 构建聊天记录信息
const chatData = props.chatRecords || [];
const chatInfoText = chatData.messages && chatData.messages.length > 0 ?
`聊天记录数量: ${chatData.messages.length}条\n最近聊天内容: ${JSON.stringify(chatData.messages.slice(-3), null, 2)}` :
'暂无聊天记录';
// 构建通话记录信息
const callData = props.callRecords || [];
const callInfoText = callData.length > 0 ?
`通话记录数量: ${callData.length}次\n通话记录详情: ${JSON.stringify(callData, null, 2)}` :
'暂无通话记录';
const query = `请对客户进行基础信息分析：
客户姓名：${props.selectedContact.name}
联系电话：${props.selectedContact.phone || '未提供'}
销售阶段：${props.selectedContact.salesStage || '未知'}
=== 表单信息 ===
${formInfoText}
=== 聊天记录 ===
${chatInfoText}
=== 通话记录 ===
${callData.length > 0 && callData[0].record_context ? callData[0].record_context : callInfoText}
请基于以上客户的表单信息、聊天记录和通话记录，分析客户的基本情况、背景信息和初步画像。`;
try {
await chatService_01.sendMessage(
query,
(update) => {
basicAnalysisResult.value = update.content;
},
() => {
isBasicAnalysisLoading.value = false;
console.log('基础信息分析完成');
}
);
} catch (error) {
console.error('基础信息分析失败:', error);
basicAnalysisResult.value = `分析失败: ${error.message}`;
isBasicAnalysisLoading.value = false;
}
};
}
// SOP通话分析 // SOP通话分析
const startSopAnalysis = async () => { const startSopAnalysis = async () => {
if (!props.selectedContact) return; if (!props.selectedContact) return;

114
my-vue-app/src/views/person/components/PersonalDashboard.vue
View File

@@ -111,33 +111,19 @@
<div class="modal-container"> <div class="modal-container">
<div class="modal-header"> <div class="modal-header">
<h3 class="modal-title">阶段分析报告</h3> <h3 class="modal-title">阶段分析报告</h3>
<div class="period-switcher">
<button @click="switchAnalysisPeriod('day')" :class="{ active: analysisPeriod === 'day' }">当日</button>
<button @click="switchAnalysisPeriod('camp')" :class="{ active: analysisPeriod === 'camp' }">当期</button>
<button @click="switchAnalysisPeriod('month')" :class="{ active: analysisPeriod === 'month' }">当月</button>
</div>
<button class="modal-close-btn" @click="closeAnalysisModal">&times;</button> <button class="modal-close-btn" @click="closeAnalysisModal">&times;</button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="analysis-content"> <div class="analysis-content">
<div v-if="analysisPeriod === 'day'"> <div v-if="!analysisReport || Object.keys(analysisReport).length === 0" class="loading-message">正在生成分析报告...</div>
<h4>当日分析报告</h4> <div v-else-if="Array.isArray(analysisReport) && analysisReport.length === 0" class="error-message">数据为空</div>
<div v-if="analysisReport.day === '数据为空'" class="error-message">数据为空</div> <div v-else-if="Array.isArray(analysisReport)">
<div v-else-if="analysisReport.day" v-html="analysisReport.day.replace(/\n/g, '<br>')"></div> <div v-for="(report, index) in analysisReport" :key="index" class="report-section">
<p v-else>正在生成分析报告...</p> <h4>{{ report.name }} ({{ report.start_time }} 至 {{ report.end_time }})</h4>
<div v-html="report.report.replace(/\n/g, '<br>')"></div>
</div> </div>
<div v-if="analysisPeriod === 'camp'">
<h4>当期分析报告</h4>
<div v-if="analysisReport.camp === '数据为空'" class="error-message">数据为空</div>
<div v-else-if="analysisReport.camp" v-html="analysisReport.camp.replace(/\n/g, '<br>')"></div>
<p v-else>正在生成分析报告...</p>
</div>
<div v-if="analysisPeriod === 'month'">
<h4>当月分析报告</h4>
<div v-if="analysisReport.month === '数据为空'" class="error-message">数据为空</div>
<div v-else-if="analysisReport.month" v-html="analysisReport.month.replace(/\n/g, '<br>')"></div>
<p v-else>正在生成分析报告...</p>
</div> </div>
<div v-else class="error-message">数据格式错误</div>
</div> </div>
</div> </div>
</div> </div>
@@ -220,44 +206,12 @@ const props = defineProps({
} }
}); });
async function CenterGetSecondOrderAnalysisReport(time) { async function CenterGetSecondOrderAnalysisReport() {
const params = getRequestParams() const params = getRequestParams()
const hasParams = {...params,time:time} const res = await getSecondOrderAnalysisReport(params)
const res = await getSecondOrderAnalysisReport(hasParams)
if (res.code === 200) { if (res.code === 200) {
console.log(11111,res.data)
const records = res.data.records.join('\n') analysisReport.value = res.data
// 检查数据是否为空
if (!records) {
console.error('数据为空')
// 将错误信息存储到对应的响应式变量中
analysisReport.value[time] = '数据为空'
return
}
const prompt = `请分析以下数据：\n${records}\n请提供一个阶段分析报告。`
console.log(prompt)
// 使用sendMessage方法替代chat方法
try {
await chatService_02.sendMessage(
prompt,
(update) => {
// 实时更新回调
if (!update.isStreaming) {
console.log('阶段分析报告:', update.content)
// 将结果存储到对应的响应式变量中
analysisReport.value[time] = update.content
}
},
() => {
// 流结束回调
console.log('阶段分析报告生成完成')
}
)
} catch (error) {
console.error('获取阶段分析报告失败:', error)
}
} }
} }
// Chart.js 实例 // Chart.js 实例
@@ -427,17 +381,12 @@ const hideTooltip = () => {
// 阶段分析报告模态框状态 // 阶段分析报告模态框状态
const showAnalysisModal = ref(false); const showAnalysisModal = ref(false);
const analysisPeriod = ref('day'); // 'day', 'camp', 'month' // 阶段分析报告数据
const analysisReport = ref({ const analysisReport = ref({});
day: '',
camp: '',
month: ''
});
// 显示阶段分析报告模态框 // 显示阶段分析报告模态框
const showSecondOrderAnalysisReport = () => { const showSecondOrderAnalysisReport = () => {
showAnalysisModal.value = true; showAnalysisModal.value = true;
CenterGetSecondOrderAnalysisReport(analysisPeriod.value) CenterGetSecondOrderAnalysisReport()
}; };
// 关闭阶段分析报告模态框 // 关闭阶段分析报告模态框
@@ -445,14 +394,6 @@ const closeAnalysisModal = () => {
showAnalysisModal.value = false; showAnalysisModal.value = false;
}; };
// 切换分析周期
const switchAnalysisPeriod = (period) => {
analysisPeriod.value = period;
CenterGetSecondOrderAnalysisReport(period)
};
watch(() => props.contactTimeData, () => { watch(() => props.contactTimeData, () => {
renderContactTimeChart(); renderContactTimeChart();
}, { deep: true }); }, { deep: true });
@@ -1021,4 +962,31 @@ $white: #ffffff;
border-radius: 4px; border-radius: 4px;
background-color: #fef0f0; background-color: #fef0f0;
} }
.loading-message {
text-align: center;
padding: 20px;
color: #909399;
}
.report-section {
margin-bottom: 20px;
padding: 15px;
border: 1px solid #ebeef5;
border-radius: 4px;
background-color: #f9fafc;
}
.report-section:last-child {
margin-bottom: 0;
}
.report-section h4 {
margin-top: 0;
margin-bottom: 15px;
color: #303133;
font-size: 16px;
border-bottom: 1px solid #ebeef5;
padding-bottom: 8px;
}
</style> </style>

152
my-vue-app/src/views/person/components/RawDataCards.vue
View File

@@ -14,16 +14,30 @@
</svg> </svg>
</div> </div>
<h3 class="card-title">表单信息</h3> <h3 class="card-title">表单信息</h3>
<div class="form-filter">
<button
v-for="option in formFilterOptions"
:key="option"
class="form-filter-btn"
:class="{ active: formFilter === option }"
@click="formFilter = option"
>
{{ option }}
</button>
</div>
</div> </div>
<div class="card-content"> <div class="card-content">
<div v-for="(section, sectionIndex) in displayedFormSections" :key="sectionIndex" class="form-section">
<div v-if="section.title" class="form-section-title">{{ section.title }}</div>
<div class="form-data-list"> <div class="form-data-list">
<div v-for="(field, index) in formFields" :key="index" class="form-field"> <div v-for="(field, index) in section.fields" :key="index" class="form-field">
<span class="field-label">{{ field.label }}:</span> <span class="field-label">{{ field.label }}:</span>
<span class="field-value">{{ field.value }}</span> <span class="field-value">{{ field.value }}</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- 聊天记录和通话录音卡片 --> <!-- 聊天记录和通话录音卡片 -->
<div class="data-card communication-card"> <div class="data-card communication-card">
@@ -132,7 +146,7 @@
</template> </template>
<script setup> <script setup>
import { ref, computed } from 'vue' import { ref, computed, watch } from 'vue'
import axios from 'axios' import axios from 'axios'
// Props // Props
@@ -166,37 +180,50 @@ const chatMessages = computed(() => {
return props.chatInfo?.messages || [] return props.chatInfo?.messages || []
}) })
// 表单字段数据 (已更新) const formFilter = ref('全部')
const formFields = computed(() => {
const formData = props.formInfo
console.log(8888888,formData)
// --- NEW LOGIC: 处理新的数组格式（问答列表） ---
if (Array.isArray(formData) && formData.length > 0) {
// 检查数组项结构，确保是新的问答格式
if (formData[0].question_label && formData[0].answer) {
// 直接将问答列表映射为 { label: question_label, value: answer } 格式
return formData.map(item => ({
label: item.question_label,
value: item.answer || '暂无回答'
}))
}
}
// --------------------------------------------------
// Fallback: 如果数据为空、null 或旧的空对象格式 const formSections = computed(() => {
if (!formData || (typeof formData === 'object' && Object.keys(formData).length === 0)) { const formData = props.formInfo
return [ const emptyFields = [
{ label: '姓名', value: '暂无数据' }, { label: '姓名', value: '暂无数据' },
{ label: '联系方式', value: '暂无数据' }, { label: '联系方式', value: '暂无数据' },
{ label: '孩子信息', value: '暂无数据' }, { label: '孩子信息', value: '暂无数据' },
{ label: '地区', value: '暂无数据' } { label: '地区', value: '暂无数据' }
] ]
const makeSection = (fields, title = '表单信息') => [{ title, fields }]
const buildFieldsFromAnswers = (answers = []) => {
return answers.map(item => ({
label: item.question_label,
value: item.answer || '暂无回答'
}))
} }
// --- OLD LOGIC: 处理旧的对象格式（保持兼容性） --- let dataArray = null
let fields = [] if (Array.isArray(formData)) {
dataArray = formData
} else if (formData && Array.isArray(formData.data)) {
dataArray = formData.data
}
// 检查是否为第一种格式（包含name, mobile等字段） if (Array.isArray(dataArray) && dataArray.length > 0) {
if (dataArray[0].form_title && Array.isArray(dataArray[0].answers)) {
return dataArray.map(form => ({
title: form.form_title || '表单信息',
fields: buildFieldsFromAnswers(form.answers || [])
}))
}
if (dataArray[0].question_label && Object.prototype.hasOwnProperty.call(dataArray[0], 'answer')) {
return makeSection(buildFieldsFromAnswers(dataArray))
}
}
if (!formData || (typeof formData === 'object' && Object.keys(formData).length === 0)) {
return makeSection(emptyFields)
}
let fields = []
if (formData.name || formData.mobile || formData.child_name) { if (formData.name || formData.mobile || formData.child_name) {
const customerInfo = [formData.name, formData.mobile, formData.child_relation, formData.occupation].filter(item => item && item !== '暂无').join(' | ') const customerInfo = [formData.name, formData.mobile, formData.child_relation, formData.occupation].filter(item => item && item !== '暂无').join(' | ')
const childInfo = [formData.child_name, formData.child_gender, formData.child_education].filter(item => item && item !== '暂无').join(' | ') const childInfo = [formData.child_name, formData.child_gender, formData.child_education].filter(item => item && item !== '暂无').join(' | ')
@@ -207,7 +234,6 @@ console.log(8888888,formData)
{ label: '地区', value: formData.territory || '暂无' } { label: '地区', value: formData.territory || '暂无' }
] ]
// 如果有additional_info，添加所有问题
if (formData.additional_info && Array.isArray(formData.additional_info)) { if (formData.additional_info && Array.isArray(formData.additional_info)) {
formData.additional_info.forEach((item) => { formData.additional_info.forEach((item) => {
fields.push({ fields.push({
@@ -217,7 +243,6 @@ console.log(8888888,formData)
}) })
} }
} else { } else {
// 第二种格式（expandXXX字段）
const customerInfo = [formData.expandTwentyOne, formData.expandOne].filter(item => item && item !== '暂无').join(' | ') const customerInfo = [formData.expandTwentyOne, formData.expandOne].filter(item => item && item !== '暂无').join(' | ')
const childInfo = [formData.expandTwentyNine, formData.expandTwentyFive, formData.expandTwo].filter(item => item && item !== '暂无').join(' | ') const childInfo = [formData.expandTwentyNine, formData.expandTwentyFive, formData.expandTwo].filter(item => item && item !== '暂无').join(' | ')
@@ -233,12 +258,29 @@ console.log(8888888,formData)
{ label: '预期时间', value: formData.expandThirty || '暂无' } { label: '预期时间', value: formData.expandThirty || '暂无' }
] ]
} }
// 合并表单数据和聊天数据
const allFields = [...fields]
return allFields return makeSection(fields)
}) })
const formFilterOptions = computed(() => {
const titles = formSections.value.map(section => section.title).filter(Boolean)
const uniqueTitles = Array.from(new Set(titles))
if (uniqueTitles.length <= 1) return ['全部']
return ['全部', ...uniqueTitles]
})
const displayedFormSections = computed(() => {
if (formFilter.value === '全部') return formSections.value
const filtered = formSections.value.filter(section => section.title === formFilter.value)
return filtered.length > 0 ? filtered : formSections.value
})
watch(formFilterOptions, (options) => {
if (!options.includes(formFilter.value)) {
formFilter.value = options[0] || '全部'
}
}, { immediate: true })
// 聊天数据 // 聊天数据
const chatData = computed(() => ({ const chatData = computed(() => ({
@@ -507,6 +549,58 @@ const formatDateTime = (dateTimeString) => {
flex: 1; flex: 1;
} }
.form-filter {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.form-filter-btn {
padding: 6px 12px;
border-radius: 999px;
border: 1px solid #e5e7eb;
background: #ffffff;
font-size: 12px;
font-weight: 600;
color: #6b7280;
cursor: pointer;
transition: all 0.2s ease;
}
.form-filter-btn.active {
border-color: #10b981;
color: #059669;
background: #ecfdf5;
}
.form-filter-btn:hover {
color: #059669;
border-color: #a7f3d0;
}
.form-section {
display: flex;
flex-direction: column;
gap: 8px;
}
.form-section + .form-section {
margin-top: 16px;
padding-top: 12px;
border-top: 1px dashed #e5e7eb;
}
.form-section-title {
font-size: 14px;
font-weight: 600;
color: #111827;
background: #f0fdf4;
border: 1px solid #dcfce7;
padding: 4px 10px;
border-radius: 999px;
width: fit-content;
}
// 表单字段样式 // 表单字段样式
.form-data-list { .form-data-list {
.form-field { .form-field {

280
my-vue-app/src/views/person/components/SalesTimelineWithTaskList.vue
View File

@@ -6,7 +6,8 @@
<span style="font-size: 14px;">客户转化全流程跟踪</span> <span style="font-size: 14px;">客户转化全流程跟踪</span>
</div> </div>
<div> <div>
<button @click="handleUnassignedRecordingsClick" class="unassigned-recordings-btn">尚未归属录音</button> <button @click="handleUnassignedRecordingsClick" class="unassigned-recordings-btn" style="margin-right: 10px;">尚未归属录音</button>
<button @click="handleAllRecordingsClick" class="unassigned-recordings-btn">全部录音</button>
</div> </div>
</div> </div>
@@ -204,6 +205,11 @@
<div class="task-body"> <div class="task-body">
<div class="actionable-list"> <div class="actionable-list">
<div class="task-section">
<div class="task-section-header">
<span class="task-section-title task-section-title-pending">{{ pendingTitle }}</span>
<span class="task-section-count">{{ contacts.length }}位</span>
</div>
<div class="items-grid"> <div class="items-grid">
<div <div
v-for="item in contacts" v-for="item in contacts"
@@ -213,14 +219,12 @@
:class="[getHealthClass(item.health), { 'active': item.id === selectedContactId }]" :class="[getHealthClass(item.health), { 'active': item.id === selectedContactId }]"
@click="selectContact(item.id)"> @click="selectContact(item.id)">
<div class="item-content"> <div class="item-content">
<!-- 头像区域 -->
<div class="avatar-section"> <div class="avatar-section">
<div class="avatar"> <div class="avatar">
<img :src="item.avatar || '/default-avatar.svg'" :alt="item.name" class="avatar-img" /> <img :src="item.avatar || '/default-avatar.svg'" :alt="item.name" class="avatar-img" />
</div> </div>
</div> </div>
<!-- 信息区域 -->
<div class="info-section"> <div class="info-section">
<div class="item-header"> <div class="item-header">
<div class="item-name-group"> <div class="item-name-group">
@@ -243,6 +247,49 @@
</div> </div>
</div> </div>
</div> </div>
<div v-if="completedContacts.length > 0" class="task-section">
<div class="task-section-header">
<span class="task-section-title task-section-title-completed">已完成用户</span>
<span class="task-section-count">{{ completedContacts.length }}位</span>
</div>
<div class="items-grid">
<div
v-for="item in completedContacts"
:key="item.id"
:id="`completed-contact-item-${item.id}`"
class="action-item"
:class="[getHealthClass(item.health), { 'active': item.id === selectedContactId }]"
@click="selectContact(item.id)">
<div class="item-content">
<div class="avatar-section">
<div class="avatar">
<img :src="item.avatar || '/default-avatar.svg'" :alt="item.name" class="avatar-img" />
</div>
</div>
<div class="info-section">
<div class="item-header">
<div class="item-name-group">
<span class="item-name" :title="item.name">{{ item.name }}</span>
</div>
<span class="item-time">{{ item.time }}</span>
</div>
<div class="item-footer">
<div class="profession-education">
<span class="profession">{{ item.profession||'未知' }}</span>
<span class="education">{{ item.education||'未知' }}</span>
<span class="course-attendance">
{{ getAttendedLessons(item.class_situation,item.class_num) }}
</span>
<span class="course-type" v-if="item.type">{{ item.type }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> </div>
<!-- 到课详情区域 --> <!-- 到课详情区域 -->
@@ -335,7 +382,7 @@
<div class="recording-item" v-for="recording in filteredRecordings" :key="recording.id"> <div class="recording-item" v-for="recording in filteredRecordings" :key="recording.id">
<div class="recording-info"> <div class="recording-info">
<div class="recording-header"> <div class="recording-header">
<span class="recording-name">{{ recording.name }}</span> <span class="recording-name" :title="recording.name">{{ recording.name }}</span>
<span class="recording-score">分数: {{ recording.score }}</span> <span class="recording-score">分数: {{ recording.score }}</span>
</div> </div>
<span class="recording-time">{{ recording.time }}</span> <span class="recording-time">{{ recording.time }}</span>
@@ -359,6 +406,7 @@
<div class="modal-content report-modal" @click.stop> <div class="modal-content report-modal" @click.stop>
<div class="modal-header"> <div class="modal-header">
<h3>录音报告</h3> <h3>录音报告</h3>
<button class="report-btn" @click="printReport">一键复制</button>
<button class="close-btn" @click="showReportModal = false">×</button> <button class="close-btn" @click="showReportModal = false">×</button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
@@ -432,7 +480,7 @@ const handleUnassignedRecordingsClick = async () => {
// 优先使用路由参数，其次是 Pinia store 中的用户信息，最后是备用值 // 优先使用路由参数，其次是 Pinia store 中的用户信息，最后是备用值
const user_name = routeParams.user_name || userStore.userInfo?.username || 'example_user'; const user_name = routeParams.user_name || userStore.userInfo?.username || 'example_user';
const response = await axios.post('http://192.168.15.121:8890/api/v1/sales_timeline/get_sale_unassigned_call_info', { const response = await axios.post('https://mldash.nycjy.cn/api/v1/sales_timeline/get_sale_unassigned_call_info', {
user_name: user_name user_name: user_name
}); });
@@ -482,6 +530,65 @@ const handleUnassignedRecordingsClick = async () => {
} }
}; };
// --- 新增：处理全部录音按钮点击事件 ---
const handleAllRecordingsClick = async () => {
try {
const userStore = useUserStore();
const routeParams = getRequestParams(); // 获取路由参数
// 优先使用路由参数，其次是 Pinia store 中的用户信息，最后是备用值
const user_name = routeParams.user_name || userStore.userInfo?.username || 'example_user';
const response = await axios.post('https://mldash.nycjy.cn/api/v1/sales_timeline/get_sale_all_call_info', {
user_name: user_name
});
console.log('API Response:', response.data.data);
// --- 数据处理逻辑，以支持分类 ---
const apiData = response.data.data;
const tempCategorizedData = {}; // 临时对象
let uniqueId = 0;
for (const category in apiData) {
if (Object.prototype.hasOwnProperty.call(apiData, category)) {
const categoryData = apiData[category];
tempCategorizedData[category] = []; // 为每个分类创建一个空数组
if (categoryData && Array.isArray(categoryData.records)) {
categoryData.records.forEach(record => {
tempCategorizedData[category].push({ // 将记录添加到对应的分类数组中
id: uniqueId++,
name: record.customer_name || `录音 ${uniqueId}`,
time: new Date(record.record_create_time).toLocaleString('zh-CN'),
type: record.record_tag,
downloadUrl: record.record_file_addr,
duration: record.call_duration ? `${record.call_duration} 分钟` : '未知',
score: record.score || '暂无',
details: record.report_content || '暂无详细报告内容。'
});
});
}
}
}
// 更新状态
categorizedRecordings.value = tempCategorizedData;
recordingCategories.value = Object.keys(tempCategorizedData);
// 默认选中第一个Tab
if (recordingCategories.value.length > 0) {
selectedCategory.value = recordingCategories.value[0];
} else {
selectedCategory.value = null;
}
showUnassignedRecordingsModal.value = true;
} catch (error) {
console.error('API请求失败:', error);
alert('获取录音列表失败，请稍后再试。');
}
};
// 查看报告函数 (无需修改) // 查看报告函数 (无需修改)
const viewReport = (recording) => { const viewReport = (recording) => {
reportData.value = { reportData.value = {
@@ -491,7 +598,50 @@ const viewReport = (recording) => {
showReportModal.value = true; showReportModal.value = true;
}; };
// ... 您其他的 props, computed, methods 等代码保持不变 ... const printReport = () => {
const content = reportData.value.details;
if (!content) {
alert('没有可复制的内容');
return;
}
// 尝试使用 Clipboard API
if (navigator.clipboard && window.isSecureContext) {
navigator.clipboard.writeText(content).then(() => {
alert('报告内容已复制到剪贴板');
}).catch(err => {
console.error('复制失败:', err);
// 降级到传统方法
fallbackCopyTextToClipboard(content);
});
} else {
// 降级到传统方法
fallbackCopyTextToClipboard(content);
}
};
function fallbackCopyTextToClipboard(text) {
const textArea = document.createElement("textarea");
textArea.value = text;
textArea.style.position = "fixed"; //avoid scrolling to bottom
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
const successful = document.execCommand('copy');
if (successful) {
alert('报告内容已复制到剪贴板');
} else {
alert('复制失败，请手动复制');
}
} catch (err) {
console.error('Fallback: Oops, unable to copy', err);
alert('复制失败，请手动复制');
}
document.body.removeChild(textArea);
}
const props = defineProps({ const props = defineProps({
data: { data: {
@@ -545,6 +695,11 @@ const totalCustomers = computed(() => {
return Math.max(...baseStages, 1); return Math.max(...baseStages, 1);
}); });
const pendingTitle = computed(() => {
if (props.selectedStage === '全部' || props.selectedStage === 'all') return '全部用户';
return '待操作用户';
});
const getAttendedLessons = (classSituation, classNum) => { const getAttendedLessons = (classSituation, classNum) => {
if (classNum && Array.isArray(classNum) && classNum.length > 0) { if (classNum && Array.isArray(classNum) && classNum.length > 0) {
const filtered = classNum.filter(n => n !== -1); const filtered = classNum.filter(n => n !== -1);
@@ -562,6 +717,84 @@ const getAttendedLessons = (classSituation, classNum) => {
return '未到课'; return '未到课';
}; };
const stageOrder = {
'待加微': 1,
'待填表单': 2,
'待入群': 3,
'待联系': 4,
'待到课': 5,
'课1-4': 6,
'点击未支付': 7,
'付定金': 8,
'定金转化': 9,
'成交': 10
};
const getStageIndex = (type) => stageOrder[type] || 0;
const isFormIncomplete = (customer) => {
const occupationMissing = customer.customer_occupation === '未知' || !customer.customer_occupation;
const educationMissing = customer.customer_child_education === '未知' || !customer.customer_child_education;
return occupationMissing || educationMissing;
};
const buildContacts = (customers, stageFallback) => {
return (customers || []).map(customer => ({
id: customer.customer_name || customer.id || customer.name,
name: customer.customer_name || customer.name,
phone: customer.phone,
profession: customer.customer_occupation || customer.profession,
education: customer.customer_child_education || customer.education,
lastMessageTime: customer.latest_message_time || customer.time,
avatarUrl: customer.customer_avatar_url || customer.avatar || customer.weChat_avatar,
avatar: customer.customer_avatar_url || customer.avatar || customer.weChat_avatar || '/default-avatar.svg',
type: customer.type || stageFallback,
classNum: customer.class_num,
class_num: customer.class_num,
salesStage: customer.type || stageFallback,
priority: customer.type === '待联系' ? 'high' : 'normal',
time: customer.latest_message_time || customer.time || '未知',
health: customer.health || 75,
customer_name: customer.customer_name,
customer_occupation: customer.customer_occupation,
customer_child_education: customer.customer_child_education,
scrm_user_main_code: customer.scrm_user_main_code,
weChat_avatar: customer.weChat_avatar,
class_situation: customer.class_situation,
records: customer.records,
time_and_camp_stage: customer.time_and_camp_stage || []
})).filter(customer => customer.id);
};
const completedContacts = computed(() => {
const stage = props.selectedStage;
if (!stage || stage === '全部' || stage === 'all' || stage === '课1-4' || stage === '成交') {
return [];
}
if (stage === '待填表单') {
const baseCustomers = (props.customersList || []).filter(c => c.type !== '待加微');
const completed = baseCustomers.filter(c => !isFormIncomplete(c));
return buildContacts(completed, stage);
}
if (stage === '待到课') {
const baseCustomers = (props.customersList || []).filter(c => c.type !== '待加微');
const completed = baseCustomers.filter(c => getAttendedLessons(c.class_situation, c.class_num) !== '未到课');
return buildContacts(completed, stage);
}
if (['点击未支付', '付定金', '定金转化'].includes(stage)) {
const courseCustomers = props.courseCustomers?.['课1-4'] || [];
let completed = courseCustomers.filter(c => getStageIndex(c.type) > getStageIndex(stage));
if (stage === '定金转化') {
const payList = (props.payMoneyCustomersList || []).map(c => ({ ...c, type: '成交' }));
completed = completed.concat(payList);
}
return buildContacts(completed, stage);
}
const baseCustomers = props.customersList || [];
const completed = baseCustomers.filter(c => getStageIndex(c.type) > getStageIndex(stage));
return buildContacts(completed, stage);
});
// **修改 getStageCount 函数** // **修改 getStageCount 函数**
const getStageCount = (stageType) => { const getStageCount = (stageType) => {
@@ -757,7 +990,13 @@ $indigo: #4f46e5;
.stage-content { text-align: center; width: 100%; .stage-title { font-size: 1rem; font-weight: 500; color: $slate-700; margin: 0 0 0.75rem 0; } .stage-stats { display: flex; align-items: baseline; justify-content: center; gap: 0.5rem; margin-bottom: 0.5rem; .stage-count { font-size: 1.5rem; font-weight: 700; color: $slate-600; line-height: 1; } .stage-label { font-size: 0.75rem; color: $slate-500; } } .stage-percentage { font-size: 0.75rem; color: $slate-400; background: $slate-100; padding: 0.25rem 0.75rem; border-radius: 1rem; display: inline-block; } } .stage-content { text-align: center; width: 100%; .stage-title { font-size: 1rem; font-weight: 500; color: $slate-700; margin: 0 0 0.75rem 0; } .stage-stats { display: flex; align-items: baseline; justify-content: center; gap: 0.5rem; margin-bottom: 0.5rem; .stage-count { font-size: 1.5rem; font-weight: 700; color: $slate-600; line-height: 1; } .stage-label { font-size: 0.75rem; color: $slate-500; } } .stage-percentage { font-size: 0.75rem; color: $slate-400; background: $slate-100; padding: 0.25rem 0.75rem; border-radius: 1rem; display: inline-block; } }
.course-details { background: $white; border-radius: 0.75rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); margin-top: 1rem; .course-details-header { background: linear-gradient(135deg, #f8fafc, #e2e8f0); padding: 0.75rem 1rem; border-bottom: 1px solid $slate-200; h4 { margin: 0; font-size: 0.875rem; font-weight: 600; color: $slate-700; } } .course-details-content { padding: 1rem; max-height: 200px; overflow-y: auto; .no-data { text-align: center; color: $slate-500; padding: 1rem 0; } .course-lessons { display: flex; flex-direction: row; gap: 0.75rem; .lesson-item { background: $slate-50; border-radius: 0.5rem; padding: 0.75rem; .lesson-header .lesson-number { font-weight: 600; } .lesson-details { display: flex; flex-wrap: wrap; gap: 1rem; .detail-item .detail-label { color: $slate-500; } .detail-item .detail-value { font-weight: 600; } } } } } } .course-details { background: $white; border-radius: 0.75rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); margin-top: 1rem; .course-details-header { background: linear-gradient(135deg, #f8fafc, #e2e8f0); padding: 0.75rem 1rem; border-bottom: 1px solid $slate-200; h4 { margin: 0; font-size: 0.875rem; font-weight: 600; color: $slate-700; } } .course-details-content { padding: 1rem; max-height: 200px; overflow-y: auto; .no-data { text-align: center; color: $slate-500; padding: 1rem 0; } .course-lessons { display: flex; flex-direction: row; gap: 0.75rem; .lesson-item { background: $slate-50; border-radius: 0.5rem; padding: 0.75rem; .lesson-header .lesson-number { font-weight: 600; } .lesson-details { display: flex; flex-wrap: wrap; gap: 1rem; .detail-item .detail-label { color: $slate-500; } .detail-item .detail-value { font-weight: 600; } } } } } }
.task-body { padding: 1rem; max-height: 50vh; background: $white; border-radius: 1rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); overflow-y: auto; } .task-body { padding: 1rem; max-height: 50vh; background: $white; border-radius: 1rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); overflow-y: auto; }
.actionable-list { display: flex; flex-direction: column; } .actionable-list { display: flex; flex-direction: column; gap: 1rem; }
.task-section { display: flex; flex-direction: column; gap: 0.5rem; }
.task-section-header { display: flex; align-items: center; gap: 0.5rem; }
.task-section-title { font-size: 0.85rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 999px; }
.task-section-title-pending { color: #16a34a; background: #dcfce7; }
.task-section-title-completed { color: #2563eb; background: #dbeafe; }
.task-section-count { font-size: 0.75rem; color: $slate-500; }
.items-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 250px)); gap: 0.45rem; justify-content: center; } .items-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 250px)); gap: 0.45rem; justify-content: center; }
.action-item { background-color: $white; padding: 0.25rem; border-radius: 0.5rem; border: 1px solid $slate-200; cursor: pointer; transition: all 0.2s ease-in-out; display: flex; &:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.05); } &.active { background-color: #eef2ff; border-color: $indigo; } .item-content { display: flex; align-items: flex-start; gap: 0.75rem; width: 100%; } .avatar-section .avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; overflow: hidden; background-color: $slate-200; .avatar-img { width: 100%; height: 100%; object-fit: cover; } } .info-section { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; } .item-header { display: flex; justify-content: space-between; align-items: flex-start; } .item-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .item-time { font-size: 0.75rem; color: $slate-500; flex-shrink: 0; } .profession-education { display: flex; align-items: center; gap: 0.2rem; flex-wrap: wrap; .profession, .education, .course-type, .course-attendance { font-size: 0.75rem; padding: 0.1rem 0.5rem; border-radius: 0.3rem; font-weight: 500; } .profession { background-color: #e0f2fe; color: #0277bd; } .education { background-color: #f3e5f5; color: #7b1fa2; } .course-type { background-color: #e8f5e8; color: #2e7d32; } .course-attendance { background: linear-gradient(135deg, #e3f2fd, #bbdefb); color: #1565c0; border: 1px solid #90caf9; } } } .action-item { background-color: $white; padding: 0.25rem; border-radius: 0.5rem; border: 1px solid $slate-200; cursor: pointer; transition: all 0.2s ease-in-out; display: flex; &:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.05); } &.active { background-color: #eef2ff; border-color: $indigo; } .item-content { display: flex; align-items: flex-start; gap: 0.75rem; width: 100%; } .avatar-section .avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; overflow: hidden; background-color: $slate-200; .avatar-img { width: 100%; height: 100%; object-fit: cover; } } .info-section { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; } .item-header { display: flex; justify-content: space-between; align-items: flex-start; } .item-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .item-time { font-size: 0.75rem; color: $slate-500; flex-shrink: 0; } .profession-education { display: flex; align-items: center; gap: 0.2rem; flex-wrap: wrap; .profession, .education, .course-type, .course-attendance { font-size: 0.75rem; padding: 0.1rem 0.5rem; border-radius: 0.3rem; font-weight: 500; } .profession { background-color: #e0f2fe; color: #0277bd; } .education { background-color: #f3e5f5; color: #7b1fa2; } .course-type { background-color: #e8f5e8; color: #2e7d32; } .course-attendance { background: linear-gradient(135deg, #e3f2fd, #bbdefb); color: #1565c0; border: 1px solid #90caf9; } } }
.unassigned-recordings-btn { background-color: $primary; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease; &:hover { background-color: darken($primary, 10%); } } .unassigned-recordings-btn { background-color: $primary; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease; &:hover { background-color: darken($primary, 10%); } }
@@ -773,7 +1012,14 @@ $indigo: #4f46e5;
.recording-item { display: flex; flex-direction: column; justify-content: space-between; padding: 12px 16px; background-color: $slate-50; border-radius: 8px; transition: all 0.2s ease; &:hover { background-color: $slate-100; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); } } .recording-item { display: flex; flex-direction: column; justify-content: space-between; padding: 12px 16px; background-color: $slate-50; border-radius: 8px; transition: all 0.2s ease; &:hover { background-color: $slate-100; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); } }
.recording-info { display: flex; flex-direction: column; gap: 4px; flex: 1; } .recording-info { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.recording-header { display: flex; justify-content: space-between; align-items: center; } .recording-header { display: flex; justify-content: space-between; align-items: center; }
.recording-name { font-weight: 500; color: $slate-800; } .recording-name {
font-weight: 500;
color: $slate-800;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: calc(100% - 80px);
}
.recording-time { font-size: 0.8rem; color: $slate-600; } .recording-time { font-size: 0.8rem; color: $slate-600; }
.recording-type { font-size: 0.75rem; color: $slate-500; background-color: $slate-200; padding: 2px 8px; border-radius: 12px; display: inline-block; width: fit-content; } .recording-type { font-size: 0.75rem; color: $slate-500; background-color: $slate-200; padding: 2px 8px; border-radius: 12px; display: inline-block; width: fit-content; }
.recording-score { font-size: 0.8rem; color: $warning; font-weight: 600; } .recording-score { font-size: 0.8rem; color: $warning; font-weight: 600; }
@@ -782,6 +1028,24 @@ $indigo: #4f46e5;
.report-link, .download-link { color: white; border: none; padding: 6px 10px; border-radius: 4px; font-size: 0.85rem; cursor: pointer; transition: background-color 0.2s ease; text-decoration: none; text-align: center; } .report-link, .download-link { color: white; border: none; padding: 6px 10px; border-radius: 4px; font-size: 0.85rem; cursor: pointer; transition: background-color 0.2s ease; text-decoration: none; text-align: center; }
.report-link { background-color: $success; &:hover { background-color: darken($success, 10%); } } .report-link { background-color: $success; &:hover { background-color: darken($success, 10%); } }
.download-link { background-color: $primary; &:hover { background-color: darken($primary, 10%); } } .download-link { background-color: $primary; &:hover { background-color: darken($primary, 10%); } }
.report-btn {
background-color: $success;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
margin-left: auto;
&:hover {
background-color: darken($success, 10%);
}
&:active {
background-color: darken($success, 20%);
}
}
.report-modal { max-width: 600px; } .report-modal { max-width: 600px; }
.report-content { display: flex; flex-direction: column; gap: 12px; } .report-content { display: flex; flex-direction: column; gap: 12px; }
.report-field label { .report-field label {

73
my-vue-app/src/views/person/sale.vue
View File

@@ -366,25 +366,37 @@ async function getCoreKpi() {
const params = getRequestParams() const params = getRequestParams()
const hasParams = params.user_name const hasParams = params.user_name
// 并发请求所有KPI接口
const [
todayCallRes,
conversionRes,
avgCallTimeRes,
callSuccessRateRes
] = await Promise.all([
getTodayCall(hasParams ? params : undefined),
getConversionRateAndAllocatedData(hasParams ? params : undefined),
getAvgCallTime(hasParams ? params : undefined),
getCallSuccessRate(hasParams ? params : undefined)
])
// 今日通话数据 // 今日通话数据
const res = await getTodayCall(hasParams ? params : undefined) if (todayCallRes.code === 200) {
if (res.code === 200) { kpiDataState.totalCalls = todayCallRes.data.call_count
kpiDataState.totalCalls = res.data.call_count
} }
// 转化率、分配数据量、加微率 // 转化率、分配数据量、加微率
const conversionRes = await getConversionRateAndAllocatedData(hasParams ? params : undefined)
if (conversionRes.code === 200) { if (conversionRes.code === 200) {
kpiDataState.conversionRate = conversionRes.data.conversion_rate || 0 kpiDataState.conversionRate = conversionRes.data.conversion_rate || 0
kpiDataState.assignedData = conversionRes.data.all_count || 0 kpiDataState.assignedData = conversionRes.data.all_count || 0
kpiDataState.wechatAddRate = conversionRes.data.plus_v_conversion_rate || 0 kpiDataState.wechatAddRate = conversionRes.data.plus_v_conversion_rate || 0
} }
// 平均通话时长 // 平均通话时长
const avgCallTimeRes = await getAvgCallTime(hasParams ? params : undefined)
if (avgCallTimeRes.code === 200) { if (avgCallTimeRes.code === 200) {
kpiDataState.avgDuration = avgCallTimeRes.data.call_time || 0 kpiDataState.avgDuration = avgCallTimeRes.data.call_time || 0
} }
// 电话接通率 // 电话接通率
const callSuccessRateRes = await getCallSuccessRate(hasParams ? params : undefined)
if (callSuccessRateRes.code === 200) { if (callSuccessRateRes.code === 200) {
kpiDataState.successRate = callSuccessRateRes.data.call_success_rate || 0 kpiDataState.successRate = callSuccessRateRes.data.call_success_rate || 0
} }
@@ -401,26 +413,35 @@ async function getStatisticsData() {
const params = getRequestParams() const params = getRequestParams()
const hasParams = params.user_name const hasParams = params.user_name
// 获取表单填写率 // 并发请求所有统计数据
const fillingRateRes = await getTableFillingRate(hasParams ? params : undefined) const [
fillingRateRes,
avgResponseRes,
communicationRes,
timeoutRes
] = await Promise.all([
getTableFillingRate(hasParams ? params : undefined),
getAverageResponseTime(hasParams ? params : undefined),
getWeeklyActiveCommunicationRate(hasParams ? params : undefined),
getTimeoutResponseRate(hasParams ? params : undefined)
])
// 处理表单填写率
if (fillingRateRes.code === 200) { if (fillingRateRes.code === 200) {
statisticsData.formCompletionRate = fillingRateRes.data.filling_rate statisticsData.formCompletionRate = fillingRateRes.data.filling_rate
} }
// 获取平均响应时间 // 处理平均响应时间
const avgResponseRes = await getAverageResponseTime(hasParams ? params : undefined)
if (avgResponseRes.code === 200) { if (avgResponseRes.code === 200) {
statisticsData.averageResponseTime = avgResponseRes.data.average_minutes statisticsData.averageResponseTime = avgResponseRes.data.average_minutes
} }
// 获取客户沟通率 // 处理客户沟通率
const communicationRes = await getWeeklyActiveCommunicationRate(hasParams ? params : undefined)
if (communicationRes.code === 200) { if (communicationRes.code === 200) {
statisticsData.customerCommunicationRate = communicationRes.data.communication_rate statisticsData.customerCommunicationRate = communicationRes.data.communication_rate
} }
// 获取超时响应率 // 处理超时响应率
const timeoutRes = await getTimeoutResponseRate(hasParams ? params : undefined)
if (timeoutRes.code === 200) { if (timeoutRes.code === 200) {
statisticsData.timeoutResponseRate = timeoutRes.data.overtime_rate_600 statisticsData.timeoutResponseRate = timeoutRes.data.overtime_rate_600
statisticsData.severeTimeoutRate = timeoutRes.data.overtime_rate_800 statisticsData.severeTimeoutRate = timeoutRes.data.overtime_rate_800
@@ -584,7 +605,7 @@ async function getCustomerForm() {
const res = await getCustomerFormInfo(params) const res = await getCustomerFormInfo(params)
console.log('获取客户表单数据:', res) console.log('获取客户表单数据:', res)
if(res.code === 200) { if(res.code === 200) {
formInfo.value = res.data[0].answers || [] formInfo.value = res.data || []
} }
} catch (error) { } catch (error) {
// 静默处理错误 // 静默处理错误
@@ -956,15 +977,15 @@ async function forceRefreshAllData() {
onMounted(async () => { onMounted(async () => {
try { try {
isPageLoading.value = true isPageLoading.value = true
await getStatisticsData() getStatisticsData()
await getCoreKpi() getCoreKpi()
await CenterGetGoldContactTime() CenterGetGoldContactTime()
await CenterGetSalesFunnel() CenterGetSalesFunnel()
await getCustomerForm() getCustomerForm()
await getCustomerChat() getCustomerChat()
await getUrgentProblem() getUrgentProblem()
await getCustomerCall() getCustomerCall()
await getTimeline() getTimeline()
// 开发环境下暴露数据刷新函数到全局对象，方便调试 // 开发环境下暴露数据刷新函数到全局对象，方便调试
if (process.env.NODE_ENV === 'development') { if (process.env.NODE_ENV === 'development') {
@@ -1820,10 +1841,10 @@ $primary: #3b82f6;
background: #ffffff; background: #ffffff;
border-radius: 12px; border-radius: 12px;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
max-width: 600px; max-width: 1200px;
width: 90%; width: 90%;
// 设置最大高度，防止弹窗超出屏幕 // 设置最大高度，防止弹窗超出屏幕
max-height: 35vh; max-height: 80vh;
// 防止内容溢出容器，配合内部滚动 // 防止内容溢出容器，配合内部滚动
overflow: hidden; overflow: hidden;
// 使用 Flexbox 布局，让 .modal-body 可以伸缩 // 使用 Flexbox 布局，让 .modal-body 可以伸缩

3
my-vue-app/src/views/secondTop/components/GoodMusic.vue
View File

@@ -222,7 +222,6 @@ const recordings = computed(() => {
if (!props.qualityCalls ) { if (!props.qualityCalls ) {
return staticRecordings.value; return staticRecordings.value;
} }
console.log(66666,props.qualityCalls);
const recordingsList = []; const recordingsList = [];
props.qualityCalls.forEach((record, index) => { props.qualityCalls.forEach((record, index) => {
recordingsList.push({ recordingsList.push({
@@ -505,7 +504,7 @@ const downloadRecording = (index) => {
background: white; background: white;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
height: 400px; height: 420px;
} }
.chart-header { .chart-header {

152
my-vue-app/src/views/secondTop/components/ProblemRanking.vue
View File

@@ -90,12 +90,14 @@ async function exportData() {
try { try {
ElMessage.info('正在导出数据，请稍候...') ElMessage.info('正在导出数据，请稍候...')
console.log('导出参数:', params) console.log('导出参数:', params)
const res = await exportCustomers(params) const res = await exportCustomers()
if (res.code === 200 && res.data && res.data.length > 0) { if (res.code === 200 && res.data && res.data.length > 0) {
ElMessage.success('数据导出成功')
// 处理数据，将复杂的嵌套对象展平 // 处理数据，将复杂的嵌套对象展平
const exportData = res.data.map(customer => { const exportData = res.data.map(customer => {
const flatData = { const flatData = {
'昵称': customer.nickname || '', '昵称': customer.nickname || '',
'客户姓名': customer.customer_name || '',
'性别': customer.gender || '', '性别': customer.gender || '',
'跟进人': customer.follow_up_name || '', '跟进人': customer.follow_up_name || '',
'手机号': customer.phone || '', '手机号': customer.phone || '',
@@ -103,18 +105,104 @@ async function exportData() {
'用户ID': customer.mantis_user_id || '', '用户ID': customer.mantis_user_id || '',
} }
// 处理微信表单信息 const parseFormData = (formData) => {
if (customer.wechat_form) { if (typeof formData === 'string') {
flatData['家长姓名'] = customer.wechat_form.name || '' try {
flatData['孩子姓名'] = customer.wechat_form.child_name || '' return JSON.parse(formData)
flatData['孩子性别'] = customer.wechat_form.child_gender || '' } catch (e) {
flatData['职业'] = customer.wechat_form.occupation || '' return null
flatData['孩子教育阶段'] = customer.wechat_form.child_education || '' }
flatData['与孩子关系'] = customer.wechat_form.child_relation || '' }
flatData['联系电话'] = customer.wechat_form.mobile || '' return formData || null
flatData['地区'] = customer.wechat_form.territory || '' }
flatData['创建时间'] = customer.wechat_form.created_at ? new Date(customer.wechat_form.created_at).toLocaleString() : ''
flatData['更新时间'] = customer.wechat_form.updated_at ? new Date(customer.wechat_form.updated_at).toLocaleString() : '' const normalizeFormArray = (formData) => {
const data = parseFormData(formData)
console.log('解析后的表单数据:', data)
if (Array.isArray(data)) return data
if (data && Array.isArray(data.data)) return data.data
if (data && typeof data === 'object' && !data.answers) {
const numericKeys = Object.keys(data).filter(key => String(Number(key)) === key)
if (numericKeys.length > 0) {
return numericKeys
.sort((a, b) => Number(a) - Number(b))
.map(key => data[key])
.filter(Boolean)
}
}
if (data && data.answers) return [data]
return data ? [data] : []
}
const ensureUniqueKey = (key) => {
if (!flatData[key]) return key
let index = 2
while (flatData[`${key}(${index})`]) {
index += 1
}
return `${key}(${index})`
}
const parsedFormData = parseFormData(customer.wechat_form)
const formArray = normalizeFormArray(parsedFormData)
if (formArray.length > 0) {
console.log('表单数组:', formArray)
const isAnswerList = formArray.every(item => item && item.question_label && Object.prototype.hasOwnProperty.call(item, 'answer'))
const isFormWithAnswers = formArray.every(item => item && Array.isArray(item.answers))
console.log('是否为答案列表:', isAnswerList)
console.log('是否为表单含 answers:', isFormWithAnswers)
if (isAnswerList) {
let formAnswerCount = 0
formArray.forEach((answerItem) => {
const label = String(answerItem.question_label || '').trim()
if (!label) return
const key = ensureUniqueKey(label)
flatData[key] = answerItem.answer ?? ''
formAnswerCount += 1
})
if (formAnswerCount === 0 && formArray.length > 0) {
const fallbackKey = ensureUniqueKey('表单答案')
flatData[fallbackKey] = formArray.map(item => `${item.question_label || ''}: ${item.answer || ''}`).join(' | ')
}
} else if (isFormWithAnswers) {
console.log('表单含 answers:', formArray)
formArray.forEach((formItem) => {
const formTitle = formItem.form_title || '表单'
if (Array.isArray(formItem.answers)) {
let formAnswerCount = 0
formItem.answers.forEach((answerItem) => {
const label = String(answerItem.question_label || '').trim()
if (!label) return
const key = ensureUniqueKey(`${formTitle}-${label}`)
flatData[key] = answerItem.answer ?? ''
formAnswerCount += 1
})
if (formAnswerCount === 0 && formItem.answers.length > 0) {
const fallbackKey = ensureUniqueKey(`${formTitle}-表单答案`)
flatData[fallbackKey] = formItem.answers.map(item => `${item.question_label || ''}: ${item.answer || ''}`).join(' | ')
}
}
if (formItem.created_at) {
const key = ensureUniqueKey(`${formTitle}-创建时间`)
flatData[key] = new Date(formItem.created_at).toLocaleString()
}
if (formItem.updated_at) {
const key = ensureUniqueKey(`${formTitle}-更新时间`)
flatData[key] = new Date(formItem.updated_at).toLocaleString()
}
})
}
} else if (parsedFormData && typeof parsedFormData === 'object') {
flatData['家长姓名'] = parsedFormData.name || ''
flatData['孩子姓名'] = parsedFormData.child_name || ''
flatData['孩子性别'] = parsedFormData.child_gender || ''
flatData['职业'] = parsedFormData.occupation || ''
flatData['孩子教育阶段'] = parsedFormData.child_education || ''
flatData['与孩子关系'] = parsedFormData.child_relation || ''
flatData['联系电话'] = parsedFormData.mobile || ''
flatData['地区'] = parsedFormData.territory || ''
flatData['创建时间'] = parsedFormData.created_at ? new Date(parsedFormData.created_at).toLocaleString() : ''
flatData['更新时间'] = parsedFormData.updated_at ? new Date(parsedFormData.updated_at).toLocaleString() : ''
} }
// 处理到课情况 // 处理到课情况
@@ -126,9 +214,12 @@ async function exportData() {
} }
// 处理问卷调查信息 // 处理问卷调查信息
if (customer.wechat_form && customer.wechat_form.additional_info) { if (parsedFormData && parsedFormData.additional_info) {
customer.wechat_form.additional_info.forEach((item) => { parsedFormData.additional_info.forEach((item) => {
flatData[item.topic || ''] = item.answer || '' const key = ensureUniqueKey(item.topic || '')
if (key) {
flatData[key] = item.answer || ''
}
}) })
} }
@@ -137,27 +228,18 @@ async function exportData() {
// 创建工作簿 // 创建工作簿
const wb = XLSX.utils.book_new() const wb = XLSX.utils.book_new()
const ws = XLSX.utils.json_to_sheet(exportData) const allKeys = Array.from(new Set(exportData.flatMap(item => Object.keys(item))))
const ws = XLSX.utils.json_to_sheet(exportData, { header: allKeys })
// 设置列宽 // 设置列宽
const colWidths = [ const colWidths = allKeys.map(key => {
{ wch: 10 }, // 昵称 const maxCellLength = exportData.reduce((max, row) => {
{ wch: 6 }, // 性别 const value = row[key]
{ wch: 12 }, // 跟进人 const length = value === null || value === undefined ? 0 : String(value).length
{ wch: 15 }, // 手机号 return Math.max(max, length)
{ wch: 10 }, // 是否入群 }, 0)
{ wch: 20 }, // 用户ID return { wch: Math.min(50, Math.max(10, key.length, maxCellLength)) }
{ wch: 12 }, // 家长姓名 })
{ wch: 12 }, // 孩子姓名
{ wch: 8 }, // 孩子性别
{ wch: 12 }, // 职业
{ wch: 12 }, // 孩子教育阶段
{ wch: 15 }, // 与孩子关系
{ wch: 15 }, // 联系电话
{ wch: 20 }, // 地区
{ wch: 20 }, // 创建时间
{ wch: 20 }, // 更新时间
]
ws['!cols'] = colWidths ws['!cols'] = colWidths
// 添加工作表到工作簿 // 添加工作表到工作簿

124
my-vue-app/src/views/secondTop/secondTop.vue
View File

@@ -112,6 +112,22 @@
<span class="value">{{ selectedGroup.conversionRate }}%</span> <span class="value">{{ selectedGroup.conversionRate }}%</span>
</div> </div>
</div> </div>
<div class="group-performance">
<button @click="showTeamAnalysisModal">团队整体分析</button>
</div>
</div>
<!-- 团队整体分析弹窗 -->
<div v-if="showTeamAnalysis" class="team-analysis-modal" @click.self="closeTeamAnalysisModal">
<div class="modal-content">
<div class="modal-header">
<h3>团队整体分析</h3>
<button class="close-btn" @click="closeTeamAnalysisModal">×</button>
</div>
<div class="modal-body">
<p>这里是团队整体分析的内容</p>
</div>
</div>
</div> </div>
<div class="members-grid"> <div class="members-grid">
@@ -283,6 +299,9 @@ const cardVisibility = ref({
// FeedbackForm 控制变量 // FeedbackForm 控制变量
const showFeedbackForm = ref(false) const showFeedbackForm = ref(false)
// 团队整体分析弹窗控制变量
const showTeamAnalysis = ref(false)
// 更新卡片显示状态 // 更新卡片显示状态
const updateCardVisibility = (newVisibility) => { const updateCardVisibility = (newVisibility) => {
Object.assign(cardVisibility.value, newVisibility) Object.assign(cardVisibility.value, newVisibility)
@@ -297,6 +316,15 @@ const showFeedbackFormModal = () => {
const closeFeedbackFormModal = () => { const closeFeedbackFormModal = () => {
showFeedbackForm.value = false showFeedbackForm.value = false
} }
// 团队整体分析弹窗控制方法
const showTeamAnalysisModal = () => {
showTeamAnalysis.value = true
}
const closeTeamAnalysisModal = () => {
showTeamAnalysis.value = false
}
// 营期调控逻辑 // 营期调控逻辑
// This would ideally come from a prop or API call based on the logged-in user // This would ideally come from a prop or API call based on the logged-in user
const centerData = ref({ const centerData = ref({
@@ -954,21 +982,21 @@ const excellentRecord = ref([]);
(currentQuery.user_name && currentQuery.user_level) (currentQuery.user_name && currentQuery.user_level)
if (!isFromRoute) { if (!isFromRoute) {
await CenterCampPeriodAdmin() CenterCampPeriodAdmin()
} }
await CentergetGoodRecord() CentergetGoodRecord()
await CenterOverallCenterPerformance() CenterOverallCenterPerformance()
await CenterTotalGroupCount() CenterTotalGroupCount()
await CenterConversionRate() CenterConversionRate()
await CenterTotalCallCount() CenterTotalCallCount()
await CenterNewCustomer() CenterNewCustomer()
await CenterDepositConversionRate() CenterDepositConversionRate()
await CenterCustomerType() CenterCustomerType()
await CenterUrgentNeedToAddress() CenterUrgentNeedToAddress()
await CenterConversionRateVsAverage() CenterConversionRateVsAverage()
await CenterSeniorManagerList() CenterSeniorManagerList()
await CenterGroupList('all') CenterGroupList('all')
console.log('[强制刷新] 所有数据已重新加载') console.log('[强制刷新] 所有数据已重新加载')
} catch (error) { } catch (error) {
@@ -1636,6 +1664,76 @@ const hideTooltip = () => {
} }
} }
/* 团队分析弹窗样式 */
.team-analysis-modal {
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;
}
.team-analysis-modal .modal-content {
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: 80%;
max-width: 600px;
max-height: 80vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
.team-analysis-modal .modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
border-bottom: 1px solid #e2e8f0;
}
.team-analysis-modal .modal-header h3 {
margin: 0;
color: #1a202c;
font-size: 1.25rem;
}
.team-analysis-modal .close-btn {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: #718096;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.team-analysis-modal .close-btn:hover {
color: #1a202c;
}
.team-analysis-modal .modal-body {
padding: 1rem;
overflow-y: auto;
flex: 1;
}
.team-analysis-modal .modal-body p {
margin: 0;
color: #4a5568;
line-height: 1.5;
}
// 路由导航顶栏样式 // 路由导航顶栏样式
.route-header { .route-header {
display: flex; display: flex;

2
my-vue-app/src/views/senorManger/components/CenterOverview.vue
View File

@@ -135,7 +135,6 @@ const props = defineProps({
}) })
} }
}) })
console.log(99999,props.overallTeamPerformance)
// 计算属性 // 计算属性
const totalPerformance = computed(() => { const totalPerformance = computed(() => {
return props.overallTeamPerformance.totalPerformance return props.overallTeamPerformance.totalPerformance
@@ -158,7 +157,6 @@ const newCustomers = computed(() => {
}) })
const depositConversions = computed(() => { const depositConversions = computed(() => {
console.log(999991111,props.overallTeamPerformance.depositConversions)
return props.overallTeamPerformance.depositConversions return props.overallTeamPerformance.depositConversions
}) })

1144
my-vue-app/src/views/senorManger/components/GoodMusic.vue Normal file
View File

File diff suppressed because it is too large Load Diff

4
my-vue-app/src/views/senorManger/components/ProblemRanking.vue
View File

@@ -87,7 +87,7 @@ $white: #ffffff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 26rem !important; height: 21.5rem !important;
max-height: 26rem; max-height: 26rem;
// flex: 1; // flex: 1;
} }
@@ -96,7 +96,7 @@ $white: #ffffff;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 20px 20px 16px; padding: 10px 20px 10px;
border-bottom: 1px solid #ebeef5; border-bottom: 1px solid #ebeef5;
h3 { h3 {

30
my-vue-app/src/views/senorManger/components/StatisticalIndicators.vue
View File

@@ -5,35 +5,35 @@
<div class="stat-icon customer-rate"> <div class="stat-icon customer-rate">
<i class="el-icon-chat-dot-round"></i> <i class="el-icon-chat-dot-round"></i>
</div> </div>
<div class="kpi-value">{{ customerCommunicationRate.active_customer_communication_rate||0 }}</div> <div class="kpi-value">{{ (customerCommunicationRate && customerCommunicationRate.active_customer_communication_rate) || 0 }}</div>
<p>活跃客户沟通率 <i class="el-icon-warning info-icon" @mouseenter="showTooltip($event, 'customerCommunicationRate')" @mouseleave="hideTooltip">ⓘ</i></p> <p>活跃客户沟通率 <i class="el-icon-warning info-icon" @mouseenter="showTooltip($event, 'customerCommunicationRate')" @mouseleave="hideTooltip">ⓘ</i></p>
</div> </div>
<div class="kpi-item stat-item"> <div class="kpi-item stat-item">
<div class="stat-icon response-time"> <div class="stat-icon response-time">
<i class="el-icon-timer"></i> <i class="el-icon-timer"></i>
</div> </div>
<div class="kpi-value">{{ averageResponseTime.average_answer_time||0 }}<span class="kpi-unit">分钟</span></div> <div class="kpi-value">{{ (averageResponseTime && averageResponseTime.average_answer_time)||0 }}<span class="kpi-unit">分钟</span></div>
<p>平均应答时间 <i class="el-icon-warning info-icon" @mouseenter="showTooltip($event, 'averageResponseTime')" @mouseleave="hideTooltip">ⓘ</i></p> <p>平均应答时间 <i class="el-icon-warning info-icon" @mouseenter="showTooltip($event, 'averageResponseTime')" @mouseleave="hideTooltip">ⓘ</i></p>
</div> </div>
<div class="kpi-item stat-item"> <div class="kpi-item stat-item">
<div class="stat-icon timeout-rate"> <div class="stat-icon timeout-rate">
<i class="el-icon-warning"></i> <i class="el-icon-warning"></i>
</div> </div>
<div class="kpi-value">{{ timeoutResponseRate.timeout_rate||0 }}</div> <div class="kpi-value">{{ (timeoutResponseRate && timeoutResponseRate.timeout_rate)||0 }}</div>
<p>超时应答率 <i class="el-icon-warning info-icon" @mouseenter="showTooltip($event, 'timeoutResponseRate')" @mouseleave="hideTooltip">ⓘ</i></p> <p>超时应答率 <i class="el-icon-warning info-icon" @mouseenter="showTooltip($event, 'timeoutResponseRate')" @mouseleave="hideTooltip">ⓘ</i></p>
</div> </div>
<div class="kpi-item stat-item"> <div class="kpi-item stat-item">
<div class="stat-icon severe-timeout-rate"> <div class="stat-icon severe-timeout-rate">
<i class="el-icon-warning-outline"></i> <i class="el-icon-warning-outline"></i>
</div> </div>
<div class="kpi-value">{{ timeoutResponseRate.serious_timeout_rate||0 }}</div> <div class="kpi-value">{{ (timeoutResponseRate && timeoutResponseRate.serious_timeout_rate)||0 }}</div>
<p>严重超时应答率 <i class="el-icon-warning info-icon" @mouseenter="showTooltip($event, 'severeTimeoutRate')" @mouseleave="hideTooltip">ⓘ</i></p> <p>严重超时应答率 <i class="el-icon-warning info-icon" @mouseenter="showTooltip($event, 'severeTimeoutRate')" @mouseleave="hideTooltip">ⓘ</i></p>
</div> </div>
<div class="kpi-item stat-item"> <div class="kpi-item stat-item">
<div class="stat-icon form-rate"> <div class="stat-icon form-rate">
<i class="el-icon-document"></i> <i class="el-icon-document"></i>
</div> </div>
<div class="kpi-value">{{ formCompletionRate.table_filling_rate||0 }}</div> <div class="kpi-value">{{ (formCompletionRate && formCompletionRate.table_filling_rate)||0 }}</div>
<p>表格填写率 <i class="el-icon-warning info-icon" @mouseenter="showTooltip($event, 'formCompletionRate')" @mouseleave="hideTooltip">ⓘ</i></p> <p>表格填写率 <i class="el-icon-warning info-icon" @mouseenter="showTooltip($event, 'formCompletionRate')" @mouseleave="hideTooltip">ⓘ</i></p>
</div> </div>
</div> </div>
@@ -53,24 +53,24 @@ import Tooltip from '@/components/Tooltip.vue';
defineProps({ defineProps({
customerCommunicationRate: { customerCommunicationRate: {
type: Number, type: Object,
default: 0 default: () => ({})
}, },
averageResponseTime: { averageResponseTime: {
type: Number, type: Object,
default: 0 default: () => ({})
}, },
timeoutResponseRate: { timeoutResponseRate: {
type: Number, type: Object,
default: 0 default: () => ({})
}, },
severeTimeoutRate: { severeTimeoutRate: {
type: Number, type: Object,
default: 0 default: () => ({})
}, },
formCompletionRate: { formCompletionRate: {
type: Number, type: Object,
default: 0 default: () => ({})
} }
}); });

485
my-vue-app/src/views/senorManger/seniorManager.vue
View File

@@ -28,17 +28,41 @@
<div v-if="!isRouteNavigation"> <div v-if="!isRouteNavigation">
<!-- 用户下拉菜单 --> <!-- 用户下拉菜单 -->
<div style="display: flex; align-items: center; gap: 20px;"> <div style="display: flex; align-items: center; gap: 20px;">
<button @click="showDepartmentAnalysisModal" class="feedback-btn">部门分析</button>
<button @click="showFeedbackFormModal" class="feedback-btn">意见反馈</button> <button @click="showFeedbackFormModal" class="feedback-btn">意见反馈</button>
<FeedbackForm <FeedbackForm
:is-visible="showFeedbackForm" :is-visible="showFeedbackForm"
@close="closeFeedbackFormModal" @close="closeFeedbackFormModal"
@submit-feedback="closeFeedbackFormModal" @submit-feedback="closeFeedbackFormModal"
/> />
<!-- 部门分析弹窗 -->
<div v-if="showDepartmentAnalysis" class="department-analysis-modal" @click.self="closeDepartmentAnalysisModal">
<div class="modal-content">
<div class="modal-header">
<h3>部门分析</h3>
<button class="close-btn" @click="closeDepartmentAnalysisModal">×</button>
</div>
<div class="modal-body">
<div v-if="departmentAnalysisData && departmentAnalysisData.length > 0">
<div v-for="(report, index) in departmentAnalysisData" :key="index" class="report-item">
<h4>报告时间: {{ report.start_time }} 至 {{ report.end_time }}</h4>
<div v-if="report.report && report.report !== 'None' && report.report.trim() !== ''" class="report-content" v-html="formatReportContent(report.report)"></div>
<div v-else class="no-report">
<p>暂无分析报告</p>
</div>
</div>
</div>
<div v-else>
<p>暂无部门分析数据</p>
</div>
</div>
</div>
</div>
<UserDropdown <UserDropdown
:card-visibility="cardVisibility" :card-visibility="cardVisibility"
@update-card-visibility="updateCardVisibility" @update-card-visibility="updateCardVisibility"
/> />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@@ -53,7 +77,12 @@
@update-check-type="updateCheckType" @update-check-type="updateCheckType"
/> />
<div v-if="cardVisibility.teamAlerts" class="action-items-compact"> <div v-if="cardVisibility.teamAlerts" class="action-items-compact">
<TeamAlerts style="height: 300px;" :abnormalData="teamAlerts" /> <!-- <TeamAlerts style="height: 300px;" :abnormalData="teamAlerts" /> -->
<div v-if="cardVisibility.problemRanking" class="problem-ranking">
<!-- 客户迫切解决的问题 -->
<ProblemRanking :problemRanking="problemRanking" />
</div>
</div> </div>
</div> </div>
<StatisticalIndicators <StatisticalIndicators
@@ -79,10 +108,7 @@
@select-group="selectGroup" @select-group="selectGroup"
/> />
</div> </div>
<div v-if="cardVisibility.problemRanking" class="problem-ranking"> <GoodMusic style="height: 300px;" :qualityCalls="excellentRecord" />
<!-- 客户迫切解决的问题 -->
<ProblemRanking :problemRanking="problemRanking" />
</div>
<!-- Right Section - Group Comparison --> <!-- Right Section - Group Comparison -->
<div v-if="cardVisibility.groupComparison" class="right-section"> <div v-if="cardVisibility.groupComparison" class="right-section">
<GroupComparison <GroupComparison
@@ -106,6 +132,7 @@
<!-- 团队详情内容 --> <!-- 团队详情内容 -->
<div v-else> <div v-else>
<div class="team-detail-header"> <div class="team-detail-header">
<div>
<h2>{{ selectedGroup.name }} - 团队成员详情</h2> <h2>{{ selectedGroup.name }} - 团队成员详情</h2>
<div class="team-summary"> <div class="team-summary">
<div class="summary-item"> <div class="summary-item">
@@ -127,6 +154,35 @@
</div> </div>
</div> </div>
<div class="group-performance">
<button @click="showTeamAnalysisModal">团队整体分析</button>
</div>
</div>
<!-- 团队分析弹窗 -->
<div v-if="showTeamAnalysis" class="team-analysis-modal" @click.self="closeTeamAnalysisModal">
<div class="modal-content">
<div class="modal-header">
<h3>团队整体分析</h3>
<button class="close-btn" @click="closeTeamAnalysisModal">×</button>
</div>
<div class="modal-body">
<div v-if="teamAnalysisData && teamAnalysisData.length > 0">
<div v-for="(report, index) in teamAnalysisData" :key="index" class="report-item">
<h4>报告时间: {{ report.start_time }} 至 {{ report.end_time }}</h4>
<div v-if="report.report && report.report !== 'None' && report.report.trim() !== ''" class="report-content" v-html="formatReportContent(report.report)"></div>
<div v-else class="no-report">
<p>暂无分析报告</p>
</div>
</div>
</div>
<div v-else>
<p>暂无团队分析数据</p>
</div>
</div>
</div>
</div>
<div class="members-grid"> <div class="members-grid">
<div <div
v-for="member in teamPerformanceDetail.group_details" v-for="member in teamPerformanceDetail.group_details"
@@ -201,6 +257,7 @@ import Tooltip from '@/components/Tooltip.vue'
import CenterOverview from './components/CenterOverview.vue' import CenterOverview from './components/CenterOverview.vue'
import GroupComparison from './components/GroupComparison.vue' import GroupComparison from './components/GroupComparison.vue'
import GroupRanking from './components/GroupRanking.vue' import GroupRanking from './components/GroupRanking.vue'
import GoodMusic from './components/GoodMusic.vue'
import TeamAlerts from '../maneger/components/TeamAlerts.vue' import TeamAlerts from '../maneger/components/TeamAlerts.vue'
import ProblemRanking from './components/ProblemRanking.vue' import ProblemRanking from './components/ProblemRanking.vue'
import StatisticalIndicators from './components/StatisticalIndicators.vue' import StatisticalIndicators from './components/StatisticalIndicators.vue'
@@ -209,8 +266,9 @@ import Loading from '@/components/Loading.vue'
import PerformanceComparison from './components/PerformanceComparison.vue'; // 1. 导入新组件 import PerformanceComparison from './components/PerformanceComparison.vue'; // 1. 导入新组件
import { getOverallTeamPerformance,getTotalGroupCount,getConversionRate,getTotalCallCount, import { getOverallTeamPerformance,getTotalGroupCount,getConversionRate,getTotalCallCount,
getNewCustomer,getDepositConversionRate,getActiveCustomerCommunicationRate,getAverageAnswerTime, getNewCustomer,getDepositConversionRate,getActiveCustomerCommunicationRate,getAverageAnswerTime,
getTimeoutRate,getTableFillingRate,getUrgentNeedToAddress,getTeamRanking,getTeamRankingInfo,getAbnormalResponseRate,getTeamSalesFunnel } from '@/api/senorManger.js' getTimeoutRate,getTableFillingRate,getUrgentNeedToAddress,getTeamRanking,getTeamRankingInfo,
getAbnormalResponseRate,getTeamSalesFunnel,getExcellentRecordFile,getTeamEveryGroupReport,
getTeamEntiretyReport } from '@/api/senorManger.js'
import { useUserStore } from '@/stores/user.js' import { useUserStore } from '@/stores/user.js'
import FeedbackForm from "@/components/FeedbackForm.vue"; import FeedbackForm from "@/components/FeedbackForm.vue";
@@ -248,7 +306,6 @@ const withCache = async (functionName, apiCall, params = {}) => {
return cachedData return cachedData
} }
console.log(`调用API获取数据: ${functionName}`, params)
const result = await apiCall() const result = await apiCall()
setCache(cacheKey, result) setCache(cacheKey, result)
return result return result
@@ -260,6 +317,25 @@ const clearCache = () => {
console.log('所有缓存已清除') console.log('所有缓存已清除')
} }
// 优秀录音
const excellentRecord = ref([]);
async function CenterExcellentRecord() {
const params={
user_level:userStore.userInfo.user_level.toString(),
user_name:userStore.userInfo.username
}
try {
const cacheKey = getCacheKey('CenterExcellentRecord', params);
const result = await withCache(cacheKey, async () => {
const res = await getExcellentRecordFile(params);
return res.data;
});
excellentRecord.value = result;
} catch (error) {
console.error("获取优秀录音失败:", error);
}
}
const clearSpecificCache = (functionName, params = {}) => { const clearSpecificCache = (functionName, params = {}) => {
const cacheKey = getCacheKey(functionName, params) const cacheKey = getCacheKey(functionName, params)
cache.delete(cacheKey) cache.delete(cacheKey)
@@ -295,19 +371,19 @@ const forceRefreshAllData = async () => {
try { try {
isLoading.value = true isLoading.value = true
await fetchOverallTeamPerformance() fetchOverallTeamPerformance()
await fetchActiveGroups() fetchActiveGroups()
await fetchConversionRate() fetchConversionRate()
await fetchTotalCallCount() fetchTotalCallCount()
await fetchNewCustomers() fetchNewCustomers()
await fetchDepositConversions() fetchDepositConversions()
await fetchAbnormalResponseRate() fetchAbnormalResponseRate()
await fetchCustomerCommunicationRate() fetchCustomerCommunicationRate()
await fetchAverageResponseTime() fetchAverageResponseTime()
await fetchTimeoutRate() fetchTimeoutRate()
await fetchTableFillingRate() fetchTableFillingRate()
await fetchUrgentNeedToAddress() fetchUrgentNeedToAddress()
await fetchTeamRanking() fetchTeamRanking()
console.log('所有数据已强制刷新完成') console.log('所有数据已强制刷新完成')
} catch (error) { } catch (error) {
console.error('强制刷新数据失败:', error) console.error('强制刷新数据失败:', error)
@@ -324,6 +400,14 @@ const formCompletionRate = ref(90)
const CheckType = ref('month') const CheckType = ref('month')
// FeedbackForm 控制变量 // FeedbackForm 控制变量
const showFeedbackForm = ref(false) const showFeedbackForm = ref(false)
// 部门分析弹窗控制变量
const showDepartmentAnalysis = ref(false)
// 团队分析弹窗控制变量
const showTeamAnalysis = ref(false)
// 团队分析数据
const teamAnalysisData = ref([])
// 部门分析数据
const departmentAnalysisData = ref([])
// 更新CheckType的方法 // 更新CheckType的方法
const updateCheckType = async (newValue) => { const updateCheckType = async (newValue) => {
@@ -344,6 +428,90 @@ const closeFeedbackFormModal = () => {
showFeedbackForm.value = false showFeedbackForm.value = false
} }
// 部门分析弹窗控制方法
const showDepartmentAnalysisModal = async () => {
showDepartmentAnalysis.value = true
// 获取部门分析数据
try {
// 获取当前登录的高级经理信息
const currentUser = userStore.userInfo;
const params = {
user_name: currentUser.username,
user_level: currentUser.user_level.toString(),
part_count: 1 // 默认获取最近1份报告
}
const response = await getTeamEntiretyReport(params)
// 根据API响应结构调整数据处理逻辑
if (response.data) {
if (Array.isArray(response.data)) {
// 如果response.data本身就是数组
departmentAnalysisData.value = response.data
} else if (response.data.data && Array.isArray(response.data.data)) {
// 如果response.data.data是数组
departmentAnalysisData.value = response.data.data
} else {
// 其他情况，可能是单个对象
departmentAnalysisData.value = [response.data]
}
}
} catch (error) {
console.error('获取部门分析数据失败:', error)
departmentAnalysisData.value = []
}
}
const closeDepartmentAnalysisModal = () => {
showDepartmentAnalysis.value = false
}
// 团队分析弹窗控制方法
const showTeamAnalysisModal = async () => {
showTeamAnalysis.value = true
// 获取团队分析数据
try {
const params = {
department_name: selectedGroup.value.name + '-' + selectedGroup.value.leader,
part_count: 1 // 默认获取最近1份报告
}
const response = await getTeamEveryGroupReport(params)
// 根据API响应结构调整数据处理逻辑
if (response.data) {
if (Array.isArray(response.data)) {
// 如果response.data本身就是数组
teamAnalysisData.value = response.data
} else if (response.data.data && Array.isArray(response.data.data)) {
// 如果response.data.data是数组
teamAnalysisData.value = response.data.data
} else {
// 其他情况，可能是单个对象
teamAnalysisData.value = [response.data]
}
}
} catch (error) {
console.error('获取团队分析数据失败:', error)
}
}
const closeTeamAnalysisModal = () => {
showTeamAnalysis.value = false
}
// 格式化报告内容
const formatReportContent = (content) => {
if (!content) return ''
// 将Markdown格式的标题转换为HTML标签
return content
.replace(/### (.*?)(?=\n|$)/g, '<h3>$1</h3>')
.replace(/## (.*?)(?=\n|$)/g, '<h2>$1</h2>')
.replace(/# (.*?)(?=\n|$)/g, '<h1>$1</h1>')
.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
.replace(/\*(.*?)\*/g, '<em>$1</em>')
.replace(/\n\n/g, '</p><p>')
.replace(/\n/g, '<br>')
}
// 卡片显示状态 // 卡片显示状态
const cardVisibility = ref({ const cardVisibility = ref({
centerOverview: true, centerOverview: true,
@@ -448,7 +616,6 @@ async function fetchActiveGroups() {
requestParams requestParams
) )
overallTeamPerformance.value.activeGroups = response.data overallTeamPerformance.value.activeGroups = response.data
console.log('活跃组数:', response.data)
} catch (error) { } catch (error) {
console.error('获取活跃组数失败:', error) console.error('获取活跃组数失败:', error)
} }
@@ -529,18 +696,17 @@ async function fetchDepositConversions() {
requestParams requestParams
) )
overallTeamPerformance.value.depositConversions = response.data overallTeamPerformance.value.depositConversions = response.data
console.log(99888999,response.data)
} catch (error) { } catch (error) {
console.error('获取定金转化失败:', error) console.error('获取定金转化失败:', error)
} }
} }
const statisticalIndicators = ref({ const statisticalIndicators = ref({
customerCommunicationRate: 0, customerCommunicationRate: {},
averageResponseTime: 0, averageResponseTime: {},
timeoutResponseRate: 0, timeoutResponseRate: {},
severeTimeoutRate: 0, severeTimeoutRate: {},
formCompletionRate: 0, formCompletionRate: {},
}) })
// 销售漏斗 // 销售漏斗
@@ -572,17 +738,18 @@ async function fetchAbnormalResponseRate() {
() => getAbnormalResponseRate(hasParams ? params : undefined), () => getAbnormalResponseRate(hasParams ? params : undefined),
requestParams requestParams
) )
const rawData = response.data const rawData = response.data || {} // 添加默认值防止null访问
const processedAlerts = [] const processedAlerts = []
const teamData = new Map() const teamData = new Map()
// 添加安全检查防止访问null属性
if (rawData.team_serious_timeout_abnormal_counts_by_group) { if (rawData.team_serious_timeout_abnormal_counts_by_group) {
Object.entries(rawData.team_serious_timeout_abnormal_counts_by_group).forEach(([teamName, data]) => { Object.entries(rawData.team_serious_timeout_abnormal_counts_by_group).forEach(([teamName, data]) => {
if (!teamData.has(teamName)) { if (!teamData.has(teamName)) {
teamData.set(teamName, { timeoutCount: 0, fillingCount: 0 }) teamData.set(teamName, { timeoutCount: 0, fillingCount: 0 })
} }
teamData.get(teamName).timeoutCount = data.count teamData.get(teamName).timeoutCount = data.count || 0
}) })
} }
@@ -591,7 +758,7 @@ async function fetchAbnormalResponseRate() {
if (!teamData.has(teamName)) { if (!teamData.has(teamName)) {
teamData.set(teamName, { timeoutCount: 0, fillingCount: 0 }) teamData.set(teamName, { timeoutCount: 0, fillingCount: 0 })
} }
teamData.get(teamName).fillingCount = data.count teamData.get(teamName).fillingCount = data.count || 0
}) })
} }
@@ -633,9 +800,12 @@ async function fetchCustomerCommunicationRate() {
() => getActiveCustomerCommunicationRate(hasParams ? params : undefined), () => getActiveCustomerCommunicationRate(hasParams ? params : undefined),
requestParams requestParams
) )
statisticalIndicators.value.customerCommunicationRate = response.data // 确保响应数据不为null
statisticalIndicators.value.customerCommunicationRate = response.data || {}
} catch (error) { } catch (error) {
console.error('获取活跃客户沟通率失败:', error) console.error('获取活跃客户沟通率失败:', error)
// 出错时设置为空对象
statisticalIndicators.value.customerCommunicationRate = {}
} }
} }
// 统计指标--平均应答时间 // 统计指标--平均应答时间
@@ -650,9 +820,12 @@ async function fetchAverageResponseTime() {
() => getAverageAnswerTime(hasParams ? params : undefined), () => getAverageAnswerTime(hasParams ? params : undefined),
requestParams requestParams
) )
statisticalIndicators.value.averageResponseTime = response.data // 确保响应数据不为null
statisticalIndicators.value.averageResponseTime = response.data || {}
} catch (error) { } catch (error) {
console.error('获取平均应答时间失败:', error) console.error('获取平均应答时间失败:', error)
// 出错时设置为空对象
statisticalIndicators.value.averageResponseTime = {}
} }
} }
// 统计指标--超时应答率、严重超时应答率 // 统计指标--超时应答率、严重超时应答率
@@ -667,9 +840,15 @@ async function fetchTimeoutRate() {
() => getTimeoutRate(hasParams ? params : undefined), () => getTimeoutRate(hasParams ? params : undefined),
requestParams requestParams
) )
statisticalIndicators.value.timeoutResponseRate = response.data // 确保响应数据不为null
statisticalIndicators.value.timeoutResponseRate = response.data || {}
// severeTimeoutRate使用相同的数据源
statisticalIndicators.value.severeTimeoutRate = response.data || {}
} catch (error) { } catch (error) {
console.error('获取超时应答率失败:', error) console.error('获取超时应答率失败:', error)
// 出错时设置为空对象
statisticalIndicators.value.timeoutResponseRate = {}
statisticalIndicators.value.severeTimeoutRate = {}
} }
} }
// 统计指标--表格填写率 // 统计指标--表格填写率
@@ -684,9 +863,12 @@ async function fetchTableFillingRate() {
() => getTableFillingRate(hasParams ? params : undefined), () => getTableFillingRate(hasParams ? params : undefined),
requestParams requestParams
) )
statisticalIndicators.value.formCompletionRate = response.data // 确保响应数据不为null
statisticalIndicators.value.formCompletionRate = response.data || {}
} catch (error) { } catch (error) {
console.error('获取表格填写率失败:', error) console.error('获取表格填写率失败:', error)
// 出错时设置为空对象
statisticalIndicators.value.formCompletionRate = {}
} }
} }
const problemRanking = ref({}) const problemRanking = ref({})
@@ -772,6 +954,7 @@ onMounted(async ()=>{
await fetchTableFillingRate() await fetchTableFillingRate()
await fetchUrgentNeedToAddress() await fetchUrgentNeedToAddress()
await fetchTeamRanking() await fetchTeamRanking()
await CenterExcellentRecord()
console.log('缓存状态:', getCacheInfo()) console.log('缓存状态:', getCacheInfo())
@@ -1117,12 +1300,19 @@ const hideTooltip = () => {
.team-detail-header { .team-detail-header {
margin-bottom: 2rem; margin-bottom: 2rem;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: 1rem;
h2 { h2 {
font-size: 1.4rem; font-size: 1.4rem;
font-weight: 600; font-weight: 600;
color: #1e293b; color: #1e293b;
margin: 0 0 1rem 0; margin: 0;
flex: 1;
min-width: 300px;
} }
.team-summary { .team-summary {
@@ -1148,6 +1338,32 @@ const hideTooltip = () => {
} }
} }
} }
.group-performance {
button {
background-color: #3b82f6;
color: white;
border: none;
border-radius: 6px;
padding: 0.5rem 1rem;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
height: fit-content;
&:hover {
background-color: #2563eb;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
&:active {
transform: translateY(0);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
}
}
} }
.members-grid { .members-grid {
@@ -1543,4 +1759,199 @@ const hideTooltip = () => {
.feedback-btn:hover { .feedback-btn:hover {
background-color: #3182ce; background-color: #3182ce;
} }
/* 部门分析弹窗样式 */
.department-analysis-modal {
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-color: white;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: 80%;
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: 1rem;
border-bottom: 1px solid #e2e8f0;
}
.modal-header h3 {
margin: 0;
color: #1a202c;
font-size: 1.25rem;
}
.close-btn {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: #718096;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.close-btn:hover {
color: #1a202c;
}
.modal-body {
padding: 1rem;
overflow-y: auto;
flex: 1;
}
.modal-body p {
margin: 0;
color: #4a5568;
line-height: 1.5;
}
/* 团队分析弹窗样式 */
.team-analysis-modal {
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;
}
.team-analysis-modal .modal-content {
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: 80%;
max-width: 600px;
max-height: 80vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
.team-analysis-modal .modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
border-bottom: 1px solid #e2e8f0;
}
.team-analysis-modal .modal-header h3 {
margin: 0;
color: #1a202c;
font-size: 1.25rem;
}
.team-analysis-modal .close-btn {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: #718096;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.team-analysis-modal .close-btn:hover {
color: #1a202c;
}
.team-analysis-modal .modal-body {
padding: 1rem;
overflow-y: auto;
flex: 1;
}
.team-analysis-modal .modal-body p {
margin: 0;
color: #4a5568;
line-height: 1.5;
}
.team-analysis-modal .report-item {
margin-bottom: 20px;
padding: 15px;
border: 1px solid #e2e8f0;
border-radius: 5px;
background-color: #f8fafc;
}
.team-analysis-modal .report-item h4 {
margin-top: 0;
color: #1a202c;
border-bottom: 1px solid #e2e8f0;
padding-bottom: 5px;
}
.team-analysis-modal .report-content {
margin-top: 10px;
color: #4a5568;
line-height: 1.6;
}
.team-analysis-modal .report-content h1,
.team-analysis-modal .report-content h2,
.team-analysis-modal .report-content h3 {
margin-top: 15px;
margin-bottom: 10px;
color: #1a202c;
}
.team-analysis-modal .report-content h1 {
font-size: 1.5rem;
}
.team-analysis-modal .report-content h2 {
font-size: 1.3rem;
}
.team-analysis-modal .report-content h3 {
font-size: 1.1rem;
}
.team-analysis-modal .report-content strong {
font-weight: bold;
}
.team-analysis-modal .report-content em {
font-style: italic;
}
.team-analysis-modal .no-report {
text-align: center;
color: #718096;
font-style: italic;
}
</style> </style>

1
my-vue-app/src/views/topOne/components/QualityCalls.vue
View File

@@ -222,7 +222,6 @@ const recordings = computed(() => {
if (!props.qualityCalls ) { if (!props.qualityCalls ) {
return staticRecordings.value; return staticRecordings.value;
} }
console.log(66666,props.qualityCalls);
const recordingsList = []; const recordingsList = [];
props.qualityCalls.forEach((record, index) => { props.qualityCalls.forEach((record, index) => {
recordingsList.push({ recordingsList.push({

20
my-vue-app/src/views/topOne/topone.vue
View File

@@ -525,7 +525,6 @@ async function getConversionComparison(data) {
const res = await getCompanyConversionRateVsLast(params); const res = await getCompanyConversionRateVsLast(params);
return res.data; return res.data;
}); });
console.log(111111,result);
conversionComparison.value = result; conversionComparison.value = result;
} catch (error) { } catch (error) {
console.error("获取转化对比失败:", error); console.error("获取转化对比失败:", error);
@@ -678,7 +677,6 @@ const params={
return res.data; return res.data;
}); });
excellentRecord.value = result; excellentRecord.value = result;
console.log(111111,result);
} catch (error) { } catch (error) {
console.error("获取优秀录音失败:", error); console.error("获取优秀录音失败:", error);
} }
@@ -687,15 +685,15 @@ onMounted(async() => {
// 页面初始化逻辑 // 页面初始化逻辑
console.log('页面初始化，开始加载数据...'); console.log('页面初始化，开始加载数据...');
await getRealTimeProgress() getRealTimeProgress()
await getTotalDeals() getTotalDeals()
await getConversionComparison('month') getConversionComparison('month')
await getCompanySalesRank('red') getCompanySalesRank('red')
await getCustomerTypeRatio('child_education') getCustomerTypeRatio('child_education')
await getCustomerUrgency() getCustomerUrgency()
await CusotomGetLevelTree() CusotomGetLevelTree()
await getDetailData() getDetailData()
await CenterExcellentRecord() CenterExcellentRecord()
// 输出缓存状态信息 // 输出缓存状态信息
const cacheInfo = getCacheInfo(); const cacheInfo = getCacheInfo();