387 lines
21 KiB
HTML
387 lines
21 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru" data-theme="dark">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Учёт оборудования | Контроль проверок</title>
|
||
<link rel="icon" href="design-system/brand/kt-ai-logo.png">
|
||
<link rel="stylesheet" href="design-system/kt-ai-fonts.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-tokens.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-components.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-page.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-app.css">
|
||
<style>
|
||
.kt-ai-btn { text-decoration: none; }
|
||
.status-ok { background: var(--kt-ai-success-bg); color: var(--kt-ai-success-fg); }
|
||
.status-warning { background: var(--kt-ai-warning-bg); color: var(--kt-ai-warning-fg); }
|
||
.status-danger { background: var(--kt-ai-danger-bg); color: var(--kt-ai-danger-fg); }
|
||
.row-expiring { background: rgba(239, 68, 68, 0.08); }
|
||
.row-expired { background: rgba(239, 68, 68, 0.15); }
|
||
.kpi-card { padding: var(--kt-ai-space-5); border-radius: var(--kt-ai-radius-xl); background: var(--kt-ai-card-bg); border: 1px solid var(--kt-ai-border); }
|
||
.kpi-value { font-size: var(--kt-ai-text-3xl); font-weight: var(--kt-ai-weight-bold); color: var(--kt-ai-fg); }
|
||
.kpi-label { font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg-muted); margin-top: var(--kt-ai-space-1); }
|
||
.notification { padding: var(--kt-ai-space-3) var(--kt-ai-space-4); border-radius: var(--kt-ai-radius-lg); margin-bottom: var(--kt-ai-space-2); border-left: 4px solid; }
|
||
.notification-warning { border-left-color: var(--kt-ai-warning); background: var(--kt-ai-warning-bg); }
|
||
.notification-danger { border-left-color: var(--kt-ai-danger); background: var(--kt-ai-danger-bg); }
|
||
.tab-content { display: none; }
|
||
.tab-content.active { display: block; }
|
||
.sidebar-nav { margin-top: var(--kt-ai-space-6); }
|
||
.nav-section { margin-bottom: var(--kt-ai-space-4); }
|
||
.nav-title { font-size: var(--kt-ai-text-xs); font-weight: var(--kt-ai-weight-semibold); color: var(--kt-ai-fg-faint); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--kt-ai-space-2); padding: 0 var(--kt-ai-space-3); }
|
||
</style>
|
||
</head>
|
||
<body class="kt-ai-app">
|
||
<div class="kt-ai-shell">
|
||
<aside class="kt-ai-sidebar">
|
||
<a class="kt-ai-brand" href="#">
|
||
<img src="design-system/brand/kazakhtelecom-logo-white.png" alt="Қазақтелеком" height="20">
|
||
<div>
|
||
<span style="display: block; font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-faint);">Жамбылский ДЭСД</span>
|
||
<span style="display: block; font-weight: 600;">Учёт оборудования</span>
|
||
</div>
|
||
</a>
|
||
<nav class="sidebar-nav">
|
||
<div class="nav-section">
|
||
<div class="nav-title">Основное</div>
|
||
<a class="kt-ai-nav-item is-active" href="#" data-tab="dashboard">
|
||
<svg class="kt-icon kt-icon-sm" aria-hidden="true"><use href="#dashboard"></use></svg>
|
||
Dashboard
|
||
</a>
|
||
<a class="kt-ai-nav-item" href="#" data-tab="all">
|
||
<svg class="kt-icon kt-icon-sm" aria-hidden="true"><use href="#table"></use></svg>
|
||
Всё оборудование
|
||
</a>
|
||
<a class="kt-ai-nav-item" href="#" data-tab="expiring">
|
||
<svg class="kt-icon kt-icon-sm" aria-hidden="true"><use href="#clock"></use></svg>
|
||
Проверка (30 дней)
|
||
<span class="kt-ai-chip" id="expiring-count" style="margin-left: auto; display: none;">0</span>
|
||
</a>
|
||
<a class="kt-ai-nav-item" href="#" data-tab="expired">
|
||
<svg class="kt-icon kt-icon-sm" aria-hidden="true"><use href="#alert"></use></svg>
|
||
Просрочено
|
||
<span class="kt-ai-chip status-danger" id="expired-count" style="margin-left: auto; display: none;">0</span>
|
||
</a>
|
||
</div>
|
||
<div class="nav-section">
|
||
<div class="nav-title">Действия</div>
|
||
<a class="kt-ai-nav-item" href="#" data-tab="add">
|
||
<svg class="kt-icon kt-icon-sm" aria-hidden="true"><use href="#plus"></use></svg>
|
||
Добавить оборудование
|
||
</a>
|
||
<a class="kt-ai-nav-item" href="excel-editor.html" target="_blank">
|
||
<svg class="kt-icon kt-icon-sm" aria-hidden="true"><use href="#table"></use></svg>
|
||
Excel Редактор
|
||
</a>
|
||
<a class="kt-ai-nav-item" href="#" data-tab="reports">
|
||
<svg class="kt-icon kt-icon-sm" aria-hidden="true"><use href="#chart"></use></svg>
|
||
Отчёты
|
||
</a>
|
||
</div>
|
||
</nav>
|
||
<div style="margin-top: auto; padding: var(--kt-ai-space-3); border-top: 1px solid var(--kt-ai-border);">
|
||
<button class="kt-ai-btn" data-variant="ghost" data-size="sm" style="width: 100%;" onclick="toggleTheme()">
|
||
<svg class="kt-icon kt-icon-sm" aria-hidden="true"><use href="#moon"></use></svg>
|
||
Тема
|
||
</button>
|
||
</div>
|
||
</aside>
|
||
|
||
<main>
|
||
<header class="kt-ai-topbar">
|
||
<div style="display: flex; align-items: center; gap: var(--kt-ai-space-4);">
|
||
<img src="design-system/brand/kazakhtelecom-logo-white.png" alt="Қазақтелеком" height="24" style="border-radius: var(--kt-ai-radius-md);">
|
||
<div>
|
||
<div style="font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-faint); text-transform: uppercase; letter-spacing: 0.05em;">Жамбылский ДЭСД</div>
|
||
<h1 class="kt-ai-page-title" id="page-title" style="margin: 0; font-size: var(--kt-ai-text-lg);">Dashboard</h1>
|
||
</div>
|
||
</div>
|
||
<div class="kt-ai-search" style="min-width: 280px;">
|
||
<svg class="kt-icon kt-icon-sm" aria-hidden="true"><use href="#search"></use></svg>
|
||
<input type="text" class="kt-ai-input" placeholder="Поиск оборудования..." id="global-search" style="border: none; outline: none; flex: 1;">
|
||
</div>
|
||
</header>
|
||
|
||
<div id="notifications-container" style="padding: 0 var(--kt-ai-space-6); margin-bottom: var(--kt-ai-space-4);"></div>
|
||
|
||
<!-- DASHBOARD TAB -->
|
||
<div id="tab-dashboard" class="tab-content active">
|
||
<div style="padding: 0 var(--kt-ai-space-6); margin-bottom: var(--kt-ai-space-6);">
|
||
<div class="kt-ai-kpi-strip" style="display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--kt-ai-space-4);">
|
||
<div class="kpi-card">
|
||
<div class="kpi-value" id="kpi-total">0</div>
|
||
<div class="kpi-label">Всего оборудования</div>
|
||
</div>
|
||
<div class="kpi-card">
|
||
<div class="kpi-value" id="kpi-expiring" style="color: var(--kt-ai-warning);">0</div>
|
||
<div class="kpi-label">Проверка (30 дней)</div>
|
||
</div>
|
||
<div class="kpi-card">
|
||
<div class="kpi-value" id="kpi-expired" style="color: var(--kt-ai-danger);">0</div>
|
||
<div class="kpi-label">Просрочено</div>
|
||
</div>
|
||
<div class="kpi-card">
|
||
<div class="kpi-value" id="kpi-active" style="color: var(--kt-ai-success);">0</div>
|
||
<div class="kpi-label">Действует</div>
|
||
</div>
|
||
<div class="kpi-card">
|
||
<div class="kpi-value" id="kpi-this-month">0</div>
|
||
<div class="kpi-label">Проверок в этом месяце</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="padding: 0 var(--kt-ai-space-6);">
|
||
<h2 style="margin-bottom: var(--kt-ai-space-4);">Ближайшие проверки</h2>
|
||
<div class="kt-ai-table-wrap">
|
||
<table class="kt-ai-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Наименование</th>
|
||
<th>Категория</th>
|
||
<th>Инвентарный номер</th>
|
||
<th>Следующая проверка</th>
|
||
<th>Дней осталось</th>
|
||
<th>Статус</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="dashboard-table-body"></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ALL EQUIPMENT TAB -->
|
||
<div id="tab-all" class="tab-content">
|
||
<div style="padding: 0 var(--kt-ai-space-6);">
|
||
<div class="kt-ai-toolbar" style="margin-bottom: var(--kt-ai-space-4);">
|
||
<div class="kt-ai-filterbar">
|
||
<select class="kt-ai-select" id="filter-category" onchange="renderTable()">
|
||
<option value="">Все категории</option>
|
||
<option value="Огнетушитель">Огнетушитель</option>
|
||
<option value="Аптечка">Аптечка</option>
|
||
<option value="Электроинструмент">Электроинструмент</option>
|
||
<option value="СИЗ">СИЗ</option>
|
||
<option value="Измерительный прибор">Измерительный прибор</option>
|
||
<option value="Лестница">Лестница</option>
|
||
<option value="Другое">Другое</option>
|
||
</select>
|
||
<select class="kt-ai-select" id="filter-status" onchange="renderTable()">
|
||
<option value="">Все статусы</option>
|
||
<option value="ok">Действует</option>
|
||
<option value="warning">Скоро проверка</option>
|
||
<option value="danger">Просрочено</option>
|
||
</select>
|
||
<button class="kt-ai-btn" data-variant="ghost" onclick="exportToExcel()">
|
||
<svg class="kt-icon kt-icon-sm" aria-hidden="true"><use href="#download"></use></svg>
|
||
Excel
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="kt-ai-table-wrap">
|
||
<table class="kt-ai-table">
|
||
<thead>
|
||
<tr>
|
||
<th>№</th>
|
||
<th>Наименование</th>
|
||
<th>Категория</th>
|
||
<th>Инвентарный номер</th>
|
||
<th>Место нахождения</th>
|
||
<th>Ответственный</th>
|
||
<th>Последняя проверка</th>
|
||
<th>Периодичность</th>
|
||
<th>Следующая проверка</th>
|
||
<th>Статус</th>
|
||
<th>Действия</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="all-table-body"></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- EXPIRING TAB -->
|
||
<div id="tab-expiring" class="tab-content">
|
||
<div style="padding: 0 var(--kt-ai-space-6);">
|
||
<div class="notification notification-warning" style="margin-bottom: var(--kt-ai-space-4);">
|
||
<strong>Внимание!</strong> Оборудование, требующее проверки в ближайшие 30 дней.
|
||
</div>
|
||
<div class="kt-ai-table-wrap">
|
||
<table class="kt-ai-table">
|
||
<thead>
|
||
<tr>
|
||
<th>№</th>
|
||
<th>Наименование</th>
|
||
<th>Категория</th>
|
||
<th>Инвентарный номер</th>
|
||
<th>Место нахождения</th>
|
||
<th>Ответственный</th>
|
||
<th>Следующая проверка</th>
|
||
<th>Дней осталось</th>
|
||
<th>Действия</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="expiring-table-body"></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- EXPIRED TAB -->
|
||
<div id="tab-expired" class="tab-content">
|
||
<div style="padding: 0 var(--kt-ai-space-6);">
|
||
<div class="notification notification-danger" style="margin-bottom: var(--kt-ai-space-4);">
|
||
<strong>Проверка просрочена!</strong> Оборудование с истёкшим сроком проверки.
|
||
</div>
|
||
<div class="kt-ai-table-wrap">
|
||
<table class="kt-ai-table">
|
||
<thead>
|
||
<tr>
|
||
<th>№</th>
|
||
<th>Наименование</th>
|
||
<th>Категория</th>
|
||
<th>Инвентарный номер</th>
|
||
<th>Место нахождения</th>
|
||
<th>Ответственный</th>
|
||
<th>Следующая проверка</th>
|
||
<th>Просрочено на (дней)</th>
|
||
<th>Действия</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="expired-table-body"></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ADD EQUIPMENT TAB -->
|
||
<div id="tab-add" class="tab-content">
|
||
<div style="padding: 0 var(--kt-ai-space-6); max-width: 800px;">
|
||
<div class="kt-ai-card" style="padding: var(--kt-ai-space-6);">
|
||
<h2 style="margin-bottom: var(--kt-ai-space-6);">Добавить оборудование</h2>
|
||
<form id="add-form" onsubmit="addEquipment(event)">
|
||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: var(--kt-ai-space-4);">
|
||
<div class="kt-ai-field">
|
||
<label>Наименование *</label>
|
||
<input type="text" class="kt-ai-input" name="name" required placeholder="Огнетушитель ОП-5">
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label>Категория *</label>
|
||
<select class="kt-ai-select" name="category" required>
|
||
<option value="">Выберите категорию</option>
|
||
<option value="Огнетушитель">Огнетушитель</option>
|
||
<option value="Аптечка">Аптечка</option>
|
||
<option value="Электроинструмент">Электроинструмент</option>
|
||
<option value="СИЗ">СИЗ</option>
|
||
<option value="Измерительный прибор">Измерительный прибор</option>
|
||
<option value="Лестница">Лестница</option>
|
||
<option value="Другое">Другое</option>
|
||
</select>
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label>Инвентарный номер *</label>
|
||
<input type="text" class="kt-ai-input" name="inventoryNumber" required placeholder="ИН-001">
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label>Место нахождения *</label>
|
||
<input type="text" class="kt-ai-input" name="location" required placeholder="Кабинет 101">
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label>Ответственный сотрудник *</label>
|
||
<input type="text" class="kt-ai-input" name="responsible" required placeholder="Иванов И.И.">
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label>Периодичность проверки (мес.) *</label>
|
||
<input type="number" class="kt-ai-input" name="period" required min="1" max="60" value="12" onchange="calculateNextDate()">
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label>Дата последней проверки *</label>
|
||
<input type="date" class="kt-ai-input" name="lastCheck" required onchange="calculateNextDate()">
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label>Следующая проверка</label>
|
||
<input type="date" class="kt-ai-input" name="nextCheck" id="next-check" readonly>
|
||
</div>
|
||
</div>
|
||
<div class="kt-ai-field" style="margin-top: var(--kt-ai-space-4);">
|
||
<label>Примечание</label>
|
||
<textarea class="kt-ai-textarea" name="note" rows="3" placeholder="Дополнительная информация"></textarea>
|
||
</div>
|
||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: var(--kt-ai-space-4); margin-top: var(--kt-ai-space-4);">
|
||
<div class="kt-ai-field">
|
||
<label>Фотография оборудования</label>
|
||
<input type="file" class="kt-ai-input" name="photo" accept="image/*">
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label>Акт/документ о проверке</label>
|
||
<input type="file" class="kt-ai-input" name="document" accept=".pdf,.doc,.docx,.xlsx,.xls">
|
||
</div>
|
||
</div>
|
||
<div style="margin-top: var(--kt-ai-space-6); display: flex; gap: var(--kt-ai-space-3);">
|
||
<button type="submit" class="kt-ai-btn" data-variant="primary" data-size="lg">Сохранить</button>
|
||
<button type="button" class="kt-ai-btn" data-variant="ghost" onclick="resetForm()">Очистить</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- REPORTS TAB -->
|
||
<div id="tab-reports" class="tab-content">
|
||
<div style="padding: 0 var(--kt-ai-space-6);">
|
||
<div class="kt-ai-card-grid" style="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--kt-ai-space-4);">
|
||
<div class="kt-ai-card" style="padding: var(--kt-ai-space-5);">
|
||
<h3 style="margin-bottom: var(--kt-ai-space-2); display: flex; align-items: center; gap: var(--kt-ai-space-2);">
|
||
<svg class="kt-icon kt-icon-lg" aria-hidden="true"><use href="#table"></use></svg>
|
||
Всё оборудование
|
||
</h3>
|
||
<p style="color: var(--kt-ai-fg-muted); margin-bottom: var(--kt-ai-space-4);">Полный список всего оборудования</p>
|
||
<button class="kt-ai-btn" data-variant="primary" onclick="generateReport('all')">Сформировать отчёт</button>
|
||
</div>
|
||
<div class="kt-ai-card" style="padding: var(--kt-ai-space-5);">
|
||
<h3 style="margin-bottom: var(--kt-ai-space-2); display: flex; align-items: center; gap: var(--kt-ai-space-2);">
|
||
<svg class="kt-icon kt-icon-lg" aria-hidden="true"><use href="#clock"></use></svg>
|
||
На проверку
|
||
</h3>
|
||
<p style="color: var(--kt-ai-fg-muted); margin-bottom: var(--kt-ai-space-4);">Оборудование с истекающим сроком</p>
|
||
<button class="kt-ai-btn" data-variant="primary" onclick="generateReport('expiring')">Сформировать отчёт</button>
|
||
</div>
|
||
<div class="kt-ai-card" style="padding: var(--kt-ai-space-5);">
|
||
<h3 style="margin-bottom: var(--kt-ai-space-2); display: flex; align-items: center; gap: var(--kt-ai-space-2);">
|
||
<svg class="kt-icon kt-icon-lg" aria-hidden="true"><use href="#alert"></use></svg>
|
||
Просрочено
|
||
</h3>
|
||
<p style="color: var(--kt-ai-fg-muted); margin-bottom: var(--kt-ai-space-4);">Оборудование с просроченной проверкой</p>
|
||
<button class="kt-ai-btn" data-variant="primary" onclick="generateReport('expired')">Сформировать отчёт</button>
|
||
</div>
|
||
<div class="kt-ai-card" style="padding: var(--kt-ai-space-5);">
|
||
<h3 style="margin-bottom: var(--kt-ai-space-2); display: flex; align-items: center; gap: var(--kt-ai-space-2);">
|
||
<svg class="kt-icon kt-icon-lg" aria-hidden="true"><use href="#check"></use></svg>
|
||
Проверено
|
||
</h3>
|
||
<p style="color: var(--kt-ai-fg-muted); margin-bottom: var(--kt-ai-space-4);">Оборудование с действующим статусом</p>
|
||
<button class="kt-ai-btn" data-variant="primary" onclick="generateReport('active')">Сформировать отчёт</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<!-- DRAWER FOR EQUIPMENT DETAILS -->
|
||
<aside class="kt-ai-drawer" id="equipment-drawer" hidden>
|
||
<div style="padding: var(--kt-ai-space-5); border-bottom: 1px solid var(--kt-ai-border); display: flex; justify-content: space-between; align-items: center;">
|
||
<h2 style="margin: 0;" id="drawer-title">Оборудование</h2>
|
||
<button class="kt-ai-btn" data-variant="ghost" onclick="closeDrawer()">
|
||
<svg class="kt-icon" aria-hidden="true"><use href="#x"></use></svg>
|
||
</button>
|
||
</div>
|
||
<div style="padding: var(--kt-ai-space-5);" id="drawer-content"></div>
|
||
<div class="kt-ai-drawer-actions" id="drawer-actions"></div>
|
||
</aside>
|
||
|
||
<script src="design-system/icons/kt-ai-icons.js"></script>
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|