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