diff --git a/concept/Smbo/EquipmentDetails.jsx b/concept/Smbo/EquipmentDetails.jsx index 5178236..24b18a7 100755 --- a/concept/Smbo/EquipmentDetails.jsx +++ b/concept/Smbo/EquipmentDetails.jsx @@ -1,8 +1,10 @@ import {Row, Col} from 'antd' -import Documents from '../Documents/DocumentsTemplate' -import '../../styles/equipment_details.css' -export default function EquipmentDetails({id, equipmentTimers, equipmentSensors}) { +import Documents from '../Documents/DocumentsTemplate' + +import '@styles/equipment_details.css' + +export default function EquipmentDetails({ id, equipmentTimers, equipmentSensors }) { let stateOfEquipmentDetails = equipmentTimers.map(timer => { return(

{timer.label}: {timer.value} {timer.unit}

diff --git a/src/components/Private/PrivateMenu.tsx b/src/components/Private/PrivateMenu.tsx new file mode 100644 index 0000000..6894518 --- /dev/null +++ b/src/components/Private/PrivateMenu.tsx @@ -0,0 +1,49 @@ +import { join } from 'path' +import { Menu, MenuItemProps, MenuProps } from 'antd' +import { Children, cloneElement, memo, ReactElement, useContext, useMemo } from 'react' +import { Link, useLocation } from 'react-router-dom' + +import { isURLAvailable } from '@utils/permissions' +import { RootPathContext } from '@pages/Main' + +export type PrivateMenuProps = MenuProps & { root?: string } + +export type PrivateMenuLinkProps = MenuItemProps & { + tabName?: string + path?: string + title: string + visible?: boolean +} + +export const PrivateMenuLink = memo(({ tabName = '', path = '', title, ...other }) => { + const location = useLocation() + return ( + + {title} + + ) +}) + +const PrivateMenuMain = memo(({ root, children, ...other }) => { + const rootContext = useContext(RootPathContext) + const rootPath = useMemo(() => root ?? rootContext ?? '', [root, rootContext]) + + const items = useMemo(() => Children.toArray(children).map((child) => { + const element = child as ReactElement + let key = element.key?.toString() + const visible: boolean | undefined = element.props.visible + if (key && visible !== false) { + key = key.slice(key.lastIndexOf('$') + 1) // Ключ автоматический преобразуется в "(.+)\$ключ" + const path = join(rootPath, key) + if (visible || isURLAvailable(path)) + return cloneElement(element, { key, path, tabName: key }) + } + return null + }), [children, rootPath]) + + return +}) + +export const PrivateMenu = Object.assign(PrivateMenuMain, { Link: PrivateMenuLink }) + +export default PrivateMenu diff --git a/src/components/Private/PrivateMenuItem.tsx b/src/components/Private/PrivateMenuItem.tsx index fd48ee9..1d0d101 100755 --- a/src/components/Private/PrivateMenuItem.tsx +++ b/src/components/Private/PrivateMenuItem.tsx @@ -1,22 +1,22 @@ import { join } from 'path' import { Menu, MenuItemProps } from 'antd' import { memo, NamedExoticComponent } from 'react' +import { Link, useLocation } from 'react-router-dom' import { isURLAvailable } from '@utils/permissions' -import { Link, useLocation } from 'react-router-dom' export type PrivateMenuItemProps = MenuItemProps & { root: string path: string } -export type PrivateMenuLinkProps = MenuItemProps & { +export type PrivateMenuItemLinkProps = MenuItemProps & { root?: string path: string title: string } -export const PrivateMenuItemLink = memo(({ root = '', path, title, ...other }) => { +export const PrivateMenuItemLink = memo(({ root = '', path, title, ...other }) => { const location = useLocation() return ( @@ -26,9 +26,9 @@ export const PrivateMenuItemLink = memo(({ root = '', path }) export const PrivateMenuItem: NamedExoticComponent & { - Link: NamedExoticComponent + Link: NamedExoticComponent } = Object.assign(memo(({ root, path, ...other }) => - isURLAvailable(join(root, path)) ? : null + ))} diff --git a/src/pages/Telemetry/Messages.jsx b/src/pages/Telemetry/Messages.jsx index 2500ada..e97732b 100755 --- a/src/pages/Telemetry/Messages.jsx +++ b/src/pages/Telemetry/Messages.jsx @@ -1,10 +1,12 @@ -import moment from 'moment' -import { useState, useEffect, memo, useCallback } from 'react' +import { useState, useEffect, memo, useCallback, useContext } from 'react' import { Table, Select, DatePicker, Input } from 'antd' -import { MessageService } from '@api' import LoaderPortal from '@components/LoaderPortal' import { invokeWebApiWrapperAsync } from '@components/factory' +import { makeColumn, makeDateColumn, makeNumericSorter } from '@components/Table' +import { MessageService } from '@api' + +import { IdWellContext } from '../Well' import '@styles/message.css' @@ -22,41 +24,18 @@ const categoryDictionary = { // Конфигурация таблицы export const columns = [ - { + makeDateColumn('Дата', 'date', undefined, undefined, { width: '10rem' }), + makeColumn('Глубина', 'wellDepth', { width: '10rem', render: depth => {depth.toFixed(2)} м. }), + makeColumn('Категория', 'categoryId', { width: '10rem', - title: 'Дата', - key: 'date', - dataIndex: 'date', - render: item => moment(item).format('DD MMM YYYY, HH:mm:ss'), - sorter: (a, b) => new Date(b.date) - new Date(a.date), - sortDirections: ['descend', 'ascend'], - }, { - width: '10rem', - title: 'Глубина', - key: 'wellDepth', - dataIndex: 'wellDepth', - render: depth => {depth.toFixed(2)} м., - }, { - width: '10rem', - title: 'Категория', - key: 'categoryId', - dataIndex: 'categoryId', render: (_, item) => categoryDictionary[item.categoryId].title, style: (_, item) => categoryDictionary[item.categoryId]?.style, - sorter: (a, b) => a.categoryId - b.categoryId, + sorter: makeNumericSorter('categoryId'), sortDirections: ['descend', 'ascend'], ellipsis: true, - }, { - title: 'Сообщение', - key: 'message', - dataIndex: 'message', - onFilter: (value, record) => record.name.indexOf(value) === 0, - }, { - width: '10rem', - title: 'Пользователь', - key: 'user', - dataIndex: 'user', - }, + }), + makeColumn('Сообщение', 'message', { onFilter: (value, record) => record.name.indexOf(value) === 0 }), + makeColumn('Пользователь', 'user', { width: '10rem' }), ] const filterOptions = [ @@ -68,7 +47,7 @@ const filterOptions = [ const children = filterOptions.map((line) => ) // Данные для таблицы -export const Messages = memo(({ idWell }) => { +export const Messages = memo(() => { const [messages, setMessages] = useState([]) const [pagination, setPagination] = useState(null) const [page, setPage] = useState(1) @@ -77,6 +56,8 @@ export const Messages = memo(({ idWell }) => { const [searchString, setSearchString] = useState('') const [showLoader, setShowLoader] = useState(false) + const idWell = useContext(IdWellContext) + const onChangeSearchString = useCallback((message) => setSearchString(message.length > 2 ? message : ''), []) useEffect(() => invokeWebApiWrapperAsync( diff --git a/src/pages/Telemetry/TelemetryView/ActiveMessagesOnline.jsx b/src/pages/Telemetry/TelemetryView/ActiveMessagesOnline.jsx index b2fd566..f839c02 100755 --- a/src/pages/Telemetry/TelemetryView/ActiveMessagesOnline.jsx +++ b/src/pages/Telemetry/TelemetryView/ActiveMessagesOnline.jsx @@ -1,5 +1,5 @@ import { Table } from 'antd' -import { useState, useEffect, useCallback, memo } from 'react' +import { useState, useEffect, useCallback, memo, useContext } from 'react' import LoaderPortal from '@components/LoaderPortal' import { invokeWebApiWrapperAsync } from '@components/factory' @@ -7,13 +7,16 @@ import { Subscribe } from '@services/signalr' import { MessageService } from '@api' import { columns } from '../Messages' +import { IdWellContext } from '@pages/Well' import '@styles/message.css' -export const ActiveMessagesOnline = memo(({ idWell }) => { +export const ActiveMessagesOnline = memo(() => { const [messages, setMessages] = useState([]) const [loader, setLoader] = useState(false) + const idWell = useContext(IdWellContext) + const handleReceiveMessages = useCallback((messages) => { if (messages) setMessages(messages.items.splice(0, 4)) diff --git a/src/pages/Telemetry/TelemetryView/Setpoints/SetpointSender.jsx b/src/pages/Telemetry/TelemetryView/Setpoints/SetpointSender.jsx index 12006ea..985dd96 100755 --- a/src/pages/Telemetry/TelemetryView/Setpoints/SetpointSender.jsx +++ b/src/pages/Telemetry/TelemetryView/Setpoints/SetpointSender.jsx @@ -1,4 +1,4 @@ -import { memo, useCallback, useMemo, useState } from 'react' +import { memo, useCallback, useContext, useMemo, useState } from 'react' import { Select, Modal, Input, InputNumber } from 'antd' import { SetpointsService } from '@api' @@ -8,12 +8,16 @@ import { invokeWebApiWrapperAsync } from '@components/factory' import { makeNumericRender, EditableTable } from '@components/Table' import { PeriodPicker, defaultPeriod } from '@components/selectors/PeriodPicker' -export const SetpointSender = memo(({ idWell, onClose, visible, setpointNames }) => { +import { IdWellContext } from '@pages/Well' + +export const SetpointSender = memo(({ onClose, visible, setpointNames }) => { const [expirePeriod, setExpirePeriod] = useState(defaultPeriod) const [comment, setComment] = useState('') const [setpoints, setSetpoints] = useState([]) const [isLoading, setIsLoading] = useState(false) + const idWell = useContext(IdWellContext) + const addingColumns = useMemo(() => [ { title: 'Наименование уставки', diff --git a/src/pages/Telemetry/TelemetryView/Setpoints/index.jsx b/src/pages/Telemetry/TelemetryView/Setpoints/index.jsx index 2339ea2..bf54c98 100755 --- a/src/pages/Telemetry/TelemetryView/Setpoints/index.jsx +++ b/src/pages/Telemetry/TelemetryView/Setpoints/index.jsx @@ -1,5 +1,5 @@ import { Button, Modal } from 'antd' -import { useState, useEffect, memo, useCallback, useMemo } from 'react' +import { useState, useEffect, memo, useCallback, useMemo, useContext } from 'react' import { Table } from '@components/Table' import { UserView } from '@components/views' @@ -10,10 +10,11 @@ import { makeStringCutter } from '@utils/string' import { formatDate } from '@utils' import { SetpointsService } from '@api' +import { IdWellContext } from '@pages/Well' import SetpointSender from './SetpointSender' import { SetpointViewer, getSetpointStatus } from './SetpointViewer' -export const Setpoints = memo(({ idWell, ...other }) => { +export const Setpoints = memo(({ ...other }) => { const [isModalVisible, setIsModalVisible] = useState(false) const [isSenderVisible, setIsSenderVisible] = useState(false) const [isViewerVisible, setIsViewerVisible] = useState(false) @@ -22,6 +23,8 @@ export const Setpoints = memo(({ idWell, ...other }) => { const [selected, setSelected] = useState(null) const [setpointNames, setSetpointNames] = useState([]) + const idWell = useContext(IdWellContext) + useEffect(() => invokeWebApiWrapperAsync( async () => { const names = await SetpointsService.getSetpointsNamesByIdWell(idWell) @@ -102,7 +105,6 @@ export const Setpoints = memo(({ idWell, ...other }) => { { +import { IdWellContext } from '@pages/Well' + +export const WirelineRunOut = memo(() => { const [twro, setTwro] = useState({}) const [isLoading, setIsLoading] = useState(false) + const idWell = useContext(IdWellContext) + const update = useCallback(() => invokeWebApiWrapperAsync( async () => { const twro = await TelemetryWirelineRunOutService.getData(idWell) diff --git a/src/pages/Telemetry/TelemetryView/index.jsx b/src/pages/Telemetry/TelemetryView/index.jsx index c11ae6f..aa0083a 100755 --- a/src/pages/Telemetry/TelemetryView/index.jsx +++ b/src/pages/Telemetry/TelemetryView/index.jsx @@ -1,5 +1,5 @@ import { Select } from 'antd' -import { useState, useEffect, useCallback } from 'react' +import { useState, useEffect, useCallback, useContext } from 'react' import { DrillFlowChartService, @@ -22,6 +22,8 @@ import ActiveMessagesOnline from './ActiveMessagesOnline' import { ModeDisplay } from './ModeDisplay' import { UserOfWell } from './UserOfWells' import { Setpoints } from './Setpoints' +import WirelineRunOut from './WirelineRunOut' +import { IdWellContext } from '@pages/Well' import MomentStabPicEnabled from '@images/DempherOn.png' import MomentStabPicDisabled from '@images/DempherOff.png' @@ -29,7 +31,6 @@ import SpinPicEnabled from '@images/SpinEnabled.png' import SpinPicDisabled from '@images/SpinDisabled.png' import '@styles/message.css' -import WirelineRunOut from './WirelineRunOut' const { Option } = Select @@ -303,7 +304,7 @@ export const normalizeData = (data) => data?.map(item => ({ blockSpeed: Math.abs(item.blockSpeed) })) ?? [] -export default function TelemetryView({ idWell }) { +export default function TelemetryView() { const [dataSaub, setDataSaub] = useState([]) const [dataSpin, setDataSpin] = useState([]) const [chartInterval, setChartInterval] = useState(defaultPeriod) @@ -312,6 +313,8 @@ export default function TelemetryView({ idWell }) { const [flowChartData, setFlowChartData] = useState([]) const [rop, setRop] = useState(null) + const idWell = useContext(IdWellContext) + const handleDataSaub = useCallback((data) => { if (data) { const dataSaub = normalizeData(data) @@ -392,9 +395,9 @@ export default function TelemetryView({ idWell }) { - +   - + {'TorqueMaster'} {'SpinMaster'}

MSE

diff --git a/src/pages/Telemetry/index.jsx b/src/pages/Telemetry/index.jsx index 524fef1..85189ba 100755 --- a/src/pages/Telemetry/index.jsx +++ b/src/pages/Telemetry/index.jsx @@ -1,57 +1,47 @@ -import { Switch, useParams } from 'react-router-dom' -import { memo, useMemo } from 'react' -import { Layout, Menu } from 'antd' +import { useParams } from 'react-router-dom' +import { memo, useContext, useMemo } from 'react' +import { Layout } from 'antd' import { AlertOutlined, FundViewOutlined, DatabaseOutlined } from '@ant-design/icons' -import { PrivateRoute, PrivateDefaultRoute, PrivateMenuItem } from '@components/Private' +import { PrivateSwitch, PrivateMenu } from '@components/Private' import Archive from './Archive' import Messages from './Messages' import DashboardNNB from './DashboardNNB' import TelemetryView from './TelemetryView' +import { RootPathContext } from '@pages/Main' import '@styles/index.css' const { Content } = Layout -export const Telemetry = memo(({ idWell }) => { +export const Telemetry = memo(() => { const { tab } = useParams() - const rootPath = useMemo(() => `/well/${idWell}/telemetry`, [idWell]) + const root = useContext(RootPathContext) + const rootPath = useMemo(() => `${root}/telemetry`, [root]) return ( - - - } title={'Мониторинг'}/> - } title={'Сообщения'} /> - } title={'Архив'} /> - - - + - - - - - - - - - - - - - - - - - + + } title={'Мониторинг'}/> + } title={'Сообщения'} /> + } title={'Архив'} /> + + + + + + + + + + + + + - + ) }) diff --git a/src/pages/TelemetryAnalysis/TelemetryAnalysisDepthToDay.jsx b/src/pages/TelemetryAnalysis/TelemetryAnalysisDepthToDay.jsx index 904b966..f679a67 100755 --- a/src/pages/TelemetryAnalysis/TelemetryAnalysisDepthToDay.jsx +++ b/src/pages/TelemetryAnalysis/TelemetryAnalysisDepthToDay.jsx @@ -1,15 +1,19 @@ -import { useState, useEffect, memo } from 'react' +import { useState, useEffect, memo, useContext } from 'react' import { TelemetryAnalyticsService } from '@api' import LoaderPortal from '@components/LoaderPortal' import { invokeWebApiWrapperAsync } from '@components/factory' import { ChartTelemetryDepthToDay } from '@components/charts/ChartTelemetryDepthToDay' -export const TelemetryAnalysisDepthToDay = memo(({ idWell }) => { +import { IdWellContext } from '@pages/Well' + +export const TelemetryAnalysisDepthToDay = memo(() => { const [depthData, setDepthData] = useState([]) const [bitPositionData, setBitPositionData] = useState([]) const [loader, setLoader] = useState(false) + const idWell = useContext(IdWellContext) + useEffect(() => invokeWebApiWrapperAsync( async () => { const depthToDayData = await TelemetryAnalyticsService.getWellDepthToDay(idWell) diff --git a/src/pages/TelemetryAnalysis/TelemetryAnalysisDepthToInterval.jsx b/src/pages/TelemetryAnalysis/TelemetryAnalysisDepthToInterval.jsx index 989165f..c5cb90e 100755 --- a/src/pages/TelemetryAnalysis/TelemetryAnalysisDepthToInterval.jsx +++ b/src/pages/TelemetryAnalysis/TelemetryAnalysisDepthToInterval.jsx @@ -1,11 +1,13 @@ import { Select } from 'antd' -import { useState, useEffect, memo } from 'react' +import { useState, useEffect, memo, useContext } from 'react' -import { arrayOrDefault } from '@utils' -import { TelemetryAnalyticsService } from '@api' import LoaderPortal from '@components/LoaderPortal' import { invokeWebApiWrapperAsync } from '@components/factory' import { ChartTelemetryDepthToInterval } from '@components/charts/ChartTelemetryDepthToInterval' +import { TelemetryAnalyticsService } from '@api' +import { arrayOrDefault } from '@utils' + +import { IdWellContext } from '@pages/Well' const timePeriodCollection = [ { value: '3600', label: '1 час' }, @@ -14,11 +16,13 @@ const timePeriodCollection = [ { value: '86400', label: '24 часа' } ] -export const TelemetryAnalysisDepthToInterval = memo(({ idWell }) => { +export const TelemetryAnalysisDepthToInterval = memo(() => { const [depthToIntervalData, setDepthToIntervalData] = useState([]) const [chartInterval, setChartInterval] = useState(86400) const [loader, setLoader] = useState(false) + const idWell = useContext(IdWellContext) + useEffect(() => invokeWebApiWrapperAsync( async () => { const depthToIntervalData = await TelemetryAnalyticsService.getWellDepthToInterval(idWell, chartInterval) diff --git a/src/pages/TelemetryAnalysis/TelemetryAnalysisOperationsSummary.jsx b/src/pages/TelemetryAnalysis/TelemetryAnalysisOperationsSummary.jsx index 9337c78..37e35b5 100755 --- a/src/pages/TelemetryAnalysis/TelemetryAnalysisOperationsSummary.jsx +++ b/src/pages/TelemetryAnalysis/TelemetryAnalysisOperationsSummary.jsx @@ -1,20 +1,24 @@ import moment from 'moment' import { Form, DatePicker } from 'antd' -import { useState, useEffect, memo } from 'react' +import { useState, useEffect, memo, useContext } from 'react' import { TelemetryAnalyticsService } from '@api' import LoaderPortal from '@components/LoaderPortal' import { invokeWebApiWrapperAsync } from '@components/factory' import { ChartTelemetryOperationsSummary } from '@components/charts/ChartTelemetryOperationsSummary' +import { IdWellContext } from '@pages/Well' + const { RangePicker } = DatePicker -export const TelemetryAnalysisOperationsSummary = memo(({ idWell }) => { +export const TelemetryAnalysisOperationsSummary = memo(() => { const [avilableDatesRange, setAviableDatesRange] = useState([moment(),moment()]) const [filterDateRange, setFilterDateRange] = useState([moment().subtract(1, 'days'),moment()]) const [operationsData, setOperationsData] = useState([]) const [loader, setLoader] = useState(false) + const idWell = useContext(IdWellContext) + const disabledDate = (current) => current < avilableDatesRange[0] || current > avilableDatesRange[1] useEffect(() => invokeWebApiWrapperAsync( diff --git a/src/pages/TelemetryAnalysis/TelemetryAnalysisOperationsToInterval.jsx b/src/pages/TelemetryAnalysis/TelemetryAnalysisOperationsToInterval.jsx index e37da57..460ccd1 100755 --- a/src/pages/TelemetryAnalysis/TelemetryAnalysisOperationsToInterval.jsx +++ b/src/pages/TelemetryAnalysis/TelemetryAnalysisOperationsToInterval.jsx @@ -1,5 +1,5 @@ import { memo } from 'react' -export const TelemetryAnalysisOperationsToInterval = memo(({ idWell }) => (<>{idWell} 123)) +export const TelemetryAnalysisOperationsToInterval = memo(() => (<>123)) export default TelemetryAnalysisOperationsToInterval diff --git a/src/pages/TelemetryAnalysis/index.jsx b/src/pages/TelemetryAnalysis/index.jsx index 3c7e8ca..54bae03 100755 --- a/src/pages/TelemetryAnalysis/index.jsx +++ b/src/pages/TelemetryAnalysis/index.jsx @@ -1,56 +1,43 @@ -import { memo } from 'react' -import { Layout, Menu } from 'antd' +import { useParams } from 'react-router-dom' +import { memo, useContext, useMemo } from 'react' import { FolderOutlined } from '@ant-design/icons' -import { Switch, useParams } from 'react-router-dom' +import { Layout } from 'antd' -import { PrivateDefaultRoute, PrivateRoute } from '@components/Private' -import { PrivateMenuItemLink } from '@components/Private/PrivateMenuItem' +import { PrivateMenu, PrivateSwitch } from '@components/Private' import TelemetryAnalysisDepthToDay from './TelemetryAnalysisDepthToDay' import TelemetryAnalysisDepthToInterval from './TelemetryAnalysisDepthToInterval' import TelemetryAnalysisOperationsSummary from './TelemetryAnalysisOperationsSummary' import TelemetryAnalysisOperationsToInterval from './TelemetryAnalysisOperationsToInterval' +import { RootPathContext } from '@pages/Main' const { Content } = Layout -export const TelemetryAnalysis = memo(({ idWell }) => { +export const TelemetryAnalysis = memo(() => { const { tab } = useParams() - const rootPath = `/well/${idWell}/telemetryAnalysis` + const root = useContext(RootPathContext) + const rootPath = useMemo(() => `${root}/telemetryAnalysis`, [root]) return ( - <> - - } key={'depthToDay'} path={'depthToDay'} title={'Глубина-день'} /> - } key={'depthToInterval'} path={'depthToInterval'} title={'Глубина-интервал'} /> - } key={'operationsSummary'} path={'operationsSummary'} title={'Все операции'} /> - } key={'operationsToInterval'} path={'operationsToInterval'} title={'Операции-интервал'} /> - + + + } key={'depthToDay'} title={'Глубина-день'} /> + } key={'depthToInterval'} title={'Глубина-интервал'} /> + } key={'operationsSummary'} title={'Все операции'} /> + } key={'operationsToInterval'} title={'Операции-интервал'} /> + - - - - - - - - - - - - - - - + + + + + + - + ) }) diff --git a/src/pages/Well.jsx b/src/pages/Well.jsx index 4ef9496..cc43808 100755 --- a/src/pages/Well.jsx +++ b/src/pages/Well.jsx @@ -1,4 +1,4 @@ -import { memo, useMemo } from 'react' +import { createContext, memo, useContext, useMemo } from 'react' import { FolderOutlined, FundViewOutlined, @@ -6,10 +6,10 @@ import { ExperimentOutlined, DeploymentUnitOutlined, } from '@ant-design/icons' -import { Layout, Menu } from 'antd' -import { Switch, useParams } from 'react-router-dom' +import { Layout } from 'antd' +import { useParams } from 'react-router-dom' -import { PrivateRoute, PrivateDefaultRoute, PrivateMenuItem } from '@components/Private' +import { PrivateMenu, PrivateSwitch } from '@components/Private' import Measure from './Measure' import Reports from './Reports' @@ -19,69 +19,51 @@ import Telemetry from './Telemetry' import WellOperations from './WellOperations' import DrillingProgram from './DrillingProgram' import TelemetryAnalysis from './TelemetryAnalysis' +import { RootPathContext } from './Main' import '@styles/index.css' const { Content } = Layout +export const IdWellContext = createContext(null) + export const Well = memo(() => { const { idWell, tab } = useParams() - const rootPath = useMemo(() => `/well/${idWell}`, [idWell]) + const root = useContext(RootPathContext) + const rootPath = useMemo(() => `${root}/well/${idWell}`, [root, idWell]) return ( - - - } title={'Телеметрия'}/> - } title={'Рапорта'} /> - } title={'Аналитика'} /> - } title={'Операции по скважине'} /> - {/* } title={'Операции по телеметрии'} /> */} - } title={'Документы'} /> - } title={'Измерения'} /> - } title={'Программа бурения'} /> - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + } title={'Телеметрия'}/> + } title={'Рапорта'} /> + } title={'Аналитика'} /> + } title={'Операции по скважине'} /> + {/* } title={'Операции по телеметрии'} /> */} + } title={'Документы'} /> + } title={'Измерения'} /> + } title={'Программа бурения'} /> + + + + + + + + + + + + + + + + + + - + ) }) diff --git a/src/pages/WellOperations/DrillProcessFlow.jsx b/src/pages/WellOperations/DrillProcessFlow.jsx index 878d410..b451c25 100755 --- a/src/pages/WellOperations/DrillProcessFlow.jsx +++ b/src/pages/WellOperations/DrillProcessFlow.jsx @@ -1,4 +1,4 @@ -import { useState, useEffect, memo } from 'react' +import { useState, useEffect, memo, useContext } from 'react' import { EditableTable, @@ -11,6 +11,8 @@ import { invokeWebApiWrapperAsync } from '@components/factory' import { hasPermission } from '@utils/permissions' import { arrayOrDefault } from '@utils' +import { IdWellContext } from '../Well' + const columns = [ makeNumericStartEnd('Глубина, м', 'depth'), makeNumericMinMax('Нагрузка, т', 'axialLoad'), @@ -20,10 +22,12 @@ const columns = [ makeNumericMinMax('Расход, л/с', 'flow') ] -export const DrillProcessFlow = memo(({ idWell }) => { +export const DrillProcessFlow = memo(() => { const [flows, setFlows] = useState([]) const [showLoader, setShowLoader] = useState(false) + const idWell = useContext(IdWellContext) + const updateFlows = () => invokeWebApiWrapperAsync( async () => { const flows = await DrillFlowChartService.get(idWell) diff --git a/src/pages/WellOperations/Tvd/index.jsx b/src/pages/WellOperations/Tvd/index.jsx index c35a2d3..d937e35 100755 --- a/src/pages/WellOperations/Tvd/index.jsx +++ b/src/pages/WellOperations/Tvd/index.jsx @@ -1,5 +1,5 @@ import { useHistory } from 'react-router-dom' -import { memo, useState, useRef, useEffect, useCallback } from 'react' +import { memo, useState, useRef, useEffect, useCallback, useContext, useMemo } from 'react' import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons' import { Switch, Button } from 'antd' @@ -24,6 +24,7 @@ import { getOperations } from '@utils/functions' import NptTable from './NptTable' import NetGraphExport from './NetGraphExport' import AdditionalTables from './AdditionalTables' +import { IdWellContext } from '@pages/Well' import '@styles/index.css' import '@styles/tvd.less' @@ -114,13 +115,16 @@ const makeDataset = (data, label, color, borderWidth = 1.5, borderDash) => ({ borderDash, }) -export const Tvd = memo(({ idWell, title, ...other }) => { +export const Tvd = memo(({ idWell: wellId, title, ...other }) => { const [chart, setChart] = useState() const [xLabel, setXLabel] = useState('day') const [operations, setOperations] = useState({}) const [tableVisible, setTableVisible] = useState(false) const [isLoading, setIsLoading] = useState(false) + const idWellContext = useContext(IdWellContext) + const idWell = useMemo(() => wellId ?? idWellContext, [wellId, idWellContext]) + const chartRef = useRef(null) const history = useHistory() diff --git a/src/pages/WellOperations/WellDrillParams.jsx b/src/pages/WellOperations/WellDrillParams.jsx index b113209..79b7e63 100755 --- a/src/pages/WellOperations/WellDrillParams.jsx +++ b/src/pages/WellOperations/WellDrillParams.jsx @@ -1,4 +1,4 @@ -import { useState, useEffect, useCallback, memo, useMemo } from 'react' +import { useState, useEffect, useCallback, memo, useMemo, useContext } from 'react' import { EditableTable, @@ -13,6 +13,8 @@ import { DrillParamsService, WellOperationService } from '@api' import { hasPermission } from '@utils/permissions' import { arrayOrDefault } from '@utils' +import { IdWellContext } from '../Well' + export const getColumns = async (idWell) => { let sectionTypes = await WellOperationService.getSectionTypes(idWell) sectionTypes = Object.entries(sectionTypes).map(([id, value]) => ({ @@ -34,11 +36,13 @@ export const getColumns = async (idWell) => { ] } -export const WellDrillParams = memo(({ idWell }) => { +export const WellDrillParams = memo(() => { const [params, setParams] = useState([]) const [showLoader, setShowLoader] = useState(false) const [columns, setColumns] = useState([]) + const idWell = useContext(IdWellContext) + const updateParams = useCallback(async () => await invokeWebApiWrapperAsync( async () => { const params = arrayOrDefault(await DrillParamsService.getAll(idWell)) diff --git a/src/pages/WellOperations/WellOperationsEditor.jsx b/src/pages/WellOperations/WellOperationsEditor.jsx index 033a6f0..6c50d0f 100755 --- a/src/pages/WellOperations/WellOperationsEditor.jsx +++ b/src/pages/WellOperations/WellOperationsEditor.jsx @@ -1,7 +1,7 @@ import moment from 'moment' import { Input } from 'antd' import { useLocation } from 'react-router-dom' -import { useState, useEffect, memo, useMemo, useCallback } from 'react' +import { useState, useEffect, memo, useMemo, useCallback, useContext } from 'react' import { EditableTable, @@ -21,6 +21,8 @@ import { hasPermission } from '@utils/permissions' import { arrayOrDefault } from '@utils' import { WellOperationService } from '@api' +import { IdWellContext } from '../Well' + const { TextArea } = Input const basePageSize = 160 @@ -52,12 +54,14 @@ const generateColumns = (showNpt = false, categories = [], sectionTypes = []) => makeTextColumn('Комментарий', 'comment', null, null, null, { editable: true, input: