CF2-8: Добавлено получение отчетов с сервера и оповещение о прогрессе получения

src/pages/Report.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { useParams } from 'react-router-dom';
 import {
   Form,
@@ -6,7 +6,9 @@ import {
   Radio,
   Button,
   Select,
-  Table
+  Table,
+  Progress, 
+  notification
 } from 'antd';
 import 'moment/locale/ru';
 import locale from 'antd/lib/locale/ru_RU';
@@ -42,10 +44,11 @@ export default function Report(props) {
   const [rangeDate, setRangeDate] = useState([moment().subtract(1,'days'), moment()])
   const [step, setStep] = useState(600)
   const [format, setFormat] = useState(0)
-  const [reportProgress, setReportProgress] = useState(0.0)
   const [approxPages, setPagesCount] = useState(0)
   const [suitableReports, setSuitableReports] = useState([])
   const [loader, setLoader] = useState(false)
+
+
   let wellId = useParams().id;
 
   const columns = [
@@ -64,41 +67,73 @@ export default function Report(props) {
       title: 'Название отчета',
       dataIndex: 'reportName',
       key: 'reportName',
-      render: name => <a href="" download={name}>{name}</a>
+      render: name => <a onClick={event => getReportFile(event, name)} download={name}>{name}</a>
     },
   ];
+  
+  const ReportCreationNotify = ({progressData}) => {
+    progressData = progressData ?? {progress: 0.0, operation: 'Создание отчета', reportName: ''} 
 
-  const handleReportProgress = (data) => {
+    return (
-    console.log('data: ' + data)
+    <>
-    if(data) {
+        <Progress percent={ progressData.progress } />
-      setReportProgress(data)
+        <br />
+        <span> { progressData.operation } </span>
+        <br />
+        <a onClick={event => {getReportFile(event, progressData.reportName)}}
+          download={progressData.reportName}> 
+          { progressData.reportName } 
+        </a>
+    </>
+    )
+  }
+
+  const getReportFile = async (event, reportFileName) => {
+    try {
+      const element = event.target
+      let reportFile = await ReportService.getReport(wellId, reportFileName)
+      let reportUrl = URL.createObjectURL(reportFile)
+      element.href = reportUrl
+    } catch (error) {
+      notify(`Не удалось скачать отчет по скважине (${wellId}) c 
+      ${rangeDate[0].format("DD.MM.YYYY hh:mm:ss")} по 
+      ${rangeDate[1].format("DD.MM.YYYY hh:mm:ss")}`, 'error')
+      console.log(error)
     }
-    
-    console.log('reportProgress: ' + reportProgress)
-    //console.log(data)
   }
 
   const handleReportCreation = async (values) => {
     let begin = rangeDate[0].toISOString()
     let end = rangeDate[1].toISOString()
-    let taskId = null;
 
-    ReportService.createReport(wellId, values.step, values.format, begin, end)
+    try {
-            .then((data) => {
+      const taskId = await ReportService.createReport(wellId, values.step, values.format, begin, end)
-              if(data) {
+      if(!taskId)
-                taskId = data
+        return 
-                let unSubscribeReportHub = Subscribe('hubs/reports', 'GetReportProgress', `Report_${taskId}`, handleReportProgress)
-                //unSubscribeReportHub()
-              }
-            })
-            .catch(error => {
-              notify(`Не удалось создать отчет по скважине (${wellId}) c 
-              ${rangeDate[0].format("DD.MM.YYYY hh:mm:ss")} по 
-              ${rangeDate[1].format("DD.MM.YYYY hh:mm:ss")}`, 'error')
-              console.error(error)
-            })
 
-  }; 
+      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(`Не удалось создать отчет по скважине (${wellId}) c 
+      ${rangeDate[0].format("DD.MM.YYYY hh:mm:ss")} по 
+      ${rangeDate[1].format("DD.MM.YYYY hh:mm:ss")}`, 'error')
+      console.log(error)
+    }
+  }
 
   function disabledDate(current) {
     return reportDatesRange.From  >= current || reportDatesRange.To  <= current;
@@ -115,7 +150,7 @@ export default function Report(props) {
         notify(`Не удалось получить предварительный размер отчета c 
                 ${rangeDate[0].format("DD.MM.YYYY hh:mm:ss")} по 
                 ${rangeDate[1].format("DD.MM.YYYY hh:mm:ss")}`, 'error')
-        console.error(error)
+        console.log(error)
       } finally {
         setLoader(false)
       }
@@ -147,7 +182,7 @@ export default function Report(props) {
         notify(`Не удалось получить подходящие по параметрам отчеты c 
                 ${rangeDate[0].format("DD.MM.YYYY hh:mm:ss")} по 
                 ${rangeDate[1].format("DD.MM.YYYY hh:mm:ss")}`, 'error')
-        console.error(error)
+        console.log(error)
       } finally {
         setLoader(false)
       }
@@ -164,76 +199,74 @@ export default function Report(props) {
     }
 
     getDatesRange()
-    //return ()=>{uns && uns()}
   },[])
 
   return (<>
-    <Form
+    <div className="w-100 mt-20px">
-      layout="vertical"
+      <Form
-      name="reportForm"
+        layout="vertical"
-      initialValues={{ remember: true }}
+        name="reportForm"
-      onFinish={handleReportCreation}
+        initialValues={{ remember: true }}
-      style={{marginTop:'20px'}}
+        onFinish={handleReportCreation}
-    >
+      >
-      <div style={{display: 'flex'}}>
+        <div className={'d-flex'}>
-        <Form.Item
+          <Form.Item
-          label="Выбор за период времени и расширение файла"
+            label="Диапазон дат отчета"
-          name="period"
+            name="period"
-          initialValue = { [rangeDate[0], rangeDate[1]] }
+            initialValue = { [rangeDate[0], rangeDate[1]] }
-        >
-          <RangePicker
-            disabledDate={disabledDate}
-            allowClear={false}
-            onCalendarChange = { (dates, dateStrings, info) => {
-                setRangeDate([moment(dateStrings[0]), moment(dateStrings[1])])
-              }
-            } 
-            locale={locale} 
-            showTime 
-          />
-        </Form.Item>
-        <Form.Item
-          label="Шаг графиков"
-          name="step"
-          initialValue = {step}
-          style={{marginLeft: '30px'}}
-        >
-          <Select
-            onChange={(value) => setStep(value)}
-            style={{ width: 100 }}
           >
-            <Option value={600}>1 минута</Option>
+            <RangePicker
-            <Option value={86400}>1 день</Option>
+              disabledDate={disabledDate}
-            <Option value={604800}>1 неделя</Option>
+              allowClear={false}
-          </Select>
+              onCalendarChange = { (dates, dateStrings, info) => {
-        </Form.Item>
+                  setRangeDate([moment(dateStrings[0]), moment(dateStrings[1])])
-        <Form.Item
+                }
-            label="Формат отчета"
+              } 
-            name="format"
+              locale={locale} 
-            initialValue = {format}
+              showTime 
-            onChange={(e) => setFormat(e.target.value)}
+            />
-            style={{marginLeft: '30px'}}
+          </Form.Item>
-        >
+          <Form.Item
-            <Radio.Group>
+            label="Шаг графиков"
-              <Radio.Button value={0}>PDF</Radio.Button>
+            name="step"
-              <Radio.Button value={1}>LAS</Radio.Button>
+            initialValue = {step}
-            </Radio.Group>
+            className="ml-30px"
-        </Form.Item>
+          >
-        <Button 
+            <Select
-          type="primary" 
+              onChange={(value) => setStep(value)}
-          htmlType="submit"
+            >
-          className="submit_button"
+              <Option value={600}>1 минута</Option>
-          style={{marginTop: '30px', marginLeft: '30px'}}>
+              <Option value={86400}>1 день</Option>
-          <span>Получить рапорт</span>
+              <Option value={604800}>1 неделя</Option>
-          <span style={{marginLeft: '5px'}}>
+            </Select>
-            ({approxPages} стр.)
+          </Form.Item>
-          </span> 
+          <Form.Item
-          <span style={{display: approxPages > 100 ? 'inline' : 'none' ,marginLeft: '5px'}}>
+              label="Формат отчета"
-            !!!
+              name="format"
-          </span> 
+              initialValue = {format}
-        </Button>
+              onChange={(e) => setFormat(e.target.value)}
-      </div>
+              className="ml-30px"
-    </Form>
+          >
+              <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'}>
+              ({approxPages} стр.)
+            </span> 
+            <span style={{display: approxPages > 100 ? 'inline' : 'none'}} className={'ml-5px'}>
+              !!!
+            </span> 
+          </Button>
+        </div>
+      </Form>
+    </div>
     <br/>
     <h3>
       Отчеты с аналогичными параметрами, доступные для скачивания:

src/styles/App.less

@@ -16,6 +16,14 @@ html {
   height: 100%;
 }
 
+.mt-30px {
+  margin-top: 30px;
+}
+
+.ml-30px {
+  margin-left: 30px;
+}
+
 .login_page{
   position: absolute;
   height:100%;

src/styles/index.css

@@ -11,6 +11,37 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+.d-flex {
+  display: flex;
+}
+
+.d-inline {
+  display: inline;
+}
+
+.d-none {
+  display: none;
+}
+
+.w-100 {
+  width: 100%
+}
+
+.mt-20px {
+  margin-top: 20px;
+}
+
+.ml-5px {
+  margin-left: 5px;
+}
+
+.ml-30px {
+  margin-left: 30px;
+}
+
+.vertical-align-center {
+  vertical-align: center;
+}
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',