167 lines
8.1 KiB
HTML
167 lines
8.1 KiB
HTML
<!doctype html>
|
||
<html lang="ru" data-theme="light">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Статистика приказов 2025-2026</title>
|
||
<script src="https://cdn.jsdelivr.net/npm/pptxgenjs@3.12.0/dist/pptxgen.bundle.js"></script>
|
||
<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">
|
||
<style>
|
||
* { margin: 0; box-sizing: border-box; }
|
||
body { font-family: var(--kt-ai-font-sans); background: var(--kt-ai-bg); color: var(--kt-ai-fg); }
|
||
.slide { display: none; min-height: 100vh; padding: 8vh 10vw; flex-direction: column; justify-content: center; }
|
||
.slide.on { display: flex; }
|
||
.slide h1 { font-size: clamp(34px, 6vw, 64px); margin-bottom: 24px; color: var(--kt-ai-fg); }
|
||
.slide h2 { font-size: clamp(28px, 5vw, 48px); margin-bottom: 20px; color: var(--kt-ai-fg); }
|
||
.slide li { font-size: clamp(18px, 2.6vw, 28px); line-height: 1.6; margin-bottom: 10px; list-style: none; padding-left: 28px; position: relative; color: var(--kt-ai-fg); }
|
||
.slide li::before { content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 12px; border-radius: 3px; background: var(--kt-ai-primary); }
|
||
.num { position: fixed; bottom: 18px; right: 22px; color: var(--kt-ai-fg-muted); font-size: 14px; }
|
||
.nav { position: fixed; bottom: 14px; left: 22px; display: flex; gap: 8px; }
|
||
.nav button { border: 1px solid var(--kt-ai-border); background: var(--kt-ai-bg-soft); color: var(--kt-ai-fg); border-radius: 8px; padding: 8px 14px; cursor: pointer; font-size: 14px; }
|
||
.nav .pptx { border-color: var(--kt-ai-primary); color: var(--kt-ai-link); }
|
||
.chart-wrap { background: var(--kt-ai-card-bg); border: 1px solid var(--kt-ai-card-border); border-radius: var(--kt-ai-radius-3xl); padding: 40px; margin: 40px auto; max-width: 900px; width: 100%; }
|
||
.chart { display: flex; align-items: flex-end; justify-content: center; gap: 60px; height: 320px; padding: 20px; }
|
||
.bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 140px; }
|
||
.bar-fill { width: 100%; border-radius: var(--kt-ai-radius-xl) var(--kt-ai-radius-xl) 0 0; display: flex; align-items: center; justify-content: center; font-weight: var(--kt-ai-weight-semibold); font-size: 20px; color: #fff; transition: height 0.8s ease; }
|
||
.bar-fill.year-2025 { background: linear-gradient(135deg, #00b8cc 0%, #0099aa 100%); }
|
||
.bar-fill.year-2026 { background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%); }
|
||
.bar-label { margin-top: 16px; font-size: 18px; font-weight: var(--kt-ai-weight-medium); color: var(--kt-ai-fg); text-align: center; }
|
||
.bar-value { margin-bottom: 12px; font-size: 24px; font-weight: var(--kt-ai-weight-bold); color: var(--kt-ai-fg); }
|
||
.summary { text-align: center; margin-top: 30px; font-size: 20px; color: var(--kt-ai-fg-muted); }
|
||
.summary strong { color: var(--kt-ai-primary); }
|
||
@media print {
|
||
.nav, .num { display: none; }
|
||
.slide { display: flex; page-break-after: always; min-height: 100vh; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="deck"></div>
|
||
<div class="nav">
|
||
<button onclick="go(-1)">Назад</button>
|
||
<button onclick="go(1)">Вперёд</button>
|
||
<button class="pptx" onclick="downloadPptx()">Скачать .pptx</button>
|
||
</div>
|
||
<div class="num" id="num"></div>
|
||
<script>
|
||
var SLIDES = [
|
||
{
|
||
title: "Статистика приказов",
|
||
subtitle: "Сравнение 8 месяцев 2025 и 2026 годов",
|
||
type: "title"
|
||
},
|
||
{
|
||
title: "Динамика приказов",
|
||
content: "chart",
|
||
chart: {
|
||
data: [
|
||
{ year: "2025", value: 2895, label: "8 месяцев" },
|
||
{ year: "2026", value: 2901, label: "8 месяцев" }
|
||
]
|
||
}
|
||
},
|
||
{
|
||
title: "Ключевые показатели",
|
||
bullets: [
|
||
"За 8 месяцев 2025 года издано 2895 приказов",
|
||
"За 8 месяцев 2026 года издано 2901 приказ",
|
||
"Рост составил 6 приказов (+0.2%)",
|
||
"Показатели стабильны"
|
||
]
|
||
},
|
||
{
|
||
title: "Выводы",
|
||
bullets: [
|
||
"Объём документооборота сохранился на уровне прошлого года",
|
||
"Незначительный рост в пределах статистической погрешности",
|
||
"Требуется анализ по категориям приказов для детализации"
|
||
]
|
||
}
|
||
];
|
||
|
||
var cur = 0;
|
||
|
||
function render() {
|
||
var deck = document.getElementById("deck");
|
||
deck.innerHTML = SLIDES.map(function (s, i) {
|
||
if (s.type === "title") {
|
||
return '<section class="slide' + (i === cur ? " on" : "") + '" style="text-align:center;align-items:center;">' +
|
||
'<h1>' + s.title + '</h1>' +
|
||
'<p style="font-size:24px;color:var(--kt-ai-fg-muted);margin-top:20px;">' + (s.subtitle || '') + '</p>' +
|
||
'</section>';
|
||
} else if (s.content === "chart") {
|
||
var maxVal = Math.max.apply(null, s.chart.data.map(function(d) { return d.value; }));
|
||
var bars = s.chart.data.map(function(d) {
|
||
var height = (d.value / maxVal) * 240;
|
||
return '<div class="bar">' +
|
||
'<div class="bar-value">' + d.value + '</div>' +
|
||
'<div class="bar-fill year-' + d.year + '" style="height:' + height + 'px;"></div>' +
|
||
'<div class="bar-label">' + d.year + ' год<br><span style="color:var(--kt-ai-fg-muted);font-size:16px;">' + d.label + '</span></div>' +
|
||
'</div>';
|
||
}).join("");
|
||
return '<section class="slide' + (i === cur ? " on" : "") + '">' +
|
||
'<h2>' + s.title + '</h2>' +
|
||
'<div class="chart-wrap"><div class="chart">' + bars + '</div></div>' +
|
||
'<div class="summary">Приказов издано: <strong>' + s.chart.data[0].value + '</strong> → <strong>' + s.chart.data[1].value + '</strong></div>' +
|
||
'</section>';
|
||
} else {
|
||
return '<section class="slide' + (i === cur ? " on" : "") + '"><h1>' + s.title + '</h1><ul>' +
|
||
s.bullets.map(function (b) { return "<li>" + b + "</li>"; }).join("") + "</ul></section>";
|
||
}
|
||
}).join("");
|
||
document.getElementById("num").textContent = (cur + 1) + " / " + SLIDES.length;
|
||
}
|
||
|
||
function go(d) { cur = Math.min(SLIDES.length - 1, Math.max(0, cur + d)); render(); }
|
||
|
||
document.addEventListener("keydown", function (e) {
|
||
if (e.key === "ArrowRight" || e.key === " ") go(1);
|
||
if (e.key === "ArrowLeft") go(-1);
|
||
});
|
||
|
||
function downloadPptx() {
|
||
var p = new PptxGenJS();
|
||
p.defineLayout({ name: "W", width: 13.33, height: 7.5 });
|
||
p.layout = "W";
|
||
|
||
SLIDES.forEach(function (s) {
|
||
var sl = p.addSlide();
|
||
sl.background = { color: "F4F4F5" };
|
||
|
||
if (s.type === "title") {
|
||
sl.addText(s.title, { x: 0.7, y: 2.5, w: 12, h: 1.5, fontSize: 44, bold: true, color: "0F1218", align: "center" });
|
||
sl.addText(s.subtitle || "", { x: 0.7, y: 4.2, w: 12, h: 0.8, fontSize: 24, color: "52525B", align: "center" });
|
||
} else if (s.content === "chart") {
|
||
sl.addText(s.title, { x: 0.7, y: 0.5, w: 12, h: 1, fontSize: 36, bold: true, color: "0F1218" });
|
||
var chartData = s.chart.data.map(function(d) {
|
||
return { name: d.year + ' год', value: d.value, category: d.year };
|
||
});
|
||
sl.addChart(pptxgenjs.ChartType.COLUMN, chartData, {
|
||
x: 1.0, y: 2.0, w: 11.0, h: 4.5,
|
||
title: "Количество приказов",
|
||
showLegend: false,
|
||
colors: ["00B8CC", "7C3AED"],
|
||
barGap: 50,
|
||
labelColor: "52525B",
|
||
axisLineColor: "D4D4D8",
|
||
showValue: true,
|
||
valueColor: "0F1218",
|
||
fontSize: 18
|
||
});
|
||
} else {
|
||
sl.addText(s.title, { x: 0.7, y: 0.5, w: 12, h: 1, fontSize: 36, bold: true, color: "0F1218" });
|
||
sl.addText(s.bullets.map(function (b) { return { text: b, options: { bullet: true, breakLine: true } }; }),
|
||
{ x: 0.9, y: 2.0, w: 11.5, h: 4.8, fontSize: 20, color: "27272A", lineSpacingMultiple: 1.6 });
|
||
}
|
||
});
|
||
p.writeFile({ fileName: "Statistika_prikazov_2025-2026.pptx" });
|
||
}
|
||
|
||
render();
|
||
</script>
|
||
</body>
|
||
</html>
|