Bekzat/v-slayd-po-prikazam-dobavit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Добавлен слайд с диаграммой приказов за 8 месяцев 2025-2026

Browse Source
This commit is contained in:
Bekzat 2026-09-17 06:53:01 +00:00
parent f233cce78e
commit 88ebbd4c66
3 changed files with 104 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
Otset_OCO_US_2025-2026 со светлым фоном _ 17 09 2026-1.pptx Normal file
View File

Binary file not shown.

BIN
Otset_OCO_US_2025-2026_updated.pptx Normal file
View File

Binary file not shown.

161
index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Статистика приказов 2025-2026</title> <title>Аналитический обзор деятельности ОЦО ЮС · 2025–2026</title>
<script src="https://cdn.jsdelivr.net/npm/pptxgenjs@3.12.0/dist/pptxgen.bundle.js"></script> <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-fonts.css">
<link rel="stylesheet" href="design-system/kt-ai-tokens.css"> <link rel="stylesheet" href="design-system/kt-ai-tokens.css">
@ -11,27 +11,34 @@
<link rel="stylesheet" href="design-system/kt-ai-page.css"> <link rel="stylesheet" href="design-system/kt-ai-page.css">
<style> <style>
* { margin: 0; box-sizing: border-box; } * { margin: 0; box-sizing: border-box; }
body { font-family: var(--kt-ai-font-sans); background: var(--kt-ai-bg); color: var(--kt-ai-fg); } body { font-family: var(--kt-ai-font-sans); background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); color: #1e293b; }
.slide { display: none; min-height: 100vh; padding: 8vh 10vw; flex-direction: column; justify-content: center; } .slide { display: none; min-height: 100vh; padding: 6vh 8vw; flex-direction: column; justify-content: center; position: relative; }
.slide.on { display: flex; } .slide.on { display: flex; }
.slide h1 { font-size: clamp(34px, 6vw, 64px); margin-bottom: 24px; color: var(--kt-ai-fg); } .slide h1 { font-size: clamp(32px, 5vw, 56px); margin-bottom: 20px; color: #0f172a; }
.slide h2 { font-size: clamp(28px, 5vw, 48px); margin-bottom: 20px; color: var(--kt-ai-fg); } .slide h2 { font-size: clamp(26px, 4vw, 42px); margin-bottom: 18px; color: #0f172a; }
.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 { font-size: clamp(16px, 2.4vw, 24px); line-height: 1.7; margin-bottom: 12px; list-style: none; padding-left: 24px; position: relative; color: #334155; }
.slide li::before { content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 12px; border-radius: 3px; background: var(--kt-ai-primary); } .slide li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 10px; border-radius: 2px; background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); }
.num { position: fixed; bottom: 18px; right: 22px; color: var(--kt-ai-fg-muted); font-size: 14px; } .num { position: fixed; bottom: 18px; right: 22px; color: #64748b; font-size: 14px; }
.nav { position: fixed; bottom: 14px; left: 22px; display: flex; gap: 8px; } .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 button { border: 1px solid #cbd5e1; background: #fff; color: #334155; border-radius: 8px; padding: 8px 14px; cursor: pointer; font-size: 14px; }
.nav .pptx { border-color: var(--kt-ai-primary); color: var(--kt-ai-link); } .nav .pptx { border-color: #0ea5e9; color: #0284c7; background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%); }
.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%; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin: 30px 0; }
.chart { display: flex; align-items: flex-end; justify-content: center; gap: 60px; height: 320px; padding: 20px; } .stat-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 24px; text-align: center; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
.bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 140px; } .stat-number { font-size: clamp(42px, 8vw, 72px); font-weight: bold; background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 8px; }
.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; } .stat-label { font-size: 16px; color: #64748b; line-height: 1.5; }
.bar-fill.year-2025 { background: linear-gradient(135deg, #00b8cc 0%, #0099aa 100%); } .chart-wrap { background: #fff; border: 1px solid #e2e8f0; border-radius: 20px; padding: 40px; margin: 30px auto; max-width: 800px; width: 100%; box-shadow: 0 8px 16px rgba(0,0,0,0.08); }
.bar-fill.year-2026 { background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%); } .chart { display: flex; align-items: flex-end; justify-content: center; gap: 50px; height: 300px; padding: 20px; }
.bar-label { margin-top: 16px; font-size: 18px; font-weight: var(--kt-ai-weight-medium); color: var(--kt-ai-fg); text-align: center; } .bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 130px; }
.bar-value { margin-bottom: 12px; font-size: 24px; font-weight: var(--kt-ai-weight-bold); color: var(--kt-ai-fg); } .bar-fill { width: 100%; border-radius: 12px 12px 0 0; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 18px; color: #fff; transition: height 0.8s ease; position: relative; }
.summary { text-align: center; margin-top: 30px; font-size: 20px; color: var(--kt-ai-fg-muted); } .bar-fill.year-2025 { background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); }
.summary strong { color: var(--kt-ai-primary); } .bar-fill.year-2026 { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); }
.bar-value { position: absolute; top: -30px; font-size: 22px; font-weight: bold; color: #0f172a; }
.bar-label { margin-top: 14px; font-size: 16px; font-weight: 600; color: #334155; text-align: center; }
.bar-label span { display: block; font-size: 14px; color: #64748b; font-weight: normal; margin-top: 4px; }
.summary { text-align: center; margin-top: 24px; font-size: 18px; color: #475569; }
.summary strong { color: #0284c7; }
.highlight { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); padding: 16px 24px; border-radius: 12px; border-left: 4px solid #f59e0b; margin: 20px 0; }
.highlight strong { color: #92400e; }
@media print { @media print {
.nav, .num { display: none; } .nav, .num { display: none; }
.slide { display: flex; page-break-after: always; min-height: 100vh; } .slide { display: flex; page-break-after: always; min-height: 100vh; }
@ -49,35 +56,54 @@
<script> <script>
var SLIDES = [ var SLIDES = [
{ {
title: "Статистика приказов", title: "Аналитический обзор деятельности",
subtitle: "Сравнение 8 месяцев 2025 и 2026 годов", subtitle: "ОЦО ЮС · 2025–2026",
type: "title" type: "title"
}, },
{ {
title: "Динамика приказов", title: "Статистика по приказам",
content: "chart", type: "stats",
stats: [
{ number: "4910", label: "приказов поступило на согласование за весь 2025 год" },
{ number: "409", label: "средняя нагрузка в месяц" },
{ number: "37", label: "документов на 1 работника в месяц" }
],
highlight: "Рост на 6 приказов (+0,2%) при сравнении сопоставимых периодов (8 месяцев)"
},
{
title: "Статистика по приказам за 8 месяцев",
type: "chart",
chart: { chart: {
data: [ data: [
{ year: "2025", value: 2895, label: "8 месяцев" }, { year: "2025", value: 2895, label: "8 месяцев" },
{ year: "2026", value: 2901, label: "8 месяцев" } { year: "2026", value: 2901, label: "8 месяцев" }
] ]
} },
summary: "Сопоставимые периоды: <strong>2895</strong> → <strong>2901</strong> приказ (+6, +0,2%)"
}, },
{ {
title: "Ключевые показатели", title: "Штатная численность и нагрузка",
bullets: [ stats: [
"За 8 месяцев 2025 года издано 2895 приказов", { number: "50", label: "штатных работников (32 — фронт-офис)" },
"За 8 месяцев 2026 года издано 2901 приказ", { number: ">5 000", label: "документов поступило на согласование за 2025 год" },
"Рост составил 6 приказов (+0.2%)", { number: "409", label: "документов в среднем в месяц" },
"Показатели стабильны" { number: "37", label: "документов в месяц на одного работника" }
] ]
}, },
{ {
title: "Выводы", title: "Проводимая работа по автоматизации",
bullets: [ bullets: [
"Объём документооборота сохранился на уровне прошлого года", "Распоряжение № 162 от 23.07.2025 — Внедрение ИИ-агентов в процессы ОЦО ЮС",
"Незначительный рост в пределах статистической погрешности", "Анализ юридических процессов для автоматизации с использованием ИИ",
"Требуется анализ по категориям приказов для детализации" "Автоматическое распределение заявок между юристами в KT Doc"
]
},
{
title: "Выводы и предложения",
bullets: [
"В расчёт не включены трудозатраты на совещания, срочные поручения, судебные споры",
"Работники фронт-офисов задействованы в согласовании распорядительных документов",
"Проводится работа по внедрению ИИ-инструментов для оптимизации процессов"
] ]
} }
]; ];
@ -89,26 +115,36 @@ function render() {
deck.innerHTML = SLIDES.map(function (s, i) { deck.innerHTML = SLIDES.map(function (s, i) {
if (s.type === "title") { if (s.type === "title") {
return '<section class="slide' + (i === cur ? " on" : "") + '" style="text-align:center;align-items:center;">' + return '<section class="slide' + (i === cur ? " on" : "") + '" style="text-align:center;align-items:center;">' +
'<h1>' + s.title + '</h1>' + '<h1 style="margin-bottom:12px;">' + s.title + '</h1>' +
'<p style="font-size:24px;color:var(--kt-ai-fg-muted);margin-top:20px;">' + (s.subtitle || '') + '</p>' + '<p style="font-size:22px;color:#64748b;margin-top:0;">' + (s.subtitle || '') + '</p>' +
'</section>'; '</section>';
} else if (s.content === "chart") { } else if (s.type === "stats") {
var cards = s.stats.map(function(st) {
return '<div class="stat-card"><div class="stat-number">' + st.number + '</div><div class="stat-label">' + st.label + '</div></div>';
}).join("");
return '<section class="slide' + (i === cur ? " on" : "") + '">' +
'<h2>' + s.title + '</h2>' +
'<div class="stat-grid">' + cards + '</div>' +
(s.highlight ? '<div class="highlight"><strong>' + s.highlight + '</strong></div>' : '') +
'</section>';
} else if (s.type === "chart") {
var maxVal = Math.max.apply(null, s.chart.data.map(function(d) { return d.value; })); var maxVal = Math.max.apply(null, s.chart.data.map(function(d) { return d.value; }));
var bars = s.chart.data.map(function(d) { var bars = s.chart.data.map(function(d) {
var height = (d.value / maxVal) * 240; var height = (d.value / maxVal) * 200;
return '<div class="bar">' + return '<div class="bar">' +
'<div class="bar-value">' + d.value + '</div>' + '<div class="bar-value">' + d.value + '</div>' +
'<div class="bar-fill year-' + d.year + '" style="height:' + height + 'px;"></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 class="bar-label">' + d.year + ' год<span>' + d.label + '</span></div>' +
'</div>'; '</div>';
}).join(""); }).join("");
return '<section class="slide' + (i === cur ? " on" : "") + '">' + return '<section class="slide' + (i === cur ? " on" : "") + '">' +
'<h2>' + s.title + '</h2>' + '<h2>' + s.title + '</h2>' +
'<div class="chart-wrap"><div class="chart">' + bars + '</div></div>' + '<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>' + '<div class="summary">' + s.summary + '</div>' +
'</section>'; '</section>';
} else { } else {
return '<section class="slide' + (i === cur ? " on" : "") + '"><h1>' + s.title + '</h1><ul>' + return '<section class="slide' + (i === cur ? " on" : "") + '">' +
'<h2>' + s.title + '</h2><ul>' +
s.bullets.map(function (b) { return "<li>" + b + "</li>"; }).join("") + "</ul></section>"; s.bullets.map(function (b) { return "<li>" + b + "</li>"; }).join("") + "</ul></section>";
} }
}).join(""); }).join("");
@ -129,35 +165,46 @@ function downloadPptx() {
SLIDES.forEach(function (s) { SLIDES.forEach(function (s) {
var sl = p.addSlide(); var sl = p.addSlide();
sl.background = { color: "F4F4F5" }; sl.background = { color: "F8FAFC" };
if (s.type === "title") { 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.title, { x: 0.7, y: 2.5, w: 12, h: 1.5, fontSize: 44, bold: true, color: "0F172A", align: "center" });
sl.addText(s.subtitle || "", { x: 0.7, y: 4.2, w: 12, h: 0.8, fontSize: 24, color: "52525B", align: "center" }); sl.addText(s.subtitle || "", { x: 0.7, y: 4.2, w: 12, h: 0.8, fontSize: 24, color: "64748B", align: "center" });
} else if (s.content === "chart") { } else if (s.type === "stats") {
sl.addText(s.title, { x: 0.7, y: 0.5, w: 12, h: 1, fontSize: 36, bold: true, color: "0F1218" }); sl.addText(s.title, { x: 0.7, y: 0.4, w: 12, h: 1, fontSize: 36, bold: true, color: "0F172A" });
s.stats.forEach(function(st, idx) {
var y = 1.6 + (idx * 1.4);
sl.addText(st.number, { x: 1.0, y: y, w: 3, h: 0.8, fontSize: 48, bold: true, color: "0EA5E9" });
sl.addText(st.label, { x: 4.2, y: y + 0.2, w: 8, h: 0.6, fontSize: 18, color: "475569" });
});
if (s.highlight) {
sl.addText(s.highlight, { x: 0.7, y: 6.2, w: 12, h: 0.6, fontSize: 16, italic: true, color: "92400E", fill: { color: "FEF3C7" } });
}
} else if (s.type === "chart") {
sl.addText(s.title, { x: 0.7, y: 0.4, w: 12, h: 1, fontSize: 36, bold: true, color: "0F172A" });
var chartData = s.chart.data.map(function(d) { var chartData = s.chart.data.map(function(d) {
return { name: d.year + ' год', value: d.value, category: d.year }; return { name: d.year + ' год', value: d.value, category: d.year };
}); });
sl.addChart(pptxgenjs.ChartType.COLUMN, chartData, { sl.addChart(pptxgenjs.ChartType.COLUMN, chartData, {
x: 1.0, y: 2.0, w: 11.0, h: 4.5, x: 1.2, y: 1.8, w: 10.5, h: 4.5,
title: "Количество приказов", title: "Количество приказов",
showLegend: false, showLegend: false,
colors: ["00B8CC", "7C3AED"], colors: ["0EA5E9", "8B5CF6"],
barGap: 50, barGap: 40,
labelColor: "52525B", labelColor: "475569",
axisLineColor: "D4D4D8", axisLineColor: "CBD5E1",
showValue: true, showValue: true,
valueColor: "0F1218", valueColor: "0F172A",
fontSize: 18 fontSize: 16
}); });
sl.addText(s.summary.replace(/<[^>]*>/g, ''), { x: 0.7, y: 6.5, w: 12, h: 0.5, fontSize: 14, color: "475569", align: "center" });
} else { } else {
sl.addText(s.title, { x: 0.7, y: 0.5, w: 12, h: 1, fontSize: 36, bold: true, color: "0F1218" }); sl.addText(s.title, { x: 0.7, y: 0.4, w: 12, h: 1, fontSize: 36, bold: true, color: "0F172A" });
sl.addText(s.bullets.map(function (b) { return { text: b, options: { bullet: true, breakLine: true } }; }), 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 }); { x: 0.9, y: 1.8, w: 11.5, h: 5, fontSize: 18, color: "334155", lineSpacingMultiple: 1.6 });
} }
}); });
p.writeFile({ fileName: "Statistika_prikazov_2025-2026.pptx" }); p.writeFile({ fileName: "Analiticheskiy_obzor_OCO_YuS_2025-2026.pptx" });
} }
render(); render();