新增对话列表组件，修复时间线组件布局bug
This commit is contained in:
parent
e4b3a91dd2
commit
71c7186853
|
|
@ -56,6 +56,7 @@ declare module 'vue' {
|
|||
MessageBoxDemo: typeof import('./components/MessageBoxDemo.vue')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
SubtitleList: typeof import('./components/hazard_inspect/SubtitleList.vue')['default']
|
||||
Timeline: typeof import('./components/hazard_inspect/timeline/timeline.vue')['default']
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,103 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* 项目列表展示组件
|
||||
* 接收两个参数：title（字符串）和data（字符串数组）
|
||||
*/
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: '对话列表',
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
})
|
||||
|
||||
// 定义输出事件
|
||||
const emit = defineEmits(['click'])
|
||||
|
||||
// 点击项，向外抛出数据
|
||||
function handleItemClick(item: string, index: number) {
|
||||
emit('click', item, index)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="hazard-list-container">
|
||||
<!-- 标题栏 -->
|
||||
<el-row class="p-3">
|
||||
<!-- <el-text tag="b"> -->
|
||||
<el-text type="info" size="small">
|
||||
{{ props.title }} (共 {{ props.data.length }} 条)
|
||||
</el-text>
|
||||
</el-row>
|
||||
|
||||
<!-- 滚动列表区域 -->
|
||||
<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 string, index)">
|
||||
<div class="flex flex-col items-start">
|
||||
<div class="flex flex-row gap-2">
|
||||
<el-text class="item-text" type="info" size="small">
|
||||
{{ (item as any[])[1] }}
|
||||
</el-text>
|
||||
<el-text class="item-text" type="info" size="small">
|
||||
{{ (item as any[])[2] }}
|
||||
</el-text>
|
||||
</div>
|
||||
<el-text class="item-text">
|
||||
{{ (item as any[])[3] }}
|
||||
</el-text>
|
||||
</div>
|
||||
</el-button>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.hazard-list-container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 纵向布局 */
|
||||
.message-btn {
|
||||
width: 100%;
|
||||
padding: 4px 0.75rem;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
height: auto;
|
||||
min-height: 28px;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.item-text {
|
||||
word-break: break-word;
|
||||
white-space: normal;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.message-title {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
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; /* 消除行高留白 */
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,7 +2,6 @@
|
|||
height: 33.333%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-top: 1px solid var(--ep-border-color);
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ interface HazardItem {
|
|||
|
||||
interface DataFormat {
|
||||
隐患列表: [number, string][]
|
||||
// 隐患列表: [number, string, string][]
|
||||
对话列表: [number, string, string, string][]
|
||||
隐患范围字典: Record<string, { ranges: number[], level: number, tip: string }>
|
||||
隐患数据: HazardItem[]
|
||||
}
|
||||
|
|
@ -63,6 +63,7 @@ const data = ref<DataFormat>({
|
|||
隐患列表: [],
|
||||
隐患范围字典: {},
|
||||
隐患数据: [],
|
||||
对话列表: [],
|
||||
})
|
||||
// const data = ref({
|
||||
// 隐患列表: ['隐患1', '隐患2'],
|
||||
|
|
@ -174,6 +175,20 @@ function getData() {
|
|||
整改建议: obj.recommend || '',
|
||||
}
|
||||
})
|
||||
|
||||
// 模拟数据
|
||||
data.value.对话列表 = [
|
||||
[0, '00:00', '客户', '当前对话仅为测试数据'],
|
||||
[3, '00:03', '客户', '你好'],
|
||||
[5.2, '00:05', '专家', '你好，有什么我可以帮助你的吗？'],
|
||||
[8, '00:08', '客户', '我想知道我的隐患等级'],
|
||||
[10.5, '00:10', '专家', '你的隐患等级是一般隐患'],
|
||||
[12.3, '00:12', '客户', '我需要一个整改建议'],
|
||||
[20.1, '00:20', '专家', '好的，我会尽快给你一个整改建议'],
|
||||
[16.5, '00:16', '客户', '我需要一个整改建议'],
|
||||
[18.2, '00:28', '专家', '好的，我会尽快给你一个整改建议'],
|
||||
[18.2, '00:30', '专家', '好的，我会尽快给你一个整改建议'],
|
||||
]
|
||||
}
|
||||
|
||||
// 点击隐患列表项，更新选中隐患
|
||||
|
|
@ -242,22 +257,31 @@ onMounted(() => {
|
|||
// 从路由参数中获取数据
|
||||
const vidFile = router.currentRoute.value.query.vid_file as string
|
||||
if (vidFile) {
|
||||
runApi('/get_full_vid_path', {
|
||||
vid_file: vidFile,
|
||||
}).then((res) => {
|
||||
// console.log('接口调用成功，返回数据：', res)
|
||||
vidUrl.value = (res as string[])[0]
|
||||
// 调用接口获取完整视频路径
|
||||
// runApi('/get_full_vid_path', {
|
||||
// vid_file: vidFile,
|
||||
// }).then((res) => {
|
||||
// // console.log('接口调用成功，返回数据：', res)
|
||||
// vidUrl.value = (res as string[])[0]
|
||||
|
||||
// 截取文件名
|
||||
const fileName = vidUrl.value.split('\\').pop() || ''
|
||||
// 去掉文件扩展名
|
||||
const fileNameNoExt = fileName.split('.')[0]
|
||||
// 文件扩展名
|
||||
const fileExt = fileName.split('.')[1]
|
||||
// 临时拼接视频路径
|
||||
vidUrl.value = `http://localhost:8086/${fileNameNoExt}_h264.${fileExt}`
|
||||
})
|
||||
// // 截取文件名
|
||||
// const fileName = vidUrl.value.split('\\').pop() || ''
|
||||
// // 去掉文件扩展名
|
||||
// const fileNameNoExt = fileName.split('.')[0]
|
||||
// // 文件扩展名
|
||||
// const fileExt = fileName.split('.')[1]
|
||||
// // 临时拼接视频路径
|
||||
// vidUrl.value = `http://localhost:8086/${fileNameNoExt}_h264.${fileExt}`
|
||||
// })
|
||||
|
||||
// 临时拼接视频路径
|
||||
// 去掉文件扩展名
|
||||
const fileNameNoExt = vidFile.split('.')[0]
|
||||
// 文件扩展名
|
||||
const fileExt = vidFile.split('.')[1]
|
||||
vidUrl.value = `http://localhost:8086/${fileNameNoExt}_h264.${fileExt}`
|
||||
|
||||
// 调用接口获取隐患数据
|
||||
// runApi('/run', {
|
||||
// vid_file: vidFile,
|
||||
// run_sam3: false,
|
||||
|
|
@ -270,6 +294,7 @@ onMounted(() => {
|
|||
// console.log('接口调用成功，返回数据：', JSON.stringify(res))
|
||||
// })
|
||||
|
||||
// 模拟数据
|
||||
resultData.value = {
|
||||
class_list: [
|
||||
'消火栓',
|
||||
|
|
@ -435,7 +460,7 @@ onMounted(() => {
|
|||
<el-aside width="200px" style="border-right: 1px solid var(--ep-border-color);">
|
||||
<!-- <el-row class="flex flex-col" style="border-bottom: 1px solid var(--ep-border-color);"> -->
|
||||
<el-row class="flex flex-col">
|
||||
<ItemList title="隐患列表" :data="data.隐患列表" @click="handleHazardClick" />
|
||||
<ItemList title="隐患" :data="data.隐患列表" @click="handleHazardClick" />
|
||||
</el-row>
|
||||
<!-- <el-row style="flex: 1; overflow-y: auto;">
|
||||
<ItemList title="物体列表" :data="data.物体列表" />
|
||||
|
|
@ -465,7 +490,7 @@ onMounted(() => {
|
|||
/>
|
||||
</el-footer>
|
||||
</el-container>
|
||||
<el-aside width="300px">
|
||||
<el-aside style="width: 300px;">
|
||||
<!-- <el-row style="border-bottom: 1px solid var(--ep-border-color);"> -->
|
||||
<el-row class="px-3 py-2">
|
||||
<el-col v-if="selectedHazard >= 0">
|
||||
|
|
@ -504,6 +529,9 @@ onMounted(() => {
|
|||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="flex: 1; overflow-y: auto; border-top: 1px solid var(--ep-border-color);">
|
||||
<SubtitleList title="对话" :data="data.对话列表" />
|
||||
</el-row>
|
||||
<!-- <el-row class="px-1 py-1">
|
||||
<el-button>
|
||||
查看报告
|
||||
|
|
|
|||
Loading…
Reference in New Issue