474 lines
19 KiB
HTML
474 lines
19 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="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="style.css">
|
||
</head>
|
||
<body>
|
||
<div class="app-container">
|
||
<!-- Боковая навигация -->
|
||
<aside class="sidebar">
|
||
<div class="sidebar-header">
|
||
<h1 class="logo">📦 Учёт ТМЦ</h1>
|
||
</div>
|
||
<nav class="sidebar-nav">
|
||
<button class="nav-item active" data-screen="dashboard">
|
||
<span class="nav-icon">📊</span>
|
||
<span>Дашборд</span>
|
||
</button>
|
||
<button class="nav-item" data-screen="operations">
|
||
<span class="nav-icon">⚡</span>
|
||
<span>Операции</span>
|
||
</button>
|
||
<button class="nav-item" data-screen="warehouse">
|
||
<span class="nav-icon">📦</span>
|
||
<span>Склад</span>
|
||
</button>
|
||
<button class="nav-item" data-screen="movements">
|
||
<span class="nav-icon">📋</span>
|
||
<span>Передвижения</span>
|
||
</button>
|
||
<button class="nav-item" data-screen="settings">
|
||
<span class="nav-icon">⚙️</span>
|
||
<span>Справочники</span>
|
||
</button>
|
||
</nav>
|
||
</aside>
|
||
|
||
<!-- Основной контент -->
|
||
<main class="main-content">
|
||
<!-- Дашборд -->
|
||
<section id="dashboard" class="screen active">
|
||
<div class="screen-header">
|
||
<h2>Дашборд</h2>
|
||
</div>
|
||
|
||
<div class="kpi-grid">
|
||
<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-warehouse">0</div>
|
||
<div class="kpi-label">На складе</div>
|
||
</div>
|
||
<div class="kpi-card">
|
||
<div class="kpi-value" id="kpi-subscribers">0</div>
|
||
<div class="kpi-label">У абонентов</div>
|
||
</div>
|
||
<div class="kpi-card">
|
||
<div class="kpi-value" id="kpi-employees">0</div>
|
||
<div class="kpi-label">У сотрудников</div>
|
||
</div>
|
||
<div class="kpi-card">
|
||
<div class="kpi-value" id="kpi-search">0</div>
|
||
<div class="kpi-label">Поиск / ДЗ</div>
|
||
</div>
|
||
<div class="kpi-card">
|
||
<div class="kpi-value" id="kpi-written-off">0</div>
|
||
<div class="kpi-label">Списано</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="dashboard-grid">
|
||
<div class="chart-card">
|
||
<h3>Распределение по статусам</h3>
|
||
<div class="chart-container">
|
||
<canvas id="statusChart"></canvas>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>Оборудование у сотрудников</h3>
|
||
<div class="table-container">
|
||
<table class="data-table" id="employee-equipment-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Сотрудник</th>
|
||
<th>Кол-во</th>
|
||
<th>Оборудование</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>Лента последних операций</h3>
|
||
<div class="table-container">
|
||
<table class="data-table" id="recent-operations-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Дата</th>
|
||
<th>SN</th>
|
||
<th>Модель</th>
|
||
<th>Операция</th>
|
||
<th>Кому</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Операции -->
|
||
<section id="operations" class="screen">
|
||
<div class="screen-header">
|
||
<h2>Операции</h2>
|
||
</div>
|
||
|
||
<div class="operations-tabs">
|
||
<button class="tab-btn active" data-tab="income">Оприходование</button>
|
||
<button class="tab-btn" data-tab="issue">Выдача</button>
|
||
<button class="tab-btn" data-tab="install">Установка</button>
|
||
<button class="tab-btn" data-tab="return">Возврат / Списание</button>
|
||
</div>
|
||
|
||
<!-- Оприходование -->
|
||
<div class="tab-content active" id="tab-income">
|
||
<form class="operation-form" id="income-form">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>Дата</label>
|
||
<input type="date" id="income-date" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Серийный номер (SN)</label>
|
||
<input type="text" id="income-sn" placeholder="Например: SN123456" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>IMEI</label>
|
||
<input type="text" id="income-imei" placeholder="Например: 123456789012345">
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>Наименование модели</label>
|
||
<div class="input-with-btn">
|
||
<select id="income-model" required></select>
|
||
<button type="button" class="btn-secondary" id="add-model-btn">+ Модель</button>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Начальный статус</label>
|
||
<select id="income-status" required>
|
||
<option value="на складе">На складе</option>
|
||
<option value="поиск / дз">Поиск / ДЗ</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<button type="submit" class="btn-primary">Оприходовать</button>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- Выдача сотруднику -->
|
||
<div class="tab-content" id="tab-issue">
|
||
<form class="operation-form" id="issue-form">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>Поиск по SN</label>
|
||
<input type="text" id="issue-sn-search" placeholder="Введите SN для поиска">
|
||
</div>
|
||
</div>
|
||
<div class="equipment-preview" id="issue-preview" style="display:none;">
|
||
<div class="preview-card">
|
||
<strong id="issue-preview-sn"></strong>
|
||
<span id="issue-preview-model"></span>
|
||
<span class="badge" id="issue-preview-status"></span>
|
||
<span id="issue-preview-holder"></span>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>Сотрудник</label>
|
||
<select id="issue-employee" required></select>
|
||
</div>
|
||
</div>
|
||
<button type="submit" class="btn-primary">Выдать оборудование</button>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- Установка абоненту -->
|
||
<div class="tab-content" id="tab-install">
|
||
<form class="operation-form" id="install-form">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>Поиск по SN</label>
|
||
<input type="text" id="install-sn-search" placeholder="Введите SN для поиска">
|
||
</div>
|
||
</div>
|
||
<div class="equipment-preview" id="install-preview" style="display:none;">
|
||
<div class="preview-card">
|
||
<strong id="install-preview-sn"></strong>
|
||
<span id="install-preview-model"></span>
|
||
<span class="badge" id="install-preview-status"></span>
|
||
<span id="install-preview-holder"></span>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>
|
||
<input type="checkbox" id="install-has-model"> Наименование присутствует
|
||
</label>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>
|
||
<input type="checkbox" id="install-has-imei"> IMEI присутствует
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>Лицевой счет</label>
|
||
<input type="text" id="install-account" placeholder="Например: 123456">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Номер заказа</label>
|
||
<input type="text" id="install-order" placeholder="Например: Z12345">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Инициатор установки</label>
|
||
<input type="text" id="install-initiator" placeholder="ФИО или отдел">
|
||
</div>
|
||
</div>
|
||
<button type="submit" class="btn-primary">Установить оборудование</button>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- Возврат / Списание -->
|
||
<div class="tab-content" id="tab-return">
|
||
<form class="operation-form" id="return-form">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>Тип операции</label>
|
||
<select id="return-type" required>
|
||
<option value="снятие">Снятие (на склад)</option>
|
||
<option value="списание">Списание</option>
|
||
<option value="дз">ДЗ (требует внимания)</option>
|
||
<option value="вывести из склада">Вывести из склада (к поиску)</option>
|
||
<option value="перемещение с др складов">Перемещение с др. складов</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Поиск по SN</label>
|
||
<input type="text" id="return-sn-search" placeholder="Введите SN для поиска">
|
||
</div>
|
||
</div>
|
||
<div class="equipment-preview" id="return-preview" style="display:none;">
|
||
<div class="preview-card">
|
||
<strong id="return-preview-sn"></strong>
|
||
<span id="return-preview-model"></span>
|
||
<span class="badge" id="return-preview-status"></span>
|
||
<span id="return-preview-holder"></span>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>Комментарий</label>
|
||
<input type="text" id="return-comment" placeholder="Причина операции">
|
||
</div>
|
||
</div>
|
||
<button type="submit" class="btn-primary">Выполнить операцию</button>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Склад -->
|
||
<section id="warehouse" class="screen">
|
||
<div class="screen-header">
|
||
<h2>Склад оборудования</h2>
|
||
<button class="btn-secondary" id="export-warehouse-btn">📥 Экспорт CSV</button>
|
||
</div>
|
||
|
||
<div class="filters-row">
|
||
<input type="text" class="search-input" id="warehouse-search" placeholder="Поиск по SN, IMEI, Л/С, Заказу, ФИО...">
|
||
<select id="warehouse-status-filter">
|
||
<option value="">Все статусы</option>
|
||
</select>
|
||
<select id="warehouse-type-filter">
|
||
<option value="">Все типы</option>
|
||
</select>
|
||
<select id="warehouse-employee-filter">
|
||
<option value="">Все сотрудники</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="table-container">
|
||
<table class="data-table" id="warehouse-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Дата</th>
|
||
<th>SN</th>
|
||
<th>IMEI</th>
|
||
<th>Модель</th>
|
||
<th>Статус</th>
|
||
<th>Л/С</th>
|
||
<th>Заказ</th>
|
||
<th>Сотрудник</th>
|
||
<th>Действия</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Передвижения -->
|
||
<section id="movements" class="screen">
|
||
<div class="screen-header">
|
||
<h2>Архив перемещений</h2>
|
||
<button class="btn-secondary" id="export-movements-btn">📥 Экспорт CSV</button>
|
||
</div>
|
||
|
||
<div class="filters-row">
|
||
<input type="text" class="search-input" id="movements-search" placeholder="Поиск по SN, модели, сотруднику...">
|
||
<select id="movements-type-filter">
|
||
<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="table-container">
|
||
<table class="data-table" id="movements-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Дата</th>
|
||
<th>SN</th>
|
||
<th>Модель</th>
|
||
<th>Операция</th>
|
||
<th>Откуда</th>
|
||
<th>Кому</th>
|
||
<th>Л/С</th>
|
||
<th>Заказ</th>
|
||
<th>Комментарий</th>
|
||
<th>Статус</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Справочники -->
|
||
<section id="settings" class="screen">
|
||
<div class="screen-header">
|
||
<h2>Справочники и управление данными</h2>
|
||
</div>
|
||
|
||
<div class="settings-grid">
|
||
<!-- Сотрудники -->
|
||
<div class="card">
|
||
<h3>Сотрудники</h3>
|
||
<form class="inline-form" id="add-employee-form">
|
||
<input type="text" id="new-employee-name" placeholder="ФИО сотрудника" required>
|
||
<button type="submit" class="btn-primary">Добавить</button>
|
||
</form>
|
||
<div class="table-container" style="margin-top: 12px;">
|
||
<table class="data-table" id="employees-table">
|
||
<thead>
|
||
<tr>
|
||
<th>ФИО</th>
|
||
<th>Статус</th>
|
||
<th>Действия</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Наименования ТМЦ -->
|
||
<div class="card">
|
||
<h3>Наименования ТМЦ</h3>
|
||
<form class="inline-form" id="add-model-form">
|
||
<input type="text" id="new-model-name" placeholder="Наименование модели" required>
|
||
<button type="submit" class="btn-primary">Добавить</button>
|
||
</form>
|
||
<div class="table-container" style="margin-top: 12px;">
|
||
<table class="data-table" id="models-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Наименование</th>
|
||
<th>Кол-во в базе</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Статусы -->
|
||
<div class="card">
|
||
<h3>Статусы</h3>
|
||
<div class="status-legend" id="status-legend"></div>
|
||
</div>
|
||
|
||
<!-- Управление данными -->
|
||
<div class="card">
|
||
<h3>Резервные копии</h3>
|
||
<div class="backup-actions">
|
||
<button class="btn-primary" id="download-backup-btn">📥 Скачать JSON базу</button>
|
||
<label class="btn-secondary" style="cursor: pointer;">
|
||
📤 Восстановить из JSON
|
||
<input type="file" id="restore-backup-input" accept=".json" style="display: none;">
|
||
</label>
|
||
<button class="btn-danger" id="reset-demo-btn">⚠️ Сброс к демо-данным</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
|
||
<!-- Модальное окно истории -->
|
||
<div class="modal" id="history-modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3>История перемещений</h3>
|
||
<button class="modal-close" data-modal="history-modal">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="equipment-info" id="modal-equipment-info"></div>
|
||
<div class="timeline" id="modal-timeline"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Модальное окно добавления модели -->
|
||
<div class="modal" id="model-modal">
|
||
<div class="modal-content modal-sm">
|
||
<div class="modal-header">
|
||
<h3>Новая модель</h3>
|
||
<button class="modal-close" data-modal="model-modal">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="new-model-form">
|
||
<div class="form-group">
|
||
<label>Наименование модели</label>
|
||
<input type="text" id="quick-model-name" placeholder="Например: TP-Link Archer C6" required>
|
||
</div>
|
||
<button type="submit" class="btn-primary">Добавить модель</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|