193 lines
8.3 KiB
HTML
193 lines
8.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>ИИ-агент мониторинга ПБ — АО «Самрук-Казына»</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Login -->
|
||
<div id="loginScreen">
|
||
<div class="login-box">
|
||
<h1>Мониторинг ПБ</h1>
|
||
<p>АО «Самрук-Казына» — План 2026</p>
|
||
<label>Корпоративный email</label>
|
||
<input type="email" id="loginEmail" placeholder="user@telecom.kz" autocomplete="email">
|
||
<label>Пароль</label>
|
||
<input type="password" id="loginPass" placeholder="Любой пароль" autocomplete="current-password">
|
||
<button id="loginBtn">Войти</button>
|
||
<div class="login-error" id="loginError"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- App -->
|
||
<div id="app">
|
||
<!-- Sidebar -->
|
||
<div class="sidebar">
|
||
<div class="logo">ПБ <span>Монитор</span></div>
|
||
<a class="active" data-page="dashboard"><span class="icon">☰</span> <span>Дашборд</span></a>
|
||
<a data-page="analytics"><span class="icon">📈</span> <span>Аналитика</span></a>
|
||
<a data-page="reports"><span class="icon">📄</span> <span>Отчёты</span></a>
|
||
<a data-page="hse"><span class="icon">🔗</span> <span>HSE.sk.kz</span></a>
|
||
<a data-page="ai"><span class="icon">🤖</span> <span>ИИ-помощник</span></a>
|
||
<div class="user-info">
|
||
<div class="name" id="userName"></div>
|
||
<div id="userEmail" style="font-size:11px"></div>
|
||
<div class="logout-btn" id="logoutBtn">Выйти</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="main">
|
||
<!-- Dashboard page -->
|
||
<div class="page active" id="page-dashboard">
|
||
<div class="page-header">
|
||
<div style="display:flex;align-items:center;gap:12px">
|
||
<h2>Мероприятия ПБ</h2>
|
||
<div class="notif-bell" id="notifBell">🔔<span class="badge" id="notifCount">0</span></div>
|
||
</div>
|
||
<div class="actions">
|
||
<button class="btn btn-outline btn-sm" id="btnRefresh">↻ Обновить</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Stats -->
|
||
<div class="stats-grid" id="statsRow"></div>
|
||
|
||
<!-- Filters -->
|
||
<div class="filters">
|
||
<input id="filterSearch" placeholder="Поиск по названию...">
|
||
<select id="filterStatus"><option value="">Все статусы</option>
|
||
<option value="completed">Выполнено</option><option value="in_progress">В работе</option>
|
||
<option value="pending">Ожидает</option><option value="overdue">Просрочено</option>
|
||
</select>
|
||
<select id="filterBranch"><option value="">Все филиалы</option></select>
|
||
<label style="font-size:12px">Сортировка:</label>
|
||
<select id="filterSort"><option value="deadline">По сроку</option><option value="title">По названию</option><option value="status">По статусу</option></select>
|
||
</div>
|
||
|
||
<!-- Table -->
|
||
<div class="table-wrap">
|
||
<table>
|
||
<thead><tr>
|
||
<th data-sort="idx" style="width:40px">№</th>
|
||
<th data-sort="title">Мероприятие</th>
|
||
<th data-sort="responsible">Ответственный</th>
|
||
<th data-sort="section">Раздел</th>
|
||
<th data-sort="deadline">Срок</th>
|
||
<th data-sort="status">Статус</th>
|
||
<th style="width:60px"></th>
|
||
</tr></thead>
|
||
<tbody id="eventsBody"></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Analytics page -->
|
||
<div class="page" id="page-analytics">
|
||
<div class="page-header"><h2>Аналитика</h2></div>
|
||
<div class="stats-grid" id="analyticsStats"></div>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
|
||
<div class="report-card">
|
||
<h3>По филиалам</h3>
|
||
<div id="branchChart"></div>
|
||
</div>
|
||
<div class="report-card">
|
||
<h3>По статусам</h3>
|
||
<div id="statusChart"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Reports page -->
|
||
<div class="page" id="page-reports">
|
||
<div class="page-header"><h2>Скачать отчёты</h2></div>
|
||
<div class="report-card">
|
||
<h3>Word (.docx)</h3>
|
||
<p>Полный сводный отчёт по всем мероприятиям с таблицей и статистикой</p>
|
||
<button class="btn btn-primary" id="dlWord">Скачать DOCX</button>
|
||
</div>
|
||
<div class="report-card">
|
||
<h3>PDF</h3>
|
||
<p>Сводный отчёт в формате PDF для печати и рассылки</p>
|
||
<button class="btn btn-primary" id="dlPdf">Скачать PDF</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- HSE page -->
|
||
<div class="page" id="page-hse">
|
||
<div class="page-header"><h2>Интеграция с HSE.sk.kz</h2></div>
|
||
<div class="report-card">
|
||
<h3>Отправка сводного отчёта</h3>
|
||
<p>Сформировать подписанный отчёт за месяц и отправить в HSE.sk.kz</p>
|
||
<div class="hse-config">
|
||
<label>Месяц отчёта</label>
|
||
<input type="month" id="hseMonth">
|
||
<label>Формат</label>
|
||
<select id="hseFormat"><option value="word">Word</option><option value="pdf">PDF</option></select>
|
||
<label>API Key HSE.sk.kz</label>
|
||
<input type="password" id="hseApiKey" placeholder="API ключ для аутентификации">
|
||
<div class="hint">API ключ выдаётся администратором HSE.sk.kz</div>
|
||
<label>Endpoint (опционально)</label>
|
||
<input type="url" id="hseEndpoint" placeholder="https://hse.sk.kz/api/v1/documents/upload">
|
||
<button class="btn btn-primary" id="hseSendBtn" style="margin-top:14px">📤 Отправить отчёт</button>
|
||
<div id="hseResult" style="margin-top:12px;font-size:13px"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- AI page -->
|
||
<div class="page" id="page-ai">
|
||
<div class="page-header"><h2>ИИ-помощник</h2></div>
|
||
<div class="chat-box">
|
||
<div class="chat-msgs" id="chatMsgs">
|
||
<div class="chat-msg ai"><div class="label">🤖 ИИ-агент</div>Здравствуйте! Я анализирую данные по мероприятиям ПБ. Спросите о статусах, рисках, просрочках или рейтинге филиалов.</div>
|
||
</div>
|
||
<div class="chat-input-wrap">
|
||
<input id="chatInput" placeholder="Напишите вопрос..." />
|
||
<button class="btn btn-primary" id="chatSend">Отправить</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Edit modal -->
|
||
<div class="modal-overlay" id="editModal">
|
||
<div class="modal">
|
||
<h3>Редактировать мероприятие</h3>
|
||
<label>Статус</label>
|
||
<select id="editStatus">
|
||
<option value="pending">Ожидает</option>
|
||
<option value="in_progress">В работе</option>
|
||
<option value="completed">Выполнено</option>
|
||
<option value="overdue">Просрочено</option>
|
||
</select>
|
||
<label>Регион</label>
|
||
<input id="editRegion" placeholder="Регион">
|
||
<label>Описание выполнения (напишите отчёт)</label>
|
||
<textarea id="editDesc" placeholder="Что сделано?"></textarea>
|
||
<label>Количественный показатель</label>
|
||
<input type="number" id="editQty" placeholder="0" min="0">
|
||
<label>Прикрепить файл (PDF, DOC, XLS, JPG/PNG, PPT — до 3 МБ каждый)</label>
|
||
<input type="file" id="editFile">
|
||
<div id="editFileList" class="file-list"></div>
|
||
<div class="btn-group">
|
||
<button class="btn btn-outline" id="modalCancel">Отмена</button>
|
||
<button class="btn btn-primary" id="modalSave">Сохранить</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Notifications panel -->
|
||
<div class="notif-panel" id="notifPanel">
|
||
<span class="close" id="notifClose">×</span>
|
||
<h3>Уведомления</h3>
|
||
<div id="notifList"></div>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|