forked from ddrilling/asb_cloud_front
reports refactoring
This commit is contained in:
Фролов
parent
3f4464b068
commit
fbd98134ea
30
src/pages/Report/ReportCreationNotify.jsx
Normal file
30
src/pages/Report/ReportCreationNotify.jsx
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
|
||||||
|
import { Progress } from "antd"
|
||||||
|
import { download } from "../../components/factory";
|
||||||
|
import notify from '../../components/notify'
|
||||||
|
|
||||||
|
export const getReportFile = async (idWell, reportName) => {
|
||||||
|
try {
|
||||||
|
await download(`/api/well/${idWell}/report/${reportName}`, reportName)
|
||||||
|
} catch (error) {
|
||||||
|
notify(`Не удалось скачать отчет ${reportName} по скважине (${idWell})`, 'error')
|
||||||
|
console.log(error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ReportCreationNotify = ({idWell, progressData}) => {
|
||||||
|
progressData = progressData ?? {progress: 0.0, operation: 'Создание отчета', reportName: ''}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Progress percent={ progressData.progress } />
|
||||||
|
<br />
|
||||||
|
<span> { progressData.operation } </span>
|
||||||
|
<br />
|
||||||
|
<button onClick={event => {getReportFile(idWell, progressData.reportName)}}
|
||||||
|
download={progressData.reportName}>
|
||||||
|
{ progressData.reportName }
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
255
src/pages/Report/index.jsx
Normal file
255
src/pages/Report/index.jsx
Normal file
@ -0,0 +1,255 @@
|
|||||||
|
import { useState, useEffect } from "react"
|
||||||
|
import {
|
||||||
|
Form,
|
||||||
|
DatePicker,
|
||||||
|
Radio,
|
||||||
|
Button,
|
||||||
|
Select,
|
||||||
|
Table,
|
||||||
|
notification,
|
||||||
|
} from "antd"
|
||||||
|
import "moment/locale/ru"
|
||||||
|
import moment from "moment"
|
||||||
|
import { Subscribe } from "../../services/signalr"
|
||||||
|
import notify from "../../components/notify"
|
||||||
|
import LoaderPortal from "../../components/LoaderPortal"
|
||||||
|
import { ReportService } from "../../services/api"
|
||||||
|
import { ReportCreationNotify, getReportFile } from "./ReportCreationNotify"
|
||||||
|
import { invokeWebApiWrapperAsync } from "../../components/factory"
|
||||||
|
|
||||||
|
const { RangePicker } = DatePicker
|
||||||
|
const { Option } = Select
|
||||||
|
|
||||||
|
const timePeriodNames = [
|
||||||
|
{ label: "1 секунда", value: 1 },
|
||||||
|
{ label: "10 секунд", value: 10 },
|
||||||
|
{ label: "1 минута", value: 60 },
|
||||||
|
{ label: "5 минут", value: 300 },
|
||||||
|
{ label: "30 минут", value: 1800 },
|
||||||
|
{ label: "1 час", value: 3600 },
|
||||||
|
{ label: "6 часов", value: 21600 },
|
||||||
|
{ label: "12 часов", value: 43200 },
|
||||||
|
{ label: "1 день", value: 86400 },
|
||||||
|
{ label: "1 неделя", value: 604800 },
|
||||||
|
]
|
||||||
|
|
||||||
|
const imgPaths = {
|
||||||
|
".pdf": "/images/pdf.png",
|
||||||
|
".las": "/images/las.png",
|
||||||
|
}
|
||||||
|
|
||||||
|
const dateTimeFormat = "DD.MM.YYYY hh:mm:ss"
|
||||||
|
|
||||||
|
export default function Report({ idWell }) {
|
||||||
|
const [aviableDateRange, setAviableDateRange] = useState([moment(),moment()])
|
||||||
|
const [filterDateRange, setFilterDateRange] = useState([moment().subtract(1, "days"),moment(),])
|
||||||
|
const [step, setStep] = useState(timePeriodNames[2].value)
|
||||||
|
const [format, setFormat] = useState(0)
|
||||||
|
const [pagesCount, setPagesCount] = useState(0)
|
||||||
|
const [suitableReports, setSuitableReports] = useState([])
|
||||||
|
const [showLoader, setShowLoader] = useState(false)
|
||||||
|
|
||||||
|
const periodOptions = timePeriodNames.map((item) => (
|
||||||
|
<Option key={item.value} value={item.value}>
|
||||||
|
{item.label}
|
||||||
|
</Option>
|
||||||
|
))
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title: "",
|
||||||
|
dataIndex: "reportFormat",
|
||||||
|
key: "reportFormat",
|
||||||
|
render: (format) => (
|
||||||
|
<img src={imgPaths[format]} width="50" alt={format}></img>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Параметры отчета",
|
||||||
|
dataIndex: "reportParams",
|
||||||
|
key: "reportParams",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Название отчета",
|
||||||
|
dataIndex: "reportName",
|
||||||
|
key: "reportName",
|
||||||
|
render: (reportName) => (
|
||||||
|
<Button
|
||||||
|
onClick={(_) => getReportFile(idWell, reportName)}
|
||||||
|
download={reportName}
|
||||||
|
>
|
||||||
|
{reportName}
|
||||||
|
</Button>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
const handleReportCreation = async (values) => {
|
||||||
|
let begin = aviableDateRange[0].toISOString()
|
||||||
|
let end = aviableDateRange[1].toISOString()
|
||||||
|
|
||||||
|
try {
|
||||||
|
const idUser = localStorage["userId"]
|
||||||
|
|
||||||
|
const taskId = await ReportService.createReport(
|
||||||
|
idWell,
|
||||||
|
idUser,
|
||||||
|
values.step,
|
||||||
|
values.format,
|
||||||
|
begin,
|
||||||
|
end
|
||||||
|
)
|
||||||
|
if (!taskId) return
|
||||||
|
|
||||||
|
const handleReportProgress = (progressData) => {
|
||||||
|
if (progressData) {
|
||||||
|
notification.open({
|
||||||
|
key: taskId,
|
||||||
|
message: "Создание отчета:",
|
||||||
|
description: (
|
||||||
|
<ReportCreationNotify
|
||||||
|
progressData={progressData}
|
||||||
|
></ReportCreationNotify>
|
||||||
|
),
|
||||||
|
duration: 0,
|
||||||
|
})
|
||||||
|
|
||||||
|
if (progressData.reportName?.length) unSubscribeReportHub()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const unSubscribeReportHub = Subscribe(
|
||||||
|
"hubs/reports",
|
||||||
|
"GetReportProgress",
|
||||||
|
`Report_${taskId}`,
|
||||||
|
handleReportProgress
|
||||||
|
)
|
||||||
|
} catch (error) {
|
||||||
|
notify(
|
||||||
|
`Не удалось создать отчет по скважине (${idWell}) c
|
||||||
|
${aviableDateRange[0].format("DD.MM.YYYY hh:mm:ss")} по
|
||||||
|
${aviableDateRange[1].format("DD.MM.YYYY hh:mm:ss")}`,
|
||||||
|
"error"
|
||||||
|
)
|
||||||
|
console.log(error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const disabledDate = (current) => {
|
||||||
|
return current < aviableDateRange[0] || current > aviableDateRange[1]
|
||||||
|
}
|
||||||
|
|
||||||
|
const updateSuitableReports = (suitableReports) => {
|
||||||
|
const reports = suitableReports?.map(report => {
|
||||||
|
const creationDate = new Date(report.begin).toLocaleString()
|
||||||
|
const begin = new Date(report.begin).toLocaleString()
|
||||||
|
const end = new Date(report.end).toLocaleString()
|
||||||
|
const step = timePeriodNames[report.step]
|
||||||
|
const reportParams = `Дата создания: ${creationDate}, Данные от ${begin} до ${end}, Шаг: ${step}`
|
||||||
|
return {
|
||||||
|
key: report.id,
|
||||||
|
reportFormat: report.format,
|
||||||
|
reportParams: reportParams,
|
||||||
|
reportName: report.name,
|
||||||
|
}})
|
||||||
|
setSuitableReports(reports??[])
|
||||||
|
}
|
||||||
|
|
||||||
|
const updateAviableDatesRange = (aviableDatesRange) =>{
|
||||||
|
const datesRange = [
|
||||||
|
moment(aviableDatesRange.from),
|
||||||
|
moment(aviableDatesRange.to)
|
||||||
|
]
|
||||||
|
setAviableDateRange(datesRange)
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => invokeWebApiWrapperAsync(async() => {
|
||||||
|
const aviableDatesRange = await ReportService.getReportsDateRange(idWell)
|
||||||
|
updateAviableDatesRange(aviableDatesRange)
|
||||||
|
}), [idWell])
|
||||||
|
|
||||||
|
useEffect(() => invokeWebApiWrapperAsync(async() => {
|
||||||
|
if(!filterDateRange || filterDateRange.length < 2)
|
||||||
|
return
|
||||||
|
const begin = filterDateRange[0].toISOString()
|
||||||
|
const end = filterDateRange[1].toISOString()
|
||||||
|
const pagesCount = await ReportService.getReportSize(idWell, step, format, begin, end)
|
||||||
|
setPagesCount(pagesCount)
|
||||||
|
const suitableReports = await ReportService.getSuitableReportsNames(idWell, step, format, begin, end)
|
||||||
|
updateSuitableReports(suitableReports)
|
||||||
|
},
|
||||||
|
setShowLoader,
|
||||||
|
`Не удалось получить предварительные параметры отчета c
|
||||||
|
${filterDateRange[0].format(dateTimeFormat)} по
|
||||||
|
${filterDateRange[1].format(dateTimeFormat)}`
|
||||||
|
), [filterDateRange, step, format, idWell])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<LoaderPortal show={showLoader}>
|
||||||
|
<div className="w-100 mt-20px">
|
||||||
|
<Form
|
||||||
|
layout="vertical"
|
||||||
|
name="reportForm"
|
||||||
|
initialValues={{ remember: true }}
|
||||||
|
onFinish={handleReportCreation}
|
||||||
|
>
|
||||||
|
<div className={"d-flex"}>
|
||||||
|
<Form.Item
|
||||||
|
label="Диапазон дат отчета"
|
||||||
|
name="period"
|
||||||
|
initialValue={filterDateRange}
|
||||||
|
>
|
||||||
|
<RangePicker
|
||||||
|
disabledDate={disabledDate}
|
||||||
|
allowClear={false}
|
||||||
|
onCalendarChange={(dates) => {
|
||||||
|
setFilterDateRange(dates)
|
||||||
|
}}
|
||||||
|
showTime
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item
|
||||||
|
label="Шаг графиков"
|
||||||
|
name="step"
|
||||||
|
initialValue={step}
|
||||||
|
className="ml-30px"
|
||||||
|
>
|
||||||
|
<Select onChange={setStep}>{periodOptions}</Select>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item
|
||||||
|
label="Формат отчета"
|
||||||
|
name="format"
|
||||||
|
initialValue={format}
|
||||||
|
onChange={(e) => setFormat(e.target.value)}
|
||||||
|
className="ml-30px"
|
||||||
|
>
|
||||||
|
<Radio.Group>
|
||||||
|
<Radio.Button value={0}>PDF</Radio.Button>
|
||||||
|
<Radio.Button value={1}>LAS</Radio.Button>
|
||||||
|
</Radio.Group>
|
||||||
|
</Form.Item>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
htmlType="submit"
|
||||||
|
className="mt-30px ml-30px"
|
||||||
|
>
|
||||||
|
<span>Получить рапорт</span>
|
||||||
|
<span className={"ml-5px"}>({pagesCount} стр.)</span>
|
||||||
|
<span
|
||||||
|
style={{ display: pagesCount > 100 ? "inline" : "none" }}
|
||||||
|
className={"ml-5px"}
|
||||||
|
>
|
||||||
|
!!!
|
||||||
|
</span>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
<h3>Отчеты с аналогичными параметрами, доступные для скачивания:</h3>{" "}
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<Table dataSource={suitableReports} columns={columns} />
|
||||||
|
</LoaderPortal>
|
||||||
|
)
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user