diff --git a/src/router/route.ts b/src/router/route.ts
index c7279f4..05536b6 100644
--- a/src/router/route.ts
+++ b/src/router/route.ts
@@ -1199,46 +1199,141 @@ export const systemRoutes: RouteRecordRaw[] = [
     ],
   },
   {
-    path: '/chat-platform',
-    name: 'ChatPlatform',
-    component: Layout,
-    redirect: '/chat-platform/options',
-    meta: { title: '聊天平台', icon: 'message', hidden: false, sort: 6 },
+  path: '/image-detection',
+  name: 'ImageDetection',
+  component: Layout,
+  redirect: '/Image-detection/tower-monitoring/clearance-monitoring',
+  meta: {
+    title: '图像检测',
+    icon: 'monitor',
+    hidden: false,
+    sort: 6.5,
+    },
+  
     children: [
-      // {
-      //   path: '/chat-platform/options',
-      //   name: 'ChatOptions',
-      //   component: () => import('@/views/default/redirect/index.vue'), // 临时使用一个组件，实际开发中需要替换
-      //   meta: {
-      //     title: '二级选项1',
-      //     icon: 'setting',
-      //     hidden: false
-      //   }
-      // }
-    ],
+      {
+        path: '/image-detection/image-analysis',
+      name: 'ImageAnalysis',
+        component: () => import('@/components/ParentView/index.vue'),
+      meta: {
+        title: '检查图像分析',
+        icon: 'line-chart',
+        hidden: false,
+        },
+      redirect: '/image-detection/image-analysis/defect-detection',
+        children: [
+        {path: '/image-detection/image-analysis/defect-detection',
+      name: 'DefectDetection',
+      component: () => import('@/views/construction-operation-platform/implementation-workflow/data-processing/intelligent-inspection/defect-algorithm/index.vue'),
+      meta: {
+        title: '缺陷检测',
+        icon: 'line-chart',
+        hidden: false,
+            }
+          },
+          {path: '/image-detection/image-analysis/defect-edit',
+      name: 'DefectEdit',
+      component: () => import('@/components/ParentView/index.vue'),
+      meta: {
+        title: '缺陷编辑',
+        icon: 'line-chart',
+        hidden: false,
+            }
+          },
+          {path: '/image-detection/image-analysis/generate-reports',
+      name: 'GenerateReports',
+      component: () => import('@/views/project-operation-platform/data-processing/report-generation/index.vue'),
+      meta: {
+        title: '生成报告',
+        icon: 'line-chart',
+        hidden: false,
+            }
+          },
+          {path: '/image-detection/image-analysis/defect-base',
+      name: 'DefectBase',
+      component: () => import('@/views/project-operation-platform/data-processing/standard-info/index.vue'),
+      meta: {
+        title: '缺陷标准数据信息库',
+        icon: 'line-chart',
+        hidden: false,
+            }
+          },
+      ]
+      },
+      {
+  path: '/tower-monitoring',
+  name: 'TowerMonitoring',
+  component: () => import('@/components/ParentView/index.vue'),
+  redirect: '/tower-monitoring/clearance-monitoring',
+  meta: {
+    title: '音视频检测',
+    icon: 'monitor',
+    hidden: false,
+    sort: 6.5,
   },
+  children: [
+    {
+      path: '/tower-monitoring/clearance-monitoring',
+      name: 'ClearanceMonitoring',
+      component: () => import('@/views/tower-monitoring/deformation.vue'),
+      meta: {
+        title: '净空监测',
+        icon: 'fullscreen',
+        hidden: false,
+      },
+    },
+    {
+      path: '/tower-monitoring/deformation-monitoring',
+      name: 'DeformationMonitoring',
+      component: () => import('@/views/tower-monitoring/clearance.vue'),
+      meta: {
+        title: '形变监测',
+        icon: 'line-chart',
+        hidden: false,
+      },
+    },
+    {
+      path: '/tower-monitoring/whistle-monitoring',
+      name: 'WhistleMonitoring',
+      component: () => import('@/views/tower-monitoring/whistle.vue'),
+      meta: {
+        title: '哨声监测',
+        icon: 'sound',
+        hidden: false,
+      },
+    },
+    {
+      path: '/tower-monitoring/vibration-monitoring',
+      name: 'VibrationMonitoring',
+      component: () => import('@/views/tower-monitoring/vibration.vue'),
+      meta: {
+        title: '振动监测',
+        icon: 'shake',
+        hidden: false,
+      },
+    },
+  ],
+      },
+      {
+        path: '/image-detection/reporting-center',
+        name: 'ReportingCenter',
+        component: () => import('@/views/tower-monitoring/vibration.vue'),
+        meta: {
+        title: '报告中心',
+        icon: 'shake',
+        hidden: false,
+      },
+      }
+    ]
+},
+
   // {
-  //   path: '/user/profile',
-  //   name: 'UserProfile',
+  //   path: '/chat-platform',
+  //   name: 'ChatPlatform',
   //   component: Layout,
-  //   redirect: '/user/profile',
-  //   meta: {
-  //     title: '个人中心',
-  //     icon: 'user',
-  //     hidden: false,
-  //     sort: 100,
-  //   },
+  //   redirect: '/chat-platform/options',
+  //   meta: { title: '聊天平台', icon: 'message', hidden: false, sort: 6 },
   //   children: [
-  //     {
-  //       path: '/user/profile',
-  //       name: 'UsersProfile',
-  //       component: () => import('@/views/user/profile/index.vue'),
-  //       meta: {
-  //         title: '个人中心',
-  //         icon: 'user',
-  //         hidden: false,
-  //       },
-  //     },
   //   ],
   // },
   {
diff --git a/src/views/operation-platform/data-processing/data-storage/index.vue b/src/views/operation-platform/data-processing/data-storage/index.vue
index 23de01b..a15755d 100644
--- a/src/views/operation-platform/data-processing/data-storage/index.vue
+++ b/src/views/operation-platform/data-processing/data-storage/index.vue
@@ -73,18 +73,8 @@
             </div>
           </div>
         </a-tab-pane>
-        <a-tab-pane key="props" tap="形变" title="形变原数据">
-          <div class="tab-content">
-            <raw-data>
-
-            </raw-data>
-          </div>
-        </a-tab-pane>
       </a-tabs>
     </div>
-
-    <!-- 文件预览模态框（待重新设计） -->
-    <!-- <PreviewModal ref="previewModal" /> -->
   </GiPageLayout>
 </template>
 
@@ -107,8 +97,6 @@ import {
 } from '@/apis/industrial-image'
 import DeformationTap from './components/DeformationTap.vue'
 
-// 预览弹窗引用（待重新设计）
-// const previewModal = ref()
 // 活动选项卡
 const activeTab = ref('image')
 
diff --git a/src/views/tower-monitoring/clearance.vue b/src/views/tower-monitoring/clearance.vue
new file mode 100644
index 0000000..b3ff709
--- /dev/null
+++ b/src/views/tower-monitoring/clearance.vue
@@ -0,0 +1,498 @@
+<template>
+
+    <GiPageLayout>
+        <div class="raw-data-container">
+            <!-- 顶部按钮 -->
+            <div class="action-bar">
+                <div class="action-buttons">
+                    <a-button type="primary" @click="openUploadModal">
+                        <template #icon>
+                            <IconUpload />
+                        </template>
+                        上传视频
+                    </a-button>
+                </div>
+            </div>
+
+            <!-- 筛选 -->
+            <div class="filter-section">
+                <a-form :model="filterForm" layout="inline">
+                    <a-form-item label="项目" required>
+                        <a-select v-model="filterForm.projectId" placeholder="请选择项目" :options="projectOptions"
+                            allow-clear @change="" />
+                    </a-form-item>
+                    <a-form-item label="机组">
+                        <a-select v-model="filterForm.turbineId" placeholder="请选择机组" :options="turbineOptions"
+                            allow-clear :disabled="!filterForm.projectId" />
+                    </a-form-item>
+                    <a-form-item>
+                        <a-button type="primary" @click="handleQuery">查询</a-button>
+                    </a-form-item>
+                </a-form>
+            </div>
+
+            <!-- 列表 -->
+            <a-table :columns="columns" :data="tableData" :pagination="pagination" :loading="loading"
+                :scroll="{ y: 'calc(100vh - 380px)' }">
+                <template #type="{ record }">
+                    <a-tag>{{ record.type === 'clearance' ? '净空' : '形变' }}</a-tag>
+                </template>
+                <template #status="{ record }">
+                    <a-tag :color="record.preTreatment ? 'green' : 'red'">
+                        {{ record.preTreatment ? '已处理' : '未处理' }}
+                    </a-tag>
+                </template>
+                <template #action="{ record }">
+                    <a-space>
+                        <a-button size="mini" @click="handlePreview(record)">预览</a-button>
+                        <a-button size="mini" @click="handleDownload(record)">下载</a-button>
+                        <a-popconfirm content="确认删除？" @ok="handleDelete(record)">
+                            <a-button size="mini" status="danger">删除</a-button>
+                        </a-popconfirm>
+                    </a-space>
+
+                </template>
+            </a-table>
+
+            <!-- 上传弹窗 -->
+            <a-modal v-model:visible="showUploadModal" title="上传原始视频" width="600px" :ok-loading="uploading"
+                @ok="handleUpload" @cancel="showUploadModal = false">
+                <a-form :model="uploadForm" layout="vertical">
+                    <a-form-item label="项目" required>
+                        <a-select v-model="uploadForm.projectId" placeholder="请选择项目" :options="projectOptions"
+                            allow-clear @change="onProjectChangeUpload" />
+                    </a-form-item>
+                    <a-form-item label="机组">
+                        <a-select v-model="uploadForm.turbineId" placeholder="请选择机组" :options="turbineOptionsUpload"
+                            allow-clear :disabled="!uploadForm.projectId" />
+                    </a-form-item>
+                    <a-form-item label="类型" required>
+                        <a-select v-model="uploadForm.type" placeholder="请选择类型" :options="typeOptions" />
+                    </a-form-item>
+                    <a-form-item label="视频文件" required>
+                        <a-upload v-model:file-list="uploadForm.fileList" :multiple="uploadMode === 'batch'"
+                            :limit="uploadMode === 'batch' ? 10 : 1" accept="video/*" :auto-upload="false"
+                            list-type="picture-card" />
+                    </a-form-item>
+                    <a-form-item>
+                        <a-radio-group v-model="uploadMode" type="button">
+                            <a-radio value="single">单文件</a-radio>
+                            <a-radio value="batch">批量</a-radio>
+                        </a-radio-group>
+                    </a-form-item>
+                </a-form>
+            </a-modal>
+        </div>
+    </GiPageLayout>
+    <!-- 视频预览弹窗 -->
+    <a-modal v-model:visible="previewVisible" title="视频预览" width="800px" :footer="false"
+        @cancel="previewVisible = false">
+        <a-tabs v-model:active-key="activePreviewTab" @change="activePreviewTab = $event as any">
+            <!-- 原始视频 -->
+            <a-tab-pane key="video" title="原始视频">
+                <video v-if="previewUrl" :src="previewUrl" controls
+                    style="width: 100%; max-height: 60vh; border-radius: 4px"></video>
+            </a-tab-pane>
+
+            <!-- 处理结果 -->
+            <a-tab-pane key="result" title="处理结果">
+                <a-spin :loading="loadingResult">
+                    <a-space direction="vertical" size="medium" style="width: 100%">
+                        <!-- 图片 -->
+                        <img v-if="resultImgUrl" :src="resultImgUrl" style="max-width: 100%; border-radius: 4px"
+                            alt="last frame" />
+
+                        <!-- JSON 预览 -->
+                        <a-card title="results.json" size="small">
+                            <pre>{{ JSON.stringify(resultJson, null, 2) }}</pre>
+                        </a-card>
+                    </a-space>
+                </a-spin>
+            </a-tab-pane>
+        </a-tabs>
+    </a-modal>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, watch } from 'vue'
+import { Message } from '@arco-design/web-vue'
+import type { TableColumnData } from '@arco-design/web-vue'
+import { IconUpload } from '@arco-design/web-vue/es/icon'
+import {
+    getProjectList,
+    getTurbineList
+} from '@/apis/industrial-image'
+import {
+    getVideoPage,
+    uploadBatchVideo,
+    uploadSingleVideo,
+    deleteVideo,
+    downloadVideo
+} from '@/apis/video-monitor'
+
+/* ---------------- 下拉 & 表单 ---------------- */
+const projectOptions = ref<{ label: string; value: string }[]>([])
+const turbineOptions = ref<{ label: string; value: string }[]>([])       // 筛选用
+const turbineOptionsUpload = ref<{ label: string; value: string }[]>([]) // 上传弹窗用
+const typeOptions = [
+    { label: '净空', value: 'clearance' },
+    { label: '形变', value: 'deformation' }
+]
+
+const filterForm = reactive({
+    projectId: '',
+    turbineId: ''
+})
+
+const uploadForm = reactive({
+    projectId: '',
+    turbineId: '',
+    type: '',
+    fileList: [] as any[]
+})
+
+const uploadMode = ref<'single' | 'batch'>('single')
+
+/* ---------------- 列表 ---------------- */
+const columns: TableColumnData[] = [
+    { title: '文件名', dataIndex: 'videoName', ellipsis: true, width: 220 },
+    // { title: '项目', dataIndex: 'projectName' },
+    // { title: '机组', dataIndex: 'turbineName' },
+    { title: '类型', slotName: 'type' },
+    { title: '上传时间', dataIndex: 'uploadTime' },
+    { title: '状态', slotName: 'status' },
+    { title: '操作', slotName: 'action', width: 120, fixed: 'right' }
+]
+
+const tableData = ref<any[]>([])
+const loading = ref(false)
+const pagination = reactive({ current: 1, pageSize: 20, total: 0 })
+
+/* ---------------- 控制弹窗 ---------------- */
+const showUploadModal = ref(false)
+const uploading = ref(false)
+
+/* ---------------- 初始化 ---------------- */
+onMounted(async () => {
+    const { data } = await getProjectList({ page: 1, pageSize: 1000 })
+    projectOptions.value = data.map((p: any) => ({ label: p.projectName, value: p.projectId }))
+    handleQuery()
+})
+const activePreviewTab = ref<'video' | 'result'>('video')   // 当前标签页
+const resultImgUrl = ref('')
+const resultJson = ref<Record<string, any>>({})
+const loadingResult = ref(false)
+const resutlVideoUrl = ref('')
+async function loadResultFiles(row: any) {
+    if (!row.preTreatment) return
+    loadingResult.value = true
+    try {
+        const base = import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, '')
+        // 图片
+        resultImgUrl.value = `${base}${row.preImagePath}/last_frame.jpg`
+        resutlVideoUrl.value = `${base}${row.preImagePath}/annotated_video.mp4`
+        // JSON
+        const jsonUrl = `${base}${row.preImagePath}/results.json`
+        const res = await fetch(jsonUrl)
+        resultJson.value = await res.json()
+    } catch (e) {
+        console.error(e)
+        resultJson.value = {}
+    } finally {
+        loadingResult.value = false
+    }
+    console.log('result', resultImgUrl.value)
+}
+/* 项目 -> 机组（筛选） */
+watch(
+    () => filterForm.projectId,
+    async (val) => {
+        filterForm.turbineId = ''
+        turbineOptions.value = []
+        if (!val) return
+        const { data } = await getTurbineList({ projectId: val })
+        turbineOptions.value = data.map((t: any) => ({ label: t.turbineName, value: t.turbineId }))
+    }
+)
+const previewVisible = ref(false)
+const previewUrl = ref('')
+
+function handlePreview(row: any) {
+    const base = import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, '')
+    previewUrl.value = new URL(row.videoPath.replace(/^\/+/, ''), base).href
+    previewVisible.value = true
+    activePreviewTab.value = 'video'     // 默认先显示视频
+    if (row.preTreatment) {
+        loadResultFiles(row)               // 预加载结果
+    }
+}
+/* 项目 -> 机组（上传弹窗） */
+async function onProjectChangeUpload(projectId: string) {
+    uploadForm.turbineId = ''
+    turbineOptionsUpload.value = []
+    if (!projectId) return
+    const { data } = await getTurbineList({ projectId })
+    turbineOptionsUpload.value = data.map((t: any) => ({ label: t.turbineName, value: t.turbineId }))
+}
+
+/* ---------------- 查询 ---------------- */
+function handleQuery() {
+    pagination.current = 1
+    loadTable()
+}
+async function loadTable() {
+    loading.value = true
+    try {
+        const params = {
+            pageNo: pagination.current,
+            pageSize: pagination.pageSize,
+            projectId: filterForm.projectId,
+            turbineId: filterForm.turbineId || undefined
+        }
+        const { data } = await getVideoPage(params)
+        console.log(data)
+        tableData.value = data
+        pagination.total = data.length
+    } finally {
+        loading.value = false
+    }
+}
+
+/* ---------------- 上传 ---------------- */
+function openUploadModal() {
+    uploadForm.projectId = ''
+    uploadForm.turbineId = ''
+    uploadForm.type = ''
+    uploadForm.fileList = []
+    showUploadModal.value = true
+}
+async function handleUpload() {
+    if (!uploadForm.projectId || !uploadForm.type || !uploadForm.fileList.length) {
+        Message.warning('请完整填写')
+        return
+    }
+    uploading.value = true
+    try {
+        const files = uploadForm.fileList.map((f: any) => f.file)
+        if (uploadMode.value === 'single') {
+            await uploadSingleVideo(
+                uploadForm.projectId,
+                uploadForm.turbineId || '',
+                uploadForm.type,
+                files[0]
+            )
+        } else {
+            await uploadBatchVideo(
+                uploadForm.projectId,
+                uploadForm.turbineId || '',
+                uploadForm.type,
+                files
+            )
+        }
+        Message.success('上传成功')
+        showUploadModal.value = false
+        loadTable()
+    } finally {
+        uploading.value = false
+    }
+}
+
+/* ---------------- 下载 / 删除 ---------------- */
+async function handleDownload(row: any) {
+    const url = await downloadVideo(row.videoId)
+    window.open(url, '_blank')
+}
+async function handleDelete(row: any) {
+    await deleteVideo(row.videoId)
+    Message.success('删除成功')
+    loadTable()
+}
+</script>
+
+
+<style scoped lang="scss">
+.raw-data-container {
+    padding: 20px;
+}
+
+.page-header {
+    margin-bottom: 20px;
+}
+
+.page-title {
+    font-size: 28px;
+    font-weight: 600;
+    margin: 0 0 8px 0;
+    color: #1d2129;
+}
+
+.page-subtitle {
+    font-size: 14px;
+    color: #86909c;
+    margin: 0;
+}
+
+.action-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+
+    .filter-section {
+        margin-left: 24px;
+    }
+}
+
+.project-sections {
+    .project-section {
+        margin-bottom: 32px;
+        background: #fff;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px #f0f1f2;
+        padding: 20px;
+
+        .project-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 16px;
+
+            .project-title {
+                font-size: 20px;
+                font-weight: 600;
+            }
+
+            .project-stats {
+                display: flex;
+                gap: 16px;
+
+                .stat-item {
+                    display: flex;
+                    align-items: center;
+                    gap: 4px;
+                    color: #86909c;
+                }
+            }
+        }
+
+        .units-grid {
+            display: flex;
+            gap: 24px;
+            flex-wrap: wrap;
+
+            .unit-card {
+                background: #fafbfc;
+                border-radius: 8px;
+                padding: 16px;
+                width: 360px;
+                margin-bottom: 16px;
+
+                .unit-header {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    margin-bottom: 12px;
+
+                    .unit-title {
+                        font-size: 16px;
+                        font-weight: 600;
+                    }
+
+                    .unit-actions {
+                        display: flex;
+                        gap: 8px;
+                    }
+                }
+
+                .videos-list {
+                    display: flex;
+                    gap: 12px;
+                    margin-bottom: 8px;
+
+                    .video-item {
+                        width: 100px;
+
+                        .video-thumbnail {
+                            position: relative;
+                            width: 100px;
+                            height: 60px;
+                            border-radius: 6px;
+                            overflow: hidden;
+
+                            img {
+                                width: 100%;
+                                height: 100%;
+                                object-fit: cover;
+                            }
+
+                            .video-overlay {
+                                position: absolute;
+                                top: 0;
+                                left: 0;
+                                right: 0;
+                                bottom: 0;
+                                display: flex;
+                                align-items: center;
+                                justify-content: center;
+                                background: rgba(0, 0, 0, 0.2);
+                                opacity: 0;
+                                transition: opacity 0.2s;
+
+                                &:hover {
+                                    opacity: 1;
+                                }
+                            }
+                        }
+
+                        .video-info {
+                            margin-top: 4px;
+
+                            .video-name {
+                                font-size: 12px;
+                                font-weight: 500;
+                                color: #1d2129;
+                                white-space: nowrap;
+                                overflow: hidden;
+                                text-overflow: ellipsis;
+                            }
+
+                            .video-meta {
+                                font-size: 11px;
+                                color: #86909c;
+                                display: flex;
+                                gap: 4px;
+                            }
+
+                            .video-status {
+                                margin-top: 2px;
+                            }
+                        }
+                    }
+                }
+
+                .analysis-progress {
+                    margin-top: 8px;
+
+                    .progress-info {
+                        display: flex;
+                        justify-content: space-between;
+                        font-size: 12px;
+                        color: #86909c;
+                        margin-bottom: 2px;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.video-meta-info {
+    margin-top: 16px;
+    font-size: 13px;
+    color: #4e5969;
+
+    p {
+        margin: 2px 0;
+    }
+}
+</style>
diff --git a/src/views/tower-monitoring/deformation.vue b/src/views/tower-monitoring/deformation.vue
new file mode 100644
index 0000000..1152c74
--- /dev/null
+++ b/src/views/tower-monitoring/deformation.vue
@@ -0,0 +1,665 @@
+<template>
+    <GiPageLayout>
+        <div class="raw-data-container">
+            <!-- 顶部页签 -->
+            <a-tabs v-model:active-key="topTab" type="rounded" destroy-on-hide>
+                <!-- 原始数据 -->
+                <a-tab-pane key="data" title="原始数据">
+                    <!-- 顶部按钮 -->
+                    <div class="action-bar">
+                        <div class="action-buttons">
+                            <a-button type="primary" @click="openUploadModal">
+                                <template #icon>
+                                    <IconUpload />
+                                </template>
+                                上传视频
+                            </a-button>
+                        </div>
+                    </div>
+
+                    <!-- 筛选 -->
+                    <div class="filter-section">
+                        <a-form :model="filterForm" layout="inline">
+                            <a-form-item label="项目" required>
+                                <a-select v-model="filterForm.projectId" placeholder="请选择项目" :options="projectOptions"
+                                    allow-clear />
+                            </a-form-item>
+                            <a-form-item label="机组">
+                                <a-select v-model="filterForm.turbineId" placeholder="请选择机组" :options="turbineOptions"
+                                    allow-clear :disabled="!filterForm.projectId" />
+                            </a-form-item>
+                            <a-form-item>
+                                <a-button type="primary" @click="handleQuery">查询</a-button>
+                            </a-form-item>
+                        </a-form>
+                    </div>
+
+                    <!-- 列表 -->
+                    <a-table :columns="columns" :data="tableData" :pagination="pagination" :loading="loading"
+                        :scroll="{ y: 'calc(100vh - 380px)' }">
+                        <template #type="{ record }">
+                            <a-tag>{{ record.type === 'clearance' ? '净空' : '形变' }}</a-tag>
+                        </template>
+                        <template #status="{ record }">
+                            <a-tag :color="record.preTreatment ? 'green' : 'red'">
+                                {{ record.preTreatment ? '已处理' : '未处理' }}
+                            </a-tag>
+                        </template>
+                        <template #action="{ record }">
+                            <a-space>
+                                <a-button size="mini" @click="handlePreview(record)">预览</a-button>
+                                <a-button size="mini" @click="handleDownload(record)">下载</a-button>
+                                <a-popconfirm content="确认删除？" @ok="handleDelete(record)">
+                                    <a-button size="mini" status="danger">删除</a-button>
+                                </a-popconfirm>
+                            </a-space>
+                        </template>
+                    </a-table>
+                </a-tab-pane>
+
+                <!-- 净空报告 -->
+                <a-tab-pane key="report" title="净空报告">
+                    <!-- 筛选 -->
+                    <a-form :model="reportFilterForm" layout="inline" style="margin-bottom: 16px">
+                        <a-form-item label="项目">
+                            <a-select v-model="reportFilterForm.projectId" placeholder="请选择项目" :options="projectOptions"
+                                allow-clear />
+                        </a-form-item>
+                        <a-form-item label="机组">
+                            <a-select v-model="reportFilterForm.turbineId" placeholder="请选择机组"
+                                :options="turbineReportOptions" allow-clear :disabled="!reportFilterForm.projectId" />
+                        </a-form-item>
+                        <a-form-item>
+                            <a-button type="primary" @click="loadReportGrid">查询</a-button>
+                        </a-form-item>
+                    </a-form>
+
+                    <!-- 网格 -->
+                    <a-row :gutter="[24, 24]">
+                        <a-col v-for="item in reportGrid" :key="item.videoId" :xs="24" :sm="12" :md="8" :lg="6">
+                            <!-- 卡片内部 -->
+                            <a-card hoverable>
+                                <div @click="openReportDetail(item)" style="cursor: pointer">
+                                    <video :src="item.videoUrl"
+                                        style="width: 100%; height: 120px; object-fit: cover; border-radius: 4px" />
+                                    <div class="video-name">{{ item.videoName }}</div>
+                                </div>
+
+                                <a-row :gutter="8" style="margin-top: 8px">
+                                    <a-col :span="8">
+                                        <div class="stat-label">最小</div>
+                                        <div class="stat-value">{{ item.min }} m</div>
+                                    </a-col>
+                                    <a-col :span="8">
+                                        <div class="stat-label">最大</div>
+                                        <div class="stat-value">{{ item.max }} m</div>
+                                    </a-col>
+                                    <a-col :span="8">
+                                        <div class="stat-label">平均</div>
+                                        <div class="stat-value">{{ item.avg }} m</div>
+                                    </a-col>
+                                </a-row>
+
+                                <!-- 查看详情按钮 -->
+                                <a-button size="mini" style="margin-top: 8px; width: 100%"
+                                    @click="openReportDetail(item)">
+                                    查看详情
+                                </a-button>
+                            </a-card>
+
+                            <!-- 新增：报告详情模态框 -->
+                            <a-modal v-model:visible="reportDetailVisible" title="净空报告详情" width="900px" :footer="false"
+                                @cancel="reportDetailVisible = false">
+                                <a-tabs size="small">
+                                    <a-tab-pane key="trend" title="趋势数据">
+                                        <a-table :columns="trendColumns" :data="currentReportDetail?.trend" size="small"
+                                            :scroll="{ y: 400 }" row-key="frame" />
+                                    </a-tab-pane>
+                                    <a-tab-pane key="json" title="原始 JSON">
+                                        <pre style="max-height: 400px; overflow: auto">{{
+                                            JSON.stringify(currentReportDetail?.rawJson, null, 2)
+                            }}</pre>
+                                    </a-tab-pane>
+                                </a-tabs>
+                            </a-modal>
+                        </a-col>
+                    </a-row>
+                </a-tab-pane>
+            </a-tabs>
+
+            <!-- 上传弹窗（已去掉处理结果） -->
+            <a-modal v-model:visible="showUploadModal" title="上传原始视频" width="600px" :ok-loading="uploading"
+                @ok="handleUpload" @cancel="showUploadModal = false">
+                <a-form :model="uploadForm" layout="vertical">
+                    <a-form-item label="项目" required>
+                        <a-select v-model="uploadForm.projectId" placeholder="请选择项目" :options="projectOptions"
+                            allow-clear @change="onProjectChangeUpload" />
+                    </a-form-item>
+                    <a-form-item label="机组">
+                        <a-select v-model="uploadForm.turbineId" placeholder="请选择机组" :options="turbineOptionsUpload"
+                            allow-clear :disabled="!uploadForm.projectId" />
+                    </a-form-item>
+                    <a-form-item label="类型" required>
+                        <a-select v-model="uploadForm.type" placeholder="请选择类型" :options="typeOptions" />
+                    </a-form-item>
+                    <a-form-item label="视频文件" required>
+                        <a-upload v-model:file-list="uploadForm.fileList" :multiple="uploadMode === 'batch'"
+                            :limit="uploadMode === 'batch' ? 10 : 1" accept="video/*" :auto-upload="false"
+                            list-type="picture-card" />
+                    </a-form-item>
+                    <a-form-item>
+                        <a-radio-group v-model="uploadMode" type="button">
+                            <a-radio value="single">单文件</a-radio>
+                            <a-radio value="batch">批量</a-radio>
+                        </a-radio-group>
+                    </a-form-item>
+                </a-form>
+            </a-modal>
+        </div>
+
+        <!-- 视频预览弹窗（仅保留原始视频） -->
+        <a-modal v-model:visible="previewVisible" title="视频预览" width="800px" :footer="false"
+            @cancel="previewVisible = false">
+            <a-tabs v-model:active-key="activePreviewTab">
+                <a-tab-pane key="video" title="原始视频">
+                    <video v-if="previewUrl" :src="previewUrl" controls
+                        style="width: 100%; max-height: 60vh; border-radius: 4px"></video>
+                </a-tab-pane>
+            </a-tabs>
+        </a-modal>
+    </GiPageLayout>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, watch, computed } from 'vue'
+import { Message } from '@arco-design/web-vue'
+import type { TableColumnData } from '@arco-design/web-vue'
+import { IconUpload } from '@arco-design/web-vue/es/icon'
+import {
+    getProjectList,
+    getTurbineList
+} from '@/apis/industrial-image'
+import {
+    getVideoPage,
+    uploadBatchVideo,
+    uploadSingleVideo,
+    deleteVideo,
+    downloadVideo
+} from '@/apis/video-monitor'
+
+/* ---------------- 下拉 & 表单 ---------------- */
+const projectOptions = ref<{ label: string; value: string }[]>([])
+const turbineOptions = ref<{ label: string; value: string }[]>([])
+const turbineOptionsUpload = ref<{ label: string; value: string }[]>([])
+const typeOptions = [
+    { label: '净空', value: 'clearance' },
+    { label: '形变', value: 'deformation' }
+]
+
+const filterForm = reactive({
+    projectId: '',
+    turbineId: ''
+})
+const uploadForm = reactive({
+    projectId: '',
+    turbineId: '',
+    type: '',
+    fileList: [] as any[]
+})
+const uploadMode = ref<'single' | 'batch'>('single')
+const reportDetailVisible = ref(false)
+const currentReportDetail = ref<ReportItem | null>(null)
+
+function openReportDetail(item: ReportItem) {
+    currentReportDetail.value = item
+    reportDetailVisible.value = true
+}
+/* ---------------- 列表 ---------------- */
+const columns: TableColumnData[] = [
+    { title: '文件名', dataIndex: 'videoName', ellipsis: true, width: 220 },
+    { title: '类型', slotName: 'type' },
+    { title: '上传时间', dataIndex: 'uploadTime' },
+    { title: '状态', slotName: 'status' },
+    { title: '操作', slotName: 'action', width: 120, fixed: 'right' }
+]
+const tableData = ref<any[]>([])
+const loading = ref(false)
+const pagination = reactive({ current: 1, pageSize: 20, total: 0 })
+
+/* ---------------- 顶部 Tab ---------------- */
+const topTab = ref<'data' | 'report'>('data')
+
+/* ---------------- 报告筛选 ---------------- */
+const reportFilterForm = reactive({
+    projectId: '',
+    turbineId: ''
+})
+const turbineReportOptions = ref<{ label: string; value: string }[]>([])
+
+watch(
+    () => reportFilterForm.projectId,
+    async (val) => {
+        reportFilterForm.turbineId = ''
+        turbineReportOptions.value = []
+        if (!val) return
+        const { data } = await getTurbineList({ projectId: val })
+        turbineReportOptions.value = data.map((t: any) => ({
+            label: t.turbineName,
+            value: t.turbineId
+        }))
+    }
+)
+
+/* ---------------- 报告网格 ---------------- */
+interface ReportItem {
+    videoId: string
+    videoName: string
+    videoUrl: string
+    min: string
+    max: string
+    avg: string
+    trend: any[]
+    rawJson: any
+    _activeKey?: string[]
+}
+const reportGrid = ref<ReportItem[]>([])
+
+async function loadReportGrid() {
+    loading.value = true
+    try {
+        const params = {
+            pageNo: 1,
+            pageSize: 1000,
+            projectId: reportFilterForm.projectId,
+            turbineId: reportFilterForm.turbineId || undefined
+        }
+        const { data } = await getVideoPage(params)
+        const rows = data.filter(
+            (r: any) => r.type === 'clearance' && r.preTreatment
+        )
+        const base = import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, '')
+
+        reportGrid.value = await Promise.all(
+            rows.map(async (r: any) => {
+                const jsonUrl = `${base}${r.preImagePath}/results.json`
+                const json = await (await fetch(jsonUrl)).json()
+
+                const all = Object.values(json.clearance_history || {})
+                    .flat()
+                    .filter((v: any) => typeof v === 'number')
+                const min = Math.min(...all)
+                const max = Math.max(...all)
+                const avg = all.reduce((a: number, b: number) => a + b, 0) / all.length
+
+                const { tip0, tip1, tip2 } = json.clearance_history || {}
+                const len = Math.max(tip0?.length ?? 0, tip1?.length ?? 0, tip2?.length ?? 0)
+                const trend = Array.from({ length: len }, (_, i) => ({
+                    frame: i + 1,
+                    tip0: tip0?.[i]?.toFixed(3) ?? '-',
+                    tip1: tip1?.[i]?.toFixed(3) ?? '-',
+                    tip2: tip2?.[i]?.toFixed(3) ?? '-'
+                }))
+
+                return {
+                    videoId: r.videoId,
+                    videoName: r.videoName,
+                    videoUrl: new URL(r.videoPath.replace(/^\/+/, ''), base).href,
+                    min: min.toFixed(2),
+                    max: max.toFixed(2),
+                    avg: avg.toFixed(2),
+                    trend,
+                    rawJson: json,
+                    _activeKey: []
+                }
+            })
+        )
+    } finally {
+        loading.value = false
+    }
+}
+
+function toggleDetail(item: ReportItem) {
+    item._activeKey = item._activeKey?.length ? [] : ['detail']
+}
+
+/* ---------------- 原列表逻辑 ---------------- */
+onMounted(async () => {
+    const { data } = await getProjectList({ page: 1, pageSize: 1000 })
+    projectOptions.value = data.map((p: any) => ({
+        label: p.projectName,
+        value: p.projectId
+    }))
+    handleQuery()
+})
+
+watch(
+    () => filterForm.projectId,
+    async (val) => {
+        filterForm.turbineId = ''
+        turbineOptions.value = []
+        if (!val) return
+        const { data } = await getTurbineList({ projectId: val })
+        turbineOptions.value = data.map((t: any) => ({
+            label: t.turbineName,
+            value: t.turbineId
+        }))
+    }
+)
+
+/* ---------------- 列表查询 ---------------- */
+function handleQuery() {
+    pagination.current = 1
+    loadTable()
+}
+async function loadTable() {
+    loading.value = true
+    try {
+        const params = {
+            pageNo: pagination.current,
+            pageSize: pagination.pageSize,
+            projectId: filterForm.projectId,
+            turbineId: filterForm.turbineId || undefined
+        }
+        const { data } = await getVideoPage(params)
+        tableData.value = data
+        pagination.total = data.length
+    } finally {
+        loading.value = false
+    }
+}
+
+/* ---------------- 上传 ---------------- */
+const showUploadModal = ref(false)
+const uploading = ref(false)
+
+function openUploadModal() {
+    uploadForm.projectId = ''
+    uploadForm.turbineId = ''
+    uploadForm.type = ''
+    uploadForm.fileList = []
+    showUploadModal.value = true
+}
+
+async function onProjectChangeUpload(projectId: string) {
+    uploadForm.turbineId = ''
+    turbineOptionsUpload.value = []
+    if (!projectId) return
+    const { data } = await getTurbineList({ projectId })
+    turbineOptionsUpload.value = data.map((t: any) => ({
+        label: t.turbineName,
+        value: t.turbineId
+    }))
+}
+
+async function handleUpload() {
+    if (!uploadForm.projectId || !uploadForm.type || !uploadForm.fileList.length) {
+        Message.warning('请完整填写')
+        return
+    }
+    uploading.value = true
+    try {
+        const files = uploadForm.fileList.map((f: any) => f.file)
+        if (uploadMode.value === 'single') {
+            await uploadSingleVideo(
+                uploadForm.projectId,
+                uploadForm.turbineId || '',
+                uploadForm.type,
+                files[0]
+            )
+        } else {
+            await uploadBatchVideo(
+                uploadForm.projectId,
+                uploadForm.turbineId || '',
+                uploadForm.type,
+                files
+            )
+        }
+        Message.success('上传成功')
+        showUploadModal.value = false
+        loadTable()
+        // 如果当前在报告页，顺带刷新
+        if (topTab.value === 'report') await loadReportGrid()
+    } finally {
+        uploading.value = false
+    }
+}
+
+/* ---------------- 下载 / 删除 ---------------- */
+async function handleDownload(row: any) {
+    const url = await downloadVideo(row.videoId)
+    window.open(url, '_blank')
+}
+async function handleDelete(row: any) {
+    await deleteVideo(row.videoId)
+    Message.success('删除成功')
+    loadTable()
+    if (topTab.value === 'report') await loadReportGrid()
+}
+
+/* ---------------- 预览 ---------------- */
+const previewVisible = ref(false)
+const previewUrl = ref('')
+const activePreviewTab = ref<'video' | 'result'>('video')
+
+function handlePreview(row: any) {
+    const base = import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, '')
+    previewUrl.value = new URL(row.videoPath.replace(/^\/+/, ''), base).href
+    previewVisible.value = true
+    activePreviewTab.value = 'video'
+}
+
+/* ---------------- 趋势表格列 ---------------- */
+const trendColumns = [
+    { title: '帧', dataIndex: 'frame', width: 70 },
+    { title: 'tip0 (m)', dataIndex: 'tip0' },
+    { title: 'tip1 (m)', dataIndex: 'tip1' },
+    { title: 'tip2 (m)', dataIndex: 'tip2' }
+]
+</script>
+
+
+<style scoped lang="scss">
+.raw-data-container {
+    padding: 20px;
+}
+
+.page-header {
+    margin-bottom: 20px;
+}
+
+.page-title {
+    font-size: 28px;
+    font-weight: 600;
+    margin: 0 0 8px 0;
+    color: #1d2129;
+}
+
+.page-subtitle {
+    font-size: 14px;
+    color: #86909c;
+    margin: 0;
+}
+
+.action-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+
+    .filter-section {
+        margin-left: 24px;
+    }
+}
+
+.project-sections {
+    .project-section {
+        margin-bottom: 32px;
+        background: #fff;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px #f0f1f2;
+        padding: 20px;
+
+        .project-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 16px;
+
+            .project-title {
+                font-size: 20px;
+                font-weight: 600;
+            }
+
+            .project-stats {
+                display: flex;
+                gap: 16px;
+
+                .stat-item {
+                    display: flex;
+                    align-items: center;
+                    gap: 4px;
+                    color: #86909c;
+                }
+            }
+        }
+
+        .units-grid {
+            display: flex;
+            gap: 24px;
+            flex-wrap: wrap;
+
+            .unit-card {
+                background: #fafbfc;
+                border-radius: 8px;
+                padding: 16px;
+                width: 360px;
+                margin-bottom: 16px;
+
+                .unit-header {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    margin-bottom: 12px;
+
+                    .unit-title {
+                        font-size: 16px;
+                        font-weight: 600;
+                    }
+
+                    .unit-actions {
+                        display: flex;
+                        gap: 8px;
+                    }
+                }
+
+                .videos-list {
+                    display: flex;
+                    gap: 12px;
+                    margin-bottom: 8px;
+
+                    .video-item {
+                        width: 100px;
+
+                        .video-thumbnail {
+                            position: relative;
+                            width: 100px;
+                            height: 60px;
+                            border-radius: 6px;
+                            overflow: hidden;
+
+                            img {
+                                width: 100%;
+                                height: 100%;
+                                object-fit: cover;
+                            }
+
+                            .video-overlay {
+                                position: absolute;
+                                top: 0;
+                                left: 0;
+                                right: 0;
+                                bottom: 0;
+                                display: flex;
+                                align-items: center;
+                                justify-content: center;
+                                background: rgba(0, 0, 0, 0.2);
+                                opacity: 0;
+                                transition: opacity 0.2s;
+
+                                &:hover {
+                                    opacity: 1;
+                                }
+                            }
+                        }
+
+                        .video-info {
+                            margin-top: 4px;
+
+                            .video-name {
+                                font-size: 12px;
+                                font-weight: 500;
+                                color: #1d2129;
+                                white-space: nowrap;
+                                overflow: hidden;
+                                text-overflow: ellipsis;
+                            }
+
+                            .video-meta {
+                                font-size: 11px;
+                                color: #86909c;
+                                display: flex;
+                                gap: 4px;
+                            }
+
+                            .video-status {
+                                margin-top: 2px;
+                            }
+                        }
+                    }
+                }
+
+                .analysis-progress {
+                    margin-top: 8px;
+
+                    .progress-info {
+                        display: flex;
+                        justify-content: space-between;
+                        font-size: 12px;
+                        color: #86909c;
+                        margin-bottom: 2px;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.video-meta-info {
+    margin-top: 16px;
+    font-size: 13px;
+    color: #4e5969;
+
+    p {
+        margin: 2px 0;
+    }
+}
+
+.video-name {
+    margin-top: 6px;
+    font-size: 14px;
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.stat-label {
+    font-size: 12px;
+    color: #86909c;
+}
+
+.stat-value {
+    font-size: 16px;
+    font-weight: 600;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/tower-monitoring/vibration.vue b/src/views/tower-monitoring/vibration.vue
new file mode 100644
index 0000000..07d9e49
--- /dev/null
+++ b/src/views/tower-monitoring/vibration.vue
@@ -0,0 +1,497 @@
+<template>
+    <GiPageLayout>
+        <div class="raw-data-container">
+            <!-- 顶部按钮 -->
+            <div class="action-bar">
+                <div class="action-buttons">
+                    <a-button type="primary" @click="openUploadModal">
+                        <template #icon>
+                            <IconUpload />
+                        </template>
+                        上传视频
+                    </a-button>
+                </div>
+            </div>
+
+            <!-- 筛选 -->
+            <div class="filter-section">
+                <a-form :model="filterForm" layout="inline">
+                    <a-form-item label="项目" required>
+                        <a-select v-model="filterForm.projectId" placeholder="请选择项目" :options="projectOptions"
+                            allow-clear @change="" />
+                    </a-form-item>
+                    <a-form-item label="机组">
+                        <a-select v-model="filterForm.turbineId" placeholder="请选择机组" :options="turbineOptions"
+                            allow-clear :disabled="!filterForm.projectId" />
+                    </a-form-item>
+                    <a-form-item>
+                        <a-button type="primary" @click="handleQuery">查询</a-button>
+                    </a-form-item>
+                </a-form>
+            </div>
+
+            <!-- 列表 -->
+            <a-table :columns="columns" :data="tableData" :pagination="pagination" :loading="loading"
+                :scroll="{ y: 'calc(100vh - 380px)' }">
+                <template #type="{ record }">
+                    <a-tag>{{ record.type === 'clearance' ? '净空' : '形变' }}</a-tag>
+                </template>
+                <template #status="{ record }">
+                    <a-tag :color="record.preTreatment ? 'green' : 'red'">
+                        {{ record.preTreatment ? '已处理' : '未处理' }}
+                    </a-tag>
+                </template>
+                <template #action="{ record }">
+                    <a-space>
+                        <a-button size="mini" @click="handlePreview(record)">预览</a-button>
+                        <a-button size="mini" @click="handleDownload(record)">下载</a-button>
+                        <a-popconfirm content="确认删除？" @ok="handleDelete(record)">
+                            <a-button size="mini" status="danger">删除</a-button>
+                        </a-popconfirm>
+                    </a-space>
+
+                </template>
+            </a-table>
+
+            <!-- 上传弹窗 -->
+            <a-modal v-model:visible="showUploadModal" title="上传原始视频" width="600px" :ok-loading="uploading"
+                @ok="handleUpload" @cancel="showUploadModal = false">
+                <a-form :model="uploadForm" layout="vertical">
+                    <a-form-item label="项目" required>
+                        <a-select v-model="uploadForm.projectId" placeholder="请选择项目" :options="projectOptions"
+                            allow-clear @change="onProjectChangeUpload" />
+                    </a-form-item>
+                    <a-form-item label="机组">
+                        <a-select v-model="uploadForm.turbineId" placeholder="请选择机组" :options="turbineOptionsUpload"
+                            allow-clear :disabled="!uploadForm.projectId" />
+                    </a-form-item>
+                    <a-form-item label="类型" required>
+                        <a-select v-model="uploadForm.type" placeholder="请选择类型" :options="typeOptions" />
+                    </a-form-item>
+                    <a-form-item label="视频文件" required>
+                        <a-upload v-model:file-list="uploadForm.fileList" :multiple="uploadMode === 'batch'"
+                            :limit="uploadMode === 'batch' ? 10 : 1" accept="video/*" :auto-upload="false"
+                            list-type="picture-card" />
+                    </a-form-item>
+                    <a-form-item>
+                        <a-radio-group v-model="uploadMode" type="button">
+                            <a-radio value="single">单文件</a-radio>
+                            <a-radio value="batch">批量</a-radio>
+                        </a-radio-group>
+                    </a-form-item>
+                </a-form>
+            </a-modal>
+        </div>
+    </GiPageLayout>
+    <!-- 视频预览弹窗 -->
+    <a-modal v-model:visible="previewVisible" title="视频预览" width="800px" :footer="false"
+        @cancel="previewVisible = false">
+        <a-tabs v-model:active-key="activePreviewTab" @change="activePreviewTab = $event as any">
+            <!-- 原始视频 -->
+            <a-tab-pane key="video" title="原始视频">
+                <video v-if="previewUrl" :src="previewUrl" controls
+                    style="width: 100%; max-height: 60vh; border-radius: 4px"></video>
+            </a-tab-pane>
+
+            <!-- 处理结果 -->
+            <a-tab-pane key="result" title="处理结果">
+                <a-spin :loading="loadingResult">
+                    <a-space direction="vertical" size="medium" style="width: 100%">
+                        <!-- 图片 -->
+                        <img v-if="resultImgUrl" :src="resultImgUrl" style="max-width: 100%; border-radius: 4px"
+                            alt="last frame" />
+
+                        <!-- JSON 预览 -->
+                        <a-card title="results.json" size="small">
+                            <pre>{{ JSON.stringify(resultJson, null, 2) }}</pre>
+                        </a-card>
+                    </a-space>
+                </a-spin>
+            </a-tab-pane>
+        </a-tabs>
+    </a-modal>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, watch } from 'vue'
+import { Message } from '@arco-design/web-vue'
+import type { TableColumnData } from '@arco-design/web-vue'
+import { IconUpload } from '@arco-design/web-vue/es/icon'
+import {
+    getProjectList,
+    getTurbineList
+} from '@/apis/industrial-image'
+import {
+    getVideoPage,
+    uploadBatchVideo,
+    uploadSingleVideo,
+    deleteVideo,
+    downloadVideo
+} from '@/apis/video-monitor'
+
+/* ---------------- 下拉 & 表单 ---------------- */
+const projectOptions = ref<{ label: string; value: string }[]>([])
+const turbineOptions = ref<{ label: string; value: string }[]>([])       // 筛选用
+const turbineOptionsUpload = ref<{ label: string; value: string }[]>([]) // 上传弹窗用
+const typeOptions = [
+    { label: '净空', value: 'clearance' },
+    { label: '形变', value: 'deformation' }
+]
+
+const filterForm = reactive({
+    projectId: '',
+    turbineId: ''
+})
+
+const uploadForm = reactive({
+    projectId: '',
+    turbineId: '',
+    type: '',
+    fileList: [] as any[]
+})
+
+const uploadMode = ref<'single' | 'batch'>('single')
+
+/* ---------------- 列表 ---------------- */
+const columns: TableColumnData[] = [
+    { title: '文件名', dataIndex: 'videoName', ellipsis: true, width: 220 },
+    // { title: '项目', dataIndex: 'projectName' },
+    // { title: '机组', dataIndex: 'turbineName' },
+    { title: '类型', slotName: 'type' },
+    { title: '上传时间', dataIndex: 'uploadTime' },
+    { title: '状态', slotName: 'status' },
+    { title: '操作', slotName: 'action', width: 120, fixed: 'right' }
+]
+
+const tableData = ref<any[]>([])
+const loading = ref(false)
+const pagination = reactive({ current: 1, pageSize: 20, total: 0 })
+
+/* ---------------- 控制弹窗 ---------------- */
+const showUploadModal = ref(false)
+const uploading = ref(false)
+
+/* ---------------- 初始化 ---------------- */
+onMounted(async () => {
+    const { data } = await getProjectList({ page: 1, pageSize: 1000 })
+    projectOptions.value = data.map((p: any) => ({ label: p.projectName, value: p.projectId }))
+    handleQuery()
+})
+const activePreviewTab = ref<'video' | 'result'>('video')   // 当前标签页
+const resultImgUrl = ref('')
+const resultJson = ref<Record<string, any>>({})
+const loadingResult = ref(false)
+
+async function loadResultFiles(row: any) {
+    if (!row.preTreatment) return
+    loadingResult.value = true
+    try {
+        const base = import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, '')
+        // 图片
+        resultImgUrl.value = `${base}${row.preImagePath}/last_frame.jpg`
+
+        // JSON
+        const jsonUrl = `${base}${row.preImagePath}/results.json`
+        const res = await fetch(jsonUrl)
+        resultJson.value = await res.json()
+    } catch (e) {
+        console.error(e)
+        resultJson.value = {}
+    } finally {
+        loadingResult.value = false
+    }
+    console.log('result', resultImgUrl.value)
+}
+/* 项目 -> 机组（筛选） */
+watch(
+    () => filterForm.projectId,
+    async (val) => {
+        filterForm.turbineId = ''
+        turbineOptions.value = []
+        if (!val) return
+        const { data } = await getTurbineList({ projectId: val })
+        turbineOptions.value = data.map((t: any) => ({ label: t.turbineName, value: t.turbineId }))
+    }
+)
+const previewVisible = ref(false)
+const previewUrl = ref('')
+
+function handlePreview(row: any) {
+    const base = import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, '')
+    previewUrl.value = new URL(row.videoPath.replace(/^\/+/, ''), base).href
+    previewVisible.value = true
+    activePreviewTab.value = 'video'     // 默认先显示视频
+    if (row.preTreatment) {
+        loadResultFiles(row)               // 预加载结果
+    }
+}
+/* 项目 -> 机组（上传弹窗） */
+async function onProjectChangeUpload(projectId: string) {
+    uploadForm.turbineId = ''
+    turbineOptionsUpload.value = []
+    if (!projectId) return
+    const { data } = await getTurbineList({ projectId })
+    turbineOptionsUpload.value = data.map((t: any) => ({ label: t.turbineName, value: t.turbineId }))
+}
+
+/* ---------------- 查询 ---------------- */
+function handleQuery() {
+    pagination.current = 1
+    loadTable()
+}
+async function loadTable() {
+    loading.value = true
+    try {
+        const params = {
+            pageNo: pagination.current,
+            pageSize: pagination.pageSize,
+            projectId: filterForm.projectId,
+            turbineId: filterForm.turbineId || undefined
+        }
+        const { data } = await getVideoPage(params)
+        console.log(data)
+        tableData.value = data
+        pagination.total = data.length
+    } finally {
+        loading.value = false
+    }
+}
+
+/* ---------------- 上传 ---------------- */
+function openUploadModal() {
+    uploadForm.projectId = ''
+    uploadForm.turbineId = ''
+    uploadForm.type = ''
+    uploadForm.fileList = []
+    showUploadModal.value = true
+}
+async function handleUpload() {
+    if (!uploadForm.projectId || !uploadForm.type || !uploadForm.fileList.length) {
+        Message.warning('请完整填写')
+        return
+    }
+    uploading.value = true
+    try {
+        const files = uploadForm.fileList.map((f: any) => f.file)
+        if (uploadMode.value === 'single') {
+            await uploadSingleVideo(
+                uploadForm.projectId,
+                uploadForm.turbineId || '',
+                uploadForm.type,
+                files[0]
+            )
+        } else {
+            await uploadBatchVideo(
+                uploadForm.projectId,
+                uploadForm.turbineId || '',
+                uploadForm.type,
+                files
+            )
+        }
+        Message.success('上传成功')
+        showUploadModal.value = false
+        loadTable()
+    } finally {
+        uploading.value = false
+    }
+}
+
+/* ---------------- 下载 / 删除 ---------------- */
+async function handleDownload(row: any) {
+    const url = await downloadVideo(row.videoId)
+    window.open(url, '_blank')
+}
+async function handleDelete(row: any) {
+    await deleteVideo(row.videoId)
+    Message.success('删除成功')
+    loadTable()
+}
+</script>
+
+
+<style scoped lang="scss">
+.raw-data-container {
+    padding: 20px;
+}
+
+.page-header {
+    margin-bottom: 20px;
+}
+
+.page-title {
+    font-size: 28px;
+    font-weight: 600;
+    margin: 0 0 8px 0;
+    color: #1d2129;
+}
+
+.page-subtitle {
+    font-size: 14px;
+    color: #86909c;
+    margin: 0;
+}
+
+.action-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+
+    .filter-section {
+        margin-left: 24px;
+    }
+}
+
+.project-sections {
+    .project-section {
+        margin-bottom: 32px;
+        background: #fff;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px #f0f1f2;
+        padding: 20px;
+
+        .project-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 16px;
+
+            .project-title {
+                font-size: 20px;
+                font-weight: 600;
+            }
+
+            .project-stats {
+                display: flex;
+                gap: 16px;
+
+                .stat-item {
+                    display: flex;
+                    align-items: center;
+                    gap: 4px;
+                    color: #86909c;
+                }
+            }
+        }
+
+        .units-grid {
+            display: flex;
+            gap: 24px;
+            flex-wrap: wrap;
+
+            .unit-card {
+                background: #fafbfc;
+                border-radius: 8px;
+                padding: 16px;
+                width: 360px;
+                margin-bottom: 16px;
+
+                .unit-header {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    margin-bottom: 12px;
+
+                    .unit-title {
+                        font-size: 16px;
+                        font-weight: 600;
+                    }
+
+                    .unit-actions {
+                        display: flex;
+                        gap: 8px;
+                    }
+                }
+
+                .videos-list {
+                    display: flex;
+                    gap: 12px;
+                    margin-bottom: 8px;
+
+                    .video-item {
+                        width: 100px;
+
+                        .video-thumbnail {
+                            position: relative;
+                            width: 100px;
+                            height: 60px;
+                            border-radius: 6px;
+                            overflow: hidden;
+
+                            img {
+                                width: 100%;
+                                height: 100%;
+                                object-fit: cover;
+                            }
+
+                            .video-overlay {
+                                position: absolute;
+                                top: 0;
+                                left: 0;
+                                right: 0;
+                                bottom: 0;
+                                display: flex;
+                                align-items: center;
+                                justify-content: center;
+                                background: rgba(0, 0, 0, 0.2);
+                                opacity: 0;
+                                transition: opacity 0.2s;
+
+                                &:hover {
+                                    opacity: 1;
+                                }
+                            }
+                        }
+
+                        .video-info {
+                            margin-top: 4px;
+
+                            .video-name {
+                                font-size: 12px;
+                                font-weight: 500;
+                                color: #1d2129;
+                                white-space: nowrap;
+                                overflow: hidden;
+                                text-overflow: ellipsis;
+                            }
+
+                            .video-meta {
+                                font-size: 11px;
+                                color: #86909c;
+                                display: flex;
+                                gap: 4px;
+                            }
+
+                            .video-status {
+                                margin-top: 2px;
+                            }
+                        }
+                    }
+                }
+
+                .analysis-progress {
+                    margin-top: 8px;
+
+                    .progress-info {
+                        display: flex;
+                        justify-content: space-between;
+                        font-size: 12px;
+                        color: #86909c;
+                        margin-bottom: 2px;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.video-meta-info {
+    margin-top: 16px;
+    font-size: 13px;
+    color: #4e5969;
+
+    p {
+        margin: 2px 0;
+    }
+}
+</style>
diff --git a/src/views/tower-monitoring/whistle.vue b/src/views/tower-monitoring/whistle.vue
new file mode 100644
index 0000000..07d9e49
--- /dev/null
+++ b/src/views/tower-monitoring/whistle.vue
@@ -0,0 +1,497 @@
+<template>
+    <GiPageLayout>
+        <div class="raw-data-container">
+            <!-- 顶部按钮 -->
+            <div class="action-bar">
+                <div class="action-buttons">
+                    <a-button type="primary" @click="openUploadModal">
+                        <template #icon>
+                            <IconUpload />
+                        </template>
+                        上传视频
+                    </a-button>
+                </div>
+            </div>
+
+            <!-- 筛选 -->
+            <div class="filter-section">
+                <a-form :model="filterForm" layout="inline">
+                    <a-form-item label="项目" required>
+                        <a-select v-model="filterForm.projectId" placeholder="请选择项目" :options="projectOptions"
+                            allow-clear @change="" />
+                    </a-form-item>
+                    <a-form-item label="机组">
+                        <a-select v-model="filterForm.turbineId" placeholder="请选择机组" :options="turbineOptions"
+                            allow-clear :disabled="!filterForm.projectId" />
+                    </a-form-item>
+                    <a-form-item>
+                        <a-button type="primary" @click="handleQuery">查询</a-button>
+                    </a-form-item>
+                </a-form>
+            </div>
+
+            <!-- 列表 -->
+            <a-table :columns="columns" :data="tableData" :pagination="pagination" :loading="loading"
+                :scroll="{ y: 'calc(100vh - 380px)' }">
+                <template #type="{ record }">
+                    <a-tag>{{ record.type === 'clearance' ? '净空' : '形变' }}</a-tag>
+                </template>
+                <template #status="{ record }">
+                    <a-tag :color="record.preTreatment ? 'green' : 'red'">
+                        {{ record.preTreatment ? '已处理' : '未处理' }}
+                    </a-tag>
+                </template>
+                <template #action="{ record }">
+                    <a-space>
+                        <a-button size="mini" @click="handlePreview(record)">预览</a-button>
+                        <a-button size="mini" @click="handleDownload(record)">下载</a-button>
+                        <a-popconfirm content="确认删除？" @ok="handleDelete(record)">
+                            <a-button size="mini" status="danger">删除</a-button>
+                        </a-popconfirm>
+                    </a-space>
+
+                </template>
+            </a-table>
+
+            <!-- 上传弹窗 -->
+            <a-modal v-model:visible="showUploadModal" title="上传原始视频" width="600px" :ok-loading="uploading"
+                @ok="handleUpload" @cancel="showUploadModal = false">
+                <a-form :model="uploadForm" layout="vertical">
+                    <a-form-item label="项目" required>
+                        <a-select v-model="uploadForm.projectId" placeholder="请选择项目" :options="projectOptions"
+                            allow-clear @change="onProjectChangeUpload" />
+                    </a-form-item>
+                    <a-form-item label="机组">
+                        <a-select v-model="uploadForm.turbineId" placeholder="请选择机组" :options="turbineOptionsUpload"
+                            allow-clear :disabled="!uploadForm.projectId" />
+                    </a-form-item>
+                    <a-form-item label="类型" required>
+                        <a-select v-model="uploadForm.type" placeholder="请选择类型" :options="typeOptions" />
+                    </a-form-item>
+                    <a-form-item label="视频文件" required>
+                        <a-upload v-model:file-list="uploadForm.fileList" :multiple="uploadMode === 'batch'"
+                            :limit="uploadMode === 'batch' ? 10 : 1" accept="video/*" :auto-upload="false"
+                            list-type="picture-card" />
+                    </a-form-item>
+                    <a-form-item>
+                        <a-radio-group v-model="uploadMode" type="button">
+                            <a-radio value="single">单文件</a-radio>
+                            <a-radio value="batch">批量</a-radio>
+                        </a-radio-group>
+                    </a-form-item>
+                </a-form>
+            </a-modal>
+        </div>
+    </GiPageLayout>
+    <!-- 视频预览弹窗 -->
+    <a-modal v-model:visible="previewVisible" title="视频预览" width="800px" :footer="false"
+        @cancel="previewVisible = false">
+        <a-tabs v-model:active-key="activePreviewTab" @change="activePreviewTab = $event as any">
+            <!-- 原始视频 -->
+            <a-tab-pane key="video" title="原始视频">
+                <video v-if="previewUrl" :src="previewUrl" controls
+                    style="width: 100%; max-height: 60vh; border-radius: 4px"></video>
+            </a-tab-pane>
+
+            <!-- 处理结果 -->
+            <a-tab-pane key="result" title="处理结果">
+                <a-spin :loading="loadingResult">
+                    <a-space direction="vertical" size="medium" style="width: 100%">
+                        <!-- 图片 -->
+                        <img v-if="resultImgUrl" :src="resultImgUrl" style="max-width: 100%; border-radius: 4px"
+                            alt="last frame" />
+
+                        <!-- JSON 预览 -->
+                        <a-card title="results.json" size="small">
+                            <pre>{{ JSON.stringify(resultJson, null, 2) }}</pre>
+                        </a-card>
+                    </a-space>
+                </a-spin>
+            </a-tab-pane>
+        </a-tabs>
+    </a-modal>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, watch } from 'vue'
+import { Message } from '@arco-design/web-vue'
+import type { TableColumnData } from '@arco-design/web-vue'
+import { IconUpload } from '@arco-design/web-vue/es/icon'
+import {
+    getProjectList,
+    getTurbineList
+} from '@/apis/industrial-image'
+import {
+    getVideoPage,
+    uploadBatchVideo,
+    uploadSingleVideo,
+    deleteVideo,
+    downloadVideo
+} from '@/apis/video-monitor'
+
+/* ---------------- 下拉 & 表单 ---------------- */
+const projectOptions = ref<{ label: string; value: string }[]>([])
+const turbineOptions = ref<{ label: string; value: string }[]>([])       // 筛选用
+const turbineOptionsUpload = ref<{ label: string; value: string }[]>([]) // 上传弹窗用
+const typeOptions = [
+    { label: '净空', value: 'clearance' },
+    { label: '形变', value: 'deformation' }
+]
+
+const filterForm = reactive({
+    projectId: '',
+    turbineId: ''
+})
+
+const uploadForm = reactive({
+    projectId: '',
+    turbineId: '',
+    type: '',
+    fileList: [] as any[]
+})
+
+const uploadMode = ref<'single' | 'batch'>('single')
+
+/* ---------------- 列表 ---------------- */
+const columns: TableColumnData[] = [
+    { title: '文件名', dataIndex: 'videoName', ellipsis: true, width: 220 },
+    // { title: '项目', dataIndex: 'projectName' },
+    // { title: '机组', dataIndex: 'turbineName' },
+    { title: '类型', slotName: 'type' },
+    { title: '上传时间', dataIndex: 'uploadTime' },
+    { title: '状态', slotName: 'status' },
+    { title: '操作', slotName: 'action', width: 120, fixed: 'right' }
+]
+
+const tableData = ref<any[]>([])
+const loading = ref(false)
+const pagination = reactive({ current: 1, pageSize: 20, total: 0 })
+
+/* ---------------- 控制弹窗 ---------------- */
+const showUploadModal = ref(false)
+const uploading = ref(false)
+
+/* ---------------- 初始化 ---------------- */
+onMounted(async () => {
+    const { data } = await getProjectList({ page: 1, pageSize: 1000 })
+    projectOptions.value = data.map((p: any) => ({ label: p.projectName, value: p.projectId }))
+    handleQuery()
+})
+const activePreviewTab = ref<'video' | 'result'>('video')   // 当前标签页
+const resultImgUrl = ref('')
+const resultJson = ref<Record<string, any>>({})
+const loadingResult = ref(false)
+
+async function loadResultFiles(row: any) {
+    if (!row.preTreatment) return
+    loadingResult.value = true
+    try {
+        const base = import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, '')
+        // 图片
+        resultImgUrl.value = `${base}${row.preImagePath}/last_frame.jpg`
+
+        // JSON
+        const jsonUrl = `${base}${row.preImagePath}/results.json`
+        const res = await fetch(jsonUrl)
+        resultJson.value = await res.json()
+    } catch (e) {
+        console.error(e)
+        resultJson.value = {}
+    } finally {
+        loadingResult.value = false
+    }
+    console.log('result', resultImgUrl.value)
+}
+/* 项目 -> 机组（筛选） */
+watch(
+    () => filterForm.projectId,
+    async (val) => {
+        filterForm.turbineId = ''
+        turbineOptions.value = []
+        if (!val) return
+        const { data } = await getTurbineList({ projectId: val })
+        turbineOptions.value = data.map((t: any) => ({ label: t.turbineName, value: t.turbineId }))
+    }
+)
+const previewVisible = ref(false)
+const previewUrl = ref('')
+
+function handlePreview(row: any) {
+    const base = import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, '')
+    previewUrl.value = new URL(row.videoPath.replace(/^\/+/, ''), base).href
+    previewVisible.value = true
+    activePreviewTab.value = 'video'     // 默认先显示视频
+    if (row.preTreatment) {
+        loadResultFiles(row)               // 预加载结果
+    }
+}
+/* 项目 -> 机组（上传弹窗） */
+async function onProjectChangeUpload(projectId: string) {
+    uploadForm.turbineId = ''
+    turbineOptionsUpload.value = []
+    if (!projectId) return
+    const { data } = await getTurbineList({ projectId })
+    turbineOptionsUpload.value = data.map((t: any) => ({ label: t.turbineName, value: t.turbineId }))
+}
+
+/* ---------------- 查询 ---------------- */
+function handleQuery() {
+    pagination.current = 1
+    loadTable()
+}
+async function loadTable() {
+    loading.value = true
+    try {
+        const params = {
+            pageNo: pagination.current,
+            pageSize: pagination.pageSize,
+            projectId: filterForm.projectId,
+            turbineId: filterForm.turbineId || undefined
+        }
+        const { data } = await getVideoPage(params)
+        console.log(data)
+        tableData.value = data
+        pagination.total = data.length
+    } finally {
+        loading.value = false
+    }
+}
+
+/* ---------------- 上传 ---------------- */
+function openUploadModal() {
+    uploadForm.projectId = ''
+    uploadForm.turbineId = ''
+    uploadForm.type = ''
+    uploadForm.fileList = []
+    showUploadModal.value = true
+}
+async function handleUpload() {
+    if (!uploadForm.projectId || !uploadForm.type || !uploadForm.fileList.length) {
+        Message.warning('请完整填写')
+        return
+    }
+    uploading.value = true
+    try {
+        const files = uploadForm.fileList.map((f: any) => f.file)
+        if (uploadMode.value === 'single') {
+            await uploadSingleVideo(
+                uploadForm.projectId,
+                uploadForm.turbineId || '',
+                uploadForm.type,
+                files[0]
+            )
+        } else {
+            await uploadBatchVideo(
+                uploadForm.projectId,
+                uploadForm.turbineId || '',
+                uploadForm.type,
+                files
+            )
+        }
+        Message.success('上传成功')
+        showUploadModal.value = false
+        loadTable()
+    } finally {
+        uploading.value = false
+    }
+}
+
+/* ---------------- 下载 / 删除 ---------------- */
+async function handleDownload(row: any) {
+    const url = await downloadVideo(row.videoId)
+    window.open(url, '_blank')
+}
+async function handleDelete(row: any) {
+    await deleteVideo(row.videoId)
+    Message.success('删除成功')
+    loadTable()
+}
+</script>
+
+
+<style scoped lang="scss">
+.raw-data-container {
+    padding: 20px;
+}
+
+.page-header {
+    margin-bottom: 20px;
+}
+
+.page-title {
+    font-size: 28px;
+    font-weight: 600;
+    margin: 0 0 8px 0;
+    color: #1d2129;
+}
+
+.page-subtitle {
+    font-size: 14px;
+    color: #86909c;
+    margin: 0;
+}
+
+.action-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+
+    .filter-section {
+        margin-left: 24px;
+    }
+}
+
+.project-sections {
+    .project-section {
+        margin-bottom: 32px;
+        background: #fff;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px #f0f1f2;
+        padding: 20px;
+
+        .project-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 16px;
+
+            .project-title {
+                font-size: 20px;
+                font-weight: 600;
+            }
+
+            .project-stats {
+                display: flex;
+                gap: 16px;
+
+                .stat-item {
+                    display: flex;
+                    align-items: center;
+                    gap: 4px;
+                    color: #86909c;
+                }
+            }
+        }
+
+        .units-grid {
+            display: flex;
+            gap: 24px;
+            flex-wrap: wrap;
+
+            .unit-card {
+                background: #fafbfc;
+                border-radius: 8px;
+                padding: 16px;
+                width: 360px;
+                margin-bottom: 16px;
+
+                .unit-header {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    margin-bottom: 12px;
+
+                    .unit-title {
+                        font-size: 16px;
+                        font-weight: 600;
+                    }
+
+                    .unit-actions {
+                        display: flex;
+                        gap: 8px;
+                    }
+                }
+
+                .videos-list {
+                    display: flex;
+                    gap: 12px;
+                    margin-bottom: 8px;
+
+                    .video-item {
+                        width: 100px;
+
+                        .video-thumbnail {
+                            position: relative;
+                            width: 100px;
+                            height: 60px;
+                            border-radius: 6px;
+                            overflow: hidden;
+
+                            img {
+                                width: 100%;
+                                height: 100%;
+                                object-fit: cover;
+                            }
+
+                            .video-overlay {
+                                position: absolute;
+                                top: 0;
+                                left: 0;
+                                right: 0;
+                                bottom: 0;
+                                display: flex;
+                                align-items: center;
+                                justify-content: center;
+                                background: rgba(0, 0, 0, 0.2);
+                                opacity: 0;
+                                transition: opacity 0.2s;
+
+                                &:hover {
+                                    opacity: 1;
+                                }
+                            }
+                        }
+
+                        .video-info {
+                            margin-top: 4px;
+
+                            .video-name {
+                                font-size: 12px;
+                                font-weight: 500;
+                                color: #1d2129;
+                                white-space: nowrap;
+                                overflow: hidden;
+                                text-overflow: ellipsis;
+                            }
+
+                            .video-meta {
+                                font-size: 11px;
+                                color: #86909c;
+                                display: flex;
+                                gap: 4px;
+                            }
+
+                            .video-status {
+                                margin-top: 2px;
+                            }
+                        }
+                    }
+                }
+
+                .analysis-progress {
+                    margin-top: 8px;
+
+                    .progress-info {
+                        display: flex;
+                        justify-content: space-between;
+                        font-size: 12px;
+                        color: #86909c;
+                        margin-bottom: 2px;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.video-meta-info {
+    margin-top: 16px;
+    font-size: 13px;
+    color: #4e5969;
+
+    p {
+        margin: 2px 0;
+    }
+}
+</style>