152 lines
8.1 KiB
HTML
152 lines
8.1 KiB
HTML
<!DOCTYPE html>
|
||
<!-- Дизайн: Стандартный дизайн. Сохраняй все пять CSS; подробности в design.md. -->
|
||
<html lang="ru" data-theme="light">
|
||
<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="design-system/vibe-theme.css">
|
||
<style>
|
||
a.kt-ai-btn { text-decoration: none; }
|
||
.zt-kpi-strip { gap: var(--kt-ai-space-6); border-bottom: 1px solid var(--kt-ai-divider); }
|
||
@media (min-width: 1100px) { .zt-kpi-strip { gap: var(--kt-ai-space-10); } }
|
||
.zt-search { width: 230px; max-width: 100%; }
|
||
@media (max-width: 480px) { .zt-search { width: 100%; } }
|
||
.zt-table-toolbar { justify-content: space-between; }
|
||
.zt-table-toolbar .count { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); }
|
||
.zt-drawer-head { display: flex; align-items: flex-start; gap: var(--kt-ai-space-4); margin-bottom: var(--kt-ai-space-2); }
|
||
.zt-drawer-head .x { margin-left: auto; }
|
||
.zt-drawer-sub { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); margin-bottom: var(--kt-ai-space-6); }
|
||
.zt-meta { border-top: 1px solid var(--kt-ai-divider); margin-top: var(--kt-ai-space-6); padding-top: var(--kt-ai-space-4); display: flex; flex-direction: column; gap: var(--kt-ai-space-3); }
|
||
.zt-meta-row { display: flex; justify-content: space-between; gap: var(--kt-ai-space-4); font-size: var(--kt-ai-text-xs); }
|
||
.zt-meta-row .k { color: var(--kt-ai-fg-muted); flex-shrink: 0; }
|
||
.zt-meta-row .v { text-align: right; }
|
||
.zt-note { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); margin-top: 2px; }
|
||
</style>
|
||
</head>
|
||
<body class="kt-ai-app">
|
||
<div class="kt-ai-shell">
|
||
<aside class="kt-ai-sidebar">
|
||
<div class="kt-ai-brand-row">
|
||
<svg class="kt-icon" aria-hidden="true"><use href="#tool"></use></svg>
|
||
<span>Журнал ремонтов</span>
|
||
</div>
|
||
<nav>
|
||
<div class="kt-ai-nav-group">
|
||
<a class="kt-ai-nav-item is-active" href="#"><svg class="kt-icon" aria-hidden="true"><use href="#table"></use></svg><span>Заявки</span></a>
|
||
</div>
|
||
</nav>
|
||
</aside>
|
||
<main class="kt-ai-main">
|
||
<header class="kt-ai-topbar">
|
||
<img src="https://code.vibe42.kz/tore/aitu/kt-logo.svg" alt="Казахтелеком" height="28">
|
||
<span class="spacer"></span>
|
||
<button class="kt-ai-btn" data-variant="primary" id="btn-new"><svg class="kt-icon" aria-hidden="true"><use href="#plus"></use></svg>Новая заявка</button>
|
||
</header>
|
||
<div class="kt-ai-work-column-table">
|
||
<div class="kt-ai-kpi-strip zt-kpi-strip">
|
||
<div class="kt-ai-kpi"><span class="label">Всего заявок</span><span class="value" id="kpi-all">—</span></div>
|
||
<div class="kt-ai-kpi"><span class="label">В работе</span><span class="value" id="kpi-work">—</span></div>
|
||
<div class="kt-ai-kpi"><span class="label">Ожидают</span><span class="value" id="kpi-wait">—</span></div>
|
||
<div class="kt-ai-kpi"><span class="label">Выполнено</span><span class="value" id="kpi-done">—</span></div>
|
||
</div>
|
||
<div class="kt-ai-table-toolbar zt-table-toolbar" style="margin-top:var(--kt-ai-space-6)">
|
||
<span class="count" id="row-count"></span>
|
||
<input type="search" class="kt-ai-input zt-search" id="search" placeholder="Поиск по журналу…" autocomplete="off">
|
||
<button type="button" class="kt-ai-btn" id="btn-export"><svg class="kt-icon" aria-hidden="true"><use href="#download"></use></svg>Экспорт в Excel</button>
|
||
</div>
|
||
<div class="kt-ai-filterbar" id="filterbar" style="margin-top:var(--kt-ai-space-4)"></div>
|
||
<div class="kt-ai-table-wrap" style="margin-top:var(--kt-ai-space-2)" data-framed="true">
|
||
<table class="kt-ai-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Заявка</th>
|
||
<th class="kt-ai-table-col-big">Оборудование</th>
|
||
<th>Расположение</th>
|
||
<th>Создана</th>
|
||
<th>Статус</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="rows"></tbody>
|
||
</table>
|
||
<div class="kt-ai-empty" id="empty" hidden>
|
||
<svg class="kt-icon" aria-hidden="true"><use href="#search"></use></svg>
|
||
<div class="title">Ничего не найдено</div>
|
||
<div>Измените фильтр по статусу или поисковый запрос</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<aside class="kt-ai-drawer" id="drawer" hidden>
|
||
<div class="zt-drawer-head">
|
||
<div>
|
||
<div class="kt-ai-h2" id="drawer-title"></div>
|
||
<div class="zt-drawer-sub" id="drawer-sub"></div>
|
||
</div>
|
||
<button class="kt-ai-btn x" id="drawer-close" aria-label="Закрыть"><svg class="kt-icon" aria-hidden="true"><use href="#x"></use></svg></button>
|
||
</div>
|
||
<form id="form" hidden>
|
||
<div class="kt-ai-field">
|
||
<label for="f-equip">Оборудование</label>
|
||
<input class="kt-ai-input" id="f-equip" name="equip" required>
|
||
</div>
|
||
<div class="kt-ai-field" style="margin-top:var(--kt-ai-space-4)">
|
||
<label for="f-loc">Расположение</label>
|
||
<input class="kt-ai-input" id="f-loc" name="loc" required>
|
||
</div>
|
||
<div class="kt-ai-field" style="margin-top:var(--kt-ai-space-4)">
|
||
<label for="f-desc">Описание проблемы</label>
|
||
<textarea class="kt-ai-textarea" id="f-desc" name="desc" rows="3" required></textarea>
|
||
</div>
|
||
<div class="kt-ai-field" style="margin-top:var(--kt-ai-space-4)">
|
||
<label for="f-status">Статус</label>
|
||
<select class="kt-ai-input" id="f-status" name="status">
|
||
<option value="new">Новая</option>
|
||
<option value="work">В работе</option>
|
||
<option value="wait">Ожидает запчасти</option>
|
||
<option value="done">Выполнено</option>
|
||
<option value="cancel">Отменена</option>
|
||
</select>
|
||
</div>
|
||
<div class="kt-ai-drawer-actions" style="margin-top:var(--kt-ai-space-8)">
|
||
<button type="submit" class="kt-ai-btn" data-variant="primary">Сохранить</button>
|
||
<button type="button" class="kt-ai-btn" id="btn-cancel">Отмена</button>
|
||
</div>
|
||
</form>
|
||
<div id="detail" hidden>
|
||
<div class="zt-note" id="d-desc" style="font-size:var(--kt-ai-text-sm); color:var(--kt-ai-fg); margin-bottom:var(--kt-ai-space-4)"></div>
|
||
<div class="zt-meta">
|
||
<div class="zt-meta-row"><span class="k">Оборудование</span><span class="v" id="d-equip"></span></div>
|
||
<div class="zt-meta-row"><span class="k">Расположение</span><span class="v" id="d-loc"></span></div>
|
||
<div class="zt-meta-row"><span class="k">Создана</span><span class="v" id="d-date"></span></div>
|
||
<div class="zt-meta-row"><span class="k">Изменена</span><span class="v" id="d-upd"></span></div>
|
||
</div>
|
||
<div class="kt-ai-field" style="margin-top:var(--kt-ai-space-6)">
|
||
<label for="d-status">Изменить статус</label>
|
||
<select class="kt-ai-input" id="d-status">
|
||
<option value="new">Новая</option>
|
||
<option value="work">В работе</option>
|
||
<option value="wait">Ожидает запчасти</option>
|
||
<option value="done">Выполнено</option>
|
||
<option value="cancel">Отменена</option>
|
||
</select>
|
||
</div>
|
||
<div class="kt-ai-drawer-actions" style="margin-top:var(--kt-ai-space-8)">
|
||
<button type="button" class="kt-ai-btn" data-variant="primary" id="btn-apply">Применить</button>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
<div class="kt-ai-toast-stack" id="toasts"></div>
|
||
|
||
<script src="https://cdn.sheetjs.com/xlsx-0.20.2/package/dist/xlsx.full.min.js"></script>
|
||
<script src="design-system/icons/kt-ai-icons.js"></script>
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|