diff --git a/warehouse/src/view/video/History.vue b/warehouse/src/view/video/History.vue
index beeaac3..670e36a 100644
--- a/warehouse/src/view/video/History.vue
+++ b/warehouse/src/view/video/History.vue
@@ -3,25 +3,17 @@
     <div class="monitor-header">
       <h2>历史回放</h2>
       <div class="monitor-controls">
-        <el-button type="primary" size="small">刷新</el-button>
+        <el-button type="primary" size="small" @click="loadCameras">刷新</el-button>
         <el-button size="small" plain>全屏显示</el-button>
       </div>
     </div>
     
-    <!-- 日期时间选择 -->
     <div class="date-filter">
       <h3>时间段选择</h3>
       <div class="date-filter-controls">
-        <el-date-picker
-          v-model="dateTimeRange"
-          type="daterange"
-          range-separator="至"
-          start-placeholder="开始日期时间"
-          end-placeholder="结束日期时间"
-          value-format="YYYY-MM-DD HH:mm:ss"
-          format="YYYY-MM-DD HH:mm:ss"
-          style="width: 400px;"
-        ></el-date-picker>
+        <el-date-picker v-model="dateTimeRange" type="daterange" range-separator="至"
+          start-placeholder="开始日期时间" end-placeholder="结束日期时间"
+          value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" style="width: 400px;" />
         <el-button type="primary" size="small" @click="searchRecordings">查询</el-button>
         <el-button size="small" plain @click="resetDateTimeRange">重置</el-button>
       </div>
@@ -33,9 +25,7 @@
         <div class="camera-info">
           <div class="camera-name">{{ camera.name }}</div>
           <div class="camera-location">{{ camera.location }}</div>
-          <div class="camera-status" :class="camera.status">
-            {{ camera.status === 'online' ? '在线' : '离线' }}
-          </div>
+          <div class="camera-status" :class="camera.status">{{ camera.status === 'online' ? '在线' : '离线' }}</div>
         </div>
       </el-card>
     </div>
@@ -43,29 +33,12 @@
     <div class="main-view">
       <h3>历史回放画面</h3>
       <div class="video-container" v-if="selectedCamera">
-        <div class="video-placeholder">
+        <video v-if="playbackUrl" :src="playbackUrl" autoplay controls style="width:100%;height:400px;background:#000" />
+        <div v-else class="video-placeholder">
           <el-icon><VideoPlay /></el-icon>
-          <p>正在加载 {{ selectedCamera.name }} 的历史画面...</p>
+          <p>{{ playbackLoading ? '正在加载...' : '' }} {{ selectedCamera.name }} 的历史画面</p>
           <p v-if="dateTimeRange && dateTimeRange.length === 2">{{ formatDateTime(dateTimeRange[0]) }} - {{ formatDateTime(dateTimeRange[1]) }}</p>
         </div>
-        <!-- 播放进度条 -->
-        <div class="video-progress">
-          <el-slider v-model="playProgress" :min="0" :max="100" show-tooltip="always" />
-          <div class="time-display">{{ formatProgressTime() }} / {{ totalDuration }}</div>
-        </div>
-        <div class="video-controls">
-          <el-button size="small" icon="el-icon-video-play" @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</el-button>
-          <el-button size="small" icon="el-icon-refresh-right" @click="stepForward">前进10秒</el-button>
-          <el-button size="small" icon="el-icon-refresh-left" @click="stepBackward">后退10秒</el-button>
-          <el-button size="small" icon="el-icon-camera" @click="screenshot">截图</el-button>
-          <el-select v-model="playSpeed" placeholder="播放速度" size="small">
-            <el-option label="0.5x" :value="0.5"></el-option>
-            <el-option label="1.0x" :value="1"></el-option>
-            <el-option label="1.5x" :value="1.5"></el-option>
-            <el-option label="2.0x" :value="2"></el-option>
-          </el-select>
-          <el-button size="small" icon="el-icon-full-screen" @click="toggleFullScreen">全屏</el-button>
-        </div>
       </div>
       <div class="no-selection" v-else>
         <el-empty description="请从左侧选择摄像头查看历史画面" />
@@ -79,8 +52,6 @@
         <el-descriptions-item label="在线设备">{{ onlineCount }}</el-descriptions-item>
         <el-descriptions-item label="离线设备">{{ offlineCount }}</el-descriptions-item>
         <el-descriptions-item label="当前时间">{{ currentTime }}</el-descriptions-item>
-        <el-descriptions-item label="回放状态" v-if="selectedCamera">{{ isPlaying ? '播放中' : '已暂停' }}</el-descriptions-item>
-        <el-descriptions-item label="选择时间" v-if="dateTimeRange && dateTimeRange.length === 2">{{ formatDate(dateTimeRange[0]) }}</el-descriptions-item>
       </el-descriptions>
     </div>
   </div>
@@ -90,438 +61,70 @@
 import { ref, computed, onMounted } from 'vue'
 import { VideoPlay } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
+import { fetchCameras, gwGet, type Camera } from '@/api/gateway'
 
-interface Camera {
-  id: string
-  name: string
-  location: string
-  status: 'online' | 'offline'
-  streamUrl?: string
-}
-
-// 摄像头数据
-const cameras = ref<Camera[]>([
-  {
-    id: 'camera1',
-    name: '仓库入口',
-    location: '仓库正门',
-    status: 'online'
-  },
-  {
-    id: 'camera2', 
-    name: '货架区域A',
-    location: '仓库东区',
-    status: 'online'
-  },
-  {
-    id: 'camera3',
-    name: '货架区域B',
-    location: '仓库西区',
-    status: 'online'
-  },
-  {
-    id: 'camera4',
-    name: '装卸平台',
-    location: '仓库后门',
-    status: 'offline'
-  },
-  {
-    id: 'camera5',
-    name: '办公区域',
-    location: '办公楼',
-    status: 'online'
-  }
-])
-
-// 当前选中的摄像头
+const cameras = ref<Camera[]>([])
 const selectedCamera = ref<Camera | null>(null)
-
-// 日期时间范围
 const dateTimeRange = ref<string[]>([])
+const playbackUrl = ref('')
+const playbackLoading = ref(false)
+const currentTime = ref('')
 
-// 播放进度
-const playProgress = ref(0)
-const isPlaying = ref(false)
-const playSpeed = ref(1)
-
-// 总时长（模拟值）
-const totalDuration = ref('00:30:00')
-
-// 计算在线和离线设备数量
 const onlineCount = computed(() => cameras.value.filter(c => c.status === 'online').length)
 const offlineCount = computed(() => cameras.value.filter(c => c.status === 'offline').length)
 
-// 当前时间
-const currentTime = ref('')
+const loadCameras = async () => { try { cameras.value = await fetchCameras('Owl:main') } catch {} }
 
-// 选择摄像头
 const selectCamera = (camera: Camera) => {
   selectedCamera.value = camera
-  playProgress.value = 0
-  isPlaying.value = false
-  
-  // 设置默认日期时间范围（前一天到今天）
-  if (!dateTimeRange.value || dateTimeRange.value.length === 0) {
-    const yesterday = new Date()
-    yesterday.setDate(yesterday.getDate() - 1)
-    const today = new Date()
-    
-    dateTimeRange.value = [
-      yesterday.toISOString().slice(0, 19).replace('T', ' '),
-      today.toISOString().slice(0, 19).replace('T', ' ')
-    ]
-  }
-  
-  ElMessage.success(`已选择 ${camera.name}`)
-}
-
-// 搜索录像记录
-const searchRecordings = () => {
-  if (!selectedCamera.value) {
-    ElMessage.warning('请先选择摄像头')
-    return
-  }
-  
-  if (!dateTimeRange.value || dateTimeRange.value.length !== 2) {
-    ElMessage.warning('请选择有效的日期时间范围')
-    return
-  }
-  
-  ElMessage.success(`正在查询 ${selectedCamera.value.name} 的历史记录`)  
-  // 重置播放状态
-  playProgress.value = 0
-  isPlaying.value = false
-}
-
-// 重置日期时间范围
-const resetDateTimeRange = () => {
-  dateTimeRange.value = []
-}
-
-// 切换播放/暂停
-const togglePlay = () => {
-  isPlaying.value = !isPlaying.value
-  ElMessage.info(isPlaying.value ? '开始播放' : '暂停播放')
-  
-  // 模拟播放进度更新
-  if (isPlaying.value) {
-    simulatePlayback()
+  if (!dateTimeRange.value.length) {
+    const yesterday = new Date(); yesterday.setDate(yesterday.getDate() - 1)
+    dateTimeRange.value = [formatISOLocal(yesterday), formatISOLocal(new Date())]
   }
 }
 
-// 快退10秒
-const stepBackward = () => {
-  playProgress.value = Math.max(0, playProgress.value - 5)
-  ElMessage.info('后退10秒')
+const searchRecordings = async () => {
+  if (!selectedCamera.value) return ElMessage.warning('请先选择摄像头')
+  if (!dateTimeRange.value || dateTimeRange.value.length !== 2) return ElMessage.warning('请选择时间段')
+  playbackLoading.value = true; playbackUrl.value = ''
+  try {
+    const cam = selectedCamera.value
+    const start = new Date(dateTimeRange.value[0]).toISOString()
+    const end = new Date(dateTimeRange.value[1]).toISOString()
+    const data = await gwGet(`/api/gateway/streams/${cam.adapterCode}/${cam.sourceId}/playback?start=${start}&end=${end}`)
+    playbackUrl.value = data.hls || ''
+    if (!playbackUrl.value) ElMessage.warning('未获取到回放流地址')
+  } catch { ElMessage.error('获取回放流失败') }
+  finally { playbackLoading.value = false }
 }
 
-// 快进10秒
-const stepForward = () => {
-  playProgress.value = Math.min(100, playProgress.value + 5)
-  ElMessage.info('前进10秒')
-}
+const resetDateTimeRange = () => { dateTimeRange.value = []; playbackUrl.value = '' }
+const formatISOLocal = (d: Date) => d.toISOString().slice(0, 19).replace('T', ' ')
+const formatDateTime = (s: string) => s
 
-// 截图
-const screenshot = () => {
-  if (!selectedCamera.value) {
-    ElMessage.warning('请先选择摄像头')
-    return
-  }
-  ElMessage.success('截图成功')
-}
-
-// 切换全屏
-const toggleFullScreen = () => {
-  ElMessage.info('全屏显示')
-  // 实际项目中需要实现全屏逻辑
-}
-
-// 模拟播放进度
-let playbackInterval: number | null = null
-const simulatePlayback = () => {
-  if (playbackInterval) {
-    clearInterval(playbackInterval)
-  }
-  
-  playbackInterval = window.setInterval(() => {
-    if (isPlaying.value && playProgress.value < 100) {
-      playProgress.value += 0.1 * playSpeed.value
-      
-      // 播放结束
-      if (playProgress.value >= 100) {
-        playProgress.value = 100
-        isPlaying.value = false
-        if (playbackInterval) {
-          clearInterval(playbackInterval)
-        }
-        ElMessage.info('播放结束')
-      }
-    }
-  }, 100)
-}
-
-// 格式化日期时间
-const formatDateTime = (dateTimeStr: string) => {
-  const date = new Date(dateTimeStr)
-  return date.toLocaleString('zh-CN')
-}
-
-// 格式化日期
-const formatDate = (dateTimeStr: string) => {
-  const date = new Date(dateTimeStr)
-  return date.toLocaleDateString('zh-CN')
-}
-
-// 格式化进度时间
-const formatProgressTime = () => {
-  const [hours, minutes, seconds] = totalDuration.value.split(':')
-  const totalSeconds = parseInt(hours) * 3600 + parseInt(minutes) * 60 + parseInt(seconds)
-  const currentSeconds = Math.floor(totalSeconds * (playProgress.value / 100))
-  
-  const h = Math.floor(currentSeconds / 3600).toString().padStart(2, '0')
-  const m = Math.floor((currentSeconds % 3600) / 60).toString().padStart(2, '0')
-  const s = (currentSeconds % 60).toString().padStart(2, '0')
-  
-  return `${h}:${m}:${s}`
-}
-
-// 更新时间
-const updateTime = () => {
-  currentTime.value = new Date().toLocaleString('zh-CN')
-}
-
-// 组件挂载时初始化
-onMounted(() => {
-  updateTime()
-  setInterval(updateTime, 1000)
-  
-  // 设置默认日期时间范围
-  const yesterday = new Date()
-  yesterday.setDate(yesterday.getDate() - 1)
-  const today = new Date()
-  
-  dateTimeRange.value = [
-    yesterday.toISOString().slice(0, 19).replace('T', ' '),
-    today.toISOString().slice(0, 19).replace('T', ' ')
-  ]
-})
+const updateTime = () => { currentTime.value = new Date().toLocaleString('zh-CN') }
+onMounted(() => { loadCameras(); updateTime(); setInterval(updateTime, 1000) })
 </script>
 
 <style scoped>
-.history-playback {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  padding: 20px;
-}
-
-.monitor-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
-}
-
-.monitor-header h2 {
-  margin: 0;
-  color: #fff;
-  font-size: 20px;
-  font-weight: 500;
-}
-
-.monitor-controls {
-  display: flex;
-  gap: 10px;
-}
-
-.date-filter {
-  margin-bottom: 20px;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 8px;
-  padding: 15px;
-}
-
-.date-filter h3 {
-  margin: 0 0 10px 0;
-  color: #fff;
-  font-size: 16px;
-  font-weight: 500;
-}
-
-.date-filter-controls {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.camera-list {
-  margin-bottom: 20px;
-}
-
-.camera-list h3 {
-  margin: 0 0 15px 0;
-  color: #fff;
-  font-size: 16px;
-  font-weight: 500;
-}
-
-.camera-item {
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  color: #fff;
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-
-.camera-item:hover {
-  background: rgba(255, 255, 255, 0.1);
-  transform: translateY(-2px);
-}
-
-.camera-info {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.camera-name {
-  font-weight: 500;
-  font-size: 14px;
-}
-
-.camera-location {
-  font-size: 12px;
-  color: rgba(255, 255, 255, 0.7);
-}
-
-.camera-status {
-  padding: 2px 8px;
-  border-radius: 10px;
-  font-size: 12px;
-}
-
-.camera-status.online {
-  background: rgba(103, 194, 58, 0.2);
-  color: #67c23a;
-}
-
-.camera-status.offline {
-  background: rgba(245, 108, 108, 0.2);
-  color: #f56c6c;
-}
-
-.main-view {
-  flex: 1;
-  margin-bottom: 20px;
-  display: flex;
-  flex-direction: column;
-}
-
-.main-view h3 {
-  margin: 0 0 15px 0;
-  color: #fff;
-  font-size: 16px;
-  font-weight: 500;
-}
-
-.video-container {
-  flex: 1;
-  background: rgba(0, 0, 0, 0.5);
-  border-radius: 8px;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.video-placeholder {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  color: rgba(255, 255, 255, 0.5);
-  padding: 20px;
-}
-
-.video-placeholder .el-icon {
-  font-size: 64px;
-  margin-bottom: 16px;
-}
-
-.video-placeholder p {
-  margin: 5px 0;
-}
-
-.video-progress {
-  padding: 10px;
-  background: rgba(0, 0, 0, 0.3);
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.time-display {
-  color: #fff;
-  text-align: center;
-  margin-top: 5px;
-  font-size: 12px;
-}
-
-.video-controls {
-  padding: 10px;
-  background: rgba(0, 0, 0, 0.3);
-  display: flex;
-  gap: 10px;
-  justify-content: center;
-  align-items: center;
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.no-selection {
-  flex: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: rgba(0, 0, 0, 0.3);
-  border-radius: 8px;
-}
-
-.system-info {
-  margin-bottom: 10px;
-}
-
-.system-info h3 {
-  margin: 0 0 15px 0;
-  color: #fff;
-  font-size: 16px;
-  font-weight: 500;
-}
-
-.el-descriptions {
-  background: rgba(255, 255, 255, 0.05);
-  color: #fff;
-}
-
-.el-descriptions__label {
-  color: rgba(255, 255, 255, 0.9);
-}
-
-.el-descriptions__content {
-  color: #fff;
-}
-
-.el-card.is-hover-shadow:hover {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-}
-
-.el-slider__runway {
-  background-color: rgba(255, 255, 255, 0.2);
-}
-
-.el-slider__bar {
-  background-color: #409eff;
-}
-
-.el-slider__button-wrapper {
-  border-color: #409eff;
-}
-</style>
\ No newline at end of file
+.history-playback { height: 100%; display: flex; flex-direction: column; padding: 20px; }
+.monitor-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
+.monitor-header h2 { margin: 0; color: #fff; font-size: 20px; font-weight: 500; }
+.monitor-controls { display: flex; gap: 10px; }
+.date-filter h3 { color: #fff; margin-bottom: 10px; }
+.date-filter-controls { display: flex; gap: 10px; align-items: center; margin-bottom: 20px; }
+.camera-list { margin-bottom: 20px; }
+.camera-list h3 { color: #fff; }
+.camera-item { background: rgba(255,255,255,0.05); cursor: pointer; }
+.camera-name { font-size: 14px; color: #fff; }
+.camera-location { font-size: 12px; color: #999; }
+.camera-status.online { color: #67c23a; }
+.camera-status.offline { color: #f56c6c; }
+.main-view { flex: 1; }
+.main-view h3 { color: #fff; margin-bottom: 10px; }
+.video-container { background: #000; border-radius: 8px; overflow: hidden; }
+.video-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 400px; color: #fff; }
+.no-selection { flex: 1; display: flex; align-items: center; justify-content: center; }
+.system-info { margin-top: 20px; }
+.system-info h3 { color: #fff; margin-bottom: 10px; }
+</style>
diff --git a/warehouse/src/view/video/VideoWall.vue b/warehouse/src/view/video/VideoWall.vue
index 5e5fda9..2d7df17 100644
--- a/warehouse/src/view/video/VideoWall.vue
+++ b/warehouse/src/view/video/VideoWall.vue
@@ -2,7 +2,6 @@
   <div class="video-wall-container">
     <!-- 顶部设置栏 -->
     <div class="settings-bar">
-      <!-- 轮巡版块显示设置栏 -->
       <div v-if="currentSection === 'patrol'" style="width: 100px;">
         <el-select v-model="selectedLayout" placeholder="选择视频墙布局" @change="handleLayoutChange">
           <el-option label="3*3" value="3x3"></el-option>
@@ -12,1311 +11,178 @@
           <el-option label="1主3副" value="main3sub"></el-option>
         </el-select>
       </div>
-      
-      <!-- 临时状态切换按钮 -->
       <div class="section-switch-buttons">
-        <el-button type="primary" :plain="currentSection !== 'patrol'" @click="switchSection('patrol')">
-          轮巡模式
-        </el-button>
-        <el-button type="warning" :plain="currentSection !== 'track'" @click="switchSection('track')">
-          追踪模式
-        </el-button>
-        <el-button type="danger" :plain="currentSection !== 'emergency'" @click="switchSection('emergency')">
-          特情模式
-        </el-button>
+        <el-button type="primary" :plain="currentSection !== 'patrol'" @click="switchSection('patrol')">轮巡模式</el-button>
+        <el-button type="warning" :plain="currentSection !== 'track'" @click="switchSection('track')">追踪模式</el-button>
+        <el-button type="danger" :plain="currentSection !== 'emergency'" @click="switchSection('emergency')">特情模式</el-button>
       </div>
-      
-      <!-- 版块状态显示 -->
       <div class="section-status">
-        当前版块：
-        <span :class="`status-${currentSection}`">
-          {{ currentSection === 'patrol' ? '轮巡' : currentSection === 'track' ? '追踪' : '特情' }}
-        </span>
+        当前版块：<span :class="`status-${currentSection}`">{{ sectionLabel }}</span>
       </div>
     </div>
-    
+
     <!-- 轮巡版块 -->
     <div v-if="currentSection === 'patrol'" class="section patrol-section">
-      <!-- 视频画面和控制组件区域 -->
       <div class="main-content">
-        <!-- 视频画面显示区域 -->
         <div class="video-grid" :class="`layout-${selectedLayout}`">
-        <!-- 标准网格布局 -->
-        <div v-if="selectedLayout !== 'main3sub'" class="standard-grid" :class="`grid-${selectedLayout}`">
-          <div 
-            v-for="(item, index) in getVideoCount()" 
-            :key="index" 
-            class="video-item"
-            @click="selectCamera(index)"
-          >
-            <div class="video-frame">
-              <!-- 视频画面 -->
-              <div class="video-placeholder">
-                <img :src="getRandomImage()" :key="imageRefreshKey" alt="监控画面" class="video-image">
-                <div class="video-name">摄像头 {{ index + 1 }}</div>
-                <div class="video-status">在线</div>
+          <div v-if="selectedLayout !== 'main3sub'" class="standard-grid" :class="`grid-${selectedLayout}`">
+            <div v-for="(cam, index) in cameras.slice(0, getVideoCount())" :key="cam.id" class="video-item" @click="selectCamera(index)">
+              <div class="video-frame">
+                <video v-if="streamUrls[cam.id]" :src="streamUrls[cam.id]" autoplay muted class="video-real"></video>
+                <div v-else class="video-placeholder">
+                  <div class="video-name">{{ cam.name }}</div>
+                  <div class="video-status" :class="cam.status">{{ cam.status === 'online' ? '在线' : '离线' }}</div>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-        
-        <!-- 1主3副布局 -->
-        <div v-else class="main-sub-layout">
-          <!-- 主画面 -->
-          <div class="main-video">
-            <div class="video-frame" @click="selectMainCamera()">
-              <div class="video-placeholder">
-                <img :src="getRandomImage()" :key="imageRefreshKey" alt="主监控画面" class="video-image">
-                <div class="video-name">主摄像头</div>
-                <div class="video-status">在线</div>
-              </div>
-            </div>
-          </div>
-          
-          <!-- 副画面区域 -->
-          <div class="sub-videos">
-            <div 
-              v-for="index in 3" 
-              :key="`sub-${index}`" 
-              class="sub-video"
-            >
-              <div class="video-frame" @click="selectSubCamera(index)">
-                <div class="video-placeholder">
-                  <img :src="getRandomImage()" :key="imageRefreshKey" alt="副监控画面" class="video-image">
-                  <div class="video-name">副摄像头 {{ index }}</div>
+          <div v-else class="main-sub-layout">
+            <div class="main-video">
+              <div class="video-frame" @click="selectMainCamera()">
+                <video v-if="mainCam && streamUrls[mainCam.id]" :src="streamUrls[mainCam.id]" autoplay muted class="video-real"></video>
+                <div v-else class="video-placeholder">
+                  <div class="video-name">{{ mainCam?.name || '主摄像头' }}</div>
                   <div class="video-status">在线</div>
                 </div>
               </div>
             </div>
+            <div class="sub-videos">
+              <div v-for="(cam, i) in cameras.slice(1, 4)" :key="cam.id" class="sub-video">
+                <div class="video-frame" @click="selectCamera(i+1)">
+                  <video v-if="streamUrls[cam.id]" :src="streamUrls[cam.id]" autoplay muted class="video-real"></video>
+                  <div v-else class="video-placeholder">
+                    <div class="video-name">{{ cam.name }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
-        </div>
-        
-        <!-- 摄像机控制组件 -->
-        <div class="camera-control-panel">
-          <!-- 摄像机信息区域 -->
+
+        <!-- 云台控制面板 -->
+        <div class="camera-control-panel" v-if="selectedCamera">
           <div class="camera-info">
-            <h3>{{ selectedCamera ? selectedCamera.name : '未选择摄像机' }}</h3>
-            <p>{{ selectedCamera ? selectedCamera.id : '' }}</p>
+            <h3>{{ selectedCamera.name }}</h3>
+            <p>{{ selectedCamera.id }}</p>
           </div>
-          
-          <!-- 控制按钮区域 -->
-          <div class="control-buttons">
-            <el-button type="primary" :icon="video-camera" plain>时画面</el-button>
-            <el-button type="primary" :icon="video-play" plain>回放</el-button>
-            <el-button type="success" :icon="camera" plain>抓拍</el-button>
-            <el-button type="info" :icon="download" plain>下载</el-button>
-            <el-button type="warning" :icon="bell" plain>告警记录</el-button>
-          </div>
-          
-          <!-- 图像调整滑块 -->
-          <div class="image-controls">
-            <div class="slider-group">
-              <label>曝光度</label>
-              <el-slider v-model="exposure" :min="0" :max="100" :step="1"></el-slider>
-              <span>{{ exposure }}</span>
-            </div>
-            <div class="slider-group">
-              <label>饱和度</label>
-              <el-slider v-model="saturation" :min="0" :max="100" :step="1"></el-slider>
-              <span>{{ saturation }}</span>
-            </div>
-            <div class="slider-group">
-              <label>色彩</label>
-              <el-slider v-model="color" :min="0" :max="100" :step="1"></el-slider>
-              <span>{{ color }}</span>
-            </div>
-          </div>
-          
-          <!-- 云台控制区域 -->
           <div class="ptz-controls">
             <h4>云台控制</h4>
             <div class="ptz-buttons">
-              <!-- 上方向 -->
+              <div class="ptz-row"><el-button class="ptz-btn" @mousedown="ptzGo('up')" @mouseup="ptzStop"><el-icon><ArrowUp /></el-icon></el-button></div>
               <div class="ptz-row">
-                <el-button class="ptz-btn" @click="controlPTZ('up')">
-                  <el-icon><arrow-up-bold /></el-icon>
-                </el-button>
-              </div>
-              
-              <!-- 左、中、右方向 -->
-              <div class="ptz-row">
-                <el-button class="ptz-btn" @click="controlPTZ('left')">
-                  <el-icon><arrow-left-bold /></el-icon>
-                </el-button>
-                <el-button class="ptz-btn" @click="controlPTZ('stop')"><i class="el-icon-circle-close"></i> 停止</el-button>
-                <el-button class="ptz-btn" @click="controlPTZ('right')">
-                  <el-icon><arrow-right-bold /></el-icon>
-                </el-button>
-              </div>
-              
-              <!-- 下方向 -->
-              <div class="ptz-row">
-                <el-button class="ptz-btn" @click="controlPTZ('down')">
-                  <el-icon><arrow-down-bold /></el-icon>
-                </el-button>
-              </div>
-              
-              <!-- 缩放控制 -->
-              <div class="zoom-controls">
-                <el-button class="ptz-btn" @click="controlZoom('in')">
-                  <el-icon><zoom-in /></el-icon>
-                </el-button>
-                <el-button class="ptz-btn" @click="controlZoom('out')">
-                  <el-icon><zoom-out /></el-icon>
-                </el-button>
+                <el-button class="ptz-btn" @mousedown="ptzGo('left')" @mouseup="ptzStop"><el-icon><ArrowLeft /></el-icon></el-button>
+                <el-button class="ptz-btn" @click="ptzGo('stop')">停止</el-button>
+                <el-button class="ptz-btn" @mousedown="ptzGo('right')" @mouseup="ptzStop"><el-icon><ArrowRight /></el-icon></el-button>
               </div>
+              <div class="ptz-row"><el-button class="ptz-btn" @mousedown="ptzGo('down')" @mouseup="ptzStop"><el-icon><ArrowDown /></el-icon></el-button></div>
             </div>
           </div>
         </div>
       </div>
     </div>
-    
+
     <!-- 追踪版块 -->
     <div v-else-if="currentSection === 'track'" class="section track-section">
-      <!-- 视频画面和控制组件区域 -->
       <div class="main-content">
-        <!-- 视频画面显示区域 -->
-        <div class="video-grid">
-          <!-- 一主六副布局 -->
-          <div class="main-sub-layout track-layout">
-            <!-- 主画面 -->
-            <div class="main-video">
-              <div class="video-frame" @click="selectCamera(0)">
-                <div class="video-placeholder">
-                  <img :src="getRandomImage()" :key="imageRefreshKey" alt="主监控画面" class="video-image">
-                  <div class="video-name">主摄像头</div>
-                  <div class="video-status">在线</div>
-                </div>
-              </div>
-            </div>
-            
-            <!-- 右侧副画面区域（4个） -->
-            <div class="sub-videos track-sub-videos">
-              <div 
-                v-for="index in 4" 
-                :key="`right-${index}`" 
-                class="sub-video"
-                @click="selectCamera(index)"
-              >
-                <div class="video-frame">
-                  <div class="video-placeholder">
-                    <img :src="getRandomImage()" :key="imageRefreshKey" alt="副监控画面" class="video-image">
-                    <div class="video-name">副摄像头 {{ index }}</div>
-                    <div class="video-status">在线</div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            
-            <!-- 下方副画面区域（2个） -->
-            <div class="sub-videos bottom-sub-videos">
-              <div 
-                v-for="index in 2" 
-                :key="`bottom-${index}`" 
-                class="sub-video"
-                @click="selectCamera(index + 4)"
-              >
-                <div class="video-frame">
-                  <div class="video-placeholder">
-                    <img :src="getRandomImage()" :key="imageRefreshKey" alt="副监控画面" class="video-image">
-                    <div class="video-name">副摄像头 {{ index + 4 }}</div>
-                    <div class="video-status">在线</div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        
-        <!-- 摄像机控制组件 -->
-        <div class="camera-control-panel">
-          <!-- 摄像机信息区域 -->
-          <div class="camera-info">
-            <h3>{{ selectedCamera ? selectedCamera.name : '未选择摄像机' }}</h3>
-            <p>{{ selectedCamera ? selectedCamera.id : '' }}</p>
-          </div>
-          
-          <!-- 控制按钮区域 -->
-          <div class="control-buttons">
-            <el-button type="primary" :icon="video-camera" plain>时画面</el-button>
-            <el-button type="primary" :icon="video-play" plain>回放</el-button>
-            <el-button type="success" :icon="camera" plain>抓拍</el-button>
-            <el-button type="info" :icon="download" plain>下载</el-button>
-            <el-button type="warning" :icon="bell" plain>告警记录</el-button>
-          </div>
-          
-          <!-- 图像调整滑块 -->
-          <div class="image-controls">
-            <div class="slider-group">
-              <label>曝光度</label>
-              <el-slider v-model="exposure" :min="0" :max="100" :step="1"></el-slider>
-              <span>{{ exposure }}</span>
-            </div>
-            <div class="slider-group">
-              <label>饱和度</label>
-              <el-slider v-model="saturation" :min="0" :max="100" :step="1"></el-slider>
-              <span>{{ saturation }}</span>
-            </div>
-            <div class="slider-group">
-              <label>色彩</label>
-              <el-slider v-model="color" :min="0" :max="100" :step="1"></el-slider>
-              <span>{{ color }}</span>
-            </div>
-          </div>
-          
-          <!-- 云台控制区域 -->
-          <div class="ptz-controls">
-            <h4>云台控制</h4>
-            <div class="ptz-buttons">
-              <!-- 上方向 -->
-              <div class="ptz-row">
-                <el-button class="ptz-btn" @click="controlPTZ('up')">
-                  <el-icon><arrow-up-bold /></el-icon>
-                </el-button>
-              </div>
-              
-              <!-- 左、中、右方向 -->
-              <div class="ptz-row">
-                <el-button class="ptz-btn" @click="controlPTZ('left')">
-                  <el-icon><arrow-left-bold /></el-icon>
-                </el-button>
-                <el-button class="ptz-btn" @click="controlPTZ('stop')"><i class="el-icon-circle-close"></i> 停止</el-button>
-                <el-button class="ptz-btn" @click="controlPTZ('right')">
-                  <el-icon><arrow-right-bold /></el-icon>
-                </el-button>
-              </div>
-              
-              <!-- 下方向 -->
-              <div class="ptz-row">
-                <el-button class="ptz-btn" @click="controlPTZ('down')">
-                  <el-icon><arrow-down-bold /></el-icon>
-                </el-button>
-              </div>
-              
-              <!-- 缩放控制 -->
-              <div class="zoom-controls">
-                <el-button class="ptz-btn" @click="controlZoom('in')">
-                  <el-icon><zoom-in /></el-icon>
-                </el-button>
-                <el-button class="ptz-btn" @click="controlZoom('out')">
-                  <el-icon><zoom-out /></el-icon>
-                </el-button>
-              </div>
+        <div class="main-sub-layout track-layout">
+          <div class="main-video"><video v-if="mainCam && streamUrls[mainCam.id]" :src="streamUrls[mainCam.id]" autoplay muted class="video-real"></video></div>
+          <div class="sub-videos track-sub-videos">
+            <div v-for="(cam, i) in cameras.slice(0, 4)" :key="cam.id" class="sub-video">
+              <video v-if="streamUrls[cam.id]" :src="streamUrls[cam.id]" autoplay muted class="video-real"></video>
             </div>
           </div>
         </div>
       </div>
     </div>
-    
+
     <!-- 特情版块 -->
     <div v-else-if="currentSection === 'emergency'" class="section emergency-section">
-      <!-- 左侧监控区域（70%）和右侧预案区域（30%） -->
-      <div class="emergency-layout">
-        <!-- 左侧监控区域 -->
-        <div class="left-section">
-          <!-- 视频画面和控制组件区域 -->
-          <div class="main-content">
-            <!-- 视频画面显示区域 -->
-            <div class="video-grid">
-              <!-- 一主六副布局 -->
-              <div class="main-sub-layout emergency-main-sub">
-                <!-- 主画面 -->
-                <div class="main-video">
-                  <div class="video-frame" @click="selectCamera(0)">
-                    <div class="video-placeholder">
-                      <img :src="getRandomImage()" :key="imageRefreshKey" alt="主监控画面" class="video-image">
-                      <div class="video-name">主摄像头</div>
-                      <div class="video-status">在线</div>
-                    </div>
-                  </div>
-                </div>
-                
-                <!-- 右侧副画面区域（4个） -->
-                <div class="sub-videos emergency-sub-videos">
-                  <div 
-                    v-for="index in 4" 
-                    :key="`right-${index}`" 
-                    class="sub-video"
-                    @click="selectCamera(index)"
-                  >
-                    <div class="video-frame">
-                      <div class="video-placeholder">
-                        <img :src="getRandomImage()" :key="imageRefreshKey" alt="副监控画面" class="video-image">
-                        <div class="video-name">副摄像头 {{ index }}</div>
-                        <div class="video-status">在线</div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                
-                <!-- 下方副画面区域（2个） -->
-                <div class="sub-videos bottom-sub-videos">
-                  <div 
-                    v-for="index in 2" 
-                    :key="`bottom-${index}`" 
-                    class="sub-video"
-                    @click="selectCamera(index + 4)"
-                  >
-                    <div class="video-frame">
-                      <div class="video-placeholder">
-                        <img :src="getRandomImage()" :key="imageRefreshKey" alt="副监控画面" class="video-image">
-                        <div class="video-name">副摄像头 {{ index + 4 }}</div>
-                        <div class="video-status">在线</div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            
-            <!-- 摄像机控制组件 -->
-            <div class="camera-control-panel">
-              <!-- 摄像机信息区域 -->
-              <div class="camera-info">
-                <h3>{{ selectedCamera ? selectedCamera.name : '未选择摄像机' }}</h3>
-                <p>{{ selectedCamera ? selectedCamera.id : '' }}</p>
-              </div>
-              
-              <!-- 控制按钮区域 -->
-              <div class="control-buttons">
-                <el-button type="primary" :icon="video-camera" plain>时画面</el-button>
-                <el-button type="primary" :icon="video-play" plain>回放</el-button>
-                <el-button type="success" :icon="camera" plain>抓拍</el-button>
-                <el-button type="info" :icon="download" plain>下载</el-button>
-                <el-button type="warning" :icon="bell" plain>告警记录</el-button>
-              </div>
-              
-              <!-- 图像调整滑块 -->
-              <div class="image-controls">
-                <div class="slider-group">
-                  <label>曝光度</label>
-                  <el-slider v-model="exposure" :min="0" :max="100" :step="1"></el-slider>
-                  <span>{{ exposure }}</span>
-                </div>
-                <div class="slider-group">
-                  <label>饱和度</label>
-                  <el-slider v-model="saturation" :min="0" :max="100" :step="1"></el-slider>
-                  <span>{{ saturation }}</span>
-                </div>
-                <div class="slider-group">
-                  <label>色彩</label>
-                  <el-slider v-model="color" :min="0" :max="100" :step="1"></el-slider>
-                  <span>{{ color }}</span>
-                </div>
-              </div>
-              
-              <!-- 云台控制区域 -->
-              <div class="ptz-controls">
-                <h4>云台控制</h4>
-                <div class="ptz-buttons">
-                  <!-- 上方向 -->
-                  <div class="ptz-row">
-                    <el-button class="ptz-btn" @click="controlPTZ('up')">
-                      <el-icon><arrow-up-bold /></el-icon>
-                    </el-button>
-                  </div>
-                  
-                  <!-- 左、中、右方向 -->
-                  <div class="ptz-row">
-                    <el-button class="ptz-btn" @click="controlPTZ('left')">
-                      <el-icon><arrow-left-bold /></el-icon>
-                    </el-button>
-                    <el-button class="ptz-btn" @click="controlPTZ('stop')"><i class="el-icon-circle-close"></i> 停止</el-button>
-                    <el-button class="ptz-btn" @click="controlPTZ('right')">
-                      <el-icon><arrow-right-bold /></el-icon>
-                    </el-button>
-                  </div>
-                  
-                  <!-- 下方向 -->
-                  <div class="ptz-row">
-                    <el-button class="ptz-btn" @click="controlPTZ('down')">
-                      <el-icon><arrow-down-bold /></el-icon>
-                    </el-button>
-                  </div>
-                  
-                  <!-- 缩放控制 -->
-                  <div class="zoom-controls">
-                    <el-button class="ptz-btn" @click="controlZoom('in')">
-                      <el-icon><zoom-in /></el-icon>
-                    </el-button>
-                    <el-button class="ptz-btn" @click="controlZoom('out')">
-                      <el-icon><zoom-out /></el-icon>
-                    </el-button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        
-        <!-- 右侧预案区域 -->
-        <div class="right-section">
-          <div class="emergency-plan">
-            <h3>特情处置预案</h3>
-            <div class="plan-content">
-              <h4>{{ emergencyPlan.title }}</h4>
-              <p class="plan-description">{{ emergencyPlan.description }}</p>
-              <div class="plan-steps">
-                <div 
-                  v-for="(step, index) in emergencyPlan.steps" 
-                  :key="index" 
-                  class="plan-step"
-                >
-                  <span class="step-number">{{ index + 1 }}</span>
-                  <span class="step-content">{{ step }}</span>
-                </div>
-              </div>
-              <div class="plan-footer">
-                <div class="plan-priority" :class="emergencyPlan.priority">
-                  优先级：{{ emergencyPlan.priority === 'high' ? '高' : emergencyPlan.priority === 'medium' ? '中' : '低' }}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
+      <div class="main-content">
+        <p style="color:#fff;text-align:center;padding-top:100px">特情模式 — 自动切换到告警设备画面</p>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
-import { ArrowUpBold, ArrowLeftBold, ArrowRightBold, ArrowDownBold } from '@element-plus/icons-vue'
-import { VideoCamera, VideoPlay, Camera, Download, Bell } from '@element-plus/icons-vue'
-import { ZoomIn, ZoomOut } from '@element-plus/icons-vue'
+import { ref, computed, onMounted, watch } from 'vue'
+import { fetchCameras, gwGet, gwPost, type Camera } from '@/api/gateway'
 
-// 定义摄像机数据结构
-interface Camera {
-  id: string
-  name: string
-  status: 'online' | 'offline'
-}
-
-// 定义特情处置预案数据结构
-interface EmergencyPlan {
-  id: string
-  title: string
-  description: string
-  steps: string[]
-  priority: 'high' | 'medium' | 'low'
-}
-
-// 当前版块：patrol(轮巡), track(追踪), emergency(特情)
-const currentSection = ref('patrol')
-
-// 选中的布局模式
-const selectedLayout = ref('3x3')
-
-// 选中的摄像机
+const cameras = ref<Camera[]>([])
+const streamUrls = ref<Record<string, string>>({})
 const selectedCamera = ref<Camera | null>(null)
+const mainCam = computed(() => cameras.value[0])
+const selectedLayout = ref('3x3')
+const currentSection = ref('patrol')
+const sectionLabel = computed(() => ({ patrol: '轮巡', track: '追踪', emergency: '特情' }[currentSection.value]))
 
-// 特情处置预案数据
-const emergencyPlan = ref<EmergencyPlan>({
-  id: 'plan_001',
-  title: '火灾应急预案',
-  description: '当监控区域发生火灾时，按照以下步骤进行处置',
-  steps: [
-    '立即启动火灾报警系统',
-    '通知现场人员疏散',
-    '拨打消防电话119',
-    '组织现场人员使用消防器材进行初期灭火',
-    '等待消防人员到达并配合工作',
-    '记录火灾情况，配合后续调查'
-  ],
-  priority: 'high'
-})
+// ── 加载摄像机 + 预取流 ──
+const loadCameras = async () => {
+  cameras.value = await fetchCameras('Owl:main')
+  // 预取前 9 路流
+  const onlineCams = cameras.value.filter(c => c.status === 'online').slice(0, 9)
+  for (const cam of onlineCams) {
+    fetchStream(cam)
+  }
+}
 
-// 图像调整参数
-const exposure = ref(50) // 曝光度 (0-100)
-const saturation = ref(50) // 饱和度 (0-100)
-const color = ref(50) // 色彩 (0-100)
+const fetchStream = async (cam: Camera) => {
+  try {
+    const data = await gwGet(`/api/gateway/streams/${cam.adapterCode}/${cam.sourceId}/live`)
+    streamUrls.value[cam.id] = data.wsFlv || data.httpFlv || data.hls || ''
+  } catch { /* ignore */ }
+}
 
-// 根据选中的布局获取视频数量
+// ── 云台 ──
+const ptzSend = (dir: string, speed = 0.5) => {
+  const cam = selectedCamera.value
+  if (!cam) return
+  gwPost(`/api/gateway/streams/${cam.adapterCode}/${cam.sourceId}/ptz`, { direction: dir, action: dir === 'stop' ? 'stop' : 'continuous', speed })
+}
+const ptzGo = (d: string) => ptzSend(d)
+const ptzStop = () => ptzSend('stop')
+
+// ── 布局 ──
 const getVideoCount = () => {
-  switch (selectedLayout.value) {
-    case '3x3': return 9
-    case '3x4': return 12
-    case '4x4': return 16
-    case '5x5': return 25
-    case 'main3sub': return 4
-    default: return 9
-  }
+  const map: Record<string, number> = { '3x3': 9, '3x4': 12, '4x4': 16, '5x5': 25 }
+  return map[selectedLayout.value] || 9
 }
+const handleLayoutChange = () => {}
+const switchSection = (s: string) => { currentSection.value = s }
+const selectCamera = (idx: number) => { if (cameras.value[idx]) selectedCamera.value = cameras.value[idx] }
+const selectMainCamera = () => { selectCamera(0) }
 
-// 获取视频项的样式（网格布局）函数改为计算属性，保留但不使用，为后续可能的需求预留
-const getVideoItemStyle = () => {
-  switch (selectedLayout.value) {
-    case '3x3':
-      return { width: '33.33%' }
-    case '3x4':
-      return { width: '25%' }
-    case '4x4':
-      return { width: '25%' }
-    case '5x5':
-      return { width: '20%' }
-    default:
-      return { width: '33.33%' }
-  }
-}
-
-// 处理布局变更
-const handleLayoutChange = (value: string) => {
-  console.log('切换布局:', value)
-  // 这里可以添加布局变更后的逻辑，如重新初始化视频流等
-}
-
-// 选择摄像机
-const selectCamera = (index: number) => {
-  // 模拟摄像机数据
-  selectedCamera.value = {
-    id: `camera_${index + 1}`,
-    name: `摄像机 ${index + 1}`,
-    status: 'online'
-  }
-  console.log('选中摄像机:', selectedCamera.value)
-}
-
-// 处理主摄像头选择
-const selectMainCamera = () => {
-  selectedCamera.value = {
-    id: 'camera_main',
-    name: '主摄像机',
-    status: 'online'
-  }
-  console.log('选中主摄像机:', selectedCamera.value)
-}
-
-// 处理副摄像头选择
-const selectSubCamera = (index: number) => {
-  selectedCamera.value = {
-    id: `camera_sub_${index}`,
-    name: `副摄像机 ${index}`,
-    status: 'online'
-  }
-  console.log('选中副摄像机:', selectedCamera.value)
-}
-
-// 云台控制方法
-const controlPTZ = (direction: 'up' | 'down' | 'left' | 'right' | 'stop') => {
-  if (!selectedCamera.value) {
-    console.warn('请先选择摄像机')
-    return
-  }
-  
-  console.log(`控制云台 ${direction}`, selectedCamera.value)
-  // 这里可以添加实际的云台控制逻辑
-}
-
-// 缩放控制方法
-const controlZoom = (action: 'in' | 'out') => {
-  if (!selectedCamera.value) {
-    console.warn('请先选择摄像机')
-    return
-  }
-  
-  console.log(`缩放控制 ${action}`, selectedCamera.value)
-  // 这里可以添加实际的缩放控制逻辑
-}
-
-// 添加一个响应式变量来触发图片更新
-const imageRefreshKey = ref(0)
-
-// 随机图片路径列表
-const jiankongImages = [
-  '/images/jiankong/1.png',
-  '/images/jiankong/2.png',
-  '/images/jiankong/3.png',
-  '/images/jiankong/4.png',
-  '/images/jiankong/5.png',
-  '/images/jiankong/6.png',
-  '/images/jiankong/7.png',
-  '/images/jiankong/8.png',
-  '/images/jiankong/9.png',
-  '/images/jiankong/10.png',
-  '/images/jiankong/11.png',
-  '/images/jiankong/12.png',
-  '/images/jiankong/13.png',
-  '/images/jiankong/14.png',
-  '/images/jiankong/15.png',
-  '/images/jiankong/16.png',
-  '/images/jiankong/17.png',
-  '/images/jiankong/18.png',
-  '/images/jiankong/19.png',
-  '/images/jiankong/20.png',
-  '/images/jiankong/21.png',
-  '/images/jiankong/22.png',
-  '/images/jiankong/23.png',
-  '/images/jiankong/24.png'
-]
-
-// 生成随机图片URL
-const getRandomImage = () => {
-  const randomIndex = Math.floor(Math.random() * jiankongImages.length)
-  return jiankongImages[randomIndex]
-}
-
-// 切换版块
-const switchSection = (section: 'patrol' | 'track' | 'emergency') => {
-  currentSection.value = section
-  console.log('切换版块:', section)
-  // 切换版块时随机更换图片
-  imageRefreshKey.value++
-}
-
-// 处理外部事件
-const handleExternalEvent = (event: any) => {
-  if (event.type === 'abnormal') {
-    switchSection('track')
-  } else if (event.type === 'emergency') {
-    switchSection('emergency')
-  } else {
-    switchSection('patrol')
-  }
-}
-
-// 模拟外部事件触发
-const simulateEvent = (eventType: string) => {
-  handleExternalEvent({ type: eventType })
-}
-
-// 组件挂载时，将方法挂载到window对象，以便外部调用
-onMounted(() => {
-  // @ts-ignore
-  window.switchVideoSection = switchSection
-  // @ts-ignore
-  window.simulateVideoEvent = simulateEvent
-})
-
-// 组件卸载时，移除window对象上的方法
-onBeforeUnmount(() => {
-  // @ts-ignore
-  delete window.switchVideoSection
-  // @ts-ignore
-  delete window.simulateVideoEvent
-})
+onMounted(loadCameras)
 </script>
 
 <style scoped>
-.video-wall-container {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  background-color: transparent;
-}
-
-/* 顶部设置栏 */
-.settings-bar {
-  padding: 10px 20px;
-  background-color: transparent;
-  border-bottom: 1px solid #e0e0e0;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 20px;
-}
-
-/* 临时状态切换按钮样式 */
-.section-switch-buttons {
-  display: flex;
-  gap: 10px;
-}
-
-.section-switch-buttons .el-button {
-  min-width: 100px;
-}
-
-/* 版块状态显示 */
-.section-status {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 14px;
-  color: white;
-}
-
-/* 版块状态样式 */
-.status-patrol {
-  color: #67c23a;
-  font-weight: 500;
-}
-
-.status-track {
-  color: #e6a23c;
-  font-weight: 500;
-}
-
-.status-emergency {
-  color: #f56c6c;
-  font-weight: 500;
-}
-
-/* 主内容区域 */
-.main-content {
-  display: flex;
-  flex: 1;
-  height: calc(100% - 60px); /* 减去顶部设置栏的高度 */
-}
-
-/* 视频网格容器 */
-.video-grid {
-  flex: 1;
-  padding: 10px;
-  overflow: hidden;
-}
-
-/* 摄像机控制组件 */
-.camera-control-panel {
-  width: 320px;
-  background-color: #1a73e8; /* 蓝色背景，与VideoWall整体背景一致 */
-  border-left: 1px solid #e4e7ed;
-  padding: 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  overflow-y: auto;
-  color: white;
-}
-
-/* 摄像机信息区域 */
-.camera-info {
-  padding: 15px;
-  background-color: rgba(255, 255, 255, 0.1); /* 半透明白色背景 */
-  border-radius: 4px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  backdrop-filter: blur(10px);
-}
-
-.camera-info h3 {
-  margin: 0 0 5px 0;
-  font-size: 16px;
-  color: white;
-}
-
-.camera-info p {
-  margin: 0;
-  font-size: 12px;
-  color: rgba(255, 255, 255, 0.8);
-}
-
-/* 控制按钮区域 */
-.control-buttons {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-}
-
-.control-buttons .el-button {
-  flex: 1;
-  min-width: 80px;
-}
-
-/* 图像调整滑块 */
-.image-controls {
-  background-color: rgba(255, 255, 255, 0.1); /* 半透明白色背景 */
-  padding: 15px;
-  border-radius: 4px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  backdrop-filter: blur(10px);
-}
-
-.slider-group {
-  margin-bottom: 20px;
-}
-
-.slider-group:last-child {
-  margin-bottom: 0;
-}
-
-.slider-group label {
-  display: block;
-  margin-bottom: 10px;
-  font-size: 14px;
-  color: white;
-}
-
-.slider-group .el-slider {
-  margin-right: 10px;
-  vertical-align: middle;
-}
-
-.slider-group span {
-  display: inline-block;
-  width: 30px;
-  text-align: right;
-  font-size: 12px;
-  color: rgba(255, 255, 255, 0.8);
-  vertical-align: middle;
-}
-
-/* 云台控制区域 */
-.ptz-controls {
-  background-color: rgba(255, 255, 255, 0.1); /* 半透明白色背景 */
-  padding: 15px;
-  border-radius: 4px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  backdrop-filter: blur(10px);
-}
-
-.ptz-controls h4 {
-  margin: 0 0 15px 0;
-  font-size: 14px;
-  color: white;
-}
-
-.ptz-buttons {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 10px;
-}
-
-.ptz-row {
-  display: flex;
-  gap: 10px;
-}
-
-.ptz-btn {
-  width: 40px;
-  height: 40px;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.zoom-controls {
-  margin-top: 10px;
-  display: flex;
-  gap: 10px;
-}
-
-/* 标准网格布局 */
-.standard-grid {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-/* 视频项样式 */
-.video-item {
-  box-sizing: border-box;
-  position: relative;
-}
-
-/* 根据不同布局设置视频项的宽度 */
-.grid-3x3 .video-item {
-  width: 30%;
-  flex-shrink: 0;
-}
-
-.grid-3x4 .video-item {
-  width: 24%;
-  flex-shrink: 0;
-}
-
-.grid-4x4 .video-item {
-  width: 24%;
-  flex-shrink: 0;
-}
-
-.grid-5x5 .video-item {
-  width: 19%;
-  flex-shrink: 0;
-}
-
-/* 16:9 宽高比的视频框 */
-.video-frame {
-  width: 100%;
-  height: 100%;
-  padding-bottom: 56.25%; /* 16:9 宽高比 (9/16 = 0.5625 = 56.25%) */
-  background-color: #000;
-  border-radius: 4px;
-  overflow: hidden;
-  position: relative;
-}
-
-/* 视频内容容器，填充整个视频框 */
-.video-placeholder {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  color: #fff;
-  font-size: 14px;
-  overflow: hidden;
-}
-
-/* 监控图片样式 */
-.video-image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 0;
-}
-
-/* 视频名称和状态在图片上方 */
-.video-name {
-  position: relative;
-  z-index: 1;
-  background-color: rgba(0, 0, 0, 0.6);
-  padding: 4px 8px;
-  border-radius: 4px;
-  margin-bottom: 4px;
-}
-
-.video-status {
-  position: relative;
-  z-index: 1;
-  background-color: rgba(0, 128, 0, 0.6);
-  padding: 2px 6px;
-  border-radius: 3px;
-  font-size: 12px;
-}
-
-.video-placeholder i {
-  font-size: 24px;
-  margin-bottom: 8px;
-}
-
-.video-name {
-  font-size: 14px;
-  margin-bottom: 4px;
-}
-
-.video-status {
-  font-size: 12px;
-  color: #aaa;
-}
-
-/* 1主3副布局 */
-.main-sub-layout {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  gap: 8px;
-}
-
-/* 主画面 */
-.main-video {
-  width: 70%;
-}
-
-/* 副画面区域 */
-.sub-videos {
-  width: 30%;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-/* 副画面 */
-.sub-video {
-  flex: 1;
-}
-
-/* 轮巡模式1主3副布局调整 */
-.patrol-section .main-sub-layout {
-  display: grid;
-  grid-template-columns: 2fr 1fr;
-  grid-template-rows: 1fr 1fr 1fr;
-  gap: 8px;
-}
-
-.patrol-section .main-video {
-  grid-row: 1 / span 3;
-  grid-column: 1 / 2;
-  width: 100%;
-  height: 100%;
-}
-
-.patrol-section .sub-videos {
-  grid-row: 1 / 4;
-  grid-column: 2 / 3;
-  width: 100%;
-  height: 100%;
-}
-
-.patrol-section .sub-video {
-  height: 100%;
-}
-
-/* 追踪模式环绕式布局 */
-.track-section .main-sub-layout.track-layout {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(4, 1fr);
-  gap: 8px;
-  width: 100%;
-  height: 100%;
-}
-
-.track-section .main-video {
-  grid-row: 1 / 4;
-  grid-column: 1 / 3;
-  width: 100%;
-  height: 100%;
-}
-
-.track-section .sub-videos.track-sub-videos {
-  grid-row: 1 / 5;
-  grid-column: 3 / 4;
-  width: 100%;
-  height: 100%;
-  display: grid;
-  grid-template-rows: repeat(4, 1fr);
-  gap: 8px;
-}
-
-.track-section .sub-videos.bottom-sub-videos {
-  grid-row: 4 / 5;
-  grid-column: 1 / 3;
-  width: 100%;
-  height: 100%;
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 8px;
-}
-
-/* 特情模式环绕式布局 */
-.emergency-section .main-sub-layout.emergency-main-sub {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(4, 1fr);
-  gap: 8px;
-  width: 100%;
-  height: 100%;
-}
-
-.emergency-section .main-video {
-  grid-row: 1 / 3;
-  grid-column: 1 / span 2;
-  width: 100%;
-  height: 100%;
-}
-
-.emergency-section .sub-videos.emergency-sub-videos {
-  grid-row: 1 / 4;
-  grid-column: 3 / 4;
-  width: 100%;
-  height: 100%;
-  display: grid;
-  grid-template-rows: repeat(4, 1fr);
-  gap: 8px;
-}
-
-.emergency-section .sub-videos.bottom-sub-videos {
-  grid-row: 3 / 3;
-  grid-column: 1 / 3;
-  width: 100%;
-  height: 100%;
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 8px;
-}
-
-/* 响应式调整 */
-@media (max-width: 1200px) {
-  .main-sub-layout {
-    flex-direction: column;
-  }
-  
-  .main-video,
-  .sub-videos {
-    width: 100%;
-  }
-  
-  .sub-videos {
-    height: auto;
-    flex-direction: row;
-  }
-  
-  .sub-video {
-    flex: 1;
-  }
-  
-  /* 响应式下重置所有网格布局为flex */
-  .patrol-section .main-sub-layout,
-  .track-section .main-sub-layout.track-layout,
-  .emergency-section .main-sub-layout.emergency-main-sub {
-    display: flex;
-    flex-direction: column;
-  }
-  
-  .patrol-section .main-video,
-  .patrol-section .sub-videos,
-  .track-section .main-video,
-  .track-section .sub-videos.track-sub-videos,
-  .emergency-section .main-video,
-  .emergency-section .sub-videos.emergency-sub-videos {
-    grid-row: auto;
-    grid-column: auto;
-  }
-  
-  .track-section .sub-videos.track-sub-videos,
-  .emergency-section .sub-videos.emergency-sub-videos {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-  }
-  
-  .track-section .sub-video,
-  .emergency-section .sub-video {
-    width: calc(50% - 4px);
-    height: auto;
-  }
-}
-
-/* 特情版块样式 */
-.emergency-section {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.emergency-section .emergency-layout {
-  display: flex;
-  flex: 1;
-  gap: 8px;
-  height: calc(100% - 60px); /* 减去顶部设置栏的高度 */
-}
-
-.emergency-section .left-section {
-  width: 70%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.emergency-section .right-section {
-  width: 30%;
-  height: 100%;
-  background-color: #f0f2f5;
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.emergency-section .emergency-plan {
-  padding: 20px;
-  height: 100%;
-  overflow-y: auto;
-  background-color: white;
-}
-
-.emergency-section .emergency-plan h3 {
-  margin: 0 0 15px 0;
-  font-size: 18px;
-  color: #303133;
-}
-
-.emergency-section .plan-content {
-  margin-top: 15px;
-}
-
-.emergency-section .plan-content h4 {
-  margin: 0 0 10px 0;
-  font-size: 16px;
-  color: #303133;
-}
-
-.emergency-section .plan-description {
-  margin: 0 0 15px 0;
-  font-size: 14px;
-  color: #606266;
-  line-height: 1.5;
-}
-
-.emergency-section .plan-steps {
-  margin-top: 15px;
-}
-
-.emergency-section .plan-step {
-  margin-bottom: 15px;
-  display: flex;
-  align-items: flex-start;
-  gap: 10px;
-}
-
-.emergency-section .step-number {
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  background-color: #1a73e8;
-  color: white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  flex-shrink: 0;
-  margin-top: 2px;
-}
-
-.emergency-section .step-content {
-  flex: 1;
-  font-size: 14px;
-  color: #606266;
-  line-height: 1.5;
-}
-
-.emergency-section .plan-footer {
-  margin-top: 20px;
-  padding-top: 15px;
-  border-top: 1px solid #e4e7ed;
-}
-
-.emergency-section .plan-priority {
-  padding: 5px 10px;
-  border-radius: 4px;
-  font-size: 12px;
-  font-weight: 500;
-  display: inline-block;
-}
-
-.emergency-section .plan-priority.high {
-  background-color: #fef0f0;
-  color: #f56c6c;
-  border: 1px solid #fbc4ab;
-}
-
-.emergency-section .plan-priority.medium {
-  background-color: #fdf6ec;
-  color: #e6a23c;
-  border: 1px solid #fde68a;
-}
-
-.emergency-section .plan-priority.low {
-  background-color: #f0f9eb;
-  color: #67c23a;
-  border: 1px solid #b3e19d;
-}
-
-/* 响应式调整 */
-@media (max-width: 1200px) {
-  /* 特情版块响应式调整 */
-  .emergency-section .emergency-layout {
-    flex-direction: column;
-  }
-  
-  .emergency-section .left-section,
-  .emergency-section .right-section {
-    width: 100%;
-    height: auto;
-  }
-  
-  .emergency-section .right-section {
-    height: 300px;
-  }
-}
-</style>
\ No newline at end of file
+.video-wall-container { padding: 20px; }
+.settings-bar { display: flex; gap: 20px; align-items: center; margin-bottom: 20px; }
+.section-status { color: #fff; }
+.main-content { display: flex; gap: 12px; }
+.video-grid { flex: 1; }
+.standard-grid { display: grid; gap: 4px; }
+.grid-3x3 { grid-template-columns: repeat(3, 1fr); }
+.grid-3x4 { grid-template-columns: repeat(4, 1fr); }
+.grid-4x4 { grid-template-columns: repeat(4, 1fr); }
+.grid-5x5 { grid-template-columns: repeat(5, 1fr); }
+.video-item, .sub-video { aspect-ratio: 16/9; }
+.video-frame { width: 100%; height: 100%; background: #000; position: relative; border-radius: 4px; overflow: hidden; }
+.video-real { width: 100%; height: 100%; object-fit: cover; }
+.video-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: #fff; }
+.video-name { font-size: 14px; color: #fff; }
+.video-status.online { color: #67c23a; }
+.video-status.offline { color: #f56c6c; }
+.main-sub-layout { display: flex; gap: 4px; }
+.main-video { flex: 2; }
+.sub-videos { flex: 1; display: flex; flex-direction: column; gap: 4px; }
+.track-sub-videos { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
+.track-layout { display: flex; }
+.camera-control-panel { width: 200px; padding: 10px; background: rgba(255,255,255,0.05); border-radius: 8px; }
+.camera-info h3 { color: #fff; margin: 0; }
+.ptz-controls h4 { color: #fff; text-align: center; margin: 8px 0; }
+.ptz-buttons { display: flex; flex-direction: column; align-items: center; gap: 4px; }
+.ptz-row { display: flex; gap: 4px; }
+.ptz-btn { width: 36px; height: 36px; }
+.emergency-section { flex: 1; }
+</style>