新增:对话列表每个对话后面添加两个按钮,**跳转**,以及**跳转并播放**
This commit is contained in:
parent
da991e18b4
commit
1559524338
|
|
@ -1,4 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { CaretRight, Location } from '@element-plus/icons-vue'
|
||||
/**
|
||||
* 项目列表展示组件
|
||||
* 接收两个参数:title(字符串)和data(字符串数组)
|
||||
|
|
@ -14,13 +15,16 @@ const props = defineProps({
|
|||
},
|
||||
})
|
||||
|
||||
// 定义输出事件
|
||||
const emit = defineEmits(['click'])
|
||||
const emit = defineEmits(['click', 'play'])
|
||||
|
||||
// 点击项,向外抛出数据
|
||||
function handleItemClick(item: any[], index: number) {
|
||||
emit('click', item, index)
|
||||
}
|
||||
|
||||
function handlePlayClick(e: Event, item: any[], index: number) {
|
||||
e.stopPropagation()
|
||||
emit('play', item, index)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -36,10 +40,8 @@ function handleItemClick(item: any[], index: number) {
|
|||
<!-- 滚动列表区域 -->
|
||||
<el-row style="flex: 1; overflow-y: auto;">
|
||||
<el-col>
|
||||
<el-row v-for="(item, index) in props.data" :key="index">
|
||||
<!-- 无物体类型标签 隐患等级体颜色显示在编号标签上 -->
|
||||
<!-- 0为隐患等级 1为隐患描述 -->
|
||||
<el-button class="message-btn" text @click="handleItemClick(item as any[], 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)">
|
||||
<div class="flex flex-col items-start">
|
||||
<div class="flex flex-row gap-2">
|
||||
<el-text class="item-text" type="info" size="small">
|
||||
|
|
@ -53,7 +55,29 @@ function handleItemClick(item: any[], index: number) {
|
|||
{{ (item as any[])[3] }}
|
||||
</el-text>
|
||||
</div>
|
||||
</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-col>
|
||||
</el-row>
|
||||
|
|
@ -66,7 +90,34 @@ function handleItemClick(item: any[], index: number) {
|
|||
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 {
|
||||
width: 100%;
|
||||
padding: 4px 0.75rem;
|
||||
|
|
@ -90,14 +141,8 @@ function handleItemClick(item: any[], index: number) {
|
|||
gap: 4px;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.item-text.ep-text {
|
||||
align-self: start;
|
||||
line-height: 1.5; /* 消除行高留白 */
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -234,6 +234,19 @@ function handleJumpToTimePoint(seconds: number) {
|
|||
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) {
|
||||
if (!res) {
|
||||
console.error('音频识别结果为空')
|
||||
|
|
@ -445,7 +458,12 @@ onMounted(() => {
|
|||
</el-col>
|
||||
</el-row>
|
||||
<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 class="px-1 py-1">
|
||||
<el-button>
|
||||
|
|
|
|||
Loading…
Reference in New Issue