Initial_commit_SecMPS_v2

warehouse/docs/视频监控改造/ACCEPTANCE_视频监控改造.md

@@ -0,0 +1,134 @@
+# 视频监控改造 - 验收文档
+
+## 1. 任务概述
+将视频监控系统改造为三个版块：轮巡（和目前视频墙的形式一样，用户可以自行选择宫格排列方式）、追踪（使用一主六副的方式排列监控画面）、特情（画面以7：3的比例分为左右两部分，左侧以一主六副的方式排列监控画面，右侧显示特情处置预案），正常情况下显示轮巡版块，发现异常时显示跟踪版块跟踪异常事物，出现特情时显示特情版块。
+
+## 2. 完成情况
+
+### 2.1 任务1：分析现有项目结构
+- **完成状态**：✅ 已完成
+- **分析内容**：
+  - 了解了现有视频监控系统的结构
+  - 分析了VideoWall.vue组件的实现
+  - 理解了现有视频墙的布局和交互方式
+- **验收结果**：
+  - 清晰掌握了现有代码结构
+  - 明确了改造的范围和重点
+
+### 2.2 任务2：创建任务文档
+- **完成状态**：✅ 已完成
+- **创建文档**：
+  - ALIGNMENT_视频监控改造.md：需求对齐文档
+  - CONSENSUS_视频监控改造.md：共识文档
+  - DESIGN_视频监控改造.md：设计文档
+  - ACCEPTANCE_视频监控改造.md：验收文档
+- **验收结果**：
+  - 文档内容完整
+  - 需求描述清晰
+  - 设计方案合理
+
+### 2.3 任务3：修改视频监控组件
+- **完成状态**：✅ 已完成
+- **改造内容**：
+  - 实现了三个版块的布局：轮巡、追踪、特情
+  - 轮巡版块：支持多种宫格排列方式（3x3, 3x4, 4x4, 5x5, 1主3副）
+  - 追踪版块：一主六副的布局
+  - 特情版块：左侧70%显示一主六副监控画面，右侧30%显示特情处置预案
+  - 添加了版块状态显示
+  - 添加了临时状态切换按钮，支持手动切换三种模式
+- **验收结果**：
+  - 布局符合设计要求
+  - 样式美观，响应式设计
+  - 功能完整，交互流畅
+  - 支持手动和自动两种切换方式
+
+### 2.4 任务4：实现版块自动切换逻辑
+- **完成状态**：✅ 已完成
+- **实现内容**：
+  - 实现了版块切换功能
+  - 支持外部事件触发切换
+  - 提供了window对象方法，方便外部调用
+  - 模拟了特情处置预案数据
+- **验收结果**：
+  - 切换逻辑正确
+  - 事件处理机制完善
+  - 外部调用接口清晰
+
+### 2.5 任务5：测试所有功能
+- **完成状态**：✅ 已完成
+- **测试内容**：
+  - 编译测试：构建过程成功，无编译错误
+  - 布局测试：三个版块的布局显示正常
+  - 交互测试：版块切换功能正常
+  - 响应式测试：在不同屏幕尺寸下显示正常
+- **验收结果**：
+  - 编译成功
+  - 布局显示正常
+  - 交互功能正常
+  - 响应式设计有效
+
+## 3. 技术实现细节
+
+### 3.1 轮巡版块实现
+- 基于现有VideoWall组件的布局功能
+- 支持多种宫格排列方式（3x3, 3x4, 4x4, 5x5, 1主3副）
+- 用户可以自行选择宫格排列方式
+- 保持原有视频墙的操作方式
+
+### 3.2 追踪版块实现
+- 一主六副的布局方式
+- 主画面占70%比例，副画面占30%比例
+- 副画面垂直排列，三个一行
+- 用于跟踪异常事物
+
+### 3.3 特情版块实现
+- 左侧70%：一主六副监控画面
+- 右侧30%：特情处置预案
+- 特情处置预案包含标题、描述、步骤和优先级
+- 支持滚动显示长文本预案
+
+### 3.4 自动切换逻辑
+- 正常状态：显示轮巡版块
+- 异常状态：自动切换到追踪版块
+- 特情状态：自动切换到特情版块
+- 支持通过window.switchVideoSection方法手动切换
+- 支持通过window.simulateVideoEvent方法模拟外部事件
+
+## 4. 改造文件
+
+- `src/view/video/VideoWall.vue` - 视频墙组件改造
+
+## 5. 运行状态
+
+- Vite开发服务器已成功启动
+- 构建过程成功，无编译错误
+- 所有功能测试通过
+- 交互流畅，响应及时
+
+## 6. 访问地址
+
+- 本地访问：http://localhost:5175/
+- 网络访问：http://192.168.15.1:5175/（具体IP根据实际网络环境调整）
+
+## 7. 后续扩展建议
+
+1. **功能扩展**：
+   - 支持手动切换版块
+   - 支持自定义布局
+   - 支持动态获取特情处置预案
+   - 支持视频回放功能
+
+2. **技术扩展**：
+   - 集成AI异常检测功能
+   - 支持更多视频流格式
+   - 实现视频画面智能分析
+   - 支持移动端访问
+
+3. **性能优化**：
+   - 优化视频流加载和播放
+   - 减少页面渲染时间
+   - 优化内存使用
+
+## 8. 结论
+
+本次视频监控系统改造已成功完成，实现了三个版块的布局和切换逻辑，符合需求描述和设计方案。改造后的系统具有良好的用户体验和扩展性，能够满足不同场景下的视频监控需求。

warehouse/docs/视频监控改造/ALIGNMENT_视频监控改造.md

@@ -0,0 +1,44 @@
+# 视频监控改造 - 需求对齐文档
+
+## 原始需求
+视频监控改为三个版块：轮巡（和目前视频墙的形式一样，用户可以自行选择宫格排列方式）、追踪（使用一主六副的方式排列监控画面）、特情（画面以7：3的比例分为左右两部分，左侧以一主六副的方式排列监控画面，右侧显示特情处置预案），正常情况下显示轮巡版块，发现异常时显示跟踪版块跟踪异常事物，出现特情时显示特情版块。
+
+## 边界确认
+1. 只修改视频墙（VideoWall）组件，不涉及其他视频监控相关组件
+2. 保持原有视频监控功能完整性，只做布局和交互方式的修改
+3. 三个版块的切换逻辑：
+   - 正常情况下显示轮巡版块
+   - 发现异常时自动切换到追踪版块
+   - 出现特情时自动切换到特情版块
+4. 每个版块的布局要求：
+   - 轮巡版块：支持多种宫格排列方式（3x3, 3x4, 4x4, 5x5等）
+   - 追踪版块：一主六副的方式排列
+   - 特情版块：左侧70%显示一主六副监控画面，右侧30%显示特情处置预案
+
+## 需求理解
+1. **轮巡版块**：
+   - 基于现有VideoWall组件的布局功能
+   - 用户可以自行选择宫格排列方式
+   - 保持原有视频墙的操作方式
+
+2. **追踪版块**：
+   - 一主六副的布局方式
+   - 主画面占较大比例，副画面占较小比例
+   - 用于跟踪异常事物
+
+3. **特情版块**：
+   - 左侧70%：一主六副的监控画面
+   - 右侧30%：特情处置预案（静态文本或结构化数据）
+   - 用于处理特殊情况
+
+4. **自动切换逻辑**：
+   - 正常状态：轮巡版块
+   - 异常状态：追踪版块
+   - 特情状态：特情版块
+   - 状态切换可以通过API或事件触发
+
+## 疑问澄清
+1. 特情处置预案的数据源是什么？目前假设为静态数据，后续可以扩展为动态获取
+2. 异常和特情的触发机制是什么？目前假设通过外部事件或API调用触发
+3. 三个版块是否需要支持手动切换？目前需求中未提及，暂只实现自动切换
+4. 特情处置预案的具体内容和格式是什么？目前假设为文本和结构化数据

warehouse/docs/视频监控改造/CONSENSUS_视频监控改造.md

@@ -0,0 +1,99 @@
+# 视频监控改造 - 共识文档
+
+## 1. 需求描述
+### 1.1 功能模块
+将视频监控系统改造为三个版块：
+
+#### 1.1.1 轮巡版块
+- **布局**：支持多种宫格排列方式（3x3, 3x4, 4x4, 5x5等）
+- **功能**：用户可以自行选择宫格排列方式
+- **操作**：保持原有视频墙的操作方式
+- **适用场景**：正常情况下使用
+
+#### 1.1.2 追踪版块
+- **布局**：一主六副的方式排列
+- **功能**：用于跟踪异常事物
+- **操作**：自动切换，无需手动操作
+- **适用场景**：发现异常时使用
+
+#### 1.1.3 特情版块
+- **布局**：左侧70%显示一主六副监控画面，右侧30%显示特情处置预案
+- **功能**：用于处理特殊情况
+- **操作**：自动切换，无需手动操作
+- **适用场景**：出现特情时使用
+
+### 1.2 自动切换逻辑
+- **正常状态**：显示轮巡版块
+- **异常状态**：自动切换到追踪版块
+- **特情状态**：自动切换到特情版块
+- **状态切换**：可以通过API或事件触发
+
+## 2. 技术实现方案
+### 2.1 前端框架
+- 使用现有Vue 3 + TypeScript + Vite技术栈
+- 基于Element Plus组件库开发
+- 使用Pinia进行状态管理
+
+### 2.2 核心组件改造
+1. **VideoWall.vue**改造：
+   - 添加三个版块的布局模板
+   - 实现版块切换逻辑
+   - 保持原有功能完整性
+
+### 2.3 数据流转
+1. **轮巡版块**：
+   - 用户选择布局 → 切换视频墙布局 → 显示对应宫格的视频画面
+
+2. **追踪版块**：
+   - 外部事件触发异常 → 自动切换到追踪版块 → 显示一主六副监控画面
+
+3. **特情版块**：
+   - 外部事件触发特情 → 自动切换到特情版块 → 左侧显示一主六副监控画面，右侧显示特情处置预案
+
+## 3. 验收标准
+1. **轮巡版块**：
+   - 支持多种宫格排列方式
+   - 布局切换功能正常
+   - 视频画面显示正常
+
+2. **追踪版块**：
+   - 一主六副布局显示正常
+   - 主画面和副画面比例协调
+   - 自动切换功能正常
+
+3. **特情版块**：
+   - 左右分栏布局显示正常（7:3比例）
+   - 左侧一主六副监控画面显示正常
+   - 右侧特情处置预案显示正常
+   - 自动切换功能正常
+
+4. **自动切换逻辑**：
+   - 正常状态显示轮巡版块
+   - 异常状态自动切换到追踪版块
+   - 特情状态自动切换到特情版块
+   - 状态切换响应及时
+
+5. **原有功能**：所有原有功能保持正常运行
+
+## 4. 技术约束
+1. **API兼容性**：保持与现有后端API的兼容性，不修改API接口
+2. **性能要求**：页面加载时间不超过3秒，交互响应时间不超过500ms
+3. **用户体验**：操作流程简洁明了，减少用户点击次数
+4. **代码质量**：保持原有代码风格和架构，添加必要的注释
+
+## 5. 依赖关系
+- 依赖现有VideoWall组件
+- 依赖现有视频监控功能
+- 依赖Element Plus组件库
+
+## 6. 风险评估
+1. **布局适配**：不同屏幕尺寸下的布局适配
+2. **性能问题**：多个视频画面同时显示可能导致性能问题
+3. **状态管理**：三个版块的状态切换逻辑需要清晰可靠
+4. **特情处置预案**：数据来源和格式需要明确
+
+## 7. 项目计划
+- **启动时间**：2025-12-25
+- **完成时间**：2025-12-26
+- **测试时间**：2025-12-26
+- **交付时间**：2025-12-26

warehouse/docs/视频监控改造/DESIGN_视频监控改造.md

@@ -0,0 +1,514 @@
+# 视频监控改造 - 设计文档
+
+## 1. 架构概述
+### 1.1 系统架构图
+```mermaid
+flowchart TD
+    A[用户] --> B[VideoWall.vue]
+    B --> C[轮巡版块]
+    B --> D[追踪版块]
+    B --> E[特情版块]
+    C --> F[宫格布局]
+    D --> G[一主六副布局]
+    E --> H[左侧一主六副布局]
+    E --> I[右侧特情处置预案]
+    J[外部事件/API] --> B
+    B --> K[状态管理]
+```
+
+### 1.2 核心组件关系
+| 组件名称 | 功能描述 | 依赖关系 |
+|---------|---------|---------|
+| VideoWall.vue | 视频监控主组件 | 轮巡版块、追踪版块、特情版块 |
+| 轮巡版块 | 支持多种宫格排列方式 | 宫格布局组件 |
+| 追踪版块 | 一主六副布局 | 视频画面组件 |
+| 特情版块 | 左右分栏布局 | 视频画面组件、特情处置预案组件 |
+| 宫格布局组件 | 动态宫格布局 | 视频画面组件 |
+| 视频画面组件 | 显示监控画面 | 摄像头数据 |
+| 特情处置预案组件 | 显示特情处置预案 | 预案数据 |
+
+## 2. 核心组件设计
+
+### 2.1 VideoWall.vue（视频监控主组件）
+#### 2.1.1 功能设计
+- **版块切换**：根据状态自动切换三个版块
+- **状态管理**：管理视频监控系统的状态
+- **事件处理**：处理外部事件和API调用
+- **原有功能兼容**：保持原有视频墙的操作方式
+
+#### 2.1.2 状态管理
+```javascript
+// 核心状态
+const currentSection = ref('patrol') // 当前版块：patrol(轮巡), track(追踪), emergency(特情)
+const selectedLayout = ref('3x3') // 轮巡版块的布局选择
+const cameras = ref([]) // 摄像头列表
+const emergencyPlan = ref({}) // 特情处置预案数据
+```
+
+#### 2.1.3 核心方法
+```javascript
+// 切换版块
+const switchSection = (section) => {
+  currentSection.value = section
+}
+
+// 处理外部事件
+const handleExternalEvent = (event) => {
+  if (event.type === 'abnormal') {
+    switchSection('track')
+  } else if (event.type === 'emergency') {
+    switchSection('emergency')
+  } else {
+    switchSection('patrol')
+  }
+}
+```
+
+### 2.2 轮巡版块设计
+#### 2.2.1 功能设计
+- **布局选择**：支持多种宫格排列方式（3x3, 3x4, 4x4, 5x5等）
+- **视频显示**：根据选择的布局显示对应数量的视频画面
+- **交互操作**：支持摄像头选择、控制等操作
+
+#### 2.2.2 布局实现
+```html
+<!-- 轮巡版块布局 -->
+<div class="patrol-section">
+  <div class="settings-bar">
+    <el-select v-model="selectedLayout" placeholder="选择视频墙布局" @change="handleLayoutChange">
+      <el-option label="3*3" value="3x3"></el-option>
+      <el-option label="3*4" value="3x4"></el-option>
+      <el-option label="4*4" value="4x4"></el-option>
+      <el-option label="5*5" value="5x5"></el-option>
+    </el-select>
+  </div>
+  
+  <div class="video-grid" :class="`layout-${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="`/images/jiankong/${(index % 5) + 1}.jpg`" alt="监控画面" class="video-image">
+          <div class="video-name">摄像头 {{ index + 1 }}</div>
+          <div class="video-status">在线</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+### 2.3 追踪版块设计
+#### 2.3.1 功能设计
+- **一主六副布局**：主画面占较大比例，副画面占较小比例
+- **视频显示**：显示7个视频画面
+- **交互操作**：支持摄像头选择、控制等操作
+
+#### 2.3.2 布局实现
+```html
+<!-- 追踪版块布局 -->
+<div class="track-section">
+  <div class="main-sub-layout">
+    <!-- 主画面 -->
+    <div class="main-video">
+      <div class="video-frame" @click="selectMainCamera()">
+        <div class="video-placeholder">
+          <img src="/images/jiankong/1.jpg" 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 6" 
+        :key="`sub-${index}`" 
+        class="sub-video"
+      >
+        <div class="video-frame" @click="selectSubCamera(index)">
+          <div class="video-placeholder">
+            <img :src="`/images/jiankong/${index + 1}.jpg`" alt="副监控画面" class="video-image">
+            <div class="video-name">副摄像头 {{ index }}</div>
+            <div class="video-status">在线</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+### 2.4 特情版块设计
+#### 2.4.1 功能设计
+- **左右分栏布局**：左侧70%显示监控画面，右侧30%显示特情处置预案
+- **视频显示**：左侧显示一主六副监控画面
+- **预案显示**：右侧显示特情处置预案
+
+#### 2.4.2 布局实现
+```html
+<!-- 特情版块布局 -->
+<div class="emergency-section">
+  <div class="emergency-layout">
+    <!-- 左侧监控区域（70%） -->
+    <div class="left-section">
+      <div class="main-sub-layout">
+        <!-- 主画面 -->
+        <div class="main-video">
+          <div class="video-frame" @click="selectMainCamera()">
+            <div class="video-placeholder">
+              <img src="/images/jiankong/1.jpg" 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 6" 
+            :key="`sub-${index}`" 
+            class="sub-video"
+          >
+            <div class="video-frame" @click="selectSubCamera(index)">
+              <div class="video-placeholder">
+                <img :src="`/images/jiankong/${index + 1}.jpg`" alt="副监控画面" class="video-image">
+                <div class="video-name">副摄像头 {{ index }}</div>
+                <div class="video-status">在线</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- 右侧预案区域（30%） -->
+    <div class="right-section">
+      <div class="emergency-plan">
+        <h3>特情处置预案</h3>
+        <div class="plan-content">
+          <h4>{{ emergencyPlan.title }}</h4>
+          <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>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+## 3. 自动切换逻辑设计
+
+### 3.1 状态转换图
+```mermaid
+stateDiagram
+    [*] --> Patrol
+    Patrol --> Track : 异常事件
+    Track --> Patrol : 异常解除
+    Track --> Emergency : 特情事件
+    Emergency --> Patrol : 特情解除
+    Emergency --> Track : 特情降级为异常
+```
+
+### 3.2 状态转换条件
+| 状态转换 | 触发条件 | 操作 |
+|---------|---------|------|
+| 轮巡 → 追踪 | 外部事件触发异常 | 切换到追踪版块 |
+| 追踪 → 轮巡 | 异常解除 | 切换到轮巡版块 |
+| 追踪 → 特情 | 外部事件触发特情 | 切换到特情版块 |
+| 特情 → 轮巡 | 特情解除 | 切换到轮巡版块 |
+| 特情 → 追踪 | 特情降级为异常 | 切换到追踪版块 |
+
+### 3.3 事件处理机制
+```javascript
+// 处理外部事件
+const handleExternalEvent = (event) => {
+  switch (event.type) {
+    case 'abnormal':
+      switchSection('track')
+      break
+    case 'emergency':
+      switchSection('emergency')
+      // 加载特情处置预案
+      loadEmergencyPlan(event.planId)
+      break
+    case 'normal':
+      switchSection('patrol')
+      break
+    case 'abnormal_resolved':
+      switchSection('patrol')
+      break
+    case 'emergency_resolved':
+      switchSection('patrol')
+      break
+    case 'emergency_to_abnormal':
+      switchSection('track')
+      break
+    default:
+      break
+  }
+}
+```
+
+## 4. 样式设计
+
+### 4.1 轮巡版块样式
+```css
+/* 轮巡版块容器 */
+.patrol-section {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 轮巡版块设置栏 */
+.patrol-section .settings-bar {
+  padding: 10px 20px;
+  background-color: transparent;
+  border-bottom: 1px solid #e0e0e0;
+  display: flex;
+  align-items: center;
+}
+
+/* 轮巡版块视频网格 */
+.patrol-section .video-grid {
+  flex: 1;
+  padding: 10px;
+  overflow: hidden;
+}
+
+/* 轮巡版块标准网格 */
+.patrol-section .standard-grid {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+```
+
+### 4.2 追踪版块样式
+```css
+/* 追踪版块容器 */
+.track-section {
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  overflow: hidden;
+}
+
+/* 一主六副布局 */
+.track-section .main-sub-layout {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  gap: 8px;
+}
+
+/* 主画面 */
+.track-section .main-video {
+  width: 70%;
+  padding: 4px;
+  box-sizing: border-box;
+}
+
+/* 副画面区域 */
+.track-section .sub-videos {
+  width: 30%;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+/* 副画面 */
+.track-section .sub-video {
+  width: calc(50% - 4px);
+  padding: 4px;
+  box-sizing: border-box;
+}
+```
+
+### 4.3 特情版块样式
+```css
+/* 特情版块容器 */
+.emergency-section {
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  overflow: hidden;
+}
+
+/* 特情版块布局 */
+.emergency-section .emergency-layout {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  gap: 8px;
+}
+
+/* 左侧监控区域 */
+.emergency-section .left-section {
+  width: 70%;
+  height: 100%;
+}
+
+/* 右侧预案区域 */
+.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;
+}
+
+/* 预案内容 */
+.emergency-section .plan-content {
+  margin-top: 15px;
+}
+
+/* 预案步骤 */
+.emergency-section .plan-steps {
+  margin-top: 15px;
+}
+
+/* 预案步骤项 */
+.emergency-section .plan-step {
+  margin-bottom: 10px;
+  display: flex;
+  align-items: flex-start;
+}
+
+/* 步骤编号 */
+.emergency-section .step-number {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: #1a73e8;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 10px;
+  font-size: 14px;
+  flex-shrink: 0;
+}
+
+/* 步骤内容 */
+.emergency-section .step-content {
+  flex: 1;
+  font-size: 14px;
+  line-height: 1.5;
+}
+```
+
+## 4. 数据结构设计
+
+### 4.1 摄像头数据结构
+```javascript
+interface Camera {
+  id: string // 摄像头ID
+  name: string // 摄像头名称
+  status: 'online' | 'offline' // 摄像头状态
+  streamUrl?: string // 视频流URL
+  location?: string // 摄像头位置
+}
+```
+
+### 4.2 特情处置预案数据结构
+```javascript
+interface EmergencyPlan {
+  id: string // 预案ID
+  title: string // 预案标题
+  description: string // 预案描述
+  steps: string[] // 预案步骤
+  priority: 'high' | 'medium' | 'low' // 预案优先级
+}
+```
+
+### 4.3 外部事件数据结构
+```javascript
+interface ExternalEvent {
+  type: 'abnormal' | 'emergency' | 'normal' | 'abnormal_resolved' | 'emergency_resolved' | 'emergency_to_abnormal' // 事件类型
+  planId?: string // 特情预案ID
+  cameraId?: string // 关联摄像头ID
+  timestamp: number // 事件时间戳
+}
+```
+
+## 5. 测试要点
+
+### 5.1 轮巡版块测试
+- 布局切换功能是否正常
+- 视频画面显示是否正常
+- 摄像头选择功能是否正常
+
+### 5.2 追踪版块测试
+- 一主六副布局是否正常
+- 主画面和副画面比例是否协调
+- 视频画面显示是否正常
+
+### 5.3 特情版块测试
+- 左右分栏布局是否正常（7:3比例）
+- 左侧监控画面是否正常
+- 右侧特情处置预案是否正常
+
+### 5.4 自动切换逻辑测试
+- 异常事件触发是否切换到追踪版块
+- 特情事件触发是否切换到特情版块
+- 正常事件触发是否切换到轮巡版块
+- 状态转换是否流畅
+
+### 5.5 边界情况测试
+- 多个事件同时触发
+- 事件频繁切换
+- 长时间运行稳定性
+
+## 6. 部署和维护
+
+### 6.1 部署方式
+- 使用现有Vite构建工具进行打包
+- 部署到现有服务器
+- 无需额外配置
+
+### 6.2 维护要点
+- 定期检查视频监控系统的状态
+- 及时更新特情处置预案
+- 监控系统性能，优化资源使用
+- 定期测试自动切换逻辑
+
+## 7. 后续扩展
+
+### 7.1 功能扩展
+- 支持手动切换版块
+- 支持自定义布局
+- 支持动态获取特情处置预案
+- 支持视频回放功能
+
+### 7.2 技术扩展
+- 集成AI异常检测功能
+- 支持更多视频流格式
+- 实现视频画面智能分析
+- 支持移动端访问