forked from CITKParus/P8-Panels
290 lines
12 KiB
JavaScript
290 lines
12 KiB
JavaScript
/*
|
||
Парус 8 - Панели мониторинга - ПУП - Мониторинг сборки изделий
|
||
Панель мониторинга: Детализация по объекту
|
||
*/
|
||
|
||
//---------------------
|
||
//Подключение библиотек
|
||
//---------------------
|
||
|
||
import React from "react"; //Классы React
|
||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||
import { Box, Grid, Container, Button, Typography } from "@mui/material"; //Интерфейсные элементы
|
||
import { ProgressBox } from "../elements/progressBox"; //Блок информации по прогрессу объекта
|
||
import { P8PDataGrid, P8P_DATA_GRID_SIZE } from "../../../components/p8p_data_grid"; //Таблица данных
|
||
import { P8P_DATA_GRID_CONFIG_PROPS } from "../../../config_wrapper"; //Подключение компонентов к настройкам приложения
|
||
import { useCostProductComposition, useCostRouteLists, useCostDeliverySheets } from "../backend"; //Компоненты панели
|
||
|
||
//---------
|
||
//Константы
|
||
//---------
|
||
|
||
//Стили
|
||
const STYLES = {
|
||
TABLE_INFO_MAIN: {
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
flexDirection: "column",
|
||
border: "1px solid",
|
||
borderRadius: "25px",
|
||
height: "35vh"
|
||
},
|
||
TABLE_INFO_SUB: {
|
||
margin: "21.6px 0px",
|
||
maxHeight: "100%",
|
||
overflow: "auto",
|
||
textAlign: "center",
|
||
width: "100%"
|
||
},
|
||
DETAIL_INFO: {
|
||
display: "flex",
|
||
justifyContent: "space-around",
|
||
alignItems: "center",
|
||
border: "1px solid",
|
||
borderRadius: "25px",
|
||
height: "17vh"
|
||
},
|
||
PRODUCT_SELECTOR: {
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
flexDirection: "column",
|
||
border: "1px solid",
|
||
borderRadius: "25px",
|
||
height: "53vh",
|
||
marginTop: "16px"
|
||
},
|
||
PLAN_INFO_MAIN: {
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
gap: "16px"
|
||
},
|
||
PLAN_INFO_SUB: {
|
||
display: "flex",
|
||
justifyContent: "space-between",
|
||
width: "280px",
|
||
borderBottom: "1px solid"
|
||
}
|
||
};
|
||
|
||
//------------------------------------
|
||
//Вспомогательные функции и компоненты
|
||
//------------------------------------
|
||
|
||
//Информация об объекте
|
||
const CardDetailInfo = ({ cardInfo }) => {
|
||
return (
|
||
<>
|
||
<Box sx={STYLES.PLAN_INFO_MAIN}>
|
||
<Box sx={STYLES.PLAN_INFO_SUB}>
|
||
<Typography variant="UDO_body1" mt={1}>
|
||
Номер борта:
|
||
</Typography>
|
||
<Typography variant="subtitle2">{cardInfo.SNUMB}</Typography>
|
||
</Box>
|
||
<Box sx={STYLES.PLAN_INFO_SUB}>
|
||
<Typography variant="UDO_body1" mt={1}>
|
||
Год выпуска:
|
||
</Typography>
|
||
<Typography variant="subtitle2">{cardInfo.NYEAR}</Typography>
|
||
</Box>
|
||
</Box>
|
||
<ProgressBox
|
||
prms={{
|
||
NPROGRESS: cardInfo.NPROGRESS,
|
||
SDETAIL: cardInfo.SDETAIL,
|
||
width: "110px",
|
||
height: "110px",
|
||
progressVariant: "subtitle2",
|
||
detailVariant: "body3"
|
||
}}
|
||
/>
|
||
</>
|
||
);
|
||
};
|
||
|
||
//Контроль свойств - Информация об объекте
|
||
CardDetailInfo.propTypes = {
|
||
cardInfo: PropTypes.object
|
||
};
|
||
|
||
//Детали объекта
|
||
const CardSelector = ({ products, setCostProductComposition }) => {
|
||
//При выборе детали в SVG
|
||
const handleProductClick = product => {
|
||
setCostProductComposition(pv => ({ ...pv, selectedProduct: product }));
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<Box sx={STYLES.PLAN_INFO_MAIN}>
|
||
{products.map(el => (
|
||
<Button key={el.NRN} onClick={() => handleProductClick(el.NRN)}>{`${el.SNAME}`}</Button>
|
||
))}
|
||
</Box>
|
||
</>
|
||
);
|
||
};
|
||
|
||
//Контроль свойств - Детали объекта
|
||
CardSelector.propTypes = {
|
||
products: PropTypes.array,
|
||
setCostProductComposition: PropTypes.func
|
||
};
|
||
|
||
//Генерация представления ячейки заголовка
|
||
const headCellRender = ({ columnDef }) => {
|
||
//Описываем общий стиль
|
||
let cellStyle = { padding: "2px 5px", fontSize: "12px", textAlign: "center", lineHeight: "1rem" };
|
||
let stackProps = { justifyContent: "center" };
|
||
//Дополнительные свойства
|
||
switch (columnDef.name) {
|
||
case "NREMN_LABOUR":
|
||
//Добавляем максимальную ширину
|
||
cellStyle = { ...cellStyle, maxWidth: "90px" };
|
||
break;
|
||
case "NDEFICIT":
|
||
//Добавляем максимальную ширину
|
||
cellStyle = { ...cellStyle, maxWidth: "55px" };
|
||
break;
|
||
case "NAPPLICABILITY":
|
||
//Добавляем максимальную ширину
|
||
cellStyle = { ...cellStyle, maxWidth: "90px" };
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
return {
|
||
stackProps,
|
||
cellStyle
|
||
};
|
||
};
|
||
|
||
//Генерация заливки строки исходя от значений
|
||
const dataCellRender = ({ row, columnDef }) => {
|
||
//Описываем общий стиль
|
||
let cellStyle = { padding: "2px 5px", fontSize: "12px" };
|
||
//Для всех кроме содержания и номенклатуры добавляем выравнивание
|
||
switch (columnDef.name) {
|
||
case "SOPERATION":
|
||
break;
|
||
case "SNOMEN":
|
||
break;
|
||
default:
|
||
//Добавляем выравнивание
|
||
cellStyle = { ...cellStyle, textAlign: "center" };
|
||
break;
|
||
}
|
||
return {
|
||
cellStyle,
|
||
data: row[columnDef]
|
||
};
|
||
};
|
||
|
||
//-----------
|
||
//Тело модуля
|
||
//-----------
|
||
|
||
//Детализация по объекту
|
||
const CardDetail = ({ card, handleBackClick }) => {
|
||
//Собственное состояние - данные производственных составов SVG
|
||
const [costProductComposition, setCostProductComposition] = useCostProductComposition(card.NRN);
|
||
//Собственное состояние - таблица данных маршрутных листов
|
||
const [costRouteLists, setCostRouteLists] = useCostRouteLists(card.NRN, costProductComposition.selectedProduct);
|
||
//Собственное состояние - таблица данных комплектовочных ведомостей
|
||
const [сostDeliverySheets, setСostDeliverySheets] = useCostDeliverySheets(card.NRN, costProductComposition.selectedProduct);
|
||
|
||
//При изменении состояния сортировки маршрутных листов
|
||
const costRouteListsOrderChanged = ({ orders }) => setCostRouteLists(pv => ({ ...pv, orders: [...orders], pageNumber: 1, reload: true }));
|
||
|
||
//При изменении количества отображаемых страниц маршрутных листов
|
||
const costRouteListsPagesCountChanged = () => setCostRouteLists(pv => ({ ...pv, pageNumber: pv.pageNumber + 1, reload: true }));
|
||
|
||
//При изменении состояния сортировки комплектовочных ведомостей
|
||
const СostDeliverySheetsOrderChanged = ({ orders }) => setСostDeliverySheets(pv => ({ ...pv, orders: [...orders], pageNumber: 1, reload: true }));
|
||
|
||
//При изменении количества отображаемых страниц комплектовочных ведомостей
|
||
const СostDeliverySheetsPagesCountChanged = () => setСostDeliverySheets(pv => ({ ...pv, pageNumber: pv.pageNumber + 1, reload: true }));
|
||
|
||
return (
|
||
<Container>
|
||
<Button onClick={() => handleBackClick()}>Назад</Button>
|
||
<Grid container spacing={2}>
|
||
<Grid item xs={5}>
|
||
<Box sx={STYLES.TABLE_INFO_MAIN}>
|
||
<Box sx={STYLES.TABLE_INFO_SUB}>
|
||
{!costRouteLists.dataLoaded ? (
|
||
<Typography variant="UDO_body2">Выберите агрегат самолёта, чтобы увидеть информацию</Typography>
|
||
) : costRouteLists.rows.length === 0 ? (
|
||
<Typography variant="subtitle2">Нет данных по МК</Typography>
|
||
) : (
|
||
<>
|
||
<Typography variant="h4">Маршрутная карта</Typography>
|
||
<P8PDataGrid
|
||
{...P8P_DATA_GRID_CONFIG_PROPS}
|
||
columnsDef={costRouteLists.columnsDef}
|
||
rows={costRouteLists.rows}
|
||
size={P8P_DATA_GRID_SIZE.SMALL}
|
||
morePages={costRouteLists.morePages}
|
||
reloading={costRouteLists.reload}
|
||
dataCellRender={dataCellRender}
|
||
headCellRender={headCellRender}
|
||
onOrderChanged={costRouteListsOrderChanged}
|
||
onPagesCountChanged={costRouteListsPagesCountChanged}
|
||
/>
|
||
</>
|
||
)}
|
||
</Box>
|
||
</Box>
|
||
<Box sx={STYLES.TABLE_INFO_MAIN} mt={2}>
|
||
<Box sx={STYLES.TABLE_INFO_SUB}>
|
||
{!сostDeliverySheets.dataLoaded ? (
|
||
<Typography variant="UDO_body2">Выберите агрегат самолёта, чтобы увидеть информацию</Typography>
|
||
) : сostDeliverySheets.rows.length === 0 ? (
|
||
<Typography variant="subtitle2">Нет данных по КВ</Typography>
|
||
) : (
|
||
<>
|
||
<Typography variant="h4">Дефицит по КВ</Typography>
|
||
<P8PDataGrid
|
||
{...P8P_DATA_GRID_CONFIG_PROPS}
|
||
columnsDef={сostDeliverySheets.columnsDef}
|
||
rows={сostDeliverySheets.rows}
|
||
size={P8P_DATA_GRID_SIZE.SMALL}
|
||
morePages={сostDeliverySheets.morePages}
|
||
reloading={сostDeliverySheets.reload}
|
||
dataCellRender={dataCellRender}
|
||
headCellRender={headCellRender}
|
||
onOrderChanged={СostDeliverySheetsOrderChanged}
|
||
onPagesCountChanged={СostDeliverySheetsPagesCountChanged}
|
||
/>
|
||
</>
|
||
)}
|
||
</Box>
|
||
</Box>
|
||
</Grid>
|
||
<Grid item xs={7}>
|
||
<Box sx={STYLES.DETAIL_INFO}>
|
||
<CardDetailInfo cardInfo={card} />
|
||
</Box>
|
||
<Box sx={STYLES.PRODUCT_SELECTOR}>
|
||
<CardSelector products={costProductComposition.products} setCostProductComposition={setCostProductComposition} />
|
||
</Box>
|
||
</Grid>
|
||
</Grid>
|
||
</Container>
|
||
);
|
||
};
|
||
|
||
//Контроль свойств - Детализация по объекту
|
||
CardDetail.propTypes = {
|
||
card: PropTypes.object,
|
||
handleBackClick: PropTypes.func
|
||
};
|
||
|
||
//----------------
|
||
//Интерфейс модуля
|
||
//----------------
|
||
|
||
export { CardDetail };
|