169 lines
6.8 KiB
HTML
169 lines
6.8 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">
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||
<script src="https://cdn.sheetjs.com/xlsx-0.20.0/package/dist/xlsx.full.min.js"></script>
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<div class="header-content">
|
||
<h1>Корпоративный университет</h1>
|
||
<p>Управленческий дашборд развития персонала</p>
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
<section class="upload-section">
|
||
<div class="upload-box">
|
||
<div class="upload-icon">📊</div>
|
||
<h2>Загрузите данные</h2>
|
||
<p>Перетащите Excel-файл или нажмите для выбора</p>
|
||
<input type="file" id="excelFile" accept=".xlsx,.xls,.csv" hidden>
|
||
<button onclick="document.getElementById('excelFile').click()">Выбрать файл</button>
|
||
<p class="hint">Формат: столбцы — ФИО, Дивизион, Курс, Статус, Оценка, Тренер</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="debug" class="debug-section hidden">
|
||
<div class="debug-box">
|
||
<h3>Распознанные столбцы:</h3>
|
||
<p id="debugColumns"></p>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="dashboard" class="dashboard hidden">
|
||
<div class="stats-row">
|
||
<div class="stat-card">
|
||
<div class="stat-value" id="totalEmployees">0</div>
|
||
<div class="stat-label">Сотрудников</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-value" id="completedCount">0</div>
|
||
<div class="stat-label">Прошли обучение</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-value" id="completionRate">0%</div>
|
||
<div class="stat-label">Процент прохождения</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-value" id="avgScore">0</div>
|
||
<div class="stat-label">Средняя оценка</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="charts-row">
|
||
<div class="chart-card wide">
|
||
<h3>Тренинги — количество прошедших</h3>
|
||
<canvas id="trainingChart"></canvas>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="charts-row">
|
||
<div class="chart-card">
|
||
<h3>Тренинги по дивизионам</h3>
|
||
<canvas id="trainingByDivisionChart"></canvas>
|
||
</div>
|
||
<div class="chart-card">
|
||
<h3>Прохождение по дивизионам</h3>
|
||
<canvas id="divisionChart"></canvas>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="charts-row">
|
||
<div class="chart-card">
|
||
<h3>Нагрузка тренеров</h3>
|
||
<canvas id="trainerChart"></canvas>
|
||
</div>
|
||
<div class="chart-card">
|
||
<h3>Распределение оценок</h3>
|
||
<canvas id="scoreChart"></canvas>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="charts-row">
|
||
<div class="chart-card">
|
||
<h3>Средняя оценка по тренингам</h3>
|
||
<canvas id="trainingScoreChart"></canvas>
|
||
</div>
|
||
<div class="chart-card">
|
||
<h3>Статусы обучения</h3>
|
||
<canvas id="statusChart"></canvas>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="table-card full-width">
|
||
<h3>📋 Кто какие тренинги прошёл</h3>
|
||
<div class="table-wrapper">
|
||
<table id="trainingDetailTable">
|
||
<thead>
|
||
<tr>
|
||
<th>Тренинг</th>
|
||
<th>Прошли</th>
|
||
<th>Не прошли</th>
|
||
<th>% прохождения</th>
|
||
<th>Средняя оценка</th>
|
||
<th>Тренер</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tables-row">
|
||
<div class="table-card">
|
||
<h3>🏆 Чемпионы по обучению</h3>
|
||
<table id="championsTable">
|
||
<thead>
|
||
<tr>
|
||
<th>ФИО</th>
|
||
<th>Дивизион</th>
|
||
<th>Курсов пройдено</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
</div>
|
||
<div class="table-card">
|
||
<h3>⚠️ Без обучения</h3>
|
||
<table id="noTrainingTable">
|
||
<thead>
|
||
<tr>
|
||
<th>ФИО</th>
|
||
<th>Дивизион</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="table-card full-width">
|
||
<h3>Детализация по сотрудникам</h3>
|
||
<div class="table-wrapper">
|
||
<table id="detailTable">
|
||
<thead>
|
||
<tr>
|
||
<th>ФИО</th>
|
||
<th>Дивизион</th>
|
||
<th>Курс</th>
|
||
<th>Статус</th>
|
||
<th>Оценка</th>
|
||
<th>Тренер</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|