refactor(topOne): 优化优秀录音展示逻辑和样式

- 将excellentRecord和qualityCalls类型从Object改为Array以简化数据处理
- 添加录音分数显示并设置前三名特殊样式
- 调整录音列表的padding和布局
- 移除不必要的overflow-y属性
This commit is contained in:
2025-10-22 18:03:59 +08:00
parent 288a525537
commit 2979e7e216
2 changed files with 49 additions and 17 deletions

View File

@@ -18,6 +18,7 @@
:class="{ active: selectedRecording === index }"
@click="selectRecording(index)"
>
<span class="recording-index">{{ recording.score}}</span>
<div class="recording-info">
<div class="recording-name" :title="recording.name">{{ recording.name.length > 10 ? recording.name.substring(0, 10) + '...' : recording.name }}</div>
<div class="recording-meta">
@@ -172,8 +173,8 @@ import MarkdownIt from 'markdown-it'
// Props定义
const props = defineProps({
qualityCalls: {
type: Object,
default: () => ({})
type: Array,
default: () => []
}
})
@@ -221,25 +222,24 @@ const recordings = computed(() => {
if (!props.qualityCalls ) {
return staticRecordings.value;
}
console.log(66666,props.qualityCalls);
const recordingsList = [];
Object.keys(props.qualityCalls).forEach(userName => {
props.qualityCalls[userName].forEach((record, index) => {
props.qualityCalls.forEach((record, index) => {
recordingsList.push({
id: recordingsList.length + 1,
name: record.obj_file_name ? record.obj_file_name.split('/').pop() : `${record.sale_name}-录音-${index + 1}`,
name: record.record_name ? record.record_name : `${record.sale_name}-录音-${index + 1}`,
date: new Date().toISOString().split('T')[0],
url: record.obj_file_name,
transcription: record.context || null,
score: record.score,
sop: record.sop,
sale_name: record.sale_name,
url: record.record_file_addr,
transcription: record.record_context || null,
score: record.record_score,
sop: record.record_report,
sale_name: record.record_name,
size: 2048576, // 默认文件大小 2MB
uploadTime: new Date().toLocaleDateString('zh-CN')
});
uploadTime: record.created_at,
});
});
return recordingsList;
})
@@ -512,7 +512,7 @@ const downloadRecording = (index) => {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 20px 0;
padding: 10px 20px 0;
border-bottom: 1px solid #ebeef5;
}
@@ -549,7 +549,7 @@ const downloadRecording = (index) => {
}
.chart-content {
padding: 20px;
padding: 10px;
}
.recording-section {
@@ -562,7 +562,6 @@ const downloadRecording = (index) => {
.recording-list {
margin-bottom: 20px;
max-height: 400px;
overflow-y: auto;
}
.recording-item {
@@ -602,6 +601,39 @@ const downloadRecording = (index) => {
display: inline-block;
}
.recording-index {
/* 基础分数样式 */
padding: 2px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
background-color: #e9ecef;
color: #495057;
margin-right: 10px;
}
/* 第一名样式 */
.recording-item:first-child .recording-index {
background: linear-gradient(135deg, #FFD700, #FFA500);
color: #fff;
box-shadow: 0 2px 4px rgba(255, 215, 0, 0.3);
}
/* 第二名样式 */
.recording-item:nth-child(2) .recording-index {
background: linear-gradient(135deg, #C0C0C0, #A9A9A9);
color: #fff;
box-shadow: 0 2px 4px rgba(192, 192, 192, 0.3);
}
/* 第三名样式 */
.recording-item:nth-child(3) .recording-index {
background: linear-gradient(135deg, #CD7F32, #A0522D);
color: #fff;
box-shadow: 0 2px 4px rgba(205, 127, 50, 0.3);
}
.recording-meta {
display: flex;
gap: 12px;

View File

@@ -665,7 +665,7 @@ const handleFilterChange = (filterParams) => {
getDetailData(filterParams)
}
// 优秀录音
const excellentRecord = ref({});
const excellentRecord = ref([]);
async function CenterExcellentRecord() {
const params={
user_level:userStore.userInfo.user_level.toString(),