forked from ddrilling/asb_cloud_front
Merge branch 'cluster-detail'
This commit is contained in:
Alexey
commit
325462dcc9
@ -1,5 +1,4 @@
|
||||
import { ChartDepthToDay } from './charts/ChartDepthToDay'
|
||||
import { useParams } from "react-router-dom"
|
||||
import notify from "../components/notify"
|
||||
import { useState, useEffect } from 'react'
|
||||
import { AnalyticsService } from "../services/api"
|
||||
@ -10,8 +9,7 @@ const lines = [
|
||||
{ label: "Положение инструмента", yAccessorName: "bitDepth", color: '#ff0' }
|
||||
]
|
||||
|
||||
export function AnalysisDepthToDay() {
|
||||
let { id } = useParams()
|
||||
export function AnalysisDepthToDay({idWell}) {
|
||||
const [depthToDayData, setDepthToDayData] = useState([])
|
||||
const [loader, setLoader] = useState(false)
|
||||
|
||||
@ -21,15 +19,15 @@ export function AnalysisDepthToDay() {
|
||||
|
||||
useEffect(() => {
|
||||
setLoader(true)
|
||||
AnalyticsService.getWellDepthToDay(id)
|
||||
AnalyticsService.getWellDepthToDay(idWell)
|
||||
.then(handleReceiveDepthToDayData)
|
||||
.catch(error => {
|
||||
notify(`Не удалось получить данные для Анализа Глубина-День по скважине "${id}"`,
|
||||
notify(`Не удалось получить данные для Анализа Глубина-День по скважине "${idWell}"`,
|
||||
'warning')
|
||||
console.log(error)
|
||||
})
|
||||
.finally(setLoader(false))
|
||||
}, [id])
|
||||
}, [idWell])
|
||||
|
||||
return (
|
||||
<LoaderPortal show={loader}>
|
||||
|
||||
25
src/components/modalWindows/ModalChartDepthToday.jsx
Normal file
25
src/components/modalWindows/ModalChartDepthToday.jsx
Normal file
@ -0,0 +1,25 @@
|
||||
import { useState } from 'react'
|
||||
import { AnalysisDepthToDay } from '../AnalysisDepthToDay'
|
||||
import { Button, Modal } from 'antd'
|
||||
|
||||
export default function ModalChartDepthToDay({idWell}) {
|
||||
const [chartVisible, setChartVisible] = useState(false)
|
||||
|
||||
return (<>
|
||||
<Button type="secondary" onClick={() => setChartVisible(true)} style={{ marginLeft: "5px" }}>
|
||||
Открыть
|
||||
</Button>
|
||||
<Modal
|
||||
title='Последние показатели бурового раствора'
|
||||
centered
|
||||
visible={chartVisible}
|
||||
onOk={() => setChartVisible(false)}
|
||||
onCancel={() => setChartVisible(false)}
|
||||
width={1800}
|
||||
okText='Ок'
|
||||
cancelText='Отмена'
|
||||
>
|
||||
<AnalysisDepthToDay idWell={idWell}/>
|
||||
</Modal>
|
||||
</>)
|
||||
}
|
||||
@ -3,7 +3,7 @@ import { AnalysisDepthToInterval } from '../components/AnalysisDepthToInterval'
|
||||
import { AnalysisOperationTime } from '../components/AnalysisOperationTime'
|
||||
import { Row, Col } from 'antd'
|
||||
|
||||
export default function Analysis() {
|
||||
export default function Analysis({idWell}) {
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -11,18 +11,18 @@ export default function Analysis() {
|
||||
<Row justify="space-around" align="middle">
|
||||
<Col span={10}>
|
||||
<h2>График Глубина-день</h2>
|
||||
<AnalysisDepthToDay />
|
||||
<AnalysisDepthToDay idWell={idWell}/>
|
||||
</Col>
|
||||
<Col span={10}>
|
||||
<h2>График Глубина за интервал</h2>
|
||||
<AnalysisDepthToInterval />
|
||||
<AnalysisDepthToInterval idWell={idWell}/>
|
||||
</Col>
|
||||
</Row >
|
||||
<Row><div style={{height: "150px"}}> </div></Row>
|
||||
<Row justify="space-around" align="middle">
|
||||
<Col span={10}>
|
||||
<h2>График Операция за время</h2>
|
||||
<AnalysisOperationTime />
|
||||
<AnalysisOperationTime idWell={idWell}/>
|
||||
</Col>
|
||||
</Row>
|
||||
</>
|
||||
|
||||
@ -1,104 +1,12 @@
|
||||
import {useParams} from "react-router-dom";
|
||||
import {Link} from "react-router-dom";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { Link } from "react-router-dom";
|
||||
import LoaderPortal from '../components/LoaderPortal'
|
||||
import { useState, useEffect } from "react";
|
||||
import {ClusterService} from '../services/api'
|
||||
import { ClusterService } from '../services/api'
|
||||
import notify from '../components/notify'
|
||||
import {Table, Tag, Button} from 'antd';
|
||||
import { Table, Tag, Button } from 'antd';
|
||||
import ModalChartDepthToDay from '../components/modalWindows/ModalChartDepthToday'
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'скв №',
|
||||
key: 'caption',
|
||||
dataIndex: 'caption',
|
||||
render: (_, item) => <Link to={`/well/${item.id}`}>{item.caption}</Link>
|
||||
},
|
||||
{
|
||||
title: 'Тип скв.',
|
||||
key: 'wellType',
|
||||
dataIndex: 'wellType',
|
||||
},
|
||||
{
|
||||
title: 'Фактические сроки бурения',
|
||||
children: [
|
||||
{
|
||||
title: 'начало',
|
||||
key: 'factStart',
|
||||
dataIndex: 'factStart',
|
||||
},
|
||||
{
|
||||
title: 'окончание',
|
||||
key: 'factEnd',
|
||||
dataIndex: 'factEnd',
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Продолжительность бурения',
|
||||
children: [
|
||||
{
|
||||
title: 'план',
|
||||
key: 'periodPlan',
|
||||
dataIndex: 'periodPlan',
|
||||
},
|
||||
{
|
||||
title: 'факт',
|
||||
key: 'periodFact',
|
||||
dataIndex: 'periodFact',
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'МСП за скв',
|
||||
children: [
|
||||
{
|
||||
title: 'план',
|
||||
key: 'rateOfPenetrationPlan',
|
||||
dataIndex: 'rateOfPenetrationPlan',
|
||||
},
|
||||
{
|
||||
title: 'факт',
|
||||
key: 'rateOfPenetrationFact',
|
||||
dataIndex: 'rateOfPenetrationFact',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Рейсовая скорость за скв',
|
||||
children: [
|
||||
{
|
||||
title: 'план',
|
||||
key: 'routeSpeedPlan',
|
||||
dataIndex: 'routeSpeedPlan',
|
||||
},
|
||||
{
|
||||
title: 'факт',
|
||||
key: 'routeSpeedFact',
|
||||
dataIndex: 'routeSpeedFact',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Секции',
|
||||
key: 'sections',
|
||||
dataIndex: 'sections',
|
||||
render: (item) => (<span>таблица по секциям</span>)
|
||||
},
|
||||
{
|
||||
title: 'График глубина-день',
|
||||
render: _ => (<Button>Открыть</Button>)
|
||||
},
|
||||
{
|
||||
title: 'Таблица по операциям',
|
||||
render: _ => (<Button>Открыть</Button>)
|
||||
},
|
||||
{
|
||||
title: 'Подрядчики',
|
||||
key: 'companies',
|
||||
dataIndex: 'companies',
|
||||
render: (item) => item.map(company => <Tag color="blue">{company.caption}</Tag>)
|
||||
},
|
||||
];
|
||||
|
||||
export default function Cluster() {
|
||||
let { id } = useParams()
|
||||
@ -106,38 +14,133 @@ export default function Cluster() {
|
||||
const [wellsStat, setWellsStat] = useState(null)
|
||||
const [showLoader, setShowLoader] = useState(false)
|
||||
|
||||
useEffect(()=>{
|
||||
const updateWellsStat = async() => {
|
||||
useEffect(() => {
|
||||
const updateWellsStat = async () => {
|
||||
setShowLoader(true)
|
||||
try{
|
||||
const msInDay = 1000*60*60*24
|
||||
try {
|
||||
const msInDay = 1000 * 60 * 60 * 24
|
||||
const data = await ClusterService.getStat(id)
|
||||
const wellsStat = data.wellsStat.map(w=>({...w,
|
||||
periodPlan: (new Date(w.planEnd) - new Date(w.planStart))/msInDay,
|
||||
periodFact: (new Date(w.factEnd) - new Date(w.factStart))/msInDay,
|
||||
const wellsStat = data.wellsStat.map(w => ({
|
||||
...w,
|
||||
periodPlan: (new Date(w.planEnd) - new Date(w.planStart)) / msInDay,
|
||||
periodFact: (new Date(w.factEnd) - new Date(w.factStart)) / msInDay,
|
||||
}))
|
||||
setWellsStat(wellsStat)
|
||||
setClusterTitle(data.caption)
|
||||
}
|
||||
catch(ex) {
|
||||
catch (ex) {
|
||||
notify(`Не удалось загрузить статистику по скважинам куста "${id}"`, 'error')
|
||||
console.log(ex)
|
||||
}
|
||||
setShowLoader(false)
|
||||
}
|
||||
updateWellsStat()
|
||||
},[id])
|
||||
}, [id])
|
||||
|
||||
return(
|
||||
const columns = [
|
||||
{
|
||||
title: 'скв №',
|
||||
key: 'caption',
|
||||
dataIndex: 'caption',
|
||||
render: (_, item) => <Link to={`/well/${item.id}`}>{item.caption}</Link>
|
||||
},
|
||||
{
|
||||
title: 'Тип скв.',
|
||||
key: 'wellType',
|
||||
dataIndex: 'wellType',
|
||||
},
|
||||
{
|
||||
title: 'Фактические сроки бурения',
|
||||
children: [
|
||||
{
|
||||
title: 'начало',
|
||||
key: 'factStart',
|
||||
dataIndex: 'factStart',
|
||||
},
|
||||
{
|
||||
title: 'окончание',
|
||||
key: 'factEnd',
|
||||
dataIndex: 'factEnd',
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Продолжительность бурения',
|
||||
children: [
|
||||
{
|
||||
title: 'план',
|
||||
key: 'periodPlan',
|
||||
dataIndex: 'periodPlan',
|
||||
},
|
||||
{
|
||||
title: 'факт',
|
||||
key: 'periodFact',
|
||||
dataIndex: 'periodFact',
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'МСП за скв',
|
||||
children: [
|
||||
{
|
||||
title: 'план',
|
||||
key: 'rateOfPenetrationPlan',
|
||||
dataIndex: 'rateOfPenetrationPlan',
|
||||
},
|
||||
{
|
||||
title: 'факт',
|
||||
key: 'rateOfPenetrationFact',
|
||||
dataIndex: 'rateOfPenetrationFact',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Рейсовая скорость за скв',
|
||||
children: [
|
||||
{
|
||||
title: 'план',
|
||||
key: 'routeSpeedPlan',
|
||||
dataIndex: 'routeSpeedPlan',
|
||||
},
|
||||
{
|
||||
title: 'факт',
|
||||
key: 'routeSpeedFact',
|
||||
dataIndex: 'routeSpeedFact',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Секции',
|
||||
key: 'sections',
|
||||
dataIndex: 'sections',
|
||||
render: (item) => (<span>таблица по секциям</span>)
|
||||
},
|
||||
{
|
||||
title: 'График глубина-день',
|
||||
render: (_, item) => (<ModalChartDepthToDay idWell={item.id}/>)
|
||||
},
|
||||
{
|
||||
title: 'Таблица по операциям',
|
||||
render: _ => (<Button>Открыть</Button>)
|
||||
},
|
||||
{
|
||||
title: 'Подрядчики',
|
||||
key: 'companies',
|
||||
dataIndex: 'companies',
|
||||
render: (item) => item.map(company => <Tag color="blue">{company.caption}</Tag>)
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<LoaderPortal show={showLoader}>
|
||||
<h3>{clusterTitle}</h3>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={wellsStat}
|
||||
size={'small'}
|
||||
bordered
|
||||
pagination={false}
|
||||
rowKey={(record) => record.id}
|
||||
/>
|
||||
columns={columns}
|
||||
dataSource={wellsStat}
|
||||
size={'small'}
|
||||
bordered
|
||||
pagination={false}
|
||||
rowKey={(record) => record.id}
|
||||
/>
|
||||
</LoaderPortal>)
|
||||
}
|
||||
@ -95,7 +95,7 @@ export default function Well() {
|
||||
<Report/>
|
||||
</Route>
|
||||
<Route path="/well/:id/analysis">
|
||||
<Analysis/>
|
||||
<Analysis idWell={id}/>
|
||||
</Route>
|
||||
<Route path="/well/:id/wellAnalysis">
|
||||
<WellAnalysis/>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user