WEB APP: ЦИТК-893 - Инструкции ПУДП (главы 1, 2)

app/panels/mech_rec_help/index.js

@@ -0,0 +1,16 @@
+/*
+    Парус 8 - Панели мониторинга - ПУДП - Пользовательская инструкция
+    Панель мониторинга: Пользовательская инструкция
+*/
+
+//---------------------
+//Подключение библиотек
+//---------------------
+
+import { MechRecHelp } from "./mech_rec_help"; //Корневая панель пользовательской инструкции
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+export const RootClass = MechRecHelp;

app/panels/mech_rec_help/mech_rec_help.js

@@ -0,0 +1,339 @@
+/*
+    Парус 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"; //Изображение
+
+//---------
+//Константы
+//---------
+
+//Оглавление
+const CONTENT = [
+    { id: "prg1", caption: "1. О структуре производства" },
+    { id: "prg2", caption: "2. НСИ о продукции" }
+];
+
+//Стили
+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 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>
+                        <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} />
+                    </Box>
+                </Grid>
+            </Grid>
+        </Box>
+    );
+};
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+export { MechRecHelp };

p8panels.config

@@ -25,6 +25,7 @@
             <MenuItem parent="{BA073333-DFBC-4BA3-8EA7-172F3F6B4FEE}" name="ShowMechRecPanelDeptCostJobsManage" caption="Выдача сменного задания" panelName="MechRecCostJobsManage"/>
             <MenuItem parent="{BA073333-DFBC-4BA3-8EA7-172F3F6B4FEE}" name="ShowMechRecPanelDeptCostJobs" caption="Загрузка цеха" panelName="MechRecDeptCostJobs"/>
             <MenuItem parent="{BA073333-DFBC-4BA3-8EA7-172F3F6B4FEE}" name="ShowMechRecPanelAssemblyMon" caption="Мониторинг сборки изделий" panelName="MechRecAssemblyMon"/>
+            <MenuItem parent="{BA073333-DFBC-4BA3-8EA7-172F3F6B4FEE}" name="ShowMechRecPanelHelp" caption="Инструкции ПУДП" panelName="MechRecHelp"/>
         </App>
     </MenuItems>
     <Panels urlBase="Modules/p8-panels/#/">
@@ -67,7 +68,7 @@
                 path="prj_help"
                 icon="help_outline"
                 showInPanelsList="true"
-                preview="./img/prj_help.jpg"/>
+                preview="./img/help.jpg"/>
         <Panel
                 name="EqsPrfrm"
                 group="Управление техническим обслуживанием и ремонтами"
@@ -128,6 +129,16 @@
                 icon="monitor_heart"
                 showInPanelsList="true"
                 preview="./img/mech_rec_assembly_mon.jpg"/>
+        <Panel
+                name="MechRecHelp"
+                group="Планирование и учёт в дискретном производстве"
+                caption="Инструкции ПУДП"
+                desc="Краткое описание работы с макетом &quot;Оперативное управление производством&quot;"
+                url="mech_rec_help"
+                path="mech_rec_help"
+                icon="help_outline"
+                showInPanelsList="true"
+                preview="./img/help.jpg"/>
         <Panel
                 name="Samples"
                 group=""