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 {Row, Col} from 'antd'
|
||||||
import Documents from '../Documents'
|
import Documents from '../Documents/DocumentsTemplate'
|
||||||
import '../../styles/equipment_details.css'
|
import '../../styles/equipment_details.css'
|
||||||
|
|
||||||
export default function EquipmentDetails({id, equipmentTimers, equipmentSensors}) {
|
export default function EquipmentDetails({id, equipmentTimers, equipmentSensors}) {
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
import {Display} from '../../components/Display'
|
import {Display} from '../../components/Display'
|
||||||
import RigMnemo from '../../components/RigMnemo'
|
import RigMnemo from './RigMnemo'
|
||||||
|
|
||||||
const params = [
|
const params = [
|
||||||
{label:'Рот., об/мин', accessorName:'rotorSpeed', isArrowVisible:true},
|
{label:'Рот., об/мин', accessorName:'rotorSpeed', isArrowVisible:true},
|
||||||
|
|||||||
@ -1,124 +1,116 @@
|
|||||||
import {Layout, Menu} from "antd";
|
import { Layout, Menu } from "antd";
|
||||||
import {FolderOutlined, FundViewOutlined} from "@ant-design/icons";
|
import { FolderOutlined, FundViewOutlined } from "@ant-design/icons";
|
||||||
import {Link, Redirect, Route, Switch, useParams} from "react-router-dom";
|
import { Link, Redirect, Route, Switch, useParams } from "react-router-dom";
|
||||||
import TelemetryView from "./TelemetryView";
|
import TelemetryView from "./TelemetryView";
|
||||||
import Messages from "../pages/Messages";
|
import Messages from "../pages/Messages";
|
||||||
import Report from "../pages/Report";
|
import Report from "../pages/Report";
|
||||||
import Archive from "../pages/Archive";
|
import Archive from "../pages/Archive";
|
||||||
import Analysis from "../pages/Analysis";
|
import Analysis from "../pages/Analysis";
|
||||||
import WellAnalysis from "../pages/WellAnalysis";
|
import WellAnalysis from "../pages/WellAnalysis";
|
||||||
import MenuDocuments from "./MenuDocuments";
|
import Documents from "../pages/Documents";
|
||||||
import WellStat from "./WellStat"
|
import LastData from '../pages/LastData'
|
||||||
import Smbo from "./Smbo"
|
import { makeMenuItems } from "./Documents/menuItems";
|
||||||
|
import WellStat from "./WellStat";
|
||||||
|
import Smbo from "./Smbo";
|
||||||
|
|
||||||
const { Content } = Layout
|
const { Content } = Layout;
|
||||||
|
|
||||||
export default function Well() {
|
export default function Well() {
|
||||||
let { idWell } = useParams()
|
let { idWell } = useParams();
|
||||||
const rootPath = `/well/${idWell}`
|
const rootPath = `/well/${idWell}`;
|
||||||
|
|
||||||
const {SubMenu} = Menu
|
const { SubMenu } = Menu;
|
||||||
|
|
||||||
return (<>
|
return (
|
||||||
<Layout>
|
<>
|
||||||
<Menu
|
<Layout>
|
||||||
mode="horizontal"
|
<Menu mode="horizontal" selectable={true} className="well_menu">
|
||||||
selectable={true}
|
<Menu.Item key="1" icon={<FundViewOutlined />}>
|
||||||
className="well_menu"
|
<Link to={{ pathname: `${rootPath}/telemetry` }}>Мониторинг</Link>
|
||||||
>
|
</Menu.Item>
|
||||||
<Menu.Item key="1" icon={<FundViewOutlined/>}>
|
<Menu.Item key="2" icon={<FolderOutlined />}>
|
||||||
<Link to={{pathname: `${rootPath}/telemetry`}}>Мониторинг</Link>
|
<Link to={{ pathname: `${rootPath}/message` }}>Сообщения</Link>
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
<Menu.Item key="2" icon={<FolderOutlined/>}>
|
<Menu.Item key="3" icon={<FolderOutlined />}>
|
||||||
<Link to={{pathname: `${rootPath}/message`}}>Сообщения</Link>
|
<Link to={{ pathname: `${rootPath}/report` }}>Рапорт</Link>
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
<Menu.Item key="3" icon={<FolderOutlined/>}>
|
<Menu.Item key="4" icon={<FolderOutlined />}>
|
||||||
<Link to={{pathname: `${rootPath}/report`}}>Рапорт</Link>
|
<Link to={{ pathname: `${rootPath}/analysis` }}>Анализ</Link>
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
<Menu.Item key="4" icon={<FolderOutlined/>}>
|
<Menu.Item key="5" icon={<FolderOutlined />}>
|
||||||
<Link to={{pathname: `${rootPath}/analysis`}}>Анализ</Link>
|
<Link to={{ pathname: `${rootPath}/wellAnalysis` }}>
|
||||||
</Menu.Item>
|
Операции по скважине
|
||||||
<Menu.Item key="5" icon={<FolderOutlined/>}>
|
</Link>
|
||||||
<Link to={{pathname: `${rootPath}/wellAnalysis`}}>Операции по скважине</Link>
|
</Menu.Item>
|
||||||
</Menu.Item>
|
<Menu.Item key="6" icon={<FolderOutlined />}>
|
||||||
<Menu.Item key="6" icon={<FolderOutlined/>}>
|
<Link to="stat">Статистика</Link>
|
||||||
<Link to='stat'>Статистика</Link>
|
</Menu.Item>
|
||||||
</Menu.Item>
|
<Menu.Item key="7" icon={<FolderOutlined />}>
|
||||||
<Menu.Item key="7" icon={<FolderOutlined/>}>
|
<Link to={{ pathname: `${rootPath}/archive` }}>Архив</Link>
|
||||||
<Link to={{pathname: `${rootPath}/archive`}}>Архив</Link>
|
</Menu.Item>
|
||||||
</Menu.Item>
|
<SubMenu
|
||||||
<SubMenu
|
|
||||||
key="documentsSub"
|
key="documentsSub"
|
||||||
title={<Link to={{pathname: `${rootPath}/documents/fluidService`}} className="linkDocuments">Документы</Link>}
|
title={
|
||||||
icon={<FolderOutlined/>}
|
<Link
|
||||||
|
to={{ pathname: `${rootPath}/document/fluidService` }}
|
||||||
|
className="linkDocuments"
|
||||||
|
>
|
||||||
|
Документы
|
||||||
|
</Link>
|
||||||
|
}
|
||||||
|
icon={<FolderOutlined />}
|
||||||
selectable={true}
|
selectable={true}
|
||||||
>
|
>
|
||||||
<Menu.Item key="documentsSub1" icon={<FolderOutlined/>}>
|
{makeMenuItems('documentsSubMenu', `${rootPath}/document`)}
|
||||||
<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>
|
|
||||||
</SubMenu>
|
</SubMenu>
|
||||||
<Menu.Item key="8" icon={<FolderOutlined/>}>
|
<Menu.Item key="8" icon={<FolderOutlined />}>
|
||||||
<Link to={{pathname: `${rootPath}/smbo`}}>СМБО</Link>
|
<Link to={{ pathname: `${rootPath}/smbo` }}>СМБО</Link>
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
</Menu>
|
<Menu.Item key="9" icon={<FolderOutlined />}>
|
||||||
|
<Link to={{ pathname: `${rootPath}/lastData` }}>Последние данные</Link>
|
||||||
|
</Menu.Item>
|
||||||
|
</Menu>
|
||||||
|
|
||||||
<Layout>
|
<Layout>
|
||||||
<Content className="site-layout-background">
|
<Content className="site-layout-background">
|
||||||
<Switch>
|
<Switch>
|
||||||
<Route path="/well/:id/telemetry">
|
<Route path="/well/:idWell/telemetry">
|
||||||
<TelemetryView idWell={idWell}/>
|
<TelemetryView idWell={idWell} />
|
||||||
</Route>
|
</Route>
|
||||||
<Route path="/well/:id/message">
|
<Route path="/well/:idWell/message">
|
||||||
<Messages idWell={idWell}/>
|
<Messages idWell={idWell} />
|
||||||
</Route>
|
</Route>
|
||||||
<Route path="/well/:id/report">
|
<Route path="/well/:idWell/report">
|
||||||
<Report idWell={idWell}/>
|
<Report idWell={idWell} />
|
||||||
</Route>
|
</Route>
|
||||||
<Route path="/well/:id/analysis">
|
<Route path="/well/:idWell/analysis">
|
||||||
<Analysis idWell={idWell}/>
|
<Analysis idWell={idWell} />
|
||||||
</Route>
|
</Route>
|
||||||
<Route path="/well/:id/stat">
|
<Route path="/well/:idWell/stat">
|
||||||
<WellStat idWell={idWell}/>
|
<WellStat idWell={idWell} />
|
||||||
</Route>
|
</Route>
|
||||||
<Route path="/well/:id/wellAnalysis">
|
<Route path="/well/:idWell/wellAnalysis">
|
||||||
<WellAnalysis idWell={idWell}/>
|
<WellAnalysis idWell={idWell} />
|
||||||
</Route>
|
</Route>
|
||||||
<Route path="/well/:id/archive">
|
<Route path="/well/:idWell/archive">
|
||||||
<Archive idWell={idWell}/>
|
<Archive idWell={idWell} />
|
||||||
</Route>
|
</Route>
|
||||||
<Route path="/well/:id/documents">
|
<Route path="/well/:idWell/document/:category">
|
||||||
<MenuDocuments idWell={idWell}/>
|
<Documents idWell={idWell} />
|
||||||
</Route>
|
</Route>
|
||||||
<Route path="/well/:id/smbo">
|
<Route path="/well/:idWell/smbo">
|
||||||
<Smbo idWell={idWell}/>
|
<Smbo idWell={idWell} />
|
||||||
</Route>
|
</Route>
|
||||||
<Route path="/">
|
<Route path="/well/:id/lastData">
|
||||||
<Redirect to={{pathname: `${rootPath}/telemetry`}}/>
|
<LastData/>
|
||||||
</Route>
|
</Route>
|
||||||
</Switch>
|
<Route path="/">
|
||||||
</Content>
|
<Redirect to={{ pathname: `${rootPath}/telemetry` }} />
|
||||||
|
</Route>
|
||||||
|
</Switch>
|
||||||
|
</Content>
|
||||||
|
</Layout>
|
||||||
</Layout>
|
</Layout>
|
||||||
</Layout>
|
</>
|
||||||
</>)
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user