asb_cloud_front/src/pages/WellOperations/WellCompositeEditor/WellCompositeSections.jsx

298 lines
11 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import { Link } from 'react-router-dom'
import { useState, useEffect, memo } from 'react'
import { LineChartOutlined, ProfileOutlined } from '@ant-design/icons'
import { Table, Tag, Button, Badge, Divider, Modal, Row, Col, Popconfirm } from 'antd'
import { CompanyView } from '@components/views'
import LoaderPortal from '@components/LoaderPortal'
import { invokeWebApiWrapperAsync } from '@components/factory'
import { makeTextColumn, makeNumericColumnPlanFact } from '@components/Table'
import { DrillParamsService, WellCompositeService } from '@api'
import { hasPermission } from '@utils/permissions'
import {
calcAndUpdateStatsBySections,
makeFilterMinMaxFunction,
getOperations
} from '@pages/Cluster/functions'
import WellOperationsTable from '@pages/Cluster/WellOperationsTable'
import { Tvd } from '../Tvd'
import { getColumns } from '../WellDrillParams'
const filtersMinMax = [
{ text: 'min', value: 'min' },
{ text: 'max', value: 'max' },
]
const filtersSectionsType = []
const DAY_IN_MS = 1000 * 60 * 60 * 24
export const WellCompositeSections = memo(({ idWell, statsWells, selectedSections }) => {
const [rows, setRows] = useState([])
const [params, setParams] = useState([])
const [paramsColumns, setParamsColumns] = useState([])
const [selectedWells, setSelectedWells] = useState([])
const [wellOperations, setWellOperations] = useState([])
const [selectedWellsKeys, setSelectedWellsKeys] = useState([])
const [selectedWellId, setSelectedWellId] = useState(0)
const [showLoader, setShowLoader] = useState(false)
const [showParamsLoader, setShowParamsLoader] = useState(false)
const [isTVDModalVisible, setIsTVDModalVisible] = useState(false)
const [isOpsModalVisible, setIsOpsModalVisible] = useState(false)
const [isParamsModalVisible, setIsParamsModalVisible] = useState(false)
useEffect(() => (async() => setParamsColumns(await getColumns(idWell)))(), [idWell])
useEffect(() => {
if (isOpsModalVisible || selectedWellId <= 0) return
invokeWebApiWrapperAsync(
async () => {
const { operations } = await getOperations(selectedWellId)
setWellOperations(operations)
},
setShowLoader,
`Не удалось загрузить операции по скважине "${selectedWellId}"`,
)
}, [selectedWellId, isOpsModalVisible])
useEffect(() => {
const rows = []
statsWells?.forEach((well) => {
well.sections?.forEach((section) => {
if (!filtersSectionsType.some((el) => el.text === section.caption))
filtersSectionsType.push({ text: section.caption, value: section.caption })
const row = {
key: well.caption + section.id,
id: well.id,
sectionId: section.id,
caption: well.caption,
sectionType: section.caption,
sectionWellDepthPlan: section.plan?.wellDepthEnd,
sectionWellDepthFact: section.fact?.wellDepthEnd,
sectionBuildDaysPlan: (new Date(section.plan?.end) - new Date(section.plan?.start)) / DAY_IN_MS,
sectionBuildDaysFact: (new Date(section.fact?.end) - new Date(section.fact?.start)) / DAY_IN_MS,
sectionRateOfPenetrationPlan: section.plan?.rop,
sectionRateOfPenetrationFact: section.fact?.rop,
sectionRouteSpeedPlan: section.plan?.routeSpeed,
sectionRouteSpeedFact: section.fact?.routeSpeed,
sectionBhaDownSpeedPlan: section.plan?.bhaDownSpeed,
sectionBhaDownSpeedFact: section.fact?.bhaDownSpeed,
sectionBhaUpSpeedPlan: section.plan?.bhaUpSpeed,
sectionBhaUpSpeedFact: section.fact?.bhaUpSpeed,
sectionCasingDownSpeedPlan: section.plan?.casingDownSpeed,
sectionCasingDownSpeedFact: section.fact?.casingDownSpeed,
nonProductiveTimePlan: section.plan?.nonProductiveHours,
nonProductiveTimeFact: section.fact?.nonProductiveHours,
companies: well.companies,
}
rows.push(row)
})
})
calcAndUpdateStatsBySections(rows ?? [], [
'sectionWellDepthPlan',
'sectionWellDepthFact',
'sectionBuildDaysPlan',
'sectionBuildDaysFact',
'sectionRateOfPenetrationPlan',
'sectionRateOfPenetrationFact',
'sectionRouteSpeedPlan',
'sectionRouteSpeedFact',
'sectionBhaDownSpeedPlan',
'sectionBhaDownSpeedFact',
'sectionBhaUpSpeedPlan',
'sectionBhaUpSpeedFact',
'sectionCasingDownSpeedPlan',
'sectionCasingDownSpeedFact',
'nonProductiveTimePlan',
'nonProductiveTimeFact',
])
setRows(rows)
}, [statsWells])
useEffect(() => {
const selected = rows.filter((row) => selectedSections.some(section => (
section.idWellSrc === row.id && section.idWellSectionType === row.sectionId
)))
setSelectedWells(selected)
setSelectedWellsKeys(selected.map((row) => row.key))
}, [rows, selectedSections])
const columns = [
makeTextColumn('скв №', 'caption', null, null,
(text, item) => <Link to={`/well/${item?.id}`}>{text ?? '-'}</Link>
),
makeTextColumn('Секция', 'sectionType', filtersSectionsType, null, (text) => text ?? '-'),
makeNumericColumnPlanFact('Глубина, м', 'sectionWellDepth', filtersMinMax, makeFilterMinMaxFunction),
makeNumericColumnPlanFact('Продолжительность, ч', 'sectionBuildDays', filtersMinMax, makeFilterMinMaxFunction),
makeNumericColumnPlanFact('МСП, м/ч', 'sectionRateOfPenetration', filtersMinMax, makeFilterMinMaxFunction),
makeNumericColumnPlanFact('Рейсовая скорость, м/ч', 'sectionRouteSpeed', filtersMinMax, makeFilterMinMaxFunction),
makeNumericColumnPlanFact('Спуск КНБК, м/ч', 'sectionBhaDownSpeed', filtersMinMax, makeFilterMinMaxFunction),
makeNumericColumnPlanFact('Подъем КНБК, м/ч', 'sectionBhaUpSpeed', filtersMinMax, makeFilterMinMaxFunction),
makeNumericColumnPlanFact('Скорость спуска ОК, м/ч', 'sectionCasingDownSpeed', filtersMinMax, makeFilterMinMaxFunction),
makeNumericColumnPlanFact('НПВ, сут', 'nonProductiveTime', filtersMinMax, makeFilterMinMaxFunction, null, '70px'),
{
title: 'TVD',
render: (value) => (
<Button onClick={() => {
setSelectedWellId(value.id)
setIsTVDModalVisible(true)
}}>
<LineChartOutlined />
</Button>
),
align: 'center'
},
{
title: 'Операции',
render: (value) => (
<Button onClick={()=> {
setSelectedWellId(value.id)
setIsOpsModalVisible(true)
}}>
<ProfileOutlined />
</Button>
),
align: 'center'
},
{
title: 'Участники',
dataIndex: 'companies',
render: (item) => item?.map((company) => (
<Tag key={company.caption} color={'blue'}>
<CompanyView company={company} />
</Tag>
)) ?? '-',
},
]
const rowSelection = {
selectedRowKeys: selectedWellsKeys,
onChange: (keys, items) => hasPermission('WellOperation.edit') && invokeWebApiWrapperAsync(
async () => {
const selectedSections = items.map((row) => ({idWell, idWellSrc: row.id, idWellSectionType: row.sectionId}))
await WellCompositeService.save(idWell, selectedSections)
setSelectedWells(items)
setSelectedWellsKeys(keys)
},
setShowParamsLoader,
`Не удалось сохранить изменения выбранных секций для композитной скважины "${idWell}"`,
'Изменение выбранных секций скважины'
)
}
const onParamButtonClick = () => invokeWebApiWrapperAsync(
async () => {
setIsParamsModalVisible(true)
const params = await DrillParamsService.getCompositeAll(idWell)
setParams(params)
},
setShowParamsLoader,
`Не удалось загрузить список режимов для скважины "${idWell}"`,
'Получение списка режимов скважины'
)
const onParamsAddClick = () => invokeWebApiWrapperAsync(
async () => {
await DrillParamsService.save(idWell, params)
setIsParamsModalVisible(false)
},
setShowLoader,
`Не удалось добавить режимы в список скважины "${idWell}"`,
'Добавление режима скважины'
)
return (
<>
<Table
columns={columns}
dataSource={rows}
size={'small'}
bordered
scroll={{ x: true, y: 620 }}
rowSelection={rowSelection}
pagination={false}
/>
<Divider />
<Badge.Ribbon text={'комбинированная скважина'} color={'gray'}>
<h3>Выбранные секции</h3>
</Badge.Ribbon>
<Table
columns={columns}
dataSource={selectedWells}
rowSelection={rowSelection}
size={'small'}
bordered
scroll={{ x: true }}
pagination={false}
/>
<Row justify={'end'} style={{ margin: '1rem 0' }}>
<Col>
<Button
size={'large'}
disabled={selectedWells.length <= 0}
onClick={onParamButtonClick}
>
Заполнить режимы текущей скважины
</Button>
</Col>
</Row>
<Modal
title={'TVD'}
centered
visible={isTVDModalVisible}
onCancel={() => setIsTVDModalVisible(false)}
width={1500}
footer={null}
>
<Tvd idWell={selectedWellId}/>
</Modal>
<Modal
title={'Операции'}
centered
visible={isOpsModalVisible}
onCancel={() => setIsOpsModalVisible(false)}
width={1500}
footer={null}
>
<LoaderPortal show={showLoader}>
<WellOperationsTable wellOperations={wellOperations} />
</LoaderPortal>
</Modal>
<Modal
title={'Заполнить режимы текущей скважины'}
centered
visible={isParamsModalVisible}
onCancel={() => setIsParamsModalVisible(false)}
width={1700}
footer={(
<Popconfirm title={'Заменить существующие режимы выбранными?'} onConfirm={onParamsAddClick}>
<Button size={'large'} disabled={params.length <= 0}>Сохранить</Button>
</Popconfirm>
)}
>
<LoaderPortal show={showParamsLoader}>
<Table
size={'small'}
bordered
columns={paramsColumns}
dataSource={params}
pagination={false}
/>
</LoaderPortal>
</Modal>
</>
)
})
export default WellCompositeSections