feat(通话记录): 实现真实通话记录展示及录音转录功能

- 在sale.vue中添加调试日志以跟踪API返回数据
- 修改RawDataCards组件以显示真实通话记录数据
- 实现录音文件转录功能,通过ASR API获取通话原文
- 调整通话记录卡片UI以显示用户、客户信息和录音文件数量
This commit is contained in:
2025-08-19 22:06:34 +08:00
parent 2b75f1b568
commit 5973039d4a
2 changed files with 73 additions and 35 deletions

View File

@@ -83,15 +83,15 @@
<!-- 通话录音内容 --> <!-- 通话录音内容 -->
<div v-if="activeTab === 'call'" class="call-content"> <div v-if="activeTab === 'call'" class="call-content">
<div class="content-header"> <div class="content-header">
<span class="content-count"> {{ callData.count }} 次通话</span> <span class="content-count"> {{ callRecords.length }} 次通话</span>
<span class="content-time">总时长: {{ callData.totalDuration }}</span> <span class="content-time">通话记录</span>
</div> </div>
<div class="call-list"> <div class="call-list">
<div v-for="(call, index) in callRecords" :key="index" class="call-item"> <div v-for="(call, index) in callRecords" :key="index" class="call-item">
<div class="call-header"> <div class="call-header">
<span class="call-type">{{ call.type }}</span> <span class="call-type">用户: {{ call.user_name }}</span>
<span class="call-duration">{{ call.duration }}</span> <span class="call-duration">客户: {{ call.customer_name }}</span>
<span class="call-time">{{ call.time }}</span> <span class="call-time">录音文件: {{ call.record_file_addr_list?.length || 0 }} </span>
</div> </div>
<div class="call-actions"> <div class="call-actions">
<button class="action-btn download-btn" @click="downloadRecording(call)"> <button class="action-btn download-btn" @click="downloadRecording(call)">
@@ -130,6 +130,10 @@ const props = defineProps({
chatInfo: { chatInfo: {
type: Object, type: Object,
default: () => ({}) default: () => ({})
},
callInfo: {
type: Object,
default: () => ({})
} }
}) })
@@ -212,32 +216,29 @@ const callData = computed(() => ({
// 通话记录列表 // 通话记录列表
const callRecords = computed(() => { const callRecords = computed(() => {
return [ console.log('RawDataCards - props.callInfo:', props.callInfo)
{
type: '呼出', // 从 props.callInfo 中获取真实的通话记录数据
duration: '12分钟', if (props.callInfo && Array.isArray(props.callInfo)) {
time: '今天 10:30', console.log('RawDataCards - callInfo is array:', props.callInfo)
summary: '初次沟通了解客户基本需求。客户对数学课程比较感兴趣孩子8岁希望提高数学成绩。约定发送详细资料。' return props.callInfo
}, }
{
type: '呼入', // 如果 callInfo 是单个对象API返回的数据格式
duration: '8分钟', if (props.callInfo && typeof props.callInfo === 'object' && props.callInfo.user_name) {
time: '昨天 16:45', console.log('RawDataCards - callInfo is single object:', props.callInfo)
summary: '客户主动来电咨询价格和上课时间。解答了关于师资力量和教学方法的问题。客户表示需要和家人商量。' return [props.callInfo] // 将单个对象包装成数组
}, }
{
type: '呼出', // 如果 callInfo 是对象且包含数据数组
duration: '15分钟', if (props.callInfo && props.callInfo.data && Array.isArray(props.callInfo.data)) {
time: '3天前 14:20', console.log('RawDataCards - callInfo.data is array:', props.callInfo.data)
summary: '跟进客户需求,详细介绍了课程体系和教学理念。客户对一对一辅导很感兴趣,但对价格有些犹豫。' return props.callInfo.data
}, }
{
type: '呼出', console.log('RawDataCards - no valid call data found, returning empty array')
duration: '6分钟', // 如果没有数据,返回空数组
time: '5天前 11:15', return []
summary: '首次电话联系,简单介绍了公司和课程概况。客户表示有兴趣,约定后续详细沟通。'
}
]
}) })
// 录音下载方法 // 录音下载方法
@@ -270,11 +271,46 @@ const downloadRecording = (call) => {
} }
// 查看原文方法 // 查看原文方法
const viewTranscript = (call) => { const viewTranscript = async (call) => {
// 这里可以根据实际需求实现查看原文逻辑
console.log('查看原文:', call) console.log('查看原文:', call)
// 示例:打开模态框显示通话原文
alert(`查看 ${call.time} 的通话原文:\n\n${call.summary}`) // 检查是否有录音文件地址
if (call.record_file_addr_list && call.record_file_addr_list.length > 0) {
const audioFileUrl = call.record_file_addr_list[0]
try {
// 创建FormData对象
const formData = new FormData()
formData.append('audio_file', audioFileUrl)
// 发送POST请求到ASR API
const response = await fetch('http://192.168.3.104:8000/api/asr/sync?priority=10', {
method: 'POST',
body: formData
})
if (response.ok) {
const result = await response.json()
console.log('ASR转录结果:', result)
// 显示转录结果
if (result.text || result.transcript) {
const transcriptText = result.text || result.transcript
alert(`通话原文:\n\n${transcriptText}`)
} else {
alert('转录完成,但未获取到文字内容')
}
} else {
console.error('ASR请求失败:', response.status, response.statusText)
alert('获取通话原文失败,请稍后重试')
}
} catch (error) {
console.error('ASR请求错误:', error)
alert('网络错误,无法获取通话原文')
}
} else {
alert('该通话记录暂无录音文件')
}
} }
</script> </script>

View File

@@ -513,6 +513,8 @@ async function getCustomerCall() {
const res = await getCustomerCallInfo(params) const res = await getCustomerCallInfo(params)
if(res.code === 200) { if(res.code === 200) {
callRecords.value = res.data callRecords.value = res.data
console.log('Call Records Data from API:', res.data)
console.log('callRecords.value after assignment:', callRecords.value)
/** /**
* "data": { * "data": {
"user_name": "常琳", "user_name": "常琳",