---

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Схемы для ООО «Авто-Ритейл»</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            margin: 0;
            padding: 20px;
        }
        h1, h2 {
            text-align: center;
            color: #333;
        }
        .diagram-container {
            background-color: #fff;
            border: 2px solid #ccc;
            border-radius: 8px;
            margin-bottom: 40px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            overflow: auto; /* Для скролла, если схема большая */
            padding: 20px;
        }
        .instructions {
            background-color: #e3f2fd;
            padding: 15px;
            border-left: 5px solid #2196f3;
            margin-bottom: 30px;
            border-radius: 4px;
        }
    </style>
    <!-- Подключаем библиотеку для отрисовки графов -->
    <script src="https://unpkg.com/@viz-js/viz@0.4.0/dist/viz-standalone.js"></script>
</head>
<body>

    <h1>Схемы по заданию</h1>

    <div class="instructions">
        <strong>Как пользоваться:</strong> Схемы отрисованы автоматически. Вы можете приближать и отдалять их, используя колесико мыши или кнопки в правом нижнем углу каждой схемы. Тексты на блоках полностью соответствуют заданию.
    </div>

    <h2>1. Бизнес-процесс (IDEF0)</h2>
    <div id="diagram1" class="diagram-container"></div>

    <h2>2. Архитектура 1С («Авто-Ритейл»)</h2>
    <div id="diagram2" class="diagram-container"></div>

    <script>
        // Ждем загрузки библиотеки
        window.addEventListener('load', () => {
            const viz = Viz.instance();
            
            // --- КОД ДЛЯ ПЕРВОЙ СХЕМЫ (Бизнес-процесс) ---
            // Используем синтаксис Graphviz (DOT). Он отлично подходит для рисования стрелок и связей.
            const dot1 = `
            digraph IDEF0 {
                rankdir=LR;
                node [shape=box, style="filled,rounded", fillcolor="#dae8fc", color="#6c8ebf", fontname="Arial", fontsize=12];
                edge [fontname="Arial", fontsize=10];

                // Блоки
                node_1 [label="Деятельность по управлению Службой сбыта\n(1)"];
                node_2 [label="Деятельность отдела маркетинга\n(2)"];
                node_3 [label="Деятельность отдела сбыта\n(3)"];
                node_4 [label="Деятельность склада продукции\n(4)"];

                // Входы, Управление, Механизмы, Выходы (создаем невидимые узлы для позиционирования)
                // Для простоты в Graphviz мы просто делаем связи с текстовыми подписями.
                
                in1 [label="Рыночная информация", shape=plaintext];
                in2 [label="Заявки клиентов", shape=plaintext];
                in3 [label="Готовая продукция\nна складе", shape=plaintext];
                
                ctrl1 [label="План продаж", shape=plaintext];
                ctrl2 [label="Регламент отдела\nмаркетинга", shape=plaintext];
                ctrl3 [label="Регламент отдела\nсбыта", shape=plaintext];
                ctrl4 [label="Регламент склада\nготовой продукции", shape=plaintext];

                mech1 [label="Директор по сбыту\nСлужба сбыта", shape=plaintext];
                mech2 [label="Отдел маркетинга", shape=plaintext];
                mech3 [label="Отдел сбыта", shape=plaintext];
                mech4 [label="Склад готовой\nпродукции", shape=plaintext];

                out1 [label="Регламенты\nСлужбы сбыта", shape=plaintext];
                out2 [label="Анализ рынка", shape=plaintext];
                out3 [label="Договора на поставку\nЗаявка на производство", shape=plaintext];
                out4 [label="Готовая продукция,\nотгруженная клиенту", shape=plaintext];

                // Связи
                in1 -> node_1 [style=dashed]; // Примерно
                in1 -> node_2;
                in2 -> node_3;
                in3 -> node_4;
                
                ctrl1 -> node_1;
                ctrl2 -> node_2;
                ctrl3 -> node_3;
                ctrl4 -> node_4;

                node_1 -> mech1 [dir=back, style=dotted];
                node_2 -> mech2 [dir=back, style=dotted];
                node_3 -> mech3 [dir=back, style=dotted];
                node_4 -> mech4 [dir=back, style=dotted];

                node_1 -> out1;
                node_2 -> out2;
                node_3 -> out3;
                node_4 -> out4;

                // Внутренние связи (Регламенты от службы сбыта)
                out1 -> node_3 [style=solid, color=gray, label="управление"];
                out1 -> node_4 [style=solid, color=gray, label="управление"];
                out2 -> node_3 [style=solid, color=gray, label="анализ"];
            }
            `;

            // --- КОД ДЛЯ ВТОРОЙ СХЕМЫ (Архитектура 1С) ---
            const dot2 = `
            digraph Architecture1C {
                rankdir=TB;
                node [shape=box, fontname="Arial", fontsize=11, style="filled"];
                edge [fontname="Arial", fontsize=10, color="#555555"];

                // Блоки (по слайду)
                node_1 [label="1. Условно-постоянная информация\n\n• Справочник «Номенклатура»\n• Справочник «Контрагенты»\n• Справочник «Сотрудники»\n• ПВХ «Цены»", fillcolor="#fff2cc", color="#d6b656"];
                node_2 [label="2. Документы\n\n• «Приходная накладная»\n• «Заказ клиента»\n• «Счет на оплату»\n• «Реализация»", fillcolor="#dae8fc", color="#6c8ebf"];
                node_3 [label="3. Регистры\n\n• РН «ОстаткиТоваров»\n• РН «Продажи»\n• РС «ЦеныНоменклатуры»", fillcolor="#f8cecc", color="#b85450"];
                node_4 [label="4. Обработки и отчеты\n\n• Отчет «Остатки»\n• Отчет «Рейтинг менеджеров»\n• Отчет «Контроль цен»", fillcolor="#d5e8d4", color="#82b366"];

                // Связи
                node_1 -> node_2 [label="Ссылки"];
                node_2 -> node_3 [label="Движения"];
                node_1 -> node_4 [label="Данные", style=dashed];
                node_3 -> node_4 [label="Данные", style=dashed];
            }
            `;

            // Отрисовка первой схемы
            viz.renderSVGElement(dot1).then(element => {
                document.getElementById('diagram1').appendChild(element);
            });

            // Отрисовка второй схемы
            viz.renderSVGElement(dot2).then(element => {
                document.getElementById('diagram2').appendChild(element);
            });
        });
    </script>
</body>
</html>