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

视频监控改造 - 设计文档

1. 架构概述

1.1 系统架构图

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 状态管理

// 核心状态
const currentSection = ref('patrol') // 当前版块：patrol(轮巡), track(追踪), emergency(特情)
const selectedLayout = ref('3x3') // 轮巡版块的布局选择
const cameras = ref([]) // 摄像头列表
const emergencyPlan = ref({}) // 特情处置预案数据

2.1.3 核心方法

// 切换版块
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 布局实现

<!-- 轮巡版块布局 -->
<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 布局实现

<!-- 追踪版块布局 -->
<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 布局实现

<!-- 特情版块布局 -->
<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 状态转换图

stateDiagram
    [*] --> Patrol
    Patrol --> Track : 异常事件
    Track --> Patrol : 异常解除
    Track --> Emergency : 特情事件
    Emergency --> Patrol : 特情解除
    Emergency --> Track : 特情降级为异常

3.2 状态转换条件

状态转换	触发条件	操作
轮巡 → 追踪	外部事件触发异常	切换到追踪版块
追踪 → 轮巡	异常解除	切换到轮巡版块
追踪 → 特情	外部事件触发特情	切换到特情版块
特情 → 轮巡	特情解除	切换到轮巡版块
特情 → 追踪	特情降级为异常	切换到追踪版块

3.3 事件处理机制

// 处理外部事件
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 轮巡版块样式

/* 轮巡版块容器 */
.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 追踪版块样式

/* 追踪版块容器 */
.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 特情版块样式

/* 特情版块容器 */
.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 摄像头数据结构

interface Camera {
  id: string // 摄像头ID
  name: string // 摄像头名称
  status: 'online' | 'offline' // 摄像头状态
  streamUrl?: string // 视频流URL
  location?: string // 摄像头位置
}

4.2 特情处置预案数据结构

interface EmergencyPlan {
  id: string // 预案ID
  title: string // 预案标题
  description: string // 预案描述
  steps: string[] // 预案步骤
  priority: 'high' | 'medium' | 'low' // 预案优先级
}

4.3 外部事件数据结构

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异常检测功能
• 支持更多视频流格式
• 实现视频画面智能分析
• 支持移动端访问