forked from CITKParus/P8-Panels
103 lines
3.2 KiB
JavaScript
103 lines
3.2 KiB
JavaScript
/*
|
||
Парус 8 - Панели мониторинга - ПУП - Мониторинг сборки изделий
|
||
Панель мониторинга: Информация об объекте
|
||
*/
|
||
|
||
//---------------------
|
||
//Подключение библиотек
|
||
//---------------------
|
||
|
||
import React from "react"; //Классы React
|
||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||
import { Typography, Box, ImageList, ImageListItem } from "@mui/material"; //Интерфейсные элементы
|
||
import { ProgressBox } from "../elements/progressBox"; //Блок информации по прогрессу объекта
|
||
|
||
//---------
|
||
//Константы
|
||
//---------
|
||
|
||
//Стили
|
||
const STYLES = {
|
||
PLAN_INFO: {
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
flexDirection: "column",
|
||
gap: "24px",
|
||
border: "1px solid",
|
||
borderRadius: "25px"
|
||
}
|
||
};
|
||
|
||
//------------------------------------
|
||
//Вспомогательные функции и компоненты
|
||
//------------------------------------
|
||
|
||
//Картинка объекта
|
||
const CardImage = ({ card }) => {
|
||
return (
|
||
<Box width={180} height={180}>
|
||
<ImageList variant="masonry" cols={1} gap={8}>
|
||
<ImageListItem key={1}>
|
||
<img src={`data:image/png;base64,${card["#text"]}`} alt={"Image not loaded."} loading="lazy" width={180} />
|
||
{/* <img src={`./${airplaneImg}`} alt={"Image not loaded."} loading="lazy" width={180} /> */}
|
||
</ImageListItem>
|
||
</ImageList>
|
||
</Box>
|
||
);
|
||
};
|
||
|
||
//Контроль свойств - Заголовок первого уровня
|
||
CardImage.propTypes = {
|
||
card: PropTypes.object
|
||
};
|
||
|
||
//-----------
|
||
//Тело модуля
|
||
//-----------
|
||
|
||
//Информация об объекте
|
||
const CardBlock = ({ card, handleCardClick }) => {
|
||
return (
|
||
<Box sx={STYLES.PLAN_INFO} onClick={() => handleCardClick(card)}>
|
||
<CardImage card={card} />
|
||
<Box textAlign="center">
|
||
<Typography variant="UDO_body1" color="text.secondary.fontColor">
|
||
Номер борта
|
||
</Typography>
|
||
<Typography variant="h2">{card.SNUMB}</Typography>
|
||
</Box>
|
||
<ProgressBox
|
||
prms={{
|
||
NPROGRESS: card.NPROGRESS,
|
||
SDETAIL: card.SDETAIL,
|
||
width: "155px",
|
||
height: "155px",
|
||
progressVariant: "h3",
|
||
detailVariant: "UDO_body2"
|
||
}}
|
||
/>
|
||
<Box>
|
||
<Typography variant="UDO_body1" color="text.secondary.fontColor">
|
||
Год выпуска:
|
||
</Typography>
|
||
<Typography variant="subtitle1" mt={-1}>
|
||
{card.NYEAR}
|
||
</Typography>
|
||
</Box>
|
||
</Box>
|
||
);
|
||
};
|
||
|
||
//Контроль свойств - Заголовок первого уровня
|
||
CardBlock.propTypes = {
|
||
card: PropTypes.object,
|
||
handleCardClick: PropTypes.func
|
||
};
|
||
|
||
//----------------
|
||
//Интерфейс модуля
|
||
//----------------
|
||
|
||
export { CardBlock };
|