forked from ddrilling/asb_cloud_front
WellOperations get and display.
This commit is contained in:
Фролов
parent
24d2ff5fe9
commit
c90e3bde42
@ -2,16 +2,13 @@ import { Layout, Menu } from "antd";
|
||||
import { FolderOutlined, FundViewOutlined } from "@ant-design/icons";
|
||||
import { Link, Redirect, Route, Switch, useParams } from "react-router-dom";
|
||||
import TelemetryView from "./TelemetryView";
|
||||
import Messages from "../pages/Messages";
|
||||
import Messages from "./Messages";
|
||||
import Report from "./Report";
|
||||
import Archive from "../pages/Archive";
|
||||
import Analysis from "../pages/Analysis";
|
||||
import WellAnalysis from "../pages/WellAnalysis";
|
||||
import Documents from "../pages/Documents";
|
||||
import LastData from '../pages/LastData'
|
||||
import Archive from "./Archive";
|
||||
import Documents from "./Documents";
|
||||
import LastData from './LastData'
|
||||
import { makeMenuItems } from "./Documents/menuItems";
|
||||
import WellStat from "./WellStat";
|
||||
import Smbo from "./Smbo";
|
||||
import WellOperations from "./WellOperations";
|
||||
|
||||
const { Content } = Layout;
|
||||
|
||||
@ -26,33 +23,27 @@ export default function Well() {
|
||||
<Layout>
|
||||
<Menu mode="horizontal" selectable={true} className="well_menu">
|
||||
<Menu.Item key="1" icon={<FundViewOutlined />}>
|
||||
<Link to={{ pathname: `${rootPath}/telemetry` }}>Мониторинг</Link>
|
||||
<Link to={`${rootPath}/telemetry`}>Мониторинг</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="2" icon={<FolderOutlined />}>
|
||||
<Link to={{ pathname: `${rootPath}/message` }}>Сообщения</Link>
|
||||
<Link to={`${rootPath}/message`}>Сообщения</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="3" icon={<FolderOutlined />}>
|
||||
<Link to={{ pathname: `${rootPath}/report` }}>Рапорт</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="4" icon={<FolderOutlined />}>
|
||||
<Link to={{ pathname: `${rootPath}/analysis` }}>Анализ</Link>
|
||||
<Link to={`${rootPath}/report`}>Рапорт</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="5" icon={<FolderOutlined />}>
|
||||
<Link to={{ pathname: `${rootPath}/wellAnalysis` }}>
|
||||
<Link to={`${rootPath}/operations/plan`}>
|
||||
Операции по скважине
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="6" icon={<FolderOutlined />}>
|
||||
<Link to="stat">Статистика</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="7" icon={<FolderOutlined />}>
|
||||
<Link to={{ pathname: `${rootPath}/archive` }}>Архив</Link>
|
||||
<Link to={`${rootPath}/archive`}>Архив</Link>
|
||||
</Menu.Item>
|
||||
<SubMenu
|
||||
key="documentsSub"
|
||||
title={
|
||||
<Link
|
||||
to={{ pathname: `${rootPath}/document/fluidService` }}
|
||||
to={`${rootPath}/document/fluidService` }
|
||||
className="linkDocuments">
|
||||
Документы
|
||||
</Link>
|
||||
@ -62,11 +53,8 @@ export default function Well() {
|
||||
>
|
||||
{makeMenuItems(rootPath)}
|
||||
</SubMenu>
|
||||
<Menu.Item key="8" icon={<FolderOutlined />}>
|
||||
<Link to={{ pathname: `${rootPath}/smbo` }}>СМБО</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="9" icon={<FolderOutlined />}>
|
||||
<Link to={{ pathname: `${rootPath}/lastData` }}>Последние данные</Link>
|
||||
<Link to={`${rootPath}/lastData`}>Последние данные</Link>
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
|
||||
@ -82,14 +70,8 @@ export default function Well() {
|
||||
<Route path="/well/:idWell/report">
|
||||
<Report idWell={idWell} />
|
||||
</Route>
|
||||
<Route path="/well/:idWell/analysis">
|
||||
<Analysis idWell={idWell} />
|
||||
</Route>
|
||||
<Route path="/well/:idWell/stat">
|
||||
<WellStat idWell={idWell} />
|
||||
</Route>
|
||||
<Route path="/well/:idWell/wellAnalysis">
|
||||
<WellAnalysis idWell={idWell} />
|
||||
<Route path="/well/:idWell/operations/:tab">
|
||||
<WellOperations idWell={idWell} />
|
||||
</Route>
|
||||
<Route path="/well/:idWell/archive">
|
||||
<Archive idWell={idWell} />
|
||||
@ -97,14 +79,11 @@ export default function Well() {
|
||||
<Route path="/well/:idWell/document/:category">
|
||||
<Documents idWell={idWell} />
|
||||
</Route>
|
||||
<Route path="/well/:idWell/smbo">
|
||||
<Smbo idWell={idWell} />
|
||||
</Route>
|
||||
<Route path="/well/:id/lastData">
|
||||
<LastData/>
|
||||
</Route>
|
||||
<Route path="/">
|
||||
<Redirect to={{ pathname: `${rootPath}/telemetry` }} />
|
||||
<Redirect to={`${rootPath}/telemetry`} />
|
||||
</Route>
|
||||
</Switch>
|
||||
</Content>
|
||||
|
||||
53
src/pages/WellOperations.jsx
Normal file
53
src/pages/WellOperations.jsx
Normal file
@ -0,0 +1,53 @@
|
||||
import {Layout, Menu} from "antd";
|
||||
import {Switch, Link, Route, Redirect, useParams} from "react-router-dom";
|
||||
import { FolderOutlined } from "@ant-design/icons";
|
||||
import WellOperationsEditor from './WellOperationsEditor'
|
||||
|
||||
const { Content } = Layout
|
||||
|
||||
export default function WellOperations({idWell}) {
|
||||
let {tab} = useParams()
|
||||
const rootPath = `/well/${idWell}/operations`;
|
||||
|
||||
return(<>
|
||||
<Menu
|
||||
mode="horizontal"
|
||||
selectable={true}
|
||||
className="well_menu"
|
||||
selectedKeys={[tab]}>
|
||||
<Menu.Item key="tvd" icon={<FolderOutlined />}>
|
||||
<Link to={`${rootPath}/tvd`}>TVD</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="sections" icon={<FolderOutlined />}>
|
||||
<Link to={`${rootPath}/sections`}>Секции</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="plan" icon={<FolderOutlined />}>
|
||||
<Link to={`${rootPath}/plan`}>План</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="fact" icon={<FolderOutlined />}>
|
||||
<Link to={`${rootPath}/fact`}>Факт</Link>
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
<Layout>
|
||||
<Content className="site-layout-background">
|
||||
<Switch>
|
||||
<Route path={`${rootPath}/tvd`}>
|
||||
<div>sss</div>
|
||||
</Route>
|
||||
<Route path={`${rootPath}/sections`}>
|
||||
<div>sss</div>
|
||||
</Route>
|
||||
<Route path={`${rootPath}/plan`}>
|
||||
<WellOperationsEditor idWell={idWell}/>
|
||||
</Route>
|
||||
<Route path={`${rootPath}/fact`}>
|
||||
<div>sss</div>
|
||||
</Route>
|
||||
<Route path={rootPath}>
|
||||
<Redirect to={`${rootPath}/tvd`}/>
|
||||
</Route>
|
||||
</Switch>
|
||||
</Content>
|
||||
</Layout>
|
||||
</>)
|
||||
}
|
||||
93
src/pages/WellOperationsEditor.jsx
Normal file
93
src/pages/WellOperationsEditor.jsx
Normal file
@ -0,0 +1,93 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Input, DatePicker } from 'antd'
|
||||
import { EditableTable } from "../components/EditableTable"
|
||||
import LoaderPortal from '../components/LoaderPortal'
|
||||
import { makeColumn, RegExpIsFloat, invokeWebApiWrapperAsync } from '../components/factory'
|
||||
import { WellOperationService} from '../services/api'
|
||||
|
||||
const numericColumnOptions = {
|
||||
editable: true,
|
||||
initialValue: 0,
|
||||
formItemRules: [
|
||||
{
|
||||
required: true,
|
||||
message: `Введите число`,
|
||||
pattern: RegExpIsFloat,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const TypeSelector = <Input list={'sectionTypeList'}/>
|
||||
|
||||
const DataListSectionTypes = <datalist id="sectionTypeList">
|
||||
<option value="Пилотный ствол">Пилотный ствол</option>
|
||||
<option value="Направление">Направление</option>
|
||||
<option value="Кондуктор">Кондуктор</option>
|
||||
<option value="Эксплуатационная колонна">Эксплуатационная колонна</option>
|
||||
<option value="Транспортный ствол">Транспортный ствол</option>
|
||||
<option value="Хвостовик">Хвостовик</option>
|
||||
</datalist>
|
||||
|
||||
const columns = [
|
||||
makeColumn('Конструкция секции','wellSectionTypeName', {editable:true, input:TypeSelector}),
|
||||
makeColumn('Операция','categoryName', {editable:true, input:TypeSelector}),
|
||||
makeColumn('Доп. инфо','info', {editable:true}),
|
||||
makeColumn('Глубина забоя','wellDepth', numericColumnOptions),
|
||||
makeColumn('Время начала','startDate', {editable:true, input:<DatePicker/>}),
|
||||
makeColumn('Продолжительность','durationHours', numericColumnOptions),
|
||||
makeColumn('Комментарий','comment', {editable:true}),
|
||||
]
|
||||
|
||||
const basePageSize = 32;
|
||||
|
||||
export default function WellOperationsEditor({idWell, type}){
|
||||
const [pageNumAndPageSize, setPageNumAndPageSize] = useState({current:1, pageSize:basePageSize})
|
||||
const [paginationTotal, setPaginationTotal] = useState(0)
|
||||
const [operations, setOperations] = useState([])
|
||||
const [showLoader, setShowLoader] = useState(false)
|
||||
|
||||
const updateOperations = () => invokeWebApiWrapperAsync(
|
||||
async () => {
|
||||
const skip = ((pageNumAndPageSize.current - 1) * pageNumAndPageSize.pageSize) || 0
|
||||
const take = pageNumAndPageSize.pageSize
|
||||
const paginatedOperations = await WellOperationService.getOperations(idWell, type, undefined, undefined, undefined, undefined, skip, take )
|
||||
setOperations(paginatedOperations?.items??[])
|
||||
const total = paginatedOperations.count?? paginatedOperations.items?.length ?? 0
|
||||
setPaginationTotal(total)
|
||||
},
|
||||
setShowLoader,
|
||||
'Не удалось загрузить список операций по скважине'
|
||||
)
|
||||
|
||||
useEffect(updateOperations, [idWell, type, pageNumAndPageSize])
|
||||
|
||||
const onAdd = (newOperation) => {
|
||||
|
||||
}
|
||||
|
||||
const onEdit= (newOperation) => {
|
||||
|
||||
}
|
||||
|
||||
const onDelete= (newOperation) => {
|
||||
|
||||
}
|
||||
|
||||
return <LoaderPortal show={showLoader}>
|
||||
<EditableTable
|
||||
columns={columns}
|
||||
dataSource={operations}
|
||||
onRowAdd={onAdd}
|
||||
onRowEdit={onEdit}
|
||||
onRowDelete={onDelete}
|
||||
pagination={{
|
||||
current: pageNumAndPageSize.current,
|
||||
pageSize: pageNumAndPageSize.pageSize,
|
||||
showSizeChanger: false,
|
||||
total: paginationTotal,
|
||||
onChange: (page, pageSize) => setPageNumAndPageSize({current: page, pageSize: pageSize})
|
||||
}}
|
||||
/>
|
||||
{DataListSectionTypes}
|
||||
</LoaderPortal>
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user