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

Merge branch 'master' of https://bitbucket.org/frolovng/asb_cloud_front_react

Browse Source
This commit is contained in:
KharchenkoVV 2021-07-28 18:00:13 +05:00
commit 9273e82f19
10 changed files with 378 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -32,7 +32,7 @@
"react_test": "react-scripts test",
"eject": "react-scripts eject"
},
"proxy": "http://192.168.1.70:5000",
"proxy": "http://127.0.0.1:5000",
"eslintConfig": {
"extends": [
"react-app",

10
src/components/AnalysisDepthToDay.jsx
View File

@ -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
View 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>
</>)
}

8
src/pages/Analysis.jsx
View File

@ -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"}}>&nbsp;</div></Row>
<Row justify="space-around" align="middle">
<Col span={10}>
<h2>График Операция за время</h2>
<AnalysisOperationTime />
<AnalysisOperationTime idWell={idWell}/>
</Col>
</Row>
</>

61
src/pages/Cluster.jsx
View File

@ -5,6 +5,37 @@ import { useState, useEffect } from "react";
import { ClusterService } from '../services/api'
import notify from '../components/notify'
import { Table, Tag, Button } from 'antd';
import ModalChartDepthToDay from '../components/modalWindows/ModalChartDepthToday'
export default function Cluster() {
let { id } = useParams()
const [clusterTitle, setClusterTitle] = useState("")
const [wellsStat, setWellsStat] = useState(null)
const [showLoader, setShowLoader] = useState(false)
useEffect(() => {
const updateWellsStat = async () => {
setShowLoader(true)
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,
}))
setWellsStat(wellsStat)
setClusterTitle(data.caption)
}
catch (ex) {
notify(`Не удалось загрузить статистику по скважинам куста "${id}"`, 'error')
console.log(ex)
}
setShowLoader(false)
}
updateWellsStat()
}, [id])
const columns = [
{
@ -86,7 +117,7 @@ const columns = [
},
{
title: 'График глубина-день',
render: _ => (<Button>Открыть</Button>)
render: (_, item) => (<ModalChartDepthToDay idWell={item.id}/>)
},
{
title: 'Таблица по операциям',
@ -100,34 +131,6 @@ const columns = [
},
];
export default function Cluster() {
let { id } = useParams()
const [clusterTitle, setClusterTitle] = useState("")
const [wellsStat, setWellsStat] = useState(null)
const [showLoader, setShowLoader] = useState(false)
useEffect(()=>{
const updateWellsStat = async() => {
setShowLoader(true)
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,
}))
setWellsStat(wellsStat)
setClusterTitle(data.caption)
}
catch(ex) {
notify(`Не удалось загрузить статистику по скважинам куста "${id}"`, 'error')
console.log(ex)
}
setShowLoader(false)
}
updateWellsStat()
},[id])
return (
<LoaderPortal show={showLoader}>
<h3>{clusterTitle}</h3>

143
src/pages/ClusterStat.jsx Normal file
View File

@ -0,0 +1,143 @@
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 notify from '../components/notify'
import {Table, Tag, Button} from 'antd';
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 ClusterStat() {
let { id } = useParams()
const [clusterTitle, setClusterTitle] = useState("")
const [wellsStat, setWellsStat] = useState(null)
const [showLoader, setShowLoader] = useState(false)
useEffect(()=>{
const updateWellsStat = async() => {
setShowLoader(true)
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,
}))
setWellsStat(wellsStat)
setClusterTitle(data.caption)
}
catch(ex) {
notify(`Не удалось загрузить статистику по скважинам куста "${id}"`, 'error')
console.log(ex)
}
setShowLoader(false)
}
updateWellsStat()
},[id])
return(
<LoaderPortal show={showLoader}>
<h3>{clusterTitle}</h3>
<Table
columns={columns}
dataSource={wellsStat}
size={'small'}
bordered
pagination={false}
rowKey={(record) => record.id}
/>
</LoaderPortal>)
}

7
src/pages/Files.jsx
View File

@ -1,7 +0,0 @@
export default function Files(props) {
return (
<div className="menu-title">
<h2>Файлы</h2>
</div>
)
}

11
src/pages/Well.jsx
View File

@ -1,14 +1,13 @@
import {Layout, Menu} from "antd";
import {FolderOutlined, FundViewOutlined} from "@ant-design/icons";
import {Link, Redirect, Route, Switch, useParams} from "react-router-dom";
import Files from "../pages/Files";
import Archive from "../pages/Archive";
import Messages from "../pages/Messages";
import Report from "../pages/Report";
import Analysis from "../pages/Analysis";
import WellAnalysis from "../pages/WellAnalysis";
import TelemetryView from "../pages/TelemetryView";
import MenuDocuments from "../components/MenuDocuments";
import WellStat from "./WellStat";
const { Content } = Layout
@ -41,7 +40,7 @@ export default function Well() {
<Link to={{pathname: `${rootPath}/wellAnalysis`}}>Операции по скважине</Link>
</Menu.Item>
<Menu.Item key="6" icon={<FolderOutlined/>}>
<Link to={{pathname: `${rootPath}/file`}}>Файлы</Link>
<Link to='stat'>Статистика</Link>
</Menu.Item>
<Menu.Item key="7" icon={<FolderOutlined/>}>
<Link to={{pathname: `${rootPath}/archive`}}>Архив</Link>
@ -82,8 +81,8 @@ export default function Well() {
<Layout>
<Content className="site-layout-background">
<Switch>
<Route path="/well/:id/file">
<Files/>
<Route path="/well/:id/stat">
<WellStat/>
</Route>
<Route path="/well/:id/archive">
<Archive/>
@ -95,7 +94,7 @@ export default function Well() {
<Report/>
</Route>
<Route path="/well/:id/analysis">
<Analysis/>
<Analysis idWell={id}/>
</Route>
<Route path="/well/:id/wellAnalysis">
<WellAnalysis/>

72
src/pages/WellStat.jsx Normal file
View File

@ -0,0 +1,72 @@
//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 notify from '../components/notify'
import {Table, Tag, Button} from 'antd';
const makeColumn = (title, key) => ({title: title, key: key, dataIndex: key,})
const makePlanFactColumns = (title, keyPlan, keyFact) =>
{
let keyPlanLocal = keyPlan
let keyFactLocal = keyFact
if(!keyFact){
keyPlanLocal = keyPlan + 'Plan'
keyFactLocal = keyPlan + 'Fact'
}
return {
title: title,
children: [
makeColumn('план', keyPlanLocal),
makeColumn('факт', keyFactLocal),
]
}
}
const columns = [
makeColumn('Конструкция секции', 'sectionType'),
makePlanFactColumns('Глубина, м', 'wellDepth'),
makePlanFactColumns('Период, д', 'buildDays'),
makePlanFactColumns('Механическая скорость проходки, м/час', 'rateOfPenetration'),
makePlanFactColumns('Рейсовая скорость, м/час', 'routeSpeed'),
makePlanFactColumns('Скорость подъема КНБК', 'bhaUpSpeed'),
makePlanFactColumns('Скорость спуска КНБК', 'bhaDownSpeed'),
makePlanFactColumns('Скорость спуска обсадной колонны', 'casingDownSpeed'),
]
// const data = [{
// sectionType: 'загагулина',
// wellDepthPlan: 1,
// wellDepthFact: 1,
// buildDaysPlan: 1,
// buildDaysFact: 1,
// rateOfPenetrationPlan: 4,
// rateOfPenetrationFact: 3,
// routeSpeedPlan: 2,
// routeSpeedFact: 1,
// bhaUpSpeedPlan: 1,
// bhaUpSpeedFact: 1,
// bhaDownSpeedPlan: 1,
// bhaDownSpeedFact: 1,
// casingDownSpeedPlan: 1,
// casingDownSpeedFact: 1,
// }]
export default function WellStat({data}){
const [showLoader, setShowLoader] = useState(false)
return(
<LoaderPortal show={showLoader}>
<Table
columns={columns}
dataSource={data}
size={'small'}
bordered
pagination={false}
rowKey={(record) => record.sectionType}
/>
</LoaderPortal>)
}

6
src/services/api/models/WellOperationDto.ts
View File

@ -3,4 +3,10 @@
/* eslint-disable */
export type WellOperationDto = {
id?: number;
idWell?: number;
caption?: string | null;
description?: string | null;
casingSection?: number;
wellDepth?: number;
}