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

app.styles.js

@@ -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"
+        }
+    }
+};

app/components/p8p_app_workspace.js

@@ -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 };

app/components/p8p_data_grid.js

@@ -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
+};

app/components/p8p_table.js

@@ -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 };

app/panels/mech_rec_cost_jobs_manage/fcjobssp.js

@@ -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 {
-import { P8PDataGrid, P8P_DATA_GRID_SIZE } from "../../components/p8p_data_grid"; //Таблица данных
+    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" },
+    DATA_GRID_CONTAINER: morePages => ({
-    TABLE: { paddingTop: "15px" },
+        height: `calc(100vh - ${APP_BAR_HEIGHT} - ${MAIN_HEADER_HEIGHT} - ${SUB_HEADER_HEIGHT} - ${TABLE_HEADER_HEIGHT} - ${TABLE_BUTTONS_HEIGHT} - ${TABLE_PADDING_TOP} - 32px - ${
-    TABLE_BUTTONS: { display: "flex", justifyContent: "flex-end" },
+            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" },
+    JOBS_INFO: { textAlign: "center" },
-    EQUIPMENT_INFO: { minWidth: "40%", maxWidth: "40%", 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>
+                    <Box></Box>
-                        <Button onClick={costJobsSpecIncludeCostEquipment} variant="contained" sx={STYLES.DIALOG_BUTTONS}>
-                            Включить в задание
-                        </Button>
-                    </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}>
+                <Grid item sx={STYLES.JOBS_INFO} xs={6}>
-                    <Typography variant={"h6"}>Сменное задание</Typography>
+                    <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 variant="contained" size="small" disabled={haveNote} onClick={costJobsSpecIssue}>
+                                        Выдать задания
-                                            Выдать задания
+                                    </Button>
-                                        </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,24 +431,26 @@ const CostJobsSpecsDataGrid = ({ task, haveNote, fromAction }) => {
                         </>
                     ) : null}
                 </Grid>
-                <Grid item sx={STYLES.EQUIPMENT_INFO}>
+                <Grid item sx={STYLES.EQUIPMENT_INFO} xs={6}>
-                    <Typography variant={"h6"}>Рабочие центры</Typography>
+                    <Typography sx={STYLES.TABLE_HEADER} variant={"h6"} color={"text.secondary"}>
+                        Рабочие центры
+                    </Typography>
                     {equipConfiguration.dataLoaded ? (
                         <>
                             <Box sx={STYLES.TABLE_BUTTONS}>
-                                <Button
+                                <Stack direction={"row"} spacing={1}>
-                                    variant="contained"
+                                    <Button
-                                    size="small"
+                                        variant="contained"
-                                    disabled={
+                                        size="small"
-                                        !equipConfiguration.selectedRow.NRN ||
+                                        disabled={
-                                        !costJobsSpecs.selectedRow.NRN ||
+                                            !equipConfiguration.selectedRow.NRN ||
-                                        (equipConfiguration.selectedRow.NRN && equipConfiguration.selectedRow.BFULL_LOADED)
+                                            !costJobsSpecs.selectedRow.NRN ||
-                                    }
+                                            (equipConfiguration.selectedRow.NRN && equipConfiguration.selectedRow.BFULL_LOADED)
-                                    onClick={handleIncludeEquipmentOpen}
+                                        }
-                                >
+                                        onClick={handleIncludeEquipmentOpen}
-                                    Включить в задание
+                                    >
-                                </Button>
+                                        Включить в задание
-                                <Box ml={1}>
+                                    </Button>
                                     <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
                                         })

app/panels/mech_rec_cost_jobs_manage/mech_rec_cost_jobs_manage.js

@@ -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
-                        <Typography variant={"h6"}>{`${state.selectedJob.SSUBDIV}`}</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 };

app/panels/mech_rec_dept_cost_jobs/components/filter.js

@@ -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 };

app/panels/mech_rec_dept_cost_jobs/mech_rec_dept_cost_jobs.js

@@ -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 = {
+const COLORS = {
-    lightred: "#ef8989",
+    LIGHTRED: "#ef8989",
-    lightyellow: "#f5f5b0",
+    LIGHTYELLOW: "#f5f5b0",
-    blue: "#0097ff"
+    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",
+        height: `calc(100vh - ${APP_BAR_HEIGHT} - ${TITLE_HEIGHT} - ${TITLE_PADDING_BOTTOM} - ${FILTER_HEIGHT} - 10px)`,
-        maxWidth: "100vw",
+        width: "99vw",
-        minHeight: "calc(100vh - 250px)",
+        ...APP_STYLES.SCROLL
-        maxHeight: "calc(100vh - 250px)"
     },
     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}

app/panels/mech_rec_dept_cost_prod_plans/mech_rec_dept_cost_prod_plans.js

@@ -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}