forked from CITKParus/P8-Panels
340 lines
16 KiB
JavaScript
340 lines
16 KiB
JavaScript
/*
|
||
Парус 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 };
|