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 ( handlePriorEditClose()}> + Включить в задание - - - + - + + ); @@ -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 (
- - Сменное задание + + + Сменное задание + {costJobsSpecs.dataLoaded ? ( <> - - - + { 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} - - Рабочие центры + + + Рабочие центры + {equipConfiguration.dataLoaded ? ( <> - - + + - + { dataCellRender({ ...prms, handleSelectChange, - sUnit: sUnitCostEquipment, + sUnit: UNIT_COST_EQUIPMENT, selectedRow: equipConfiguration.selectedRow.NRN, selectedJobSpec: costJobsSpecs.selectedRow }) diff --git 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 index 6ad6111..5d97e7d 100644 --- 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 = () => {
{state.selectedJob.NRN ? ( <> - {`Сменное задание №${state.selectedJob.SDOC_NUMB} на ${state.selectedJob.SPERIOD}`} - {`${state.selectedJob.SSUBDIV}`} + {`Сменное задание №${state.selectedJob.SDOC_NUMB} на ${state.selectedJob.SPERIOD}`} + {`${state.selectedJob.SSUBDIV}`} ) : !state.selectedJob.NRN ? ( @@ -144,4 +155,4 @@ const MechRecCostJobs = () => { //Интерфейс модуля //---------------- -export { MechRecCostJobs }; +export { MAIN_HEADER_HEIGHT, SUB_HEADER_HEIGHT, MechRecCostJobs }; diff --git a/app/panels/mech_rec_dept_cost_jobs/components/filter.js b/app/panels/mech_rec_dept_cost_jobs/components/filter.js index 0c1b1f0..cae17c4 100644 --- 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 }; diff --git 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 index 719df98..8e111a6 100644 --- 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 ? ( ({ backgroundColor: getRowBackgroudColor(row), ...currentStyle }), @@ -263,7 +279,7 @@ const MechRecDeptCostProdPlans = () => { onClick={handlePlanClick} /> - + {state.dataLoaded ? ( @@ -271,13 +287,13 @@ const MechRecDeptCostProdPlans = () => { ) : ( - + {`Производственный план цеха №${state.selectedPlan.SSUBDIV} на ${state.selectedPlan.SPERIOD}`} - +