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

2024-09-11 21:02:16 +03:00 · 2024-09-11 21:02:16 +03:00 · 04d79a2262
commit 04d79a2262
parent 05d8c38479
9 changed files with 205 additions and 73 deletions
--- a/app.styles.js
+++ b/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"
+        }
+    }
+};
--- a/app/components/p8p_app_workspace.js
+++ b/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 };
--- a/app/components/p8p_data_grid.js
+++ b/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
+};
--- a/app/components/p8p_table.js
+++ b/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 };
--- a/app/panels/mech_rec_cost_jobs_manage/fcjobssp.js
+++ b/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 { 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>
+                                    <Button variant="contained" size="small" disabled={haveNote} onClick={costJobsSpecIssue}>
+                                        Выдать задания
+                                    </Button>
                                </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}>
-                    <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}>
-                                <Button
-                                    variant="contained"
-                                    size="small"
-                                    disabled={
-                                        !equipConfiguration.selectedRow.NRN ||
-                                        !costJobsSpecs.selectedRow.NRN ||
-                                        (equipConfiguration.selectedRow.NRN && equipConfiguration.selectedRow.BFULL_LOADED)
-                                    }
-                                    onClick={handleIncludeEquipmentOpen}
-                                >
-                                    Включить в задание
-                                </Button>
-                                <Box ml={1}>
+                                <Stack direction={"row"} spacing={1}>
+                                    <Button
+                                        variant="contained"
+                                        size="small"
+                                        disabled={
+                                            !equipConfiguration.selectedRow.NRN ||
+                                            !costJobsSpecs.selectedRow.NRN ||
+                                            (equipConfiguration.selectedRow.NRN && equipConfiguration.selectedRow.BFULL_LOADED)
+                                        }
+                                        onClick={handleIncludeEquipmentOpen}
+                                    >
+                                        Включить в задание
+                                    </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
                                        })
--- a/app/panels/mech_rec_cost_jobs_manage/mech_rec_cost_jobs_manage.js
+++ b/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 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 };
--- a/app/panels/mech_rec_dept_cost_jobs/components/filter.js
+++ b/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 };
--- a/app/panels/mech_rec_dept_cost_jobs/mech_rec_dept_cost_jobs.js
+++ b/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 = {
-    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}
--- a/app/panels/mech_rec_dept_cost_prod_plans/mech_rec_dept_cost_prod_plans.js
+++ b/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}