diff --git a/package.json b/package.json index 08ccc73..3fefe17 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ "react_test": "react-scripts test", "eject": "react-scripts eject" }, - "proxy": "http://127.0.0.1:5000", + "proxy": "http://localhost:5000", "eslintConfig": { "extends": [ "react-app", diff --git a/src/components/DrillingFluid.jsx b/src/components/modalWindows/DrillingFluid.jsx similarity index 57% rename from src/components/DrillingFluid.jsx rename to src/components/modalWindows/DrillingFluid.jsx index 22e22e7..4a4b94b 100644 --- a/src/components/DrillingFluid.jsx +++ b/src/components/modalWindows/DrillingFluid.jsx @@ -1,19 +1,10 @@ -import { useState } from 'react'; -import {Table, Input, Form, Popconfirm, Typography } from 'antd' -import { makeColumn } from './factory' +import { useState, useEffect } from 'react'; +import { useParams } from "react-router-dom"; +import { Table, InputNumber, Form, Popconfirm, Typography } from 'antd' +import { makeColumn } from '../factory' +import { FluidService } from '../../services/api/services/FluidService'; +import notify from "../notify" -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, @@ -34,14 +25,13 @@ const EditableCell = ({ style={{ margin: 0 }} rules={[ { + type: 'number', required: true, - message: '', - pattern: '(-?[0-9]+\d*([.,]\d+)?)$|^(-?0[.,]\d*[0-9]+)$|^0$|^0.0$' - //pattern: '^-?\d+(\.\d{1,2})?$' + message: null }, ]} > - + ) : ( children @@ -53,11 +43,18 @@ const EditableCell = ({ export function DrillingFluid() { - const [form] = Form.useForm(); - const [data, setData] = useState(originData); - const [editingKey, setEditingKey] = useState(''); + let {id} = useParams() - const isEditing = (row) => row.key === editingKey; + const [form] = Form.useForm(); + const [editingKey, setEditingKey] = useState(''); + const [idCategory, setIdCategory] = useState(8); + const [dataPlan, setDataPlan] = useState({}) + const [dataFact, setDataFact] = useState({}) + const [isUpdatingData, setIsUpdatingData] = useState(false) + + const [loader, setLoader] = useState(false) + + const isEditing = (row) => row?.key === editingKey; const columns = [ makeColumn('Наименование', 'name', { dataIndex: 'name', align: 'center', className: 'small-font'}), @@ -82,9 +79,12 @@ export function DrillingFluid() { 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('PF', 'pf', { dataIndex: 'pf', align: 'center', className: 'small-font', + render: text => {text}, editable: true}), + makeColumn('Mf', 'mf', { dataIndex: 'mf', align: 'center', className: 'small-font', + render: text => {text}, editable: true}), + makeColumn('Pm', 'pm', { dataIndex: 'pm', align: 'center', className: 'small-font', + render: text => {text}, 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}), @@ -99,8 +99,7 @@ export function DrillingFluid() { return editable ? ( save(row)} + onClick={() => form.submit()} style={{ marginRight: 8 }} > Сохранить @@ -118,6 +117,38 @@ export function DrillingFluid() { } ]; + useEffect(() => { + const update = async () => { + setLoader(true) + + try { + let response = await FluidService.get(id, 8) + response.key = 8 + response.name = 'План' + setDataPlan(response) + } + catch (ex) { + notify(`Не удалось загрузить плановые данные бурового раствора по скважине "${id}"`, 'error') + console.log(ex) + } + + try { + let response = await FluidService.get(id, 9) + response.key = 9 + response.name = 'Факт' + setDataFact(response) + } + catch (ex) { + notify(`Не удалось загрузить фактические данные бурового раствора по скважине "${id}"`, 'error') + console.log(ex) + } + + setIsUpdatingData(false) + setLoader(false) + } + update() + }, [isUpdatingData]) + const mergedColumns = columns.map((col) => { if (!col.editable) { return col; @@ -135,6 +166,7 @@ export function DrillingFluid() { }); const edit = (row) => { + setIdCategory(row.key) form.setFieldsValue({ ...row, }); @@ -145,30 +177,55 @@ export function DrillingFluid() { setEditingKey(''); }; - const save = async (row) => { - console.log(row) + const save = async (formData) => { + + const params = { + key: form.getFieldValue('key'), + name: idCategory === 8 ? 'План' : 'Факт', + temperature: form.getFieldValue('temperature'), + density: form.getFieldValue('density'), + conditionalViscosity: form.getFieldValue('conditionalViscosity'), + r300: form.getFieldValue('r300'), + r600: form.getFieldValue('r600'), + r3r6: form.getFieldValue('r3r6'), + dnsDpa: form.getFieldValue('dnsDpa'), + plasticViscocity: form.getFieldValue('plasticViscocity'), + snsDpa: form.getFieldValue('snsDpa'), + r3r649С: form.getFieldValue('r3r649С'), + dns49Cdpa: form.getFieldValue('dns49Cdpa'), + plasticViscocity49c: form.getFieldValue('plasticViscocity49c'), + sns49Cdpa: form.getFieldValue('sns49Cdpa'), + mbt: form.getFieldValue('mbt'), + sand: form.getFieldValue('sand'), + filtering: form.getFieldValue('filtering'), + crust: form.getFieldValue('crust'), + ktk: form.getFieldValue('ktk'), + ph: form.getFieldValue('ph'), + hardness: form.getFieldValue('hardness'), + chlorides: form.getFieldValue('chlorides'), + pf: form.getFieldValue('pf'), + mf: form.getFieldValue('mf'), + pm: form.getFieldValue('pm'), + fluidSolidPhase: form.getFieldValue('fluidSolidPhase'), + grease: form.getFieldValue('grease'), + calciumCarbonate: form.getFieldValue('calciumCarbonate') + } + try { - // 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(''); - // } + setLoader(true) + await FluidService.put(`${id}`, idCategory, params) + + setIsUpdatingData(true) + setLoader(false) + + setEditingKey('') } catch (errInfo) { - //console.log('Validate Failed:', errInfo); + console.log('Validate Failed:', errInfo); } }; return (<> -
+ +
 
+

+ Дата последнего обновления: +  План: {new Date(dataPlan?.lastUpdate).toLocaleString()}   +  Факт: {new Date(dataFact?.lastUpdate).toLocaleString()}  +

) } \ No newline at end of file diff --git a/src/components/SludgeDiagram.jsx b/src/components/modalWindows/MudDiagram.jsx similarity index 67% rename from src/components/SludgeDiagram.jsx rename to src/components/modalWindows/MudDiagram.jsx index b46ee56..3776d79 100644 --- a/src/components/SludgeDiagram.jsx +++ b/src/components/modalWindows/MudDiagram.jsx @@ -1,13 +1,10 @@ -import { useState } from 'react'; -import {Table, Input, Form, Popconfirm, Typography } from 'antd' -import { makeColumn } from './factory' +import { useState, useEffect } from 'react'; +import { useParams } from "react-router-dom"; +import { Table, InputNumber, Input, Form, Popconfirm, Typography } from 'antd' +import { makeColumn } from '../factory' +import { MudDiagramService } from '../../services/api/services/MudDiagramService' +import notify from "../notify" -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, @@ -19,6 +16,8 @@ const EditableCell = ({ children, ...restProps }) => { + const inputNumber = + const input = return (
@@ -29,12 +28,11 @@ const EditableCell = ({ rules={[ { required: true, - message: '', - pattern: '(-?[1-9]+\d*([.,]\d+)?)$|^(-?0[.,]\d*[1-9]+)$|^0$|^0.0$' + message: '' }, ]} > - + {(dataIndex === 'preliminaryConclusion' || dataIndex === 'summary') ? input : inputNumber } ) : ( children @@ -45,9 +43,14 @@ const EditableCell = ({ }; export function SludgeDiagram() { + let {id} = useParams() + const [form] = Form.useForm(); - const [data, setData] = useState(originData); const [editingKey, setEditingKey] = useState(''); + const [data, setData] = useState({}) + const [isUpdatingData, setIsUpdatingData] = useState(false) + + const [loader, setLoader] = useState(false) const isEditing = (row) => row.key === editingKey; @@ -85,7 +88,7 @@ export function SludgeDiagram() { children: [ makeColumn('Сумма УВ мах. (абс%)', 'maxSum', { dataIndex: 'maxSum', align: 'center', className: 'lightpurple-background', editable: true}), makeColumn('С1 метан (отн%)', 'methane', { dataIndex: 'methane', align: 'center', className: 'lightpurple-background', editable: true}), - makeColumn('С2 этан (отн%)', 'ethan', { dataIndex: 'ethan', align: 'center', className: 'lightpurple-background', editable: true}), + makeColumn('С2 этан (отн%)', 'ethane', { dataIndex: 'ethane', align: 'center', className: 'lightpurple-background', editable: true}), makeColumn('С3 пропан (отн%)', 'propane', { dataIndex: 'propane', align: 'center', className: 'lightpurple-background', editable: true}), makeColumn('С4 бутан (отн%)', 'butane', { dataIndex: 'butane', align: 'center', className: 'lightpurple-background', editable: true}), makeColumn('С5 пентан (отн%)', 'pentane', { dataIndex: 'pentane', align: 'center', className: 'lightpurple-background', editable: true}) @@ -104,7 +107,6 @@ export function SludgeDiagram() { return editable ? ( save(row.key)} style={{ marginRight: 8 }} > @@ -123,6 +125,26 @@ export function SludgeDiagram() { } ]; + useEffect(() => { + const update = async () => { + setLoader(true) + + try { + let response = await MudDiagramService.get(id, 10) + response.key = 10 + setData(response) + } + catch (ex) { + notify(`Не удалось загрузить данные шламограммы по скважине "${id}"`, 'error') + console.log(ex) + } + + setIsUpdatingData(false) + setLoader(false) + } + update() + }, [isUpdatingData]) + const mapColumns = (col) => { if(col.children) col.children = col.children.map(mapColumns) @@ -155,29 +177,49 @@ export function SludgeDiagram() { setEditingKey(''); }; - const save = async (key) => { + const save = async (formData) => { + + const params = { + key: 10, + probeNumber: form.getFieldValue('probeNumber'), + probeExtractionDepth: form.getFieldValue('probeExtractionDepth'), + sandstone: form.getFieldValue('sandstone'), + siltstone: form.getFieldValue('siltstone'), + argillit: form.getFieldValue('argillit'), + brokenArgillit: form.getFieldValue('brokenArgillit'), + coal: form.getFieldValue('coal'), + sand: form.getFieldValue('sand'), + clay: form.getFieldValue('clay'), + camstone: form.getFieldValue('camstone'), + cement: form.getFieldValue('cement'), + summary: form.getFieldValue('summary'), + drillingMud: form.getFieldValue('drillingMud'), + sludge: form.getFieldValue('sludge'), + maxSum: form.getFieldValue('maxSum'), + methane: form.getFieldValue('methane'), + ethane: form.getFieldValue('ethane'), + propane: form.getFieldValue('propane'), + butane: form.getFieldValue('butane'), + pentane: form.getFieldValue('pentane'), + mechanicalSpeed: form.getFieldValue('mechanicalSpeed'), + preliminaryConclusion: form.getFieldValue('preliminaryConclusion'), + } + try { - 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(''); - } + setLoader(true) + await MudDiagramService.put(`${id}`, 10, params) + + setIsUpdatingData(true) + setLoader(false) + + setEditingKey('') } catch (errInfo) { console.log('Validate Failed:', errInfo); } }; return (<> -
+ +
 
+

+ Дата последнего обновления: {new Date(data?.lastUpdate).toLocaleString()} +

) } \ No newline at end of file diff --git a/src/components/Nnb.jsx b/src/components/modalWindows/Nnb.jsx similarity index 62% rename from src/components/Nnb.jsx rename to src/components/modalWindows/Nnb.jsx index 97ccf8b..70f067a 100644 --- a/src/components/Nnb.jsx +++ b/src/components/modalWindows/Nnb.jsx @@ -1,14 +1,10 @@ -import { useState } from 'react' -import {Table, Input, Form, Popconfirm, Typography } from 'antd' -import { makeColumn } from './factory' +import { useState, useEffect } from 'react' +import { useParams } from "react-router-dom"; +import {Table, InputNumber, Form, Popconfirm, Typography } from 'antd' +import { makeColumn } from '../factory' +import { NnbDataService } from '../../services/api/services/NnbDataService'; +import notify from "../notify" -const originData = [ - { - key: '1', depth: '', zenithAngle: '', magneticAzimuth: '', trueAzimuth: '', directAzimuth: '', verticalDepth: '', absoluteMark: '', localNorthOffset: '', - localEastOffset: '', outFallOffset: '', offsetAzimuth: '', areaIntensity: '', offsetStopAngle: '', zenithIntensity: '', comment: '', depthPlanFactDifference: '', - distancePlanFactDifference: '' - } -] const EditableCell = ({ editing, @@ -30,12 +26,11 @@ const EditableCell = ({ rules={[ { required: true, - message: '', - pattern: '(-?[1-9]+\d*([.,]\d+)?)$|^(-?0[.,]\d*[1-9]+)$|^0$|^0.0$' + message: '' }, ]} > - + ) : ( children @@ -46,17 +41,22 @@ const EditableCell = ({ }; export function Nnb() { + let {id} = useParams() + const [form] = Form.useForm(); - const [data, setData] = useState(originData); const [editingKey, setEditingKey] = useState(''); + const [data, setData] = useState({}) + const [isUpdatingData, setIsUpdatingData] = useState(false) + + const [loader, setLoader] = useState(false) const isEditing = (row) => row.key === editingKey; const columns = [ makeColumn('Глубина по стволу, м', 'depth', { dataIndex: 'depth', align: 'center', editable: true}), makeColumn('Зенитный угол, град', 'zenithAngle', { dataIndex: 'zenithAngle', align: 'center', editable: true}), - makeColumn('Азимут магнитный, град', 'trueAzimuth', { dataIndex: 'trueAzimuth', align: 'center', editable: true}), - makeColumn('Азимут истинный, град', 'conditionalViscosity', { dataIndex: 'conditionalViscosity', align: 'center', editable: true}), + makeColumn('Азимут магнитный, град', 'magneticAzimuth', { dataIndex: 'magneticAzimuth', align: 'center', editable: true}), + makeColumn('Азимут истинный, град', 'trueAzimuth', { dataIndex: 'trueAzimuth', align: 'center', editable: true}), makeColumn('Азимут дирекц., град', 'directAzimuth', { dataIndex: 'directAzimuth', align: 'center', editable: true}), makeColumn('Глубина по вертикали, м', 'verticalDepth', { dataIndex: 'verticalDepth', align: 'center', editable: true}), makeColumn('Абсолютная отметка, м', 'absoluteMark', { dataIndex: 'absoluteMark', align: 'center', editable: true}), @@ -81,7 +81,6 @@ export function Nnb() { return editable ? ( save(row.key)} style={{ marginRight: 8 }} > @@ -100,6 +99,26 @@ export function Nnb() { } ]; + useEffect(() => { + const update = async () => { + setLoader(true) + + try { + let response = await NnbDataService.get(id,11) + response.key = 11 + setData(response) + } + catch (ex) { + notify(`Не удалось загрузить данные ННБ по скважине "${id}"`, 'error') + console.log(ex) + } + + setIsUpdatingData(false) + setLoader(false) + } + update() + }, [isUpdatingData]) + const mergedColumns = columns.map((col) => { if (!col.editable) { return col; @@ -127,29 +146,44 @@ export function Nnb() { setEditingKey(''); }; - const save = async (key) => { + const save = async (formData) => { + const params = { + key: 11, + depth: form.getFieldValue('depth'), + zenithAngle: form.getFieldValue('zenithAngle'), + magneticAzimuth: form.getFieldValue('magneticAzimuth'), + trueAzimuth: form.getFieldValue('trueAzimuth'), + directAzimuth: form.getFieldValue('directAzimuth'), + verticalDepth: form.getFieldValue('verticalDepth'), + absoluteMark: form.getFieldValue('absoluteMark'), + localNorthOffset: form.getFieldValue('localNorthOffset'), + localEastOffset: form.getFieldValue('localEastOffset'), + outFallOffset: form.getFieldValue('outFallOffset'), + offsetAzimuth: form.getFieldValue('offsetAzimuth'), + areaIntensity: form.getFieldValue('areaIntensity'), + offsetStopAngle: form.getFieldValue('offsetStopAngle'), + zenithIntensity: form.getFieldValue('zenithIntensity'), + comment: form.getFieldValue('comment'), + depthPlanFactDifference: form.getFieldValue('depthPlanFactDifference'), + distancePlanFactDifference: form.getFieldValue('distancePlanFactDifference') + } + try { - 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(''); - } + setLoader(true) + await NnbDataService.put(`${id}`, 11, params) + + setIsUpdatingData(true) + setLoader(false) + + setEditingKey('') } catch (errInfo) { console.log('Validate Failed:', errInfo); } }; + return (<> -
+
+
 
+

+ Дата последнего обновления: {new Date(data?.lastUpdate).toLocaleString()} +

) } \ No newline at end of file diff --git a/src/pages/LastData.jsx b/src/pages/LastData.jsx index bafc3a5..2ba7c26 100644 --- a/src/pages/LastData.jsx +++ b/src/pages/LastData.jsx @@ -1,16 +1,18 @@ import {Button, Modal, Checkbox } from "antd"; -import {DrillingFluid} from "../components/DrillingFluid"; -import {useState} from "react"; -import {SludgeDiagram} from "../components/SludgeDiagram"; -import {Nnb} from "../components/Nnb" +import {DrillingFluid} from "../components/modalWindows/DrillingFluid"; +import {useState, useEffect} from "react"; +import {SludgeDiagram} from "../components/modalWindows/MudDiagram"; +import {Nnb} from "../components/modalWindows/Nnb" import Disposition from "../components/Disposition"; export default function LastData() { + const [tableVisible, setCementTableVisible] = useState(false) const [tableSludgeVisible, setTableSludgeVisible] = useState(false) const [tableNNBVisible, setTableNNBVisible] = useState(false) const [dispositionVisible, setDispositionVisible] = useState(false) + const [loader, setLoader] = useState(false) return ( <> @@ -31,8 +33,6 @@ export default function LastData() { ]} > -
 
-

{new Date().toLocaleString()}