81 lines
4.2 KiB
HTML
81 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Корпоративный университет — Дашборд</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<h1>Корпоративный университет</h1>
|
||
<p>Управленческий дашборд развития персонала</p>
|
||
</header>
|
||
|
||
<main>
|
||
<section class="upload-section" id="uploadSection">
|
||
<div class="upload-box">
|
||
<div class="upload-icon">📊</div>
|
||
<h2>Загрузите Excel-файл</h2>
|
||
<p>Столбцы файла: ФИО, Дивизион, Тема курса, Статус, Оценка, Тренер</p>
|
||
<input type="file" id="excelFile" accept=".xlsx,.xls,.csv" hidden>
|
||
<button id="uploadBtn">Выбрать файл</button>
|
||
<p class="hint" id="statusMsg"></p>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="dashboard" class="dashboard hidden">
|
||
<div class="stats-row">
|
||
<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="statDone">0</div><div class="stat-label">Прошли обучение</div></div>
|
||
<div class="stat-card"><div class="stat-value" id="statRate">0%</div><div class="stat-label">% прохождения</div></div>
|
||
<div class="stat-card"><div class="stat-value" id="statAvg">—</div><div class="stat-label">Средняя оценка</div></div>
|
||
</div>
|
||
|
||
<div class="chart-card wide">
|
||
<h3>Тренинги — сколько человек прошли</h3>
|
||
<canvas id="chartTrainings"></canvas>
|
||
</div>
|
||
|
||
<div class="charts-row">
|
||
<div class="chart-card"><h3>Тренинги по дивизионам</h3><canvas id="chartTrainDiv"></canvas></div>
|
||
<div class="chart-card"><h3>Дивизионы — кто прошёл</h3><canvas id="chartDiv"></canvas></div>
|
||
</div>
|
||
|
||
<div class="charts-row">
|
||
<div class="chart-card"><h3>Нагрузка тренеров</h3><canvas id="chartTrainers"></canvas></div>
|
||
<div class="chart-card"><h3>Оценки</h3><canvas id="chartScores"></canvas></div>
|
||
</div>
|
||
|
||
<div class="chart-card wide">
|
||
<h3>Средняя оценка по тренингам</h3>
|
||
<canvas id="chartTrainScores"></canvas>
|
||
</div>
|
||
|
||
<div class="table-card wide">
|
||
<h3>📋 Детализация по тренингам</h3>
|
||
<table id="tblTrainings"><thead><tr>
|
||
<th>Тренинг</th><th>Прошли</th><th>Не прошли</th><th>%</th><th>Оценка</th><th>Тренер</th>
|
||
</tr></thead><tbody></tbody></table>
|
||
</div>
|
||
|
||
<div class="charts-row">
|
||
<div class="table-card"><h3>🏆 Чемпионы</h3><table id="tblChamp"><thead><tr><th>ФИО</th><th>Дивизион</th><th>Курсов</th></tr></thead><tbody></tbody></table></div>
|
||
<div class="table-card"><h3>⚠️ Без обучения</h3><table id="tblNoTrain"><thead><tr><th>ФИО</th><th>Дивизион</th></tr></thead><tbody></tbody></table></div>
|
||
</div>
|
||
|
||
<div class="table-card wide">
|
||
<h3>Все записи</h3>
|
||
<table id="tblAll"><thead><tr>
|
||
<th>ФИО</th><th>Дивизион</th><th>Тема курса</th><th>Статус</th><th>Оценка</th><th>Тренер</th>
|
||
</tr></thead><tbody></tbody></table>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|