CF2-8: Базовая версия страницы репортов

src/pages/Report.jsx

@@ -11,29 +11,41 @@ import {
 import 'moment/locale/ru';
 import locale from 'antd/lib/locale/ru_RU';
 import moment from "moment";
-import { ReportService } from '../services/api'
+import {Subscribe} from '../services/signalr';
+import notify from '../components/notify';
+import LoaderPortal from '../components/LoaderPortal';
+import { ReportService } from '../services/api';
 
 const { RangePicker } = DatePicker;
 const { Option } = Select;
 
-const initialBegin = moment()
-const initialEnd = moment()
-const initialStep = 600
-const initialFormat = 1
 let reportDatesRange = {
   from: moment("0001-01-01T00:00:00"),
   to: moment("9999-12-31T23:59:59.9999999")
 }
 
+const timePeriodNames = {
+  600: '1 минута',
+  86400:'1 день',
+  604800:'1 неделя' 
+}
+
+const imgPaths = {
+  '.pdf': '/images/pdf.png',
+  '.las': '/images/las.png'
+}
+
 
 // Экспорт рендера
 export default function Report(props) { 
   
-  const [rangeDate, setRangeDate] = useState([moment(), moment()])
+  const [rangeDate, setRangeDate] = useState([moment().subtract(1,'days'), moment()])
-  const [step, setStep] = useState(initialStep)
+  const [step, setStep] = useState(600)
-  const [format, setFormat] = useState(initialFormat)
+  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 = [
@@ -41,6 +53,7 @@ export default function Report(props) {
       title: '',
       dataIndex: 'reportFormat',
       key: 'reportFormat',
+      render: format => <img src={imgPaths[format]} width="50" alt={format}></img>
     },
     {
       title: 'Параметры отчета',
@@ -51,14 +64,40 @@ export default function Report(props) {
       title: 'Название отчета',
       dataIndex: 'reportName',
       key: 'reportName',
-      render: name => <a>{name}</a>
+      render: name => <a href="" download={name}>{name}</a>
     },
   ];
 
-  let handleReportCreation = async (values) => {
+  const handleReportProgress = (data) => {
+    console.log('data: ' + data)
+    if(data) {
+      setReportProgress(data)
+    }
+    
+    console.log('reportProgress: ' + reportProgress)
+    //console.log(data)
+  }
+
+  const handleReportCreation = async (values) => {
     let begin = rangeDate[0].toISOString()
     let end = rangeDate[1].toISOString()
-    let taskId = await ReportService.createReport(wellId, values.step, values.format, begin, end)
+    let taskId = null;
+
+    ReportService.createReport(wellId, values.step, values.format, begin, end)
+            .then((data) => {
+              if(data) {
+                taskId = data
+                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)
+            })
+
   }; 
 
   function disabledDate(current) {
@@ -69,17 +108,32 @@ export default function Report(props) {
     async function getRepostSizeAsync() {
       let begin = rangeDate[0].toISOString()
       let end = rangeDate[1].toISOString()
-      let approxPagesResponse = await ReportService.getReportSize(wellId, step, format, begin, end)
+      try {
-      setPagesCount(approxPagesResponse)
+        let approxPagesResponse = await ReportService.getReportSize(wellId, step, format, begin, end)
-      let suitableReportsResponse = await ReportService.getSuitableReportsNames(wellId, step, format, begin, end)
+        setPagesCount(approxPagesResponse)
-      let suitableReports = suitableReportsResponse.map(value => {
+
-        return { 
+        setLoader(true)
-          reportFormat: value.format,
+        let suitableReportsResponse = await ReportService.getSuitableReportsNames(wellId, step, format, begin, end)
-          reportParams: `Дата создания: ${value.date}, Данные от ${value.begin} до ${value.end}, Шаг: ${value.step}`,
+        let suitableReports = suitableReportsResponse.map(value => {
-          reportName: value.name
+          return { 
-        }
+            key: value.id,
-      })
+            reportFormat: value.format,
-      setSuitableReports(suitableReports)
+            reportParams: `Дата создания: ${new Date(value.date).toLocaleDateString()}, 
+                          Данные от ${new Date(value.begin).toLocaleString()} 
+                          до ${new Date(value.end).toLocaleString()}, 
+                          Шаг: ${timePeriodNames[value.step]}`,
+            reportName: value.name
+          }
+        })
+        setSuitableReports(suitableReports)
+      } 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)
+      } finally {
+        setLoader(false)
+      }
     }
 
     getRepostSizeAsync()
@@ -93,6 +147,7 @@ export default function Report(props) {
     }
 
     getDatesRange()
+    //return ()=>{uns && uns()}
   },[])
 
   return (<>
@@ -107,7 +162,7 @@ export default function Report(props) {
         <Form.Item
           label="Выбор за период времени и расширение файла"
           name="period"
-          initialValue = { [initialBegin, initialEnd] }
+          initialValue = { [rangeDate[0], rangeDate[1]] }
         >
           <RangePicker
             disabledDate={disabledDate}
@@ -123,7 +178,7 @@ export default function Report(props) {
         <Form.Item
           label="Шаг графиков"
           name="step"
-          initialValue = {initialStep}
+          initialValue = {step}
           style={{marginLeft: '30px'}}
         >
           <Select
@@ -138,7 +193,7 @@ export default function Report(props) {
         <Form.Item
             label="Формат отчета"
             name="format"
-            initialValue = {initialFormat}
+            initialValue = {format}
             onChange={(e) => setFormat(e.target.value)}
             style={{marginLeft: '30px'}}
         >
@@ -163,11 +218,13 @@ export default function Report(props) {
       </div>
     </Form>
     <br/>
-    <p style={{marginBottom: '10px'}}>
+    <h3>
       Отчеты с аналогичными параметрами, доступные для скачивания:
-    </p> <br/>
+    </h3> <br/>
     
-    <Table dataSource={suitableReports} columns={columns} />
+    <LoaderPortal show={loader}>
+      <Table dataSource={suitableReports} columns={columns} />
+    </LoaderPortal>
   </>
   )
 }

src/pages/TelemetryView.jsx

@@ -221,8 +221,8 @@ export default function TelemetryView(props) {
 
     Promise.all([promiseData, promiseMessages]).then(()=>setLoader(false))
 
-    let unSubscribeDataSaubHub = Subscribe('ReceiveDataSaub', `well_${id}`, handleReceiveDataSaub)
+    let unSubscribeDataSaubHub = Subscribe('hubs/telemetry', 'ReceiveDataSaub', `well_${id}`, handleReceiveDataSaub)
-    let unSubscribeMessagesHub = Subscribe('ReceiveMessages', `well_${id}`, handleReceiveMessages)
+    let unSubscribeMessagesHub = Subscribe('hubs/telemetry','ReceiveMessages', `well_${id}`, handleReceiveMessages)
     return () => {
       unSubscribeDataSaubHub()
       unSubscribeMessagesHub()

src/services/api/services/ReportService.ts

@@ -25,7 +25,7 @@ end?: string,
 ): Promise<number> {
         const result = await __request({
             method: 'POST',
-            path: `/api/well/${wellId}/report`,
+            path: `/api/report/${wellId}/report`,
             query: {
                 'stepSeconds': stepSeconds,
                 'format': format,
@@ -45,14 +45,11 @@ end?: string,
      */
     public static async getReport(
 wellId: number,
-reportName?: string,
+reportName: string,
 ): Promise<string> {
         const result = await __request({
             method: 'GET',
-            path: `/api/well/${wellId}/report`,
+            path: `/api/report/${wellId}/${reportName}`,
-            query: {
-                'reportName': reportName,
-            },
         });
         return result.body;
     }
@@ -77,7 +74,7 @@ end?: string,
 ): Promise<Array<string>> {
         const result = await __request({
             method: 'GET',
-            path: `/api/well/${wellId}/suitableReports`,
+            path: `/api/report/${wellId}/suitableReports`,
             query: {
                 'stepSeconds': stepSeconds,
                 'format': format,
@@ -107,7 +104,7 @@ end?: string,
 ): Promise<string> {
         const result = await __request({
             method: 'GET',
-            path: `/api/well/${wellId}/reportSize`,
+            path: `/api/report/${wellId}/reportSize`,
             query: {
                 'stepSeconds': stepSeconds,
                 'format': format,
@@ -129,7 +126,7 @@ wellId: number,
 ): Promise<DatesRangeDto> {
         const result = await __request({
             method: 'GET',
-            path: `/api/well/${wellId}/reportsDatesRange`,
+            path: `/api/report/${wellId}/reportsDatesRange`,
         });
         return result.body;
     }

src/services/api/services/TelemetryService.ts

@@ -31,7 +31,7 @@ requestBody?: TelemetryInfoDto,
 
     /**
      * Принимает данные от разных систем по скважине
-     * @param uid Уникальный идентификатор <EFBFBD><EFBFBD>тправителя
+     * @param uid Уникальный идентификатор отправителя
      * @param requestBody Данные
      * @returns any Success
      * @throws ApiError

src/services/signalr/index.ts

@@ -1,4 +1,4 @@
-import { HubConnectionBuilder, HubConnectionState } from '@microsoft/signalr';
+import { HubConnection, HubConnectionBuilder, HubConnectionState } from '@microsoft/signalr';
 
 // SignalR js api:
 //https://docs.microsoft.com/ru-ru/javascript/api/@aspnet/signalr/?view=signalr-js-latest
@@ -8,14 +8,28 @@ const ConnectionOptions = {
   transport:1,
 }
 
-const Connection = new HubConnectionBuilder()
+type ConnectionsDict = {
-  .withUrl(`http://192.168.1.70:5000/hubs/telemetry`, ConnectionOptions)
+  [route: string]: HubConnection;
+};
+
+const Connections: ConnectionsDict = {
+  'hubs/telemetry': new HubConnectionBuilder()
+  .withUrl(`http://localhost:5000/hubs/telemetry`, ConnectionOptions)
   .withAutomaticReconnect()
-  .build();
+  .build(),
+
+  'hubs/reports': new HubConnectionBuilder()
+  .withUrl(`http://localhost:5000/hubs/reports`, ConnectionOptions)
+  .withAutomaticReconnect()
+  .build()
+}
 
 let connectionPromise: Promise<void>
 
-const GetConnectionAsync = async () => {
+const GetConnectionAsync = async (hubUrl: string) => {
+
+    let Connection: HubConnection = Connections[hubUrl];
+
     if (Connection.state === HubConnectionState.Disconnected)
       connectionPromise = Connection.start()
   
@@ -37,21 +51,22 @@ type cleanFunction = (...args: any[]) => void;
  * @return {cleanFunction} unsubscribe function for useEffect cleanup.
  */ 
 const Subscribe = (
+  hubUrl: string,
   methodName: string, 
   groupName: string = '', 
   handler: handlerFunction ):cleanFunction=>{
-  GetConnectionAsync().then(async connection => {
+  GetConnectionAsync(hubUrl).then(async connection => {
     if(groupName)
-      await Connection.send('AddToGroup', groupName)  
+      await connection.send('AddToGroup', groupName)  
-    Connection.on(methodName, handler)
+      connection.on(methodName, handler)
   })
   
   if(groupName)
     return () => {
-      Connection.send('RemoveFromGroup', groupName)
+      Connections[hubUrl].send('RemoveFromGroup', groupName)
-      .finally(()=>Connection.off(methodName))
+      .finally(()=>Connections[hubUrl].off(methodName))
     }
-  return () => Connection.off(methodName)  
+  return () => Connections[hubUrl].off(methodName)  
 }
 
 /** Invokes some SignalR method.
@@ -59,9 +74,9 @@ const Subscribe = (
  * @param {any[]} args methods arguments
  * @return {Promise<void>} Promise
  */ 
-const InvokeAsync = async (methodName:string, ...args:any[]) => {
+const InvokeAsync = async (methodName:string, hubUrl: string, ...args:any[]) => {
-  await GetConnectionAsync()
+  await GetConnectionAsync(hubUrl)
-  await Connection.send(methodName, ...args)
+  await Connections[hubUrl].send(methodName, ...args)
 }
 
 export {