diff --git a/src/pages/Well/NavigationMenu.jsx b/src/pages/Well/NavigationMenu.jsx index e6b9181..cb55b70 100644 --- a/src/pages/Well/NavigationMenu.jsx +++ b/src/pages/Well/NavigationMenu.jsx @@ -6,6 +6,7 @@ import { ControlOutlined, DatabaseOutlined, DeploymentUnitOutlined, + DesktopOutlined, ExperimentOutlined, FilePdfOutlined, FolderOutlined, @@ -17,6 +18,7 @@ import { import { makeItem, PrivateWellMenu } from '@components/PrivateWellMenu' export const menuItems = [ + makeItem('Начальная страница', 'start_screen', [], ), makeItem('Телеметрия', 'telemetry', [], , [ makeItem('Мониторинг', 'telemetry', [], ), makeItem('Сообщения', 'messages', [], ), diff --git a/src/pages/Well/Telemetry/TelemetryView/RigMnemo.jsx b/src/pages/Well/StartScreen/RigMnemo.jsx similarity index 99% rename from src/pages/Well/Telemetry/TelemetryView/RigMnemo.jsx rename to src/pages/Well/StartScreen/RigMnemo.jsx index c6f00ea..0be9e0b 100644 --- a/src/pages/Well/Telemetry/TelemetryView/RigMnemo.jsx +++ b/src/pages/Well/StartScreen/RigMnemo.jsx @@ -51,7 +51,7 @@ const styleBlock = { // fill: '#b3b3b3', // }; -export const RigMnemo = memo(({ blockPosition, bitPosition, wellDepth }) => { +export const RigMnemo = memo(({ blockPosition, bitPosition, wellDepth, ...other }) => { let blockPositionY = 0 let bitPositionY = 0 @@ -81,7 +81,7 @@ export const RigMnemo = memo(({ blockPosition, bitPosition, wellDepth }) => { const bitTranslate = `translate(0, ${bitPositionY})` return ( - + diff --git a/src/pages/Well/StartScreen/index.jsx b/src/pages/Well/StartScreen/index.jsx new file mode 100644 index 0000000..e9b81de --- /dev/null +++ b/src/pages/Well/StartScreen/index.jsx @@ -0,0 +1,164 @@ +import { Descriptions, Progress } from 'antd' +import { memo, useMemo, useState } from 'react' + +import { makeColumn, makeNumericColumn, makeNumericRender, Table } from '@components/Table' +import { withPermissions } from '@utils' + +import RigMnemo from './RigMnemo' + +import '@styles/start_screen.less' + +const columns = [ + makeColumn('', 'caption'), + makeNumericColumn('Ходы насоса', 'count', undefined, undefined, makeNumericRender(0)), + makeNumericColumn('Расход на входе, л/с', 'input_flow'), + makeNumericColumn('Давление на входе, атм', 'input_pressure'), +] + +const data = [ + { caption: 'Насос №1', count: 55, input_flow: 16, input_pressure: 32 }, + { caption: 'Насос №2', count: 55, input_flow: 16, input_pressure: 34 }, +] + +const formatMSE = (percent) => ( +
+ MSE + {percent}% +
+) + +const formatRPM = (percent) => ( +
+ {percent} + об/мин +
+) + +const StatusDashboardItem = memo(({ status, title }) => { + const color = useMemo(() => { + switch (status) { + case 'off': + case 'error': + return '#ff4d4f' + case 'warn': + case 'warning': + return '#faad14' + case 'ok': + case 'success': + return '#52c41a' + default: return '#1890ff' + } + }, [status]) + + return ( + title} + trailColor={color} + /> + ) +}) + +const StartScreen = memo(() => { + const [dataSaub, setDataSaub] = useState([]) + + const dataLast = useMemo(() => dataSaub.at(-1), [dataSaub]) + + return ( +
+
+
+
Заказчик
+
ООО "Газпромнефть-Хантос"
+
+
+
Текущий процесс
+
Бурение в слайде с АПД
+
+
+
Конструкция скважины
+
+ +
+
+
+
+
+
+
+
Режимы бурения
+
+ + 12.5 + 32 + 40 + 68 + 13.4 + 40 + + +
+
+
+
Работа насосного оборудования
+
+ + + +
+
Работа модулей САУБ
+
+ Spin Master: + кол-во обр. - 4.5обр; V 25 обр/мин +
+ + + + +
+
+
+ +
+
Буровой раствор
+
+ + 68 + 68 + 68 + 68 + 68 + 68 + 68 + 12 + 31 + 31 + 1.23 + 1.25 + +
+
+ +
+
Журнал операций
+
+
+ + + ) +}) + +export default withPermissions(StartScreen, []) diff --git a/src/pages/Well/index.jsx b/src/pages/Well/index.jsx index 398a0b8..647b684 100644 --- a/src/pages/Well/index.jsx +++ b/src/pages/Well/index.jsx @@ -18,6 +18,7 @@ const WellCase = lazy(() => import('./WellCase')) const Analytics = lazy(() => import('./Analytics')) const Documents = lazy(() => import('./Documents')) const Telemetry = lazy(() => import('./Telemetry')) +const StartScreen = lazy(() => import('./StartScreen')) const WellOperations = lazy(() => import('./WellOperations')) const DrillingProgram = lazy(() => import('./DrillingProgram')) @@ -93,6 +94,8 @@ const Well = memo(() => { } /> } /> + } /> + }> } /> } /> diff --git a/src/styles/start_screen.less b/src/styles/start_screen.less new file mode 100644 index 0000000..54f54dc --- /dev/null +++ b/src/styles/start_screen.less @@ -0,0 +1,92 @@ +.start-screen { + --screen-gap: 10px; + --screen-padding: 10px; + + @screen-gap: var(--screen-gap); + @screen-padding: var(--screen-padding); + + .flex-container { + display: flex; + align-items: stretch; + justify-content: space-between; + gap: @screen-gap; + } + + .flex-container; + width: 100%; + height: 100%; + + & .card { + .flex-container; + flex-direction: column; + border: 1px solid #f0f0f0; + padding: @screen-padding; + + & > .header { + align-self: center; + text-align: center; + width: 80%; + border-bottom: 1px solid #f0f0f0; + padding-bottom: 5px; + font-weight: bold; + } + + & > .content { flex-grow: 1; } + } + + & .left-panel, & .right-panel { + flex-direction: column; + .flex-container; + } + + & .right-panel, & .left-panel .mnemo { flex-grow: 1; } + + & .left-panel { + & .customer .content, & .current-process .content { + text-align: center; + } + } + + & .right-panel { + & .top-panel { + .flex-container; + + & .main-panel { + .flex-container; + flex-direction: column; + flex-grow: 1; + + & > * { flex-grow: 1; } + + & .drilling-modes .content { + display: flex; + gap: @screen-gap; + } + + & .saub-modules-work .content { + display: flex; + flex-direction: column; + gap: @screen-gap; + } + } + } + + & .operation-journal { flex-grow: 1; } + } + + & .top-panel { .flex-container; } +} + +@media only screen and (max-width: 1280px) { + .start-screen { + --screen-gap: 7.5px; + --screen-padding: 7.5px; + } +} + +@media only screen and (max-width: 1024px) { + .start-screen { + --screen-gap: 5px; + --screen-padding: 5px; + } +}