新增:对话列表每个对话后面添加两个按钮,**跳转**,以及**跳转并播放**

This commit is contained in:
yueliuli 2026-05-07 11:35:11 +08:00
parent da991e18b4
commit 1559524338
2 changed files with 80 additions and 17 deletions

View File

@ -1,4 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { CaretRight, Location } from '@element-plus/icons-vue'
/** /**
* 项目列表展示组件 * 项目列表展示组件
* 接收两个参数title字符串和data字符串数组 * 接收两个参数title字符串和data字符串数组
@ -14,13 +15,16 @@ const props = defineProps({
}, },
}) })
// const emit = defineEmits(['click', 'play'])
const emit = defineEmits(['click'])
//
function handleItemClick(item: any[], index: number) { function handleItemClick(item: any[], index: number) {
emit('click', item, index) emit('click', item, index)
} }
function handlePlayClick(e: Event, item: any[], index: number) {
e.stopPropagation()
emit('play', item, index)
}
</script> </script>
<template> <template>
@ -36,10 +40,8 @@ function handleItemClick(item: any[], index: number) {
<!-- 滚动列表区域 --> <!-- 滚动列表区域 -->
<el-row style="flex: 1; overflow-y: auto;"> <el-row style="flex: 1; overflow-y: auto;">
<el-col> <el-col>
<el-row v-for="(item, index) in props.data" :key="index"> <el-row v-for="(item, index) in props.data" :key="index" class="message-item">
<!-- 无物体类型标签 隐患等级体颜色显示在编号标签上 --> <div class="message-content" @click="handleItemClick(item as any[], index)">
<!-- 0为隐患等级 1为隐患描述 -->
<el-button class="message-btn" text @click="handleItemClick(item as any[], index)">
<div class="flex flex-col items-start"> <div class="flex flex-col items-start">
<div class="flex flex-row gap-2"> <div class="flex flex-row gap-2">
<el-text class="item-text" type="info" size="small"> <el-text class="item-text" type="info" size="small">
@ -53,7 +55,29 @@ function handleItemClick(item: any[], index: number) {
{{ (item as any[])[3] }} {{ (item as any[])[3] }}
</el-text> </el-text>
</div> </div>
</el-button> </div>
<div class="hover-actions">
<el-tooltip content="定位" placement="top" effect="light">
<el-button
type="default"
size="small"
circle
@click="handleItemClick(item as any[], index)"
>
<el-icon><Location /></el-icon>
</el-button>
</el-tooltip>
<el-tooltip content="播放" placement="top" effect="light">
<el-button
type="default"
size="small"
circle
@click="handlePlayClick($event, item as any[], index)"
>
<el-icon><CaretRight /></el-icon>
</el-button>
</el-tooltip>
</div>
</el-row> </el-row>
</el-col> </el-col>
</el-row> </el-row>
@ -66,7 +90,34 @@ function handleItemClick(item: any[], index: number) {
width: 100%; width: 100%;
} }
/* 纵向布局 */ .message-item {
position: relative;
display: flex;
align-items: flex-start;
padding: 4px 0.75rem;
}
.message-content {
flex: 1;
cursor: pointer;
}
.hover-actions {
position: absolute;
right: 8px;
top: 50%;
height: 100%;
transform: translateY(-50%);
display: none;
padding: 4px 8px;
/* background: linear-gradient(to right, rgba(144, 147, 153, 0), var(--ep-color-info)); */
border-radius: 4px;
}
.message-item:hover .hover-actions {
display: flex;
}
.message-btn { .message-btn {
width: 100%; width: 100%;
padding: 4px 0.75rem; padding: 4px 0.75rem;
@ -90,14 +141,8 @@ function handleItemClick(item: any[], index: number) {
gap: 4px; gap: 4px;
} }
.message-content {
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.item-text.ep-text { .item-text.ep-text {
align-self: start; align-self: start;
line-height: 1.5; /* 消除行高留白 */ line-height: 1.5;
} }
</style> </style>

View File

@ -234,6 +234,19 @@ function handleJumpToTimePoint(seconds: number) {
videoEl.pause() videoEl.pause()
} }
function handlePlayAndSeek(item: any[]) {
const seconds = item[0]
if (Number.isNaN(seconds) || seconds < 0)
return
const videoEl = videoRef.value
if (!videoEl)
return
videoEl.currentTime = seconds
videoEl.play()
}
function getAudioRecData(res: any) { function getAudioRecData(res: any) {
if (!res) { if (!res) {
console.error('音频识别结果为空') console.error('音频识别结果为空')
@ -445,7 +458,12 @@ onMounted(() => {
</el-col> </el-col>
</el-row> </el-row>
<el-row v-if="data.对话列表.length > 0" style="flex: 1; overflow-y: auto; border-top: 1px solid var(--ep-border-color);"> <el-row v-if="data.对话列表.length > 0" style="flex: 1; overflow-y: auto; border-top: 1px solid var(--ep-border-color);">
<SubtitleList title="对话" :data="data.对话列表" @click="(item: any[]) => handleJumpToTimePoint(Number(item[0]))" /> <SubtitleList
title="对话"
:data="data.对话列表"
@click="(item: any[]) => handleJumpToTimePoint(Number(item[0]))"
@play="(item: any[]) => handlePlayAndSeek(item)"
/>
</el-row> </el-row>
<!-- <el-row class="px-1 py-1"> <!-- <el-row class="px-1 py-1">
<el-button> <el-button>