diff --git a/src/pages/Cluster/ClusterWells.jsx b/src/pages/Cluster/ClusterWells.jsx index c0afd48..fcb4360 100644 --- a/src/pages/Cluster/ClusterWells.jsx +++ b/src/pages/Cluster/ClusterWells.jsx @@ -1,69 +1,56 @@ -import { Link } from "react-router-dom"; -import { useState, useEffect } from "react"; -import { Table, Tag, Button, Modal } from "antd"; -import { LineChartOutlined, ProfileOutlined } from "@ant-design/icons"; +import { Link } from 'react-router-dom' +import { useState, useEffect } from 'react' +import { Table, Tag, Button, Modal } from 'antd' +import { LineChartOutlined, ProfileOutlined } from '@ant-design/icons' import { makeTextColumn, makeGroupColumn, makeColumn, makeDateSorter, - makeNumericColumnPlanFact} from "../../components/Table"; -import { calcAndUpdateStatsBySections, makeFilterMinMaxFunction, getPrecision } from "./functions"; -import { invokeWebApiWrapperAsync } from '../../components/factory'; -import ChartTvD from '../WellOperations/ChartTvD'; + makeNumericColumnPlanFact} from '../../components/Table' +import { calcAndUpdateStatsBySections, makeFilterMinMaxFunction, getPrecision } from './functions' +import { invokeWebApiWrapperAsync } from '../../components/factory' +import { Tvd } from '../WellOperations/Tvd' import WellOperationsTable from './WellOperationsTable' -import { getOperations } from "./functions"; -import LoaderPortal from "../../components/LoaderPortal"; +import { getOperations } from './functions' +import LoaderPortal from '../../components/LoaderPortal' const filtersMinMax = [ - { - text: "min", - value: "min", - }, - { - text: "max", - value: "max", - }, -]; + { text: 'min', value: 'min' }, + { text: 'max', value: 'max' }, +] -const filtersWellsType = []; -const DAY_IN_MS = 1000 * 60 * 60 * 24; +const filtersWellsType = [] +const DAY_IN_MS = 1000 * 60 * 60 * 24 export default function ClusterWells({statsWells}) { const [selectedWellId, setSelectedWellId] = useState(0) const [isTVDModalVisible, setIsTVDModalVisible] = useState(false) const [isOpsModalVisible, setIsOpsModalVisible] = useState(false) - const [tvdDataPlan, setTvdDataPlan] = useState([]); - const [tvdDataFact, setTvdDataFact] = useState([]); - const [tvdDataForecast, setTvdDataForecast] = useState([]); - const [wellOperations, setWellOperations] = useState([]); + const [wellOperations, setWellOperations] = useState([]) const [tableData, setTableData] = useState([]) const [showLoader, setShowLoader] = useState(false) useEffect(() => { - if (selectedWellId > 0) { - invokeWebApiWrapperAsync( - async () => { - const operations = await getOperations(selectedWellId); - - setWellOperations(operations.operations) - setTvdDataPlan(operations.plan) - setTvdDataFact(operations.fact) - setTvdDataForecast(operations.predict) - }, - setShowLoader, - `Не удалось загрузить операции по скважине "${selectedWellId}"`, - ); - } else { + if (!isOpsModalVisible || selectedWellId <= 0) { setWellOperations([]) + return } - }, [selectedWellId]); + invokeWebApiWrapperAsync( + async () => { + const operations = await getOperations(selectedWellId) + setWellOperations(operations.operations) + }, + setShowLoader, + `Не удалось загрузить операции по скважине "${selectedWellId}"`, + ) + }, [selectedWellId, isOpsModalVisible]) useEffect(() => { let data = statsWells?.map((well) => { if (!filtersWellsType.some((el) => el.text === well.wellType)) - filtersWellsType.push({ text: well.wellType, value: well.wellType,}); + filtersWellsType.push({ text: well.wellType, value: well.wellType,}) return { key: well.caption, @@ -81,20 +68,20 @@ export default function ClusterWells({statsWells}) { notProductiveTimePlan: well.total?.plan?.nonProductiveHours, notProductiveTimeFact: well.total?.fact?.nonProductiveHours, companies: well.companies - }; - }); + } + }) calcAndUpdateStatsBySections(data ?? [], [ - "factStart", - "factEnd", - "periodPlan", - "periodFact", - "rateOfPenetrationPlan", - "rateOfPenetrationFact", - "routeSpeedPlan", - "routeSpeedFact", - "notProductiveTime", - ]); + 'factStart', + 'factEnd', + 'periodPlan', + 'periodFact', + 'rateOfPenetrationPlan', + 'rateOfPenetrationFact', + 'routeSpeedPlan', + 'routeSpeedFact', + 'notProductiveTime', + ]) setTableData(data) }, [statsWells]) @@ -102,21 +89,21 @@ export default function ClusterWells({statsWells}) { const getDate = (str) => Number.isNaN(new Date(str).getTime()) ? '-' : new Date(str).toLocaleString() const columns = [ - makeTextColumn("скв №", "caption", null, null, + makeTextColumn('скв №', 'caption', null, null, (_, item) => ({item.caption ?? '-'} )), - makeTextColumn("Тип скв.", "wellType", filtersWellsType, null, (text) => text ?? '-'), - makeGroupColumn("Фактические сроки", [ - makeColumn("начало", "factStart", { sorter: makeDateSorter('factStart'), render: getDate }), - makeColumn("окончание", "factEnd", { sorter: makeDateSorter('factEnd'), render: getDate }) + makeTextColumn('Тип скв.', 'wellType', filtersWellsType, null, (text) => text ?? '-'), + makeGroupColumn('Фактические сроки', [ + makeColumn('начало', 'factStart', { sorter: makeDateSorter('factStart'), render: getDate }), + makeColumn('окончание', 'factEnd', { sorter: makeDateSorter('factEnd'), render: getDate }) ]), - makeNumericColumnPlanFact("Продолжительность", "period", filtersMinMax, makeFilterMinMaxFunction, getPrecision), - makeNumericColumnPlanFact("МСП", "rateOfPenetration", filtersMinMax, makeFilterMinMaxFunction, getPrecision), - makeNumericColumnPlanFact("Рейсовая скорость", "routeSpeed", filtersMinMax, makeFilterMinMaxFunction, getPrecision), - makeNumericColumnPlanFact("НПВ, сут", "notProductiveTime", filtersMinMax, makeFilterMinMaxFunction, getPrecision), + makeNumericColumnPlanFact('Продолжительность', 'period', filtersMinMax, makeFilterMinMaxFunction, getPrecision), + makeNumericColumnPlanFact('МСП', 'rateOfPenetration', filtersMinMax, makeFilterMinMaxFunction, getPrecision), + makeNumericColumnPlanFact('Рейсовая скорость', 'routeSpeed', filtersMinMax, makeFilterMinMaxFunction, getPrecision), + makeNumericColumnPlanFact('НПВ, сут', 'notProductiveTime', filtersMinMax, makeFilterMinMaxFunction, getPrecision), { - title: "TVD", - key: "tvd", + title: 'TVD', + key: 'tvd', render: (value) =>