159 lines
6.4 KiB
HTML
159 lines
6.4 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">
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body class="kt-ai-app">
|
||
|
||
<header class="kt-ai-pagehead">
|
||
<div class="kt-ai-wrap kt-ai-pagehead-in">
|
||
<img src="https://code.vibe42.kz/tore/aitu/kt-logo.svg" alt="Казахтелеком" height="28">
|
||
<strong>Дашборд эффективности</strong>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span class="kt-ai-chip" data-tone="blue" id="period-chip">период: 30 дней</span>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="dash-wrap">
|
||
|
||
<div class="dash-title-row">
|
||
<div class="dash-title">
|
||
<h1>Эффективность <span class="vibe-highlight">отдела</span></h1>
|
||
<span class="kt-ai-meta" id="dash-meta"></span>
|
||
</div>
|
||
<div class="dash-actions">
|
||
<div class="kt-ai-segmented" id="period-tabs" role="tablist">
|
||
<button class="seg" data-period="7d" type="button">7 дней</button>
|
||
<button class="seg" data-period="30d" data-active="true" type="button">30 дней</button>
|
||
<button class="seg" data-period="quarter" type="button">Квартал</button>
|
||
</div>
|
||
<button class="kt-ai-btn" id="btn-refresh" type="button">
|
||
<svg class="kt-icon" aria-hidden="true"><use href="#refresh"></use></svg>
|
||
Обновить
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="kpi-strip" id="kpi-strip" role="list"></div>
|
||
|
||
<div class="kt-ai-chart-card">
|
||
<div class="cc-head">
|
||
<div>
|
||
<div class="cc-title">Динамика производительности</div>
|
||
<div class="kt-ai-meta" id="trend-note"></div>
|
||
</div>
|
||
<div class="cc-total"><span class="num" id="trend-value">0</span><span class="unit">баллов</span></div>
|
||
</div>
|
||
<div class="line-chart-wrap">
|
||
<svg class="kt-line" viewBox="0 0 720 208" preserveAspectRatio="none" aria-hidden="true">
|
||
<g class="grid" id="line-grid"></g>
|
||
<polygon class="area" id="line-area"></polygon>
|
||
<path class="line" id="line-path" fill="none"></path>
|
||
<g id="line-points"></g>
|
||
</svg>
|
||
<div class="kt-ai-chart-tip" id="line-tip" hidden>
|
||
<div class="tip-title" id="line-tip-title"></div>
|
||
<dl class="tip-rows"><dt>Показатель</dt><dd id="line-tip-value"></dd></dl>
|
||
</div>
|
||
</div>
|
||
<div class="cc-axis" id="line-axis"></div>
|
||
</div>
|
||
|
||
<div class="charts-grid">
|
||
<div class="kt-ai-chart-card">
|
||
<div class="cc-head">
|
||
<div class="cc-title">Показатели по направлениям</div>
|
||
<div class="kt-ai-meta" id="service-note"></div>
|
||
</div>
|
||
<div class="cc-bars" id="service-bars"></div>
|
||
<div class="cc-axis"></div>
|
||
</div>
|
||
|
||
<div class="kt-ai-chart-card">
|
||
<div class="cc-head">
|
||
<div class="cc-title">Топ сотрудников</div>
|
||
<div class="kt-ai-meta">по показателю</div>
|
||
</div>
|
||
<div id="top-list"></div>
|
||
<div class="cc-axis"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="block-title">
|
||
<span class="kt-ai-label">Сводная таблица</span>
|
||
<span class="kt-ai-chip" id="count-chip"></span>
|
||
</div>
|
||
|
||
<div class="dash-toolbar">
|
||
<input class="kt-ai-input" id="search" type="search" placeholder="Поиск по сотруднику…" autocomplete="off">
|
||
<div class="kt-ai-select-wrap" style="min-width:180px">
|
||
<select class="kt-ai-select" id="filter-dept">
|
||
<option value="all">Все направления</option>
|
||
</select>
|
||
</div>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span class="kt-ai-meta" id="filter-hint"></span>
|
||
</div>
|
||
|
||
<div class="kt-ai-table-wrap">
|
||
<table class="kt-ai-table" id="summary-table">
|
||
<thead>
|
||
<tr>
|
||
<th scope="col">Сотрудник</th>
|
||
<th scope="col">Направление</th>
|
||
<th scope="col" id="th-metric">
|
||
<button class="th-sort" id="th-sort-metric" type="button" aria-sort="descending">
|
||
<span id="th-metric-name">Показатель</span>
|
||
<svg class="kt-icon th-sort-ic" data-dir="desc" aria-hidden="true"><use href="#chevronDown"></use></svg>
|
||
</button>
|
||
</th>
|
||
<th scope="col" id="th-time">
|
||
<button class="th-sort" id="th-sort-time" type="button" aria-sort="descending">
|
||
Время на задачу
|
||
<svg class="kt-icon th-sort-ic" data-dir="desc" aria-hidden="true"><use href="#chevronDown"></use></svg>
|
||
</button>
|
||
</th>
|
||
<th scope="col">Исполнение плана</th>
|
||
<th scope="col">Статус</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="table-body"></tbody>
|
||
</table>
|
||
<div class="kt-ai-empty" id="empty" hidden>
|
||
<div class="icon-spot"><svg class="kt-icon kt-icon-lg" aria-hidden="true"><use href="#search"></use></svg></div>
|
||
<p class="title">Нечего показывать</p>
|
||
<p>Попробуйте изменить запрос или сбросить фильтры.</p>
|
||
<button class="kt-ai-btn" data-size="sm" id="btn-empty-reset" type="button">Очистить фильтры</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="kt-ai-conclusion" id="conclusion" hidden>
|
||
<span class="title">Итог периода</span>
|
||
<span class="text" id="conclusion-text"></span>
|
||
</div>
|
||
|
||
<div class="dash-footer">
|
||
<span>Показатели рассчитываются по закрытым задачам отдела</span>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span id="footer-updated" class="kt-ai-meta"></span>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="kt-ai-toast-stack" aria-live="polite"></div>
|
||
|
||
<script src="design-system/icons/kt-ai-icons.js"></script>
|
||
<script src="script.js"></script>
|
||
<script src="design-system/kt-ai-chart-tip.js"></script>
|
||
</body>
|
||
</html>
|