forked from ddrilling/asb_cloud_front
CF2-40: Changed table columns' config to factory
This commit is contained in:
KharchenkoVV
parent
c58ccb6d33
commit
56583ccefb
@ -1,379 +0,0 @@
|
|||||||
import { useState } from 'react';
|
|
||||||
import {Table, Input, Form, Popconfirm, Typography } from 'antd'
|
|
||||||
|
|
||||||
const originData = [
|
|
||||||
{
|
|
||||||
key: '1', name: 'План', temperature: '', density: '', conditionalViscosity: '', r300: '', r600: '', r3r6: '', dnsDpa: '', plasticViscocity: '',
|
|
||||||
snsDpa: '', r3r649С: '', dns49Cdpa: '', plasticViscocity49c: '', sns49Cdpa: '', mbt: '', sand: '', filter: '', crust: '', ktk: '', ph: '',
|
|
||||||
hardness: '', chlorides: '', pf: '', mf: '', pm: '', fluidSolidPhase: '', grease: '', calciumCarbonate: ''
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '2', name: 'Факт', temperature: '', density: '', conditionalViscosity: '', r300: '', r600: '', r3r6: '', dnsDpa: '', plasticViscocity: '',
|
|
||||||
snsDpa: '', r3r649С: '', dns49Cdpa: '', plasticViscocity49c: '', sns49Cdpa: '', mbt: '', sand: '', filter: '', crust: '', ktk: '', ph: '',
|
|
||||||
hardness: '', chlorides: '', pf: '', mf: '', pm: '', fluidSolidPhase: '', grease: '', calciumCarbonate: ''
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
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
|
|
||||||
components={{
|
|
||||||
body: {
|
|
||||||
cell: EditableCell,
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
columns={mergedColumns}
|
|
||||||
dataSource={data}
|
|
||||||
size={'small'}
|
|
||||||
bordered={true}
|
|
||||||
pagination={false}
|
|
||||||
/>
|
|
||||||
</Form>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
187
src/components/DrillingFluid.jsx
Normal file
187
src/components/DrillingFluid.jsx
Normal file
@ -0,0 +1,187 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import {Table, Input, Form, Popconfirm, Typography } from 'antd'
|
||||||
|
import { makeColumn } from './factory'
|
||||||
|
|
||||||
|
const originData = [
|
||||||
|
{
|
||||||
|
key: '1', name: 'План', temperature: '', density: '', conditionalViscosity: '', r300: '', r600: '', r3r6: '', dnsDpa: '', plasticViscocity: '',
|
||||||
|
snsDpa: '', r3r649С: '', dns49Cdpa: '', plasticViscocity49c: '', sns49Cdpa: '', mbt: '', sand: '', filter: '', crust: '', ktk: '', ph: '',
|
||||||
|
hardness: '', chlorides: '', pf: '', mf: '', pm: '', fluidSolidPhase: '', grease: '', calciumCarbonate: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '2', name: 'Факт', temperature: '', density: '', conditionalViscosity: '', r300: '', r600: '', r3r6: '', dnsDpa: '', plasticViscocity: '',
|
||||||
|
snsDpa: '', r3r649С: '', dns49Cdpa: '', plasticViscocity49c: '', sns49Cdpa: '', mbt: '', sand: '', filter: '', crust: '', ktk: '', ph: '',
|
||||||
|
hardness: '', chlorides: '', pf: '', mf: '', pm: '', fluidSolidPhase: '', grease: '', calciumCarbonate: ''
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
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: '(-?[0-9]+\d*([.,]\d+)?)$|^(-?0[.,]\d*[0-9]+)$|^0$|^0.0$'
|
||||||
|
//pattern: '^-?\d+(\.\d{1,2})?$'
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<Input size="small" />
|
||||||
|
</Form.Item>
|
||||||
|
) : (
|
||||||
|
children
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
export function DrillingFluid() {
|
||||||
|
const [form] = Form.useForm();
|
||||||
|
const [data, setData] = useState(originData);
|
||||||
|
const [editingKey, setEditingKey] = useState('');
|
||||||
|
|
||||||
|
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', editable: true}),
|
||||||
|
makeColumn('Mf', 'mf', { dataIndex: 'mf', align: 'center', className: 'small-font', editable: true}),
|
||||||
|
makeColumn('Pm', 'pm', { dataIndex: 'pm', align: 'center', className: 'small-font', 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>
|
||||||
|
<a
|
||||||
|
href="javascript:;"
|
||||||
|
onClick={() => save(row)}
|
||||||
|
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 (row) => {
|
||||||
|
console.log(row)
|
||||||
|
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
|
||||||
|
components={{
|
||||||
|
body: {
|
||||||
|
cell: EditableCell,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
columns={mergedColumns}
|
||||||
|
dataSource={data}
|
||||||
|
size={'small'}
|
||||||
|
bordered={true}
|
||||||
|
pagination={false}
|
||||||
|
/>
|
||||||
|
</Form>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -1,5 +1,6 @@
|
|||||||
import { useState } from 'react';
|
import { useState } from 'react'
|
||||||
import {Table, Input, Form, Popconfirm, Typography } from 'antd'
|
import {Table, Input, Form, Popconfirm, Typography } from 'antd'
|
||||||
|
import { makeColumn } from './factory'
|
||||||
|
|
||||||
const originData = [
|
const originData = [
|
||||||
{
|
{
|
||||||
@ -52,125 +53,23 @@ export function Nnb() {
|
|||||||
const isEditing = (row) => row.key === editingKey;
|
const isEditing = (row) => row.key === editingKey;
|
||||||
|
|
||||||
const columns = [
|
const columns = [
|
||||||
{
|
makeColumn('Глубина по стволу, м', 'depth', { dataIndex: 'depth', align: 'center', editable: true}),
|
||||||
title: 'Глубина по стволу, м',
|
makeColumn('Зенитный угол, град', 'zenithAngle', { dataIndex: 'zenithAngle', align: 'center', editable: true}),
|
||||||
key: 'depth',
|
makeColumn('Азимут магнитный, град', 'trueAzimuth', { dataIndex: 'trueAzimuth', align: 'center', editable: true}),
|
||||||
dataIndex: 'depth',
|
makeColumn('Азимут истинный, град', 'conditionalViscosity', { dataIndex: 'conditionalViscosity', align: 'center', editable: true}),
|
||||||
align: 'center',
|
makeColumn('Азимут дирекц., град', 'directAzimuth', { dataIndex: 'directAzimuth', align: 'center', editable: true}),
|
||||||
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}),
|
||||||
title: 'Зенитный угол, град',
|
makeColumn('Лок. смещение к востоку, м', 'localEastOffset', { dataIndex: 'localEastOffset', align: 'center', editable: true}),
|
||||||
key: 'zenithAngle',
|
makeColumn('Отклонение от устья, м', 'outFallOffset', { dataIndex: 'outFallOffset', align: 'center', editable: true}),
|
||||||
dataIndex: 'zenithAngle',
|
makeColumn('Азимут смещения, град', 'offsetAzimuth', { dataIndex: 'offsetAzimuth', align: 'center', editable: true}),
|
||||||
align: 'center',
|
makeColumn('Пространст. интенсивность, град/10 м', 'areaIntensity', { dataIndex: 'areaIntensity', align: 'center', editable: true}),
|
||||||
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}),
|
||||||
title: 'Азимут магнитный, град',
|
makeColumn('Разница вертикальных глубин между ХХХ (план) и ХХХ (факт)', 'depthPlanFactDifference', { dataIndex: 'depthPlanFactDifference', align: 'center', editable: true}),
|
||||||
key: 'magneticAzimuth',
|
makeColumn('Расстояние в пространстве между ХХХ (план) и ХХХ (факт)', 'distancePlanFactDifference', { dataIndex: 'distancePlanFactDifference', align: 'center', editable: true}),
|
||||||
dataIndex: 'magneticAzimuth',
|
|
||||||
align: 'center',
|
|
||||||
editable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Азимут истинный, град',
|
|
||||||
key: 'trueAzimuth',
|
|
||||||
dataIndex: 'trueAzimuth',
|
|
||||||
align: 'center',
|
|
||||||
editable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Азимут дирекц., град',
|
|
||||||
key: 'directAzimuth',
|
|
||||||
dataIndex: 'directAzimuth',
|
|
||||||
align: 'center',
|
|
||||||
editable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Глубина по вертикали, м',
|
|
||||||
key: 'verticalDepth',
|
|
||||||
dataIndex: 'verticalDepth',
|
|
||||||
align: 'center',
|
|
||||||
editable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Абсолютная отметка, м',
|
|
||||||
key: 'absoluteMark',
|
|
||||||
dataIndex: 'absoluteMark',
|
|
||||||
align: 'center',
|
|
||||||
editable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Лок. смещение к северу, м',
|
|
||||||
key: 'localNorthOffset',
|
|
||||||
dataIndex: 'localNorthOffset',
|
|
||||||
align: 'center',
|
|
||||||
editable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Лок. смещение к востоку, м',
|
|
||||||
key: 'localEastOffset',
|
|
||||||
dataIndex: 'localEastOffset',
|
|
||||||
align: 'center',
|
|
||||||
editable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Отклонение от устья, м',
|
|
||||||
key: 'outFallOffset',
|
|
||||||
dataIndex: 'outFallOffset',
|
|
||||||
align: 'center',
|
|
||||||
editable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Азимут смещения, град',
|
|
||||||
key: 'offsetAzimuth',
|
|
||||||
dataIndex: 'offsetAzimuth',
|
|
||||||
align: 'center',
|
|
||||||
editable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Пространст. интенсивность, град/10 м',
|
|
||||||
key: 'areaIntensity',
|
|
||||||
dataIndex: 'areaIntensity',
|
|
||||||
align: 'center',
|
|
||||||
editable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Угол установки отклон., град',
|
|
||||||
key: 'offsetStopAngle',
|
|
||||||
dataIndex: 'offsetStopAngle',
|
|
||||||
align: 'center',
|
|
||||||
editable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Интенсив. по зениту, град/10 м',
|
|
||||||
key: 'zenithIntensity',
|
|
||||||
dataIndex: 'zenithIntensity',
|
|
||||||
align: 'center',
|
|
||||||
editable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Комментарий',
|
|
||||||
key: 'comment',
|
|
||||||
dataIndex: 'comment',
|
|
||||||
align: 'center',
|
|
||||||
editable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Разница вертикальных глубин между ХХХ (план) и ХХХ (факт)',
|
|
||||||
key: 'depthPlanFactDifference',
|
|
||||||
dataIndex: 'depthPlanFactDifference',
|
|
||||||
align: 'center',
|
|
||||||
editable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Расстояние в пространстве между ХХХ (план) и ХХХ (факт)',
|
|
||||||
key: 'distancePlanFactDifference',
|
|
||||||
dataIndex: 'distancePlanFactDifference',
|
|
||||||
align: 'center',
|
|
||||||
editable: true
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
title: 'Действие',
|
title: 'Действие',
|
||||||
dataIndex: 'action',
|
dataIndex: 'action',
|
||||||
|
|||||||
@ -1,5 +1,6 @@
|
|||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import {Table, Input, Form, Popconfirm, Typography } from 'antd'
|
import {Table, Input, Form, Popconfirm, Typography } from 'antd'
|
||||||
|
import { makeColumn } from './factory'
|
||||||
|
|
||||||
const originData = [
|
const originData = [
|
||||||
{
|
{
|
||||||
@ -51,22 +52,8 @@ export function SludgeDiagram() {
|
|||||||
const isEditing = (row) => row.key === editingKey;
|
const isEditing = (row) => row.key === editingKey;
|
||||||
|
|
||||||
const columns = [
|
const columns = [
|
||||||
{
|
makeColumn('N пробы', 'probeNumber', { dataIndex: 'probeNumber', align: 'center', className: 'yellow-background', editable: true}),
|
||||||
title: 'N пробы',
|
makeColumn('Глубина отбора пробы', 'probeExtractionDepth', { dataIndex: 'probeExtractionDepth', align: 'center', className: 'yellow-background', editable: true}),
|
||||||
key: 'probeNumber',
|
|
||||||
dataIndex: 'probeNumber',
|
|
||||||
align: 'center',
|
|
||||||
className: 'yellow-background',
|
|
||||||
editable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Глубина отбора пробы',
|
|
||||||
key: 'probeExtractionDepth',
|
|
||||||
dataIndex: 'probeExtractionDepth',
|
|
||||||
align: 'center',
|
|
||||||
className: 'yellow-background',
|
|
||||||
editable: true
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
title: 'Литология',
|
title: 'Литология',
|
||||||
key: 'lithology',
|
key: 'lithology',
|
||||||
@ -75,105 +62,20 @@ export function SludgeDiagram() {
|
|||||||
className: 'yellow-background',
|
className: 'yellow-background',
|
||||||
editable: true,
|
editable: true,
|
||||||
children: [
|
children: [
|
||||||
{
|
makeColumn('Песчаник (%)', 'sandstone', { dataIndex: 'sandstone', align: 'center', className: 'lightpurple-background', editable: true}),
|
||||||
title: 'Песчаник (%)',
|
makeColumn('Алевролит (%)', 'siltstone', { dataIndex: 'siltstone', align: 'center', className: 'lightpurple-background', editable: true}),
|
||||||
key: 'sandstone',
|
makeColumn('Аргиллит (%)', 'argillit', { dataIndex: 'argillit', align: 'center', className: 'lightpurple-background', editable: true}),
|
||||||
dataIndex: 'sandstone',
|
makeColumn('Аргиллит бит. (%)', 'brokenArgillit', { dataIndex: 'brokenArgillit', align: 'center', className: 'lightpurple-background', editable: true}),
|
||||||
align: 'center',
|
makeColumn('Уголь (%)', 'coal', { dataIndex: 'coal', align: 'center', className: 'lightpurple-background', editable: true}),
|
||||||
className: 'lightpurple-background',
|
makeColumn('Песок (%)', 'sand', { dataIndex: 'sand', align: 'center', className: 'lightpurple-background', editable: true}),
|
||||||
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})
|
||||||
title: 'Алевролит (%)',
|
|
||||||
key: 'siltstone',
|
|
||||||
dataIndex: 'siltstone',
|
|
||||||
align: 'center',
|
|
||||||
className: 'lightpurple-background',
|
|
||||||
editable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Аргиллит (%)',
|
|
||||||
key: 'argillit',
|
|
||||||
dataIndex: 'argillit',
|
|
||||||
align: 'center',
|
|
||||||
className: 'lightpurple-background',
|
|
||||||
editable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Аргиллит бит. (%)',
|
|
||||||
key: 'brokenArgillit',
|
|
||||||
dataIndex: 'verticalDepth',
|
|
||||||
align: 'center',
|
|
||||||
className: 'lightpurple-background',
|
|
||||||
editable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Уголь (%)',
|
|
||||||
key: 'coal',
|
|
||||||
dataIndex: 'coal',
|
|
||||||
align: 'center',
|
|
||||||
className: 'lightpurple-background',
|
|
||||||
editable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Песок (%)',
|
|
||||||
key: 'sand',
|
|
||||||
dataIndex: 'sand',
|
|
||||||
align: 'center',
|
|
||||||
className: 'lightpurple-background',
|
|
||||||
editable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Глина (%)',
|
|
||||||
key: 'clay',
|
|
||||||
dataIndex: 'clay',
|
|
||||||
align: 'center',
|
|
||||||
className: 'lightpurple-background',
|
|
||||||
editable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Известняк (%)',
|
|
||||||
key: 'camstone',
|
|
||||||
dataIndex: 'camstone',
|
|
||||||
align: 'center',
|
|
||||||
className: 'lightpurple-background',
|
|
||||||
editable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Цемент (%)',
|
|
||||||
key: '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}),
|
||||||
title: 'Краткое описание',
|
makeColumn('ЛБА (шлама)', 'sludge', { dataIndex: 'sludge', align: 'center', className: 'lightorange-background', editable: true}),
|
||||||
key: 'summary',
|
|
||||||
dataIndex: 'summary',
|
|
||||||
align: 'center',
|
|
||||||
className: 'yellow-background',
|
|
||||||
editable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'ЛБА бурового раствора',
|
|
||||||
key: 'drillingMud',
|
|
||||||
dataIndex: 'drillingMud',
|
|
||||||
align: 'center',
|
|
||||||
className: 'lightgray-background',
|
|
||||||
editable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'ЛБА (шлама)',
|
|
||||||
key: 'sludge',
|
|
||||||
dataIndex: 'sludge',
|
|
||||||
align: 'center',
|
|
||||||
className: 'lightorange-background',
|
|
||||||
editable: true
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
title: 'Газопоказания',
|
title: 'Газопоказания',
|
||||||
key: 'gasIndications',
|
key: 'gasIndications',
|
||||||
@ -181,72 +83,16 @@ export function SludgeDiagram() {
|
|||||||
align: 'center',
|
align: 'center',
|
||||||
className: 'yellow-background',
|
className: 'yellow-background',
|
||||||
children: [
|
children: [
|
||||||
{
|
makeColumn('Сумма УВ мах. (абс%)', 'maxSum', { dataIndex: 'maxSum', align: 'center', className: 'lightpurple-background', editable: true}),
|
||||||
title: 'Сумма УВ мах. (абс%)',
|
makeColumn('С1 метан (отн%)', 'methane', { dataIndex: 'methane', align: 'center', className: 'lightpurple-background', editable: true}),
|
||||||
key: 'maxSum',
|
makeColumn('С2 этан (отн%)', 'ethan', { dataIndex: 'ethan', align: 'center', className: 'lightpurple-background', editable: true}),
|
||||||
dataIndex: 'maxSum',
|
makeColumn('С3 пропан (отн%)', 'propane', { dataIndex: 'propane', align: 'center', className: 'lightpurple-background', editable: true}),
|
||||||
align: 'center',
|
makeColumn('С4 бутан (отн%)', 'butane', { dataIndex: 'butane', align: 'center', className: 'lightpurple-background', editable: true}),
|
||||||
className: 'lightpurple-background',
|
makeColumn('С5 пентан (отн%)', 'pentane', { dataIndex: 'pentane', align: 'center', className: 'lightpurple-background', editable: true})
|
||||||
editable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'С1 метан (отн%)',
|
|
||||||
key: 'methane',
|
|
||||||
dataIndex: 'depthPlanFactDifference',
|
|
||||||
align: 'center',
|
|
||||||
className: 'lightpurple-background',
|
|
||||||
editable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'С2 этан (отн%)',
|
|
||||||
key: 'ethan',
|
|
||||||
dataIndex: 'ethan',
|
|
||||||
align: 'center',
|
|
||||||
className: 'lightpurple-background',
|
|
||||||
editable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'С3 пропан (отн%)',
|
|
||||||
key: 'propane',
|
|
||||||
dataIndex: 'propane',
|
|
||||||
align: 'center',
|
|
||||||
className: 'lightpurple-background',
|
|
||||||
editable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'С4 бутан (отн%)',
|
|
||||||
key: 'butane',
|
|
||||||
dataIndex: 'butane',
|
|
||||||
align: 'center',
|
|
||||||
className: 'lightpurple-background',
|
|
||||||
editable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'С5 пентан (отн%)',
|
|
||||||
key: 'pentane',
|
|
||||||
dataIndex: 'pentane',
|
|
||||||
align: 'center',
|
|
||||||
className: 'lightpurple-background',
|
|
||||||
editable: true
|
|
||||||
}
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
makeColumn('Мех. скорость', 'mechanicalSpeed', { dataIndex: 'mechanicalSpeed', align: 'center', className: 'yellow-background', editable: true}),
|
||||||
title: 'Мех. скорость',
|
makeColumn('Предварительное заключение о насыщении по ГК', 'preliminaryConclusion', { dataIndex: 'preliminaryConclusion', align: 'center', className: 'lightorange-background', editable: true}),
|
||||||
key: 'mechanicalSpeed',
|
|
||||||
dataIndex: 'mechanicalSpeed',
|
|
||||||
align: 'center',
|
|
||||||
className: 'yellow-background',
|
|
||||||
editable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Предварительное заключение о насыщении по ГК',
|
|
||||||
key: 'preliminaryConclusion',
|
|
||||||
dataIndex: 'preliminaryConclusion',
|
|
||||||
align: 'center',
|
|
||||||
className: 'lightorange-background',
|
|
||||||
editable: true
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
title: 'Действие',
|
title: 'Действие',
|
||||||
dataIndex: 'action',
|
dataIndex: 'action',
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
import {Button, Modal, Checkbox } from "antd";
|
import {Button, Modal, Checkbox } from "antd";
|
||||||
import {CementFluid} from "../components/CementFluid";
|
import {DrillingFluid} from "../components/DrillingFluid";
|
||||||
import {useState} from "react";
|
import {useState} from "react";
|
||||||
import {SludgeDiagram} from "../components/SludgeDiagram";
|
import {SludgeDiagram} from "../components/SludgeDiagram";
|
||||||
import {Nnb} from "../components/Nnb"
|
import {Nnb} from "../components/Nnb"
|
||||||
@ -30,7 +30,7 @@ export default function LastData() {
|
|||||||
</Button>
|
</Button>
|
||||||
]}
|
]}
|
||||||
>
|
>
|
||||||
<CementFluid/>
|
<DrillingFluid/>
|
||||||
<div> </div>
|
<div> </div>
|
||||||
<p style={{textAlign: "right"}}><b>{new Date().toLocaleString()}</b></p>
|
<p style={{textAlign: "right"}}><b>{new Date().toLocaleString()}</b></p>
|
||||||
</Modal>
|
</Modal>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user