forked from ddrilling/asb_cloud_front
Tvd перенесена в отдельную директорию и разделена на файлы
This commit is contained in:
parent
98f20a4ef8
commit
1f5cc759be
@ -1,355 +0,0 @@
|
||||
import { useHistory } from 'react-router-dom'
|
||||
import { memo, useState, useRef, useEffect, useCallback } from 'react'
|
||||
import { Switch, Button, InputNumber, Descriptions } from 'antd'
|
||||
import { DoubleLeftOutlined, DoubleRightOutlined, ExportOutlined, FilterOutlined } from '@ant-design/icons'
|
||||
|
||||
import {
|
||||
Chart,
|
||||
TimeScale,
|
||||
LinearScale,
|
||||
Legend,
|
||||
LineController,
|
||||
PointElement,
|
||||
LineElement
|
||||
} from 'chart.js'
|
||||
import 'chartjs-adapter-moment'
|
||||
import zoomPlugin from 'chartjs-plugin-zoom'
|
||||
import ChartDataLabels from 'chartjs-plugin-datalabels'
|
||||
|
||||
import LoaderPortal from '@components/LoaderPortal'
|
||||
import { download, invokeWebApiWrapperAsync } from '@components/factory'
|
||||
import { makeDateColumn, makeNumericColumn, makeTextColumn, Table } from '@components/Table'
|
||||
import { formatDate, fractionalSum } from '@utils/datetime'
|
||||
import { getOperations } from '@utils/functions'
|
||||
|
||||
import '@styles/index.css'
|
||||
import '@styles/tvd.less'
|
||||
|
||||
const { Item } = Descriptions
|
||||
|
||||
Chart.register(
|
||||
TimeScale,
|
||||
LinearScale,
|
||||
LineController,
|
||||
LineElement,
|
||||
PointElement,
|
||||
Legend,
|
||||
ChartDataLabels,
|
||||
zoomPlugin
|
||||
)
|
||||
|
||||
const numericRender = (value) => Number.isFinite(value) ? (+value).toFixed(2) : '-'
|
||||
|
||||
const scaleTypes = {
|
||||
day: {
|
||||
min: 0,
|
||||
type: 'linear',
|
||||
display: true,
|
||||
title: { display: false, text: '' },
|
||||
ticks: { stepSize: 1 }
|
||||
},
|
||||
date: {
|
||||
display: true,
|
||||
title: { display: true },
|
||||
type: 'time',
|
||||
time: {
|
||||
unit: 'hour',
|
||||
displayFormats: { 'hour': 'MM.DD' }
|
||||
},
|
||||
grid: { drawTicks: true },
|
||||
ticks: {
|
||||
stepSize: 3,
|
||||
major: { enabled: true },
|
||||
z: 1,
|
||||
display: true,
|
||||
textStrokeColor: '#fff',
|
||||
textStrokeWidth: 2,
|
||||
color: '#000',
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const defaultOptions = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
aspectRatio: false,
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: 'nearest',
|
||||
},
|
||||
scales: {
|
||||
x: scaleTypes.day,
|
||||
y: {
|
||||
type: 'linear',
|
||||
position: 'top',
|
||||
reverse: true,
|
||||
display: true,
|
||||
title: {
|
||||
display: false,
|
||||
text: '',
|
||||
}
|
||||
}
|
||||
},
|
||||
parsing: {
|
||||
xAxisKey: 'day',
|
||||
yAxisKey: 'depth',
|
||||
},
|
||||
elements: {
|
||||
point: {
|
||||
radius: 1.7,
|
||||
//backgroundColor:'#aaa',
|
||||
//pointStyle:'triangle',
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: true,
|
||||
},
|
||||
datalabels: {
|
||||
display: false,
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
position: 'nearest',
|
||||
callbacks: {
|
||||
title: (items) => [
|
||||
`Дата: ${formatDate(items[0].raw?.date) ?? '-'}`,
|
||||
`День с начала бурения: ${parseInt(items[0].raw?.day)}`,
|
||||
],
|
||||
afterTitle: (items) => `Глубина: ${numericRender(items[0].raw?.depth)}`,
|
||||
label: (item) => [
|
||||
item.raw.wellSectionTypeName + ': ' + item.raw.categoryName,
|
||||
`Длительность (ч): ${item.raw.nptHours}`
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const nptTableColumns = [
|
||||
makeTextColumn('Конструкция секции', 'wellSectionTypeName'),
|
||||
makeNumericColumn('Глубина', 'depth'),
|
||||
makeDateColumn('Дата начала', 'date'),
|
||||
makeNumericColumn('Длительность (ч)', 'durationHours'),
|
||||
]
|
||||
|
||||
const makeDataset = (data, label, color, borderWidth = 1.5, borderDash) => ({
|
||||
label,
|
||||
data,
|
||||
backgroundColor: color,
|
||||
borderColor: color,
|
||||
borderWidth,
|
||||
borderDash,
|
||||
})
|
||||
|
||||
const calcEndDate = (saubData) => {
|
||||
if (!Array.isArray(saubData) || saubData.length <= 0) return [null, null]
|
||||
const lastElm = saubData.at(-1)
|
||||
return [saubData[0]?.date, fractionalSum(lastElm?.date, lastElm?.nptHours, 'hour')]
|
||||
}
|
||||
|
||||
const printDate = (date) => formatDate(date) ?? '-'
|
||||
|
||||
export const Tvd = memo(({ idWell, title }) => {
|
||||
const [operations, setOperations] = useState({})
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [isTableLoading, setIsTableLoading] = useState(false)
|
||||
const [isFileExporting, setIsFileExporting] = useState(false)
|
||||
const [xLabel, setXLabel] = useState('day')
|
||||
const [chart, setChart] = useState()
|
||||
const [npt, setNPT] = useState([])
|
||||
const [filteredNPT, setFilteredNPT] = useState([])
|
||||
const [filterValue, setFilterValue] = useState(null)
|
||||
const [tableVisible, setTableVisible] = useState(true)
|
||||
const [additionalData, setAdditionalData] = useState({})
|
||||
|
||||
const chartRef = useRef(null)
|
||||
const history = useHistory()
|
||||
|
||||
const onPointClick = useCallback((e) => {
|
||||
const points = e?.chart?.tooltip?.dataPoints
|
||||
if (!points || !(points.length > 0)) return
|
||||
|
||||
const datasetId = points.find((p) => p.datasetIndex !== 1)?.datasetIndex
|
||||
if (typeof datasetId === 'undefined') return
|
||||
|
||||
const datasetName = datasetId === 2 ? 'plan' : 'fact'
|
||||
const ids = points.filter((p) => p?.raw?.id).map((p) => p.raw.id)
|
||||
const url = `/well/${idWell}/operations/${datasetName}/?selectedId=${ids.join(',')}`
|
||||
history.push(url)
|
||||
}, [idWell, history])
|
||||
|
||||
useEffect(() => invokeWebApiWrapperAsync(
|
||||
async () => {
|
||||
const operations = await getOperations(idWell)
|
||||
setNPT(operations.fact.filter((row) => row.isNPT) ?? [])
|
||||
setOperations(operations)
|
||||
|
||||
const [factStartDate, factEndDate] = calcEndDate(operations.fact)
|
||||
const [planStartDate, planEndDate] = calcEndDate(operations.plan)
|
||||
const [predictStartDate, predictEndDate] = calcEndDate(operations.predict)
|
||||
|
||||
const last = predictEndDate ?? factEndDate
|
||||
setAdditionalData({
|
||||
lag: (+new Date(last) - +new Date(planEndDate)) / 86400_000,
|
||||
endDate: last,
|
||||
factStartDate,
|
||||
factEndDate,
|
||||
planStartDate,
|
||||
planEndDate,
|
||||
predictStartDate,
|
||||
predictEndDate,
|
||||
})
|
||||
},
|
||||
setIsLoading,
|
||||
`Не удалось загрузить операции по скважине "${idWell}"`,
|
||||
'Получение списка опервций по скважине'
|
||||
), [idWell])
|
||||
|
||||
useEffect(() => invokeWebApiWrapperAsync(
|
||||
async () => setFilteredNPT(npt.filter((row) => !filterValue || row.durationHours >= filterValue)),
|
||||
setIsTableLoading,
|
||||
'Не удалось отфильтровать НПВ по времени'
|
||||
), [npt, filterValue])
|
||||
|
||||
useEffect(() => {
|
||||
const npt = []
|
||||
operations?.fact?.forEach((row) => {
|
||||
if (row?.isNPT !== false) return
|
||||
const nptH = +(row.nptHours ?? 0)
|
||||
npt.push({
|
||||
...row,
|
||||
day: row.day - nptH / 24,
|
||||
date: fractionalSum(row.date, -nptH, 'hour'),
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
const data = {
|
||||
datasets: [
|
||||
makeDataset(operations?.fact, 'Факт', '#0A0', 3),
|
||||
makeDataset(operations?.predict, 'Прогноз', 'purple', 1, [7, 3]),
|
||||
makeDataset(operations?.plan, 'План', '#F00', 3),
|
||||
makeDataset(npt, 'Факт без НПВ', '#00F', 3)
|
||||
]
|
||||
}
|
||||
|
||||
if (chartRef.current && !chart) {
|
||||
const thisOptions = {}
|
||||
Object.assign(thisOptions, defaultOptions)
|
||||
thisOptions.onClick = onPointClick
|
||||
thisOptions.scales.x = scaleTypes[xLabel]
|
||||
thisOptions.parsing.xAxisKey = xLabel
|
||||
|
||||
const newChart = new Chart(chartRef.current, {
|
||||
type: 'line',
|
||||
plugins: [ChartDataLabels],
|
||||
options: thisOptions,
|
||||
data: data
|
||||
})
|
||||
setChart(newChart)
|
||||
|
||||
return () => chart?.destroy()
|
||||
} else {
|
||||
chart.data = data
|
||||
chart.options.scales.x = scaleTypes[xLabel]
|
||||
chart.options.parsing.xAxisKey = xLabel
|
||||
chart.update()
|
||||
// Обнуление ширины необходимо для уменьшения размена при resize после появления элементов
|
||||
chart.canvas.parentNode.style.width = '0'
|
||||
chart.resize()
|
||||
}
|
||||
}, [chart, operations, xLabel, onPointClick])
|
||||
|
||||
const toogleTable = useCallback(() => {
|
||||
setOperations((pre) => ({ ...pre }))
|
||||
setTableVisible((pre) => !pre)
|
||||
}, [])
|
||||
|
||||
const onExport = useCallback(() => invokeWebApiWrapperAsync(
|
||||
async () => {
|
||||
await download(`/api/well/${idWell}/wellOperations/scheduleReport`)
|
||||
},
|
||||
setIsFileExporting,
|
||||
'Не удалось загрузить файл'
|
||||
), [idWell])
|
||||
|
||||
return (
|
||||
<div className={'container tvd-page'}>
|
||||
<div className={'tvd-top'}>
|
||||
<h2>{title || 'График Глубина-день'}</h2>
|
||||
<div>
|
||||
<Switch
|
||||
checkedChildren={'Дата'}
|
||||
unCheckedChildren={'Дни со старта'}
|
||||
loading={isLoading}
|
||||
onChange={(checked) => setXLabel(checked ? 'date' : 'day')}
|
||||
style={{ marginRight: '20px' }}
|
||||
/>
|
||||
<Button
|
||||
icon={<ExportOutlined />}
|
||||
loading={isFileExporting}
|
||||
onClick={onExport}
|
||||
style={{ marginRight: '5px' }}
|
||||
>Экспорт</Button>
|
||||
<Button
|
||||
icon={tableVisible ? <DoubleLeftOutlined /> : <DoubleRightOutlined />}
|
||||
onClick={toogleTable}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<LoaderPortal show={isLoading} style={{ flex: '1'}}>
|
||||
<div className={'tvd-main'}>
|
||||
<div className={'tvd-left'}>
|
||||
<div className={'tvd-tr-table'} onMouseEnter={(e) => console.log(e)}>
|
||||
<Descriptions bordered column={1} size={'small'} style={{ backgroundColor: 'white' }}>
|
||||
<Item label={'Дата'}>{printDate(additionalData.endDate)}</Item>
|
||||
<Item label={'Отставание (сут)'}>{numericRender(additionalData.lag)}</Item>
|
||||
</Descriptions>
|
||||
</div>
|
||||
<canvas ref={chartRef} />
|
||||
<div className={'tvd-bl-table'} style={{ bottom: xLabel === 'day' ? '35px' : '85px' }}>
|
||||
<Descriptions bordered column={1} size={'small'} style={{ backgroundColor: 'white' }}>
|
||||
<Item label={'Отставание (сут)'}>{numericRender(additionalData.lag)}</Item>
|
||||
<Item label={'Начало цикла (план)'}>{printDate(additionalData.planStartDate)}</Item>
|
||||
<Item label={'Начало цикла (факт)'}>{printDate(additionalData.factStartDate)}</Item>
|
||||
<Item label={'Окончание цикла (план)'}>{printDate(additionalData.planEndDate)}</Item>
|
||||
<Item label={'Окончание цикла (факт)'}>{printDate(additionalData.factEndDate)}</Item>
|
||||
</Descriptions>
|
||||
</div>
|
||||
</div>
|
||||
{tableVisible && (
|
||||
<div className={'tvd-right'}>
|
||||
<div className={'tvd-npt-filter'}>
|
||||
<FilterOutlined />
|
||||
<span>Фильтр время НПВ ≥</span>
|
||||
<InputNumber
|
||||
step={0.5}
|
||||
max={10000}
|
||||
min={0}
|
||||
defaultValue={0}
|
||||
onChange={(value) => setFilterValue(value ?? 0)}
|
||||
value={filterValue}
|
||||
/>
|
||||
<span>ч.</span>
|
||||
</div>
|
||||
<LoaderPortal show={isTableLoading}>
|
||||
<Table
|
||||
bordered
|
||||
size={'small'}
|
||||
dataSource={filteredNPT}
|
||||
columns={nptTableColumns}
|
||||
pagination={false}
|
||||
tableName={'tvd_npt'}
|
||||
scroll={{ y: '60vh', scrollToFirstRowOnChange: true }}
|
||||
/>
|
||||
</LoaderPortal>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</LoaderPortal>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
||||
export default Tvd
|
||||
67
src/pages/WellOperations/Tvd/AdditionalTables.jsx
Normal file
67
src/pages/WellOperations/Tvd/AdditionalTables.jsx
Normal file
@ -0,0 +1,67 @@
|
||||
import { Descriptions } from 'antd'
|
||||
import { memo, useEffect, useState } from 'react'
|
||||
|
||||
import { makeNumericRender } from '@components/Table'
|
||||
import { invokeWebApiWrapperAsync } from '@components/factory'
|
||||
import { formatDate, fractionalSum } from '@utils/datetime'
|
||||
|
||||
import '@styles/tvd.less'
|
||||
|
||||
const { Item } = Descriptions
|
||||
|
||||
const calcEndDate = (saubData) => {
|
||||
if (!Array.isArray(saubData) || saubData.length <= 0) return [null, null]
|
||||
const lastElm = saubData.at(-1)
|
||||
return [saubData[0]?.date, fractionalSum(lastElm?.date, lastElm?.nptHours, 'hour')]
|
||||
}
|
||||
|
||||
const numericRender = makeNumericRender(2)
|
||||
const printDate = (date) => formatDate(date) ?? '-'
|
||||
|
||||
export const AdditionalTables = memo(({ operations, xLabel, setIsLoading }) => {
|
||||
const [additionalData, setAdditionalData] = useState({})
|
||||
|
||||
useEffect(() => invokeWebApiWrapperAsync(
|
||||
async () => {
|
||||
const [factStartDate, factEndDate] = calcEndDate(operations.fact)
|
||||
const [planStartDate, planEndDate] = calcEndDate(operations.plan)
|
||||
const [predictStartDate, predictEndDate] = calcEndDate(operations.predict)
|
||||
|
||||
const last = predictEndDate ?? factEndDate
|
||||
setAdditionalData({
|
||||
lag: (+new Date(last) - +new Date(planEndDate)) / 86400_000,
|
||||
endDate: last,
|
||||
factStartDate,
|
||||
factEndDate,
|
||||
planStartDate,
|
||||
planEndDate,
|
||||
predictStartDate,
|
||||
predictEndDate,
|
||||
})
|
||||
},
|
||||
setIsLoading,
|
||||
'Не удалось высчитать дополнительные данные'
|
||||
), [operations, setIsLoading])
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={'tvd-tr-table'}>
|
||||
<Descriptions bordered column={1} size={'small'} style={{ backgroundColor: 'white' }}>
|
||||
<Item label={'Дата завершения'}>{printDate(additionalData.endDate)}</Item>
|
||||
<Item label={'Отставание (сут)'}>{numericRender(additionalData.lag)}</Item>
|
||||
</Descriptions>
|
||||
</div>
|
||||
<div className={'tvd-bl-table'} style={{ bottom: xLabel === 'day' ? '35px' : '85px' }}>
|
||||
<Descriptions bordered column={1} size={'small'} style={{ backgroundColor: 'white' }}>
|
||||
<Item label={'Отставание (сут)'}>{numericRender(additionalData.lag)}</Item>
|
||||
<Item label={'Начало цикла (план)'}>{printDate(additionalData.planStartDate)}</Item>
|
||||
<Item label={'Начало цикла (факт)'}>{printDate(additionalData.factStartDate)}</Item>
|
||||
<Item label={'Окончание цикла (план)'}>{printDate(additionalData.planEndDate)}</Item>
|
||||
<Item label={'Окончание цикла (факт)'}>{printDate(additionalData.factEndDate)}</Item>
|
||||
</Descriptions>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
||||
export default AdditionalTables
|
||||
29
src/pages/WellOperations/Tvd/NetGraphExport.jsx
Normal file
29
src/pages/WellOperations/Tvd/NetGraphExport.jsx
Normal file
@ -0,0 +1,29 @@
|
||||
import { memo, useCallback, useState } from 'react'
|
||||
import { ExportOutlined } from '@ant-design/icons'
|
||||
import { Button } from 'antd'
|
||||
|
||||
import { download, invokeWebApiWrapperAsync } from '@components/factory'
|
||||
|
||||
export const NetGraphExport = memo(({ idWell, ...other }) => {
|
||||
const [isFileExporting, setIsFileExporting] = useState(false)
|
||||
|
||||
const onExport = useCallback(() => invokeWebApiWrapperAsync(
|
||||
async () => await download(`/api/well/${idWell}/wellOperations/scheduleReport`),
|
||||
setIsFileExporting,
|
||||
'Не удалось загрузить файл'
|
||||
), [idWell])
|
||||
|
||||
return (
|
||||
<Button
|
||||
icon={<ExportOutlined />}
|
||||
loading={isFileExporting}
|
||||
onClick={onExport}
|
||||
style={{ marginRight: '5px' }}
|
||||
{...other}
|
||||
>
|
||||
Сетевой график
|
||||
</Button>
|
||||
)
|
||||
})
|
||||
|
||||
export default NetGraphExport
|
||||
66
src/pages/WellOperations/Tvd/NptTable.jsx
Normal file
66
src/pages/WellOperations/Tvd/NptTable.jsx
Normal file
@ -0,0 +1,66 @@
|
||||
import { memo, useEffect, useState } from 'react'
|
||||
import { InputNumber } from 'antd'
|
||||
import { FilterOutlined } from '@ant-design/icons'
|
||||
|
||||
import LoaderPortal from '@components/LoaderPortal'
|
||||
import { invokeWebApiWrapperAsync } from '@components/factory'
|
||||
import { makeDateColumn, makeNumericColumn, makeTextColumn, Table } from '@components/Table'
|
||||
|
||||
export const columns = [
|
||||
makeTextColumn('Конструкция секции', 'wellSectionTypeName', null, null, null, { width: 140 }),
|
||||
makeNumericColumn('Глубина', 'depth', null, null, null, 80),
|
||||
makeDateColumn('Дата начала', 'date', false, undefined, { width: 90 }),
|
||||
makeNumericColumn('Длительность (ч)', 'durationHours', null, null, null, 120),
|
||||
makeTextColumn('Доп. инфо', 'categoryInfo', null, null, null),
|
||||
makeTextColumn('Комментарий', 'comment'),
|
||||
]
|
||||
|
||||
export const NptTable = memo(({ operations }) => {
|
||||
const [filterValue, setFilterValue] = useState(0)
|
||||
const [npt, setNPT] = useState([])
|
||||
const [filteredNPT, setFilteredNPT] = useState([])
|
||||
const [isTableLoading, setIsTableLoading] = useState(false)
|
||||
|
||||
useEffect(() => invokeWebApiWrapperAsync(
|
||||
async () => setNPT(operations?.filter((row) => row?.isNPT) ?? []),
|
||||
setIsTableLoading,
|
||||
'Не удалось получить список НПВ'
|
||||
), [operations])
|
||||
|
||||
useEffect(() => invokeWebApiWrapperAsync(
|
||||
async () => setFilteredNPT(npt.filter((row) => !filterValue || row.durationHours >= filterValue)),
|
||||
setIsTableLoading,
|
||||
'Не удалось отфильтровать НПВ по времени'
|
||||
), [npt, filterValue])
|
||||
|
||||
return (
|
||||
<div className={'tvd-right'}>
|
||||
<div className={'tvd-npt-filter'}>
|
||||
<FilterOutlined />
|
||||
<span>Фильтр время НПВ ≥</span>
|
||||
<InputNumber
|
||||
step={0.5}
|
||||
max={10000}
|
||||
min={0}
|
||||
defaultValue={0}
|
||||
onChange={(value) => setFilterValue(value ?? 0)}
|
||||
value={filterValue}
|
||||
/>
|
||||
<span>ч.</span>
|
||||
</div>
|
||||
<LoaderPortal show={isTableLoading}>
|
||||
<Table
|
||||
bordered
|
||||
size={'small'}
|
||||
dataSource={filteredNPT}
|
||||
columns={columns}
|
||||
pagination={false}
|
||||
tableName={'tvd_npt'}
|
||||
scroll={{ y: '60vh', scrollToFirstRowOnChange: true }}
|
||||
/>
|
||||
</LoaderPortal>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
||||
export default NptTable
|
||||
226
src/pages/WellOperations/Tvd/index.jsx
Normal file
226
src/pages/WellOperations/Tvd/index.jsx
Normal file
@ -0,0 +1,226 @@
|
||||
import { useHistory } from 'react-router-dom'
|
||||
import { memo, useState, useRef, useEffect, useCallback } from 'react'
|
||||
import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons'
|
||||
import { Switch, Button } from 'antd'
|
||||
|
||||
import {
|
||||
Chart,
|
||||
TimeScale,
|
||||
LinearScale,
|
||||
Legend,
|
||||
LineController,
|
||||
PointElement,
|
||||
LineElement
|
||||
} from 'chart.js'
|
||||
import 'chartjs-adapter-moment'
|
||||
import zoomPlugin from 'chartjs-plugin-zoom'
|
||||
import ChartDataLabels from 'chartjs-plugin-datalabels'
|
||||
|
||||
import LoaderPortal from '@components/LoaderPortal'
|
||||
import { invokeWebApiWrapperAsync } from '@components/factory'
|
||||
import { formatDate, fractionalSum } from '@utils/datetime'
|
||||
import { getOperations } from '@utils/functions'
|
||||
|
||||
import NptTable from './NptTable'
|
||||
import NetGraphExport from './NetGraphExport'
|
||||
import AdditionalTables from './AdditionalTables'
|
||||
|
||||
import '@styles/index.css'
|
||||
import '@styles/tvd.less'
|
||||
|
||||
Chart.register(
|
||||
TimeScale,
|
||||
LinearScale,
|
||||
LineController,
|
||||
LineElement,
|
||||
PointElement,
|
||||
Legend,
|
||||
ChartDataLabels,
|
||||
zoomPlugin
|
||||
)
|
||||
|
||||
const numericRender = (value) => Number.isFinite(value) ? (+value).toFixed(2) : '-'
|
||||
|
||||
const scaleTypes = {
|
||||
day: {
|
||||
min: 0,
|
||||
type: 'linear',
|
||||
display: true,
|
||||
title: { display: false, text: '' },
|
||||
ticks: { stepSize: 1 }
|
||||
},
|
||||
date: {
|
||||
display: true,
|
||||
title: { display: true },
|
||||
type: 'time',
|
||||
time: { unit: 'day', displayFormats: { day: 'DD.MM.YYYY' } },
|
||||
grid: { drawTicks: true },
|
||||
ticks: {
|
||||
stepSize: 3,
|
||||
major: { enabled: true },
|
||||
z: 1,
|
||||
display: true,
|
||||
textStrokeColor: '#fff',
|
||||
textStrokeWidth: 2,
|
||||
color: '#000',
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const defaultOptions = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
aspectRatio: false,
|
||||
interaction: { intersect: false, mode: 'point' },
|
||||
scales: {
|
||||
x: scaleTypes.day,
|
||||
y: {
|
||||
type: 'linear',
|
||||
position: 'top',
|
||||
reverse: true,
|
||||
display: true,
|
||||
title: { display: false, text: '' }
|
||||
}
|
||||
},
|
||||
parsing: { xAxisKey: 'day', yAxisKey: 'depth' },
|
||||
elements: { point: { radius: 1.7 } },
|
||||
plugins: {
|
||||
legend: { display: true },
|
||||
datalabels: { display: false },
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
position: 'nearest',
|
||||
callbacks: {
|
||||
title: (items) => [
|
||||
`Дата: ${formatDate(items[0].raw?.date) ?? '-'}`,
|
||||
`День с начала бурения: ${parseInt(items[0].raw?.day)}`,
|
||||
],
|
||||
afterTitle: (items) => `Глубина: ${numericRender(items[0].raw?.depth)}`,
|
||||
label: (item) => [
|
||||
item.raw.wellSectionTypeName + ': ' + item.raw.categoryName,
|
||||
`Длительность (ч): ${item.raw.nptHours}`
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const makeDataset = (data, label, color, borderWidth = 1.5, borderDash) => ({
|
||||
label,
|
||||
data,
|
||||
backgroundColor: color,
|
||||
borderColor: color,
|
||||
borderWidth,
|
||||
borderDash,
|
||||
})
|
||||
|
||||
export const Tvd = memo(({ idWell, title }) => {
|
||||
const [chart, setChart] = useState()
|
||||
const [xLabel, setXLabel] = useState('day')
|
||||
const [operations, setOperations] = useState({})
|
||||
const [tableVisible, setTableVisible] = useState(false)
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
|
||||
const chartRef = useRef(null)
|
||||
const history = useHistory()
|
||||
|
||||
const onPointClick = useCallback((e) => {
|
||||
const points = e?.chart?.tooltip?.dataPoints
|
||||
if (!points || !(points.length > 0)) return
|
||||
|
||||
const datasetId = points.find((p) => p.datasetIndex !== 1)?.datasetIndex
|
||||
if (typeof datasetId === 'undefined') return
|
||||
|
||||
const datasetName = datasetId === 2 ? 'plan' : 'fact'
|
||||
const ids = points.filter((p) => p?.raw?.id).map((p) => p.raw.id).join(',')
|
||||
history.push(`/well/${idWell}/operations/${datasetName}/?selectedId=${ids}`)
|
||||
}, [idWell, history])
|
||||
|
||||
useEffect(() => invokeWebApiWrapperAsync(
|
||||
async () => setOperations(await getOperations(idWell)),
|
||||
setIsLoading,
|
||||
`Не удалось загрузить операции по скважине "${idWell}"`,
|
||||
'Получение списка опервций по скважине'
|
||||
), [idWell])
|
||||
|
||||
useEffect(() => {
|
||||
const withoutNpt = []
|
||||
operations?.fact?.forEach((row) => {
|
||||
if (row?.isNPT !== false) return
|
||||
const nptH = +(row.nptHours ?? 0)
|
||||
withoutNpt.push({
|
||||
...row,
|
||||
day: row.day - nptH / 24,
|
||||
date: fractionalSum(row.date, -nptH, 'hour'),
|
||||
})
|
||||
})
|
||||
|
||||
const data = { datasets: [
|
||||
makeDataset(operations?.fact, 'Факт', '#0A0', 3),
|
||||
makeDataset(operations?.predict, 'Прогноз', 'purple', 1, [7, 3]),
|
||||
makeDataset(operations?.plan, 'План', '#F00', 3),
|
||||
makeDataset(withoutNpt, 'Факт без НПВ', '#00F', 3)
|
||||
]}
|
||||
|
||||
if (chartRef.current && !chart) {
|
||||
const thisOptions = {}
|
||||
Object.assign(thisOptions, defaultOptions)
|
||||
thisOptions.onClick = onPointClick
|
||||
thisOptions.scales.x = scaleTypes[xLabel]
|
||||
thisOptions.parsing.xAxisKey = xLabel
|
||||
|
||||
const newChart = new Chart(chartRef.current, {
|
||||
type: 'line',
|
||||
plugins: [ChartDataLabels],
|
||||
options: thisOptions,
|
||||
data: data
|
||||
})
|
||||
setChart(newChart)
|
||||
|
||||
return () => chart?.destroy()
|
||||
} else {
|
||||
chart.data = data
|
||||
chart.options.scales.x = scaleTypes[xLabel]
|
||||
chart.options.parsing.xAxisKey = xLabel
|
||||
chart.update()
|
||||
// Обнуление ширины необходимо для уменьшения размена при resize после появления элементов
|
||||
chart.canvas.parentNode.style.width = '0'
|
||||
chart.resize()
|
||||
}
|
||||
}, [chart, operations, xLabel, onPointClick])
|
||||
|
||||
const toogleTable = useCallback(() => {
|
||||
setOperations(pre => ({ ...pre }))
|
||||
setTableVisible(v => !v)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className={'container tvd-page'}>
|
||||
<div className={'tvd-top'}>
|
||||
<h2>{title || 'График Глубина-день'}</h2>
|
||||
<div>
|
||||
<Switch
|
||||
checkedChildren={'Дата'}
|
||||
unCheckedChildren={'Дни со старта'}
|
||||
loading={isLoading}
|
||||
onChange={(checked) => setXLabel(checked ? 'date' : 'day')}
|
||||
style={{ marginRight: '20px' }}
|
||||
/>
|
||||
<NetGraphExport idWell={idWell} />
|
||||
<Button icon={tableVisible ? <DoubleRightOutlined /> : <DoubleLeftOutlined />} onClick={toogleTable}>НПВ</Button>
|
||||
</div>
|
||||
</div>
|
||||
<LoaderPortal show={isLoading} style={{ flex: 1 }}>
|
||||
<div className={'tvd-main'}>
|
||||
<div className={'tvd-left'}>
|
||||
<AdditionalTables operations={operations} xLabel={xLabel} setIsLoading={setIsLoading} />
|
||||
<canvas ref={chartRef} />
|
||||
</div>
|
||||
{tableVisible && <NptTable operations={operations?.fact} />}
|
||||
</div>
|
||||
</LoaderPortal>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
||||
export default Tvd
|
||||
Loading…
Reference in New Issue
Block a user