forked from ddrilling/asb_cloud_front
CF2-40: Added dynamic changing of 'Last Data' tables cells
This commit is contained in:
KharchenkoVV
parent
9273e82f19
commit
7e19d55926
@ -1,178 +1,7 @@
|
||||
import {Table} from 'antd'
|
||||
import { useState } from 'react';
|
||||
import {Table, Input, Form, Popconfirm, Typography } from 'antd'
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: <b>Наименование</b>,
|
||||
key: 'name',
|
||||
dataIndex: 'name',
|
||||
align: 'center',
|
||||
render: (item) => <b>{item}</b>
|
||||
},
|
||||
{
|
||||
title: <b>Температура, °C</b>,
|
||||
key: 'temperature',
|
||||
dataIndex: 'temperature',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: <b>Плотность, г/см³</b>,
|
||||
key: 'density',
|
||||
dataIndex: 'density',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: <b>Усл. вязкость, сек</b>,
|
||||
key: 'conditionalViscosity',
|
||||
dataIndex: 'conditionalViscosity',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: <b>R300</b>,
|
||||
key: 'r300',
|
||||
dataIndex: 'R300',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: <b>R600</b>,
|
||||
key: 'r600',
|
||||
dataIndex: 'R600',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: <b>R3/R6</b>,
|
||||
key: 'r3r6',
|
||||
dataIndex: 'r3/R6',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: <b>ДНС, дПа</b>,
|
||||
key: 'dnsDpa',
|
||||
dataIndex: 'dnsDpa',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: <b>Пластич. вязкость, сПз</b>,
|
||||
key: 'plasticViscocity',
|
||||
dataIndex: 'plasticViscocity',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: <b>СНС, дПа</b>,
|
||||
key: 'snsDpa',
|
||||
dataIndex: 'snsDpa',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: <b>R3/R6 49С</b>,
|
||||
key: 'r3r649С',
|
||||
dataIndex: 'r3/R649С',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: <b>ДНС 49С, дПа</b>,
|
||||
key: 'dns49Cdpa',
|
||||
dataIndex: 'dns49Cdpa',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: <b>Пластич. вязкость 49С, сПз</b>,
|
||||
key: 'plasticViscocity49c',
|
||||
dataIndex: 'plasticViscocity49c',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: <b>СНС 49С, дПа</b>,
|
||||
key: 'sns49Cdpa',
|
||||
dataIndex: 'sns49Cdpa',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: <b>МВТ, кг/м³</b>,
|
||||
key: 'mbt',
|
||||
dataIndex: 'mbt',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: <b>Песок, %</b>,
|
||||
key: 'sand',
|
||||
dataIndex: 'sand',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: <b>Фильтрация, см³/30мин</b>,
|
||||
key: 'filter',
|
||||
dataIndex: 'filter',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: <b>Корка, мм</b>,
|
||||
key: 'crust',
|
||||
dataIndex: 'crust',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: <b>КТК</b>,
|
||||
key: 'ktk',
|
||||
dataIndex: 'ktk',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: <b>pH</b>,
|
||||
key: 'ph',
|
||||
dataIndex: 'ph',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: <b>Жесткость, мг/л</b>,
|
||||
key: 'hardness',
|
||||
dataIndex: 'hardness',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: <b>Хлориды, мг/л</b>,
|
||||
key: 'chlorides',
|
||||
dataIndex: 'chlorides',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: <b>Pf</b>,
|
||||
key: 'pf',
|
||||
dataIndex: 'pf',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: <b>Mf</b>,
|
||||
key: 'mf',
|
||||
dataIndex: 'mf',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: <b>Pm</b>,
|
||||
key: 'pm',
|
||||
dataIndex: 'pm',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: <b>Твердая фаза раствора, %</b>,
|
||||
key: 'fluidSolidPhase',
|
||||
dataIndex: 'fluidSolidPhase',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: <b>Смазка, %</b>,
|
||||
key: 'grease',
|
||||
dataIndex: 'grease',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: <b>Карбонат кальция, кг/м³</b>,
|
||||
key: 'calciumCarbonate',
|
||||
dataIndex: 'calciumCarbonate',
|
||||
align: 'center'
|
||||
}
|
||||
];
|
||||
|
||||
const data = [
|
||||
const originData = [
|
||||
{
|
||||
key: '1', name: 'План', temperature: '', density: '', conditionalViscosity: '', r300: '', r600: '', r3r6: '', dnsDpa: '', plasticViscocity: '',
|
||||
snsDpa: '', r3r649С: '', dns49Cdpa: '', plasticViscocity49c: '', sns49Cdpa: '', mbt: '', sand: '', filter: '', crust: '', ktk: '', ph: '',
|
||||
@ -185,17 +14,366 @@ const data = [
|
||||
}
|
||||
];
|
||||
|
||||
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: '',
|
||||
pattern: '(-?[1-9]+\d*([.,]\d+)?)$|^(-?0[.,]\d*[1-9]+)$|^0$|^0.0$'
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input size="small" />
|
||||
</Form.Item>
|
||||
) : (
|
||||
children
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
export function CementFluid() {
|
||||
const [form] = Form.useForm();
|
||||
const [data, setData] = useState(originData);
|
||||
const [editingKey, setEditingKey] = useState('');
|
||||
|
||||
const isEditing = (row) => row.key === editingKey;
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'Наименование',
|
||||
key: 'name',
|
||||
dataIndex: 'name',
|
||||
align: 'center',
|
||||
className: 'small-font'
|
||||
},
|
||||
{
|
||||
title: 'Температура, °C',
|
||||
key: 'temperature',
|
||||
dataIndex: 'temperature',
|
||||
align: 'center',
|
||||
className: 'small-font',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'Плотность, г/см³',
|
||||
key: 'density',
|
||||
dataIndex: 'density',
|
||||
align: 'center',
|
||||
className: 'small-font',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'Усл. вязкость, сек',
|
||||
key: 'conditionalViscosity',
|
||||
dataIndex: 'conditionalViscosity',
|
||||
align: 'center',
|
||||
className: 'small-font',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'R300',
|
||||
key: 'r300',
|
||||
dataIndex: 'R300',
|
||||
align: 'center',
|
||||
className: 'small-font',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'R600',
|
||||
key: 'r600',
|
||||
dataIndex: 'R600',
|
||||
align: 'center',
|
||||
className: 'small-font',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'R3/R6',
|
||||
key: 'r3r6',
|
||||
dataIndex: 'r3/R6',
|
||||
align: 'center',
|
||||
className: 'small-font',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'ДНС, дПа',
|
||||
key: 'dnsDpa',
|
||||
dataIndex: 'dnsDpa',
|
||||
align: 'center',
|
||||
className: 'small-font',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'Пластич. вязкость, сПз',
|
||||
key: 'plasticViscocity',
|
||||
dataIndex: 'plasticViscocity',
|
||||
align: 'center',
|
||||
className: 'small-font',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'СНС, дПа',
|
||||
key: 'snsDpa',
|
||||
dataIndex: 'snsDpa',
|
||||
align: 'center',
|
||||
className: 'small-font',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'R3/R6 49С',
|
||||
key: 'r3r649С',
|
||||
dataIndex: 'r3/R649С',
|
||||
align: 'center',
|
||||
className: 'small-font',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'ДНС 49С, дПа',
|
||||
key: 'dns49Cdpa',
|
||||
dataIndex: 'dns49Cdpa',
|
||||
align: 'center',
|
||||
className: 'small-font',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'Пластич. вязкость 49С, сПз',
|
||||
key: 'plasticViscocity49c',
|
||||
dataIndex: 'plasticViscocity49c',
|
||||
align: 'center',
|
||||
className: 'small-font',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'СНС 49С, дПа',
|
||||
key: 'sns49Cdpa',
|
||||
dataIndex: 'sns49Cdpa',
|
||||
align: 'center',
|
||||
className: 'small-font',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'МВТ, кг/м³',
|
||||
key: 'mbt',
|
||||
dataIndex: 'mbt',
|
||||
align: 'center',
|
||||
className: 'small-font',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'Песок, %',
|
||||
key: 'sand',
|
||||
dataIndex: 'sand',
|
||||
align: 'center',
|
||||
className: 'small-font',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'Фильтрация, см³/30мин',
|
||||
key: 'filter',
|
||||
dataIndex: 'filter',
|
||||
align: 'center',
|
||||
className: 'small-font',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'Корка, мм',
|
||||
key: 'crust',
|
||||
dataIndex: 'crust',
|
||||
align: 'center',
|
||||
className: 'small-font',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'КТК',
|
||||
key: 'ktk',
|
||||
dataIndex: 'ktk',
|
||||
align: 'center',
|
||||
className: 'small-font',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: <span className={'mh-2'}>pH</span>,
|
||||
key: 'ph',
|
||||
dataIndex: 'ph',
|
||||
align: 'center',
|
||||
className: 'small-font',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'Жесткость, мг/л',
|
||||
key: 'hardness',
|
||||
dataIndex: 'hardness',
|
||||
align: 'center',
|
||||
className: 'small-font',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'Хлориды, мг/л',
|
||||
key: 'chlorides',
|
||||
dataIndex: 'chlorides',
|
||||
align: 'center',
|
||||
className: 'small-font',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: <span className={'mh-2'}>Pf</span>,
|
||||
key: 'pf',
|
||||
dataIndex: 'pf',
|
||||
align: 'center',
|
||||
className: 'small-font',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: <span className={'mh-2'}>Mf</span>,
|
||||
key: 'mf',
|
||||
dataIndex: 'mf',
|
||||
align: 'center',
|
||||
className: 'small-font',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: <span className={'mh-2'}>Pm</span>,
|
||||
key: 'pm',
|
||||
dataIndex: 'pm',
|
||||
align: 'center',
|
||||
className: 'small-font',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'Твердая фаза раствора, %',
|
||||
key: 'fluidSolidPhase',
|
||||
dataIndex: 'fluidSolidPhase',
|
||||
align: 'center',
|
||||
className: 'small-font',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'Смазка, %',
|
||||
key: 'grease',
|
||||
dataIndex: 'grease',
|
||||
align: 'center',
|
||||
className: 'small-font',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'Карбонат кальция, кг/м³',
|
||||
key: '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>
|
||||
<a
|
||||
href="javascript:;"
|
||||
onClick={() => save(row.key)}
|
||||
style={{ marginRight: 8 }}
|
||||
>
|
||||
Сохранить
|
||||
</a>
|
||||
<Popconfirm style={{width: '100px'}} title={<span>Отменить<br />редактирование?</span>} onConfirm={cancel}>
|
||||
<a>Отменить</a>
|
||||
</Popconfirm>
|
||||
</span>
|
||||
) : (
|
||||
<Typography.Link disabled={editingKey !== ''} onClick={() => edit(row)}>
|
||||
Редактировать
|
||||
</Typography.Link>
|
||||
);
|
||||
},
|
||||
}
|
||||
];
|
||||
|
||||
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 (key) => {
|
||||
try {
|
||||
const row = await form.validateFields();
|
||||
const newData = [...data];
|
||||
const index = newData.findIndex((item) => key === item.key);
|
||||
|
||||
if (index > -1) {
|
||||
const item = newData[index];
|
||||
newData.splice(index, 1, { ...item, ...row });
|
||||
setData(newData);
|
||||
setEditingKey('');
|
||||
} else {
|
||||
newData.push(row);
|
||||
setData(newData);
|
||||
setEditingKey('');
|
||||
}
|
||||
} catch (errInfo) {
|
||||
console.log('Validate Failed:', errInfo);
|
||||
}
|
||||
};
|
||||
|
||||
return (<>
|
||||
<Form form={form} component={false}>
|
||||
<Table
|
||||
columns={columns}
|
||||
components={{
|
||||
body: {
|
||||
cell: EditableCell,
|
||||
},
|
||||
}}
|
||||
columns={mergedColumns}
|
||||
dataSource={data}
|
||||
size={'small'}
|
||||
bordered={true}
|
||||
pagination={false}
|
||||
/>
|
||||
<div> </div>
|
||||
<p style={{textAlign: "right"}}><b>{new Date().toLocaleDateString()}</b></p>
|
||||
</Form>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -1,4 +1,55 @@
|
||||
import {Table} from 'antd'
|
||||
import { useState } from 'react';
|
||||
import {Table, Input, Form, Popconfirm, Typography } from 'antd'
|
||||
|
||||
const originData = [
|
||||
{
|
||||
key: '1', depth: '', zenithAngle: '', magneticAzimuth: '', trueAzimuth: '', directAzimuth: '', verticalDepth: '', absoluteMark: '', localNorthOffset: '',
|
||||
localEastOffset: '', outFallOffset: '', offsetAzimuth: '', areaIntensity: '', offsetStopAngle: '', zenithIntensity: '', comment: '', depthPlanFactDifference: '',
|
||||
distancePlanFactDifference: ''
|
||||
}
|
||||
]
|
||||
|
||||
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: '',
|
||||
pattern: '(-?[1-9]+\d*([.,]\d+)?)$|^(-?0[.,]\d*[1-9]+)$|^0$|^0.0$'
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input size="small" />
|
||||
</Form.Item>
|
||||
) : (
|
||||
children
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
);
|
||||
};
|
||||
|
||||
export function Nnb() {
|
||||
const [form] = Form.useForm();
|
||||
const [data, setData] = useState(originData);
|
||||
const [editingKey, setEditingKey] = useState('');
|
||||
|
||||
const isEditing = (row) => row.key === editingKey;
|
||||
|
||||
const columns = [
|
||||
{
|
||||
@ -6,117 +57,212 @@ const columns = [
|
||||
key: 'depth',
|
||||
dataIndex: 'depth',
|
||||
align: 'center',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'Зенитный угол, град',
|
||||
key: 'zenithAngle',
|
||||
dataIndex: 'zenithAngle',
|
||||
align: 'center'
|
||||
align: 'center',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'Азимут магнитный, град',
|
||||
key: 'magneticAzimuth',
|
||||
dataIndex: 'magneticAzimuth',
|
||||
align: 'center'
|
||||
align: 'center',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'Азимут истинный, град',
|
||||
key: 'trueAzimuth',
|
||||
dataIndex: 'trueAzimuth',
|
||||
align: 'center'
|
||||
align: 'center',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'Азимут дирекц., град',
|
||||
key: 'directAzimuth',
|
||||
dataIndex: 'directAzimuth',
|
||||
align: 'center'
|
||||
align: 'center',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'Глубина по вертикали, м',
|
||||
key: 'verticalDepth',
|
||||
dataIndex: 'verticalDepth',
|
||||
align: 'center'
|
||||
align: 'center',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'Абсолютная отметка, м',
|
||||
key: 'absoluteMark',
|
||||
dataIndex: 'absoluteMark',
|
||||
align: 'center'
|
||||
align: 'center',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'Лок. смещение к северу, м',
|
||||
key: 'localNorthOffset',
|
||||
dataIndex: 'localNorthOffset',
|
||||
align: 'center'
|
||||
align: 'center',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'Лок. смещение к востоку, м',
|
||||
key: 'localEastOffset',
|
||||
dataIndex: 'localEastOffset',
|
||||
align: 'center'
|
||||
align: 'center',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'Отклонение от устья, м',
|
||||
key: 'outFallOffset',
|
||||
dataIndex: 'outFallOffset',
|
||||
align: 'center'
|
||||
align: 'center',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'Азимут смещения, град',
|
||||
key: 'offsetAzimuth',
|
||||
dataIndex: 'offsetAzimuth',
|
||||
align: 'center'
|
||||
align: 'center',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'Пространст. интенсивность, град/10 м',
|
||||
key: 'areaIntensity',
|
||||
dataIndex: 'areaIntensity',
|
||||
align: 'center'
|
||||
align: 'center',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'Угол установки отклон., град',
|
||||
key: 'offsetStopAngle',
|
||||
dataIndex: 'offsetStopAngle',
|
||||
align: 'center'
|
||||
align: 'center',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'Интенсив. по зениту, град/10 м',
|
||||
key: 'zenithIntensity',
|
||||
dataIndex: 'zenithIntensity',
|
||||
align: 'center'
|
||||
align: 'center',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'Комментарий',
|
||||
key: 'comment',
|
||||
dataIndex: 'comment',
|
||||
align: 'center'
|
||||
align: 'center',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'Разница вертикальных глубин между ХХХ (план) и ХХХ (факт)',
|
||||
key: 'depthPlanFactDifference',
|
||||
dataIndex: 'depthPlanFactDifference',
|
||||
align: 'center'
|
||||
align: 'center',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'Расстояние в пространстве между ХХХ (план) и ХХХ (факт)',
|
||||
key: 'distancePlanFactDifference',
|
||||
dataIndex: 'distancePlanFactDifference',
|
||||
align: 'center'
|
||||
align: 'center',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'Действие',
|
||||
dataIndex: 'action',
|
||||
align: 'center',
|
||||
width: 150,
|
||||
className: 'small-font',
|
||||
render: (_, row) => {
|
||||
const editable = isEditing(row);
|
||||
return editable ? (
|
||||
<span>
|
||||
<a
|
||||
href="javascript:;"
|
||||
onClick={() => save(row.key)}
|
||||
style={{ marginRight: 8 }}
|
||||
>
|
||||
Сохранить
|
||||
</a>
|
||||
<Popconfirm style={{width: '100px'}} title={<span>Отменить<br />редактирование?</span>} onConfirm={cancel}>
|
||||
<a>Отменить</a>
|
||||
</Popconfirm>
|
||||
</span>
|
||||
) : (
|
||||
<Typography.Link disabled={editingKey !== ''} onClick={() => edit(row)}>
|
||||
Редактировать
|
||||
</Typography.Link>
|
||||
);
|
||||
},
|
||||
}
|
||||
];
|
||||
|
||||
const data = []
|
||||
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 (key) => {
|
||||
try {
|
||||
const row = await form.validateFields();
|
||||
const newData = [...data];
|
||||
const index = newData.findIndex((item) => key === item.key);
|
||||
|
||||
if (index > -1) {
|
||||
const item = newData[index];
|
||||
newData.splice(index, 1, { ...item, ...row });
|
||||
setData(newData);
|
||||
setEditingKey('');
|
||||
} else {
|
||||
newData.push(row);
|
||||
setData(newData);
|
||||
setEditingKey('');
|
||||
}
|
||||
} catch (errInfo) {
|
||||
console.log('Validate Failed:', errInfo);
|
||||
}
|
||||
};
|
||||
|
||||
export function Nnb() {
|
||||
return (<>
|
||||
<Form form={form} component={false}>
|
||||
<Table
|
||||
columns={columns}
|
||||
components={{
|
||||
body: {
|
||||
cell: EditableCell,
|
||||
},
|
||||
}}
|
||||
columns={mergedColumns}
|
||||
dataSource={data}
|
||||
size={'small'}
|
||||
bordered={true}
|
||||
pagination={false}
|
||||
/>
|
||||
<div> </div>
|
||||
<p style={{textAlign: "right"}}><b>{new Date().toLocaleString()}</b></p>
|
||||
</Form>
|
||||
</>)
|
||||
}
|
||||
@ -1,4 +1,54 @@
|
||||
import {Table} from 'antd'
|
||||
import { useState } from 'react';
|
||||
import {Table, Input, Form, Popconfirm, Typography } from 'antd'
|
||||
|
||||
const originData = [
|
||||
{
|
||||
key: '1', probeNumber: '', probeExtractionDepth: '', sandstone: '', siltstone: '', argillit: '', brokenArgillit: '', coal: '', sand: '', clay: '',
|
||||
camstone: '', cement: '', summary: '', drillingMud: '', sludge: '', sludge: '', maxSum: '', methan: '', ethan: '', propan: '', butan: '', pentan: ''
|
||||
}
|
||||
]
|
||||
|
||||
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: '',
|
||||
pattern: '(-?[1-9]+\d*([.,]\d+)?)$|^(-?0[.,]\d*[1-9]+)$|^0$|^0.0$'
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input size="small" />
|
||||
</Form.Item>
|
||||
) : (
|
||||
children
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
);
|
||||
};
|
||||
|
||||
export function SludgeDiagram() {
|
||||
const [form] = Form.useForm();
|
||||
const [data, setData] = useState(originData);
|
||||
const [editingKey, setEditingKey] = useState('');
|
||||
|
||||
const isEditing = (row) => row.key === editingKey;
|
||||
|
||||
const columns = [
|
||||
{
|
||||
@ -6,14 +56,16 @@ const columns = [
|
||||
key: 'probeNumber',
|
||||
dataIndex: 'probeNumber',
|
||||
align: 'center',
|
||||
className: 'yellow-background'
|
||||
className: 'yellow-background',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'Глубина отбора пробы',
|
||||
key: 'probeExtractionDepth',
|
||||
dataIndex: 'probeExtractionDepth',
|
||||
align: 'center',
|
||||
className: 'yellow-background'
|
||||
className: 'yellow-background',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'Литология',
|
||||
@ -21,69 +73,79 @@ const columns = [
|
||||
dataIndex: 'lithology',
|
||||
align: 'center',
|
||||
className: 'yellow-background',
|
||||
editable: true,
|
||||
children: [
|
||||
{
|
||||
title: 'Песчаник (%)',
|
||||
key: 'sandstone',
|
||||
dataIndex: 'sandstone',
|
||||
align: 'center',
|
||||
className: 'lightpurple-background'
|
||||
className: 'lightpurple-background',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'Алевролит (%)',
|
||||
key: 'siltstone',
|
||||
dataIndex: 'siltstone',
|
||||
align: 'center',
|
||||
className: 'lightpurple-background'
|
||||
className: 'lightpurple-background',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'Аргиллит (%)',
|
||||
key: 'argillit',
|
||||
dataIndex: 'argillit',
|
||||
align: 'center',
|
||||
className: 'lightpurple-background'
|
||||
className: 'lightpurple-background',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'Аргиллит бит. (%)',
|
||||
key: 'brokenArgillit',
|
||||
dataIndex: 'verticalDepth',
|
||||
align: 'center',
|
||||
className: 'lightpurple-background'
|
||||
className: 'lightpurple-background',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'Уголь (%)',
|
||||
key: 'coal',
|
||||
dataIndex: 'coal',
|
||||
align: 'center',
|
||||
className: 'lightpurple-background'
|
||||
className: 'lightpurple-background',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'Песок (%)',
|
||||
key: 'sand',
|
||||
dataIndex: 'sand',
|
||||
align: 'center',
|
||||
className: 'lightpurple-background'
|
||||
className: 'lightpurple-background',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'Глина (%)',
|
||||
key: 'clay',
|
||||
dataIndex: 'clay',
|
||||
align: 'center',
|
||||
className: 'lightpurple-background'
|
||||
className: 'lightpurple-background',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'Известняк (%)',
|
||||
key: 'camstone',
|
||||
dataIndex: 'camstone',
|
||||
align: 'center',
|
||||
className: 'lightpurple-background'
|
||||
className: 'lightpurple-background',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'Цемент (%)',
|
||||
key: 'cement',
|
||||
dataIndex: 'cement',
|
||||
align: 'center',
|
||||
className: 'lightpurple-background'
|
||||
className: 'lightpurple-background',
|
||||
editable: true
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -93,21 +155,24 @@ const columns = [
|
||||
key: 'summary',
|
||||
dataIndex: 'summary',
|
||||
align: 'center',
|
||||
className: 'yellow-background'
|
||||
className: 'yellow-background',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'ЛБА бурового раствора',
|
||||
key: 'drillingMud',
|
||||
dataIndex: 'drillingMud',
|
||||
align: 'center',
|
||||
className: 'lightgray-background'
|
||||
className: 'lightgray-background',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'ЛБА (шлама)',
|
||||
key: 'sludge',
|
||||
dataIndex: 'sludge',
|
||||
align: 'center',
|
||||
className: 'lightorange-background'
|
||||
className: 'lightorange-background',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'Газопоказания',
|
||||
@ -121,42 +186,48 @@ const columns = [
|
||||
key: 'maxSum',
|
||||
dataIndex: 'maxSum',
|
||||
align: 'center',
|
||||
className: 'lightpurple-background'
|
||||
className: 'lightpurple-background',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'С1 метан (отн%)',
|
||||
key: 'methane',
|
||||
dataIndex: 'depthPlanFactDifference',
|
||||
align: 'center',
|
||||
className: 'lightpurple-background'
|
||||
className: 'lightpurple-background',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'С2 этан (отн%)',
|
||||
key: 'ethan',
|
||||
dataIndex: 'ethan',
|
||||
align: 'center',
|
||||
className: 'lightpurple-background'
|
||||
className: 'lightpurple-background',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'С3 пропан (отн%)',
|
||||
key: 'propane',
|
||||
dataIndex: 'propane',
|
||||
align: 'center',
|
||||
className: 'lightpurple-background'
|
||||
className: 'lightpurple-background',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'С4 бутан (отн%)',
|
||||
key: 'butane',
|
||||
dataIndex: 'butane',
|
||||
align: 'center',
|
||||
className: 'lightpurple-background'
|
||||
className: 'lightpurple-background',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'С5 пентан (отн%)',
|
||||
key: 'pentane',
|
||||
dataIndex: 'pentane',
|
||||
align: 'center',
|
||||
className: 'lightpurple-background'
|
||||
className: 'lightpurple-background',
|
||||
editable: true
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -165,30 +236,115 @@ const columns = [
|
||||
key: 'mechanicalSpeed',
|
||||
dataIndex: 'mechanicalSpeed',
|
||||
align: 'center',
|
||||
className: 'yellow-background'
|
||||
className: 'yellow-background',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'Предварительное заключение о насыщении по ГК',
|
||||
key: 'preliminaryConclusion',
|
||||
dataIndex: 'preliminaryConclusion',
|
||||
align: 'center',
|
||||
className: 'lightorange-background'
|
||||
className: 'lightorange-background',
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
title: 'Действие',
|
||||
dataIndex: 'action',
|
||||
align: 'center',
|
||||
width: 150,
|
||||
className: 'small-font',
|
||||
render: (_, row) => {
|
||||
const editable = isEditing(row);
|
||||
return editable ? (
|
||||
<span>
|
||||
<a
|
||||
href="javascript:;"
|
||||
onClick={() => save(row.key)}
|
||||
style={{ marginRight: 8 }}
|
||||
>
|
||||
Сохранить
|
||||
</a>
|
||||
<Popconfirm style={{width: '100px'}} title={<span>Отменить<br />редактирование?</span>} onConfirm={cancel}>
|
||||
<a>Отменить</a>
|
||||
</Popconfirm>
|
||||
</span>
|
||||
) : (
|
||||
<Typography.Link disabled={editingKey !== ''} onClick={() => edit(row)}>
|
||||
Редактировать
|
||||
</Typography.Link>
|
||||
);
|
||||
},
|
||||
}
|
||||
];
|
||||
|
||||
const data = []
|
||||
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 (key) => {
|
||||
try {
|
||||
const row = await form.validateFields();
|
||||
const newData = [...data];
|
||||
const index = newData.findIndex((item) => key === item.key);
|
||||
|
||||
if (index > -1) {
|
||||
const item = newData[index];
|
||||
newData.splice(index, 1, { ...item, ...row });
|
||||
setData(newData);
|
||||
setEditingKey('');
|
||||
} else {
|
||||
newData.push(row);
|
||||
setData(newData);
|
||||
setEditingKey('');
|
||||
}
|
||||
} catch (errInfo) {
|
||||
console.log('Validate Failed:', errInfo);
|
||||
}
|
||||
};
|
||||
|
||||
export function SludgeDiagram() {
|
||||
return (<>
|
||||
<Form form={form} component={false}>
|
||||
<Table
|
||||
columns={columns}
|
||||
components={{
|
||||
body: {
|
||||
cell: EditableCell,
|
||||
},
|
||||
}}
|
||||
columns={mergedColumns}
|
||||
dataSource={data}
|
||||
size={'small'}
|
||||
bordered={true}
|
||||
pagination={false}
|
||||
/>
|
||||
<div> </div>
|
||||
<p style={{textAlign: "right"}}><b>{new Date().toLocaleString()}</b></p>
|
||||
</Form>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -22,13 +22,17 @@ export default function LastData() {
|
||||
title='Последние показатели бурового раствора'
|
||||
centered
|
||||
visible={tableVisible}
|
||||
onOk={() => setCementTableVisible(false)}
|
||||
onCancel={() => setCementTableVisible(false)}
|
||||
width={2000}
|
||||
okText='Ок'
|
||||
cancelText='Отмена'
|
||||
footer={[
|
||||
<Button key="back" onClick={() => setCementTableVisible(false)}>
|
||||
Закрыть
|
||||
</Button>
|
||||
]}
|
||||
>
|
||||
<CementFluid/>
|
||||
<div> </div>
|
||||
<p style={{textAlign: "right"}}><b>{new Date().toLocaleString()}</b></p>
|
||||
</Modal>
|
||||
<Button type="primary" onClick={() => setTableSludgeVisible(true)} style={{marginLeft: "5px"}}>
|
||||
Шламограмма
|
||||
@ -37,13 +41,17 @@ export default function LastData() {
|
||||
title='Шламограмма'
|
||||
centered
|
||||
visible={tableSludgeVisible}
|
||||
onOk={() => setTableSludgeVisible(false)}
|
||||
onCancel={() => setTableSludgeVisible(false)}
|
||||
width={2000}
|
||||
okText='Ок'
|
||||
cancelText='Отмена'
|
||||
footer={[
|
||||
<Button key="back" onClick={() => setTableSludgeVisible(false)}>
|
||||
Закрыть
|
||||
</Button>
|
||||
]}
|
||||
>
|
||||
<SludgeDiagram/>
|
||||
<div> </div>
|
||||
<p style={{textAlign: "right"}}><b>{new Date().toLocaleString()}</b></p>
|
||||
</Modal>
|
||||
<Button type="primary" onClick={() => setTableNNBVisible(true)} style={{marginLeft: "5px"}}>
|
||||
ННБ
|
||||
@ -52,13 +60,17 @@ export default function LastData() {
|
||||
title='ННБ'
|
||||
centered
|
||||
visible={tableNNBVisible}
|
||||
onOk={() => setTableNNBVisible(false)}
|
||||
onCancel={() => setTableNNBVisible(false)}
|
||||
width={2000}
|
||||
okText='Ок'
|
||||
cancelText='Отмена'
|
||||
footer={[
|
||||
<Button key="back" onClick={() => setTableNNBVisible(false)}>
|
||||
Закрыть
|
||||
</Button>
|
||||
]}
|
||||
>
|
||||
<Nnb/>
|
||||
<div> </div>
|
||||
<p style={{textAlign: "right"}}><b>{new Date().toLocaleString()}</b></p>
|
||||
</Modal>
|
||||
<Button type="primary" onClick={() => setDispositionVisible(true)} style={{marginLeft: "5px"}}>
|
||||
Распоряжение
|
||||
|
||||
@ -7,6 +7,7 @@ import Report from "../pages/Report";
|
||||
import Analysis from "../pages/Analysis";
|
||||
import WellAnalysis from "../pages/WellAnalysis";
|
||||
import TelemetryView from "../pages/TelemetryView";
|
||||
import MenuDocuments from "../components/MenuDocuments";
|
||||
import WellStat from "./WellStat";
|
||||
|
||||
const { Content } = Layout
|
||||
|
||||
@ -65,6 +65,10 @@ html {
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.small-font {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.yellow-background {
|
||||
background-color: #FFFF99 !important;
|
||||
}
|
||||
@ -81,6 +85,15 @@ html {
|
||||
background-color: #FFCC99 !important;
|
||||
}
|
||||
|
||||
.ph-2 {
|
||||
padding: 2px 10px;
|
||||
}
|
||||
|
||||
.mh-2 {
|
||||
margin-left: 2px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.sheet{
|
||||
padding: 5px 24px;
|
||||
min-height: 280px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user