From e9eaa96388555c1ef0e7ed1b4f3daa9336e689b7 Mon Sep 17 00:00:00 2001
From: goodmice <av.sirotkin@autodrilling.ru>
Date: Mon, 18 Apr 2022 17:36:57 +0500
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B0=20=D0=B1=D0=B0=D0=B7=D0=BE=D0=B2=D0=B0=D1=8F=20?=
 =?UTF-8?q?=D0=B2=D0=B5=D1=80=D1=81=D0=B8=D1=8E=20=D1=81=D1=83=D1=82=D0=BE?=
 =?UTF-8?q?=D1=87=D0=BD=D0=BE=D0=B3=D0=BE=20=D1=80=D0=B0=D0=BF=D0=BE=D1=80?=
 =?UTF-8?q?=D1=82=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Reports/DailyReport/ReportEditor.jsx      | 155 ++++++++++++++++++
 src/pages/Reports/DailyReport/index.jsx       |  97 +++++++++++
 .../DiagramReport}/ReportCreationNotify.jsx   |   0
 .../DiagramReport}/Reports.jsx                |   4 +-
 .../DiagramReport}/index.jsx                  |  10 +-
 src/pages/Reports/index.jsx                   |  44 +++++
 src/pages/Well.jsx                            |   8 +-
 src/utils/permissions.ts                      |   5 +-
 8 files changed, 311 insertions(+), 12 deletions(-)
 create mode 100644 src/pages/Reports/DailyReport/ReportEditor.jsx
 create mode 100644 src/pages/Reports/DailyReport/index.jsx
 rename src/pages/{Report => Reports/DiagramReport}/ReportCreationNotify.jsx (100%)
 mode change 100755 => 100644
 rename src/pages/{Report => Reports/DiagramReport}/Reports.jsx (100%)
 mode change 100755 => 100644
 rename src/pages/{Report => Reports/DiagramReport}/index.jsx (97%)
 mode change 100755 => 100644
 create mode 100644 src/pages/Reports/index.jsx

diff --git a/src/pages/Reports/DailyReport/ReportEditor.jsx b/src/pages/Reports/DailyReport/ReportEditor.jsx
new file mode 100644
index 0000000..383df80
--- /dev/null
+++ b/src/pages/Reports/DailyReport/ReportEditor.jsx
@@ -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
diff --git a/src/pages/Reports/DailyReport/index.jsx b/src/pages/Reports/DailyReport/index.jsx
new file mode 100644
index 0000000..c67a3be
--- /dev/null
+++ b/src/pages/Reports/DailyReport/index.jsx
@@ -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
diff --git a/src/pages/Report/ReportCreationNotify.jsx b/src/pages/Reports/DiagramReport/ReportCreationNotify.jsx
old mode 100755
new mode 100644
similarity index 100%
rename from src/pages/Report/ReportCreationNotify.jsx
rename to src/pages/Reports/DiagramReport/ReportCreationNotify.jsx
diff --git a/src/pages/Report/Reports.jsx b/src/pages/Reports/DiagramReport/Reports.jsx
old mode 100755
new mode 100644
similarity index 100%
rename from src/pages/Report/Reports.jsx
rename to src/pages/Reports/DiagramReport/Reports.jsx
index cf44431..71db9e9
--- a/src/pages/Report/Reports.jsx
+++ b/src/pages/Reports/DiagramReport/Reports.jsx
@@ -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/>,
diff --git a/src/pages/Report/index.jsx b/src/pages/Reports/DiagramReport/index.jsx
old mode 100755
new mode 100644
similarity index 97%
rename from src/pages/Report/index.jsx
rename to src/pages/Reports/DiagramReport/index.jsx
index 866ecdf..ce3637f
--- a/src/pages/Report/index.jsx
+++ b/src/pages/Reports/DiagramReport/index.jsx
@@ -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
diff --git a/src/pages/Reports/index.jsx b/src/pages/Reports/index.jsx
new file mode 100644
index 0000000..056eb9b
--- /dev/null
+++ b/src/pages/Reports/index.jsx
@@ -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
diff --git a/src/pages/Well.jsx b/src/pages/Well.jsx
index 8c4aab8..4ef9496 100755
--- a/src/pages/Well.jsx
+++ b/src/pages/Well.jsx
@@ -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`}/>
diff --git a/src/utils/permissions.ts b/src/utils/permissions.ts
index 09f3d86..4618a07 100755
--- a/src/utils/permissions.ts
+++ b/src/utils/permissions.ts
@@ -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'],