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

Removed unnecessary useEffect() from ClusterInfo tables

Browse Source
This commit is contained in:
KharchenkoVV 2021-09-02 09:52:57 +05:00
parent bb84c348fc
commit c288b45dab
5 changed files with 156 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/pages/Cluster/ClusterSections.jsx
View File

@ -1,7 +1,7 @@
import { Table, Tag, Button, Badge, Divider, Modal } from "antd"; import { Table, Tag, Button, Badge, Divider, Modal } from "antd";
import { useParams, Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { LineChartOutlined, ProfileOutlined } from "@ant-design/icons"; import { LineChartOutlined, ProfileOutlined } from "@ant-design/icons";
import { useState, useEffect } from "react"; import { useState } from "react";
import { import {
makeTextColumn, makeTextColumn,
makeNumericColumnPlanFact makeNumericColumnPlanFact
@ -28,11 +28,9 @@ const filtersSectionsType = [];
export default function ClusterSections({ clusterData }) { export default function ClusterSections({ clusterData }) {
let { id } = useParams();
const [wellsStat, setWellsStat] = useState([]);
const [selectedWells, setSelectedWells] = useState([]); const [selectedWells, setSelectedWells] = useState([]);
const [selectedWellsKeys, setSelectedWellsKeys] = useState([]); const [selectedWellsKeys, setSelectedWellsKeys] = useState([]);
const [selectedWellId, setSelectedWellId] = useState([]);
const [isTVDModalVisible, setIsTVDModalVisible] = useState(false) const [isTVDModalVisible, setIsTVDModalVisible] = useState(false)
const [isOpsModalVisible, setIsOpsModalVisible] = useState(false) const [isOpsModalVisible, setIsOpsModalVisible] = useState(false)
const [tvdDataPlan, setTvdDataPlan] = useState([]); const [tvdDataPlan, setTvdDataPlan] = useState([]);
@ -40,30 +38,10 @@ export default function ClusterSections({ clusterData }) {
const [tvdDataForecast, setTvdDataForecast] = useState([]); const [tvdDataForecast, setTvdDataForecast] = useState([]);
const [wellOperations, setWellOperations] = useState([]); const [wellOperations, setWellOperations] = useState([]);
calcAndUpdateStatsBySections(wellsStat ?? [], [ const getOperations = (wellId) => {
"sectionWellDepthPlan",
"sectionWellDepthFact",
"sectionBuildDaysPlan",
"sectionBuildDaysFact",
"sectionRateOfPenetrationPlan",
"sectionRateOfPenetrationFact",
"sectionRouteSpeedPlan",
"sectionRouteSpeedFact",
"sectionBhaDownSpeedPlan",
"sectionBhaDownSpeedFact",
"sectionBhaUpSpeedPlan",
"sectionBhaUpSpeedFact",
"sectionCasingDownSpeedPlan",
"sectionCasingDownSpeedFact",
"nonProductiveTimePlan",
"nonProductiveTimeFact",
]);
useEffect(() => {
if (selectedWellId > 0) {
invokeWebApiWrapperAsync( invokeWebApiWrapperAsync(
async () => { async () => {
const operations = await WellOperationStatService.getTvd(selectedWellId); const operations = await WellOperationStatService.getTvd(wellId);
setWellOperations(operations) setWellOperations(operations)
@ -86,12 +64,10 @@ export default function ClusterSections({ clusterData }) {
setTvdDataForecast(tvdPredictData) setTvdDataForecast(tvdPredictData)
}, },
null, null,
`Не удалось загрузить операции по скважине "${selectedWellId}"`, `Не удалось загрузить операции по скважине "${wellId}"`,
); );
} }
}, [selectedWellId]);
useEffect(() => {
let rows = []; let rows = [];
clusterData.statsWells?.forEach((well) => { clusterData.statsWells?.forEach((well) => {
@ -136,8 +112,24 @@ export default function ClusterSections({ clusterData }) {
}); });
}); });
setWellsStat(rows); calcAndUpdateStatsBySections(rows ?? [], [
}, [id, clusterData]); "sectionWellDepthPlan",
"sectionWellDepthFact",
"sectionBuildDaysPlan",
"sectionBuildDaysFact",
"sectionRateOfPenetrationPlan",
"sectionRateOfPenetrationFact",
"sectionRouteSpeedPlan",
"sectionRouteSpeedFact",
"sectionBhaDownSpeedPlan",
"sectionBhaDownSpeedFact",
"sectionBhaUpSpeedPlan",
"sectionBhaUpSpeedFact",
"sectionCasingDownSpeedPlan",
"sectionCasingDownSpeedFact",
"nonProductiveTimePlan",
"nonProductiveTimeFact",
]);
const columns = [ const columns = [
makeTextColumn("скв №", "caption", null, null, makeTextColumn("скв №", "caption", null, null,
@ -222,7 +214,7 @@ export default function ClusterSections({ clusterData }) {
{ {
title: "TVD", title: "TVD",
render: (value) => <Button onClick={()=> { render: (value) => <Button onClick={()=> {
setSelectedWellId(value.id) getOperations(value.id)
setIsTVDModalVisible(true) setIsTVDModalVisible(true)
}}><LineChartOutlined /></Button>, }}><LineChartOutlined /></Button>,
align: 'center' align: 'center'
@ -230,7 +222,7 @@ export default function ClusterSections({ clusterData }) {
{ {
title: "Операции", title: "Операции",
render: (value) => <Button onClick={()=> { render: (value) => <Button onClick={()=> {
setSelectedWellId(value.id) getOperations(value.id)
setIsOpsModalVisible(true) setIsOpsModalVisible(true)
}}><ProfileOutlined /></Button>, }}><ProfileOutlined /></Button>,
align: 'center' align: 'center'
@ -255,7 +247,7 @@ export default function ClusterSections({ clusterData }) {
<> <>
<Table <Table
columns={columns} columns={columns}
dataSource={wellsStat} dataSource={rows}
size={"small"} size={"small"}
bordered bordered
scroll={{ x: true, y: 620 }} scroll={{ x: true, y: 620 }}

50
src/pages/Cluster/ClusterWells.jsx
View File

@ -1,6 +1,5 @@
import { useParams } from "react-router-dom";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { useState, useEffect } from "react"; import { useState } from "react";
import { Table, Tag, Button, Modal } from "antd"; import { Table, Tag, Button, Modal } from "antd";
import { LineChartOutlined, ProfileOutlined } from "@ant-design/icons"; import { LineChartOutlined, ProfileOutlined } from "@ant-design/icons";
import { import {
@ -30,9 +29,7 @@ const filtersMinMax = [
const filtersWellsType = []; const filtersWellsType = [];
export default function ClusterWells({clusterData}) { export default function ClusterWells({clusterData}) {
let { id } = useParams();
const [wellsStat, setWellsStat] = useState([]);
const [selectedWellId, setSelectedWellId] = useState([]);
const [isTVDModalVisible, setIsTVDModalVisible] = useState(false) const [isTVDModalVisible, setIsTVDModalVisible] = useState(false)
const [isOpsModalVisible, setIsOpsModalVisible] = useState(false) const [isOpsModalVisible, setIsOpsModalVisible] = useState(false)
const [tvdDataPlan, setTvdDataPlan] = useState([]); const [tvdDataPlan, setTvdDataPlan] = useState([]);
@ -40,23 +37,10 @@ export default function ClusterWells({ clusterData }) {
const [tvdDataForecast, setTvdDataForecast] = useState([]); const [tvdDataForecast, setTvdDataForecast] = useState([]);
const [wellOperations, setWellOperations] = useState([]); const [wellOperations, setWellOperations] = useState([]);
calcAndUpdateStatsBySections(wellsStat ?? [], [ const getOperations = (wellId) => {
"factStart",
"factEnd",
"periodPlan",
"periodFact",
"rateOfPenetrationPlan",
"rateOfPenetrationFact",
"routeSpeedPlan",
"routeSpeedFact",
"notProductiveTime",
]);
useEffect(() => {
if (selectedWellId > 0) {
invokeWebApiWrapperAsync( invokeWebApiWrapperAsync(
async () => { async () => {
const operations = await WellOperationStatService.getTvd(selectedWellId); const operations = await WellOperationStatService.getTvd(wellId);
setWellOperations(operations) setWellOperations(operations)
@ -79,12 +63,10 @@ export default function ClusterWells({ clusterData }) {
setTvdDataForecast(tvdPredictData) setTvdDataForecast(tvdPredictData)
}, },
null, null,
`Не удалось загрузить операции по скважине "${selectedWellId}"`, `Не удалось загрузить операции по скважине "${wellId}"`,
); );
} }
}, [selectedWellId]);
useEffect(() => {
let tableData = clusterData.statsWells?.map((well) => { let tableData = clusterData.statsWells?.map((well) => {
if (!filtersWellsType.some((el) => el.text === well.wellType)) if (!filtersWellsType.some((el) => el.text === well.wellType))
@ -118,8 +100,17 @@ export default function ClusterWells({ clusterData }) {
}; };
}); });
setWellsStat(tableData); calcAndUpdateStatsBySections(tableData ?? [], [
}, [id, clusterData]); "factStart",
"factEnd",
"periodPlan",
"periodFact",
"rateOfPenetrationPlan",
"rateOfPenetrationFact",
"routeSpeedPlan",
"routeSpeedFact",
"notProductiveTime",
]);
const columns = [ const columns = [
makeTextColumn("скв №", "caption", null, null, makeTextColumn("скв №", "caption", null, null,
@ -181,7 +172,7 @@ export default function ClusterWells({ clusterData }) {
{ {
title: "TVD", title: "TVD",
render: (value) => <Button onClick={()=> { render: (value) => <Button onClick={()=> {
setSelectedWellId(value.id) getOperations(value.id)
setIsTVDModalVisible(true) setIsTVDModalVisible(true)
}}><LineChartOutlined /></Button>, }}><LineChartOutlined /></Button>,
align: 'center' align: 'center'
@ -189,7 +180,7 @@ export default function ClusterWells({ clusterData }) {
{ {
title: "Операции", title: "Операции",
render: (value) => <Button onClick={()=> { render: (value) => <Button onClick={()=> {
setSelectedWellId(value.id) getOperations(value.id)
setIsOpsModalVisible(true) setIsOpsModalVisible(true)
}}><ProfileOutlined /></Button>, }}><ProfileOutlined /></Button>,
align: 'center' align: 'center'
@ -207,7 +198,7 @@ export default function ClusterWells({ clusterData }) {
<div> <div>
<Table <Table
columns={columns} columns={columns}
dataSource={wellsStat} dataSource={tableData}
size={"small"} size={"small"}
bordered bordered
pagination={false} pagination={false}
@ -225,7 +216,8 @@ export default function ClusterWells({ clusterData }) {
<ChartDepthToDay <ChartDepthToDay
dataPlan={tvdDataPlan} dataPlan={tvdDataPlan}
dataFact={tvdDataFact} dataFact={tvdDataFact}
dataForecast={tvdDataForecast} /> dataForecast={tvdDataForecast}
/>
</Modal> </Modal>
<Modal <Modal

2
src/pages/Cluster/index.jsx
View File

@ -21,7 +21,7 @@ export default function Cluster() {
const clusterData = await WellOperationStatService.getStatCluster( const clusterData = await WellOperationStatService.getStatCluster(
idClaster idClaster
); );
setData(clusterData); setData(clusterData ?? []);
}, },
setShowLoader, setShowLoader,
`Не удалось загрузить данные по кусту "${idClaster}"` `Не удалось загрузить данные по кусту "${idClaster}"`

2
src/services/api/services/FileService.ts
View File

@ -51,7 +51,7 @@ companyName?: string,
fileName?: string, fileName?: string,
begin?: string, begin?: string,
end?: string, end?: string,
skip: number = 0, skip?: number,
take: number = 32, take: number = 32,
): Promise<FileInfoDtoPaginationContainer> { ): Promise<FileInfoDtoPaginationContainer> {
const result = await __request({ const result = await __request({

2
src/services/api/services/WellOperationService.ts
View File

@ -48,7 +48,7 @@ begin?: string,
end?: string, end?: string,
minDepth: number = -1.7976931348623157e+308, minDepth: number = -1.7976931348623157e+308,
maxDepth: number = 1.7976931348623157e+308, maxDepth: number = 1.7976931348623157e+308,
skip: number = 0, skip?: number,
take: number = 32, take: number = 32,
): Promise<WellOperationDtoPaginationContainer> { ): Promise<WellOperationDtoPaginationContainer> {
const result = await __request({ const result = await __request({