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 class="content-header">
<span class="content-count"> {{ callData.count }} 次通话</span>
<span class="content-time">总时长: {{ callData.totalDuration }}</span>
<span class="content-count"> {{ callRecords.length }} 次通话</span>
<span class="content-time">通话记录</span>
</div>
<div class="call-list">
<div v-for="(call, index) in callRecords" :key="index" class="call-item">
<div class="call-header">
<span class="call-type">{{ call.type }}</span>
<span class="call-duration">{{ call.duration }}</span>
<span class="call-time">{{ call.time }}</span>
<span class="call-type">用户: {{ call.user_name }}</span>
<span class="call-duration">客户: {{ call.customer_name }}</span>
<span class="call-time">录音文件: {{ call.record_file_addr_list?.length || 0 }} </span>
</div>
<div class="call-actions">
<button class="action-btn download-btn" @click="downloadRecording(call)">
@@ -130,6 +130,10 @@ const props = defineProps({
chatInfo: {
type: Object,
default: () => ({})
},
callInfo: {
type: Object,
default: () => ({})
}
})
@@ -212,32 +216,29 @@ const callData = computed(() => ({
// 通话记录列表
const callRecords = computed(() => {
return [
{
type: '呼出',
duration: '12分钟',
time: '今天 10:30',
summary: '初次沟通了解客户基本需求。客户对数学课程比较感兴趣孩子8岁希望提高数学成绩。约定发送详细资料。'
},
{
type: '呼入',
duration: '8分钟',
time: '昨天 16:45',
summary: '客户主动来电咨询价格和上课时间。解答了关于师资力量和教学方法的问题。客户表示需要和家人商量。'
},
{
type: '呼出',
duration: '15分钟',
time: '3天前 14:20',
summary: '跟进客户需求,详细介绍了课程体系和教学理念。客户对一对一辅导很感兴趣,但对价格有些犹豫。'
},
{
type: '呼出',
duration: '6分钟',
time: '5天前 11:15',
summary: '首次电话联系,简单介绍了公司和课程概况。客户表示有兴趣,约定后续详细沟通。'
console.log('RawDataCards - props.callInfo:', props.callInfo)
// 从 props.callInfo 中获取真实的通话记录数据
if (props.callInfo && Array.isArray(props.callInfo)) {
console.log('RawDataCards - callInfo is array:', props.callInfo)
return props.callInfo
}
]
// 如果 callInfo 是单个对象API返回的数据格式
if (props.callInfo && typeof props.callInfo === 'object' && props.callInfo.user_name) {
console.log('RawDataCards - callInfo is single object:', props.callInfo)
return [props.callInfo] // 将单个对象包装成数组
}
// 如果 callInfo 是对象且包含数据数组
if (props.callInfo && props.callInfo.data && Array.isArray(props.callInfo.data)) {
console.log('RawDataCards - callInfo.data is array:', props.callInfo.data)
return props.callInfo.data
}
console.log('RawDataCards - no valid call data found, returning empty array')
// 如果没有数据,返回空数组
return []
})
// 录音下载方法
@@ -270,11 +271,46 @@ const downloadRecording = (call) => {
}
// 查看原文方法
const viewTranscript = (call) => {
// 这里可以根据实际需求实现查看原文逻辑
const viewTranscript = async (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>

View File

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