ia.novokshanov/asb_cloud_front
1
0
Fork 0
forked from ddrilling/asb_cloud_front
Code Issues Pull Requests Packages Projects Releases Wiki Activity

CF2-40: Added dynamic changing of 'Last Data' tables cells

Browse Source
This commit is contained in:
KharchenkoVV 2021-07-29 17:17:28 +05:00
parent 9273e82f19
commit 7e19d55926
6 changed files with 992 additions and 486 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

538
src/components/CementFluid.jsx
View File

@ -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 (<>
<Table
columns={columns}
<Form form={form} component={false}>
<Table
components={{
body: {
cell: EditableCell,
},
}}
columns={mergedColumns}
dataSource={data}
size={'small'}
bordered={true}
pagination={false}
/>
<div>&nbsp;</div>
<p style={{textAlign: "right"}}><b>{new Date().toLocaleDateString()}</b></p>
</>
/>
</Form>
</>
)
}

372
src/components/Nnb.jsx
View File

@ -1,122 +1,268 @@
import {Table} from 'antd'
import { useState } from 'react';
import {Table, Input, Form, Popconfirm, Typography } from 'antd'
const columns = [
const originData = [
{
title: 'Глубина по стволу, м',
key: 'depth',
dataIndex: 'depth',
align: 'center',
},
{
title: 'Зенитный угол, град',
key: 'zenithAngle',
dataIndex: 'zenithAngle',
align: 'center'
},
{
title: 'Азимут магнитный, град',
key: 'magneticAzimuth',
dataIndex: 'magneticAzimuth',
align: 'center'
},
{
title: 'Азимут истинный, град',
key: 'trueAzimuth',
dataIndex: 'trueAzimuth',
align: 'center'
},
{
title: 'Азимут дирекц., град',
key: 'directAzimuth',
dataIndex: 'directAzimuth',
align: 'center'
},
{
title: 'Глубина по вертикали, м',
key: 'verticalDepth',
dataIndex: 'verticalDepth',
align: 'center'
},
{
title: 'Абсолютная отметка, м',
key: 'absoluteMark',
dataIndex: 'absoluteMark',
align: 'center'
},
{
title: 'Лок. смещение к северу, м',
key: 'localNorthOffset',
dataIndex: 'localNorthOffset',
align: 'center'
},
{
title: 'Лок. смещение к востоку, м',
key: 'localEastOffset',
dataIndex: 'localEastOffset',
align: 'center'
},
{
title: 'Отклонение от устья, м',
key: 'outFallOffset',
dataIndex: 'outFallOffset',
align: 'center'
},
{
title: 'Азимут смещения, град',
key: 'offsetAzimuth',
dataIndex: 'offsetAzimuth',
align: 'center'
},
{
title: 'Пространст. интенсивность, град/10 м',
key: 'areaIntensity',
dataIndex: 'areaIntensity',
align: 'center'
},
{
title: 'Угол установки отклон., град',
key: 'offsetStopAngle',
dataIndex: 'offsetStopAngle',
align: 'center'
},
{
title: 'Интенсив. по зениту, град/10 м',
key: 'zenithIntensity',
dataIndex: 'zenithIntensity',
align: 'center'
},
{
title: 'Комментарий',
key: 'comment',
dataIndex: 'comment',
align: 'center'
},
{
title: 'Разница вертикальных глубин между ХХХ (план) и ХХХ (факт)',
key: 'depthPlanFactDifference',
dataIndex: 'depthPlanFactDifference',
align: 'center'
},
{
title: 'Расстояние в пространстве между ХХХ (план) и ХХХ (факт)',
key: 'distancePlanFactDifference',
dataIndex: 'distancePlanFactDifference',
align: 'center'
key: '1', depth: '', zenithAngle: '', magneticAzimuth: '', trueAzimuth: '', directAzimuth: '', verticalDepth: '', absoluteMark: '', localNorthOffset: '',
localEastOffset: '', outFallOffset: '', offsetAzimuth: '', areaIntensity: '', offsetStopAngle: '', zenithIntensity: '', comment: '', depthPlanFactDifference: '',
distancePlanFactDifference: ''
}
];
]
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 Nnb() {
const [form] = Form.useForm();
const [data, setData] = useState(originData);
const [editingKey, setEditingKey] = useState('');
const isEditing = (row) => row.key === editingKey;
const columns = [
{
title: 'Глубина по стволу, м',
key: 'depth',
dataIndex: 'depth',
align: 'center',
editable: true
},
{
title: 'Зенитный угол, град',
key: 'zenithAngle',
dataIndex: 'zenithAngle',
align: 'center',
editable: true
},
{
title: 'Азимут магнитный, град',
key: 'magneticAzimuth',
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: 'Действие',
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 (<>
<Table
columns={columns}
dataSource={data}
size={'small'}
bordered={true}
pagination={false}
/>
<div>&nbsp;</div>
<p style={{textAlign: "right"}}><b>{new Date().toLocaleString()}</b></p>
<Form form={form} component={false}>
<Table
components={{
body: {
cell: EditableCell,
},
}}
columns={mergedColumns}
dataSource={data}
size={'small'}
bordered={true}
pagination={false}
/>
</Form>
</>)
}

524
src/components/SludgeDiagram.jsx
View File

@ -1,194 +1,350 @@
import {Table} from 'antd'
import { useState } from 'react';
import {Table, Input, Form, Popconfirm, Typography } from 'antd'
const columns = [
const originData = [
{
title: 'N пробы',
key: 'probeNumber',
dataIndex: 'probeNumber',
align: 'center',
className: 'yellow-background'
},
{
title: 'Глубина отбора пробы',
key: 'probeExtractionDepth',
dataIndex: 'probeExtractionDepth',
align: 'center',
className: 'yellow-background'
},
{
title: 'Литология',
key: 'lithology',
dataIndex: 'lithology',
align: 'center',
className: 'yellow-background',
children: [
{
title: 'Песчаник (%)',
key: 'sandstone',
dataIndex: 'sandstone',
align: 'center',
className: 'lightpurple-background'
},
{
title: 'Алевролит (%)',
key: 'siltstone',
dataIndex: 'siltstone',
align: 'center',
className: 'lightpurple-background'
},
{
title: 'Аргиллит (%)',
key: 'argillit',
dataIndex: 'argillit',
align: 'center',
className: 'lightpurple-background'
},
{
title: 'Аргиллит бит. (%)',
key: 'brokenArgillit',
dataIndex: 'verticalDepth',
align: 'center',
className: 'lightpurple-background'
},
{
title: 'Уголь (%)',
key: 'coal',
dataIndex: 'coal',
align: 'center',
className: 'lightpurple-background'
},
{
title: 'Песок (%)',
key: 'sand',
dataIndex: 'sand',
align: 'center',
className: 'lightpurple-background'
},
{
title: 'Глина (%)',
key: 'clay',
dataIndex: 'clay',
align: 'center',
className: 'lightpurple-background'
},
{
title: 'Известняк (%)',
key: 'camstone',
dataIndex: 'camstone',
align: 'center',
className: 'lightpurple-background'
},
{
title: 'Цемент (%)',
key: 'cement',
dataIndex: 'cement',
align: 'center',
className: 'lightpurple-background'
}
]
},
{
title: 'Краткое описание',
key: 'summary',
dataIndex: 'summary',
align: 'center',
className: 'yellow-background'
},
{
title: 'ЛБА бурового раствора',
key: 'drillingMud',
dataIndex: 'drillingMud',
align: 'center',
className: 'lightgray-background'
},
{
title: 'ЛБА (шлама)',
key: 'sludge',
dataIndex: 'sludge',
align: 'center',
className: 'lightorange-background'
},
{
title: 'Газопоказания',
key: 'gasIndications',
dataIndex: 'gasIndications',
align: 'center',
className: 'yellow-background',
children: [
{
title: 'Сумма УВ мах. (абс%)',
key: 'maxSum',
dataIndex: 'maxSum',
align: 'center',
className: 'lightpurple-background'
},
{
title: 'С1 метан (отн%)',
key: 'methane',
dataIndex: 'depthPlanFactDifference',
align: 'center',
className: 'lightpurple-background'
},
{
title: 'С2 этан (отн%)',
key: 'ethan',
dataIndex: 'ethan',
align: 'center',
className: 'lightpurple-background'
},
{
title: 'С3 пропан (отн%)',
key: 'propane',
dataIndex: 'propane',
align: 'center',
className: 'lightpurple-background'
},
{
title: 'С4 бутан (отн%)',
key: 'butane',
dataIndex: 'butane',
align: 'center',
className: 'lightpurple-background'
},
{
title: 'С5 пентан (отн%)',
key: 'pentane',
dataIndex: 'pentane',
align: 'center',
className: 'lightpurple-background'
}
]
},
{
title: 'Мех. скорость',
key: 'mechanicalSpeed',
dataIndex: 'mechanicalSpeed',
align: 'center',
className: 'yellow-background'
},
{
title: 'Предварительное заключение о насыщении по ГК',
key: 'preliminaryConclusion',
dataIndex: 'preliminaryConclusion',
align: 'center',
className: 'lightorange-background'
key: '1', probeNumber: '', probeExtractionDepth: '', sandstone: '', siltstone: '', argillit: '', brokenArgillit: '', coal: '', sand: '', clay: '',
camstone: '', cement: '', summary: '', drillingMud: '', sludge: '', sludge: '', maxSum: '', methan: '', ethan: '', propan: '', butan: '', pentan: ''
}
];
]
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 SludgeDiagram() {
const [form] = Form.useForm();
const [data, setData] = useState(originData);
const [editingKey, setEditingKey] = useState('');
const isEditing = (row) => row.key === editingKey;
const columns = [
{
title: 'N пробы',
key: 'probeNumber',
dataIndex: 'probeNumber',
align: 'center',
className: 'yellow-background',
editable: true
},
{
title: 'Глубина отбора пробы',
key: 'probeExtractionDepth',
dataIndex: 'probeExtractionDepth',
align: 'center',
className: 'yellow-background',
editable: true
},
{
title: 'Литология',
key: 'lithology',
dataIndex: 'lithology',
align: 'center',
className: 'yellow-background',
editable: true,
children: [
{
title: 'Песчаник (%)',
key: 'sandstone',
dataIndex: 'sandstone',
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
}
]
},
{
title: 'Краткое описание',
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: 'Газопоказания',
key: 'gasIndications',
dataIndex: 'gasIndications',
align: 'center',
className: 'yellow-background',
children: [
{
title: 'Сумма УВ мах. (абс%)',
key: 'maxSum',
dataIndex: 'maxSum',
align: 'center',
className: 'lightpurple-background',
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
}
]
},
{
title: 'Мех. скорость',
key: 'mechanicalSpeed',
dataIndex: 'mechanicalSpeed',
align: 'center',
className: 'yellow-background',
editable: true
},
{
title: 'Предварительное заключение о насыщении по ГК',
key: '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>
<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 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);
}
};
return (<>
<Table
columns={columns}
dataSource={data}
size={'small'}
bordered={true}
pagination={false}
/>
<div>&nbsp;</div>
<p style={{textAlign: "right"}}><b>{new Date().toLocaleString()}</b></p>
<Form form={form} component={false}>
<Table
components={{
body: {
cell: EditableCell,
},
}}
columns={mergedColumns}
dataSource={data}
size={'small'}
bordered={true}
pagination={false}
/>
</Form>
</>
)
}

30
src/pages/LastData.jsx
View File

@ -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>&nbsp;</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>&nbsp;</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>&nbsp;</div>
<p style={{textAlign: "right"}}><b>{new Date().toLocaleString()}</b></p>
</Modal>
<Button type="primary" onClick={() => setDispositionVisible(true)} style={{marginLeft: "5px"}}>
Распоряжение

1
src/pages/Well.jsx
View File

@ -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

13
src/styles/App.less
View File

@ -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;