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

Добавлена базовая версию суточного рапорта

Browse Source
This commit is contained in:
goodmice 2022-04-18 17:36:57 +05:00
parent 6d833c75c5
commit e9eaa96388
8 changed files with 311 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

155
src/pages/Reports/DailyReport/ReportEditor.jsx Normal file
View File

@ -0,0 +1,155 @@
import { useForm } from 'antd/lib/form/Form'
import { ConfigProvider, Descriptions, Divider, Form, Input, InputNumber, Modal, Select, Space, Table, Tag } from 'antd'
import { memo, useCallback, useEffect, useMemo, useState } from 'react'
import LoaderPortal from '@components/LoaderPortal'
import { invokeWebApiWrapperAsync } from '@components/factory'
import { DatePickerWrapper, makeColumn, makeGroupColumn } from '@components/Table'
import { formatDate } from '@utils'
const { Item } = Form
const { Summary } = Table
const table1Columns = [
makeGroupColumn('Отчётный период', [
makeColumn('От (дата, время)', 'dateStart', { width: 200, render: (date) => formatDate(date) ?? '---' }),
]),
makeGroupColumn('Забой за отчётный период, м', [
makeColumn('От', 'depthStart', { width: 200, render: () => (
<Item name={'wellDepthIntervalStartDate'} style={{ margin: 0 }}>
<InputNumber style={{ width: '100%' }} />
</Item>
)}),
makeColumn('До', 'depthEnd', { width: 200, render: () => (
<Item name={'wellDepthIntervalEndDate'} style={{ margin: 0 }}>
<InputNumber style={{ width: '100%' }} />
</Item>
)}),
])
]
const table2Columns = [
makeColumn('Работа модулей САУБ', 'label', { width: 500 }),
makeColumn('Часов:', 'hours', { width: 200, render: (data) => (
<Item name={data.name} style={{ margin: 0 }}>
<InputNumber style={{ width: '100%' }} />
</Item>
)}),
makeColumn('Метров:', 'meters', { width: 200, render: (data) => (
<Item name={data.name} style={{ margin: 0 }}>
<InputNumber style={{ width: '100%' }} />
</Item>
)}),
]
const table2Data = [
{ label: 'АПД (автоматическая подача долота), ч/м:', hours: 'workTimeSaub', meters: 'drilledMetersSaub' },
{ label: 'Спин Мастер (осцилляция), ч/м:', hours: 'workTimeSpinMaster', meters: 'drilledMetersSpinMaster' },
{ label: 'Торк Мастер (демпфирование), ч/м:', hours: 'workTimeTorkMaster', meters: 'drilledMetersTorkMaster' },
]
const table2Summary = () => (
<Summary.Row>
<Summary.Cell>МСЕ, колличество запусков, раз:</Summary.Cell>
<Summary.Cell colSpan={2}>
<Item name={'countLaunchesMSE'} style={{ margin: 0 }}>
<InputNumber style={{ width: '100%' }} />
</Item>
</Summary.Cell>
</Summary.Row>
)
export const ReportEditor = memo(({ visible, data, onDone, onCancel }) => {
const [form] = useForm()
const [isInvalid, setIsInvalid] = useState(false)
const [isLoading, setIsLoading] = useState(false)
useEffect(() => form.setFieldsValue(data), [data])
const onFormChange = useCallback(async () => await form.validateFields()
.then(() => setIsInvalid(false))
.catch(() => setIsInvalid(true))
, [form])
const onFormFinish = useCallback((data) => invokeWebApiWrapperAsync(
async () => {
onDone?.(data)
},
setIsLoading,
'Не удалось сохранить суточный рапорт',
'Сохранение суточного рапорта',
), [onDone])
const table1Data = useMemo(() => [{ dateStart: form.getFieldValue('reportDate') }], [form])
return (
<Modal
centered
width={1200}
visible={visible}
onCancel={onCancel}
okText={'Сохранить'}
title={data ? `Суточная сводка бурения скважины № ${data.wellName} куст № ${data.clusterName}`: 'Новая суточная сводка бурения'}
onOk={form.submit}
okButtonProps={{
disabled: isInvalid,
loading: isLoading,
}}
>
<LoaderPortal show={isLoading}>
<Form
form={form}
onFinish={onFormFinish}
onChange={onFormChange}
>
<Item name={'reportDate'} label={'Дата рапорта'} rules={[{ required: true }]}>
<DatePickerWrapper showTime={false} disabled={!!data}/>
</Item>
<Divider />
<p>Суточная сводка бурения скважины № {data?.wellName} куст № {data?.clusterName}</p>
<Item name={'customer'} label={'Заказчик'}><Input /></Item>
<Item name={'contractor'} label={'Подрядчик'}><Input /></Item>
<Table
bordered
size={'small'}
columns={table1Columns}
dataSource={table1Data}
pagination={false}
style={{ marginBottom: '15px' }}
/>
<Item label={'Бурильщик 1 смена'} name={'firstDriller'}><Input /></Item>
<Item label={'Бурильщик 2 смена'} name={'firstDriller'}><Input /></Item>
<Table
bordered
size={'small'}
columns={table2Columns}
dataSource={table2Data}
summary={table2Summary}
pagination={false}
style={{ marginBottom: '15px' }}
/>
<Item name={'bhaDescription'}>
<Input.TextArea rows={4} />
</Item>
<Descriptions column={1} size={'small'} bordered>
<Descriptions.Item label={'Бурение в роторе:'}>
<Item name={'rotaryDrillingModes'} style={{ margin: 0 }}>
<Select mode={'tags'} style={{ width: '100%' }} />
</Item>
</Descriptions.Item>
<Descriptions.Item label={'Бурение в слайде:'}>
<Item name={'slideDrillingModes'} style={{ margin: 0 }}>
<Select mode={'tags'} style={{ width: '100%' }} />
</Item>
</Descriptions.Item>
</Descriptions>
</Form>
</LoaderPortal>
</Modal>
)
})
export default ReportEditor

97
src/pages/Reports/DailyReport/index.jsx Normal file
View File

@ -0,0 +1,97 @@
import moment from 'moment'
import { Button } from 'antd'
import { memo, useCallback, useEffect, useMemo, useState } from 'react'
import { FileExcelOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons'
import LoaderPortal from '@components/LoaderPortal'
import DateRangeWrapper from '@components/Table/DateRangeWrapper'
import { Table, makeDateColumn, makeColumn } from '@components/Table'
import { download, invokeWebApiWrapperAsync } from '@components/factory'
import { arrayOrDefault } from '@utils'
import ReportEditor from './ReportEditor'
export const DailyReport = memo(({ idWell }) => {
const [data, setData] = useState([])
const [isLoading, setIsLoading] = useState(false)
const [searchDate, setSearchDate] = useState(null)
const [selectedReport, setSelectedReport] = useState(null)
const [isEditorVisible, setIsEditorVisible] = useState(true)
useEffect(() => invokeWebApiWrapperAsync(
async () => {
const data = [{ date: '2022-10-01' }] // arrayOrDefault(await DailyreportService.getData(idWell))
setData(data)
},
setIsLoading,
'Не удалось загрузить список суточных рапортов',
'Получение списка суточных рапортов',
), [idWell])
const columns = useMemo(() => [
makeDateColumn('Дата', 'date', undefined, undefined, { width: 300 }),
makeColumn('', '', { width: 200, render: (_, report, idx) => (
<>
<Button
type={'link'}
icon={<FileExcelOutlined />}
onClick={async () => await download(`/api/daily_report/${report.id}`)}
>
Скачать XLSX
</Button>
<Button
type={'link'}
icon={<EditOutlined />}
onClick={() => {
setSelectedReport(report)
setIsEditorVisible(true)
}}
>
Редактировать
</Button>
</>
)}),
], [])
const filteredData = useMemo(() => {
if (!searchDate) return data
return data.filter((row) => moment(row.date).isBetween(...searchDate))
}, [data, searchDate])
return (
<>
<LoaderPortal show={isLoading}>
<div className={'w-100 mt-20px mb-20px d-flex'} style={{ justifyContent: 'space-between' }}>
<div>
<div>
<div>Диапозон дат отчёта</div>
<DateRangeWrapper onCalendarChange={setSearchDate} />
</div>
</div>
<div style={{ display: 'flex', alignItems: 'end' }}>
<Button
icon={<PlusOutlined />}
onClick={() => {
setSelectedReport(null)
setIsEditorVisible(true)
}}
/>
</div>
</div>
<Table
bordered
size={'small'}
columns={columns}
dataSource={filteredData}
/>
</LoaderPortal>
<ReportEditor
data={selectedReport}
visible={isEditorVisible}
onCancel={() => setIsEditorVisible(false)}
/>
</>
)
})
export default DailyReport

0
src/pages/Report/ReportCreationNotify.jsx → src/pages/Reports/DiagramReport/ReportCreationNotify.jsx Executable file → Normal file
View File

4
src/pages/Report/Reports.jsx → src/pages/Reports/DiagramReport/Reports.jsx Executable file → Normal file
View File

@ -2,11 +2,11 @@ import { Button, Tooltip } from 'antd'
import { useState, useEffect, memo } from 'react'
import { FilePdfOutlined, FileTextOutlined } from '@ant-design/icons'
import { ReportService } from '@api'
import { formatDate, periodToString } from '@utils'
import LoaderPortal from '@components/LoaderPortal'
import { Table, makeDateSorter, makeNumericSorter } from '@components/Table'
import { invokeWebApiWrapperAsync, downloadFile } from '@components/factory'
import { formatDate, periodToString } from '@utils'
import { ReportService } from '@api'
const imgPaths = {
'.pdf': <FilePdfOutlined/>,

10
src/pages/Report/index.jsx → src/pages/Reports/DiagramReport/index.jsx Executable file → Normal file
View File

@ -3,11 +3,11 @@ import moment from 'moment'
import { useState, useEffect, memo, useCallback } from 'react'
import { Radio, Button, Select, notification } from 'antd'
import { ReportService } from '@api'
import { Subscribe } from '@services/signalr'
import { LoaderPortal } from '@components/LoaderPortal'
import { invokeWebApiWrapperAsync } from '@components/factory'
import { DateRangeWrapper } from 'components/Table/DateRangeWrapper'
import { DateRangeWrapper } from '@components/Table/DateRangeWrapper'
import { Subscribe } from '@services/signalr'
import { ReportService } from '@api'
import { Reports } from './Reports'
import { ReportCreationNotify } from './ReportCreationNotify'
@ -32,7 +32,7 @@ const reportFormats = [
{ value: 1, label: 'LAS' },
]
export const Report = memo(({ idWell }) => {
export const DiagramReport = memo(({ idWell }) => {
const [aviableDateRange, setAviableDateRange] = useState([moment(), moment()])
const [filterDateRange, setFilterDateRange] = useState([
moment().subtract(1, 'days').startOf('day'),
@ -171,4 +171,4 @@ export const Report = memo(({ idWell }) => {
)
})
export default Report
export default DiagramReport

44
src/pages/Reports/index.jsx Normal file
View File

@ -0,0 +1,44 @@
import { Switch, useParams } from 'react-router-dom'
import { memo, useMemo } from 'react'
import { Layout, Menu } from 'antd'
import { FilePdfOutlined } from '@ant-design/icons'
import { PrivateMenuItemLink, PrivateRoute, PrivateDefaultRoute } from '@components/Private'
import DailyReport from './DailyReport'
import DiagramReport from './DiagramReport'
const { Content } = Layout
export const Reports = memo(({ idWell }) => {
const { tab } = useParams()
const rootPath = useMemo(() => `/well/${idWell}/reports`, [idWell])
return (
<Layout>
<Menu mode={'horizontal'} selectable={true} selectedKeys={[tab]} className={'well_menu'}>
<PrivateMenuItemLink root={rootPath} key={'diagram_report'} path={'diagram_report'} icon={<FilePdfOutlined />} title={'Диаграмма'}/>
<PrivateMenuItemLink root={rootPath} key={'daily_report'} path={'daily_report'} title={'Суточный рапорт'} />
</Menu>
<Layout>
<Content className={'site-layout-background'}>
<Switch>
<PrivateRoute path={`${rootPath}/diagram_report`}>
<DiagramReport idWell={idWell} />
</PrivateRoute>
<PrivateRoute path={`${rootPath}/daily_report`}>
<DailyReport idWell={idWell} />
</PrivateRoute>
<PrivateDefaultRoute urls={[
`${rootPath}/diagram_report`,
`${rootPath}/daily_report`,
]}/>
</Switch>
</Content>
</Layout>
</Layout>
)
})
export default Reports

8
src/pages/Well.jsx
View File

@ -11,8 +11,8 @@ import { Switch, useParams } from 'react-router-dom'
import { PrivateRoute, PrivateDefaultRoute, PrivateMenuItem } from '@components/Private'
import Report from './Report'
import Measure from './Measure'
import Reports from './Reports'
import Analytics from './Analytics'
import Documents from './Documents'
import Telemetry from './Telemetry'
@ -32,7 +32,7 @@ export const Well = memo(() => {
<Layout>
<Menu mode={'horizontal'} selectable={true} selectedKeys={[tab]} className={'well_menu'}>
<PrivateMenuItem.Link root={rootPath} key={'telemetry'} path={'telemetry'} icon={<FundViewOutlined />} title={'Телеметрия'}/>
<PrivateMenuItem.Link root={rootPath} key={'report'} path={'report'} icon={<FilePdfOutlined />} title={'Рапорт'} />
<PrivateMenuItem.Link root={rootPath} key={'reports'} path={'reports'} icon={<FilePdfOutlined />} title={'Рапорта'} />
<PrivateMenuItem.Link root={rootPath} key={'analytics'} path={'analytics'} icon={<DeploymentUnitOutlined />} title={'Аналитика'} />
<PrivateMenuItem.Link root={rootPath} key={'operations'} path={'operations'} icon={<FolderOutlined />} title={'Операции по скважине'} />
{/* <PrivateMenuItem.Link root={rootPath} key={'telemetryAnalysis'} path={'telemetryAnalysis'} icon={<FundProjectionScreenOutlined />} title={'Операции по телеметрии'} /> */}
@ -47,8 +47,8 @@ export const Well = memo(() => {
<PrivateRoute path={`${rootPath}/telemetry/:tab?`}>
<Telemetry idWell={idWell} />
</PrivateRoute>
<PrivateRoute path={`${rootPath}/report`}>
<Report idWell={idWell} />
<PrivateRoute path={`${rootPath}/reports/:tab?`}>
<Reports idWell={idWell} />
</PrivateRoute>
<PrivateRoute path={`${rootPath}/analytics/:tab?`}>
<Analytics idWell={idWell} rootPath={`${rootPath}/analytics`}/>

5
src/utils/permissions.ts
View File

@ -98,7 +98,10 @@ export const requirements: PermissionRecord = {
messages: ['Deposit.get', 'TelemetryDataSaub.get'],
dashboard_nnb: ['Deposit.get'], //'WitsInfo.get', 'WitsRecord1.get', 'WitsRecord7.get', 'WitsRecord8.get', 'WitsRecord50.get', 'WitsRecord60.get', 'WitsRecord61.get'],
},
report: ['Deposit.get', 'Report.get'],
reports: {
diagram_report: ['Deposit.get', 'Report.get'],
daily_report: ['Deposit.get'],
},
analytics: {
composite: {
wells: ['Deposit.get', 'OperationStat.get', 'WellComposite.get'],