diff --git a/app.styles.js b/app.styles.js new file mode 100644 index 0000000..9627d6b --- /dev/null +++ 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" + } + } +}; diff --git a/app/components/p8p_app_workspace.js b/app/components/p8p_app_workspace.js index cba6e27..88a37fd 100644 --- 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 }; diff --git a/app/components/p8p_data_grid.js b/app/components/p8p_data_grid.js index 46c960e..441aac0 100644 --- 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 +}; diff --git a/app/components/p8p_table.js b/app/components/p8p_table.js index ca0045d..f5d3c31 100644 --- 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 }; diff --git a/app/panels/mech_rec_cost_jobs_manage/fcjobssp.js b/app/panels/mech_rec_cost_jobs_manage/fcjobssp.js index fae1f43..6678a69 100644 --- 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 ( ); @@ -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 (