新增对话列表组件，修复时间线组件布局bug

src/components.d.ts

@@ -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']
   }
 }

src/components/hazard_inspect/SubtitleList.vue

@@ -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>

src/components/hazard_inspect/timeline/timeline.css

@@ -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;
 }
 

src/pages/nav/hazardCheck/HazardCheckResult.vue

@@ -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,
+    // runApi('/get_full_vid_path', {
-    }).then((res) => {
+    //   vid_file: vidFile,
-      // console.log('接口调用成功，返回数据：', res)
+    // }).then((res) => {
-      vidUrl.value = (res as string[])[0]
+    //   // console.log('接口调用成功，返回数据：', res)
+    //   vidUrl.value = (res as string[])[0]
 
-      // 截取文件名
+    //   // 截取文件名
-      const fileName = vidUrl.value.split('\\').pop() || ''
+    //   const fileName = vidUrl.value.split('\\').pop() || ''
-      // 去掉文件扩展名
+    //   // 去掉文件扩展名
-      const fileNameNoExt = fileName.split('.')[0]
+    //   const fileNameNoExt = fileName.split('.')[0]
-      // 文件扩展名
+    //   // 文件扩展名
-      const fileExt = fileName.split('.')[1]
+    //   const fileExt = fileName.split('.')[1]
-      // 临时拼接视频路径
+    //   // 临时拼接视频路径
-      vidUrl.value = `http://localhost:8086/${fileNameNoExt}_h264.${fileExt}`
+    //   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>
             查看报告