davay-popozhe/P8-Panels
1
0
Fork 0
forked from CITKParus/P8-Panels
Code Issues Pull Requests Projects Releases Wiki Activity

WEB APP: Общие стили, приведение стилей в панелях "Производственный план цеха", "Загрузка цеха", "Выдача сменного задания"

Browse Source
This commit is contained in:
Mikhail Chechnev 2024-09-11 21:02:16 +03:00
parent 05d8c38479
commit 04d79a2262
9 changed files with 205 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
app.styles.js Normal file
View File

@ -0,0 +1,29 @@
/*
Парус 8 - Панели мониторинга
Типовые стили
*/
//----------------
//Интерфейс модуля
//----------------
//Стили
export const APP_STYLES = {
SCROLL: {
"&::-webkit-scrollbar": {
height: "8px",
width: "8px"
},
"&::-webkit-scrollbar-track": {
borderRadius: "8px",
backgroundColor: "#EBEBEB"
},
"&::-webkit-scrollbar-thumb": {
borderRadius: "8px",
backgroundColor: "#b4b4b4"
},
"&::-webkit-scrollbar-thumb:hover": {
backgroundColor: "#808080"
}
}
};

5
app/components/p8p_app_workspace.js
View File

@ -29,6 +29,9 @@ import { P8PPanelsMenuDrawer, P8P_PANELS_MENU_PANEL_SHAPE } from "./p8p_panels_m
//Константы
//---------
//Высота главного меню
const APP_BAR_HEIGHT = "64px";
//Стили
const STYLES = {
ROOT_BOX: { display: "flex" },
@ -125,4 +128,4 @@ P8PAppWorkspace.propTypes = {
//Интерфейс модуля
//----------------
export { P8PAppWorkspace };
export { APP_BAR_HEIGHT, P8PAppWorkspace };

17
app/components/p8p_data_grid.js
View File

@ -9,7 +9,7 @@
import React, { useState, useEffect } from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { P8PTable, P8P_TABLE_SIZE, P8P_TABLE_DATA_TYPE, P8P_TABLE_FILTER_SHAPE } from "./p8p_table"; //Таблица
import { P8PTable, P8P_TABLE_SIZE, P8P_TABLE_DATA_TYPE, P8P_TABLE_FILTER_SHAPE, P8P_TABLE_MORE_HEIGHT, P8P_TABLE_FILTERS_HEIGHT } from "./p8p_table"; //Таблица
//---------
//Константы
@ -24,6 +24,12 @@ const P8P_DATA_GRID_DATA_TYPE = P8P_TABLE_DATA_TYPE;
//Формат фильтра
const P8P_DATA_GRID_FILTER_SHAPE = P8P_TABLE_FILTER_SHAPE;
//Высота кнопки догрузки данных
const P8P_DATA_GRID_MORE_HEIGHT = P8P_TABLE_MORE_HEIGHT;
//Высота фильтров таблицы
const P8P_DATA_GRID_FILTERS_HEIGHT = P8P_TABLE_FILTERS_HEIGHT;
//-----------
//Тело модуля
//-----------
@ -187,4 +193,11 @@ P8PDataGrid.propTypes = {
//Интерфейс модуля
//----------------
export { P8P_DATA_GRID_DATA_TYPE, P8P_DATA_GRID_SIZE, P8P_DATA_GRID_FILTER_SHAPE, P8PDataGrid };
export {
P8P_DATA_GRID_DATA_TYPE,
P8P_DATA_GRID_SIZE,
P8P_DATA_GRID_FILTER_SHAPE,
P8P_DATA_GRID_MORE_HEIGHT,
P8P_DATA_GRID_FILTERS_HEIGHT,
P8PDataGrid
};

8
app/components/p8p_table.js
View File

@ -81,6 +81,12 @@ const P8P_TABLE_FILTER_SHAPE = PropTypes.shape({
to: PropTypes.any
});
//Высота кнопки догрузки данных
const P8P_TABLE_MORE_HEIGHT = "49px";
//Высота фильтров таблицы
const P8P_TABLE_FILTERS_HEIGHT = "48px";
//Стили
const STYLES = {
TABLE: {
@ -956,4 +962,4 @@ P8PTable.propTypes = {
//Интерфейс модуля
//----------------
export { P8P_TABLE_DATA_TYPE, P8P_TABLE_SIZE, P8P_TABLE_FILTER_SHAPE, P8PTable };
export { P8P_TABLE_DATA_TYPE, P8P_TABLE_SIZE, P8P_TABLE_FILTER_SHAPE, P8P_TABLE_MORE_HEIGHT, P8P_TABLE_FILTERS_HEIGHT, P8PTable };

99
app/panels/mech_rec_cost_jobs_manage/fcjobssp.js
View File

@ -9,26 +9,63 @@
import React, { useState } from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Typography, Box, Checkbox, Grid, Icon, Button, Dialog, DialogContent, TextField, DialogActions, Tooltip } from "@mui/material"; //Интерфейсные элементы
import { P8PDataGrid, P8P_DATA_GRID_SIZE } from "../../components/p8p_data_grid"; //Таблица данных
import {
Typography,
Box,
Checkbox,
Grid,
Icon,
Button,
Dialog,
DialogContent,
TextField,
DialogActions,
Tooltip,
Stack,
DialogTitle
} from "@mui/material"; //Интерфейсные элементы
import { BUTTONS } from "../../../app.text"; //Текстовые ресурсы
import { APP_BAR_HEIGHT } from "../../components/p8p_app_workspace"; //Заголовок страницы
import { P8PDataGrid, P8P_DATA_GRID_SIZE, P8P_DATA_GRID_MORE_HEIGHT } from "../../components/p8p_data_grid"; //Таблица данных
import { APP_STYLES } from "../../../app.styles"; //Типовые стили
import { P8P_DATA_GRID_CONFIG_PROPS } from "../../config_wrapper"; //Подключение компонентов к настройкам приложения
import { useCostJobsSpecs, useEquipConfiguration } from "./hooks"; //Собственные хуки таблиц
import { MAIN_HEADER_HEIGHT, SUB_HEADER_HEIGHT } from "./mech_rec_cost_jobs_manage"; //Заглавный компонент панели
//---------
//Константы
//---------
const sUnitCostJobsSpecs = "CostJobsSpecs"; //Мнемокод раздела операций
const sUnitCostEquipment = "CostEquipment"; //Мнемокод раздела рабочих центров
//Мнемокод раздела операций
const UNIT_COST_JOBS_SPECS = "CostJobsSpecs";
//Мнемокод раздела рабочих центров
const UNIT_COST_EQUIPMENT = "CostEquipment";
//Высота заголовка таблицы
const TABLE_HEADER_HEIGHT = "35px";
//Высота панели кнопок таблицы
const TABLE_BUTTONS_HEIGHT = "35px";
//Отступ таблицы
const TABLE_PADDING_TOP = "15px";
//Стили
const STYLES = {
CONTAINER: { textAlign: "center" },
DATA_GRID_CONTAINER: { minHeight: "65vh", maxHeight: "65vh" },
TABLE: { paddingTop: "15px" },
TABLE_BUTTONS: { display: "flex", justifyContent: "flex-end" },
DATA_GRID_CONTAINER: morePages => ({
height: `calc(100vh - ${APP_BAR_HEIGHT} - ${MAIN_HEADER_HEIGHT} - ${SUB_HEADER_HEIGHT} - ${TABLE_HEADER_HEIGHT} - ${TABLE_BUTTONS_HEIGHT} - ${TABLE_PADDING_TOP} - 32px - ${
morePages ? P8P_DATA_GRID_MORE_HEIGHT : "0px"
})`,
...APP_STYLES.SCROLL
}),
TABLE: { paddingTop: TABLE_PADDING_TOP },
TABLE_HEADER: { height: TABLE_HEADER_HEIGHT, overflow: "hidden" },
TABLE_BUTTONS: { display: "flex", justifyContent: "flex-end", height: TABLE_BUTTONS_HEIGHT, overflow: "hidden" },
CHECK_BOX: { textAlign: "center" },
JOBS_INFO: { minWidth: "60%", maxWidth: "60%", textAlign: "center" },
EQUIPMENT_INFO: { minWidth: "40%", maxWidth: "40%", textAlign: "center" }
JOBS_INFO: { textAlign: "center" },
EQUIPMENT_INFO: { textAlign: "center" }
};
//Цвета
@ -47,7 +84,7 @@ const dataCellRender = ({ row, columnDef, handleSelectChange, sUnit, selectedRow
//Стиль
let cellStyle = {};
//Если это рабочие центры
if (sUnit === sUnitCostEquipment) {
if (sUnit === UNIT_COST_EQUIPMENT) {
//Признак недоступности
let disabled = true;
//Если в выбранной строке смены указано рабочее место
@ -98,7 +135,7 @@ const dataCellRender = ({ row, columnDef, handleSelectChange, sUnit, selectedRow
};
}
//Если это сменное задание
if (sUnit === sUnitCostJobsSpecs) {
if (sUnit === UNIT_COST_JOBS_SPECS) {
//Если указан станок
if (row["SEQCONFIG"]) {
//Подсвечиваем сменное задание зеленым
@ -193,6 +230,7 @@ const CostJobsSpecsInclude = ({ includeEquipment, setIncludeEquipment, setCostJo
return (
<Dialog open onClose={() => handlePriorEditClose()}>
<DialogTitle>Включить в задание</DialogTitle>
<DialogContent>
<Box>
<TextField
@ -219,15 +257,12 @@ const CostJobsSpecsInclude = ({ includeEquipment, setIncludeEquipment, setCostJo
setState(value);
}}
/>
<Box>
<Button onClick={costJobsSpecIncludeCostEquipment} variant="contained" sx={STYLES.DIALOG_BUTTONS}>
Включить в задание
</Button>
</Box>
<Box></Box>
</Box>
</DialogContent>
<DialogActions>
<Button onClick={() => handlePriorEditClose(null)}>Закрыть</Button>
<Button onClick={costJobsSpecIncludeCostEquipment}>{BUTTONS.OK}</Button>
<Button onClick={() => handlePriorEditClose(null)}>{BUTTONS.CANCEL}</Button>
</DialogActions>
</Dialog>
);
@ -314,7 +349,7 @@ const CostJobsSpecsDataGrid = ({ task, haveNote, fromAction }) => {
//Исходим от раздела
switch (prms.SUNIT) {
//Сменное задание
case sUnitCostJobsSpecs:
case UNIT_COST_JOBS_SPECS:
//Определяем это новое отмеченное сменное задание или сброс старого
selectedRow = costJobsSpecs.selectedRow.NRN ? (costJobsSpecs.selectedRow.NRN === prms.NRN ? null : prms.NRN) : prms.NRN;
//Актуализируем строки
@ -327,7 +362,7 @@ const CostJobsSpecsDataGrid = ({ task, haveNote, fromAction }) => {
//Выходим
break;
//Рабочие центры
case sUnitCostEquipment:
case UNIT_COST_EQUIPMENT:
//Определяем это новое отмеченное сменное задание или сброс старого
selectedRow = equipConfiguration.selectedRow.NRN ? (equipConfiguration.selectedRow.NRN === prms.NRN ? null : prms.NRN) : prms.NRN;
//Актуализируем строки
@ -356,23 +391,23 @@ const CostJobsSpecsDataGrid = ({ task, haveNote, fromAction }) => {
return (
<div style={STYLES.CONTAINER}>
<Grid container spacing={2}>
<Grid item sx={STYLES.JOBS_INFO}>
<Typography variant={"h6"}>Сменное задание</Typography>
<Grid item sx={STYLES.JOBS_INFO} xs={6}>
<Typography sx={STYLES.TABLE_HEADER} variant={"h6"} color={"text.secondary"}>
Сменное задание
</Typography>
{costJobsSpecs.dataLoaded ? (
<>
<Box sx={STYLES.TABLE_BUTTONS}>
<Tooltip title={haveNote ? "Сменное задание имеет строку с примечанием" : null}>
<Box>
<Button variant="contained" size="small" disabled={haveNote} onClick={costJobsSpecIssue}>
Выдать задания
</Button>
</Box>
</Tooltip>
</Box>
<Box sx={STYLES.TABLE}>
<P8PDataGrid
{...P8P_DATA_GRID_CONFIG_PROPS}
containerComponentProps={{ sx: STYLES.DATA_GRID_CONTAINER, elevation: 1 }}
containerComponentProps={{ sx: STYLES.DATA_GRID_CONTAINER(costJobsSpecs.morePages), elevation: 1 }}
columnsDef={costJobsSpecs.columnsDef}
rows={costJobsSpecs.rows}
size={P8P_DATA_GRID_SIZE.SMALL}
@ -384,7 +419,7 @@ const CostJobsSpecsDataGrid = ({ task, haveNote, fromAction }) => {
dataCellRender({
...prms,
handleSelectChange,
sUnit: sUnitCostJobsSpecs,
sUnit: UNIT_COST_JOBS_SPECS,
selectedRow: costJobsSpecs.selectedRow.NRN,
selectedJobSpec: costJobsSpecs.selectedRow
})
@ -396,11 +431,14 @@ const CostJobsSpecsDataGrid = ({ task, haveNote, fromAction }) => {
</>
) : null}
</Grid>
<Grid item sx={STYLES.EQUIPMENT_INFO}>
<Typography variant={"h6"}>Рабочие центры</Typography>
<Grid item sx={STYLES.EQUIPMENT_INFO} xs={6}>
<Typography sx={STYLES.TABLE_HEADER} variant={"h6"} color={"text.secondary"}>
Рабочие центры
</Typography>
{equipConfiguration.dataLoaded ? (
<>
<Box sx={STYLES.TABLE_BUTTONS}>
<Stack direction={"row"} spacing={1}>
<Button
variant="contained"
size="small"
@ -413,7 +451,6 @@ const CostJobsSpecsDataGrid = ({ task, haveNote, fromAction }) => {
>
Включить в задание
</Button>
<Box ml={1}>
<Button
variant="contained"
size="small"
@ -422,12 +459,12 @@ const CostJobsSpecsDataGrid = ({ task, haveNote, fromAction }) => {
>
Исключить из задания
</Button>
</Box>
</Stack>
</Box>
<Box sx={STYLES.TABLE}>
<P8PDataGrid
{...P8P_DATA_GRID_CONFIG_PROPS}
containerComponentProps={{ sx: STYLES.DATA_GRID_CONTAINER, elevation: 1 }}
containerComponentProps={{ sx: STYLES.DATA_GRID_CONTAINER(equipConfiguration.morePages), elevation: 1 }}
columnsDef={equipConfiguration.columnsDef}
rows={equipConfiguration.rows}
size={P8P_DATA_GRID_SIZE.SMALL}
@ -439,7 +476,7 @@ const CostJobsSpecsDataGrid = ({ task, haveNote, fromAction }) => {
dataCellRender({
...prms,
handleSelectChange,
sUnit: sUnitCostEquipment,
sUnit: UNIT_COST_EQUIPMENT,
selectedRow: equipConfiguration.selectedRow.NRN,
selectedJobSpec: costJobsSpecs.selectedRow
})

17
app/panels/mech_rec_cost_jobs_manage/mech_rec_cost_jobs_manage.js
View File

@ -18,8 +18,16 @@ import { useCostJobs, useFilteredFcjobs } from "./hooks"; //Вспомогате
//Константы
//---------
//Высота основного заголовка
const MAIN_HEADER_HEIGHT = "35px";
//Высота подзаголовка
const SUB_HEADER_HEIGHT = "35px";
//Стили
const STYLES = {
MAIN_HEADER: { height: MAIN_HEADER_HEIGHT, overflow: "hidden" },
SUB_HEADER: { height: SUB_HEADER_HEIGHT, overflow: "hidden" },
JOBS_FINDER: { marginTop: "10px", marginLeft: "10px", width: "93%" },
JOBS_LIST_ITEM_PRIMARY: { wordWrap: "break-word" },
JOBS_BUTTON: { position: "absolute" },
@ -128,8 +136,11 @@ const MechRecCostJobs = () => {
<div style={STYLES.CONTAINER}>
{state.selectedJob.NRN ? (
<>
<Typography variant={"h6"}>{`Сменное задание №${state.selectedJob.SDOC_NUMB} на ${state.selectedJob.SPERIOD}`}</Typography>
<Typography variant={"h6"}>{`${state.selectedJob.SSUBDIV}`}</Typography>
<Typography
sx={STYLES.MAIN_HEADER}
variant={"h6"}
>{`Сменное задание №${state.selectedJob.SDOC_NUMB} на ${state.selectedJob.SPERIOD}`}</Typography>
<Typography sx={STYLES.SUB_HEADER} variant={"h6"}>{`${state.selectedJob.SSUBDIV}`}</Typography>
<CostJobsSpecsDataGrid task={state.selectedJob.NRN} haveNote={state.selectedJob.NHAVE_NOTE} fromAction={state.fromAction} />
</>
) : !state.selectedJob.NRN ? (
@ -144,4 +155,4 @@ const MechRecCostJobs = () => {
//Интерфейс модуля
//----------------
export { MechRecCostJobs };
export { MAIN_HEADER_HEIGHT, SUB_HEADER_HEIGHT, MechRecCostJobs };

14
app/panels/mech_rec_dept_cost_jobs/components/filter.js
View File

@ -34,9 +34,19 @@ const currentDate = new Date();
const currentMonth = currentDate.getUTCMonth() + 1;
const currentYear = currentDate.getUTCFullYear();
//Высота фильтра
const FILTER_HEIGHT = "68px";
//Стили
const STYLES = {
FILTER_CONTAINER: { display: "flex", flexDirection: "row", justifyContent: "flex-start", alignItems: "flex-end" },
FILTER_CONTAINER: {
height: FILTER_HEIGHT,
overflow: "hidden",
display: "flex",
flexDirection: "row",
justifyContent: "flex-start",
alignItems: "flex-end"
},
FILTER_BLOCK: { maxWidth: "200px", display: "flex" }
};
@ -135,4 +145,4 @@ FilterComponent.propTypes = {
//Интерфейс модуля
//----------------
export { FilterComponent };
export { FILTER_HEIGHT, FilterComponent };

33
app/panels/mech_rec_dept_cost_jobs/mech_rec_dept_cost_jobs.js
View File

@ -10,9 +10,11 @@
import React from "react"; //Классы React
import { Typography, Box } from "@mui/material"; //Интерфейсные элементы
import { P8PDataGrid, P8P_DATA_GRID_SIZE } from "../../components/p8p_data_grid"; //Таблица данных
import { APP_STYLES } from "../../../app.styles"; //Типовые стили
import { APP_BAR_HEIGHT } from "../../components/p8p_app_workspace"; //Заголовок страницы
import { P8P_DATA_GRID_CONFIG_PROPS } from "../../config_wrapper"; //Подключение компонентов к настройкам приложения
import { useMechRecDeptCostJobs, useFilter } from "./hooks"; //Кастомные состояния
import { FilterComponent } from "./components/filter"; //Компонент фильтра
import { FILTER_HEIGHT, FilterComponent } from "./components/filter"; //Компонент фильтра
//---------
//Константы
@ -24,21 +26,26 @@ const currentMonth = currentDate.getUTCMonth() + 1;
const currentYear = currentDate.getUTCFullYear();
//Кастомные цвета
const colors = {
lightred: "#ef8989",
lightyellow: "#f5f5b0",
blue: "#0097ff"
const COLORS = {
LIGHTRED: "#ef8989",
LIGHTYELLOW: "#f5f5b0",
BLUE: "#0097ff"
};
//Высота заголовка
const TITLE_HEIGHT = "35px";
//Нижний отступ заголовка
const TITLE_PADDING_BOTTOM = "15px";
//Стили
const STYLES = {
CONTAINER: { textAlign: "center", paddingTop: "10px" },
TITLE: { paddingBottom: "15px" },
TITLE: { height: TITLE_HEIGHT, overflow: "hidden", paddingBottom: TITLE_PADDING_BOTTOM },
DATA_GRID_CONTAINER: {
minWidth: "700px",
maxWidth: "100vw",
minHeight: "calc(100vh - 250px)",
maxHeight: "calc(100vh - 250px)"
height: `calc(100vh - ${APP_BAR_HEIGHT} - ${TITLE_HEIGHT} - ${TITLE_PADDING_BOTTOM} - ${FILTER_HEIGHT} - 10px)`,
width: "99vw",
...APP_STYLES.SCROLL
},
DATA_GRID_CELL: (row, columnDef) => {
//Определяем тип дня
@ -53,12 +60,12 @@ const STYLES = {
...(dayType
? {
backgroundColor: [1, 3].includes(dayType) ? "lightgrey" : dayType === 4 ? "lightgreen" : null,
color: [2, 3].includes(dayType) ? colors.blue : null
color: [2, 3].includes(dayType) ? COLORS.BLUE : null
}
: procentLoad || procentLoad === 0
? {
backgroundColor:
procentLoad >= 85 ? "lightgreen" : procentLoad >= 50 ? colors.lightyellow : procentLoad > 0 ? colors.lightred : "lightgrey"
procentLoad >= 85 ? "lightgreen" : procentLoad >= 50 ? COLORS.LIGHTYELLOW : procentLoad > 0 ? COLORS.LIGHTRED : "lightgrey"
}
: {})
};
@ -141,7 +148,7 @@ const MechRecDeptCostJobs = () => {
{costJobs.dataLoaded ? (
<P8PDataGrid
{...P8P_DATA_GRID_CONFIG_PROPS}
containerComponentProps={{ elevation: 6, style: STYLES.DATA_GRID_CONTAINER }}
containerComponentProps={{ elevation: 6, sx: STYLES.DATA_GRID_CONTAINER }}
fixedHeader={costJobs.fixedHeader}
fixedColumns={costJobs.fixedColumns}
columnsDef={costJobs.columnsDef}

26
app/panels/mech_rec_dept_cost_prod_plans/mech_rec_dept_cost_prod_plans.js
View File

@ -10,6 +10,8 @@
import React, { useContext, useState } from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Drawer, Fab, Box, List, ListItemButton, ListItemText, Typography, TextField, Link, Grid } from "@mui/material"; //Интерфейсные элементы
import { APP_STYLES } from "../../../app.styles"; //Типовые стили
import { APP_BAR_HEIGHT } from "../../components/p8p_app_workspace"; //Заголовок страницы
import { useDeptCostProdPlans, useFilteredPlans } from "./hooks"; //Вспомогательные хуки
import { P8PDataGrid, P8P_DATA_GRID_SIZE } from "../../components/p8p_data_grid"; //Таблица данных
import { P8P_DATA_GRID_CONFIG_PROPS } from "../../config_wrapper"; //Подключение компонентов к настройкам приложения
@ -21,6 +23,15 @@ import { CostRouteListsDataGridDialog } from "./fcroutlst"; //Диалог ма
//Константы
//---------
//Высота заголовка
const TITLE_HEIGHT = "35px";
//Верхний отступ заголовка
const TITLE_PADDING_TOP = "10px";
//Нижний отступ заголовка
const TITLE_PADDING_BOTTOM = "20px";
//Стили
const STYLES = {
PLANS_FINDER: { marginTop: "10px", marginLeft: "10px", width: "93%" },
@ -33,7 +44,12 @@ const STYLES = {
[`& .MuiDrawer-paper`]: { width: "350px", display: "inline-block", boxSizing: "border-box" }
},
CONTAINER: { textAlign: "center" },
DATA_GRID_CONTAINER: { minWidth: "95vw", maxWidth: "95vw", minHeight: "80vh", maxHeight: "80vh" },
TITLE: { height: TITLE_HEIGHT, overflow: "hidden", paddingTop: TITLE_PADDING_TOP, paddingBottom: TITLE_PADDING_BOTTOM, display: "inline-table" },
DATA_GRID_CONTAINER: {
height: `calc(100vh - ${APP_BAR_HEIGHT} - ${TITLE_HEIGHT} - ${TITLE_PADDING_TOP} - ${TITLE_PADDING_BOTTOM} - 29px)`,
width: "98vw",
...APP_STYLES.SCROLL
},
DATA_GRID_GROUP_CELL: { padding: "2px" },
DATA_GRID_CELL: { padding: "8px", maxWidth: "300px", textOverflow: "ellipsis", overflow: "hidden", whiteSpace: "pre" },
DATA_GRID_CELL_STATUS: (currentStyle, row) => ({ backgroundColor: getRowBackgroudColor(row), ...currentStyle }),
@ -263,7 +279,7 @@ const MechRecDeptCostProdPlans = () => {
onClick={handlePlanClick}
/>
</Drawer>
<Grid container spacing={1}>
<Grid container>
<Grid item xs={12}>
<Box display="flex" justifyContent="center" alignItems="center">
{state.dataLoaded ? (
@ -271,13 +287,13 @@ const MechRecDeptCostProdPlans = () => {
<InlineMsgInfo okBtn={false} text={"В плане отсутствуют записи спецификации"} />
) : (
<Box sx={STYLES.CONTAINER}>
<Typography pt={1} variant={"h6"}>
<Typography sx={STYLES.TITLE} variant={"h6"}>
{`Производственный план цеха №${state.selectedPlan.SSUBDIV} на ${state.selectedPlan.SPERIOD}`}
</Typography>
<Box pt={2.5}>
<Box>
<P8PDataGrid
{...P8P_DATA_GRID_CONFIG_PROPS}
containerComponentProps={{ elevation: 6, style: STYLES.DATA_GRID_CONTAINER }}
containerComponentProps={{ elevation: 6, sx: STYLES.DATA_GRID_CONTAINER }}
fixedHeader={state.fixedHeader}
fixedColumns={state.fixedColumns}
columnsDef={state.columnsDef}