From db42d47f5692ef64e5436c5a6d29dcb537b44596 Mon Sep 17 00:00:00 2001
From: zouyu <2723363702@qq.com>
Date: 星期一, 26 一月 2026 16:36:13 +0800
Subject: [PATCH] 浪潮对接单点登录:mis调整
---
src/views/monitorManagement/videoMonitor/index.vue | 990 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 990 insertions(+), 0 deletions(-)
diff --git a/src/views/monitorManagement/videoMonitor/index.vue b/src/views/monitorManagement/videoMonitor/index.vue
new file mode 100644
index 0000000..b78c7f5
--- /dev/null
+++ b/src/views/monitorManagement/videoMonitor/index.vue
@@ -0,0 +1,990 @@
+<template>
+ <div class="app-container">
+ <el-row :gutter="16">
+ <!-- 宸︿晶锛氳棰戠洃鎺у垪琛ㄤ笌鎶撴媿璁板綍 -->
+ <el-col :span="16">
+ <!-- 瑙嗛鐩戞帶鍒楄〃 -->
+ <el-card shadow="never" class="section-card">
+ <template #header>
+ <div class="card-header">
+ <span>瑙嗛鐩戞帶鐐逛綅绠＄悊</span>
+ <div class="header-actions">
+ <el-select v-model="selectedArea" placeholder="閫夋嫨鍖哄煙" size="small" style="width: 160px" @change="filterCameras">
+ <el-option label="鍏ㄩ儴鍖哄煙" value="all" />
+ <el-option v-for="area in areas" :key="area.id" :label="area.name" :value="area.id" />
+ </el-select>
+ <el-select v-model="cameraStatus" placeholder="璁惧鐘舵��" size="small" style="width: 120px" @change="filterCameras">
+ <el-option label="鍏ㄩ儴鐘舵��" value="all" />
+ <el-option label="鍦ㄧ嚎" value="online" />
+ <el-option label="绂荤嚎" value="offline" />
+ </el-select>
+ </div>
+ </div>
+ </template>
+ <el-table :data="filteredCameras" border style="width: 100%" max-height="320">
+ <el-table-column type="index" width="50" label="搴忓彿" align="center" />
+ <el-table-column prop="name" label="鐩戞帶鐐逛綅" min-width="140" show-overflow-tooltip />
+ <el-table-column prop="areaName" label="鎵�灞炲尯鍩�" width="120" />
+ <el-table-column label="璁惧鐘舵��" width="100" align="center">
+ <template #default="{ row }">
+ <el-tag :type="row.status === 'online' ? 'success' : 'danger'" size="small">
+ {{ row.status === 'online' ? '鍦ㄧ嚎' : '绂荤嚎' }}
+ </el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column label="AI璇嗗埆" width="100" align="center">
+ <template #default="{ row }">
+ <el-tag v-if="row.aiEnabled" type="success" size="small">宸插惎鐢�</el-tag>
+ <el-tag v-else type="info" size="small">鏈惎鐢�</el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column label="闂ㄧ鑱斿姩" width="100" align="center">
+ <template #default="{ row }">
+ <el-tag v-if="row.doorLinked" type="primary" size="small">宸茬粦瀹�</el-tag>
+ <el-tag v-else type="info" size="small">鏈粦瀹�</el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column label="鎿嶄綔" width="180" align="center" fixed="right">
+ <template #default="{ row }">
+ <el-button link type="primary" size="small" @click="viewRealtime(row)">瀹炴椂鐢婚潰</el-button>
+ <el-button link type="success" size="small" @click="viewCaptures(row)">鎶撴媿璁板綍</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ </el-card>
+
+ <!-- 闂ㄧ鎶撴媿璁板綍 -->
+ <el-card shadow="never" class="section-card">
+ <template #header>
+ <div class="card-header">
+ <span>闂ㄧ鎶撴媿璁板綍</span>
+ <div class="header-actions">
+ <el-date-picker
+ v-model="captureDate"
+ type="daterange"
+ range-separator="鑷�"
+ start-placeholder="寮�濮嬫棩鏈�"
+ end-placeholder="缁撴潫鏃ユ湡"
+ size="small"
+ style="width: 260px"
+ @change="loadCaptures"
+ />
+ <el-select v-model="captureEventType" placeholder="浜嬩欢绫诲瀷" size="small" style="width: 100px" clearable>
+ <el-option label="鍏ㄩ儴" value="" />
+ <el-option label="杩涘叆" value="entry" />
+ <el-option label="绂诲紑" value="exit" />
+ </el-select>
+ <el-input v-model="captureSearch" placeholder="鎼滅储宸ュ彿/鍖哄煙" size="small" style="width: 140px" clearable>
+ <template #prefix>
+ <el-icon><Search /></el-icon>
+ </template>
+ </el-input>
+ <el-button type="primary" size="small" @click="exportCaptures">
+ <el-icon><Download /></el-icon>
+ 瀵煎嚭
+ </el-button>
+ </div>
+ </div>
+ </template>
+
+ <!-- 缁熻淇℃伅 -->
+ <div class="capture-stats">
+ <el-row :gutter="16">
+ <el-col :span="6">
+ <div class="stat-item">
+ <div class="stat-label">浠婃棩鎶撴媿</div>
+ <div class="stat-value">{{ captureStats.today }}</div>
+ </div>
+ </el-col>
+ <el-col :span="6">
+ <div class="stat-item">
+ <div class="stat-label">杩涘叆璁板綍</div>
+ <div class="stat-value" style="color: #67c23a">{{ captureStats.entry }}</div>
+ </div>
+ </el-col>
+ <el-col :span="6">
+ <div class="stat-item">
+ <div class="stat-label">绂诲紑璁板綍</div>
+ <div class="stat-value" style="color: #e6a23c">{{ captureStats.exit }}</div>
+ </div>
+ </el-col>
+ <el-col :span="6">
+ <div class="stat-item">
+ <div class="stat-label">浣庡尮閰嶅害</div>
+ <div class="stat-value" style="color: #f56c6c">{{ captureStats.lowMatch }}</div>
+ </div>
+ </el-col>
+ </el-row>
+ </div>
+
+ <el-table
+ :data="paginatedCaptures"
+ border
+ style="width: 100%"
+ max-height="350"
+ @selection-change="handleCaptureSelection"
+ >
+ <el-table-column type="selection" width="45" align="center" />
+ <el-table-column type="index" width="50" label="搴忓彿" align="center" :index="indexMethod" />
+ <el-table-column prop="time" label="鎶撴媿鏃堕棿" width="155" sortable />
+ <el-table-column prop="personId" label="宸ュ彿" width="110" show-overflow-tooltip />
+ <el-table-column prop="department" label="閮ㄩ棬" width="100" show-overflow-tooltip />
+ <el-table-column prop="areaName" label="鍖哄煙" width="110" show-overflow-tooltip />
+ <el-table-column label="闂ㄧ浜嬩欢" width="90" align="center">
+ <template #default="{ row }">
+ <el-tag :type="row.eventType === 'entry' ? 'success' : 'warning'" size="small">
+ {{ row.eventType === 'entry' ? '杩涘叆' : '绂诲紑' }}
+ </el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column label="浜鸿劯鍖归厤" width="95" align="center" sortable :sort-method="(a, b) => a.faceMatch - b.faceMatch">
+ <template #default="{ row }">
+ <el-tag :type="getFaceMatchType(row.faceMatch)" size="small">
+ {{ row.faceMatch }}%
+ </el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column prop="cameraName" label="鎽勫儚澶�" width="120" show-overflow-tooltip />
+ <el-table-column label="鎿嶄綔" width="150" align="center" fixed="right">
+ <template #default="{ row }">
+ <el-button link type="primary" size="small" @click="viewSnapshot(row)">
+ <el-icon><View /></el-icon>
+ 鏌ョ湅
+ </el-button>
+ <el-button link type="success" size="small" @click="downloadSnapshot(row)">
+ <el-icon><Download /></el-icon>
+ 涓嬭浇
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+
+ <!-- 鍒嗛〉 -->
+ <div class="pagination-container">
+ <el-pagination
+ v-model:current-page="capturePage"
+ v-model:page-size="capturePageSize"
+ :page-sizes="[10, 20, 50, 100]"
+ :total="filteredCaptures.length"
+ layout="total, sizes, prev, pager, next, jumper"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ />
+ </div>
+ </el-card>
+ </el-col>
+
+ <!-- 鍙充晶锛氳繚瑙勫憡璀� -->
+ <el-col :span="8">
+ <el-card shadow="never" class="section-card">
+ <template #header>
+ <div class="card-header">
+ <span>杩濊琛屼负鍛婅</span>
+ <div class="header-actions">
+ <el-badge :value="unreadAlarmCount" :max="99" type="danger">
+ <el-switch v-model="alarmEnabled" inline-prompt active-text="鍛婅寮�" inactive-text="鍛婅鍏�" />
+ </el-badge>
+ </div>
+ </div>
+ </template>
+ <el-tabs v-model="alarmTab" type="border-card" style="height: 650px">
+ <el-tab-pane label="鍏ㄩ儴鍛婅" name="all">
+ <div>
+ <el-timeline style="max-height: 580px; overflow-y: auto; padding-right: 10px">
+ <el-timeline-item
+ v-for="(alarm, idx) in displayAlarms"
+ :key="idx"
+ :type="getAlarmType(alarm.type)"
+ :timestamp="alarm.time"
+ :hollow="alarm.handled"
+ >
+ <div class="alarm-item" :class="{ handled: alarm.handled }">
+ <div class="alarm-header">
+ <el-tag :type="getAlarmTagType(alarm.type)" size="small">{{ alarm.typeText }}</el-tag>
+ <span class="alarm-area">{{ alarm.areaName }}</span>
+ </div>
+ <div class="alarm-content">
+ {{ alarm.description }}
+ </div>
+ <div class="alarm-footer">
+ <span class="alarm-camera">鎽勫儚澶�: {{ alarm.cameraName }}</span>
+ <el-button
+ v-if="!alarm.handled"
+ link
+ type="primary"
+ size="small"
+ @click="handleAlarm(alarm)"
+ >
+ 澶勭悊
+ </el-button>
+ <span v-else class="handled-text">宸插鐞�</span>
+ </div>
+ </div>
+ </el-timeline-item>
+ </el-timeline>
+ </div>
+ </el-tab-pane>
+ <el-tab-pane label="寮洪棷鍛婅" name="intrusion">
+ <div>
+ <el-timeline style="max-height: 580px; overflow-y: auto; padding-right: 10px">
+ <el-timeline-item
+ v-for="(alarm, idx) in intrusionAlarms"
+ :key="idx"
+ type="danger"
+ :timestamp="alarm.time"
+ >
+ <div class="alarm-item">
+ <div class="alarm-header">
+ <el-tag type="danger" size="small">寮洪棷鍛婅</el-tag>
+ <span class="alarm-area">{{ alarm.areaName }}</span>
+ </div>
+ <div class="alarm-content">{{ alarm.description }}</div>
+ </div>
+ </el-timeline-item>
+ </el-timeline>
+ </div>
+ </el-tab-pane>
+ <el-tab-pane label="灏鹃殢鍛婅" name="tailgating">
+ <div>
+ <el-timeline style="max-height: 580px; overflow-y: auto; padding-right: 10px">
+ <el-timeline-item
+ v-for="(alarm, idx) in tailgatingAlarms"
+ :key="idx"
+ type="warning"
+ :timestamp="alarm.time"
+ >
+ <div class="alarm-item">
+ <div class="alarm-header">
+ <el-tag type="warning" size="small">灏鹃殢鍛婅</el-tag>
+ <span class="alarm-area">{{ alarm.areaName }}</span>
+ </div>
+ <div class="alarm-content">{{ alarm.description }}</div>
+ </div>
+ </el-timeline-item>
+ </el-timeline>
+ </div>
+ </el-tab-pane>
+ <el-tab-pane label="澶氫汉閫氳" name="multiple">
+ <div>
+ <el-timeline style="max-height: 580px; overflow-y: auto; padding-right: 10px">
+ <el-timeline-item
+ v-for="(alarm, idx) in multipleAlarms"
+ :key="idx"
+ type="warning"
+ :timestamp="alarm.time"
+ >
+ <div class="alarm-item">
+ <div class="alarm-header">
+ <el-tag type="warning" size="small">澶氫汉閫氳</el-tag>
+ <span class="alarm-area">{{ alarm.areaName }}</span>
+ </div>
+ <div class="alarm-content">{{ alarm.description }}</div>
+ </div>
+ </el-timeline-item>
+ </el-timeline>
+ </div>
+ </el-tab-pane>
+ </el-tabs>
+ </el-card>
+ </el-col>
+ </el-row>
+
+ <!-- 瀹炴椂鐢婚潰瀵硅瘽妗� -->
+ <el-dialog v-model="realtimeVisible" :title="`瀹炴椂鐩戞帶 - ${currentCamera.name}`" width="800px">
+ <div class="video-container">
+ <div class="video-placeholder">
+ <el-icon :size="80" color="#909399"><VideoCameraFilled /></el-icon>
+ <div class="video-info">
+ <p>鎽勫儚澶�: {{ currentCamera.name }}</p>
+ <p>浣嶇疆: {{ currentCamera.areaName }}</p>
+ <p>鐘舵��: <el-tag :type="currentCamera.status === 'online' ? 'success' : 'danger'" size="small">{{ currentCamera.status === 'online' ? '鍦ㄧ嚎' : '绂荤嚎' }}</el-tag></p>
+ <p class="tip">锛堝疄闄呯幆澧冨皢鏄剧ず瀹炴椂瑙嗛娴侊級</p>
+ </div>
+ </div>
+ </div>
+ <template #footer>
+ <el-button @click="realtimeVisible = false">鍏抽棴</el-button>
+ <el-button type="primary" @click="captureSnapshot">鎵嬪姩鎶撴媿</el-button>
+ </template>
+ </el-dialog>
+
+ <!-- 蹇収鏌ョ湅瀵硅瘽妗� -->
+ <el-dialog v-model="snapshotVisible" title="鎶撴媿蹇収璇︽儏" width="800px" :close-on-click-modal="false">
+ <div class="snapshot-dialog-body">
+ <el-row :gutter="20">
+ <el-col :span="14">
+ <div class="snapshot-preview">
+ <div class="snapshot-placeholder">
+ <el-icon :size="80" color="#909399"><Picture /></el-icon>
+ <p>鎶撴媿鍥剧墖棰勮</p>
+ <p class="tip">锛堝疄闄呯幆澧冨皢鏄剧ず楂樻竻鎶撴媿鍥剧墖锛�</p>
+ <div class="snapshot-tools">
+ <el-button-group>
+ <el-button size="small">
+ <el-icon><ZoomIn /></el-icon>
+ 鏀惧ぇ
+ </el-button>
+ <el-button size="small">
+ <el-icon><ZoomOut /></el-icon>
+ 缂╁皬
+ </el-button>
+ <el-button size="small">
+ <el-icon><RefreshRight /></el-icon>
+ 鏃嬭浆
+ </el-button>
+ </el-button-group>
+ </div>
+ </div>
+ </div>
+ </el-col>
+ <el-col :span="10">
+ <el-descriptions :column="1" border size="small">
+ <el-descriptions-item label="鎶撴媿鏃堕棿">
+ <el-icon><Clock /></el-icon>
+ {{ currentSnapshot.time }}
+ </el-descriptions-item>
+ <el-descriptions-item label="宸ュ彿">
+ <el-icon><User /></el-icon>
+ {{ currentSnapshot.personId }}
+ </el-descriptions-item>
+ <el-descriptions-item label="閮ㄩ棬">
+ {{ currentSnapshot.department }}
+ </el-descriptions-item>
+ <el-descriptions-item label="鎵�灞炲尯鍩�">
+ <el-icon><Location /></el-icon>
+ {{ currentSnapshot.areaName }}
+ </el-descriptions-item>
+ <el-descriptions-item label="鎽勫儚澶�">
+ <el-icon><VideoCameraFilled /></el-icon>
+ {{ currentSnapshot.cameraName }}
+ </el-descriptions-item>
+ <el-descriptions-item label="浜嬩欢绫诲瀷">
+ <el-tag :type="currentSnapshot.eventType === 'entry' ? 'success' : 'warning'" size="small">
+ {{ currentSnapshot.eventType === 'entry' ? '杩涘叆' : '绂诲紑' }}
+ </el-tag>
+ </el-descriptions-item>
+ <el-descriptions-item label="浜鸿劯鍖归厤搴�">
+ <el-progress
+ :percentage="currentSnapshot.faceMatch"
+ :color="currentSnapshot.faceMatch >= 90 ? '#67c23a' : '#e6a23c'"
+ :stroke-width="12"
+ >
+ <span style="font-size: 12px">{{ currentSnapshot.faceMatch }}%</span>
+ </el-progress>
+ </el-descriptions-item>
+ <el-descriptions-item label="浣撴俯妫�娴�">
+ <span :style="{ color: currentSnapshot.temperature > 37.3 ? '#f56c6c' : '#67c23a' }">
+ {{ currentSnapshot.temperature }}掳C
+ </span>
+ <el-tag v-if="currentSnapshot.temperature > 37.3" type="danger" size="small" style="margin-left: 8px">
+ 寮傚父
+ </el-tag>
+ </el-descriptions-item>
+ <el-descriptions-item label="鍙ｇ僵浣╂埓">
+ <el-tag :type="currentSnapshot.maskWearing ? 'success' : 'warning'" size="small">
+ {{ currentSnapshot.maskWearing ? '宸蹭僵鎴�' : '鏈僵鎴�' }}
+ </el-tag>
+ </el-descriptions-item>
+ <el-descriptions-item label="瀹夊叏甯�">
+ <el-tag :type="currentSnapshot.helmetWearing ? 'success' : 'danger'" size="small">
+ {{ currentSnapshot.helmetWearing ? '宸蹭僵鎴�' : '鏈僵鎴�' }}
+ </el-tag>
+ </el-descriptions-item>
+ </el-descriptions>
+ </el-col>
+ </el-row>
+
+ <div class="snapshot-notes">
+ <el-divider content-position="left">澶囨敞淇℃伅</el-divider>
+ <el-input
+ v-model="currentSnapshot.notes"
+ type="textarea"
+ :rows="3"
+ placeholder="娣诲姞澶囨敞淇℃伅..."
+ />
+ </div>
+
+ </div>
+
+ <template #footer>
+ <div class="dialog-footer-custom">
+ <div>
+ <el-button size="small" @click="printSnapshot">
+ <el-icon><Printer /></el-icon>
+ 鎵撳嵃
+ </el-button>
+ </div>
+ <div>
+ <el-button @click="snapshotVisible = false">鍏抽棴</el-button>
+ <el-button type="success" @click="downloadSnapshot(currentSnapshot)">
+ <el-icon><Download /></el-icon>
+ 涓嬭浇鍥剧墖
+ </el-button>
+ <el-button type="primary" @click="saveNotes">淇濆瓨澶囨敞</el-button>
+ </div>
+ </div>
+ </template>
+ </el-dialog>
+ </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
+import {
+ VideoCameraFilled, Picture, Search, Download, View,
+ Clock, User, Location, ZoomIn, ZoomOut, RefreshRight, Printer
+} from "@element-plus/icons-vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+
+// 鍖哄煙鏁版嵁
+const areas = ref([
+ { id: "A01", name: "鐓ゅ満鍏ュ彛" },
+ { id: "A02", name: "娲楃叅杞﹂棿" },
+ { id: "A03", name: "鍗遍櫓鍝佸簱" },
+ { id: "A04", name: "涓帶瀹�" },
+ { id: "A05", name: "閰嶇數瀹�" },
+]);
+
+// 鎽勫儚澶存暟鎹�
+const cameras = ref([
+ { id: "C001", name: "鐓ゅ満鍏ュ彛涓滈棬", areaId: "A01", areaName: "鐓ゅ満鍏ュ彛", status: "online", aiEnabled: true, doorLinked: true },
+ { id: "C002", name: "鐓ゅ満鍏ュ彛瑗块棬", areaId: "A01", areaName: "鐓ゅ満鍏ュ彛", status: "online", aiEnabled: true, doorLinked: true },
+ { id: "C003", name: "娲楃叅杞﹂棿涓婚�氶亾", areaId: "A02", areaName: "娲楃叅杞﹂棿", status: "online", aiEnabled: true, doorLinked: true },
+ { id: "C004", name: "娲楃叅杞﹂棿涓滀晶", areaId: "A02", areaName: "娲楃叅杞﹂棿", status: "online", aiEnabled: false, doorLinked: false },
+ { id: "C005", name: "鍗遍櫓鍝佸簱澶ч棬", areaId: "A03", areaName: "鍗遍櫓鍝佸簱", status: "online", aiEnabled: true, doorLinked: true },
+ { id: "C006", name: "鍗遍櫓鍝佸簱鍐呴儴", areaId: "A03", areaName: "鍗遍櫓鍝佸簱", status: "offline", aiEnabled: true, doorLinked: false },
+ { id: "C007", name: "涓帶瀹ゅ叆鍙�", areaId: "A04", areaName: "涓帶瀹�", status: "online", aiEnabled: true, doorLinked: true },
+ { id: "C008", name: "閰嶇數瀹ら棬绂�", areaId: "A05", areaName: "閰嶇數瀹�", status: "online", aiEnabled: true, doorLinked: true },
+]);
+
+const selectedArea = ref("all");
+const cameraStatus = ref("all");
+const filteredCameras = ref([]);
+
+function filterCameras() {
+ let result = cameras.value;
+ if (selectedArea.value !== "all") {
+ result = result.filter(c => c.areaId === selectedArea.value);
+ }
+ if (cameraStatus.value !== "all") {
+ result = result.filter(c => c.status === cameraStatus.value);
+ }
+ filteredCameras.value = result;
+}
+
+// 闂ㄧ鎶撴媿璁板綍
+const captureDate = ref([new Date(), new Date()]);
+const captureSearch = ref("");
+const captureEventType = ref("");
+const capturePage = ref(1);
+const capturePageSize = ref(10);
+const selectedCaptures = ref([]);
+
+// 鐢熸垚鏇村妯℃嫙鏁版嵁
+const generateCaptureData = () => {
+ const departments = ["鐢熶骇涓�闃�", "鏈虹數鐝�", "瀹夌洃绉�", "璋冨害瀹�", "鍖栭獙瀹�", "杩愯緭闃�", "缁翠慨鐝�", "浠撳偍绉�"];
+ const areaList = ["鐓ゅ満鍏ュ彛", "娲楃叅杞﹂棿", "鍗遍櫓鍝佸簱", "涓帶瀹�", "閰嶇數瀹�"];
+ const cameraList = [
+ "鐓ゅ満鍏ュ彛涓滈棬", "鐓ゅ満鍏ュ彛瑗块棬", "娲楃叅杞﹂棿涓婚�氶亾", "娲楃叅杞﹂棿涓滀晶",
+ "鍗遍櫓鍝佸簱澶ч棬", "鍗遍櫓鍝佸簱鍐呴儴", "涓帶瀹ゅ叆鍙�", "閰嶇數瀹ら棬绂�"
+ ];
+
+ const data = [];
+ const now = new Date();
+
+ for (let i = 0; i < 86; i++) {
+ const randomMinutes = Math.floor(Math.random() * 1440); // 24灏忔椂鍐�
+ const captureTime = new Date(now.getTime() - randomMinutes * 60 * 1000);
+ const hh = String(captureTime.getHours()).padStart(2, "0");
+ const mm = String(captureTime.getMinutes()).padStart(2, "0");
+ const ss = String(captureTime.getSeconds()).padStart(2, "0");
+
+ const area = areaList[Math.floor(Math.random() * areaList.length)];
+ const eventType = Math.random() > 0.5 ? "entry" : "exit";
+ const faceMatch = Math.floor(Math.random() * 15) + 85; // 85-100
+ const temperature = (36.0 + Math.random() * 1.5).toFixed(1);
+
+ data.push({
+ id: i + 1,
+ time: `2025-10-28 ${hh}:${mm}:${ss}`,
+ personId: `EMP${String(1001 + i).padStart(4, '0')}`,
+ department: departments[Math.floor(Math.random() * departments.length)],
+ areaName: area,
+ cameraName: cameraList[Math.floor(Math.random() * cameraList.length)],
+ eventType: eventType,
+ faceMatch: faceMatch,
+ temperature: parseFloat(temperature),
+ maskWearing: Math.random() > 0.1,
+ helmetWearing: Math.random() > 0.15,
+ notes: ""
+ });
+ }
+
+ return data.sort((a, b) => b.time.localeCompare(a.time));
+};
+
+const captures = ref(generateCaptureData());
+
+// 缁熻淇℃伅
+const captureStats = computed(() => {
+ const today = captures.value.length;
+ const entry = captures.value.filter(c => c.eventType === 'entry').length;
+ const exit = captures.value.filter(c => c.eventType === 'exit').length;
+ const lowMatch = captures.value.filter(c => c.faceMatch < 90).length;
+
+ return { today, entry, exit, lowMatch };
+});
+
+// 杩囨护鎶撴媿璁板綍
+const filteredCaptures = computed(() => {
+ let result = captures.value;
+
+ // 鎸夊叧閿瘝鎼滅储
+ if (captureSearch.value) {
+ const keyword = captureSearch.value.toLowerCase();
+ result = result.filter(c =>
+ c.personId.toLowerCase().includes(keyword) ||
+ c.areaName.toLowerCase().includes(keyword)
+ );
+ }
+
+ // 鎸変簨浠剁被鍨嬭繃婊�
+ if (captureEventType.value) {
+ result = result.filter(c => c.eventType === captureEventType.value);
+ }
+
+ return result;
+});
+
+// 鍒嗛〉鏁版嵁
+const paginatedCaptures = computed(() => {
+ const start = (capturePage.value - 1) * capturePageSize.value;
+ const end = start + capturePageSize.value;
+ return filteredCaptures.value.slice(start, end);
+});
+
+// 鍒嗛〉绱㈠紩鏂规硶
+const indexMethod = (index) => {
+ return (capturePage.value - 1) * capturePageSize.value + index + 1;
+};
+
+function loadCaptures() {
+ ElMessage.success("宸插姞杞介�夊畾鏃ユ湡鑼冨洿鐨勬姄鎷嶈褰�");
+}
+
+function handleSizeChange(val) {
+ capturePageSize.value = val;
+ capturePage.value = 1;
+}
+
+function handleCurrentChange(val) {
+ capturePage.value = val;
+}
+
+function handleCaptureSelection(selection) {
+ selectedCaptures.value = selection;
+}
+
+function getFaceMatchType(faceMatch) {
+ if (faceMatch >= 95) return 'success';
+ if (faceMatch >= 90) return 'info';
+ if (faceMatch >= 85) return 'warning';
+ return 'danger';
+}
+
+// 瀵煎嚭鎶撴媿璁板綍
+function exportCaptures() {
+ if (filteredCaptures.value.length === 0) {
+ ElMessage.warning("娌℃湁鍙鍑虹殑璁板綍");
+ return;
+ }
+ ElMessage.success(`姝ｅ湪瀵煎嚭 ${filteredCaptures.value.length} 鏉℃姄鎷嶈褰�...`);
+ // 瀹為檯鐜涓繖閲屼細璋冪敤瀵煎嚭鎺ュ彛
+}
+
+// 涓嬭浇蹇収
+function downloadSnapshot(capture) {
+ ElMessage.success(`姝ｅ湪涓嬭浇 ${capture.personId} 鐨勬姄鎷嶅浘鐗�...`);
+ // 瀹為檯鐜涓繖閲屼細涓嬭浇鍥剧墖鏂囦欢
+}
+
+// 鎵撳嵃蹇収
+function printSnapshot() {
+ ElMessage.info("姝ｅ湪鍑嗗鎵撳嵃...");
+ // 瀹為檯鐜涓繖閲屼細璋冪敤鎵撳嵃鍔熻兘
+}
+
+// 淇濆瓨澶囨敞
+function saveNotes() {
+ ElMessage.success("澶囨敞淇℃伅宸蹭繚瀛�");
+ snapshotVisible.value = false;
+}
+
+// 鍛婅鏁版嵁
+const alarmEnabled = ref(true);
+const alarmTab = ref("all");
+const alarms = ref([
+ {
+ id: 1,
+ time: "09:25:15",
+ type: "intrusion",
+ typeText: "寮洪棷鍛婅",
+ areaName: "鍗遍櫓鍝佸簱",
+ cameraName: "鍗遍櫓鍝佸簱澶ч棬",
+ description: "妫�娴嬪埌鏈巿鏉冧汉鍛樺己琛岄棷鍏ワ紝鏈埛鍗＄洿鎺ュ紑闂�",
+ handled: false
+ },
+ {
+ id: 2,
+ time: "09:18:42",
+ type: "tailgating",
+ typeText: "灏鹃殢鍛婅",
+ areaName: "涓帶瀹�",
+ cameraName: "涓帶瀹ゅ叆鍙�",
+ description: "妫�娴嬪埌灏鹃殢琛屼负锛屼竴浜哄埛鍗″悗涓や汉杩涘叆",
+ handled: false
+ },
+ {
+ id: 3,
+ time: "09:10:28",
+ type: "multiple",
+ typeText: "澶氫汉閫氳",
+ areaName: "鐓ゅ満鍏ュ彛",
+ cameraName: "鐓ゅ満鍏ュ彛涓滈棬",
+ description: "妫�娴嬪埌3浜哄悓鏃堕�氳繃鍗曚汉闂ㄧ閫氶亾",
+ handled: true
+ },
+]);
+
+const unreadAlarmCount = computed(() => alarms.value.filter(a => !a.handled).length);
+
+const displayAlarms = computed(() => {
+ if (alarmTab.value === "all") return alarms.value;
+ return alarms.value.filter(a => a.type === alarmTab.value);
+});
+
+const intrusionAlarms = computed(() => alarms.value.filter(a => a.type === "intrusion"));
+const tailgatingAlarms = computed(() => alarms.value.filter(a => a.type === "tailgating"));
+const multipleAlarms = computed(() => alarms.value.filter(a => a.type === "multiple"));
+
+function getAlarmType(type) {
+ const typeMap = { intrusion: "danger", tailgating: "warning", multiple: "warning" };
+ return typeMap[type] || "info";
+}
+
+function getAlarmTagType(type) {
+ const typeMap = { intrusion: "danger", tailgating: "warning", multiple: "warning" };
+ return typeMap[type] || "info";
+}
+
+function handleAlarm(alarm) {
+ alarm.handled = true;
+ ElMessage.success("鍛婅宸叉爣璁颁负宸插鐞�");
+}
+
+// 瀹炴椂鐢婚潰
+const realtimeVisible = ref(false);
+const currentCamera = ref({});
+
+function viewRealtime(camera) {
+ currentCamera.value = camera;
+ realtimeVisible.value = true;
+}
+
+function captureSnapshot() {
+ ElMessage.success("鎶撴媿鎴愬姛锛屽凡淇濆瓨鑷虫姄鎷嶈褰�");
+}
+
+// 鏌ョ湅鎶撴媿璁板綍璇︽儏
+const snapshotVisible = ref(false);
+const currentSnapshot = ref({});
+
+function viewSnapshot(capture) {
+ currentSnapshot.value = capture;
+ snapshotVisible.value = true;
+}
+
+function viewCaptures(camera) {
+ ElMessage.info(`鏌ョ湅 ${camera.name} 鐨勫巻鍙叉姄鎷嶈褰昤);
+}
+
+// 妯℃嫙鍛婅鎺ㄩ��
+let alarmTimer = null;
+const alarmTemplates = [
+ { type: "intrusion", typeText: "寮洪棷鍛婅", areas: ["鍗遍櫓鍝佸簱", "閰嶇數瀹�", "涓帶瀹�"] },
+ { type: "tailgating", typeText: "灏鹃殢鍛婅", areas: ["涓帶瀹�", "閰嶇數瀹�", "鍗遍櫓鍝佸簱"] },
+ { type: "multiple", typeText: "澶氫汉閫氳", areas: ["鐓ゅ満鍏ュ彛", "娲楃叅杞﹂棿"] },
+];
+
+function pushMockAlarm() {
+ if (!alarmEnabled.value) return;
+
+ const template = alarmTemplates[Math.floor(Math.random() * alarmTemplates.length)];
+ const area = template.areas[Math.floor(Math.random() * template.areas.length)];
+ const camera = cameras.value.find(c => c.areaName === area);
+
+ const now = new Date();
+ const hh = String(now.getHours()).padStart(2, "0");
+ const mm = String(now.getMinutes()).padStart(2, "0");
+ const ss = String(now.getSeconds()).padStart(2, "0");
+
+ let description = "";
+ if (template.type === "intrusion") {
+ description = "妫�娴嬪埌鏈巿鏉冧汉鍛樺己琛岄棷鍏ワ紝鏈埛鍗＄洿鎺ュ紑闂�";
+ } else if (template.type === "tailgating") {
+ description = "妫�娴嬪埌灏鹃殢琛屼负锛屼竴浜哄埛鍗″悗涓や汉杩涘叆";
+ } else if (template.type === "multiple") {
+ const count = Math.floor(Math.random() * 3) + 2;
+ description = `妫�娴嬪埌${count}浜哄悓鏃堕�氳繃鍗曚汉闂ㄧ閫氶亾`;
+ }
+
+ alarms.value.unshift({
+ id: Date.now(),
+ time: `${hh}:${mm}:${ss}`,
+ type: template.type,
+ typeText: template.typeText,
+ areaName: area,
+ cameraName: camera ? camera.name : area + "鐩戞帶",
+ description: description,
+ handled: false
+ });
+
+ // 闄愬埗鍛婅鍒楄〃闀垮害
+ if (alarms.value.length > 50) {
+ alarms.value = alarms.value.slice(0, 50);
+ }
+}
+
+onMounted(() => {
+ filterCameras();
+ // 姣忛殧8绉掓ā鎷熶竴娆″憡璀�
+ alarmTimer = setInterval(pushMockAlarm, 8000);
+});
+
+onBeforeUnmount(() => {
+ if (alarmTimer) {
+ clearInterval(alarmTimer);
+ }
+});
+</script>
+
+<style scoped lang="scss">
+.section-card {
+ margin-bottom: 16px;
+}
+
+.card-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.header-actions {
+ display: flex;
+ gap: 8px;
+ align-items: center;
+}
+
+.alarm-item {
+ padding: 8px;
+ background: #f5f7fa;
+ border-radius: 4px;
+
+ &.handled {
+ opacity: 0.6;
+ }
+}
+
+.alarm-header {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 6px;
+}
+
+.alarm-area {
+ font-weight: 600;
+ color: #303133;
+}
+
+.alarm-content {
+ color: #606266;
+ font-size: 14px;
+ margin-bottom: 6px;
+ line-height: 1.5;
+}
+
+.alarm-footer {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-size: 12px;
+ color: #909399;
+}
+
+.alarm-camera {
+ flex: 1;
+}
+
+.handled-text {
+ color: #67c23a;
+ font-size: 12px;
+}
+
+.video-container {
+ width: 100%;
+ height: 450px;
+ background: #000;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.video-placeholder {
+ text-align: center;
+ color: #909399;
+}
+
+.video-info {
+ margin-top: 20px;
+
+ p {
+ margin: 8px 0;
+ font-size: 14px;
+ }
+
+ .tip {
+ color: #c0c4cc;
+ font-size: 12px;
+ margin-top: 16px;
+ }
+}
+
+.snapshot-placeholder {
+ margin-top: 20px;
+ height: 300px;
+ background: #f5f7fa;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ border-radius: 4px;
+ color: #909399;
+
+ p {
+ margin: 8px 0;
+ }
+
+ .tip {
+ color: #c0c4cc;
+ font-size: 12px;
+ }
+}
+
+:deep(.el-tabs--border-card) {
+ border: none;
+ box-shadow: none;
+}
+
+:deep(.el-tabs__content) {
+ padding: 10px;
+}
+
+// 鎶撴媿璁板綍缁熻
+.capture-stats {
+ margin-bottom: 16px;
+ padding: 16px;
+ background: #f5f7fa;
+ border-radius: 4px;
+}
+
+.stat-item {
+ text-align: center;
+ padding: 8px;
+ background: #fff;
+ border-radius: 4px;
+}
+
+.stat-label {
+ font-size: 13px;
+ color: #909399;
+ margin-bottom: 8px;
+}
+
+.stat-value {
+ font-size: 24px;
+ font-weight: bold;
+ color: #303133;
+}
+
+// 鍒嗛〉瀹瑰櫒
+.pagination-container {
+ margin-top: 16px;
+ display: flex;
+ justify-content: flex-end;
+}
+
+// 蹇収棰勮
+.snapshot-preview {
+ width: 100%;
+}
+
+.snapshot-placeholder {
+ width: 100%;
+ height: 420px;
+ background: #f5f7fa;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ border-radius: 4px;
+ border: 1px dashed #dcdfe6;
+ color: #909399;
+
+ p {
+ margin: 8px 0;
+ font-size: 14px;
+ }
+
+ .tip {
+ color: #c0c4cc;
+ font-size: 12px;
+ }
+}
+
+.snapshot-tools {
+ margin-top: 20px;
+}
+
+.snapshot-notes {
+ margin-top: 20px;
+
+ :deep(.el-divider__text) {
+ font-weight: 600;
+ color: #606266;
+ }
+}
+
+.dialog-footer-custom {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ > div {
+ display: flex;
+ gap: 8px;
+ }
+}
+
+// 鎻忚堪鍒楄〃鏍峰紡浼樺寲
+:deep(.el-descriptions__label) {
+ width: 100px;
+}
+
+:deep(.el-descriptions__content) {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+}
+</style>
+
--
Gitblit v1.9.3