159 lines
8.3 KiB
HTML
159 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="design-system/kt-ai-page.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-tokens.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-fonts.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-components.css">
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<header class="header">
|
||
<div class="header-content">
|
||
<h1>Учёт оборудования и материальных средств</h1>
|
||
<div class="header-actions">
|
||
<span id="userInfo" style="margin-right:12px;font-size:14px;color:var(--text-secondary);align-self:center;"></span>
|
||
<button class="btn btn-secondary" id="usersBtn" style="display:none;">Пользователи</button>
|
||
<button class="btn btn-primary" id="addBtn">+ Добавить</button>
|
||
<button class="btn btn-secondary" id="exportBtn">Выгрузить в Excel</button>
|
||
<button class="btn btn-secondary" id="logBtn">Журнал</button>
|
||
<button class="btn btn-secondary" id="logoutBtn">Выйти</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="content">
|
||
<div class="stats-grid">
|
||
<div class="stat-card"><div class="stat-value" id="statTotal">0</div><div class="stat-label">Всего</div></div>
|
||
<div class="stat-card"><div class="stat-value" id="statExploitation">0</div><div class="stat-label">В эксплуатации</div></div>
|
||
<div class="stat-card"><div class="stat-value" id="statWarehouse">0</div><div class="stat-label">На складе</div></div>
|
||
<div class="stat-card"><div class="stat-value" id="statRepair">0</div><div class="stat-label">В ремонте</div></div>
|
||
<div class="stat-card"><div class="stat-value" id="statWrittenOff">0</div><div class="stat-label">Списано</div></div>
|
||
<div class="stat-card stat-warning"><div class="stat-value" id="statRequireCheck">0</div><div class="stat-label">Требуют проверки (30 дн)</div></div>
|
||
<div class="stat-card stat-danger"><div class="stat-value" id="statOverdue">0</div><div class="stat-label">Просрочено</div></div>
|
||
</div>
|
||
|
||
<div class="filters-bar">
|
||
<div class="chips">
|
||
<button class="chip active" data-status="">Все</button>
|
||
<button class="chip" data-status="в эксплуатации">В эксплуатации</button>
|
||
<button class="chip" data-status="на складе">На складе</button>
|
||
<button class="chip" data-status="в ремонте">В ремонте</button>
|
||
<button class="chip" data-status="списано">Списано</button>
|
||
<button class="chip" data-status="require">🔔 Требуют проверки</button>
|
||
</div>
|
||
<input type="text" class="search-input" id="searchInput" placeholder="Поиск...">
|
||
</div>
|
||
|
||
<div class="table-container">
|
||
<table class="data-table">
|
||
<thead>
|
||
<tr>
|
||
<th data-sort="name">Наименование</th>
|
||
<th data-sort="type">Тип</th>
|
||
<th data-sort="inventoryNumber">Инвентарный</th>
|
||
<th data-sort="responsible">Ответственный</th>
|
||
<th data-sort="location">Местоположение</th>
|
||
<th data-sort="status">Статус</th>
|
||
<th data-sort="nextCheckDate">След. проверка</th>
|
||
<th>Действия</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="tableBody"></tbody>
|
||
</table>
|
||
</div>
|
||
</main>
|
||
|
||
<div class="modal" id="itemModal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2 id="modalTitle">Добавить запись</h2>
|
||
<button class="close-btn" id="closeModal">×</button>
|
||
</div>
|
||
<form id="itemForm">
|
||
<input type="hidden" id="itemId">
|
||
<div class="form-row">
|
||
<div class="form-group"><label for="name">Наименование *</label><input type="text" id="name" required></div>
|
||
<div class="form-group"><label for="type">Тип</label><input type="text" id="type"></div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group"><label for="serialNumber">Серийный номер</label><input type="text" id="serialNumber"></div>
|
||
<div class="form-group"><label for="inventoryNumber">Инвентарный номер *</label><input type="text" id="inventoryNumber" required></div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group"><label for="location">Местоположение *</label><input type="text" id="location" required></div>
|
||
<div class="form-group"><label for="responsible">Ответственный *</label><input type="text" id="responsible" required></div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group"><label for="status">Статус *</label>
|
||
<select id="status" required>
|
||
<option value="в эксплуатации">В эксплуатации</option>
|
||
<option value="на складе">На складе</option>
|
||
<option value="в ремонте">В ремонте</option>
|
||
<option value="списано">Списано</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group"><label for="checkIntervalMonths">Интервал проверки (мес)</label><input type="number" id="checkIntervalMonths" value="12" min="1"></div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group"><label for="lastCheckDate">Последняя проверка</label><input type="date" id="lastCheckDate"></div>
|
||
<div class="form-group"><label for="nextCheckDate">Следующая проверка *</label><input type="date" id="nextCheckDate" required></div>
|
||
</div>
|
||
<div class="form-group"><label for="note">Комментарий</label><textarea id="note" rows="3"></textarea></div>
|
||
<div class="modal-actions">
|
||
<button type="button" class="btn btn-secondary" id="cancelBtn">Отмена</button>
|
||
<button type="submit" class="btn btn-primary">Сохранить</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal" id="logModal">
|
||
<div class="modal-content modal-large">
|
||
<div class="modal-header">
|
||
<h2>Журнал изменений</h2>
|
||
<button class="close-btn" id="closeLogModal">×</button>
|
||
</div>
|
||
<div class="table-container">
|
||
<table class="data-table">
|
||
<thead><tr><th>Дата/время</th><th>Действие</th><th>Запись</th><th>Кто</th><th>Изменения</th></tr></thead>
|
||
<tbody id="logBody"></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal" id="usersModal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2>Пользователи</h2>
|
||
<button class="close-btn" id="closeUsersModal">×</button>
|
||
</div>
|
||
<form id="userForm">
|
||
<div class="form-row">
|
||
<div class="form-group"><label for="newLogin">Логин</label><input type="text" id="newLogin" required></div>
|
||
<div class="form-group"><label for="newPassword">Пароль</label><input type="text" id="newPassword" required></div>
|
||
</div>
|
||
<div class="form-group"><label for="newRole">Роль</label>
|
||
<select id="newRole"><option value="user">Пользователь</option><option value="admin">Админ</option></select>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary">Создать</button>
|
||
</form>
|
||
<div class="table-container" style="margin-top:20px;">
|
||
<table class="data-table">
|
||
<thead><tr><th>Логин</th><th>Роль</th><th>Создан</th><th>Действия</th></tr></thead>
|
||
<tbody id="usersBody"></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|