forked from ddrilling/asb_cloud_front
grouping components
This commit is contained in:
Фролов
parent
5f6a4724cc
commit
fdd05d71e3
56
src/components/UploadFileForm.jsx
Normal file
56
src/components/UploadFileForm.jsx
Normal file
@ -0,0 +1,56 @@
|
||||
import { Form, Upload, Button} from 'antd'
|
||||
import { UploadOutlined} from '@ant-design/icons'
|
||||
import { useState } from 'react'
|
||||
import { upload } from './factory'
|
||||
|
||||
export default function UploadFileForm({url, onUploadStart, onUploadComplete, onUploadError}) {
|
||||
const [isSubmitButtonEnabled, setSubmitButtonEnabled] = useState(false)
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const handleFileSend = async (values) => {
|
||||
if(onUploadStart)
|
||||
onUploadStart()
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
const formData = new FormData()
|
||||
values.documentFile.fileList.forEach((val) => {
|
||||
formData.append("files", val.originFileObj);
|
||||
});
|
||||
await upload(url, formData)
|
||||
} catch(error) {
|
||||
if(onUploadError)
|
||||
onUploadError(error)
|
||||
} finally {
|
||||
form.resetFields()
|
||||
if(onUploadComplete)
|
||||
onUploadComplete()
|
||||
}
|
||||
}
|
||||
|
||||
return(
|
||||
<Form
|
||||
form={form}
|
||||
onFinish={handleFileSend}
|
||||
style={{display: 'flex'}}>
|
||||
<Form.Item
|
||||
name="file"
|
||||
style={{marginBottom: 0}}
|
||||
rules={[{ required: true, message: 'Выберите файл' }]}>
|
||||
<Upload
|
||||
name ="file"
|
||||
onChange={(props) => setSubmitButtonEnabled(props.fileList.length > 0)}>
|
||||
<Button icon={<UploadOutlined/>}>Загрузить файл</Button>
|
||||
</Upload>
|
||||
</Form.Item>
|
||||
<Form.Item style={{marginBottom: 0}}>
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
disabled={!isSubmitButtonEnabled}
|
||||
style={{marginLeft: '10px', display:isSubmitButtonEnabled?'':'none'}}>
|
||||
Отправить
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
)
|
||||
}
|
||||
@ -1,108 +0,0 @@
|
||||
import { Form, Upload, Button } from 'antd'
|
||||
import { InboxOutlined } from '@ant-design/icons'
|
||||
import {useState} from "react"
|
||||
import {useParams} from 'react-router-dom'
|
||||
|
||||
const { Dragger } = Upload;
|
||||
|
||||
export default function DocumentCreationForm({selectedFileCategory, closeModalHandler}){
|
||||
|
||||
let {id} = useParams()
|
||||
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const [selectedFiles, setSelectedFiles] = useState([])
|
||||
|
||||
const onFinish = (form) => {
|
||||
form
|
||||
.validateFields()
|
||||
.then(values => {
|
||||
var fileList = values.documentFile.fileList
|
||||
|
||||
if (fileList.length > 0) {
|
||||
const formData = new FormData();
|
||||
|
||||
fileList.forEach(val => {
|
||||
formData.append('files', val.originFileObj)
|
||||
})
|
||||
|
||||
fetch(`/api/files/${id}/files?idCategory=${selectedFileCategory}&idUser=${localStorage['userId']}`, {
|
||||
headers: {
|
||||
Authorization: 'Bearer ' + localStorage['token']
|
||||
},
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
|
||||
form.resetFields();
|
||||
closeModalHandler()
|
||||
}
|
||||
}).catch(info => {
|
||||
console.log('Validate Failed:', info);
|
||||
});
|
||||
}
|
||||
|
||||
const submitFileFormProps = {
|
||||
progress: {
|
||||
strokeColor: {
|
||||
'0%': '#108ee9',
|
||||
'100%': '#87d068',
|
||||
},
|
||||
strokeWidth: 3,
|
||||
format: percent => `${parseFloat(percent.toFixed(2))}%`,
|
||||
},
|
||||
multiple: true,
|
||||
onChange({ file, fileList }) {
|
||||
if (file.status !== 'uploading') {
|
||||
setSelectedFiles(fileList)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
name="ImprovementCreationForm"
|
||||
onFinish={(values) => onFinish(form)}
|
||||
>
|
||||
<Form.Item
|
||||
name="documentFile"
|
||||
rules={[{ required: true, message: 'Выберите файл' }]}
|
||||
>
|
||||
<Dragger
|
||||
name="documentFileInput"
|
||||
{...submitFileFormProps}
|
||||
listType="picture"
|
||||
>
|
||||
<p className="ant-upload-drag-icon">
|
||||
<InboxOutlined />
|
||||
</p>
|
||||
<p className="ant-upload-text">Кликните или перенесите сюда файлы</p>
|
||||
<p className="ant-upload-hint">
|
||||
Возможна загрузка как одного файла, так и нескольких.
|
||||
</p>
|
||||
</Dragger>
|
||||
</Form.Item>
|
||||
<Form.Item style={{marginBottom: 0}}>
|
||||
<div style={{display: 'flex', justifyContent: 'flex-end'}}>
|
||||
<Button
|
||||
key="cancel"
|
||||
onClick={closeModalHandler}>
|
||||
Отмена
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
key="submit"
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
disabled={selectedFiles.length === 0}
|
||||
style={{marginLeft: '10px'}}
|
||||
>
|
||||
Отправить
|
||||
</Button>
|
||||
</div>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
)
|
||||
}
|
||||
@ -1,183 +0,0 @@
|
||||
import {useState, useEffect} from "react"
|
||||
import {Table, DatePicker, Button, Modal, ConfigProvider} from 'antd'
|
||||
import { UploadOutlined } from '@ant-design/icons'
|
||||
import locale from "antd/lib/locale/ru_RU"
|
||||
import moment from 'moment'
|
||||
import DocumentCreationForm from '../components/modalWindows/DocumentCreationForm'
|
||||
import { FileService } from '../services/api'
|
||||
import notify from '../components/notify'
|
||||
import LoaderPortal from '../components/LoaderPortal'
|
||||
|
||||
const pageSize = 12
|
||||
const {RangePicker} = DatePicker;
|
||||
|
||||
export default function Documents({selectedFileCategory, idWell}) {
|
||||
const [page, setPage] = useState(1)
|
||||
const [range, setRange] = useState([])
|
||||
const [pagination, setPagination] = useState(null)
|
||||
const [files, setFiles] = useState([])
|
||||
const [isModalVisible, setIsModalVisible] = useState(false)
|
||||
const [isTableUpdating, setTableUpdating] = useState(false)
|
||||
|
||||
const [showLoader, setShowLoader] = useState(false)
|
||||
|
||||
const handleFileNameCLick = async (event, row) => {
|
||||
const element = event.target
|
||||
|
||||
if(!element.href.length) {
|
||||
try {
|
||||
setShowLoader(true)
|
||||
|
||||
await fetch(`/api/files/${idWell}/${row.id}`, {
|
||||
headers: {
|
||||
Authorization: 'Bearer ' + localStorage['token']
|
||||
}
|
||||
})
|
||||
.then(async (response) => {
|
||||
const blob = await response.blob();
|
||||
|
||||
let reader = new FileReader();
|
||||
reader.readAsDataURL(blob);
|
||||
reader.onload = function (e) {
|
||||
element.href = e.target.result
|
||||
element.click()
|
||||
};
|
||||
setShowLoader(false)
|
||||
});
|
||||
} catch (error) {
|
||||
notify(`Не удалось скачать файл ${row}`, 'error')
|
||||
console.log(error)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'Документ',
|
||||
key: 'document',
|
||||
dataIndex: 'name',
|
||||
render: (name, row) =>
|
||||
<Button onClick={ev => handleFileNameCLick(ev, row)} download={name}>{name}</Button>
|
||||
},
|
||||
{
|
||||
title: 'Дата загрузки',
|
||||
key: 'uploadDate',
|
||||
dataIndex: 'uploadDate',
|
||||
render: (item) => moment.utc(item).local().format('DD MMM YYYY, HH:mm:ss')
|
||||
},
|
||||
{
|
||||
title: 'Ф.И.О.',
|
||||
key: 'userName',
|
||||
dataIndex: 'userName',
|
||||
}
|
||||
];
|
||||
|
||||
const openModal = () => {
|
||||
setIsModalVisible(true)
|
||||
}
|
||||
|
||||
const closeModal = () => {
|
||||
setIsModalVisible(false)
|
||||
}
|
||||
|
||||
const onChangeRange = (range) => {
|
||||
setRange(range)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const GetDocuments = async () => {
|
||||
setShowLoader(true)
|
||||
|
||||
try {
|
||||
let begin = null
|
||||
let end = null
|
||||
if (range?.length > 1) {
|
||||
begin = range[0].toISOString()
|
||||
end = range[1].toISOString()
|
||||
}
|
||||
|
||||
await FileService.getFilesInfo(
|
||||
`${idWell}`,
|
||||
(page - 1) * pageSize,
|
||||
pageSize,
|
||||
selectedFileCategory,
|
||||
begin,
|
||||
end
|
||||
).then((paginatedFiles) => {
|
||||
setFiles(paginatedFiles?.items.map(f => {
|
||||
return {
|
||||
key: f.id,
|
||||
begin: f.date,
|
||||
...f
|
||||
}
|
||||
}))
|
||||
|
||||
setPagination({
|
||||
total: paginatedFiles?.count,
|
||||
current: Math.floor(paginatedFiles?.skip / pageSize),
|
||||
})
|
||||
|
||||
setTableUpdating(false)
|
||||
setShowLoader(false)
|
||||
}
|
||||
)
|
||||
} catch (ex) {
|
||||
notify(`Не удалось загрузить файлы по скважине "${idWell}"`, 'error')
|
||||
console.log(ex)
|
||||
}
|
||||
}
|
||||
GetDocuments()
|
||||
}, [idWell, range, page, selectedFileCategory, isTableUpdating])
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className='filter-group'>
|
||||
<h3 className='filter-group-heading'>Фильтр документов:</h3>
|
||||
<ConfigProvider locale={locale}>
|
||||
<RangePicker
|
||||
showTime
|
||||
onChange={onChangeRange}
|
||||
/>
|
||||
</ConfigProvider>
|
||||
</div>
|
||||
<LoaderPortal show={showLoader}></LoaderPortal>
|
||||
<div> </div>
|
||||
|
||||
<Button
|
||||
icon={<UploadOutlined />}
|
||||
onClick={openModal}
|
||||
>Загрузить файл</Button>
|
||||
<Modal
|
||||
title="Загрузить файл"
|
||||
centered
|
||||
visible={isModalVisible}
|
||||
onCancel={closeModal}
|
||||
width={500}
|
||||
footer={null}
|
||||
>
|
||||
<div>
|
||||
<DocumentCreationForm
|
||||
selectedFileCategory={selectedFileCategory}
|
||||
closeModalHandler = {() => {
|
||||
setIsModalVisible(false)
|
||||
setTableUpdating(true)
|
||||
}}>
|
||||
</DocumentCreationForm>
|
||||
</div>
|
||||
</Modal>
|
||||
<div> </div>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={files}
|
||||
size={'small'}
|
||||
pagination={{
|
||||
pageSize: pageSize,
|
||||
showSizeChanger: false,
|
||||
total: pagination?.total,
|
||||
current: page,
|
||||
onChange: (page) => setPage(page)
|
||||
}}
|
||||
rowKey={(record) => record.id}
|
||||
/>
|
||||
</div>);
|
||||
}
|
||||
111
src/pages/Documents/DocumentsTemplate.jsx
Normal file
111
src/pages/Documents/DocumentsTemplate.jsx
Normal file
@ -0,0 +1,111 @@
|
||||
import {useState, useEffect} from "react"
|
||||
import {Table, DatePicker, Button, ConfigProvider} from 'antd'
|
||||
import locale from "antd/lib/locale/ru_RU"
|
||||
import moment from 'moment'
|
||||
import { FileService } from '../../services/api'
|
||||
import { updateFromWebApiWrapperAsync, download, makePaginationObject} from '../../components/factory'
|
||||
import UploadFileForm from '../../components/UploadFileForm'
|
||||
import LoaderPortal from '../../components/LoaderPortal'
|
||||
|
||||
const pageSize = 12
|
||||
const {RangePicker} = DatePicker;
|
||||
|
||||
export default function DocumentsTemplate({idCategory, idWell}) {
|
||||
const [page, setPage] = useState(1)
|
||||
const [range, setRange] = useState([])
|
||||
const [pagination, setPagination] = useState(null)
|
||||
const [files, setFiles] = useState([])
|
||||
const [showLoader, setShowLoader] = useState(false)
|
||||
|
||||
const uploadUrl = `/api/well/${idWell}/files/`
|
||||
|
||||
const handleFileNameCLick = async (_, row) => {
|
||||
updateFromWebApiWrapperAsync(async ()=>{
|
||||
await download(`/api/well/${idWell}/files/${row.id}`)
|
||||
},
|
||||
setShowLoader,
|
||||
`Не удалось скачать файл ${row}`)
|
||||
}
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'Документ',
|
||||
key: 'document',
|
||||
dataIndex: 'name',
|
||||
render: (name, row) =>
|
||||
<Button onClick={ev => handleFileNameCLick(ev, row)} download={name}>{name}</Button>
|
||||
},
|
||||
{
|
||||
title: 'Дата загрузки',
|
||||
key: 'uploadDate',
|
||||
dataIndex: 'uploadDate',
|
||||
render: (item) => moment.utc(item).local().format('DD MMM YYYY, HH:mm:ss')
|
||||
},
|
||||
{
|
||||
title: 'Ф.И.О.',
|
||||
key: 'userName',
|
||||
dataIndex: 'userName',
|
||||
}
|
||||
];
|
||||
|
||||
const addKeysAndUpdateFiles = (items) =>{
|
||||
const mappedFiles = items?.map(fileInfo => ({key: fileInfo.id, begin: fileInfo.date, ...fileInfo}))
|
||||
setFiles(mappedFiles??[])
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
let begin = null
|
||||
let end = null
|
||||
if (range?.length > 1) {
|
||||
begin = range[0].toISOString()
|
||||
end = range[1].toISOString()
|
||||
}
|
||||
|
||||
updateFromWebApiWrapperAsync(
|
||||
async ()=>{
|
||||
const paginatedFiles = await FileService.getFilesInfo(
|
||||
`${idWell}`,
|
||||
(page - 1) * pageSize,
|
||||
pageSize,
|
||||
idCategory,
|
||||
begin,
|
||||
end)
|
||||
if(!paginatedFiles)
|
||||
return
|
||||
addKeysAndUpdateFiles(paginatedFiles?.items)
|
||||
|
||||
const newPagination = makePaginationObject(paginatedFiles)
|
||||
setPagination(newPagination)
|
||||
},
|
||||
setShowLoader,
|
||||
`Не удалось загрузить файлы по скважине "${idWell}"`)
|
||||
}, [idWell, range, page, idCategory])
|
||||
|
||||
return (
|
||||
<LoaderPortal show={showLoader}>
|
||||
<UploadFileForm
|
||||
url={uploadUrl}
|
||||
onUploadStart={()=>setShowLoader(true)}
|
||||
onUploadComplete={()=>setShowLoader(false)}
|
||||
/>
|
||||
<div className='filter-group'>
|
||||
<h3 className='filter-group-heading'>Фильтр документов:</h3>
|
||||
<ConfigProvider locale={locale}>
|
||||
<RangePicker
|
||||
showTime
|
||||
onChange={setRange}
|
||||
/>
|
||||
</ConfigProvider>
|
||||
</div>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={files}
|
||||
size={'small'}
|
||||
pagination={{
|
||||
...pagination,
|
||||
showSizeChanger: false,
|
||||
onChange: (page) => setPage(page)}}
|
||||
rowKey={(record) => record.id}
|
||||
/>
|
||||
</LoaderPortal>);
|
||||
}
|
||||
27
src/pages/Documents/index.jsx
Normal file
27
src/pages/Documents/index.jsx
Normal file
@ -0,0 +1,27 @@
|
||||
import {Layout, Menu} from "antd";
|
||||
import {Switch, useParams} from "react-router-dom";
|
||||
import {makeMenuItems, makeRouteItems} from './menuItems'
|
||||
|
||||
const { Content } = Layout
|
||||
|
||||
export default function MenuDocuments({idWell}) {
|
||||
let {category} = useParams()
|
||||
const rootPath = `/well/${idWell}`
|
||||
|
||||
return(<>
|
||||
<Menu
|
||||
mode="horizontal"
|
||||
selectable={true}
|
||||
className="well_menu"
|
||||
selectedKeys={[category]}>
|
||||
{makeMenuItems('documentsPageMenu', rootPath)}
|
||||
</Menu>
|
||||
<Layout>
|
||||
<Content className="site-layout-background">
|
||||
<Switch>
|
||||
{makeRouteItems('documentsPageMenu', `${rootPath}`, idWell)}
|
||||
</Switch>
|
||||
</Content>
|
||||
</Layout>
|
||||
</>)
|
||||
}
|
||||
58
src/pages/Documents/menuItems.jsx
Normal file
58
src/pages/Documents/menuItems.jsx
Normal file
@ -0,0 +1,58 @@
|
||||
import { Menu } from "antd";
|
||||
import { FolderOutlined } from "@ant-design/icons";
|
||||
import { Link, Route} from "react-router-dom";
|
||||
import DocumentsTemplate from './DocumentsTemplate'
|
||||
|
||||
export const documentCategories = [
|
||||
{id:1, key:'fluidService', title:'Растворный сервис'},
|
||||
{id:2, key:'cementing', title:'Цементирование'},
|
||||
{id:3, key:'nnb', title:'ННБ'},
|
||||
{id:4, key:'gti', title:'ГТИ'},
|
||||
{id:5, key:'documentsForWell', title:'Документы по скважине'},
|
||||
{id:6, key:'supervisor', title:'Супервайзер'},
|
||||
{id:7, key:'master', title:'Мастер'},
|
||||
]
|
||||
|
||||
const makeMenuItem = (keyPrefix, keyValue, rootPath, title, other) => (
|
||||
<Menu.Item className="ant-menu-item"
|
||||
key={`${keyPrefix}/${keyValue}/menuItem`}
|
||||
{...other}>
|
||||
<Link to={{pathname: `${rootPath}/${keyValue}`}}>{title}</Link>
|
||||
</Menu.Item>)
|
||||
|
||||
const makeRouteItem = (keyPrefix, keyValue, rootPath, other) => (
|
||||
<Route
|
||||
path={`${rootPath}/${keyValue}`}
|
||||
key={`${keyPrefix}/${keyValue}/routeItem`}>
|
||||
<DocumentsTemplate {...other}/>
|
||||
</Route>)
|
||||
|
||||
const formatRoutePath = (rootPath) =>{
|
||||
let root = rootPath.endsWith('/')
|
||||
? rootPath.slice(0,-1)
|
||||
: rootPath
|
||||
|
||||
root = root.endsWith('/document')
|
||||
? root
|
||||
: `${root}/document`
|
||||
|
||||
return root
|
||||
}
|
||||
|
||||
const getCategoriesByUserRole = (role) => documentCategories
|
||||
.filter(cat => !cat.roles || cat.roles.includes('*') || cat.roles.includes(role))
|
||||
|
||||
export const makeMenuItems = (keyPrefix, rootPath) => {
|
||||
const root = formatRoutePath(rootPath)
|
||||
const categories = getCategoriesByUserRole(localStorage['roleName'])
|
||||
return categories.map(category =>
|
||||
makeMenuItem(keyPrefix, category.key, root, category.title, {icon:<FolderOutlined/>}))
|
||||
}
|
||||
|
||||
export const makeRouteItems = (keyPrefix, rootPath, idWell) => {
|
||||
const root = formatRoutePath(rootPath)
|
||||
const categories = getCategoriesByUserRole(localStorage['roleName'])
|
||||
const routes = categories.map(category =>
|
||||
makeRouteItem(keyPrefix, category.key, root, {idCategory: category.id, idWell: idWell}))
|
||||
return routes;
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
import Documents from "./Documents"
|
||||
|
||||
export default function FluidService({selectedFileCategory}) {
|
||||
|
||||
return(
|
||||
<Documents selectedFileCategory={selectedFileCategory} />
|
||||
)
|
||||
}
|
||||
@ -1,87 +0,0 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import {Layout, Menu} from "antd";
|
||||
import {FolderOutlined} from "@ant-design/icons";
|
||||
import {Link, Route, Switch, useLocation} from "react-router-dom";
|
||||
import Documents from "./Documents";
|
||||
import LastData from './LastData'
|
||||
|
||||
const { Content } = Layout
|
||||
|
||||
export default function MenuDocuments({idWell}) {
|
||||
let currentPath = useLocation().pathname
|
||||
|
||||
const rootPath = `/well/${idWell}`
|
||||
|
||||
const [selectedElement, setSelectedElement] = useState('fluidService')
|
||||
|
||||
useEffect(() => {
|
||||
let pathLastElement = currentPath.split('/').pop()
|
||||
setSelectedElement(pathLastElement)
|
||||
}, [currentPath])
|
||||
|
||||
return(
|
||||
<>
|
||||
<Menu
|
||||
mode="horizontal"
|
||||
selectable={true}
|
||||
className="well_menu"
|
||||
selectedKeys={[selectedElement]}
|
||||
>
|
||||
<Menu.Item key="fluidService" icon={<FolderOutlined/>}>
|
||||
<Link to={{pathname: `${rootPath}/documents/fluidService`}}>Растворный сервис</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="cementing" icon={<FolderOutlined/>}>
|
||||
<Link to={{pathname: `${rootPath}/documents/cementing`}}>Цементирование</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="nnb" icon={<FolderOutlined/>}>
|
||||
<Link to={{pathname: `${rootPath}/documents/nnb`}}>ННБ</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="gti" icon={<FolderOutlined/>}>
|
||||
<Link to={{pathname: `${rootPath}/documents/gti`}}>ГТИ</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="documentsForWell" icon={<FolderOutlined/>}>
|
||||
<Link to={{pathname: `${rootPath}/documents/documentsForWell`}}>Документы по скважине</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="supervisor" icon={<FolderOutlined/>}>
|
||||
<Link to={{pathname: `${rootPath}/documents/supervisor`}}>Супервайзер</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="master" icon={<FolderOutlined/>}>
|
||||
<Link to={{pathname: `${rootPath}/documents/master`}}>Мастер</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="lastData" icon={<FolderOutlined/>}>
|
||||
<Link to={{pathname: `${rootPath}/documents/lastData`}}>Последние данные</Link>
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
|
||||
<Layout>
|
||||
<Content className="site-layout-background">
|
||||
<Switch>
|
||||
<Route path="/well/:id/documents/fluidService">
|
||||
<Documents selectedFileCategory={1}/>
|
||||
</Route>
|
||||
<Route path="/well/:id/documents/cementing">
|
||||
<Documents selectedFileCategory={2}/>
|
||||
</Route>
|
||||
<Route path="/well/:id/documents/nnb">
|
||||
<Documents selectedFileCategory={3}/>
|
||||
</Route>
|
||||
<Route path="/well/:id/documents/gti">
|
||||
<Documents selectedFileCategory={4}/>
|
||||
</Route>
|
||||
<Route path="/well/:id/documents/documentsForWell">
|
||||
<Documents selectedFileCategory={5}/>
|
||||
</Route>
|
||||
<Route path="/well/:id/documents/supervisor">
|
||||
<Documents selectedFileCategory={6}/>
|
||||
</Route>
|
||||
<Route path="/well/:id/documents/master">
|
||||
<Documents selectedFileCategory={7}/>
|
||||
</Route>
|
||||
<Route path="/well/:id/documents/lastData">
|
||||
<LastData/>
|
||||
</Route>
|
||||
</Switch>
|
||||
</Content>
|
||||
</Layout>
|
||||
</>)
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
import {Row, Col} from 'antd'
|
||||
import Documents from '../Documents'
|
||||
import Documents from '../Documents/DocumentsTemplate'
|
||||
import '../../styles/equipment_details.css'
|
||||
|
||||
export default function EquipmentDetails({id, equipmentTimers, equipmentSensors}) {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import {Display} from '../../components/Display'
|
||||
import RigMnemo from '../../components/RigMnemo'
|
||||
import RigMnemo from './RigMnemo'
|
||||
|
||||
const params = [
|
||||
{label:'Рот., об/мин', accessorName:'rotorSpeed', isArrowVisible:true},
|
||||
|
||||
@ -1,124 +1,116 @@
|
||||
import {Layout, Menu} from "antd";
|
||||
import {FolderOutlined, FundViewOutlined} from "@ant-design/icons";
|
||||
import {Link, Redirect, Route, Switch, useParams} from "react-router-dom";
|
||||
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 Report from "../pages/Report";
|
||||
import Archive from "../pages/Archive";
|
||||
import Analysis from "../pages/Analysis";
|
||||
import WellAnalysis from "../pages/WellAnalysis";
|
||||
import MenuDocuments from "./MenuDocuments";
|
||||
import WellStat from "./WellStat"
|
||||
import Smbo from "./Smbo"
|
||||
import Documents from "../pages/Documents";
|
||||
import LastData from '../pages/LastData'
|
||||
import { makeMenuItems } from "./Documents/menuItems";
|
||||
import WellStat from "./WellStat";
|
||||
import Smbo from "./Smbo";
|
||||
|
||||
const { Content } = Layout
|
||||
const { Content } = Layout;
|
||||
|
||||
export default function Well() {
|
||||
let { idWell } = useParams()
|
||||
const rootPath = `/well/${idWell}`
|
||||
let { idWell } = useParams();
|
||||
const rootPath = `/well/${idWell}`;
|
||||
|
||||
const {SubMenu} = Menu
|
||||
const { SubMenu } = Menu;
|
||||
|
||||
return (<>
|
||||
<Layout>
|
||||
<Menu
|
||||
mode="horizontal"
|
||||
selectable={true}
|
||||
className="well_menu"
|
||||
>
|
||||
<Menu.Item key="1" icon={<FundViewOutlined/>}>
|
||||
<Link to={{pathname: `${rootPath}/telemetry`}}>Мониторинг</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="2" icon={<FolderOutlined/>}>
|
||||
<Link to={{pathname: `${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>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="5" icon={<FolderOutlined/>}>
|
||||
<Link to={{pathname: `${rootPath}/wellAnalysis`}}>Операции по скважине</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>
|
||||
</Menu.Item>
|
||||
<SubMenu
|
||||
return (
|
||||
<>
|
||||
<Layout>
|
||||
<Menu mode="horizontal" selectable={true} className="well_menu">
|
||||
<Menu.Item key="1" icon={<FundViewOutlined />}>
|
||||
<Link to={{ pathname: `${rootPath}/telemetry` }}>Мониторинг</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="2" icon={<FolderOutlined />}>
|
||||
<Link to={{ pathname: `${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>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="5" icon={<FolderOutlined />}>
|
||||
<Link to={{ pathname: `${rootPath}/wellAnalysis` }}>
|
||||
Операции по скважине
|
||||
</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>
|
||||
</Menu.Item>
|
||||
<SubMenu
|
||||
key="documentsSub"
|
||||
title={<Link to={{pathname: `${rootPath}/documents/fluidService`}} className="linkDocuments">Документы</Link>}
|
||||
icon={<FolderOutlined/>}
|
||||
title={
|
||||
<Link
|
||||
to={{ pathname: `${rootPath}/document/fluidService` }}
|
||||
className="linkDocuments"
|
||||
>
|
||||
Документы
|
||||
</Link>
|
||||
}
|
||||
icon={<FolderOutlined />}
|
||||
selectable={true}
|
||||
>
|
||||
<Menu.Item key="documentsSub1" icon={<FolderOutlined/>}>
|
||||
<Link to={{pathname: `${rootPath}/documents/fluidService`}}>Растворный сервис</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="documentsSub1.1" icon={<FolderOutlined/>}>
|
||||
<Link to={{pathname: `${rootPath}/documents/cementing`}}>Цементирование</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="documentsSub1.2" icon={<FolderOutlined/>}>
|
||||
<Link to={{pathname: `${rootPath}/documents/nnb`}}>ННБ</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="documentsSub1.3" icon={<FolderOutlined/>}>
|
||||
<Link to={{pathname: `${rootPath}/documents/gti`}}>ГТИ</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="documentsSub1.4" icon={<FolderOutlined/>}>
|
||||
<Link to={{pathname: `${rootPath}/documents/documentsForWell`}}>Документы по скважине</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="documentsSub1.5" icon={<FolderOutlined/>}>
|
||||
<Link to={{pathname: `${rootPath}/documents/supervisor`}}>Супервайзер</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="documentsSub1.6" icon={<FolderOutlined/>}>
|
||||
<Link to={{pathname: `${rootPath}/documents/master`}}>Мастер</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="documentsSub1.7" icon={<FolderOutlined/>}>
|
||||
<Link to={{pathname: `${rootPath}/documents/lastData`}}>Последние данные</Link>
|
||||
</Menu.Item>
|
||||
{makeMenuItems('documentsSubMenu', `${rootPath}/document`)}
|
||||
</SubMenu>
|
||||
<Menu.Item key="8" icon={<FolderOutlined/>}>
|
||||
<Link to={{pathname: `${rootPath}/smbo`}}>СМБО</Link>
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
<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>
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
|
||||
<Layout>
|
||||
<Content className="site-layout-background">
|
||||
<Switch>
|
||||
<Route path="/well/:id/telemetry">
|
||||
<TelemetryView idWell={idWell}/>
|
||||
</Route>
|
||||
<Route path="/well/:id/message">
|
||||
<Messages idWell={idWell}/>
|
||||
</Route>
|
||||
<Route path="/well/:id/report">
|
||||
<Report idWell={idWell}/>
|
||||
</Route>
|
||||
<Route path="/well/:id/analysis">
|
||||
<Analysis idWell={idWell}/>
|
||||
</Route>
|
||||
<Route path="/well/:id/stat">
|
||||
<WellStat idWell={idWell}/>
|
||||
</Route>
|
||||
<Route path="/well/:id/wellAnalysis">
|
||||
<WellAnalysis idWell={idWell}/>
|
||||
</Route>
|
||||
<Route path="/well/:id/archive">
|
||||
<Archive idWell={idWell}/>
|
||||
</Route>
|
||||
<Route path="/well/:id/documents">
|
||||
<MenuDocuments idWell={idWell}/>
|
||||
</Route>
|
||||
<Route path="/well/:id/smbo">
|
||||
<Smbo idWell={idWell}/>
|
||||
</Route>
|
||||
<Route path="/">
|
||||
<Redirect to={{pathname: `${rootPath}/telemetry`}}/>
|
||||
</Route>
|
||||
</Switch>
|
||||
</Content>
|
||||
<Layout>
|
||||
<Content className="site-layout-background">
|
||||
<Switch>
|
||||
<Route path="/well/:idWell/telemetry">
|
||||
<TelemetryView idWell={idWell} />
|
||||
</Route>
|
||||
<Route path="/well/:idWell/message">
|
||||
<Messages idWell={idWell} />
|
||||
</Route>
|
||||
<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>
|
||||
<Route path="/well/:idWell/archive">
|
||||
<Archive idWell={idWell} />
|
||||
</Route>
|
||||
<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` }} />
|
||||
</Route>
|
||||
</Switch>
|
||||
</Content>
|
||||
</Layout>
|
||||
</Layout>
|
||||
</Layout>
|
||||
</>)
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user