新增:对话列表每个对话后面添加两个按钮,**跳转**,以及**跳转并播放**
This commit is contained in:
parent
da991e18b4
commit
1559524338
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue