ia.novokshanov/asb_cloud_front
1
0
Fork 0
forked from ddrilling/asb_cloud_front
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
KharchenkoVV 2021-06-04 09:22:25 +05:00
parent 742393dc11
commit df0a8b4003
5 changed files with 123 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
src/pages/Report.jsx
View File

@ -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 [step, setStep] = useState(initialStep)
const [format, setFormat] = useState(initialFormat)
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 = [
@ -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()
try {
let approxPagesResponse = await ReportService.getReportSize(wellId, step, format, begin, end)
setPagesCount(approxPagesResponse)
setLoader(true)
let suitableReportsResponse = await ReportService.getSuitableReportsNames(wellId, step, format, begin, end)
let suitableReports = suitableReportsResponse.map(value => {
return {
key: value.id,
reportFormat: value.format,
reportParams: `Дата создания: ${value.date}, Данные от ${value.begin} до ${value.end}, Шаг: ${value.step}`,
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/>
<LoaderPortal show={loader}>
<Table dataSource={suitableReports} columns={columns} />
</LoaderPortal>
</>
)
}

4
src/pages/TelemetryView.jsx
View File

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

15
src/services/api/services/ReportService.ts
View File

@ -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`,
query: {
'reportName': reportName,
},
path: `/api/report/${wellId}/${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;
}

2
src/services/api/services/TelemetryService.ts
View File

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

43
src/services/signalr/index.ts
View File

@ -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()
.withUrl(`http://192.168.1.70:5000/hubs/telemetry`, ConnectionOptions)
type ConnectionsDict = {
[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)
Connection.on(methodName, handler)
await connection.send('AddToGroup', groupName)
connection.on(methodName, handler)
})
if(groupName)
return () => {
Connection.send('RemoveFromGroup', groupName)
.finally(()=>Connection.off(methodName))
Connections[hubUrl].send('RemoveFromGroup', groupName)
.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[]) => {
await GetConnectionAsync()
await Connection.send(methodName, ...args)
const InvokeAsync = async (methodName:string, hubUrl: string, ...args:any[]) => {
await GetConnectionAsync(hubUrl)
await Connections[hubUrl].send(methodName, ...args)
}
export {