From 4b20be4b7aac64d90094c2ea9a0fe4128b21eeab Mon Sep 17 00:00:00 2001
From: yueliuli <1628111725@qq.com>
Date: Wed, 22 Apr 2026 15:47:00 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9A=90=E6=82=A3=E5=88=97=E8=A1=A8=20-=20?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=89=A9=E4=BD=93=E6=A0=87=E7=AD=BE=20-=20?=
 =?UTF-8?q?=E6=A0=87=E7=AD=BE=E5=8F=AF=E5=8C=BA=E5=88=86=E9=9A=90=E6=82=A3?=
 =?UTF-8?q?=E7=AD=89=E7=BA=A7=20=E6=97=B6=E9=97=B4=E7=BA=BF=20-=20?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=97=B6=E9=97=B4=E7=BA=BF=E6=93=8D=E4=BD=9C?=
 =?UTF-8?q?=E8=AF=B4=E6=98=8E=20-=20=E9=9A=90=E6=82=A3=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E5=8F=AF=E5=8C=BA=E5=88=86=E9=9A=90=E6=82=A3=E7=AD=89=E7=BA=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components.d.ts                           |   1 +
 src/components/hazard_inspect/ItemList.vue    |   9 +-
 .../hazard_inspect/timeline/timeline.css      |  24 +-
 .../hazard_inspect/timeline/timeline.ts       |  76 +-
 .../hazard_inspect/timeline/timeline.vue      |  20 +-
 src/main.ts                                   |   8 +-
 src/pages/index.vue                           |   5 +-
 src/pages/nav/edit2.html                      | 864 ------------------
 .../nav/hazardCheck/HazardCheckResult.vue     |  78 +-
 src/pages/nav/hazardCheck/index.vue           |   2 +-
 10 files changed, 160 insertions(+), 927 deletions(-)
 delete mode 100644 src/pages/nav/edit2.html

diff --git a/src/components.d.ts b/src/components.d.ts
index 70b49c8..8419878 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -48,6 +48,7 @@ declare module 'vue' {
     ElTag: typeof import('element-plus/es')['ElTag']
     ElText: typeof import('element-plus/es')['ElText']
     ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
+    ElTooltip: typeof import('element-plus/es')['ElTooltip']
     HelloWorld: typeof import('./components/HelloWorld.vue')['default']
     ItemList: typeof import('./components/hazard_inspect/ItemList.vue')['default']
     Left_bar: typeof import('./components/hazard_inspect/left_bar.vue')['default']
diff --git a/src/components/hazard_inspect/ItemList.vue b/src/components/hazard_inspect/ItemList.vue
index a45bc8c..ac2be16 100644
--- a/src/components/hazard_inspect/ItemList.vue
+++ b/src/components/hazard_inspect/ItemList.vue
@@ -41,8 +41,15 @@ function handleItemClick(item: string, index: number) {
               {{ index + 1 }}
             </el-text>
             <div class="w-2" />
+            <el-tag v-if="(item as number[])[0] === 0" type="primary" size="small">
+              {{ (item as number[])[1] }}
+            </el-tag>
+            <el-tag v-else-if="(item as number[])[0] === 1" type="danger" size="small">
+              {{ (item as number[])[1] }}
+            </el-tag>
+            <div class="w-2" />
             <el-text class="item-text">
-              {{ item }}
+              {{ (item as number[])[2] }}
             </el-text>
           </el-button>
         </el-row>
diff --git a/src/components/hazard_inspect/timeline/timeline.css b/src/components/hazard_inspect/timeline/timeline.css
index f6b55fb..0e95490 100644
--- a/src/components/hazard_inspect/timeline/timeline.css
+++ b/src/components/hazard_inspect/timeline/timeline.css
@@ -15,9 +15,15 @@
   padding: 0 8px;
 }
 
+.timeline-title-container {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--ep-text-color-secondary);
+}
+
 .timeline-title {
   font-size: 12px;
-  color: var(--ep-text-color-secondary);
 }
 
 .timeline-zoom-controls {
@@ -168,17 +174,29 @@
   align-items: center;
   justify-content: center;
   border-radius: 4px;
-  background-color: var(--ep-color-primary);
+  /* background-color: var(--ep-color-primary); */
   color: #fff;
   font-size: 12px;
   cursor: pointer;
   transition: background-color 0.2s;
 }
 
-.hazard-block:hover {
+.hazard-block.primary {
+  background-color: var(--ep-color-primary);
+}
+
+.hazard-block.primary:hover {
   background-color: color-mix(in srgb, var(--ep-color-primary) 80%, transparent);
 }
 
+.hazard-block.danger {
+  background-color: var(--ep-color-danger);
+}
+
+.hazard-block.danger:hover {
+  background-color: color-mix(in srgb, var(--ep-color-danger) 80%, transparent);
+}
+
 .timeline-container::-webkit-scrollbar {
   width: 6px;
   height: 6px;
diff --git a/src/components/hazard_inspect/timeline/timeline.ts b/src/components/hazard_inspect/timeline/timeline.ts
index 17b959a..58720fb 100644
--- a/src/components/hazard_inspect/timeline/timeline.ts
+++ b/src/components/hazard_inspect/timeline/timeline.ts
@@ -1,10 +1,17 @@
+import type { Action } from 'element-plus'
 import type { ComputedRef, Ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { computed, nextTick, ref, watch } from 'vue'
 
+export interface HazardData {
+  ranges: number[]
+  level: number
+}
+
 export interface TimelineProps {
   currentFrame: number
   totalFrames: number
-  hazardRanges: Record<string, number[]>
+  hazardRanges: Record<string, HazardData>
 }
 
 export interface TimelineEmits {
@@ -23,14 +30,15 @@ export interface HazardItem {
   id: string
   start: number
   end: number
-  ranges: number[][]
+  ranges: number[]
 }
 
 export interface HazardRow {
   id: string
   start: number
   end: number
-  ranges: number[][]
+  ranges: number[]
+  level: number
 }
 
 export function useTimeline(
@@ -152,36 +160,44 @@ export function useTimeline(
   const trackRows: ComputedRef<HazardRow[][]> = computed(() => {
     const ranges = props.hazardRanges
     const sortedHazards = Object.entries(ranges)
-      .map(([id, frames]) => ({
-        id,
-        ranges: frames.reduce<number[][]>((acc, _, i) => {
-          if (i % 2 === 0) {
-            acc.push([frames[i], frames[i + 1]])
+      .map(([id, frames]) => {
+        // 处理旧数据结构：[start, end, level]
+        if (Array.isArray(frames)) {
+          return {
+            id,
+            level: frames[2] || 0, // 从第三个元素获取level
+            ranges: [[frames[0], frames[1]]], // 前两个元素是范围
           }
-          return acc
-        }, []),
-      }))
+        }
+        // 处理新数据结构：{ ranges: number[][], level: number }
+        return {
+          id,
+          level: frames.level || 0,
+          ranges: frames.ranges,
+        }
+      })
       .sort((a, b) => {
-        const aStart = a.ranges[0]?.[0] || 0
-        const bStart = b.ranges[0]?.[0] || 0
-        return aStart - bStart
+        const aStart = a.ranges[0] || 0
+        const bStart = b.ranges[0] || 0
+        return (aStart as number) - (bStart as number)
       })
 
     const rows: HazardRow[][] = []
     sortedHazards.forEach((hazard) => {
       let assigned = false
       for (let i = 0; i < rows.length; i++) {
-        const canPlace = hazard.ranges.every(([start, end]) => {
+        const canPlace = hazard.ranges.every((start) => {
           return rows[i].every((existing) => {
-            return end <= existing.start || start >= existing.end
+            return (start as number) <= (existing.start as number) || (start as number) >= (existing.end as number)
           })
         })
         if (canPlace) {
           rows[i].push({
             id: hazard.id,
-            start: hazard.ranges[0][0],
-            end: hazard.ranges[0][1],
-            ranges: hazard.ranges,
+            start: hazard.ranges[0] as number,
+            end: hazard.ranges[1] as number,
+            ranges: hazard.ranges.map(range => range as number),
+            level: hazard.level || 0,
           })
           assigned = true
           break
@@ -190,9 +206,10 @@ export function useTimeline(
       if (!assigned) {
         rows.push([{
           id: hazard.id,
-          start: hazard.ranges[0][0],
-          end: hazard.ranges[0][1],
-          ranges: hazard.ranges,
+          start: hazard.ranges[0] as number,
+          end: hazard.ranges[1] as number,
+          ranges: hazard.ranges.map(range => range as number),
+          level: hazard.level || 0,
         }])
       }
     })
@@ -364,6 +381,20 @@ export function useTimeline(
     window.removeEventListener('mouseup', handleMouseUp)
   }
 
+  const openMessageBox = (message: string, title: string) => {
+    ElMessageBox.alert(message, title, {
+    // if you want to disable its autofocus
+    // autofocus: false,
+      confirmButtonText: '确认',
+    //   callback: (action: Action) => {
+    //     ElMessage({
+    //       type: 'info',
+    //       message: `action: ${action}`,
+    //     })
+    //   },
+    })
+  }
+
   return {
     pxPerFrame,
     minPxPerFrame,
@@ -388,5 +419,6 @@ export function useTimeline(
     handlePlayheadDrag,
     initMounted,
     initUnmounted,
+    openMessageBox,
   }
 }
diff --git a/src/components/hazard_inspect/timeline/timeline.vue b/src/components/hazard_inspect/timeline/timeline.vue
index 196b630..4df7ba3 100644
--- a/src/components/hazard_inspect/timeline/timeline.vue
+++ b/src/components/hazard_inspect/timeline/timeline.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import type { Arrayable } from '@vueuse/core'
 import type { TimelineEmits, TimelineProps } from './timeline'
+import { InfoFilled } from '@element-plus/icons-vue'
 import { ElScrollbar, ElSlider } from 'element-plus'
-import { computed, onMounted, onUnmounted } from 'vue'
+import { onMounted, onUnmounted } from 'vue'
 import { useTimeline } from './timeline'
 import './timeline.css'
 
@@ -28,6 +29,7 @@ const {
   handlePlayheadMouseDown,
   handleRulerClick,
   initMounted,
+  openMessageBox,
   initUnmounted,
 } = useTimeline(props, emit)
 
@@ -43,7 +45,18 @@ onUnmounted(() => {
 <template>
   <div class="timeline-wrapper">
     <div class="timeline-toolbar">
-      <span class="timeline-title">隐患时间线 (共 {{ Object.keys(hazardRanges).length }} 个隐患)</span>
+      <div class="timeline-title-container">
+        <span class="timeline-title">隐患时间线 (共 {{ Object.keys(hazardRanges).length }} 个隐患)</span>
+        <el-button
+          type="info" dashed :icon="InfoFilled" size="small"
+          @click="openMessageBox(
+            '拖动播放头控制播放进度。滚轮/拖动时间轴前后移动。点击隐患编号跳转对应隐患。',
+            '操作说明',
+          )"
+        >
+          操作说明
+        </el-button>
+      </div>
       <div class="timeline-zoom-controls">
         <div class="timeline-zoom-label">
           <el-text type="info" size="small">
@@ -54,7 +67,7 @@ onUnmounted(() => {
           v-model="pxPerFrame"
           :min="minPxPerFrame"
           :max="maxPxPerFrame"
-          :step="0.5"
+          :step="0.1"
           :show-tooltip="true"
           :format-tooltip="(val: number) => `缩放: ${val.toFixed(2)}`"
           class="zoom-slider"
@@ -115,6 +128,7 @@ onUnmounted(() => {
                 v-for="hazard in row"
                 :key="hazard.id"
                 class="hazard-block"
+                :class="{ primary: hazard.level === 0, danger: hazard.level === 1 }"
                 :style="getHazardStyle(hazard.start, hazard.end)"
                 @click="handleHazardClick(hazard.id)"
               >
diff --git a/src/main.ts b/src/main.ts
index 076f93b..786de2c 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,19 +1,19 @@
 import type { UserModule } from './types'
-import { ViteSSG } from 'vite-ssg'
 
 // import "~/styles/element/index.scss";
 
-import { routes } from 'vue-router/auto-routes'
+import { ViteSSG } from 'vite-ssg'
 
 // or use cdn, uncomment cdn link in `index.html`
 
-import App from './App.vue'
+import { routes } from 'vue-router/auto-routes'
 // import ElementPlus from "element-plus";
 // import all element css, uncommented next line
 // import "element-plus/dist/index.css";
 
-import '~/styles/index.scss'
+import App from './App.vue'
 
+import '~/styles/index.scss'
 import 'uno.css'
 // If you want to use ElMessage, import it.
 import 'element-plus/theme-chalk/src/message.scss'
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 9da7706..2d7879e 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -7,14 +7,11 @@
     </div>
     <div class="grid grid-cols-3 gap-4">
       <el-button class="bg-gray-200 p-4" @click="$router.push('/nav/hazardCheck')">
-        隐患检查
+        本地视频隐患检查
       </el-button>
       <el-button class="bg-gray-200 p-4" @click="$router.push('/nav/VideoTrackDemo')">
         物体跟踪 demo
       </el-button>
-      <el-button class="bg-gray-200 p-4" @click="$router.push('/nav/track_2')">
-        物体跟踪 demo2
-      </el-button>
     </div>
   </div>
 </template>
diff --git a/src/pages/nav/edit2.html b/src/pages/nav/edit2.html
deleted file mode 100644
index 7e81aa8..0000000
--- a/src/pages/nav/edit2.html
+++ /dev/null
@@ -1,864 +0,0 @@
-<!doctype html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>ProVision - 智能视频标注编辑器</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
-      rel="stylesheet"
-    />
-    <style>
-      body {
-        font-family: "Inter", sans-serif;
-        background-color: #0f172a; /* Slate 900 */
-        color: #e2e8f0; /* Slate 200 */
-        overflow: hidden; /* App-like feel */
-      }
-
-      /* Custom Scrollbar */
-      ::-webkit-scrollbar {
-        width: 6px;
-        height: 6px;
-      }
-      ::-webkit-scrollbar-track {
-        background: #1e293b;
-      }
-      ::-webkit-scrollbar-thumb {
-        background: #475569;
-        border-radius: 3px;
-      }
-      ::-webkit-scrollbar-thumb:hover {
-        background: #64748b;
-      }
-
-      /* Range Input Styling */
-      input[type="range"] {
-        -webkit-appearance: none;
-        background: transparent;
-      }
-      input[type="range"]::-webkit-slider-thumb {
-        -webkit-appearance: none;
-      }
-      input[type="range"]:focus {
-        outline: none;
-      }
-
-      .glass-panel {
-        background: rgba(30, 41, 59, 0.7);
-        backdrop-filter: blur(10px);
-        border: 1px solid rgba(255, 255, 255, 0.1);
-      }
-
-      .canvas-container {
-        background-image:
-          linear-gradient(45deg, #1e293b 25%, transparent 25%),
-          linear-gradient(-45deg, #1e293b 25%, transparent 25%),
-          linear-gradient(45deg, transparent 75%, #1e293b 75%),
-          linear-gradient(-45deg, transparent 75%, #1e293b 75%);
-        background-size: 20px 20px;
-        background-position:
-          0 0,
-          0 10px,
-          10px -10px,
-          -10px 0px;
-        background-color: #0f172a;
-      }
-    </style>
-  </head>
-  <body class="h-screen w-screen flex flex-col">
-    <!-- Header -->
-    <header
-      class="h-14 border-b border-slate-700 bg-slate-900 flex items-center justify-between px-4 shrink-0 z-20"
-    >
-      <div class="flex items-center gap-3">
-        <div
-          class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center shadow-lg shadow-blue-500/20"
-        >
-          <svg
-            class="w-5 h-5 text-white"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
-            ></path>
-          </svg>
-        </div>
-        <h1 class="font-semibold text-lg tracking-tight text-white">
-          ProVision
-          <span class="text-slate-500 font-normal text-sm"
-            >| 视频标注编辑器</span
-          >
-        </h1>
-      </div>
-      <div class="flex items-center gap-4">
-        <div class="text-xs text-slate-400 flex items-center gap-2">
-          <span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
-          系统就绪
-        </div>
-        <button
-          class="px-3 py-1.5 bg-blue-600 hover:bg-blue-500 text-white text-xs font-medium rounded transition-colors"
-        >
-          导出数据
-        </button>
-      </div>
-    </header>
-
-    <!-- Main Workspace -->
-    <main class="flex-1 flex overflow-hidden">
-      <!-- Left Sidebar: Object Thumbnails -->
-      <aside
-        class="w-64 bg-slate-900 border-r border-slate-700 flex flex-col shrink-0 z-10"
-      >
-        <div class="p-3 border-b border-slate-800">
-          <h2 class="text-xs font-bold text-slate-400 uppercase tracking-wider">
-            当前帧物体 (Frame <span id="frame-counter">0</span>)
-          </h2>
-        </div>
-        <div id="object-list" class="flex-1 overflow-y-auto p-2 space-y-2">
-          <!-- Dynamic Object Items will be injected here -->
-        </div>
-      </aside>
-
-      <!-- Center: Player & Timeline -->
-      <section class="flex-1 flex flex-col min-w-0 bg-black relative">
-        <!-- Video Player Area (Top 2/3) -->
-        <div
-          class="h-[66.666%] relative bg-black flex items-center justify-center overflow-hidden group"
-        >
-          <!-- Canvas Layer (Simulates Video + Overlays) -->
-          <canvas
-            id="video-canvas"
-            class="max-w-full max-h-full shadow-2xl"
-          ></canvas>
-
-          <!-- Video Controls Overlay -->
-          <div
-            class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col gap-2"
-          >
-            <!-- Progress Bar -->
-            <div
-              class="relative w-full h-1.5 bg-slate-700 rounded-full cursor-pointer group/progress"
-              id="progress-container"
-            >
-              <div
-                id="progress-fill"
-                class="absolute top-0 left-0 h-full bg-blue-500 rounded-full w-0 transition-all duration-75"
-              ></div>
-              <div
-                id="progress-handle"
-                class="absolute top-1/2 -translate-y-1/2 w-3 h-3 bg-white rounded-full shadow opacity-0 group-hover/progress:opacity-100 transition-opacity"
-                style="left: 0%"
-              ></div>
-            </div>
-
-            <!-- Buttons -->
-            <div class="flex items-center justify-between mt-1">
-              <div class="flex items-center gap-4">
-                <button
-                  id="play-btn"
-                  class="text-white hover:text-blue-400 transition-colors"
-                >
-                  <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
-                    <path d="M8 5v14l11-7z" />
-                  </svg>
-                </button>
-                <div class="text-sm font-mono text-slate-300">
-                  <span id="current-time">00:00</span> /
-                  <span id="total-time">00:10</span>
-                </div>
-              </div>
-              <div class="flex items-center gap-2 text-slate-400">
-                <svg
-                  class="w-5 h-5"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"
-                  ></path>
-                </svg>
-                <input
-                  type="range"
-                  min="0"
-                  max="100"
-                  value="80"
-                  class="w-20 h-1 bg-slate-600 rounded-lg appearance-none cursor-pointer"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Timeline Area (Bottom 1/3) -->
-        <div
-          class="h-[33.333%] bg-slate-900 border-t border-slate-700 flex flex-col"
-        >
-          <!-- Timeline Toolbar -->
-          <div
-            class="h-8 border-b border-slate-800 flex items-center px-2 gap-2 bg-slate-800/50"
-          >
-            <button
-              class="p-1 hover:bg-slate-700 rounded text-slate-400 hover:text-white"
-              title="缩放"
-            >
-              <svg
-                class="w-4 h-4"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"
-                ></path>
-              </svg>
-            </button>
-            <div class="h-4 w-px bg-slate-700 mx-1"></div>
-            <span class="text-xs text-slate-500">轨道视图</span>
-          </div>
-
-          <!-- Tracks Container -->
-          <div
-            class="flex-1 overflow-y-auto relative custom-scrollbar bg-slate-900"
-            id="timeline-container"
-          >
-            <!-- Playhead Line -->
-            <div
-              id="playhead"
-              class="absolute top-0 bottom-0 w-px bg-red-500 z-20 pointer-events-none"
-              style="left: 0px"
-            >
-              <div
-                class="w-3 h-3 bg-red-500 transform -translate-x-1/2 rotate-45 -mt-1.5 absolute top-0"
-              ></div>
-            </div>
-
-            <!-- Grid Background -->
-            <div
-              class="absolute inset-0 pointer-events-none opacity-10"
-              style="
-                background-image: linear-gradient(
-                  to right,
-                  #fff 1px,
-                  transparent 1px
-                );
-                background-size: 50px 100%;
-              "
-            ></div>
-
-            <!-- Dynamic Tracks -->
-            <div id="tracks-list" class="relative pt-4 pb-10">
-              <!-- Tracks injected via JS -->
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <!-- Right Sidebar: Properties -->
-      <aside
-        class="w-80 bg-slate-900 border-l border-slate-700 flex flex-col shrink-0 z-10 overflow-y-auto"
-      >
-        <div
-          class="p-4 border-b border-slate-800 sticky top-0 bg-slate-900 z-10"
-        >
-          <h2 class="text-xs font-bold text-slate-400 uppercase tracking-wider">
-            属性面板
-          </h2>
-        </div>
-
-        <div id="properties-panel" class="p-4 space-y-6">
-          <!-- Empty State -->
-          <div id="empty-state" class="text-center py-10 opacity-50">
-            <svg
-              class="w-12 h-12 mx-auto text-slate-600 mb-3"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="1.5"
-                d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
-              ></path>
-            </svg>
-            <p class="text-sm text-slate-400">
-              请在左侧列表或视频中选择一个物体
-            </p>
-          </div>
-
-          <!-- Content (Hidden by default) -->
-          <div id="properties-content" class="hidden space-y-6">
-            <!-- Header Info -->
-            <div class="flex items-center gap-3">
-              <div
-                id="prop-color-indicator"
-                class="w-3 h-10 rounded-full bg-blue-500"
-              ></div>
-              <div>
-                <input
-                  type="text"
-                  id="prop-name"
-                  value="Object Name"
-                  class="bg-transparent text-lg font-bold text-white border-b border-transparent hover:border-slate-600 focus:border-blue-500 focus:outline-none w-full transition-colors"
-                />
-                <div class="flex gap-2 mt-1">
-                  <span id="prop-id" class="text-xs font-mono text-slate-500"
-                    >ID: #001</span
-                  >
-                  <span
-                    class="text-xs px-1.5 py-0.5 rounded bg-slate-800 text-slate-400 border border-slate-700"
-                    >Person</span
-                  >
-                </div>
-              </div>
-            </div>
-
-            <!-- Bounding Box Info -->
-            <div class="bg-slate-800/50 rounded-lg p-3 border border-slate-700">
-              <h3
-                class="text-xs font-semibold text-slate-400 mb-3 flex items-center gap-2"
-              >
-                <svg
-                  class="w-3 h-3"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"
-                  ></path>
-                </svg>
-                边界框坐标 (Box)
-              </h3>
-              <div class="grid grid-cols-2 gap-3">
-                <div>
-                  <label class="text-[10px] text-slate-500 uppercase"
-                    >X1 (Left)</label
-                  >
-                  <input
-                    type="number"
-                    id="prop-x1"
-                    class="w-full bg-slate-900 border border-slate-700 rounded px-2 py-1 text-sm text-slate-200 focus:border-blue-500 focus:outline-none"
-                  />
-                </div>
-                <div>
-                  <label class="text-[10px] text-slate-500 uppercase"
-                    >Y1 (Top)</label
-                  >
-                  <input
-                    type="number"
-                    id="prop-y1"
-                    class="w-full bg-slate-900 border border-slate-700 rounded px-2 py-1 text-sm text-slate-200 focus:border-blue-500 focus:outline-none"
-                  />
-                </div>
-                <div>
-                  <label class="text-[10px] text-slate-500 uppercase"
-                    >X2 (Right)</label
-                  >
-                  <input
-                    type="number"
-                    id="prop-x2"
-                    class="w-full bg-slate-900 border border-slate-700 rounded px-2 py-1 text-sm text-slate-200 focus:border-blue-500 focus:outline-none"
-                  />
-                </div>
-                <div>
-                  <label class="text-[10px] text-slate-500 uppercase"
-                    >Y2 (Bottom)</label
-                  >
-                  <input
-                    type="number"
-                    id="prop-y2"
-                    class="w-full bg-slate-900 border border-slate-700 rounded px-2 py-1 text-sm text-slate-200 focus:border-blue-500 focus:outline-none"
-                  />
-                </div>
-              </div>
-            </div>
-
-            <!-- Inspection Items -->
-            <div>
-              <h3
-                class="text-xs font-semibold text-slate-400 mb-3 flex items-center gap-2"
-              >
-                <svg
-                  class="w-3 h-3"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
-                  ></path>
-                </svg>
-                AI 检查项 (Inspection)
-              </h3>
-              <div id="inspection-list" class="space-y-2">
-                <!-- Inspection items injected here -->
-              </div>
-            </div>
-
-            <!-- Actions -->
-            <div class="pt-4 border-t border-slate-800 flex gap-2">
-              <button
-                class="flex-1 py-2 bg-slate-800 hover:bg-slate-700 text-slate-300 text-xs rounded transition-colors"
-              >
-                删除关键帧
-              </button>
-              <button
-                class="flex-1 py-2 bg-blue-600/20 hover:bg-blue-600/30 text-blue-400 text-xs rounded transition-colors"
-              >
-                插值补全
-              </button>
-            </div>
-          </div>
-        </div>
-      </aside>
-    </main>
-
-    <script>
-      /**
-       * Application State & Mock Data
-       */
-      const TOTAL_FRAMES = 300; // 10 seconds @ 30fps
-      const FPS = 30;
-      const VIDEO_WIDTH = 1280;
-      const VIDEO_HEIGHT = 720;
-
-      // Mock Objects Data
-      const objects = [
-        {
-          id: "obj_001",
-          name: "行人 (Person A)",
-          type: "person",
-          color: "#3b82f6", // Blue
-          frames: Array.from({ length: TOTAL_FRAMES }, (_, i) => {
-            // Simulate movement: walking from left to right
-            const progress = i / TOTAL_FRAMES;
-            const x = 100 + progress * 800;
-            const y = 200 + Math.sin(progress * 10) * 20; // Slight bobbing
-            return {
-              x1: x,
-              y1: y,
-              x2: x + 120,
-              y2: y + 240,
-              inspections: [
-                { label: "安全帽佩戴", confidence: 0.98, status: "pass" },
-                { label: "反光衣穿戴", confidence: 0.85, status: "pass" },
-              ],
-            };
-          }),
-        },
-        {
-          id: "obj_002",
-          name: "车辆 (Car B)",
-          type: "vehicle",
-          color: "#ef4444", // Red
-          frames: Array.from({ length: TOTAL_FRAMES }, (_, i) => {
-            // Simulate movement: driving
-            const progress = i / TOTAL_FRAMES;
-            const x = 600 - progress * 400;
-            return {
-              x1: x,
-              y1: 400,
-              x2: x + 200,
-              y2: 550,
-              inspections: [
-                { label: "车牌识别", confidence: 0.92, status: "pass" },
-                { label: "超速检测", confidence: 0.15, status: "fail" },
-              ],
-            };
-          }),
-        },
-        {
-          id: "obj_003",
-          name: "警示牌 (Sign)",
-          type: "object",
-          color: "#10b981", // Green
-          frames: Array.from({ length: TOTAL_FRAMES }, (_, i) => ({
-            // Static object
-            x1: 1000,
-            y1: 100,
-            x2: 1100,
-            y2: 200,
-            inspections: [
-              { label: "完好度", confidence: 0.99, status: "pass" },
-            ],
-          })),
-        },
-      ];
-
-      let state = {
-        currentFrame: 0,
-        isPlaying: false,
-        selectedObjectId: null,
-        scale: 1, // Canvas scale relative to video resolution
-      };
-
-      let animationFrameId;
-
-      // DOM Elements
-      const canvas = document.getElementById("video-canvas");
-      const ctx = canvas.getContext("2d");
-      const objectListEl = document.getElementById("object-list");
-      const tracksListEl = document.getElementById("tracks-list");
-      const playBtn = document.getElementById("play-btn");
-      const progressFill = document.getElementById("progress-fill");
-      const progressHandle = document.getElementById("progress-handle");
-      const currentTimeEl = document.getElementById("current-time");
-      const frameCounterEl = document.getElementById("frame-counter");
-      const playhead = document.getElementById("playhead");
-
-      // Property Panel Elements
-      const emptyStateEl = document.getElementById("empty-state");
-      const propContentEl = document.getElementById("properties-content");
-      const propNameInput = document.getElementById("prop-name");
-      const propIdSpan = document.getElementById("prop-id");
-      const propColorInd = document.getElementById("prop-color-indicator");
-      const propX1 = document.getElementById("prop-x1");
-      const propY1 = document.getElementById("prop-y1");
-      const propX2 = document.getElementById("prop-x2");
-      const propY2 = document.getElementById("prop-y2");
-      const inspectionListEl = document.getElementById("inspection-list");
-
-      /**
-       * Initialization
-       */
-      function init() {
-        // Set canvas resolution
-        canvas.width = VIDEO_WIDTH;
-        canvas.height = VIDEO_HEIGHT;
-
-        // Initial Render
-        renderFrame();
-        renderSidebar();
-        renderTimeline();
-
-        // Event Listeners
-        playBtn.addEventListener("click", togglePlay);
-
-        // Progress Bar Interaction
-        const progressContainer = document.getElementById("progress-container");
-        let isDragging = false;
-
-        const updateProgress = (e) => {
-          const rect = progressContainer.getBoundingClientRect();
-          const x = Math.max(0, Math.min(e.clientX - rect.left, rect.width));
-          const percent = x / rect.width;
-          state.currentFrame = Math.floor(percent * TOTAL_FRAMES);
-          updateUI();
-        };
-
-        progressContainer.addEventListener("mousedown", (e) => {
-          isDragging = true;
-          state.isPlaying = false;
-          updatePlayBtn();
-          updateProgress(e);
-        });
-        window.addEventListener("mousemove", (e) => {
-          if (isDragging) updateProgress(e);
-        });
-        window.addEventListener("mouseup", () => (isDragging = false));
-
-        // Start loop
-        loop();
-      }
-
-      /**
-       * Core Logic: Rendering the Canvas (Video Simulation)
-       */
-      function renderFrame() {
-        // 1. Clear
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-        // 2. Draw Background (Simulated Video Content)
-        // Create a moving gradient to simulate motion
-        const offset = (state.currentFrame * 2) % VIDEO_WIDTH;
-        const grd = ctx.createLinearGradient(
-          -offset,
-          0,
-          VIDEO_WIDTH - offset,
-          0,
-        );
-        grd.addColorStop(0, "#1e293b");
-        grd.addColorStop(0.5, "#334155");
-        grd.addColorStop(1, "#1e293b");
-        ctx.fillStyle = grd;
-        ctx.fillRect(0, 0, canvas.width, canvas.height);
-
-        // Draw some "Environment" shapes
-        ctx.fillStyle = "#0f172a";
-        ctx.beginPath();
-        ctx.arc(VIDEO_WIDTH / 2, VIDEO_HEIGHT / 2, 100, 0, Math.PI * 2);
-        ctx.fill();
-
-        // 3. Draw Objects & Bounding Boxes
-        objects.forEach((obj) => {
-          const frameData = obj.frames[state.currentFrame];
-          if (!frameData) return;
-
-          const isSelected = state.selectedObjectId === obj.id;
-          const { x1, y1, x2, y2 } = frameData;
-
-          // Draw Box
-          ctx.strokeStyle = obj.color;
-          ctx.lineWidth = isSelected ? 4 : 2;
-          ctx.strokeRect(x1, y1, x2 - x1, y2 - y1);
-
-          // Draw Label Background
-          const label = `${obj.name}`;
-          ctx.font = "bold 14px Inter";
-          const textWidth = ctx.measureText(label).width;
-          ctx.fillStyle = obj.color;
-          ctx.fillRect(x1, y1 - 24, textWidth + 10, 24);
-
-          // Draw Label Text
-          ctx.fillStyle = "#ffffff";
-          ctx.fillText(label, x1 + 5, y1 - 7);
-
-          // Draw Highlight if selected
-          if (isSelected) {
-            ctx.strokeStyle = "white";
-            ctx.lineWidth = 2;
-            ctx.setLineDash([5, 5]);
-            ctx.strokeRect(x1 - 5, y1 - 5, x2 - x1 + 10, y2 - y1 + 10);
-            ctx.setLineDash([]);
-
-            // Draw Corner Handles
-            drawHandle(x1, y1);
-            drawHandle(x2, y1);
-            drawHandle(x1, y2);
-            drawHandle(x2, y2);
-          }
-        });
-      }
-
-      function drawHandle(x, y) {
-        ctx.fillStyle = "white";
-        ctx.fillRect(x - 4, y - 4, 8, 8);
-        ctx.strokeStyle = "black";
-        ctx.lineWidth = 1;
-        ctx.strokeRect(x - 4, y - 4, 8, 8);
-      }
-
-      /**
-       * UI Rendering: Sidebar & Timeline
-       */
-      function renderSidebar() {
-        objectListEl.innerHTML = "";
-
-        objects.forEach((obj) => {
-          const currentBox = obj.frames[state.currentFrame];
-          const isSelected = state.selectedObjectId === obj.id;
-
-          const item = document.createElement("div");
-          item.className = `p-2 rounded cursor-pointer transition-all border ${isSelected ? "bg-slate-800 border-blue-500" : "bg-slate-800/30 border-transparent hover:bg-slate-800"}`;
-          item.onclick = () => selectObject(obj.id);
-
-          // Mini Canvas for Thumbnail
-          const thumbCanvas = document.createElement("canvas");
-          thumbCanvas.width = 60;
-          thumbCanvas.height = 40;
-          thumbCanvas.className =
-            "rounded bg-slate-900 w-full mb-2 object-cover border border-slate-700";
-          const tCtx = thumbCanvas.getContext("2d");
-
-          // Draw simple thumb representation
-          tCtx.fillStyle = "#1e293b";
-          tCtx.fillRect(0, 0, 60, 40);
-          tCtx.strokeStyle = obj.color;
-          tCtx.strokeRect(10, 10, 40, 20); // Fake box
-
-          item.innerHTML = `
-                   <div class="flex gap-3 items-center">
-                       <div class="w-12 h-8 rounded bg-slate-950 border border-slate-700 shrink-0 relative overflow-hidden">
-                           <div class="absolute inset-0 flex items-center justify-center text-[8px] text-slate-600">IMG</div>
-                           <div class="absolute inset-0 border-2" style="border-color: ${obj.color}"></div>
-                       </div>
-                       <div class="min-w-0">
-                           <div class="text-xs font-medium text-slate-200 truncate">${obj.name}</div>
-                           <div class="text-[10px] text-slate-500 truncate">ID: ${obj.id}</div>
-                       </div>
-                   </div>
-               `;
-          objectListEl.appendChild(item);
-        });
-      }
-
-      function renderTimeline() {
-        tracksListEl.innerHTML = "";
-
-        // Scale: 50px per second (approx)
-        const pxPerFrame = 2;
-
-        objects.forEach((obj, index) => {
-          const trackRow = document.createElement("div");
-          trackRow.className =
-            "h-12 border-b border-slate-800/50 flex items-center relative hover:bg-slate-800/30 transition-colors";
-
-          // Label
-          const label = document.createElement("div");
-          label.className =
-            "absolute left-2 text-[10px] text-slate-400 w-20 truncate z-10 pointer-events-none";
-          label.innerText = obj.name;
-          trackRow.appendChild(label);
-
-          // Track Bar (Simplified as a full length bar for this demo, usually keyframes)
-          const bar = document.createElement("div");
-          bar.className =
-            "absolute h-6 rounded bg-opacity-20 border border-opacity-50 cursor-pointer hover:bg-opacity-30 transition-all";
-          bar.style.left = "100px"; // Start offset
-          bar.style.width = `${TOTAL_FRAMES * pxPerFrame}px`;
-          bar.style.backgroundColor = obj.color;
-          bar.style.borderColor = obj.color;
-          bar.style.top = "12px";
-
-          // Keyframe dots simulation
-          for (let i = 0; i < TOTAL_FRAMES; i += 30) {
-            const dot = document.createElement("div");
-            dot.className =
-              "absolute top-1/2 -translate-y-1/2 w-1 h-1 bg-white rounded-full opacity-50";
-            dot.style.left = `${i * pxPerFrame}px`;
-            bar.appendChild(dot);
-          }
-
-          trackRow.appendChild(bar);
-          tracksListEl.appendChild(trackRow);
-        });
-
-        // Update Playhead position in timeline
-        const timelineScroll = document.getElementById("timeline-container");
-        // Sync scroll or position if needed, here we just map frame to px
-        // Assuming timeline starts at frame 0 at left 100px
-        const playheadPos = 100 + state.currentFrame * pxPerFrame;
-        playhead.style.left = `${playheadPos}px`;
-      }
-
-      /**
-       * Interaction Logic
-       */
-      function selectObject(id) {
-        state.selectedObjectId = id;
-        updateUI();
-        updatePropertiesPanel();
-      }
-
-      function updatePropertiesPanel() {
-        if (!state.selectedObjectId) {
-          emptyStateEl.classList.remove("hidden");
-          propContentEl.classList.add("hidden");
-          return;
-        }
-
-        emptyStateEl.classList.add("hidden");
-        propContentEl.classList.remove("hidden");
-
-        const obj = objects.find((o) => o.id === state.selectedObjectId);
-        const frameData = obj.frames[state.currentFrame];
-
-        // Fill Data
-        propNameInput.value = obj.name;
-        propIdSpan.innerText = `ID: ${obj.id}`;
-        propColorInd.style.backgroundColor = obj.color;
-
-        propX1.value = Math.round(frameData.x1);
-        propY1.value = Math.round(frameData.y1);
-        propX2.value = Math.round(frameData.x2);
-        propY2.value = Math.round(frameData.y2);
-
-        // Inspections
-        inspectionListEl.innerHTML = "";
-        frameData.inspections.forEach((item) => {
-          const div = document.createElement("div");
-          div.className =
-            "bg-slate-800 rounded p-2 border border-slate-700 flex items-center justify-between";
-
-          const confidenceColor =
-            item.confidence > 0.8
-              ? "text-green-400"
-              : item.confidence > 0.5
-                ? "text-yellow-400"
-                : "text-red-400";
-          const statusIcon =
-            item.status === "pass"
-              ? `<svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>`
-              : `<svg class="w-4 h-4 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>`;
-
-          div.innerHTML = `
-                   <div>
-                       <div class="text-xs text-slate-300">${item.label}</div>
-                       <div class="text-[10px] ${confidenceColor} font-mono mt-0.5">Conf: ${(item.confidence * 100).toFixed(1)}%</div>
-                   </div>
-                   <div class="bg-slate-900 p-1 rounded border border-slate-700">
-                       ${statusIcon}
-                   </div>
-               `;
-          inspectionListEl.appendChild(div);
-        });
-      }
-
-      function togglePlay() {
-        state.isPlaying = !state.isPlaying;
-        updatePlayBtn();
-      }
-
-      function updatePlayBtn() {
-        playBtn.innerHTML = state.isPlaying
-          ? '<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>'
-          : '<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>';
-      }
-
-      function updateUI() {
-        // Progress Bar
-        const percent = (state.currentFrame / TOTAL_FRAMES) * 100;
-        progressFill.style.width = `${percent}%`;
-        progressHandle.style.left = `${percent}%`;
-
-        // Time Text
-        const seconds = Math.floor(state.currentFrame / FPS);
-        const ms = Math.floor(((state.currentFrame % FPS) / FPS) * 100); // Fake ms
-        currentTimeEl.innerText = `00:0${seconds}:${ms < 10 ? "0" + ms : ms}`; // Simple formatting
-        frameCounterEl.innerText = state.currentFrame;
-
-        renderFrame();
-        renderSidebar(); // Update selection highlight
-        renderTimeline(); // Update playhead
-        if (state.selectedObjectId) updatePropertiesPanel(); // Update coords if playing
-      }
-
-      function loop() {
-        if (state.isPlaying) {
-          state.currentFrame++;
-          if (state.currentFrame >= TOTAL_FRAMES) {
-            state.currentFrame = 0;
-            state.isPlaying = false;
-            updatePlayBtn();
-          }
-          updateUI();
-        }
-        requestAnimationFrame(loop);
-      }
-
-      // Start
-      init();
-    </script>
-  </body>
-</html>
diff --git a/src/pages/nav/hazardCheck/HazardCheckResult.vue b/src/pages/nav/hazardCheck/HazardCheckResult.vue
index fc92bfb..aef2f4b 100644
--- a/src/pages/nav/hazardCheck/HazardCheckResult.vue
+++ b/src/pages/nav/hazardCheck/HazardCheckResult.vue
@@ -8,6 +8,8 @@ interface HazardItem {
   隐患编号: string
   物体类型: string
   隐患名称: string
+  隐患等级: string
+  置信度: string
   时间点: string
   跳转时间点: number
   隐患描述: string
@@ -16,22 +18,24 @@ interface HazardItem {
 }
 
 interface DataFormat {
-  隐患列表: string[]
-  隐患范围字典: Record<string, number[]>
+  隐患列表: [number, string, string][]
+  隐患范围字典: Record<string, { ranges: number[], level: number }>
   隐患数据: HazardItem[]
 }
 
 interface ResultObject {
-  tag_id: number
-  base_id: number
-  track_id: string
-  hazard_track_id: number
-  class_id: number
-  level: number
-  start_frame: number
-  end_frame: number
-  start_sec: number
-  location: string
+  tag_id: number // 隐患类型id
+  base_id: number // 依据id
+  track_id: string // 物体追踪id
+  hazard_track_id: number // 隐患追踪id
+  class_id: number // 物体类型id
+  conf: number // 置信度 0: 疑似 1: 确信
+  level: number // 隐患等级 0: 一般隐患 1: 重大隐患
+  start_frame: number // 开始帧
+  end_frame: number // 结束帧
+  start_sec: number // 开始时间点
+  location: string // 位置
+  recommend: string // 整改建议
 }
 
 interface ResultData {
@@ -127,15 +131,19 @@ function getData() {
   const { tag, base, objects } = resultData.value
 
   data.value.隐患列表 = (objects || []).map((obj: any) => {
-    return `(${resultData.value?.class_list?.[obj.class_id] || ''}) ${tag?.[obj.tag_id] || ''}`
+    return [
+      obj.level,
+      resultData.value?.class_list?.[obj.class_id] || '',
+      tag?.[obj.tag_id] || '',
+    ]
   })
 
   data.value.隐患范围字典 = {}
   ;(objects || []).forEach((obj: any) => {
     const 编号 = String(obj.hazard_track_id)
     if (!data.value.隐患范围字典[编号])
-      data.value.隐患范围字典[编号] = []
-    data.value.隐患范围字典[编号].push(obj.start_frame, obj.end_frame)
+      data.value.隐患范围字典[编号] = { ranges: [], level: obj.level }
+    data.value.隐患范围字典[编号].ranges = [obj.start_frame, obj.end_frame]
   })
 
   // data.value.物体列表 = (objects || []).map((_: any, i: number) => `物体${i + 1}`)
@@ -149,11 +157,13 @@ function getData() {
       隐患编号: obj.hazard_track_id || '',
       物体类型: resultData.value.class_list?.[obj.class_id] || '',
       隐患名称: tag?.[obj.tag_id] || '',
+      隐患等级: obj.level === 0 ? '一般隐患' : '重大隐患',
+      置信度: obj.conf === 0 ? '疑似' : '确信',
       时间点: `${hh}:${mm}:${ss}`,
       跳转时间点: jumpPoint,
       隐患描述: obj.location || '',
       依据: base?.[obj.base_id] || '',
-      整改建议: '',
+      整改建议: obj.recommend || '',
     }
   })
 }
@@ -194,11 +204,13 @@ function handleJumpToTimePoint(index: number) {
 const hazardFields = [
   { label: '隐患编号', key: '隐患编号', group: 1, transform: (val: any) => val !== undefined ? val + 1 : '无' },
   { label: '物体类型', key: '物体类型', group: 1 },
-  { label: '隐患名称', key: '隐患名称', group: 2 },
-  { label: '时间点', key: '时间点', group: 2 },
-  { label: '隐患描述', key: '隐患描述', group: 3 },
-  { label: '依据', key: '依据', group: 4 },
-  { label: '整改建议', key: '整改建议', group: 5 },
+  { label: '隐患等级', key: '隐患等级', group: 2 },
+  { label: '置信度', key: '置信度', group: 2 },
+  { label: '隐患名称', key: '隐患名称', group: 3 },
+  { label: '时间点', key: '时间点', group: 3 },
+  { label: '隐患描述', key: '隐患描述', group: 4 },
+  { label: '依据', key: '依据', group: 5 },
+  { label: '整改建议', key: '整改建议', group: 6 },
 ]
 
 const groupedFields = computed(() => {
@@ -271,11 +283,13 @@ onMounted(() => {
           track_id: '18',
           hazard_track_id: 0,
           class_id: 0,
-          level: 1,
+          conf: 1,
+          level: 0,
           start_frame: 551,
           end_frame: 581,
           start_sec: 18.4,
           location: '画面中央偏右的墙壁上',
+          recommend: '',
         },
         {
           tag_id: 1,
@@ -283,11 +297,13 @@ onMounted(() => {
           track_id: '115',
           hazard_track_id: 1,
           class_id: 1,
-          level: 2,
+          conf: 2,
+          level: 1,
           start_frame: 3618,
           end_frame: 3648,
           start_sec: 120.6,
           location: '画面右侧墙壁上的白色插座面板',
+          recommend: '',
         },
         {
           tag_id: 2,
@@ -295,11 +311,13 @@ onMounted(() => {
           track_id: '125',
           hazard_track_id: 2,
           class_id: 2,
+          conf: 1,
           level: 1,
           start_frame: 3733,
           end_frame: 3763,
           start_sec: 124.4,
           location: '画面中央偏左墙壁上的配电箱正下方紧贴放置有一台不锈钢设备，导致配电箱前1米内被占用。',
+          recommend: '',
         },
         {
           tag_id: 1,
@@ -307,11 +325,13 @@ onMounted(() => {
           track_id: '127',
           hazard_track_id: 3,
           class_id: 1,
+          conf: 1,
           level: 1,
           start_frame: 3767,
           end_frame: 3900,
           start_sec: 125.6,
           location: '画面左侧墙壁上，操作台上方区域',
+          recommend: '',
         },
         {
           tag_id: 1,
@@ -319,11 +339,13 @@ onMounted(() => {
           track_id: '130',
           hazard_track_id: 4,
           class_id: 1,
+          conf: 1,
           level: 1,
           start_frame: 3812,
           end_frame: 3842,
           start_sec: 127.1,
           location: '画面中央偏右墙壁上，配电箱下方区域',
+          recommend: '',
         },
         {
           tag_id: 2,
@@ -331,11 +353,13 @@ onMounted(() => {
           track_id: '196',
           hazard_track_id: 5,
           class_id: 2,
+          conf: 1,
           level: 1,
           start_frame: 5199,
           end_frame: 5229,
           start_sec: 173.3,
           location: '画面中央偏右的蓝色配电箱正下方及周围区域',
+          recommend: '',
         },
         {
           tag_id: 3,
@@ -343,11 +367,13 @@ onMounted(() => {
           track_id: '206',
           hazard_track_id: 6,
           class_id: 2,
+          conf: 1,
           level: 1,
           start_frame: 5409,
           end_frame: 5439,
           start_sec: 180.3,
           location: '画面左侧墙壁上的灰色配电箱箱门缺失，内部元器件裸露',
+          recommend: '',
         },
         {
           tag_id: 4,
@@ -355,11 +381,13 @@ onMounted(() => {
           track_id: '221',
           hazard_track_id: 7,
           class_id: 0,
+          conf: 1,
           level: 1,
           start_frame: 5654,
           end_frame: 5684,
           start_sec: 188.5,
           location: '画面右侧的蓝色消火栓箱内部',
+          recommend: '',
         },
       ],
     }
@@ -418,8 +446,8 @@ onMounted(() => {
             style="height: 100%;"
             :current-frame="currentFrame"
             :total-frames="totalFrames"
-            :hazard-ranges="data.隐患范围字典"
-            @hazard-click="handleTimelineHazardClick"
+            :hazard-ranges="data.隐患范围字典 as Record<string, { ranges: number[]; level: number; }>"
+            @hazard-click="(id: number) => handleTimelineHazardClick(String(id))"
             @frame-change="handleFrameChange"
           />
         </el-footer>
diff --git a/src/pages/nav/hazardCheck/index.vue b/src/pages/nav/hazardCheck/index.vue
index cc3326e..d0921c7 100644
--- a/src/pages/nav/hazardCheck/index.vue
+++ b/src/pages/nav/hazardCheck/index.vue
@@ -20,7 +20,7 @@ const ruleForm = reactive<RuleForm>({
   function: [
     'runSam3',
     'runHazardCheck',
-    'runGenerateReport',
+    // 'runGenerateReport',
     // 'runAudioRecognition',
   ],
 })