forked from ddrilling/asb_cloud_front
LastData renamed to Measure
This commit is contained in:
Фролов
parent
a164cac9d0
commit
04ce3f0ebf
@ -1,248 +0,0 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useParams } from "react-router-dom";
|
||||
import { InputNumber, Form, Popconfirm, Typography, Button } from 'antd'
|
||||
import LoaderPortal from '../../components/LoaderPortal'
|
||||
import { makeColumn, Table } from '../../components/Table'
|
||||
import { FluidService } from '../../services/api/services/FluidService';
|
||||
import { notify } from "../../components/factory"
|
||||
|
||||
const EditableCell = ({
|
||||
editing,
|
||||
dataIndex,
|
||||
title,
|
||||
inputType,
|
||||
record,
|
||||
index,
|
||||
children,
|
||||
...restProps
|
||||
}) => {
|
||||
return (
|
||||
<td {...restProps} style={{paddingLeft: 2, paddingRight: 2}}>
|
||||
<div style={{width: '100%', display: 'flex', justifyContent: 'center'}}>
|
||||
{editing ? (
|
||||
<Form.Item
|
||||
name={dataIndex}
|
||||
style={{ margin: 0 }}
|
||||
rules={[
|
||||
{
|
||||
type: 'number',
|
||||
required: true,
|
||||
message: null
|
||||
},
|
||||
]}
|
||||
>
|
||||
<InputNumber size="small" style={{width:"auto"}} />
|
||||
</Form.Item>
|
||||
) : (
|
||||
children
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
);
|
||||
};
|
||||
|
||||
export function DrillingFluid() {
|
||||
let {id} = useParams()
|
||||
|
||||
const [form] = Form.useForm();
|
||||
const [editingKey, setEditingKey] = useState('');
|
||||
const [idCategory, setIdCategory] = useState(8);
|
||||
const [dataPlan, setDataPlan] = useState({})
|
||||
const [dataFact, setDataFact] = useState({})
|
||||
const [isUpdatingData, setIsUpdatingData] = useState(false)
|
||||
|
||||
const [showLoader, setShowLoader] = useState(false)
|
||||
|
||||
const isEditing = (row) => row?.key === editingKey;
|
||||
|
||||
const columns = [
|
||||
makeColumn('Наименование', 'name', { dataIndex: 'name', align: 'center', className: 'small-font'}),
|
||||
makeColumn('Температура, °C', 'temperature', { dataIndex: 'temperature', align: 'center', className: 'small-font', editable: true}),
|
||||
makeColumn('Плотность, г/см³', 'density', { dataIndex: 'density', align: 'center', className: 'small-font', editable: true}),
|
||||
makeColumn('Усл. вязкость, сек', 'conditionalViscosity', { dataIndex: 'conditionalViscosity', align: 'center', className: 'small-font', editable: true}),
|
||||
makeColumn('R300', 'r300', { dataIndex: 'r300', align: 'center', className: 'small-font', editable: true}),
|
||||
makeColumn('R600', 'r600', { dataIndex: 'r600', align: 'center', className: 'small-font', editable: true}),
|
||||
makeColumn('R3/R6', 'r3r6', { dataIndex: 'r3r6', align: 'center', className: 'small-font', editable: true}),
|
||||
makeColumn('ДНС, дПа', 'dnsDpa', { dataIndex: 'dnsDpa', align: 'center', className: 'small-font', editable: true}),
|
||||
makeColumn('Пластич. вязкость, сПз', 'plasticViscocity', { dataIndex: 'plasticViscocity', align: 'center', className: 'small-font', editable: true}),
|
||||
makeColumn('СНС, дПа', 'snsDpa', { dataIndex: 'snsDpa', align: 'center', className: 'small-font', editable: true}),
|
||||
makeColumn('R3/R6 49С', 'r3r649С', { dataIndex: 'r3r649С', align: 'center', className: 'small-font', editable: true}),
|
||||
makeColumn('ДНС 49С, дПа', 'dns49Cdpa', { dataIndex: 'dns49Cdpa', align: 'center', className: 'small-font', editable: true}),
|
||||
makeColumn('Пластич. вязкость 49С, сПз', 'plasticViscocity49c', { dataIndex: 'plasticViscocity49c', align: 'center', className: 'small-font', editable: true}),
|
||||
makeColumn('СНС 49С, дПа', 'sns49Cdpa', { dataIndex: 'sns49Cdpa', align: 'center', className: 'small-font', editable: true}),
|
||||
makeColumn('МВТ, кг/м³', 'mbt', { dataIndex: 'mbt', align: 'center', className: 'small-font', editable: true}),
|
||||
makeColumn('Песок, %', 'sand', { dataIndex: 'sand', align: 'center', className: 'small-font', editable: true}),
|
||||
makeColumn('Фильтрация, см³/30мин', 'filtering', { dataIndex: 'filtering', align: 'center', className: 'small-font', editable: true}),
|
||||
makeColumn('Корка, мм', 'crust', { dataIndex: 'crust', align: 'center', className: 'small-font', editable: true}),
|
||||
makeColumn('KTK', 'ktk', { dataIndex: 'ktk', align: 'center', className: 'small-font', editable: true}),
|
||||
makeColumn('pH', 'ph', { dataIndex: 'ph', align: 'center', className: 'small-font', editable: true}),
|
||||
makeColumn('Жесткость, мг/л', 'hardness', { dataIndex: 'hardness', align: 'center', className: 'small-font', editable: true}),
|
||||
makeColumn('Хлориды, мг/л', 'chlorides', { dataIndex: 'chlorides', align: 'center', className: 'small-font', editable: true}),
|
||||
makeColumn('PF', 'pf', { dataIndex: 'pf', align: 'center', className: 'small-font',
|
||||
render: text => <span style={{marginLeft: '12px', marginRight: '12px'}}>{text}</span>, editable: true}),
|
||||
makeColumn('Mf', 'mf', { dataIndex: 'mf', align: 'center', className: 'small-font',
|
||||
render: text => <span style={{marginLeft: '12px', marginRight: '12px'}}>{text}</span>, editable: true}),
|
||||
makeColumn('Pm', 'pm', { dataIndex: 'pm', align: 'center', className: 'small-font',
|
||||
render: text => <span style={{marginLeft: '12px', marginRight: '12px'}}>{text}</span>, editable: true}),
|
||||
makeColumn('Твердая фаза раствора, %', 'fluidSolidPhase', { dataIndex: 'fluidSolidPhase', align: 'center', className: 'small-font', editable: true}),
|
||||
makeColumn('Смазка, %', 'grease', { dataIndex: 'grease', align: 'center', className: 'small-font', editable: true}),
|
||||
makeColumn('Карбонат кальция, кг/м³', 'calciumCarbonate', { dataIndex: 'calciumCarbonate', align: 'center', className: 'small-font', editable: true}),
|
||||
{
|
||||
title: 'Действие',
|
||||
dataIndex: 'action',
|
||||
align: 'center',
|
||||
width: 150,
|
||||
className: 'small-font',
|
||||
render: (_, row) => {
|
||||
const editable = isEditing(row);
|
||||
return editable ? (
|
||||
<span>
|
||||
<Button
|
||||
onClick={() => form.submit()}
|
||||
style={{ marginRight: 8 }}
|
||||
>
|
||||
Сохранить
|
||||
</Button>
|
||||
<Popconfirm style={{width: '100px'}} title={<span>Отменить<br />редактирование?</span>} onConfirm={cancel}>
|
||||
<Button>Отменить</Button>
|
||||
</Popconfirm>
|
||||
</span>
|
||||
) : (
|
||||
<Typography.Link disabled={editingKey !== ''} onClick={() => edit(row)}>
|
||||
Редактировать
|
||||
</Typography.Link>
|
||||
);
|
||||
},
|
||||
}
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
const update = async () => {
|
||||
setShowLoader(true)
|
||||
|
||||
try {
|
||||
let response = await FluidService.get(id, 8)
|
||||
response.key = 8
|
||||
response.name = 'План'
|
||||
setDataPlan(response)
|
||||
}
|
||||
catch (ex) {
|
||||
notify(`Не удалось загрузить плановые данные бурового раствора по скважине "${id}"`, 'error')
|
||||
console.log(ex)
|
||||
}
|
||||
|
||||
try {
|
||||
let response = await FluidService.get(id, 9)
|
||||
response.key = 9
|
||||
response.name = 'Факт'
|
||||
setDataFact(response)
|
||||
}
|
||||
catch (ex) {
|
||||
notify(`Не удалось загрузить фактические данные бурового раствора по скважине "${id}"`, 'error')
|
||||
console.log(ex)
|
||||
}
|
||||
|
||||
setIsUpdatingData(false)
|
||||
setShowLoader(false)
|
||||
}
|
||||
update()
|
||||
}, [id, isUpdatingData])
|
||||
|
||||
const mergedColumns = columns.map((col) => {
|
||||
if (!col.editable) {
|
||||
return col;
|
||||
}
|
||||
|
||||
return {
|
||||
...col,
|
||||
onCell: (row) => ({
|
||||
row,
|
||||
dataIndex: col.dataIndex,
|
||||
title: col.title,
|
||||
editing: isEditing(row),
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
||||
const edit = (row) => {
|
||||
setIdCategory(row.key)
|
||||
form.setFieldsValue({
|
||||
...row,
|
||||
});
|
||||
setEditingKey(row.key);
|
||||
};
|
||||
|
||||
const cancel = () => {
|
||||
setEditingKey('');
|
||||
};
|
||||
|
||||
const save = async (formData) => {
|
||||
|
||||
const params = {
|
||||
key: form.getFieldValue('key'),
|
||||
name: idCategory === 8 ? 'План' : 'Факт',
|
||||
temperature: form.getFieldValue('temperature'),
|
||||
density: form.getFieldValue('density'),
|
||||
conditionalViscosity: form.getFieldValue('conditionalViscosity'),
|
||||
r300: form.getFieldValue('r300'),
|
||||
r600: form.getFieldValue('r600'),
|
||||
r3r6: form.getFieldValue('r3r6'),
|
||||
dnsDpa: form.getFieldValue('dnsDpa'),
|
||||
plasticViscocity: form.getFieldValue('plasticViscocity'),
|
||||
snsDpa: form.getFieldValue('snsDpa'),
|
||||
r3r649С: form.getFieldValue('r3r649С'),
|
||||
dns49Cdpa: form.getFieldValue('dns49Cdpa'),
|
||||
plasticViscocity49c: form.getFieldValue('plasticViscocity49c'),
|
||||
sns49Cdpa: form.getFieldValue('sns49Cdpa'),
|
||||
mbt: form.getFieldValue('mbt'),
|
||||
sand: form.getFieldValue('sand'),
|
||||
filtering: form.getFieldValue('filtering'),
|
||||
crust: form.getFieldValue('crust'),
|
||||
ktk: form.getFieldValue('ktk'),
|
||||
ph: form.getFieldValue('ph'),
|
||||
hardness: form.getFieldValue('hardness'),
|
||||
chlorides: form.getFieldValue('chlorides'),
|
||||
pf: form.getFieldValue('pf'),
|
||||
mf: form.getFieldValue('mf'),
|
||||
pm: form.getFieldValue('pm'),
|
||||
fluidSolidPhase: form.getFieldValue('fluidSolidPhase'),
|
||||
grease: form.getFieldValue('grease'),
|
||||
calciumCarbonate: form.getFieldValue('calciumCarbonate')
|
||||
}
|
||||
|
||||
try {
|
||||
setShowLoader(true)
|
||||
await FluidService.put(`${id}`, idCategory, params)
|
||||
|
||||
setIsUpdatingData(true)
|
||||
setShowLoader(false)
|
||||
|
||||
setEditingKey('')
|
||||
} catch (errInfo) {
|
||||
console.log('Validate Failed:', errInfo);
|
||||
}
|
||||
};
|
||||
|
||||
return (<LoaderPortal show={showLoader}>
|
||||
<Form form={form} component={false} onFinish={save}>
|
||||
<Table
|
||||
components={{
|
||||
body: {
|
||||
cell: EditableCell,
|
||||
},
|
||||
}}
|
||||
columns={mergedColumns}
|
||||
dataSource={[dataPlan, dataFact]}
|
||||
size={'small'}
|
||||
bordered={true}
|
||||
pagination={false}
|
||||
/>
|
||||
</Form>
|
||||
<div> </div>
|
||||
<p style={{textAlign: "right"}}>
|
||||
Дата последнего обновления:
|
||||
<b>План:</b> <b>{new Date(dataPlan?.lastUpdate).toLocaleString()}</b>
|
||||
<b>Факт:</b> <b>{new Date(dataFact?.lastUpdate).toLocaleString()}</b>
|
||||
</p>
|
||||
</LoaderPortal>)
|
||||
}
|
||||
@ -1,12 +0,0 @@
|
||||
// import { useState, useEffect } from 'react'
|
||||
// import { EditableTable, DatePickerWrapper, SelectFromDictionary, numericColumnOptions, makeColumn } from "../../components/Table"
|
||||
// import LoaderPortal from '../../components/LoaderPortal'
|
||||
// import { invokeWebApiWrapperAsync } from '../../components/factory'
|
||||
|
||||
export const LastDataTable = ({idWell, columns, service}) => {
|
||||
// const [showLoader, setShowLoader] = useState(false)
|
||||
|
||||
// const update = () => {}
|
||||
|
||||
return <div>Open hystory</div>
|
||||
}
|
||||
@ -1,241 +0,0 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useParams } from "react-router-dom";
|
||||
import { Table, InputNumber, Input, Form, Popconfirm, Typography, Button } from 'antd'
|
||||
import LoaderPortal from '../LoaderPortal'
|
||||
import { makeColumn } from '../Table'
|
||||
import { MudDiagramService } from '../../services/api/services/MudDiagramService'
|
||||
import { notify } from "../factory"
|
||||
|
||||
const EditableCell = ({
|
||||
editing,
|
||||
dataIndex,
|
||||
title,
|
||||
inputType,
|
||||
record,
|
||||
index,
|
||||
children,
|
||||
...restProps
|
||||
}) => {
|
||||
const inputNumber = <InputNumber size="small" style={{width:"auto"}} />
|
||||
const input = <Input size="small" style={{width:"auto"}} />
|
||||
return (
|
||||
<td {...restProps} style={{paddingLeft: 2, paddingRight: 2}}>
|
||||
<div style={{width: '100%', display: 'flex', justifyContent: 'center'}}>
|
||||
{editing ? (
|
||||
<Form.Item
|
||||
name={dataIndex}
|
||||
style={{ margin: 0 }}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: ''
|
||||
},
|
||||
]}
|
||||
>
|
||||
{(dataIndex === 'preliminaryConclusion' || dataIndex === 'summary') ? input : inputNumber }
|
||||
</Form.Item>
|
||||
) : (
|
||||
children
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
);
|
||||
};
|
||||
|
||||
export function SludgeDiagram() {
|
||||
let {id} = useParams()
|
||||
|
||||
const [form] = Form.useForm();
|
||||
const [editingKey, setEditingKey] = useState('');
|
||||
const [data, setData] = useState({})
|
||||
const [isUpdatingData, setIsUpdatingData] = useState(false)
|
||||
const [showLoader, setShowLoader] = useState(false)
|
||||
|
||||
const isEditing = (row) => row.key === editingKey;
|
||||
|
||||
const columns = [
|
||||
makeColumn('N пробы', 'probeNumber', { dataIndex: 'probeNumber', align: 'center', className: 'yellow-background', editable: true}),
|
||||
makeColumn('Глубина отбора пробы', 'probeExtractionDepth', { dataIndex: 'probeExtractionDepth', align: 'center', className: 'yellow-background', editable: true}),
|
||||
{
|
||||
title: 'Литология',
|
||||
key: 'lithology',
|
||||
dataIndex: 'lithology',
|
||||
align: 'center',
|
||||
className: 'yellow-background',
|
||||
editable: true,
|
||||
children: [
|
||||
makeColumn('Песчаник (%)', 'sandstone', { dataIndex: 'sandstone', align: 'center', className: 'lightpurple-background', editable: true}),
|
||||
makeColumn('Алевролит (%)', 'siltstone', { dataIndex: 'siltstone', align: 'center', className: 'lightpurple-background', editable: true}),
|
||||
makeColumn('Аргиллит (%)', 'argillit', { dataIndex: 'argillit', align: 'center', className: 'lightpurple-background', editable: true}),
|
||||
makeColumn('Аргиллит бит. (%)', 'brokenArgillit', { dataIndex: 'brokenArgillit', align: 'center', className: 'lightpurple-background', editable: true}),
|
||||
makeColumn('Уголь (%)', 'coal', { dataIndex: 'coal', align: 'center', className: 'lightpurple-background', editable: true}),
|
||||
makeColumn('Песок (%)', 'sand', { dataIndex: 'sand', align: 'center', className: 'lightpurple-background', editable: true}),
|
||||
makeColumn('Глина (%)', 'clay', { dataIndex: 'clay', align: 'center', className: 'lightpurple-background', editable: true}),
|
||||
makeColumn('Известняк (%)', 'camstone', { dataIndex: 'camstone', align: 'center', className: 'lightpurple-background', editable: true}),
|
||||
makeColumn('Цемент (%)', 'cement', { dataIndex: 'cement', align: 'center', className: 'lightpurple-background', editable: true})
|
||||
]
|
||||
},
|
||||
makeColumn('Краткое описание', 'summary', { dataIndex: 'summary', align: 'center', className: 'yellow-background', editable: true}),
|
||||
makeColumn('ЛБА бурового раствора', 'drillingMud', { dataIndex: 'drillingMud', align: 'center', className: 'lightgray-background', editable: true}),
|
||||
makeColumn('ЛБА (шлама)', 'sludge', { dataIndex: 'sludge', align: 'center', className: 'lightorange-background', editable: true}),
|
||||
{
|
||||
title: 'Газопоказания',
|
||||
key: 'gasIndications',
|
||||
dataIndex: 'gasIndications',
|
||||
align: 'center',
|
||||
className: 'yellow-background',
|
||||
children: [
|
||||
makeColumn('Сумма УВ мах. (абс%)', 'maxSum', { dataIndex: 'maxSum', align: 'center', className: 'lightpurple-background', editable: true}),
|
||||
makeColumn('С1 метан (отн%)', 'methane', { dataIndex: 'methane', align: 'center', className: 'lightpurple-background', editable: true}),
|
||||
makeColumn('С2 этан (отн%)', 'ethane', { dataIndex: 'ethane', align: 'center', className: 'lightpurple-background', editable: true}),
|
||||
makeColumn('С3 пропан (отн%)', 'propane', { dataIndex: 'propane', align: 'center', className: 'lightpurple-background', editable: true}),
|
||||
makeColumn('С4 бутан (отн%)', 'butane', { dataIndex: 'butane', align: 'center', className: 'lightpurple-background', editable: true}),
|
||||
makeColumn('С5 пентан (отн%)', 'pentane', { dataIndex: 'pentane', align: 'center', className: 'lightpurple-background', editable: true})
|
||||
]
|
||||
},
|
||||
makeColumn('Мех. скорость', 'mechanicalSpeed', { dataIndex: 'mechanicalSpeed', align: 'center', className: 'yellow-background', editable: true}),
|
||||
makeColumn('Предварительное заключение о насыщении по ГК', 'preliminaryConclusion', { dataIndex: 'preliminaryConclusion', align: 'center', className: 'lightorange-background', editable: true}),
|
||||
{
|
||||
title: 'Действие',
|
||||
dataIndex: 'action',
|
||||
align: 'center',
|
||||
width: 150,
|
||||
className: 'small-font',
|
||||
render: (_, row) => {
|
||||
const editable = isEditing(row);
|
||||
return editable ? (
|
||||
<span>
|
||||
<Button
|
||||
onClick={() => save(row.key)}
|
||||
style={{ marginRight: 8 }}
|
||||
>
|
||||
Сохранить
|
||||
</Button>
|
||||
<Popconfirm style={{width: '100px'}} title={<span>Отменить<br />редактирование?</span>} onConfirm={cancel}>
|
||||
<Button>Отменить</Button>
|
||||
</Popconfirm>
|
||||
</span>
|
||||
) : (
|
||||
<Typography.Link disabled={editingKey !== ''} onClick={() => edit(row)}>
|
||||
Редактировать
|
||||
</Typography.Link>
|
||||
);
|
||||
},
|
||||
}
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
const update = async () => {
|
||||
setShowLoader(true)
|
||||
|
||||
try {
|
||||
let response = await MudDiagramService.get(id, 10)
|
||||
response.key = 10
|
||||
setData(response)
|
||||
}
|
||||
catch (ex) {
|
||||
notify(`Не удалось загрузить данные шламограммы по скважине "${id}"`, 'error')
|
||||
console.log(ex)
|
||||
}
|
||||
|
||||
setIsUpdatingData(false)
|
||||
setShowLoader(false)
|
||||
}
|
||||
update()
|
||||
}, [id, isUpdatingData])
|
||||
|
||||
const mapColumns = (col) => {
|
||||
if(col.children)
|
||||
col.children = col.children.map(mapColumns)
|
||||
|
||||
if (!col.editable) {
|
||||
return col;
|
||||
}
|
||||
|
||||
return {
|
||||
...col,
|
||||
onCell: (row) => ({
|
||||
row,
|
||||
dataIndex: col.dataIndex,
|
||||
title: col.title,
|
||||
editing: isEditing(row)
|
||||
}),
|
||||
};
|
||||
}
|
||||
|
||||
const mergedColumns = columns.map(mapColumns);
|
||||
|
||||
const edit = (row) => {
|
||||
form.setFieldsValue({
|
||||
...row
|
||||
});
|
||||
setEditingKey(row.key);
|
||||
};
|
||||
|
||||
const cancel = () => {
|
||||
setEditingKey('');
|
||||
};
|
||||
|
||||
const save = async (formData) => {
|
||||
|
||||
const params = {
|
||||
key: 10,
|
||||
probeNumber: form.getFieldValue('probeNumber'),
|
||||
probeExtractionDepth: form.getFieldValue('probeExtractionDepth'),
|
||||
sandstone: form.getFieldValue('sandstone'),
|
||||
siltstone: form.getFieldValue('siltstone'),
|
||||
argillit: form.getFieldValue('argillit'),
|
||||
brokenArgillit: form.getFieldValue('brokenArgillit'),
|
||||
coal: form.getFieldValue('coal'),
|
||||
sand: form.getFieldValue('sand'),
|
||||
clay: form.getFieldValue('clay'),
|
||||
camstone: form.getFieldValue('camstone'),
|
||||
cement: form.getFieldValue('cement'),
|
||||
summary: form.getFieldValue('summary'),
|
||||
drillingMud: form.getFieldValue('drillingMud'),
|
||||
sludge: form.getFieldValue('sludge'),
|
||||
maxSum: form.getFieldValue('maxSum'),
|
||||
methane: form.getFieldValue('methane'),
|
||||
ethane: form.getFieldValue('ethane'),
|
||||
propane: form.getFieldValue('propane'),
|
||||
butane: form.getFieldValue('butane'),
|
||||
pentane: form.getFieldValue('pentane'),
|
||||
mechanicalSpeed: form.getFieldValue('mechanicalSpeed'),
|
||||
preliminaryConclusion: form.getFieldValue('preliminaryConclusion'),
|
||||
}
|
||||
|
||||
try {
|
||||
setShowLoader(true)
|
||||
await MudDiagramService.put(`${id}`, 10, params)
|
||||
|
||||
setIsUpdatingData(true)
|
||||
setShowLoader(false)
|
||||
|
||||
setEditingKey('')
|
||||
} catch (errInfo) {
|
||||
console.log('Validate Failed:', errInfo);
|
||||
}
|
||||
};
|
||||
|
||||
return (<LoaderPortal show={showLoader}>
|
||||
<Form form={form} component={false} onFinish={save}>
|
||||
<Table
|
||||
components={{
|
||||
body: {
|
||||
cell: EditableCell,
|
||||
},
|
||||
}}
|
||||
columns={mergedColumns}
|
||||
dataSource={[data]}
|
||||
size={'small'}
|
||||
bordered={true}
|
||||
pagination={false}
|
||||
/>
|
||||
</Form>
|
||||
<div> </div>
|
||||
<p style={{textAlign: "right"}}>
|
||||
Дата последнего обновления: <b>{new Date(data?.lastUpdate).toLocaleString()}</b>
|
||||
</p>
|
||||
</LoaderPortal>
|
||||
)
|
||||
}
|
||||
@ -1,205 +0,0 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useParams } from "react-router-dom";
|
||||
import {Table, InputNumber, Form, Popconfirm, Typography, Button } from 'antd'
|
||||
import LoaderPortal from '../LoaderPortal'
|
||||
import { makeColumn } from '../Table'
|
||||
import { NnbDataService } from '../../services/api/services/NnbDataService';
|
||||
import { notify } from "../factory"
|
||||
|
||||
|
||||
const EditableCell = ({
|
||||
editing,
|
||||
dataIndex,
|
||||
title,
|
||||
inputType,
|
||||
record,
|
||||
index,
|
||||
children,
|
||||
...restProps
|
||||
}) => {
|
||||
return (
|
||||
<td {...restProps} style={{paddingLeft: 2, paddingRight: 2}}>
|
||||
<div style={{width: '100%', display: 'flex', justifyContent: 'center'}}>
|
||||
{editing ? (
|
||||
<Form.Item
|
||||
name={dataIndex}
|
||||
style={{ margin: 0 }}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: ''
|
||||
},
|
||||
]}
|
||||
>
|
||||
<InputNumber size="small" style={{width:"auto"}} />
|
||||
</Form.Item>
|
||||
) : (
|
||||
children
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
);
|
||||
};
|
||||
|
||||
export function Nnb() {
|
||||
let {id} = useParams()
|
||||
|
||||
const [form] = Form.useForm();
|
||||
const [editingKey, setEditingKey] = useState('');
|
||||
const [data, setData] = useState({})
|
||||
const [isUpdatingData, setIsUpdatingData] = useState(false)
|
||||
const [showLoader, setShowLoader] = useState(false)
|
||||
|
||||
const isEditing = (row) => row.key === editingKey;
|
||||
|
||||
const columns = [
|
||||
makeColumn('Глубина по стволу, м', 'depth', { dataIndex: 'depth', align: 'center', editable: true}),
|
||||
makeColumn('Зенитный угол, град', 'zenithAngle', { dataIndex: 'zenithAngle', align: 'center', editable: true}),
|
||||
makeColumn('Азимут магнитный, град', 'magneticAzimuth', { dataIndex: 'magneticAzimuth', align: 'center', editable: true}),
|
||||
makeColumn('Азимут истинный, град', 'trueAzimuth', { dataIndex: 'trueAzimuth', align: 'center', editable: true}),
|
||||
makeColumn('Азимут дирекц., град', 'directAzimuth', { dataIndex: 'directAzimuth', align: 'center', editable: true}),
|
||||
makeColumn('Глубина по вертикали, м', 'verticalDepth', { dataIndex: 'verticalDepth', align: 'center', editable: true}),
|
||||
makeColumn('Абсолютная отметка, м', 'absoluteMark', { dataIndex: 'absoluteMark', align: 'center', editable: true}),
|
||||
makeColumn('Лок. смещение к северу, м', 'localNorthOffset', { dataIndex: 'localNorthOffset', align: 'center', editable: true}),
|
||||
makeColumn('Лок. смещение к востоку, м', 'localEastOffset', { dataIndex: 'localEastOffset', align: 'center', editable: true}),
|
||||
makeColumn('Отклонение от устья, м', 'outFallOffset', { dataIndex: 'outFallOffset', align: 'center', editable: true}),
|
||||
makeColumn('Азимут смещения, град', 'offsetAzimuth', { dataIndex: 'offsetAzimuth', align: 'center', editable: true}),
|
||||
makeColumn('Пространст. интенсивность, град/10 м', 'areaIntensity', { dataIndex: 'areaIntensity', align: 'center', editable: true}),
|
||||
makeColumn('Угол установки отклон., град', 'offsetStopAngle', { dataIndex: 'offsetStopAngle', align: 'center', editable: true}),
|
||||
makeColumn('Интенсив. по зениту, град/10 м', 'zenithIntensity', { dataIndex: 'zenithIntensity', align: 'center', editable: true}),
|
||||
makeColumn('Комментарий', 'comment', { dataIndex: 'comment', align: 'comment', editable: true}),
|
||||
makeColumn('Разница вертикальных глубин между ХХХ (план) и ХХХ (факт)', 'depthPlanFactDifference', { dataIndex: 'depthPlanFactDifference', align: 'center', editable: true}),
|
||||
makeColumn('Расстояние в пространстве между ХХХ (план) и ХХХ (факт)', 'distancePlanFactDifference', { dataIndex: 'distancePlanFactDifference', align: 'center', editable: true}),
|
||||
{
|
||||
title: 'Действие',
|
||||
dataIndex: 'action',
|
||||
align: 'center',
|
||||
width: 150,
|
||||
className: 'small-font',
|
||||
render: (_, row) => {
|
||||
const editable = isEditing(row);
|
||||
return editable ? (
|
||||
<span>
|
||||
<Button
|
||||
onClick={() => save(row.key)}
|
||||
style={{ marginRight: 8 }}
|
||||
>
|
||||
Сохранить
|
||||
</Button>
|
||||
<Popconfirm style={{width: '100px'}} title={<span>Отменить<br />редактирование?</span>} onConfirm={cancel}>
|
||||
<Button>Отменить</Button>
|
||||
</Popconfirm>
|
||||
</span>
|
||||
) : (
|
||||
<Typography.Link disabled={editingKey !== ''} onClick={() => edit(row)}>
|
||||
Редактировать
|
||||
</Typography.Link>
|
||||
);
|
||||
},
|
||||
}
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
const update = async () => {
|
||||
setShowLoader(true)
|
||||
|
||||
try {
|
||||
let response = await NnbDataService.get(id,11)
|
||||
response.key = 11
|
||||
setData(response)
|
||||
}
|
||||
catch (ex) {
|
||||
notify(`Не удалось загрузить данные ННБ по скважине "${id}"`, 'error')
|
||||
console.log(ex)
|
||||
}
|
||||
|
||||
setIsUpdatingData(false)
|
||||
setShowLoader(false)
|
||||
}
|
||||
update()
|
||||
}, [id, isUpdatingData])
|
||||
|
||||
const mergedColumns = columns.map((col) => {
|
||||
if (!col.editable) {
|
||||
return col;
|
||||
}
|
||||
|
||||
return {
|
||||
...col,
|
||||
onCell: (row) => ({
|
||||
row,
|
||||
dataIndex: col.dataIndex,
|
||||
title: col.title,
|
||||
editing: isEditing(row),
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
||||
const edit = (row) => {
|
||||
form.setFieldsValue({
|
||||
...row,
|
||||
});
|
||||
setEditingKey(row.key);
|
||||
};
|
||||
|
||||
const cancel = () => {
|
||||
setEditingKey('');
|
||||
};
|
||||
|
||||
const save = async (formData) => {
|
||||
const params = {
|
||||
key: 11,
|
||||
depth: form.getFieldValue('depth'),
|
||||
zenithAngle: form.getFieldValue('zenithAngle'),
|
||||
magneticAzimuth: form.getFieldValue('magneticAzimuth'),
|
||||
trueAzimuth: form.getFieldValue('trueAzimuth'),
|
||||
directAzimuth: form.getFieldValue('directAzimuth'),
|
||||
verticalDepth: form.getFieldValue('verticalDepth'),
|
||||
absoluteMark: form.getFieldValue('absoluteMark'),
|
||||
localNorthOffset: form.getFieldValue('localNorthOffset'),
|
||||
localEastOffset: form.getFieldValue('localEastOffset'),
|
||||
outFallOffset: form.getFieldValue('outFallOffset'),
|
||||
offsetAzimuth: form.getFieldValue('offsetAzimuth'),
|
||||
areaIntensity: form.getFieldValue('areaIntensity'),
|
||||
offsetStopAngle: form.getFieldValue('offsetStopAngle'),
|
||||
zenithIntensity: form.getFieldValue('zenithIntensity'),
|
||||
comment: form.getFieldValue('comment'),
|
||||
depthPlanFactDifference: form.getFieldValue('depthPlanFactDifference'),
|
||||
distancePlanFactDifference: form.getFieldValue('distancePlanFactDifference')
|
||||
}
|
||||
|
||||
try {
|
||||
setShowLoader(true)
|
||||
await NnbDataService.put(`${id}`, 11, params)
|
||||
|
||||
setIsUpdatingData(true)
|
||||
setShowLoader(false)
|
||||
|
||||
setEditingKey('')
|
||||
} catch (errInfo) {
|
||||
console.log('Validate Failed:', errInfo);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return (<LoaderPortal show={showLoader}>
|
||||
<Form form={form} component={false} onFinish={save}>
|
||||
<Table
|
||||
components={{
|
||||
body: {
|
||||
cell: EditableCell,
|
||||
},
|
||||
}}
|
||||
columns={mergedColumns}
|
||||
dataSource={[data]}
|
||||
size={'small'}
|
||||
bordered={true}
|
||||
pagination={false}
|
||||
/>
|
||||
</Form>
|
||||
<div> </div>
|
||||
<p style={{textAlign: "right"}}>
|
||||
Дата последнего обновления: <b>{new Date(data?.lastUpdate).toLocaleString()}</b>
|
||||
</p>
|
||||
</LoaderPortal>)
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
import { LastDataTable } from './LastDataTable'
|
||||
import { MudDiagramService } from '../../services/api'
|
||||
|
||||
const columnsMud = []
|
||||
|
||||
export default function LastData({idWell}){
|
||||
return <>
|
||||
<h3>Замер бурового раствора</h3>
|
||||
<LastDataTable
|
||||
idWell={idWell}
|
||||
columns={columnsMud}
|
||||
service={MudDiagramService} />
|
||||
<h3>Шлабограмма</h3>
|
||||
<h3>ННБ</h3>
|
||||
</>
|
||||
}
|
||||
27
src/pages/Measure/MeasureTable.jsx
Normal file
27
src/pages/Measure/MeasureTable.jsx
Normal file
@ -0,0 +1,27 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Table } from 'antd'
|
||||
import LoaderPortal from '../../components/LoaderPortal'
|
||||
import { invokeWebApiWrapperAsync } from '../../components/factory'
|
||||
import { MeasureService } from '../../services/api'
|
||||
|
||||
export const MeasureTable = ({idWell, idCategory, title, columns}) => {
|
||||
const [showLoader, setShowLoader] = useState(false)
|
||||
const [lastData, setLastData] = useState([])
|
||||
|
||||
useEffect(()=>invokeWebApiWrapperAsync(async()=>{
|
||||
const data = await MeasureService.getLast(idWell, idCategory)
|
||||
setLastData(data)
|
||||
}
|
||||
, setShowLoader
|
||||
, "не удалось загрузить")
|
||||
, [idWell, idCategory])
|
||||
|
||||
return <LoaderPortal show={showLoader}>
|
||||
<h3>{title}</h3>
|
||||
<span>дата: {lastData?.timestamp}</span>
|
||||
<Table
|
||||
dataSource = {[lastData?.data]}
|
||||
columns = {columns}
|
||||
/>
|
||||
</LoaderPortal>
|
||||
}
|
||||
44
src/pages/Measure/columnsDrillingFluid.js
Normal file
44
src/pages/Measure/columnsDrillingFluid.js
Normal file
@ -0,0 +1,44 @@
|
||||
import { makeColumn } from "../../components/Table";
|
||||
|
||||
export const columnsDrillingFluid = [
|
||||
makeColumn("Наименование", "name"),
|
||||
makeColumn("Температура, °C", "temperature"),
|
||||
makeColumn("Плотность, г/см³", "density"),
|
||||
makeColumn("Усл. вязкость, сек", "conditionalViscosity"),
|
||||
makeColumn("R300", "r300"),
|
||||
makeColumn("R600", "r600"),
|
||||
makeColumn("R3/R6", "r3r6"),
|
||||
makeColumn("ДНС, дПа", "dnsDpa"),
|
||||
makeColumn("Пластич. вязкость, сПз", "plasticViscocity"),
|
||||
makeColumn("СНС, дПа", "snsDpa"),
|
||||
makeColumn("R3/R6 49С", "r3r649С"),
|
||||
makeColumn("ДНС 49С, дПа", "dns49Cdpa"),
|
||||
makeColumn("Пластич. вязкость 49С, сПз", "plasticViscocity49c"),
|
||||
makeColumn("СНС 49С, дПа", "sns49Cdpa"),
|
||||
makeColumn("МВТ, кг/м³", "mbt"),
|
||||
makeColumn("Песок, %", "sand"),
|
||||
makeColumn("Фильтрация, см³/30мин", "filtering"),
|
||||
makeColumn("Корка, мм", "crust"),
|
||||
makeColumn("KTK", "ktk"),
|
||||
makeColumn("pH", "ph"),
|
||||
makeColumn("Жесткость, мг/л", "hardness"),
|
||||
makeColumn("Хлориды, мг/л", "chlorides"),
|
||||
makeColumn("PF", "pf", {
|
||||
render: (text) => (
|
||||
<span style={{ marginLeft: "12px", marginRight: "12px" }}>{text}</span>
|
||||
),
|
||||
}),
|
||||
makeColumn("Mf", "mf", {
|
||||
render: (text) => (
|
||||
<span style={{ marginLeft: "12px", marginRight: "12px" }}>{text}</span>
|
||||
),
|
||||
}),
|
||||
makeColumn("Pm", "pm", {
|
||||
render: (text) => (
|
||||
<span style={{ marginLeft: "12px", marginRight: "12px" }}>{text}</span>
|
||||
),
|
||||
}),
|
||||
makeColumn("Твердая фаза раствора, %", "fluidSolidPhase"),
|
||||
makeColumn("Смазка, %", "grease"),
|
||||
makeColumn("Карбонат кальция, кг/м³", "calciumCarbonate"),
|
||||
];
|
||||
40
src/pages/Measure/columnsMudDiagram.js
Normal file
40
src/pages/Measure/columnsMudDiagram.js
Normal file
@ -0,0 +1,40 @@
|
||||
import {makeColumn} from '../../components/Table'
|
||||
|
||||
export const columnsMudDiagram = [
|
||||
makeColumn('N пробы', 'probeNumber', { className: 'yellow-background'}),
|
||||
makeColumn('Глубина отбора пробы', 'probeExtractionDepth', { className: 'yellow-background'}),
|
||||
{
|
||||
title: 'Литология',
|
||||
key: 'lithology',
|
||||
children: [
|
||||
makeColumn('Песчаник (%)', 'sandstone', { className: 'lightpurple-background'}),
|
||||
makeColumn('Алевролит (%)', 'siltstone', { className: 'lightpurple-background'}),
|
||||
makeColumn('Аргиллит (%)', 'argillit', { className: 'lightpurple-background'}),
|
||||
makeColumn('Аргиллит бит. (%)', 'brokenArgillit', { className: 'lightpurple-background'}),
|
||||
makeColumn('Уголь (%)', 'coal', { className: 'lightpurple-background'}),
|
||||
makeColumn('Песок (%)', 'sand', { className: 'lightpurple-background'}),
|
||||
makeColumn('Глина (%)', 'clay', { className: 'lightpurple-background'}),
|
||||
makeColumn('Известняк (%)', 'camstone', { className: 'lightpurple-background'}),
|
||||
makeColumn('Цемент (%)', 'cement', { className: 'lightpurple-background'})
|
||||
]
|
||||
},
|
||||
makeColumn('Краткое описание', 'summary', { className: 'yellow-background'}),
|
||||
makeColumn('ЛБА бурового раствора', 'drillingMud', { className: 'lightgray-background'}),
|
||||
makeColumn('ЛБА (шлама)', 'sludge', { className: 'lightorange-background'}),
|
||||
{
|
||||
title: 'Газопоказания',
|
||||
key: 'gasIndications',
|
||||
align: 'center',
|
||||
className: 'yellow-background',
|
||||
children: [
|
||||
makeColumn('Сумма УВ мах. (абс%)', 'maxSum', { className: 'lightpurple-background'}),
|
||||
makeColumn('С1 метан (отн%)', 'methane', { className: 'lightpurple-background'}),
|
||||
makeColumn('С2 этан (отн%)', 'ethane', { className: 'lightpurple-background'}),
|
||||
makeColumn('С3 пропан (отн%)', 'propane', { className: 'lightpurple-background'}),
|
||||
makeColumn('С4 бутан (отн%)', 'butane', { className: 'lightpurple-background'}),
|
||||
makeColumn('С5 пентан (отн%)', 'pentane', { className: 'lightpurple-background'})
|
||||
]
|
||||
},
|
||||
makeColumn('Мех. скорость', 'mechanicalSpeed', { className: 'yellow-background'}),
|
||||
makeColumn('Предварительное заключение о насыщении по ГК', 'preliminaryConclusion', { className: 'lightorange-background'}),
|
||||
];
|
||||
21
src/pages/Measure/columnsNnb.js
Normal file
21
src/pages/Measure/columnsNnb.js
Normal file
@ -0,0 +1,21 @@
|
||||
import { makeColumn } from '../../components/Table'
|
||||
|
||||
export const columnsNnb = [
|
||||
makeColumn('Глубина по стволу, м', 'depth'),
|
||||
makeColumn('Зенитный угол, град', 'zenithAngle'),
|
||||
makeColumn('Азимут магнитный, град', 'magneticAzimuth'),
|
||||
makeColumn('Азимут истинный, град', 'trueAzimuth'),
|
||||
makeColumn('Азимут дирекц., град', 'directAzimuth'),
|
||||
makeColumn('Глубина по вертикали, м', 'verticalDepth'),
|
||||
makeColumn('Абсолютная отметка, м', 'absoluteMark'),
|
||||
makeColumn('Лок. смещение к северу, м', 'localNorthOffset'),
|
||||
makeColumn('Лок. смещение к востоку, м', 'localEastOffset'),
|
||||
makeColumn('Отклонение от устья, м', 'outFallOffset'),
|
||||
makeColumn('Азимут смещения, град', 'offsetAzimuth'),
|
||||
makeColumn('Пространст. интенсивность, град/10 м', 'areaIntensity'),
|
||||
makeColumn('Угол установки отклон., град', 'offsetStopAngle'),
|
||||
makeColumn('Интенсив. по зениту, град/10 м', 'zenithIntensity'),
|
||||
makeColumn('Комментарий', 'comment'),
|
||||
makeColumn('Разница вертикальных глубин между ХХХ (план) и ХХХ (факт)', 'depthPlanFactDifference'),
|
||||
makeColumn('Расстояние в пространстве между ХХХ (план) и ХХХ (факт)', 'distancePlanFactDifference'),
|
||||
];
|
||||
24
src/pages/Measure/index.jsx
Normal file
24
src/pages/Measure/index.jsx
Normal file
@ -0,0 +1,24 @@
|
||||
import { columnsMudDiagram} from './columnsMudDiagram'
|
||||
// import { columnsDrillingFluid} from './columnsDrillingFluid'
|
||||
// import { columnsNnb } from './columnsNnb'
|
||||
import { MeasureTable } from './MeasureTable'
|
||||
|
||||
export default function Measure({idWell}){
|
||||
return <>
|
||||
<MeasureTable
|
||||
idWell={idWell}
|
||||
idCategory={1}
|
||||
title='Замер бурового раствора'
|
||||
columns={columnsMudDiagram}/>
|
||||
{/* <MeasureTable
|
||||
idWell={idWell}
|
||||
idCategory={2}
|
||||
title='Шлабограмма'
|
||||
columns={columnsDrillingFluid}/>
|
||||
<MeasureTable
|
||||
idWell={idWell}
|
||||
idCategory={3}
|
||||
title='ННБ'
|
||||
columns={columnsNnb}/> */}
|
||||
</>
|
||||
}
|
||||
@ -12,7 +12,7 @@ import Messages from "./Messages";
|
||||
import Report from "./Report";
|
||||
import Archive from "./Archive";
|
||||
import Documents from "./Documents";
|
||||
import LastData from "./LastData";
|
||||
import Measure from "./Measure";
|
||||
import { makeMenuItems } from "./Documents/menuItems";
|
||||
import WellOperations from "./WellOperations";
|
||||
|
||||
@ -63,8 +63,8 @@ export default function Well() {
|
||||
>
|
||||
{makeMenuItems(rootPath)}
|
||||
</SubMenu>
|
||||
<Menu.Item key="lastData" icon={<FolderOutlined />}>
|
||||
<Link to={`${rootPath}/lastData`}>Последние данные</Link>
|
||||
<Menu.Item key="measure" icon={<FolderOutlined />}>
|
||||
<Link to={`${rootPath}/measure`}>Измерения</Link>
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
|
||||
@ -89,8 +89,8 @@ export default function Well() {
|
||||
<Route path="/well/:idWell/document/:category">
|
||||
<Documents idWell={idWell} />
|
||||
</Route>
|
||||
<Route path="/well/:id/lastData">
|
||||
<LastData />
|
||||
<Route path="/well/:id/measure">
|
||||
<Measure idWell={idWell}/>
|
||||
</Route>
|
||||
<Route path="/">
|
||||
<Redirect to={`${rootPath}/telemetry`} />
|
||||
|
||||
@ -4,7 +4,7 @@ import { invokeWebApiWrapperAsync } from '../../components/factory';
|
||||
import { WellOperationStatService } from '../../services/api';
|
||||
|
||||
|
||||
export const TVD = ({ idWell }) => {
|
||||
export const Tvd = ({ idWell }) => {
|
||||
const [dataPlan, setDataPlan] = useState([]);
|
||||
const [dataFact, setDataFact] = useState([]);
|
||||
const [dataForecast, setDataForecast] = useState([]);
|
||||
|
||||
@ -3,7 +3,7 @@ import {Switch, Link, Route, Redirect, useParams} from "react-router-dom";
|
||||
import { FolderOutlined } from "@ant-design/icons";
|
||||
import { WellOperationsEditor } from './WellOperationsEditor'
|
||||
import { WellSectionsStat } from './WellSectionsStat'
|
||||
import { TVD } from './TVD'
|
||||
import { Tvd } from './Tvd'
|
||||
|
||||
const { Content } = Layout
|
||||
|
||||
@ -34,7 +34,7 @@ export default function WellOperations({idWell}) {
|
||||
<Content className="site-layout-background">
|
||||
<Switch>
|
||||
<Route path={`${rootPath}/tvd`}>
|
||||
<TVD idWell={idWell}/>
|
||||
<Tvd idWell={idWell}/>
|
||||
</Route>
|
||||
<Route path={`${rootPath}/sections`}>
|
||||
<WellSectionsStat idWell={idWell}/>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user