From 322aa42c630e9eb3147897564a8d1a3049aefa1f Mon Sep 17 00:00:00 2001 From: KharchenkoVV Date: Thu, 2 Sep 2021 17:09:14 +0500 Subject: [PATCH] Moved reusing TVD request to .getOperations() function --- src/pages/Cluster/ClusterSections.jsx | 62 ++++++++++++--------------- src/pages/Cluster/ClusterWells.jsx | 37 ++++++---------- src/pages/Cluster/functions.jsx | 20 +++++++++ src/pages/WellOperations/Tvd.jsx | 20 +++------ 4 files changed, 67 insertions(+), 72 deletions(-) diff --git a/src/pages/Cluster/ClusterSections.jsx b/src/pages/Cluster/ClusterSections.jsx index 2a367db..43952a3 100644 --- a/src/pages/Cluster/ClusterSections.jsx +++ b/src/pages/Cluster/ClusterSections.jsx @@ -1,16 +1,19 @@ import { Table, Tag, Button, Badge, Divider, Modal } from "antd"; import { Link } from "react-router-dom"; import { LineChartOutlined, ProfileOutlined } from "@ant-design/icons"; -import { useState } from "react"; +import { useState, useEffect } from "react"; import { makeTextColumn, makeNumericColumnPlanFact } from "../../components/Table"; import { invokeWebApiWrapperAsync } from '../../components/factory'; -import { WellOperationStatService } from '../../services/api'; import ChartDepthToDay from '../../components/charts/ChartDepthToDay'; import WellOperationsTable from './WellOperationsTable' -import { calcAndUpdateStatsBySections, makeFilterMinMaxFunction } from "./functions"; +import { + calcAndUpdateStatsBySections, + makeFilterMinMaxFunction, + getOperations +} from "./functions"; const filtersMinMax = [ @@ -29,6 +32,7 @@ const filtersSectionsType = []; export default function ClusterSections({ clusterData }) { + const [selectedWellId, setSelectedWellId] = useState(0) const [selectedWells, setSelectedWells] = useState([]); const [selectedWellsKeys, setSelectedWellsKeys] = useState([]); const [isTVDModalVisible, setIsTVDModalVisible] = useState(false) @@ -38,35 +42,25 @@ export default function ClusterSections({ clusterData }) { const [tvdDataForecast, setTvdDataForecast] = useState([]); const [wellOperations, setWellOperations] = useState([]); - const getOperations = (wellId) => { - invokeWebApiWrapperAsync( - async () => { - const operations = await WellOperationStatService.getTvd(wellId); - - setWellOperations(operations) - - const tvdPlanData = operations.map(el => { - return {key: el.caption, depth: el.plan?.wellDepth, date: el.plan?.startDate} - }).filter(el => el.key) - - setTvdDataPlan(tvdPlanData) - - const tvdFactData = operations.map(el => { - return {key: el.caption, depth: el.fact?.wellDepth, date: el.fact?.startDate} - }).filter(el => el.key) - - setTvdDataFact(tvdFactData) - - const tvdPredictData = operations.map(el => { - return {key: el.caption, depth: el.predict?.wellDepth, date: el.predict?.startDate} - }).filter(el => el.key) - - setTvdDataForecast(tvdPredictData) - }, - null, - `Не удалось загрузить операции по скважине "${wellId}"`, - ); - } + useEffect(() => { + if (selectedWellId > 0) { + invokeWebApiWrapperAsync( + async () => { + const operations = await getOperations(selectedWellId); + + setWellOperations(operations.operations) + + setTvdDataPlan(operations.plan) + + setTvdDataFact(operations.fact) + + setTvdDataForecast(operations.predict) + }, + null, + `Не удалось загрузить операции по скважине "${selectedWellId}"`, + ); + } + }, [selectedWellId]); let rows = []; @@ -214,7 +208,7 @@ export default function ClusterSections({ clusterData }) { { title: "TVD", render: (value) => , align: 'center' @@ -222,7 +216,7 @@ export default function ClusterSections({ clusterData }) { { title: "Операции", render: (value) => , align: 'center' diff --git a/src/pages/Cluster/ClusterWells.jsx b/src/pages/Cluster/ClusterWells.jsx index 0bb4adc..88bb2ed 100644 --- a/src/pages/Cluster/ClusterWells.jsx +++ b/src/pages/Cluster/ClusterWells.jsx @@ -1,5 +1,5 @@ import { Link } from "react-router-dom"; -import { useState } from "react"; +import { useState, useEffect } from "react"; import { Table, Tag, Button, Modal } from "antd"; import { LineChartOutlined, ProfileOutlined } from "@ant-design/icons"; import { @@ -11,9 +11,9 @@ import { } from "../../components/Table"; import { calcAndUpdateStatsBySections, makeFilterMinMaxFunction } from "./functions"; import { invokeWebApiWrapperAsync } from '../../components/factory'; -import { WellOperationStatService } from '../../services/api'; import ChartDepthToDay from '../../components/charts/ChartDepthToDay'; import WellOperationsTable from './WellOperationsTable' +import { getOperations } from "./functions"; const filtersMinMax = [ { @@ -30,6 +30,7 @@ const filtersWellsType = []; export default function ClusterWells({clusterData}) { + const [selectedWellId, setSelectedWellId] = useState(0) const [isTVDModalVisible, setIsTVDModalVisible] = useState(false) const [isOpsModalVisible, setIsOpsModalVisible] = useState(false) const [tvdDataPlan, setTvdDataPlan] = useState([]); @@ -37,35 +38,25 @@ export default function ClusterWells({clusterData}) { const [tvdDataForecast, setTvdDataForecast] = useState([]); const [wellOperations, setWellOperations] = useState([]); - const getOperations = (wellId) => { +useEffect(() => { + if (selectedWellId > 0) { invokeWebApiWrapperAsync( async () => { - const operations = await WellOperationStatService.getTvd(wellId); + const operations = await getOperations(selectedWellId); - setWellOperations(operations) - - const tvdPlanData = operations.map(el => { - return {key: el.caption, depth: el.plan?.wellDepth, date: el.plan?.startDate} - }).filter(el => el.key) + setWellOperations(operations.operations) - setTvdDataPlan(tvdPlanData) + setTvdDataPlan(operations.plan) - const tvdFactData = operations.map(el => { - return {key: el.caption, depth: el.fact?.wellDepth, date: el.fact?.startDate} - }).filter(el => el.key) + setTvdDataFact(operations.fact) - setTvdDataFact(tvdFactData) - - const tvdPredictData = operations.map(el => { - return {key: el.caption, depth: el.predict?.wellDepth, date: el.predict?.startDate} - }).filter(el => el.key) - - setTvdDataForecast(tvdPredictData) + setTvdDataForecast(operations.predict) }, null, - `Не удалось загрузить операции по скважине "${wellId}"`, + `Не удалось загрузить операции по скважине "${selectedWellId}"`, ); } +}, [selectedWellId]); let tableData = clusterData.statsWells?.map((well) => { @@ -173,7 +164,7 @@ export default function ClusterWells({clusterData}) { title: "TVD", key: "tvd", render: (value) => , align: 'center' @@ -182,7 +173,7 @@ export default function ClusterWells({clusterData}) { title: "Операции", key: "operations", render: (value) => , align: 'center' diff --git a/src/pages/Cluster/functions.jsx b/src/pages/Cluster/functions.jsx index d95d0fd..557e867 100644 --- a/src/pages/Cluster/functions.jsx +++ b/src/pages/Cluster/functions.jsx @@ -1,6 +1,26 @@ +import { WellOperationStatService } from '../../services/api'; + const maxPrefix = "isMax" const minPrefix = "isMin" +export const getOperations = async (idWell) => { + const ops = await WellOperationStatService.getTvd(idWell); + + const planData = ops.map(el => { + return {key: el.plan?.id, depth: el.plan?.wellDepth, date: el.plan?.startDate} + }).filter(el => el.key) + + const factData = ops.map(el => { + return {key: el.fact?.id, depth: el.fact?.wellDepth, date: el.fact?.startDate} + }).filter(el => el.key) + + const predictData = ops.map(el => { + return {key: el.predict?.id, depth: el.predict?.wellDepth, date: el.predict?.startDate} + }).filter(el => el.key) + + return { operations: ops, plan: planData, fact: factData, predict: predictData } +} + export const makeFilterMinMaxFunction = (key) => (filterValue, dataItem) => filterValue === "max" diff --git a/src/pages/WellOperations/Tvd.jsx b/src/pages/WellOperations/Tvd.jsx index c286ed1..14b574d 100644 --- a/src/pages/WellOperations/Tvd.jsx +++ b/src/pages/WellOperations/Tvd.jsx @@ -1,7 +1,7 @@ import ChartDepthToDay from '../../components/charts/ChartDepthToDay'; import { useState, useEffect } from 'react'; import { invokeWebApiWrapperAsync } from '../../components/factory'; -import { WellOperationStatService } from '../../services/api'; +import { getOperations } from '../Cluster/functions'; export const Tvd = ({ idWell }) => { @@ -12,23 +12,13 @@ export const Tvd = ({ idWell }) => { useEffect(() => { invokeWebApiWrapperAsync( async () => { - const operations = await WellOperationStatService.getTvd(idWell); + const operations = await getOperations(idWell); - const planData = operations.map(el => { - return {key: el.plan?.id, depth: el.plan?.wellDepth, date: el.plan?.startDate} - }).filter(el => el.key) + setDataPlan(operations.plan) - setDataPlan(planData) - const factData = operations.map(el => { - return {key: el.fact?.id, depth: el.fact?.wellDepth, date: el.fact?.startDate} - }).filter(el => el.key) + setDataFact(operations.fact) - setDataFact(factData) - const predictData = operations.map(el => { - return {key: el.predict?.id, depth: el.predict?.wellDepth, date: el.predict?.startDate} - }).filter(el => el.key) - - setDataForecast(predictData) + setDataForecast(operations.predict) }, null, `Не удалось загрузить операции по скважине "${idWell}"`,