291 lines
15 KiB
HTML
291 lines
15 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<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>
|
||
<style>
|
||
* { margin: 0; box-sizing: border-box; }
|
||
:root {
|
||
--bg: #f4f6fa;
|
||
--card: #ffffff;
|
||
--ink: #111827;
|
||
--muted: #6b7280;
|
||
--faint: #9ca3af;
|
||
--line: #e5e7eb;
|
||
--accent: #0071c5;
|
||
--accent-soft: #e6f1fb;
|
||
--accent2: #0e9f8a;
|
||
--accent2-soft: #e4f6f3;
|
||
--warn: #c77d00;
|
||
--warn-soft: #fdf3e3;
|
||
--good: #1e8e5a;
|
||
--good-soft: #e7f5ee;
|
||
--chip: #eef2f8;
|
||
}
|
||
body {
|
||
font-family: -apple-system, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
|
||
background: var(--bg);
|
||
color: var(--ink);
|
||
}
|
||
.slide { display: none; min-height: 100vh; padding: 7vh 8vw; flex-direction: column; justify-content: center; }
|
||
.slide.on { display: flex; }
|
||
.slide .tag {
|
||
display: inline-block; align-self: flex-start;
|
||
font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
|
||
color: var(--accent); background: var(--accent-soft);
|
||
padding: 5px 12px; border-radius: 999px; margin-bottom: 18px;
|
||
}
|
||
.slide h1 { font-size: clamp(28px, 4.6vw, 50px); line-height: 1.1; margin-bottom: 16px; font-weight: 800; }
|
||
.slide h2 { font-size: clamp(26px, 4.2vw, 44px); line-height: 1.1; margin-bottom: 26px; font-weight: 800; }
|
||
.slide .sub { color: var(--muted); font-size: clamp(15px, 2vw, 20px); max-width: 760px; line-height: 1.55; margin-bottom: 30px; }
|
||
|
||
/* Кicker-цифры */
|
||
.metrics { display: grid; gap: 16px; margin-top: 10px; }
|
||
.metrics.m3 { grid-template-columns: repeat(3, 1fr); }
|
||
.metrics.m2 { grid-template-columns: repeat(2, 1fr); }
|
||
.metrics.m4 { grid-template-columns: repeat(4, 1fr); }
|
||
.metric {
|
||
background: var(--card); border: 1px solid var(--line); border-radius: 16px;
|
||
padding: 20px 20px 18px; box-shadow: 0 1px 2px rgba(16,24,40,.04);
|
||
}
|
||
.metric .v { font-size: clamp(30px, 4.5vw, 46px); font-weight: 800; color: var(--accent); line-height: 1; letter-spacing: -.02em; }
|
||
.metric .v small { font-size: .5em; font-weight: 700; color: var(--accent); }
|
||
.metric .l { margin-top: 10px; font-size: clamp(13px, 1.5vw, 16px); color: var(--muted); line-height: 1.4; min-height: 2.6em; }
|
||
.metric.good .v { color: var(--good); }
|
||
.metric.good { background: var(--good-soft); border-color: #cdeadd; }
|
||
.metric.amber .v { color: var(--warn); }
|
||
.metric.amber { background: var(--warn-soft); border-color: #f5dfb8; }
|
||
|
||
/* Списки-карточки */
|
||
ul.blocks { list-style: none; display: grid; gap: 12px; margin-top: 6px; }
|
||
ul.blocks li {
|
||
position: relative; padding: 3px 0 3px 30px;
|
||
font-size: clamp(15px, 2vw, 21px); line-height: 1.5;
|
||
}
|
||
ul.blocks li::before {
|
||
content: ""; position: absolute; left: 0; top: .5em;
|
||
width: 14px; height: 14px; border-radius: 4px; background: var(--accent);
|
||
}
|
||
ul.blocks li b { font-weight: 700; }
|
||
|
||
.note {
|
||
margin-top: 22px; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--accent);
|
||
border-radius: 12px; padding: 16px 18px; max-width: 900px;
|
||
font-size: clamp(14px, 1.8vw, 18px); color: #374151; line-height: 1.55;
|
||
}
|
||
.note.up { border-left-color: var(--good); background: var(--good-soft); }
|
||
.note .hl { font-weight: 700; color: var(--ink); }
|
||
|
||
.two-col { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; align-items: start; }
|
||
@media (max-width: 900px) {
|
||
.two-col { grid-template-columns: 1fr; }
|
||
.metrics.m3, .metrics.m4 { grid-template-columns: repeat(2, 1fr); }
|
||
}
|
||
@media (max-width: 560px) {
|
||
.metrics.m2, .metrics.m3, .metrics.m4 { grid-template-columns: 1fr; }
|
||
}
|
||
|
||
.ref { margin-top: 16px; font-size: 14px; color: var(--faint); }
|
||
|
||
.num { position: fixed; bottom: 18px; right: 22px; color: var(--faint); font-size: 14px; }
|
||
.nav { position: fixed; bottom: 14px; left: 22px; display: flex; gap: 8px; }
|
||
.nav button {
|
||
border: 1px solid var(--line); background: var(--card); color: var(--ink);
|
||
border-radius: 10px; padding: 9px 16px; cursor: pointer; font-size: 14px; font-weight: 600;
|
||
box-shadow: 0 1px 2px rgba(16,24,40,.06);
|
||
}
|
||
.nav button:hover { border-color: var(--accent); color: var(--accent); }
|
||
.nav .pptx { border-color: var(--accent); background: var(--accent); color: #fff; }
|
||
.nav .pptx:hover { opacity: .92; }
|
||
@media print {
|
||
.nav, .num { display: none; }
|
||
.slide { display: flex !important; 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 = [
|
||
{
|
||
tag: "ОЦО ЮС · 2025–2026",
|
||
title: "Аналитический обзор деятельности",
|
||
type: "cover",
|
||
sub: "Статистика по приказам, штатная численность, нагрузки и ход автоматизации процессов"
|
||
},
|
||
{
|
||
tag: "Слайд 2 · Статистика",
|
||
title: "Статистика по приказам",
|
||
type: "stats",
|
||
metrics: [
|
||
{ v: "4 910", l: "приказов поступило на согласование за весь 2025 год" },
|
||
{ v: "409", l: "средняя нагрузка в месяц" },
|
||
{ v: "37", l: "документов на одного работника в месяц" }
|
||
],
|
||
bullets: [
|
||
{ b: "За 8 месяцев 2026 года на подготовку разъяснений правового характера по запросам структурных подразделений поступило <b>2 901 приказ</b>" },
|
||
{ b: "За 8 месяцев 2025 года — <b>2 895 приказов</b>" },
|
||
{ b: "Рост сопоставимых периодов: <b>+6 приказов (+0,2%)</b>" }
|
||
]
|
||
},
|
||
{
|
||
tag: "Слайд 3 · Штат и нагрузка",
|
||
title: "Штатная численность и нагрузка",
|
||
type: "staff",
|
||
metrics: [
|
||
{ v: "50", l: "штатных работников (32 — фронт-офис)" },
|
||
{ v: ">5 000", l: "документов поступило на согласование за 2025 год" },
|
||
{ v: "409", l: "документов в среднем в месяц" },
|
||
{ v: "37", l: "документов в месяц на одного работника" }
|
||
]
|
||
},
|
||
{
|
||
tag: "Слайд 4 · Автоматизация",
|
||
title: "Проводимая работа по автоматизации",
|
||
type: "auto",
|
||
intro: "Распоряжение №162 от 23.07.2025 — «Внедрение ИИ-агентов в процессы ОЦО ЮС»",
|
||
bullets: [
|
||
{ b: "Анализ юридических процессов для автоматизации с использованием ИИ" },
|
||
{ b: "Автоматическое распределение заявок между юристами в KT Docs" },
|
||
{ b: "Исключение дублирования проектов договоров NDA" },
|
||
{ b: "Развитие цифровых решений: поэтапное замещение Lotus Notes — с начала следующего года заработает новая платформа ОЦО ЮС" },
|
||
{ b: "Разработка функционала собственными силами ДОЭ с интеграцией ИИ-агентов" }
|
||
]
|
||
},
|
||
{
|
||
tag: "Слайд 5 · Итоги",
|
||
title: "Выводы и предложения",
|
||
type: "outro",
|
||
bullets: [
|
||
{ b: "В расчёт <b>не включены</b> трудозатраты на совещания, срочные поручения, судебные споры" },
|
||
{ b: "Работники фронт-офисов задействованы в согласовании распорядительных документов" },
|
||
{ b: "Проводится работа по внедрению ИИ-инструментов и автоматизации бизнес-процессов" },
|
||
{ b: "<b>Необходима</b> оценка влияния автоматизации на снижение трудозатрат" }
|
||
]
|
||
}
|
||
];
|
||
// ==================================================
|
||
|
||
var cur = 0;
|
||
function esc(s){ return s; }
|
||
function renderHTML(s) {
|
||
if (s.type === "cover") {
|
||
return '<span class="tag">' + s.tag + '</span>' +
|
||
'<h1>' + s.title + '</h1>' +
|
||
'<p class="sub">' + s.sub + '</p>';
|
||
}
|
||
var parts = '<span class="tag">' + s.tag + '</span><h2>' + s.title + '</h2>';
|
||
if (s.type === "stats") {
|
||
parts += '<div class="metrics m3">' + s.metrics.map(function (m) {
|
||
return '<div class="metric"><div class="v">' + m.v + '</div><div class="l">' + m.l + '</div></div>';
|
||
}).join('') + '</div>';
|
||
parts += '<ul class="blocks">' + s.bullets.map(function (b) { return "<li>" + b.b + "</li>"; }).join('') + '</ul>';
|
||
} else if (s.type === "staff") {
|
||
parts += '<div class="metrics m4">' + s.metrics.map(function (m) {
|
||
return '<div class="metric"><div class="v">' + m.v + '</div><div class="l">' + m.l + '</div></div>';
|
||
}).join('') + '</div>';
|
||
} else if (s.type === "auto") {
|
||
parts += '<div class="note"><span class="hl">' + s.intro + '</span></div>';
|
||
parts += '<ul class="blocks">' + s.bullets.map(function (b) { return "<li>" + b.b + "</li>"; }).join('') + '</ul>';
|
||
} else if (s.type === "outro") {
|
||
parts += '<ul class="blocks">' + s.bullets.map(function (b) { return "<li>" + b.b + "</li>"; }).join('') + '</ul>';
|
||
}
|
||
return parts;
|
||
}
|
||
function render() {
|
||
var deck = document.getElementById("deck");
|
||
deck.innerHTML = SLIDES.map(function (s, i) {
|
||
return '<section class="slide' + (i === cur ? " on" : "") + '">' + renderHTML(s) + '</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);
|
||
});
|
||
|
||
// ---------- ППТХ ----------
|
||
var C = { bg: "F4F6FA", ink: "111827", muted: "6B7280", line: "E5E7EB",
|
||
accent: "0071C5", accentSoft: "E6F1FB", good: "1E8E5A",
|
||
goodSoft: "E7F5EE", warn: "C77D00", warnSoft: "FDF3E3",
|
||
card: "FFFFFF", faint: "9CA3AF" };
|
||
|
||
function pptxSlide(s, p) {
|
||
var sl = p.addSlide();
|
||
sl.background = { color: C.bg };
|
||
// тег
|
||
sl.addText(s.tag, { x: 0.7, y: 0.45, w: 6, h: 0.4, fontSize: 12, bold: true,
|
||
color: C.accent, fontFace: "Inter" });
|
||
if (s.type === "cover") {
|
||
sl.addText(s.title, { x: 0.7, y: 1.5, w: 12, h: 1.7, fontSize: 48, bold: true, color: C.ink, fontFace: "Inter" });
|
||
sl.addText(s.sub, { x: 0.7, y: 3.5, w: 10.5, h: 1.2, fontSize: 22, color: C.muted, fontFace: "Inter", lineSpacingMultiple: 1.4 });
|
||
sl.addShape("rect", { x: 0.7, y: 3.25, w: 2.2, h: 0.06, fill: { color: C.accent } });
|
||
return;
|
||
}
|
||
sl.addText(s.title, { x: 0.7, y: 0.95, w: 12, h: 1.0, fontSize: 34, bold: true, color: C.ink, fontFace: "Inter" });
|
||
|
||
if (s.type === "stats") {
|
||
var mw = 3.85, gap = 0.22, x0 = 0.7, y0 = 2.15, mh = 1.7;
|
||
s.metrics.forEach(function (m, i) {
|
||
var x = x0 + i * (mw + gap);
|
||
sl.addShape("roundRect", { x: x, y: y0, w: mw, h: mh, rectRadius: 0.08,
|
||
fill: { color: C.card }, line: { color: C.line, width: 1 } });
|
||
sl.addText(m.v, { x: x + 0.25, y: y0 + 0.15, w: mw - 0.5, h: 0.75, fontSize: 40, bold: true, color: C.accent, fontFace: "Inter" });
|
||
sl.addText(m.l, { x: x + 0.25, y: y0 + 0.95, w: mw - 0.5, h: 0.7, fontSize: 13, color: C.muted, fontFace: "Inter", lineSpacingMultiple: 1.15 });
|
||
});
|
||
var items = s.bullets.map(function (b) { return { text: b.b.replace(/<[^>]+>/g, ""), options: { bullet: { code: "25AA", indent: 18 }, breakLine: true } }; });
|
||
sl.addText(items, { x: 0.7, y: 4.25, w: 12, h: 2.9, fontSize: 16, color: C.ink, fontFace: "Inter", lineSpacingMultiple: 1.35, paraSpaceAfter: 6 });
|
||
} else if (s.type === "staff") {
|
||
var mw2 = 2.85, gap2 = 0.18, x02 = 0.7, y02 = 2.2, mh2 = 3.2;
|
||
s.metrics.forEach(function (m, i) {
|
||
var x = x02 + i * (mw2 + gap2);
|
||
sl.addShape("roundRect", { x: x, y: y02, w: mw2, h: mh2, rectRadius: 0.08,
|
||
fill: { color: C.card }, line: { color: C.line, width: 1 } });
|
||
sl.addText(m.v, { x: x + 0.2, y: y02 + 0.35, w: mw2 - 0.4, h: 1.1, fontSize: 40, bold: true, color: C.accent, fontFace: "Inter" });
|
||
sl.addText(m.l, { x: x + 0.2, y: y02 + 1.6, w: mw2 - 0.4, h: 1.4, fontSize: 14, color: C.muted, fontFace: "Inter", lineSpacingMultiple: 1.2 });
|
||
});
|
||
} else if (s.type === "auto") {
|
||
sl.addShape("roundRect", { x: 0.7, y: 2.0, w: 12, h: 0.85, rectRadius: 0.06,
|
||
fill: { color: C.card }, line: { color: C.accent, width: 1 } });
|
||
sl.addShape("rect", { x: 0.7, y: 2.0, w: 0.08, h: 0.85, fill: { color: C.accent } });
|
||
sl.addText(s.intro, { x: 1.0, y: 2.0, w: 11.5, h: 0.85, fontSize: 17, bold: true, color: C.ink, fontFace: "Inter", valign: "middle" });
|
||
var items = s.bullets.map(function (b) { return { text: b.b.replace(/<[^>]+>/g, ""), options: { bullet: { code: "25AA", indent: 18 }, breakLine: true } }; });
|
||
sl.addText(items, { x: 0.7, y: 3.15, w: 12, h: 3.9, fontSize: 17, color: C.ink, fontFace: "Inter", lineSpacingMultiple: 1.35, paraSpaceAfter: 9 });
|
||
} else if (s.type === "outro") {
|
||
// 4 карточки-вывода
|
||
var y = 2.1, h = 1.0, g = 0.16;
|
||
s.bullets.forEach(function (b, i) {
|
||
var yv = y + i * (h + g);
|
||
var isNote = /не включены|Необходима/.test(b.b);
|
||
sl.addShape("roundRect", { x: 0.7, y: yv, w: 12, h: h, rectRadius: 0.06,
|
||
fill: { color: isNote ? C.warnSoft : C.card }, line: { color: isNote ? "F5DFB8" : C.line, width: 1 } });
|
||
sl.addShape("rect", { x: 0.7, y: yv, w: 0.08, h: h, fill: { color: isNote ? C.warn : C.accent } });
|
||
sl.addText([{ text: " " + b.b.replace(/<[^>]+>/g, ""), options: {} }],
|
||
{ x: 1.0, y: yv, w: 11.4, h: h, fontSize: 17, bold: isNote, color: C.ink, fontFace: "Inter", valign: "middle" });
|
||
});
|
||
}
|
||
}
|
||
|
||
function downloadPptx() {
|
||
var p = new PptxGenJS();
|
||
p.defineLayout({ name: "W", width: 13.33, height: 7.5 });
|
||
p.layout = "W";
|
||
SLIDES.forEach(function (s) { pptxSlide(s, p); });
|
||
p.writeFile({ fileName: "Отчёт_ОЦО_ЮС_2025-2026.pptx" });
|
||
}
|
||
|
||
render();
|
||
</script>
|
||
</body>
|
||
</html>
|