在数字化浪潮席卷各行各业的今天，传统的门禁管理模式已难以满足现代建筑、园区、社区乃至智慧城市对安全、高效、智能的迫切需求。因此，我们隆重推出——智能门禁电子地图（DAIC-MJ-DT）实时监控系统

深圳多奥智能一卡（码、脸）通系统

280人浏览 · 2026-05-06 21:34:07

深圳多奥智能一卡（码、脸）通系统 · 2026-05-06 21:34:07 发布

详细讲解智能门禁电子地图实时监控系统

尊敬的各位领导、各位嘉宾、合作伙伴以及现场的朋友们：

大家好！

非常荣幸今天能与各位相聚在此，共同探讨智慧安防领域的前沿技术与创新应用。多奥作为深耕智能门禁领域多年的践行者，我们深知，在数字化浪潮席卷各行各业的今天，传统的门禁管理模式已难以满足现代建筑、园区、社区乃至智慧城市对安全、高效、智能的迫切需求。因此，我们隆重推出——多奥智能门禁电子地图（DAIC-MJ-DT）实时监控系统。这不仅是一次技术的升级，更是一场管理理念的革新。

一、以“图”为眼，构建全景可视化的安全防线

在传统的门禁系统中，管理人员往往面对的是冰冷的设备列表、复杂的IP地址和分散的状态信息，一旦发生异常，查找定位耗时费力，极易错失处置良机。多奥智能门禁电子地图系统的诞生，正是为了解决这一痛点。我们提出“地图即界面，状态即可见”的核心理念，将抽象的设备数据转化为直观的视觉信息。

系统支持自定义区域地图，无论是大型工业园区的多层级结构，还是写字楼的每一层平面图，都可以轻松导入并构建多层级地图架构。更重要的是，我们多奥实现了设备的“自由拖放”功能。您可以将门禁设备像拼图一样，精准拖放到地图的对应位置，实现物理空间与数字界面的完美映射。这一设计，让整个安防体系“活”了起来，管理者只需一眼，便能掌握全局。

二、以“实”为核，实现毫秒级的动态响应

实时性，是安全监控的生命线。多奥电子地图系统通过高效的通信协议与数据处理引擎，确保了信息的零延迟传递。

门点状态信息实时显示：地图上的每一个门禁点图标，都是一个鲜活的生命体。它实时反映着门禁的在线、离线、正常、报警、开门、关门等状态。颜色的变化、图标的闪烁，都是无声的语言，向管理人员传递着最即时的安全讯息。

事件记录实时滚动：所有正常事件与报警事件，都会以时间轴的形式在界面上实时滚动显示。这不仅是一份记录，更是一份动态的日志，让每一次操作、每一个异常都有迹可循，为后续的审计与分析提供了坚实的数据基础。

三、以“控”为手，赋予管理者远程指挥的能力

可视化是基础，可控化才是关键。多奥门禁一卡通系统不仅仅是一个监控平台，更是一个强大的控制中枢。

通过电子地图，管理人员可以直接对指定门禁点进行远程操作。无论是右键“远程开门”以迎接重要访客，还是设置“常开”模式以应对大型活动的人流疏导，亦或是紧急情况下的“远程关门”与“常闭”，所有指令都能瞬间传达至终端设备。这种“所见即所得，所见即可控”的体验，极大地提升了管理效率与应急响应能力。

四、以“警”为令，打造自动化的应急处置闭环

在安全领域，时间就是生命。当危险发生时，系统的自动响应能力至关重要。

我们多奥的门禁软件系统具备强大的报警自动跳转定位功能。一旦某个门禁点发生非法闯入、门磁报警或胁迫报警等事件，系统会立即打破当前视图，自动跳转至该门禁点所在地图，并以声光闪烁的方式高亮提示报警位置。这种“强制聚焦”的机制，确保了管理人员在第一时间注意到险情，避免了因疏忽或信息淹没而导致的延误。

更进一步，多奥建立了严格的接警事件处理流程。报警事件必须由人工进行确认与处理，系统支持填写详细的接警原因、设置报警状态等操作。这不仅规范了管理流程，更形成了一个从“发现报警”到“定位报警”再到“处理报警”的完整闭环，让每一次警情都得到妥善处置，杜绝了“有报无回”的管理漏洞。

五、多奥智能门禁系统优势与价值总结

多奥智能门禁电子地图实时监控系统，以其自定义地图、设备拖拉添加、状态实时显示、远程控制、事件滚动、报警自动定位及接警处理等七大核心优势，重新定义了门禁管理的标准。

它带来的价值是多维度的：

- 对于管理者而言，它是一份“安全仪表盘”，让管理更直观、更高效；
- 对于安保人员而言，它是一双“千里眼”和一双“无形的手”，让监控更精准、处置更迅速；
- 对于整个组织而言，它是一道“智慧防火墙”，提升了整体的安全防范等级与应急响应能力。

各位朋友，智慧安防的未来，不是简单的设备联网，而是数据的融合、智能的决策与人性化的交互。多奥智能门禁电子地图系统，正是我们向这一未来迈出的坚实一步。多奥相信，通过技术的不断创新与应用的持续深化，我们能够为更多的用户构建起更加安全、智能、便捷的生活与工作环境。

最后，感谢各位的聆听。我们期待与在座的各位携手，共同开启智慧安防的新篇章！

谢谢大家！

系统概览区 — 展示DAIC-MJ-DT的核心定位与价值指标
功能模块区 — 8大功能以卡片形式呈现，点击可高亮定位
实时演示区 — 模拟电子地图界面，包含：
- 可缩放地图（点击 +/- 按钮）
- 5个模拟门禁点（在线/离线/报警/开门等状态）
- 门禁点右键菜单（远程开门/关门/常开/常闭）
- 实时滚动事件日志（每5秒模拟新事件）
系统优势区 — 6大优势以视觉化卡片展示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>智能门禁电子地图实时监控系统 | DAIC-MJ-DT</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap');

body {
font-family: 'Inter', 'Noto Sans SC', sans-serif;
background: #0a0e1a;
color: #e2e8f0;
overflow-x: hidden;
}

.gradient-text {
background: linear-gradient(135deg, #00d4ff 0%, #7c3aed 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.glass-card {
background: rgba(15, 23, 42, 0.6);
backdrop-filter: blur(12px);
border: 1px solid rgba(99, 102, 241, 0.2);
transition: all 0.3s ease;
}

.glass-card:hover {
border-color: rgba(99, 102, 241, 0.5);
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(99, 102, 241, 0.15);
}

.map-grid {
background-image:
linear-gradient(rgba(99, 102, 241, 0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(99, 102, 241, 0.1) 1px, transparent 1px);
background-size: 40px 40px;
}

.pulse-ring {
animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes pulse-ring {
0% { transform: scale(0.8); opacity: 1; }
100% { transform: scale(2.5); opacity: 0; }
}

.door-icon {
transition: all 0.3s ease;
}

.door-icon:hover {
transform: scale(1.2);
filter: drop-shadow(0 0 10px currentColor);
}

.status-online { color: #10b981; }
.status-offline { color: #6b7280; }
.status-alarm { color: #ef4444; animation: blink 1s infinite; }
.status-open { color: #3b82f6; }

@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}

.log-scroll {
animation: scroll-up 20s linear infinite;
}

@keyframes scroll-up {
0% { transform: translateY(0); }
100% { transform: translateY(-50%); }
}

.nav-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(99, 102, 241, 0.4);
transition: all 0.3s;
}

.nav-dot.active {
background: #6366f1;
box-shadow: 0 0 10px #6366f1;
}

.feature-icon {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
}
</style>
</head>
<body class="antialiased">

<nav class="fixed top-0 w-full z-50 bg-slate-900/80 backdrop-blur-md border-b border-slate-800">
<div class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center">
<i class="fas fa-map-marked-alt text-white text-lg"></i>
</div>
<div>
<h1 class="text-xl font-bold text-white">DAIC-MJ-DT</h1>
<p class="text-xs text-slate-400">智能门禁电子地图实时监控系统</p>
</div>
</div>
<div class="hidden md:flex gap-6 text-sm font-medium">
<a href="#overview" class="text-slate-300 hover:text-indigo-400 transition">系统概览</a>
<a href="#features" class="text-slate-300 hover:text-indigo-400 transition">核心功能</a>
<a href="#demo" class="text-slate-300 hover:text-indigo-400 transition">实时演示</a>
<a href="#advantages" class="text-slate-300 hover:text-indigo-400 transition">系统优势</a>
</div>
</div>
</nav>

<section id="overview" class="relative min-h-screen flex items-center justify-center pt-20 overflow-hidden">
<div class="absolute inset-0 map-grid opacity-30"></div>
<div class="absolute top-20 left-10 w-72 h-72 bg-indigo-600/20 rounded-full blur-3xl"></div>
<div class="absolute bottom-20 right-10 w-96 h-96 bg-purple-600/20 rounded-full blur-3xl"></div>

<div class="relative z-10 max-w-6xl mx-auto px-6 text-center">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-indigo-500/10 border border-indigo-500/30 text-indigo-300 text-sm mb-8">
<span class="w-2 h-2 rounded-full bg-indigo-400 animate-pulse"></span>
多奥智能门禁系统核心模块
</div>

<h1 class="text-5xl md:text-7xl font-black mb-6 leading-tight">
<span class="gradient-text">门禁电子地图</span><br>
<span class="text-white">实时监控系统</span>
</h1>

<p class="text-xl text-slate-400 max-w-3xl mx-auto mb-12 leading-relaxed">
基于可视化地图的门禁集中管控平台，支持自定义区域地图、设备自由拖放、
实时状态监控、远程控制操作及报警自动定位，实现门禁系统的全景数字化管理。
</p>

<div class="flex flex-wrap justify-center gap-4">
<button onclick="document.getElementById('demo').scrollIntoView({behavior: 'smooth'})"
class="px-8 py-4 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-xl font-semibold text-white hover:shadow-lg hover:shadow-indigo-500/30 transition transform hover:scale-105">
<i class="fas fa-play-circle mr-2"></i>查看实时演示
</button>
<button onclick="document.getElementById('features').scrollIntoView({behavior: 'smooth'})"
class="px-8 py-4 bg-slate-800 border border-slate-700 rounded-xl font-semibold text-slate-300 hover:border-indigo-500/50 transition">
<i class="fas fa-th-list mr-2"></i>功能详情
</button>
</div>

<div class="grid grid-cols-2 md:grid-cols-4 gap-6 mt-20 max-w-4xl mx-auto">
<div class="glass-card rounded-2xl p-6">
<div class="text-3xl font-bold text-indigo-400 mb-1">8+</div>
<div class="text-sm text-slate-400">核心功能模块</div>
</div>
<div class="glass-card rounded-2xl p-6">
<div class="text-3xl font-bold text-purple-400 mb-1">实时</div>
<div class="text-sm text-slate-400">状态监控刷新</div>
</div>
<div class="glass-card rounded-2xl p-6">
<div class="text-3xl font-bold text-blue-400 mb-1">多级</div>
<div class="text-sm text-slate-400">区域层级结构</div>
</div>
<div class="glass-card rounded-2xl p-6">
<div class="text-3xl font-bold text-emerald-400 mb-1">智能</div>
<div class="text-sm text-slate-400">报警自动定位</div>
</div>
</div>
</div>
</section>

<section id="features" class="py-24 relative">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-4xl font-bold mb-4">系统核心功能</h2>
<p class="text-slate-400">八大功能模块，构建完整的门禁地图管控体系</p>
</div>

<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">

<div class="glass-card rounded-2xl p-6 group cursor-pointer" onclick="highlightFeature(1)">
<div class="feature-icon w-14 h-14 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition">
<i class="fas fa-map text-2xl text-indigo-400"></i>
</div>
<h3 class="text-lg font-bold mb-2 text-white">区域地图添加</h3>
<p class="text-sm text-slate-400 leading-relaxed">支持自定义区域地图，区域地图支持多层级结构，灵活适配不同建筑布局</p>
<div class="mt-4 flex items-center text-indigo-400 text-sm font-medium opacity-0 group-hover:opacity-100 transition">
了解更多 <i class="fas fa-arrow-right ml-2"></i>
</div>
</div>

<div class="glass-card rounded-2xl p-6 group cursor-pointer" onclick="highlightFeature(2)">
<div class="feature-icon w-14 h-14 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition">
<i class="fas fa-arrows-alt text-2xl text-purple-400"></i>
</div>
<h3 class="text-lg font-bold mb-2 text-white">设备自由拖放</h3>
<p class="text-sm text-slate-400 leading-relaxed">将门禁设备添加到地图，支持自动拖放到指定位置，精准定位设备坐标</p>
<div class="mt-4 flex items-center text-purple-400 text-sm font-medium opacity-0 group-hover:opacity-100 transition">
了解更多 <i class="fas fa-arrow-right ml-2"></i>
</div>
</div>

<div class="glass-card rounded-2xl p-6 group cursor-pointer" onclick="highlightFeature(3)">
<div class="feature-icon w-14 h-14 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition">
<i class="fas fa-search-plus text-2xl text-blue-400"></i>
</div>
<h3 class="text-lg font-bold mb-2 text-white">地图放大缩小</h3>
<p class="text-sm text-slate-400 leading-relaxed">支持地图局部放大缩小操作，设备图标等比例缩放不失真，细节清晰可见</p>
<div class="mt-4 flex items-center text-blue-400 text-sm font-medium opacity-0 group-hover:opacity-100 transition">
了解更多 <i class="fas fa-arrow-right ml-2"></i>
</div>
</div>

<div class="glass-card rounded-2xl p-6 group cursor-pointer" onclick="highlightFeature(4)">
<div class="feature-icon w-14 h-14 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition">
<i class="fas fa-broadcast-tower text-2xl text-emerald-400"></i>
</div>
<h3 class="text-lg font-bold mb-2 text-white">状态实时显示</h3>
<p class="text-sm text-slate-400 leading-relaxed">实时显示门禁点在线、离线、正常、报警、开门、关门等状态信息</p>
<div class="mt-4 flex items-center text-emerald-400 text-sm font-medium opacity-0 group-hover:opacity-100 transition">
了解更多 <i class="fas fa-arrow-right ml-2"></i>
</div>
</div>

<div class="glass-card rounded-2xl p-6 group cursor-pointer" onclick="highlightFeature(5)">
<div class="feature-icon w-14 h-14 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition">
<i class="fas fa-sliders-h text-2xl text-amber-400"></i>
</div>
<h3 class="text-lg font-bold mb-2 text-white">远程动作控制</h3>
<p class="text-sm text-slate-400 leading-relaxed">右键远程开门、关门、常开、常闭等操作，实现地图上的集中远程管控</p>
<div class="mt-4 flex items-center text-amber-400 text-sm font-medium opacity-0 group-hover:opacity-100 transition">
了解更多 <i class="fas fa-arrow-right ml-2"></i>
</div>
</div>

<div class="glass-card rounded-2xl p-6 group cursor-pointer" onclick="highlightFeature(6)">
<div class="feature-icon w-14 h-14 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition">
<i class="fas fa-scroll text-2xl text-cyan-400"></i>
</div>
<h3 class="text-lg font-bold mb-2 text-white">事件记录显示</h3>
<p class="text-sm text-slate-400 leading-relaxed">实时滚动显示所有正常及报警事件记录详细信息，事件追溯一目了然</p>
<div class="mt-4 flex items-center text-cyan-400 text-sm font-medium opacity-0 group-hover:opacity-100 transition">
了解更多 <i class="fas fa-arrow-right ml-2"></i>
</div>
</div>

<div class="glass-card rounded-2xl p-6 group cursor-pointer" onclick="highlightFeature(7)">
<div class="feature-icon w-14 h-14 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition">
<i class="fas fa-bullseye text-2xl text-rose-400"></i>
</div>
<h3 class="text-lg font-bold mb-2 text-white">报警自动跳转</h3>
<p class="text-sm text-slate-400 leading-relaxed">发生报警时自动跳转到对应地图，声光闪烁提示报警门点，快速响应处置</p>
<div class="mt-4 flex items-center text-rose-400 text-sm font-medium opacity-0 group-hover:opacity-100 transition">
了解更多 <i class="fas fa-arrow-right ml-2"></i>
</div>
</div>

<div class="glass-card rounded-2xl p-6 group cursor-pointer" onclick="highlightFeature(8)">
<div class="feature-icon w-14 h-14 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition">
<i class="fas fa-clipboard-check text-2xl text-teal-400"></i>
</div>
<h3 class="text-lg font-bold mb-2 text-white">接警事件处理</h3>
<p class="text-sm text-slate-400 leading-relaxed">报警事件人工接警处理，填写详细接警原因及设置报警状态，闭环管理</p>
<div class="mt-4 flex items-center text-teal-400 text-sm font-medium opacity-0 group-hover:opacity-100 transition">
了解更多 <i class="fas fa-arrow-right ml-2"></i>
</div>
</div>
</div>
</div>
</section>

<section id="demo" class="py-24 bg-slate-900/50 relative overflow-hidden">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold mb-4">实时监控演示</h2>
<p class="text-slate-400">模拟电子地图实时监控场景，体验系统核心能力</p>
</div>

<div class="door-point absolute" style="left: 15%; top: 25%;" data-id="1" data-status="online">
<div class="relative">
<div class="pulse-ring absolute inset-0 rounded-full bg-emerald-500/30"></div>
<div class="door-icon w-10 h-10 bg-slate-900 rounded-full border-2 border-emerald-500 flex items-center justify-center cursor-pointer shadow-lg shadow-emerald-500/20" onclick="showDoorMenu(1)">
<i class="fas fa-door-closed text-emerald-400"></i>
</div>
<div class="absolute -bottom-6 left-1/2 transform -translate-x-1/2 text-xs text-emerald-400 whitespace-nowrap bg-slate-900/80 px-2 py-0.5 rounded">正门入口</div>
</div>
</div>

<div id="doorMenu" class="hidden absolute z-30 bg-slate-800 border border-slate-700 rounded-lg shadow-xl py-2 w-40">
<div class="px-3 py-2 text-xs text-slate-400 border-b border-slate-700 mb-1">远程控制</div>
<button onclick="controlDoor('open')" class="w-full text-left px-4 py-2 text-sm hover:bg-slate-700 text-emerald-400 transition">
<i class="fas fa-lock-open mr-2"></i>远程开门
</button>
<button onclick="controlDoor('close')" class="w-full text-left px-4 py-2 text-sm hover:bg-slate-700 text-slate-300 transition">
<i class="fas fa-lock mr-2"></i>远程关门
</button>
<button onclick="controlDoor('alwaysOpen')" class="w-full text-left px-4 py-2 text-sm hover:bg-slate-700 text-blue-400 transition">
<i class="fas fa-door-open mr-2"></i>设置常开
</button>
<button onclick="controlDoor('alwaysClose')" class="w-full text-left px-4 py-2 text-sm hover:bg-slate-700 text-amber-400 transition">
<i class="fas fa-ban mr-2"></i>设置常闭
</button>
</div>
</div>
</div>

<div class="glass-card rounded-2xl p-6 flex flex-col" style="max-height: 500px;">
<div class="flex justify-between items-center mb-4">
<h3 class="font-bold text-lg"><i class="fas fa-history text-indigo-400 mr-2"></i>实时事件</h3>
<span class="text-xs bg-indigo-500/20 text-indigo-300 px-2 py-1 rounded-full">实时</span>
</div>

<div class="flex-1 overflow-hidden relative">
<div class="absolute inset-x-0 top-0 h-8 bg-gradient-to-b from-slate-900/50 to-transparent z-10"></div>
<div class="absolute inset-x-0 bottom-0 h-8 bg-gradient-to-t from-slate-900/50 to-transparent z-10"></div>

<div id="eventLog" class="space-y-3 text-sm">

</div>
</div>

<section id="advantages" class="py-24 relative">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-4xl font-bold mb-4">系统核心优势</h2>
<p class="text-slate-400">六大核心优势，打造行业领先的门禁地图监控方案</p>
</div>

<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="relative group">
<div class="absolute -inset-1 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-2xl blur opacity-25 group-hover:opacity-75 transition duration-1000 group-hover:duration-200"></div>
<div class="relative glass-card rounded-2xl p-8 h-full">
<div class="w-12 h-12 bg-indigo-500/20 rounded-xl flex items-center justify-center mb-4">
<i class="fas fa-mouse-pointer text-indigo-400 text-xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">自定义地图设备拖拉添加</h3>
<p class="text-slate-400 leading-relaxed">可视化拖拽操作，无需复杂配置，快速完成设备地图部署，大幅降低实施成本。</p>
</div>
</div>

<div class="relative group">
<div class="absolute -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 rounded-2xl blur opacity-25 group-hover:opacity-75 transition duration-1000 group-hover:duration-200"></div>
<div class="relative glass-card rounded-2xl p-8 h-full">
<div class="w-12 h-12 bg-purple-500/20 rounded-xl flex items-center justify-center mb-4">
<i class="fas fa-eye text-purple-400 text-xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">门禁点图标状态实时显示</h3>
<p class="text-slate-400 leading-relaxed">在线、离线、报警等多维状态一目了然，地图即状态面板，监控效率显著提升。</p>
</div>
</div>

<div class="relative group">
<div class="absolute -inset-1 bg-gradient-to-r from-pink-600 to-rose-600 rounded-2xl blur opacity-25 group-hover:opacity-75 transition duration-1000 group-hover:duration-200"></div>
<div class="relative glass-card rounded-2xl p-8 h-full">
<div class="w-12 h-12 bg-pink-500/20 rounded-xl flex items-center justify-center mb-4">
<i class="fas fa-gamepad text-pink-400 text-xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">门禁点图标远程控制</h3>
<p class="text-slate-400 leading-relaxed">地图上直接右键控制，开门、关门、常开、常闭一键操作，管理便捷高效。</p>
</div>
</div>

<div class="relative group">
<div class="absolute -inset-1 bg-gradient-to-r from-blue-600 to-cyan-600 rounded-2xl blur opacity-25 group-hover:opacity-75 transition duration-1000 group-hover:duration-200"></div>
<div class="relative glass-card rounded-2xl p-8 h-full">
<div class="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center mb-4">
<i class="fas fa-stream text-blue-400 text-xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">事件记录滚动显示</h3>
<p class="text-slate-400 leading-relaxed">实时滚动展示全部门禁事件，支持历史追溯查询，事件管理无死角。</p>
</div>
</div>

<div class="relative group">
<div class="absolute -inset-1 bg-gradient-to-r from-cyan-600 to-teal-600 rounded-2xl blur opacity-25 group-hover:opacity-75 transition duration-1000 group-hover:duration-200"></div>
<div class="relative glass-card rounded-2xl p-8 h-full">
<div class="w-12 h-12 bg-cyan-500/20 rounded-xl flex items-center justify-center mb-4">
<i class="fas fa-crosshairs text-cyan-400 text-xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">门禁点报警自动定位</h3>
<p class="text-slate-400 leading-relaxed">报警自动跳转对应地图并声光提示，秒级定位异常点位，响应速度极快。</p>
</div>
</div>

<div class="relative group">
<div class="absolute -inset-1 bg-gradient-to-r from-teal-600 to-emerald-600 rounded-2xl blur opacity-25 group-hover:opacity-75 transition duration-1000 group-hover:duration-200"></div>
<div class="relative glass-card rounded-2xl p-8 h-full">
<div class="w-12 h-12 bg-teal-500/20 rounded-xl flex items-center justify-center mb-4">
<i class="fas fa-tasks text-teal-400 text-xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">门禁点报警接警处理</h3>
<p class="text-slate-400 leading-relaxed">人工接警闭环管理，填写原因及状态，确保每一起报警都得到妥善处理。</p>
</div>
</div>
</div>
</div>
</section>

<footer class="border-t border-slate-800 py-12 bg-slate-900">
<div class="max-w-7xl mx-auto px-6 text-center">
<div class="flex items-center justify-center gap-3 mb-4">
<div class="w-8 h-8 rounded bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center">
<i class="fas fa-map-marked-alt text-white text-sm"></i>
</div>
<span class="font-bold text-lg">DAIC-MJ-DT 智能门禁电子地图实时监控系统</span>
</div>
<p class="text-slate-500 text-sm">多奥智能科技 | 可视化门禁集中管控解决方案</p>
</div>
</footer>

let currentZoom = 1;
let selectedDoor = null;

// 初始化事件日志
function initEventLog() {
const container = document.getElementById('eventLog');
const typeColors = {
alarm: 'text-red-400 border-red-500/30 bg-red-500/5',
normal: 'text-emerald-400 border-emerald-500/30 bg-emerald-500/5'
};
const typeIcons = {
alarm: 'fa-exclamation-circle',
normal: 'fa-check-circle'
};

events.forEach(event => {
const div = document.createElement('div');
div.className = `flex items-start gap-3 p-3 rounded-lg border ${typeColors[event.type]} transition hover:scale-[1.02]`;
div.innerHTML = `
<i class="fas ${typeIcons[event.type]} mt-0.5 ${event.type === 'alarm' ? 'text-red-400' : 'text-emerald-400'}"></i>
<div class="flex-1 min-w-0">
<div class="flex justify-between items-start">
<span class="font-medium truncate">${event.door}</span>
<span class="text-xs opacity-60 ml-2">${event.time}</span>
</div>
<div class="text-xs opacity-80 mt-0.5">${event.action} ${event.user !== '-' ? `· ${event.user}` : ''}</div>
</div>
`;
container.appendChild(div);
});
}

// 地图缩放
function zoomMap(factor) {
currentZoom *= factor;
currentZoom = Math.max(0.5, Math.min(3, currentZoom));
const container = document.getElementById('mapContainer');
const points = container.querySelectorAll('.door-point');
points.forEach(point => {
point.style.transform = `scale(${currentZoom})`;
});
}

// 显示门禁菜单
function showDoorMenu(doorId) {
selectedDoor = doorId;
const menu = document.getElementById('doorMenu');
const point = document.querySelector(`[data-id="${doorId}"]`);
const rect = point.getBoundingClientRect();
const container = document.getElementById('mapContainer').getBoundingClientRect();

menu.style.left = (rect.left - container.left + 20) + 'px';
menu.style.top = (rect.top - container.top) + 'px';
menu.classList.remove('hidden');

setTimeout(() => {
document.addEventListener('click', hideDoorMenu, { once: true });
}, 10);
}

function hideDoorMenu() {
document.getElementById('doorMenu').classList.add('hidden');
}

// 控制门禁
function controlDoor(action) {
const actions = {
open: '远程开门',
close: '远程关门',
alwaysOpen: '设置常开',
alwaysClose: '设置常闭'
};

// 添加新事件
const doorName = document.querySelector(`[data-id="${selectedDoor}"] .text-xs`).textContent;
const newEvent = {
time: new Date().toLocaleTimeString('zh-CN', { hour12: false }),
type: 'normal',
door: doorName,
action: actions[action],
user: '管理员'
};

const container = document.getElementById('eventLog');
const div = document.createElement('div');
div.className = 'flex items-start gap-3 p-3 rounded-lg border text-emerald-400 border-emerald-500/30 bg-emerald-500/5 transition hover:scale-[1.02] animate-pulse';
div.innerHTML = `
<i class="fas fa-check-circle mt-0.5 text-emerald-400"></i>
<div class="flex-1 min-w-0">
<div class="flex justify-between items-start">
<span class="font-medium truncate">${newEvent.door}</span>
<span class="text-xs opacity-60 ml-2">${newEvent.time}</span>
</div>
<div class="text-xs opacity-80 mt-0.5">${newEvent.action} · ${newEvent.user}</div>
</div>
`;
container.insertBefore(div, container.firstChild);
if (container.children.length > 12) container.removeChild(container.lastChild);

setTimeout(() => div.classList.remove('animate-pulse'), 1000);
}

// 高亮功能
function highlightFeature(id) {
const cards = document.querySelectorAll('#features .glass-card');
cards[id-1].scrollIntoView({ behavior: 'smooth', block: 'center' });
cards[id-1].classList.add('ring-2', 'ring-indigo-500');
setTimeout(() => cards[id-1].classList.remove('ring-2', 'ring-indigo-500'), 2000);
}

// 模拟实时事件
setInterval(() => {
const container = document.getElementById('eventLog');
if (Math.random() > 0.7) {
const doors = ['正门入口', '会议室A', '财务室', '侧门', '机房'];
const actions = ['刷卡进入', '刷卡离开', '远程开门', '门未关超时'];
const users = ['张三', '李四', '王五', '赵六', '未知'];

const newEvent = {
time: new Date().toLocaleTimeString('zh-CN', { hour12: false }),
type: Math.random() > 0.8 ? 'alarm' : 'normal',
door: doors[Math.floor(Math.random() * doors.length)],
action: actions[Math.floor(Math.random() * actions.length)],
user: users[Math.floor(Math.random() * users.length)]
};

const typeClass = newEvent.type === 'alarm'
? 'text-red-400 border-red-500/30 bg-red-500/5'
: 'text-emerald-400 border-emerald-500/30 bg-emerald-500/5';
const iconClass = newEvent.type === 'alarm' ? 'fa-exclamation-circle text-red-400' : 'fa-check-circle text-emerald-400';

const div = document.createElement('div');
div.className = `flex items-start gap-3 p-3 rounded-lg border ${typeClass} transition hover:scale-[1.02]`;
div.innerHTML = `
<i class="fas ${iconClass} mt-0.5"></i>
<div class="flex-1 min-w-0">
<div class="flex justify-between items-start">
<span class="font-medium truncate">${newEvent.door}</span>
<span class="text-xs opacity-60 ml-2">${newEvent.time}</span>
</div>
<div class="text-xs opacity-80 mt-0.5">${newEvent.action} · ${newEvent.user}</div>
</div>
`;
container.insertBefore(div, container.firstChild);
if (container.children.length > 12) container.removeChild(container.lastChild);
}
}, 5000);