168 lines
6.3 KiB
HTML
168 lines
6.3 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>АМС AI-Мониторинг</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<div class="header-content">
|
||
<div class="logo">
|
||
<span class="logo-icon">🛡️</span>
|
||
<div>
|
||
<h1>АМС AI-Мониторинг</h1>
|
||
<p class="subtitle">Система контроля доступа на основе компьютерного зрения</p>
|
||
</div>
|
||
</div>
|
||
<div class="header-stats" id="headerStats">
|
||
<div class="stat-card">
|
||
<div class="stat-value" id="statAlerts">0</div>
|
||
<div class="stat-label">Тревог сегодня</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-value" id="statOnline">0/0</div>
|
||
<div class="stat-label">АМС онлайн</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-value" id="statEdges">0/0</div>
|
||
<div class="stat-label">Edge онлайн</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
<nav class="tabs">
|
||
<button class="tab-btn active" data-tab="dashboard">📊 Дашборд</button>
|
||
<button class="tab-btn" data-tab="alerts">🚨 Тревоги</button>
|
||
<button class="tab-btn" data-tab="ams">📡 АМС</button>
|
||
<button class="tab-btn" data-tab="edges">💻 Edge</button>
|
||
<button class="tab-btn" data-tab="simulate">🧪 Тест</button>
|
||
</nav>
|
||
|
||
<section id="dashboard" class="tab-content active">
|
||
<div class="dashboard-grid">
|
||
<div class="card">
|
||
<h2>📍 Карта АМС</h2>
|
||
<div id="amsMap" class="map-container"></div>
|
||
</div>
|
||
<div class="card">
|
||
<h2>🔔 Последние тревоги</h2>
|
||
<div id="recentAlerts" class="alerts-list"></div>
|
||
</div>
|
||
<div class="card">
|
||
<h2>📈 Статистика</h2>
|
||
<div id="statsChart" class="stats-container"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="alerts" class="tab-content">
|
||
<div class="toolbar">
|
||
<div class="filter-group">
|
||
<label>Статус:</label>
|
||
<select id="alertStatusFilter">
|
||
<option value="all">Все</option>
|
||
<option value="new">Новые</option>
|
||
<option value="confirmed">Подтверждённые</option>
|
||
<option value="closed">Закрытые</option>
|
||
</select>
|
||
</div>
|
||
<input type="text" id="alertSearch" placeholder="Поиск по АМС...">
|
||
<button onclick="loadAlerts()">🔄 Обновить</button>
|
||
</div>
|
||
<div id="alertsTable" class="table-container"></div>
|
||
</section>
|
||
|
||
<section id="ams" class="tab-content">
|
||
<div class="toolbar">
|
||
<button onclick="showAddAmsModal()" class="btn-primary">➕ Добавить АМС</button>
|
||
<input type="text" id="amsSearch" placeholder="Поиск АМС...">
|
||
</div>
|
||
<div id="amsTable" class="table-container"></div>
|
||
</section>
|
||
|
||
<section id="edges" class="tab-content">
|
||
<div id="edgesTable" class="table-container"></div>
|
||
</section>
|
||
|
||
<section id="simulate" class="tab-content">
|
||
<div class="card">
|
||
<h2>🧪 Симуляция событий</h2>
|
||
<p>Отправьте тестовое событие от edge-устройства</p>
|
||
<form id="simulateForm" class="simulate-form">
|
||
<div class="form-group">
|
||
<label>АМС:</label>
|
||
<select id="simAms" required></select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Камера:</label>
|
||
<select id="simCamera">
|
||
<option value="ladder">Лестница (мачта)</option>
|
||
<option value="perimeter">Периметр</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Событие:</label>
|
||
<select id="simEventType">
|
||
<option value="person_detected">Обнаружение человека</option>
|
||
<option value="car_detected">Обнаружение автомобиля</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Наряд-допуск есть?</label>
|
||
<select id="simPermit">
|
||
<option value="false">Нет (будет тревога)</option>
|
||
<option value="true">Да (без тревоги)</option>
|
||
</select>
|
||
</div>
|
||
<button type="submit" class="btn-primary">🚀 Отправить событие</button>
|
||
</form>
|
||
<div id="simulateResult" class="result-box"></div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<div id="addAmsModal" class="modal">
|
||
<div class="modal-content">
|
||
<h2>➕ Добавить АМС</h2>
|
||
<form id="addAmsForm">
|
||
<div class="form-group">
|
||
<label>Название:</label>
|
||
<input type="text" name="name" placeholder="АМС-342" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Адрес:</label>
|
||
<input type="text" name="address" placeholder="ул. Примерная, 1">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Регион:</label>
|
||
<select name="region">
|
||
<option value="almaty">Алматы</option>
|
||
<option value="astana">Астана</option>
|
||
<option value="shymkent">Шымкент</option>
|
||
<option value="aktobe">Актобе</option>
|
||
<option value="karaganda">Караганда</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Координаты:</label>
|
||
<div class="coords-row">
|
||
<input type="text" name="lat" placeholder="Широта" required>
|
||
<input type="text" name="lon" placeholder="Долгота" required>
|
||
</div>
|
||
</div>
|
||
<div class="modal-actions">
|
||
<button type="button" onclick="closeAddAmsModal()" class="btn-secondary">Отмена</button>
|
||
<button type="submit" class="btn-primary">Добавить</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|