/*
    Парус 8 - Панели мониторинга - ПУДП - Пользовательская инструкция
    Панель мониторинга: Пользовательская инструкция
*/

//---------------------
//Подключение библиотек
//---------------------

import React, { useContext, useState } from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Box, Grid, Typography, Link, List, ListItem, ListItemButton, ListItemText, Divider, Fab, Icon } from "@mui/material"; //Интерфейсные элементы
import { BUTTONS } from "../../../app.text"; //Текстовые ресурсы
import { ApplicationСtx } from "../../context/application"; //Контекст приложения
import img11 from "./img/11.png"; //Изображение
import img12 from "./img/12.png"; //Изображение
import img13 from "./img/13.png"; //Изображение
import img14 from "./img/14.png"; //Изображение
import img15 from "./img/15.png"; //Изображение
import img21 from "./img/21.png"; //Изображение
import img22 from "./img/22.png"; //Изображение
import img23 from "./img/23.png"; //Изображение
import img24 from "./img/24.png"; //Изображение
import img25 from "./img/25.png"; //Изображение
import img211 from "./img/211.png"; //Изображение
import img212 from "./img/212.png"; //Изображение
import img213 from "./img/213.png"; //Изображение
import img31 from "./img/31.png"; //Изображение
import img311 from "./img/311.png"; //Изображение
import img312 from "./img/312.png"; //Изображение
import img313 from "./img/313.png"; //Изображение
import img314 from "./img/314.png"; //Изображение
import img315 from "./img/315.png"; //Изображение
import img316 from "./img/316.png"; //Изображение
import img317 from "./img/317.png"; //Изображение
import img318 from "./img/318.png"; //Изображение
import img319 from "./img/319.png"; //Изображение
import img3110 from "./img/3110.png"; //Изображение
import img321 from "./img/321.png"; //Изображение
import img322 from "./img/322.png"; //Изображение
import img323 from "./img/323.png"; //Изображение
import img331 from "./img/331.png"; //Изображение
import img332 from "./img/332.png"; //Изображение
import img333 from "./img/333.png"; //Изображение
import img334 from "./img/334.png"; //Изображение
import img341 from "./img/341.png"; //Изображение
import img342 from "./img/342.png"; //Изображение
import img343 from "./img/343.png"; //Изображение
import img344 from "./img/344.png"; //Изображение
import img345 from "./img/345.png"; //Изображение
import img346 from "./img/346.png"; //Изображение
import img347 from "./img/347.png"; //Изображение
import img348 from "./img/348.png"; //Изображение
import img351 from "./img/351.png"; //Изображение

//---------
//Константы
//---------

//Оглавление
const CONTENT = [
    { id: "prg1", caption: "1. О структуре производства" },
    { id: "prg2", caption: "2. НСИ о продукции" },
    { id: "prg3", caption: "3. Планирование выпуска продукции" },
    { id: "prg4", caption: "4. Оперативное управление производством" },
    { id: "add1", caption: "Приложение: Краткая инструкция по настройке интерфейса" }
];

//Стили
const STYLES = {
    IMG_CONT: { textAlign: "center", padding: "10px" },
    IMG: { maxWidth: "100%", height: "auto" },
    PRGF_TABLE: { paddingTop: "20px", paddingBottom: "20px", display: "flex", justifyContent: "center" },
    TABLE: { width: "80%" },
    TABLE_TITLE: { backgroundColor: "lightgray" },
    TABLE_SUBTITLE: { textAlign: "center", backgroundColor: "#f3eded", fontWeight: "bold" },
    FAB_BACK: { position: "absolute", right: "20px", marginTop: "20px" }
};

//--------------------------------
//Вспомогательные функции и классы
//--------------------------------

//Переход к элементу страницы
const scrollToElement = id => document.getElementById(id).scrollIntoView();

//Заголовок первого уровня
const Hdr1 = ({ id, children }) => (
    <Typography {...(id ? { id } : {})} variant="h3" color="primary">
        {children}
    </Typography>
);

//Контроль свойств - Заголовок первого уровня
Hdr1.propTypes = {
    id: PropTypes.string,
    children: PropTypes.any
};

//Заголовок второго уровня
const Hdr2 = ({ id, children }) => (
    <Typography {...(id ? { id } : {})} variant="h4" color="secondary">
        {children}
    </Typography>
);

//Контроль свойств - Заголовок второго уровня
Hdr2.propTypes = {
    id: PropTypes.string,
    children: PropTypes.any
};

//Заголовок третьего уровня
const Hdr3 = ({ id, children }) => (
    <Typography {...(id ? { id } : {})} variant="h5" color="text.primary">
        {children}
    </Typography>
);

//Контроль свойств - Заголовок третьего уровня
Hdr3.propTypes = {
    id: PropTypes.string,
    children: PropTypes.any
};

//Параграф
const Prgf = ({ style, children }) => (
    <Typography sx={style} component="div" align="justify">
        {children}
    </Typography>
);

//Контроль свойств - Параграф
Prgf.propTypes = {
    style: PropTypes.object,
    children: PropTypes.any
};

//Изображение
const Img = ({ src }) => (
    <div style={STYLES.IMG_CONT}>
        <img src={`./${src}`} style={STYLES.IMG} />
    </div>
);

//Контроль свойств - Изображение
Img.propTypes = {
    src: PropTypes.string.isRequired
};

//Ссылка на раздел Системы
const UnitLink = ({ unitCode, children }) => {
    //Подключение к контексту приложения
    const { pOnlineShowUnit } = useContext(ApplicationСtx);

    //Генерация содержимого
    return (
        <Link component="button" variant="body2" align="left" underline="always" onClick={() => pOnlineShowUnit({ unitCode })}>
            {children}
        </Link>
    );
};

//Контроль свойств - Ссылка на раздел Системы
UnitLink.propTypes = {
    unitCode: PropTypes.string.isRequired,
    children: PropTypes.any
};

//Ссылка на главу инструкции
const ChapterLink = ({ id, dstId, onClick, children }) => {
    //Генерация содержимого
    return (
        <Link
            {...(id ? { id } : {})}
            component="button"
            variant="body2"
            align="left"
            underline="always"
            onClick={() => {
                scrollToElement(dstId);
                if (onClick && id) onClick(id);
            }}
        >
            {children}
        </Link>
    );
};

//Контроль свойств - Ссылка на главу инструкции
ChapterLink.propTypes = {
    id: PropTypes.string,
    dstId: PropTypes.string.isRequired,
    onClick: PropTypes.func,
    children: PropTypes.any
};

//Ссылка на информационную панель
const PanelLink = ({ panelName, children }) => {
    //Подключение к контексту приложения
    const { configUrlBase, findPanelByName, pOnlineShowTab } = useContext(ApplicationСtx);

    //Генерация содержимого
    return (
        <Link
            component="button"
            variant="body2"
            align="left"
            underline="always"
            onClick={() => {
                const panel = findPanelByName(panelName);
                if (panel) pOnlineShowTab({ id: panel.name, url: `${configUrlBase}${panel.url}`, caption: panel.caption });
            }}
        >
            {children}
        </Link>
    );
};

//Контроль свойств - Ссылка на информационную панель
PanelLink.propTypes = {
    panelName: PropTypes.string.isRequired,
    children: PropTypes.any
};

//-----------
//Тело модуля
//-----------

//Корневая панель пользовательской инструкции
const MechRecHelp = () => {
    //Собственное состояние
    const [navStack, setNavStack] = useState([]);

    //Переход по оглавлению
    const handleTitleClick = id => {
        scrollToElement(id);
        setNavStack([]);
    };

    //Обработка на нажатие ссылки на раздел
    const handleChapterLinkClick = backId => {
        const tmp = [...navStack];
        tmp.push(backId);
        setNavStack(tmp);
    };

    //Обработка нажатия на кнопку "Назад"
    const handleBackClick = () => {
        if (navStack.length > 0) {
            const tmp = [...navStack];
            const backId = tmp.pop();
            scrollToElement(backId);
            setNavStack(tmp);
        }
    };

    //Генерация содержимого
    return (
        <Box>
            {navStack.length > 0 ? (
                <Fab variant="extended" color="primary" sx={STYLES.FAB_BACK} onClick={handleBackClick}>
                    <Icon>arrow_back_ios</Icon>
                    {BUTTONS.NAVIGATE_BACK}
                </Fab>
            ) : null}
            <Grid container spacing={1}>
                <Grid item xs={2}>
                    <Box p={2}>
                        <Typography variant="button">Оперативное управление производством</Typography>
                    </Box>
                    <Divider />
                    <List>
                        {CONTENT.map((c, i) => (
                            <ListItem disablePadding key={i}>
                                <ListItemButton onClick={() => handleTitleClick(c.id)}>
                                    <ListItemText primary={c.caption} />
                                </ListItemButton>
                            </ListItem>
                        ))}
                    </List>
                </Grid>
                <Grid item xs={10} sx={{ display: "flex", flexDirection: "column", justifyContent: "center" }}>
                    <Box p={2} style={{ maxHeight: "91vh", overflow: "auto" }}>
                        <Hdr1>Оперативное управление производством</Hdr1>
                        <Hdr2 id={"prg1"}>1. О структуре производства</Hdr2>
                        <Prgf>В макете настроена штатная структура предприятия и определены склады подразделений.</Prgf>
                        <Prgf>Для просмотра штатной структуры перейдите в раздел «Подразделения».</Prgf>
                        <Img src={img11} />
                        <Prgf>
                            Производство состоит из 4 цехов, для цехов № 2 и № 4 определены участки. Участки цеха № 2 используются в описании макета
                            при формировании сменных заданий.
                        </Prgf>
                        <Img src={img12} />
                        <Prgf>
                            Для централизованного и внутрицехового учета материалов, покупных комплектующих (далее – ПКИ), деталей и сборочных единиц
                            (далее – ДСЕ) в макете определены склады. Для просмотра перечня складов перейдите в раздел «Склады».
                        </Prgf>
                        <Img src={img13} />
                        <Prgf>
                            Централизованный склад ЦМС используется для учета прихода материалов и ПКИ от поставщиков и выдачи в цеха. Склады цехов
                            используются для учета в цехе получения материалов и ПКИ с ЦМС, поступления готовых ДСЕ от других цехов и от участков
                            цеха, списание материалов, ПКИ и ДСЕ на затраты производства. На централизованный склад СГП выполняется сдача готовой
                            продукции.
                        </Prgf>
                        <Img src={img14} />
                        <Prgf>
                            Для выдачи заданий на станки в макете для участков цеха № 2 определено оборудование. Просмотреть оборудование можно в
                            разделе «Подразделения» в окне «Оборудование».
                        </Prgf>
                        <Img src={img15} />
                        <Hdr2 id={"prg2"}>2. НСИ о продукции</Hdr2>
                        <Prgf>
                            Нормативно-справочная информация (далее – НСИ) о продукции доступна для просмотра через пункт головного меню «Учет».
                        </Prgf>
                        <Img src={img21} />
                        <Prgf>
                            Для просмотра НСИ перейдите в разделы, указанные в строках контекстного меню. При переходе в разделы открывается окно
                            «Отбор», нажимайте в окне кнопку «ОК».
                        </Prgf>
                        <Prgf>Нормативная информация о производимой продукции в макете размещена в следующих разделах: </Prgf>
                        <Prgf>
                            <p>1) «Спецификации изделий»</p>
                        </Prgf>
                        <Img src={img22} />
                        <Prgf>Для изделий «Лебедка» и входящих в изделия сборочных единиц введены данные конструкторских составов.</Prgf>
                        <Prgf>
                            <p>2) «Ведомости материалов и оснастки»</p>
                        </Prgf>
                        <Img src={img23} />
                        <Prgf>Для деталей введены нормы расхода основного материала.</Prgf>
                        <Prgf>
                            <p>3) «Маршрутные карты»</p>
                        </Prgf>
                        <Img src={img24} />
                        <Prgf>Для изделий и ДСЕ введены данные маршрутных карт технологических процессов.</Prgf>
                        <Prgf>
                            <p>4) «Маршруты» в макете не используются, маршрут ДСЕ определяется маршрутной картой.</p>
                        </Prgf>
                        <Prgf>
                            Справочник материальных ресурсов, производимых и потребляемых в процессе производства продукции, находится в разделе
                            «Инженерные данные».
                        </Prgf>
                        <Img src={img25} />
                        <Hdr3>2.1. Производственные составы изделий</Hdr3>
                        <Prgf>
                            На основании нормативной информации для изделий «Лебедка» сформированы Производственные составы (далее – ПС). ПС
                            материальных ресурсов отображаются в разделе «Инженерные данные» в окне «Производственный состав».
                        </Prgf>
                        <Prgf>Пользователь может сформировать новые ПС и переформировать существующие, используя действия контекстного меню.</Prgf>
                        <Img src={img211} />
                        <Prgf>
                            ПС используется в процессе планирования производства продукции, как основной нормативный документ об изделии. ПС – это
                            иерархическая маршрутно-материальная ведомость изделия.
                        </Prgf>
                        <Prgf>Для просмотра состава ПС выполните на строке заголовка ПС действие «Показать».</Prgf>
                        <Img src={img212} />
                        <Prgf>
                            Для автоматического определения при планировании производства «какой ПС использовать» созданные в макете ПС изделий
                            «Лебедка» переведены в «Состояние» = «Производство» и определены как «используемые по умолчанию».
                        </Prgf>
                        <Img src={img213} />
                        <Hdr2 id={"prg3"}>3. Планирование выпуска продукции</Hdr2>
                        <Prgf>
                            Работа с планами производства, в т.ч. и с планами выпуска готовой продукции выполняется в разделе «Планы и отчеты
                            производства продукции».
                        </Prgf>
                        <Img src={img31} />
                        <Prgf>В «ПАРУС Предприятие 8» реализованы следующие Категории связанных планов производства:</Prgf>
                        <Prgf>
                            <p>
                                1) «Первичный план» - планы выпуска готовой продукции;
                                <br />
                                2) «Производственная программа» - календарные план-графики запуска/выпуска ДСЕ входящих в состав изделий,
                                запланированных к выпуску в первичном плане;
                                <br />
                                3) «Цеховой план» - производственные планы цехов на период (месяц, квартал), формируемые из производственных программ.
                            </p>
                        </Prgf>
                        <Prgf>Планы выпуска готовой продукции могут формироваться:</Prgf>
                        <Prgf>
                            <p>
                                1) На Заказ – для каждого заказа (например, договора поставки с потребителем) формируется план выпуска, с указанием
                                заказа;
                                <br />
                                2) На период (квартал, полугодие, год) – на период формируется один план выпуска и в план включается продукция всех
                                заказов, для которой дата выпуска попадает в период плана.
                            </p>
                        </Prgf>
                        <Prgf>В макете использован вариант формирования планов выпуска «на период».</Prgf>
                        <Hdr3 id={"prg31"}>3.1. Формирование плана выпуска</Hdr3>
                        <Prgf>В разделе «Планы и отчеты производства», в каталоге с именем Вашего пользователя, выполните действие «Добавить».</Prgf>
                        <Img src={img311} />
                        <Prgf>
                            <b style={{ color: "red" }}>Внимание!!!</b> При выполнении действия в каталоге, не соответствующем Вашему пользователю,
                            выдается сообщение об ошибке.
                        </Prgf>
                        <Img src={img312} />
                        <Prgf>
                            На форме добавления плана выпуска укажите дату формирования плана и нажмите «ОК». Остальные параметры действия заполняются
                            автоматически.
                        </Prgf>
                        <Img src={img313} />
                        <Prgf>
                            В результате выполнения действия формируется заголовок плана выпуска на 2024 год и с пустой спецификацией в окне «Выпуск».
                        </Prgf>
                        <Img src={img314} />
                        <Prgf>
                            Спецификации плана выпуска формируется документами «Заказ на производство», являющимися основаниями для производства
                            продукции.
                        </Prgf>
                        <Prgf>
                            Заказы на производство в «ПАРУС Предприятие 8» формируются из договоров поставки, проектов ОКР с выпуском опытной партии
                            изделий или добавляются вручную.
                        </Prgf>
                        <Prgf>Для добавления заказа на производство перейдите в раздел «Заказы на производство»</Prgf>
                        <Img src={img315} />
                        <Prgf>и выполните действие «Добавить».</Prgf>
                        <Img src={img316} />
                        <Prgf>На форме параметров действия укажите:</Prgf>
                        <Prgf>
                            <p>
                                • «Дата» - дата документа;
                                <br />• «Лицевой счет» - выберете Заказ (Номер лицевого счета учета затрат);
                            </p>
                        </Prgf>
                        <Img src={img317} />
                        <Prgf>и нажмите «ОК».</Prgf>
                        <Prgf>
                            Для созданного заказа на производство в окне «Спецификация» выполните действие «Добавить» и введите на форме «Добавление…»
                        </Prgf>
                        <Img src={img318} />
                        <Prgf>
                            <p>
                                • «Номенклатура» - выберете изделие «Лебедка»;
                                <br />• «Дата исполнения» - укажите плановую дату выпуска;
                                <br />• «Количество в основной ЕИ» - укажите сколько изделий выпустить.
                            </p>
                        </Prgf>
                        <Prgf>
                            Сформированный заказ на производство утвердите (действие «Состояние – Утвердить») и включите в план производства (действие
                            «Включить в план…»).
                        </Prgf>
                        <Img src={img319} />
                        <Prgf>При включении в план выберете созданный ранее план выпуска.</Prgf>
                        <Prgf>
                            Результатом выполненных действий будет план выпуска со спецификацией продукции. Для дальнейшей работы с планом необходимо
                            его утвердить (действие «Состояние – Утвержден»).
                        </Prgf>
                        <Img src={img3110} />
                        <Hdr3 id={"prg32"}>3.2. Планирование запуска-выпуска ДСЕ</Hdr3>
                        <Prgf>
                            Следующим шагом формируется производственная программа. На заголовке плана выпуска выполните действие «Формирование –
                            Сформировать производственную программу».
                        </Prgf>
                        <Img src={img321} />
                        <Prgf>На форме параметров действия</Prgf>
                        <Img src={img322} />
                        <Prgf>укажите:</Prgf>
                        <Prgf>
                            <p>
                                • «Каталог» - выберете каталог Вашего пользователя;
                                <br />• «Тип» - выберете «Производственная программа»;
                                <br />• «Префикс» - укажите год;
                                <br />• «Вид» = «План»;
                                <br />• «Котловые с учетом заказа» - установите этот чек;
                            </p>
                        </Prgf>
                        <Prgf>параметры указываются при первом выполнении действия и запоминаются.</Prgf>
                        <Prgf>
                            В результате выполнения действия сформируется заголовок Производственной программы и в спецификации «Выпуск» календарный
                            график запуска-выпуска изделий плана выпуска и ДСЕ входящих в изделия (по данным ПС изделий).
                        </Prgf>
                        <Img src={img323} />
                        <Prgf>Строки спецификации «Выпуск» содержат следующие данные:</Prgf>
                        <Prgf>
                            <p>
                                • «Уровень вложенности»: 0 – изделия из плана выпуска, 1 и далее – ДСЕ из ПС изделия по уровням входимости в состав
                                изделия;
                                <br />• «Выпуск» - количество планового выпуска (для изделий - из плана выпуска, для ДСЕ - рассчитанное по данным ПС);
                                <br />• «Дата выпуска» - плановая дата выпуска (для изделия - равна «Дата отгрузки» из плана выпуска, для ДСЕ -
                                рассчитанное по данным ПС);
                                <br />• «Дата запуска» - плановая дата запуска в производство (рассчитывается по данным ПС);
                            </p>
                        </Prgf>
                        <Prgf>Сформированную программу утвердите действием на заголовке «Состояние - Утвержден».</Prgf>
                        <Hdr3 id={"prg33"}>3.3. Планирование потребностей производства в ресурсах</Hdr3>
                        <Prgf>
                            Из производственной программы выполняется расчет потребностей производства в материалах и ПКИ, в персонале и оборудовании.
                        </Prgf>
                        <Prgf>
                            Выполните из заголовка производственной программы действия «Формирование – Сформировать потребность в материальных
                            ресурсах» и «Формирование – Сформировать потребность в мощностях».
                        </Prgf>
                        <Img src={img331} />
                        <Prgf>В параметрах действий требуется, при первом выполнении, выбрать каталог и указать Тип и Префикс документа.</Prgf>
                        <Img src={img332} />
                        <Prgf>После выполнения действий перейдите «по связям»</Prgf>
                        <Img src={img333} />
                        <Prgf>в сформированный документ «Потребности акты расхода производства изделий»</Prgf>
                        <Img src={img334} />
                        <Prgf>Документ «Потребность…» содержит следующую информацию:</Prgf>
                        <Prgf>
                            <p>
                                1) «Расход материальных ресурсов» - потребность в материалах и ПКИ на производственную программу;
                                <br />
                                2) «Трудозатраты» - плановая загрузка персонала (Трудовых ресурсов) цехов и участков цехов;
                                <br />
                                3) «Загрузка оборудования» - плановая загрузка оборудования (по группам оборудования).
                            </p>
                        </Prgf>
                        <Hdr3 id={"prg34"}>3.4. Планирование обеспечения производства материалами и ПКИ</Hdr3>
                        <Prgf>
                            Сформированная потребность производства используется для формирования заявки службе снабжения (ОМТО) на обеспечение
                            заказов материалами и ПКИ.
                        </Prgf>
                        <Prgf>Перейдите в раздел «Потребности и акты расхода производства изделий»</Prgf>
                        <Img src={img341} />
                        <Prgf>и сформируйте заявку действием «Формирование заказа подразделения».</Prgf>
                        <Img src={img342} />
                        <Prgf>На форме параметров действия нажмите «ОК». Перейдите «по связям» к сформированному заказу подразделений.</Prgf>
                        <Img src={img343} />
                        <Prgf>В заявке потребность на производственную программу сгруппирована и суммирована по номенклатуре.</Prgf>
                        <Img src={img344} />
                        <Prgf>Обработка заявки выполняется службой ОМТО в разделе «Заказы подразделений» в системе «Управление закупками».</Prgf>
                        <Img src={img345} />
                        <Prgf>
                            В макете процесс управления закупками не рассматривается, но имитируется, что в системе управления закупками сформированы
                            и обработаны приходные ордера (документы прихода на центральный материальный склад).
                        </Prgf>
                        <Prgf>Для имитации прихода выполните в разделе «Заказы подразделений» следующие действия:</Prgf>
                        <Prgf>
                            <p>
                                1) Отметьте в спецификации заказа подразделения все или часть строк;
                                <br />
                                2) Выполните пользовательскую процедуру
                            </p>
                        </Prgf>
                        <Img src={img346} />
                        <Prgf>На форме параметров процедуры укажите Дату прихода и Цену за единицу.</Prgf>
                        <Img src={img347} />
                        <Prgf>Посмотреть партии, поступившие на склад, можно в разделе «Учет – Товарные запасы – По партиям товара»</Prgf>
                        <Img src={img348} />
                        <Hdr3 id={"prg35"}>3.5. Включение в план выпуска нового заказа и перепланирование</Hdr3>
                        <Prgf>Для добавления нового заказа на производство и перепланирования выполните следующую последовательность действий:</Prgf>
                        <Prgf>
                            <p>
                                1) Добавьте новый заказ на производство и включите его в план выпуска (
                                <ChapterLink id={"back35from31"} dstId={"prg31"} onClick={handleChapterLinkClick}>
                                    см. п.3.1
                                </ChapterLink>
                                );
                                <br />
                                2) На плане выпуска выполните «Формирование – Переформировать производственную программу»;
                            </p>
                        </Prgf>
                        <Img src={img351} />
                        <Prgf>
                            <p>
                                3) На производственной программе выполните формирование потребностей (
                                <ChapterLink id={"back35from33"} dstId={"prg33"} onClick={handleChapterLinkClick}>
                                    см. п.3.3
                                </ChapterLink>
                                );
                                <br />
                                4) Из потребности производства выполните формирование заявки ОМТО на обеспечение материалами и ПКИ (
                                <ChapterLink id={"back35from34"} dstId={"prg34"} onClick={handleChapterLinkClick}>
                                    см. п.3.4
                                </ChapterLink>
                                ).
                            </p>
                        </Prgf>
                        <Hdr2 id={"prg4"}>4. Оперативное управление производством</Hdr2>
                        <Hdr2 id={"add1"}>Приложение: Краткая инструкция по настройке интерфейса</Hdr2>
                    </Box>
                </Grid>
            </Grid>
        </Box>
    );
};

//----------------
//Интерфейс модуля
//----------------

export { MechRecHelp };