重构:优化代码结构
This commit is contained in:
parent
b477db4bd2
commit
709d9fe796
|
|
@ -18,8 +18,8 @@ const props = defineProps({
|
|||
const emit = defineEmits(['click'])
|
||||
|
||||
// 点击项,向外抛出数据
|
||||
function handleItemClick(item: string, index: number) {
|
||||
emit('click', item, index)
|
||||
function handleItemClick(index: number) {
|
||||
emit('click', index)
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -38,7 +38,7 @@ function handleItemClick(item: string, index: number) {
|
|||
<el-row v-for="(item, index) in props.data" :key="index">
|
||||
<!-- 无物体类型标签 隐患等级体颜色显示在编号标签上 -->
|
||||
<!-- 0为隐患等级 1为隐患描述 -->
|
||||
<el-button class="item-btn" text @click="handleItemClick(item as string, index)">
|
||||
<el-button class="item-btn" text @click="handleItemClick(index)">
|
||||
<el-tag v-if="(item as number[])[0] === 0" type="primary" size="small">
|
||||
{{ index + 1 }}
|
||||
</el-tag>
|
||||
|
|
|
|||
|
|
@ -131,9 +131,9 @@ const totalFrames = computed(() => {
|
|||
return maxEndFrame + 100
|
||||
})
|
||||
|
||||
function handleTimelineHazardClick(hazardId: string) {
|
||||
selectedHazard.value = Number(hazardId)
|
||||
handleJumpToHazard(Number(hazardId))
|
||||
function handleTimelineHazardClick(hazardId: number) {
|
||||
selectedHazard.value = hazardId
|
||||
handleJumpToHazard(hazardId)
|
||||
}
|
||||
|
||||
function handleFrameChange(frame: number) {
|
||||
|
|
@ -209,7 +209,7 @@ function getData() {
|
|||
}
|
||||
|
||||
// 点击隐患列表项,更新选中隐患
|
||||
function handleHazardClick(item: string, index: number) {
|
||||
function handleHazardClick(index: number) {
|
||||
selectedHazard.value = index
|
||||
|
||||
handleJumpToHazard(selectedHazard.value)
|
||||
|
|
@ -221,10 +221,10 @@ function handleJumpToHazard(index: number) {
|
|||
// 实现跳转到指定时间点的逻辑
|
||||
// console.log(`跳转到时间点: ${seconds}`)
|
||||
|
||||
handleJumpToTimePoint(seconds)
|
||||
handleJumpToTimePoint(seconds, 'pause')
|
||||
}
|
||||
|
||||
function handleJumpToTimePoint(seconds: number) {
|
||||
function handleJumpToTimePoint(seconds: number, action: string = 'play') {
|
||||
// 校验:必须是数字且大于等于0
|
||||
if (Number.isNaN(seconds) || seconds < 0)
|
||||
return
|
||||
|
|
@ -236,23 +236,10 @@ function handleJumpToTimePoint(seconds: number) {
|
|||
// 直接设置 currentTime 实现跳转
|
||||
videoEl.currentTime = seconds
|
||||
currentFrame.value = Math.floor(seconds * 30)
|
||||
|
||||
// 跳转后自动暂停
|
||||
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
|
||||
currentFrame.value = Math.floor(seconds * 30)
|
||||
if (action === 'play')
|
||||
videoEl.play()
|
||||
else if (action === 'pause')
|
||||
videoEl.pause()
|
||||
}
|
||||
|
||||
function getAudioRecData(res: any) {
|
||||
|
|
@ -373,8 +360,7 @@ onMounted(async () => {
|
|||
getData()
|
||||
|
||||
if (data.value.隐患列表.length > 0) {
|
||||
selectedHazard.value = 0
|
||||
handleJumpToHazard(0)
|
||||
handleHazardClick(0)
|
||||
}
|
||||
})
|
||||
|
||||
|
|
@ -432,7 +418,7 @@ onMounted(async () => {
|
|||
:current-frame="currentFrame"
|
||||
:total-frames="totalFrames"
|
||||
:hazard-ranges="data.隐患范围字典 as Record<string, { ranges: number[]; level: number; tip: string }>"
|
||||
@hazard-click="(id: number) => handleTimelineHazardClick(String(id))"
|
||||
@hazard-click="(id: number) => handleTimelineHazardClick(id)"
|
||||
@frame-change="handleFrameChange"
|
||||
/>
|
||||
</el-footer>
|
||||
|
|
@ -483,8 +469,8 @@ onMounted(async () => {
|
|||
:data="data.对话列表"
|
||||
:current-time="videoCurrentTime"
|
||||
:keywords="keywords"
|
||||
@click="(item: any[]) => handleJumpToTimePoint(Number(item[0]))"
|
||||
@play="(item: any[]) => handlePlayAndSeek(item)"
|
||||
@click="(item: any[]) => handleJumpToTimePoint(Number(item[0]), 'pause')"
|
||||
@play="(item: any[]) => handleJumpToTimePoint(Number(item[0]), 'play')"
|
||||
/>
|
||||
</el-row>
|
||||
<!-- <el-row class="px-1 py-1">
|
||||
|
|
|
|||
Loading…
Reference in New Issue