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

Merge ArchiveVie branch

Browse Source
This commit is contained in:
Фролов 2021-05-28 12:44:43 +05:00
commit 3757112dc1
22 changed files with 445 additions and 196 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -11,7 +11,7 @@
"antd": "^4.15.0",
"chart.js": "^3.0.2",
"chartjs-adapter-date-fns": "^1.1.0-beta.1",
"chartjs-plugin-datalabels": "^2.0.0-beta.1",
"chartjs-plugin-datalabels": "^2.0.0-rc.1",
"craco-less": "^1.17.1",
"date-fns": "^2.20.0",
"moment": "^2.29.1",

2
src/components/ChartTimeOnlineFooter.jsx
View File

@ -32,7 +32,7 @@ export const ChartTimeOnlineFooter = (props) =>{
if(popContent)
spField = <Popover content={popContent}>
<div style={{display:"flex"}}>
<div className="chart-footer">
<ControlOutlined className='display_label'/>
{spField}
</div>

11
src/components/Display.jsx
View File

@ -1,11 +1,10 @@
import { useState, useEffect } from 'react';
import { useState, useEffect, useRef } from 'react';
import {CaretUpOutlined, CaretDownOutlined} from '@ant-design/icons'
export const ValueDisplay = ({prefix, value, suffix, isArrowVisible}) =>{
const [oldVal, setOldVal] = useState(NaN)
const [val, setVal] = useState('---')
let arrow = null
const arrowRef = useRef(null);
useEffect(()=>{
if(value)
@ -14,16 +13,16 @@ export const ValueDisplay = ({prefix, value, suffix, isArrowVisible}) =>{
if (isArrowVisible)
{
if (value > oldVal)
arrow = <CaretUpOutlined style={{color:"red"}} />
arrowRef.current = (<CaretUpOutlined style={{color:"red"}} />)
else if (value < oldVal)
arrow = <CaretDownOutlined style={{color:"red"}} />
arrowRef.current = (<CaretDownOutlined style={{color:"red"}} />)
setOldVal(value)
}
} else
setVal(value)
},[value])
return(<span className='display_value'>{prefix} {val} {suffix}{arrow}</span>)
return(<span className='display_value'>{prefix} {val} {suffix}{arrowRef.current}</span>)
}
export const Display = (props)=>{

4
src/components/ModeDisplay.jsx
View File

@ -20,8 +20,8 @@ export const ModeDisplay = (props)=>{
value = modeNames[index] ?? index
}
return(<>
return(<div className="display_header">
<span className="display_label">Режим:</span>
<span className="display_value">{value}</span>
</>)
</div>)
}

24
src/components/Notification.jsx Normal file
View File

@ -0,0 +1,24 @@
import { notification } from 'antd';
const typeDictionary = {
'error': 'Ошибка',
'warning': 'Предупрежение',
'info': 'Информация'
}
/**
* Вызов оповещений всплывающим окошком.
* @param body string или ReactNode
* @param type для параметра типа. Допустимые значение 'error', 'warning', 'info'
*/
export default function Notification(body, type='info'){
notification.info({
description: body,
message: typeDictionary[type],
type,
placement: "bottomRight",
duration: 10,
})
}

4
src/components/Well.jsx
View File

@ -18,7 +18,7 @@ export default function Well() {
<Menu
mode="horizontal"
selectable={false}
style={{height: '100%', borderRight: 0}}
className="well_menu"
>
<Menu.Item key="1" icon={<FundViewOutlined/>}>
<Link to='telemetry'>Мониторинг</Link>
@ -41,7 +41,7 @@ export default function Well() {
</Menu>
<Layout>
<Content className="site-layout-background sheet">
<Content className="site-layout-background">
<Switch>
<Route path="/well/:id/file">
<Files/>

1
src/components/WellTreeSelector.jsx
View File

@ -46,7 +46,6 @@ export default function WellTreeSelector(props) {
try {
let newWells = (await WellService.getWells()).map(w => { return { key: w.id, ...w } })
let wellsTree = groupBy(newWells, 'deposit', 'cluster', 'caption')
// setWells( newWells )
setWellsTree(wellsTree)
}
catch (e) {

83
src/components/charts/ChartTimeArchive.tsx Normal file
View File

@ -0,0 +1,83 @@
import { useEffect, useState} from 'react';
import {ChartTimeBase, ChartTimeData, ChartTimeDataParams} from './ChartTimeBase'
const GetRandomColor = () => "#" + Math.floor(Math.random()*16777215).toString(16)
function GetOrCreateDatasetByLineConfig(data: ChartTimeData, lineConfig: LineConfig) {
let dataset = data?.datasets.find(d => d.label === lineConfig.label)
if (!dataset) {
let color = lineConfig.borderColor
?? lineConfig.backgroundColor
?? lineConfig.color
?? GetRandomColor()
dataset = {
label: lineConfig.label,
data: [],
backgroundColor: lineConfig.backgroundColor ?? color,
borderColor: lineConfig.borderColor ?? color,
borderWidth: lineConfig.borderWidth ?? 1,
borderDash: lineConfig.dash ?? [],
}
data.datasets.push(dataset);
}
return dataset
}
export type LineConfig = {
type?: string
label: string
units?: string
xAccessorName: string
yAccessorName: string
color?: string
borderColor?: string
backgroundColor?: string
borderWidth?: number
dash?: number[]
labels?: any[]
}
export type ChartTimeProps = {
label?: string,
yDisplay: Boolean,
lines: LineConfig[],
data: any[],
interval: number,
}
export const ChartTimeArchive: React.FC<ChartTimeProps> = (props) => {
const [dataParams, setDataParams] = useState<ChartTimeDataParams>({ data: { datasets: [] }, yStart: new Date(), })
useEffect(() => {
if ((!props?.lines)
|| (!props?.data)
|| (props.lines.length === 0)
|| (props.data.length === 0))
return
setDataParams((preDataParams) => {
props.lines.forEach(lineCfg => {
let dataset = GetOrCreateDatasetByLineConfig(preDataParams.data, lineCfg)
let points = props.data.map(dataItem => {
return {
x: dataItem[lineCfg.xAccessorName],
label:0,
y: new Date(dataItem[lineCfg.yAccessorName])
}
})
dataset.data = points;
});
preDataParams.yStart = new Date()
preDataParams.yStart.setSeconds(preDataParams.yStart.getSeconds() - props.interval)
preDataParams.yInterval = props.interval
preDataParams.displayLabels = props.yDisplay
return preDataParams
})
}, [props.data, props.lines, props.interval, props.yDisplay])
return (<ChartTimeBase dataParams={dataParams} />)
}

13
src/components/charts/ChartTimeBase.tsx
View File

@ -11,8 +11,9 @@ import {
ChartTypeRegistry,
ChartOptions} from 'chart.js'
import 'chartjs-adapter-date-fns';
import ChartDataLabels from 'chartjs-plugin-datalabels';
Chart.register( TimeScale, LinearScale, LineController, LineElement, PointElement, Legend );
Chart.register( TimeScale, LinearScale, LineController, LineElement, PointElement, Legend, ChartDataLabels );
const defaultOptions = {
//maintainAspectRatio: false,
@ -63,15 +64,11 @@ const defaultOptions = {
hoverRadius:5,
},
},
plugins:{
legend:{
display: false,
}
}
}
export type ChartTimeData = ChartData<keyof ChartTypeRegistry, {
x: number;
label: number;
y: Date;
}[], unknown>
@ -84,7 +81,8 @@ export type ChartTimeDataParams = {
export type ChartTimeBaseProps = {
dataParams: ChartTimeDataParams,
options?: ChartOptions<keyof ChartTypeRegistry>,
// TODO: Create good type for options
options?: ChartOptions<keyof ChartTypeRegistry> | any,
}
const timeUnitByInterval = (intervalSec:number):String =>{
@ -111,6 +109,7 @@ export const ChartTimeBase: React.FC<ChartTimeBaseProps> = ({options, dataParams
let newChart = new Chart(chartRef.current, {
type: 'line',
plugins: [ChartDataLabels],
options: thisOptions,
data: dataParams.data
})

33
src/components/charts/ChartTimeOnline.tsx
View File

@ -19,6 +19,7 @@ function GetOrCreateDatasetByLineConfig (data: ChartTimeData, lineConfig: LineC
borderColor: lineConfig.borderColor ?? color,
borderWidth: lineConfig.borderWidth ?? 1,
borderDash: lineConfig.dash ?? [],
showLine: lineConfig.showLine,
}
data.datasets.push(dataset);
}
@ -37,6 +38,8 @@ export type LineConfig = {
borderWidth?: number
dash?:number[]
labels?: any[]
showLine: boolean
xConstValue?: number|null
}
export type ChartTimeProps = {
@ -64,7 +67,8 @@ export const ChartTimeOnline: React.FC<ChartTimeProps> = (props) => {
props.lines.forEach(lineCfg => {
let dataset = GetOrCreateDatasetByLineConfig(preDataParams.data, lineCfg)
let points = props.data.map(dataItem => {return{
x: dataItem[lineCfg.xAccessorName],
x: lineCfg.xConstValue ?? dataItem[lineCfg.xAccessorName],
label: dataItem[lineCfg.xAccessorName],
y: new Date(dataItem[lineCfg.yAccessorName])}
})
//dataset.data = [ ...dataset.data, ...points,].slice(-1024)
@ -85,6 +89,31 @@ export const ChartTimeOnline: React.FC<ChartTimeProps> = (props) => {
}, [ props.data, props.lines, props.interval, props.yDisplay])
return(<ChartTimeBase dataParams = {dataParams} />)
const chartPluginsOptions = {
plugins:{
legend:{
display: false,
},
datalabels: {
backgroundColor: 'transparent',
borderRadius: 4,
color: '#000B',
display: function(context:any) {
return context.dataset.label === 'wellDepth'
? 'auto'
: false
},
formatter: function(value: any, context: any) {
return `${value.y.toLocaleTimeString()} ${value.label.toPrecision(4)}`
},
padding: 6,
align: 'left',
anchor: 'center',
clip: true
}
}
}
return(<ChartTimeBase dataParams = {dataParams} options = { chartPluginsOptions } />)
}

14
src/pages/Analysis.jsx
View File

@ -1,3 +1,11 @@
export default function Analysis(props){
return(<h2>Анализ</h2>)
}
// import {UserOfWells} from "../components/UserOfWells";
export default function Analysis(props) {
return (
<div className="menu_title">
<h2>Анализ</h2>
{/*<UserOfWells data={saubData}/>*/}
<hr/>
</div>
)
}

6
src/pages/Files.jsx
View File

@ -1,3 +1,7 @@
export default function Files(props) {
return (<h2>Файлы</h2>)
return (
<div className="menu-title">
<h2>Файлы</h2>
</div>
)
}

5
src/pages/Header.jsx
View File

@ -1,6 +1,5 @@
import { useState } from 'react';
import { Layout, Button } from 'antd'
import { UserOutlined, MenuOutlined } from '@ant-design/icons'
import { UserOutlined } from '@ant-design/icons'
import logo from '../images/logo_32.png'
import { Link } from "react-router-dom"
import WellTreeSelector from '../components/WellTreeSelector'
@ -8,7 +7,6 @@ import WellTreeSelector from '../components/WellTreeSelector'
const { Header } = Layout
export default function PageHeader(props){
const [sidebarVisible, setSidebarVisible] = useState(true)
const login = localStorage['login']
let handleLogout = () => {
@ -19,7 +17,6 @@ export default function PageHeader(props){
return(
<Layout>
<Header className="header">
<Button icon={<MenuOutlined />} onClick={()=>setSidebarVisible(!sidebarVisible)}/>
<img src={logo} alt="АСБ" className="logo"/>
<WellTreeSelector />
<h1 className="title">Мониторинг</h1>

16
src/pages/Main.jsx
View File

@ -1,20 +1,18 @@
import { Layout, } from 'antd'
import {Layout} from 'antd'
import Wells from './Wells'
import PageHeader from './Header'
import Well from "../components/Well";
import {Redirect, Route, Switch} from "react-router-dom";
const { Content } = Layout
const {Content} = Layout
export default function Main(){
export default function Main() {
return(
return (
<Content>
<PageHeader />
<PageHeader/>
<Layout>
<Content className="site-layout-background sheet"
style={{ marginTop: '0',
paddingTop: '0'}}>
<Content className="site-layout-background sheet">
<Switch>
<Route path="/well/:id/">
<Well/>
@ -29,5 +27,5 @@ export default function Main(){
</Content>
</Layout>
</Content>
);
)
}

85
src/pages/Messages.jsx
View File

@ -1,18 +1,22 @@
import { Table } from 'antd';
import { MessageService } from '../services/api'
import { useState, useEffect } from 'react'
import { useParams } from 'react-router-dom'
import { Subscribe } from '../services/signalr'
import {Button, Table, Select} from 'antd';
import {MessageService} from '../services/api'
import {useState, useEffect} from 'react'
import {useParams} from 'react-router-dom'
import {Subscribe} from '../services/signalr'
import Loader from '../components/Loader'
import moment from 'moment';
import moment from 'moment'
import '../styles/message.css'
import Notification from '../components/Notification'
const {Option} = Select
// Словарь категорий для строк таблицы
const categoryDictionary = {
1: {title:'Авария'},
2: {title:'Предупреждение'},
3: {title:'Информация'},
1: {title: 'Авария'},
2: {title: 'Предупреждение'},
3: {title: 'Информация'},
}
// Конфигурация таблицы
@ -22,8 +26,6 @@ const columns = [
key: 'date',
dataIndex: 'date',
render: (item) => moment(item).format('DD MMM YYYY, HH:MM:ss'),
sorter: (a, b) => new Date(b.date) - new Date(a.date),
sortDirections: ['descend', 'ascend'],
},
{
title: 'Категория',
@ -31,14 +33,16 @@ const columns = [
dataIndex: 'categoryId',
render: (_, item) => categoryDictionary[item.categoryId].title,
style: (_, item) => categoryDictionary[item.categoryId].style,
sorter: (a, b) => a.categoryId - b.categoryId,
sortDirections: ['descend', 'ascend'],
filters: [
{text: 'Авария', value: '1'},
{text: 'Предупреждение', value: '2'},
{text: 'Информация', value: '3'},
]
},
{
title: 'Сообщение',
key: 'message',
dataIndex: 'message',
onFilter: (value, record) => record.name.indexOf(value) === 0,
},
{
title: 'Пользователь',
@ -47,12 +51,22 @@ const columns = [
},
];
// Опции для фильра
// Данные для таблицы
export default function Messages(props) {
let { id } = useParams()
export default function Messages() {
let {id} = useParams()
const [messages, setMessages] = useState([])
const [loader] = useState(false)
const filterOptions = [
{label: 'Авария', value: 1},
{label: 'Предупреждение', value: 2},
{label: 'Информация', value: 3},
]
const children = filterOptions.map((line) => (<Option key={line.value}>{line.label}</Option>))
const handleReceiveMessages = (messages) => {
if (messages) {
setMessages(messages.items)
@ -62,28 +76,51 @@ export default function Messages(props) {
useEffect(() => {
MessageService.getMessage(id)
.then(handleReceiveMessages)
.catch(error => console.error(error))
.catch((ex) => {
Notification(`Не удалось загрузить сообщения по скважине "${id}"`, 'error')
console.log(ex)
})
let unSubscribeMessagesHub = Subscribe('ReceiveMessages', `well_${id}`, handleReceiveMessages)
return () => {
unSubscribeMessagesHub()
}
}, [id]);
}, [id])
return (
<>
<h2>Сообщения</h2>
<hr />
<hr/>
<h3>Фильтр сообщений</h3>
<Select
mode="multiple"
allowClear
placeholder="Фильтр сообщений"
className="filter-selector"
// onChange={messagesFilter}
>
{children}
</Select>
<Button
type="primary"
className="submit-button"
>
Применть
</Button>
<Button
className="submit-button"
>
Обновить
</Button>
<Table
columns={columns}
dataSource={messages}
rowClassName={(record) => `event_message_${record.categoryId}`}
rowClassName={(record) => `event_message_${record.categoryId} event_message`}
size={'small'}
pagination={{ pageSize: 10 }}
pagination={{pageSize: 26}}
rowKey={(record) => record.id}
/>
{loader && <Loader />}
{loader && <Loader/>}
</>
)
}
// TODO Стили для отсортированных страниц

13
src/pages/Report.jsx
View File

@ -1,4 +1,4 @@
import React from "react"; // , { useState }
import React from "react";
import {
DatePicker,
Radio,
@ -37,8 +37,6 @@ const PeriodOfTime = () => {
function disabledDate(current) {
return current && current < moment().subtract(3, 'days'); // Наверно, не надо)
}
// const [startDate, setStartDate] = useState(new Date());
return (
<ConfigProvider locale={locale}
@ -97,12 +95,9 @@ export default function Report(props) {
<p>*Предполагаемое колличество страниц</p>
<hr />
<div>
<Button type="primary" style={{
display: 'flex',
alignItems: 'center',
padding: '20px',
borderRadius: '5px'
}}>Получить рапорт</Button>
<Button type="primary" className="submit_button">
Получить рапорт
</Button>
</div>
</>

156
src/pages/TelemetryView.jsx
View File

@ -1,89 +1,128 @@
import { useState, useEffect } from 'react';
import { Row, Col, Select, } from 'antd'
import { ChartTimeOnline } from '../components/charts/ChartTimeOnline'
import { ChartTimeOnlineFooter } from '../components/ChartTimeOnlineFooter'
import { CustomColumn } from '../components/CustomColumn'
import { UserOfWells } from '../components/UserOfWells'
import { ModeDisplay } from '../components/ModeDisplay'
import { Display } from '../components/Display'
import moment from 'moment'
import { Table } from 'antd';
import { MessageService } from '../services/api'
import {useState, useEffect} from 'react'
import {useParams} from 'react-router-dom'
import {Row, Col, Select, Table} from 'antd'
import {ChartTimeOnline} from '../components/charts/ChartTimeOnline'
import Loader from '../components/Loader'
import {ChartTimeOnlineFooter} from '../components/ChartTimeOnlineFooter'
import {CustomColumn} from '../components/CustomColumn'
import {UserOfWells} from '../components/UserOfWells'
import {ModeDisplay} from '../components/ModeDisplay'
import {Display} from '../components/Display'
import moment from 'moment'
import {Subscribe} from '../services/signalr'
import {DataService, MessageService} from '../services/api'
import '../styles/message.css'
import Notification from "../components/Notification";
import { useParams } from 'react-router-dom'
import { Subscribe } from '../services/signalr'
import { DataService } from '../services/api'
import '../styles/message_telemetry.css'
const { Option } = Select
const {Option} = Select
const dash = [7, 3]
const blockHeightGroup = {
label: "Высота блока",
yDisplay: false,
linePv: { label: "blockHeight", units: 'м', xAccessorName: "blockHeight", yAccessorName: "date", color: '#333' },
linePv: { label: "blockPosition", units: 'м', xAccessorName: "blockPosition", yAccessorName: "date", color: '#333' },
lineOther: { label: "wellDepth", units: 'м', xAccessorName: "wellDepth", yAccessorName: "date", color: '#333', showLine: false, xConstValue:30 },
}
const blockSpeedGroup = {
label: "Скорость блока",
yDisplay: false,
linePv: { label: "blockSpeed", units: 'м/ч', xAccessorName: "blockSpeed", yAccessorName: "date", color: '#0a0' },
lineSp: { label: "blockSpeedSp", units: 'м/ч', xAccessorName: "blockSpeedSp", yAccessorName: "date", color: '#0a0' },
linePv: {label: "blockSpeed", units: 'м/ч', xAccessorName: "blockSpeed", yAccessorName: "date", color: '#0a0'},
lineSp: {label: "blockSpeedSp", units: 'м/ч', xAccessorName: "blockSpeedSp", yAccessorName: "date", color: '#0a0'},
}
const pressureGroup = {
label: "Давление",
yDisplay: false,
linePv: { label: "pressure", units: 'атм', xAccessorName: "pressure", yAccessorName: "date", color: '#c00' },
lineSp: { label: "pressureSp", units: 'атм', xAccessorName: "pressureSp", yAccessorName: "date", color: '#c00' },
lineIdle: { label: "pressureIdle", units: 'атм', xAccessorName: "pressureIdle", yAccessorName: "date", color: '#c00' },
linePv: {label: "pressure", units: 'атм', xAccessorName: "pressure", yAccessorName: "date", color: '#c00'},
lineSp: {label: "pressureSp", units: 'атм', xAccessorName: "pressureSp", yAccessorName: "date", color: '#c00'},
lineIdle: {label: "pressureIdle", units: 'атм', xAccessorName: "pressureIdle", yAccessorName: "date", color: '#c00'},
linesOther: [
{ label: "мекс. перепад", units: 'атм', xAccessorName: "pressureDeltaLimitMax", yAccessorName: "date", color: '#c00' },
{
label: "мекс. перепад",
units: 'атм',
xAccessorName: "pressureDeltaLimitMax",
yAccessorName: "date",
color: '#c00'
},
],
}
const axialLoadGroup = {
label: "Осевая нагрузка",
yDisplay: false,
linePv: { label: "axialLoad", units: 'т', xAccessorName: "axialLoad", yAccessorName: "date", color: '#00a' },
lineSp: { label: "axialLoadSp", units: 'т', xAccessorName: "axialLoadSp", yAccessorName: "date", color: '#00a', dash },
linePv: {label: "axialLoad", units: 'т', xAccessorName: "axialLoad", yAccessorName: "date", color: '#00a'},
lineSp: {label: "axialLoadSp", units: 'т', xAccessorName: "axialLoadSp", yAccessorName: "date", color: '#00a', dash},
linesOther: [
{ label: "axialLoadLimitMax", units: 'т', xAccessorName: "axialLoadLimitMax", yAccessorName: "date", color: '#00a' },
{label: "axialLoadLimitMax", units: 'т', xAccessorName: "axialLoadLimitMax", yAccessorName: "date", color: '#00a'},
],
}
const hookWeightGroup = {
label: "Ввес на крюке",
yDisplay: false,
linePv: { label: "hookWeight", units: 'т', xAccessorName: "hookWeight", yAccessorName: "date", color: '#0aa' },
lineIdle: { label: "hookWeightIdle", units: 'т', xAccessorName: "hookWeightIdle", yAccessorName: "date", color: '#0aa', dash },
linePv: {label: "hookWeight", units: 'т', xAccessorName: "hookWeight", yAccessorName: "date", color: '#0aa'},
lineIdle: {
label: "hookWeightIdle",
units: 'т',
xAccessorName: "hookWeightIdle",
yAccessorName: "date",
color: '#0aa',
dash
},
linesOther: [
{ label: "hookWeightLimitMin", units: 'т', xAccessorName: "hookWeightLimitMin", yAccessorName: "date", color: '#0aa' },
{ label: "hookWeightLimitMax", units: 'т', xAccessorName: "hookWeightLimitMax", yAccessorName: "date", color: '#0aa' },
{
label: "hookWeightLimitMin",
units: 'т',
xAccessorName: "hookWeightLimitMin",
yAccessorName: "date",
color: '#0aa'
},
{
label: "hookWeightLimitMax",
units: 'т',
xAccessorName: "hookWeightLimitMax",
yAccessorName: "date",
color: '#0aa'
},
],
}
const rotorTorqueGroup = {
label: "Момент на роторе",
yDisplay: false,
linePv: { label: "rotorTorque", units: 'кН·м', xAccessorName: "rotorTorque", yAccessorName: "date", color: '#a0a' },
lineSp: { label: "rotorTorqueSp", units: 'кН·м', xAccessorName: "rotorTorqueSp", yAccessorName: "date", color: '#a0a' },
lineIdle: { label: "rotorTorqueIdle", units: 'кН·м', xAccessorName: "rotorTorqueIdle", yAccessorName: "date", color: '#a0a' },
linePv: {label: "rotorTorque", units: 'кН·м', xAccessorName: "rotorTorque", yAccessorName: "date", color: '#a0a'},
lineSp: {label: "rotorTorqueSp", units: 'кН·м', xAccessorName: "rotorTorqueSp", yAccessorName: "date", color: '#a0a'},
lineIdle: {
label: "rotorTorqueIdle",
units: 'кН·м',
xAccessorName: "rotorTorqueIdle",
yAccessorName: "date",
color: '#a0a'
},
linesOther: [
{ label: "rotorTorqueLimitMax", units: 'кН·м', xAccessorName: "rotorTorqueLimitMax", yAccessorName: "date", color: '#a0a' },
{
label: "rotorTorqueLimitMax",
units: 'кН·м',
xAccessorName: "rotorTorqueLimitMax",
yAccessorName: "date",
color: '#a0a'
},
],
}
const paramsGroups = [blockHeightGroup, blockSpeedGroup, pressureGroup, axialLoadGroup, hookWeightGroup, rotorTorqueGroup]
export const Column = ({ lineGroup, data, interval }) => {
export const Column = ({lineGroup, data, interval}) => {
let lines = [lineGroup.linePv]
if (lineGroup.lineSp)
lines.push(lineGroup.lineSp)
if (lineGroup.lineOther)
lines.push(lineGroup.lineOther)
let dataLast = null
let pv = null
if (data?.length > 0) {
@ -102,7 +141,7 @@ export const Column = ({ lineGroup, data, interval }) => {
data={data}
yDisplay={lineGroup.yDisplay}
lines={lines}
interval={interval} />
interval={interval}/>
<ChartTimeOnlineFooter
data={dataLast}
{...lineGroup} />
@ -111,9 +150,9 @@ export const Column = ({ lineGroup, data, interval }) => {
// Словарь категорий для строк таблицы
const categoryDictionary = {
1: { title: 'Авария' },
2: { title: 'Предупреждение' },
3: { title: 'Информация' },
1: {title: 'Авария'},
2: {title: 'Предупреждение'},
3: {title: 'Информация'},
}
// Конфигурация таблицы
@ -145,7 +184,7 @@ const columns = [
];
export default function TelemetryView(props) {
let { id } = useParams()
let {id} = useParams()
const [saubData, setSaubData] = useState([])
const [chartInterval, setChartInterval] = useState(600)
const [messages, setMessages] = useState([])
@ -167,11 +206,17 @@ export default function TelemetryView(props) {
useEffect(() => {
DataService.getData(id)
.then(handleReceiveDataSaub)
.catch(error => console.error(error))
.catch((ex) => {
Notification(`Не удалось загрузить данные по скважине "${id}"`, 'error')
console.log(ex)
})
MessageService.getMessage(id)
.then(handleReceiveMessages)
.catch(error => console.error(error))
.catch((ex) => {
Notification(`Не удалось загрузить сообщения по скважине "${id}"`, 'error')
console.log(ex)
})
let unSubscribeDataSaubHub = Subscribe('ReceiveDataSaub', `well_${id}`, handleReceiveDataSaub)
let unSubscribeMessagesHub = Subscribe('ReceiveMessages', `well_${id}`, handleReceiveMessages)
@ -181,14 +226,20 @@ export default function TelemetryView(props) {
}
}, [id]);
useEffect(() => {
DataService.getData(id, null, chartInterval)
.then(handleReceiveDataSaub)
.catch(error => console.error(error))
}, [chartInterval]);
const colSpan = 24 / (paramsGroups.length)
return (<div>
{/* <div>Well id: {id}; points count: {saubData.length}</div> */}
<Row style={{ marginBottom: '1rem' }}>
<Row style={{marginBottom: '1rem'}}>
<Col>
<ModeDisplay data={saubData} />
<ModeDisplay data={saubData}/>
</Col>
<span style={{flexGrow: 0.1}}>&nbsp;</span>
<Col>
Интервал:&nbsp;
<Select defaultValue="600" onChange={setChartInterval}>
@ -199,20 +250,20 @@ export default function TelemetryView(props) {
<Option value='86400'>1 день</Option>
</Select>
</Col>
<span style={{ flexGrow: 1 }}></span>
<span style={{flexGrow: 1}}>&nbsp;</span>
<Col>
<UserOfWells data={saubData}/>
</Col>
</Row>
<Row>
<Col span={2} >
<CustomColumn data={saubData} />
<Col span={2}>
<CustomColumn data={saubData}/>
</Col>
<Col span={24 - 2}>
<Row>
{paramsGroups.map(group =>
<Col span={colSpan} className='border_small' key={group.label}>
<Column data={saubData} lineGroup={group} interval={chartInterval} />
<Column data={saubData} lineGroup={group} interval={chartInterval}/>
</Col>)}
</Row>
</Col>
@ -221,11 +272,12 @@ export default function TelemetryView(props) {
showHeader={false}
columns={columns}
dataSource={messages}
rowClassName={(record) => `event_message_${record.categoryId}`}
rowClassName={(record) => `event_message_${record.categoryId} event_message`}
className={'message_table'}
size={'small'}
pagination={false}
rowKey={(record) => record.id}
/>
{loader && <Loader />}
{loader && <Loader/>}
</div>)
}

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

@ -5,7 +5,7 @@ import { HubConnectionBuilder, HubConnectionState } from '@microsoft/signalr';
const ConnectionOptions = {
accessTokenFactory: () => localStorage['token'],
//transport:1,
transport:1,
}
const Connection = new HubConnectionBuilder()
@ -15,16 +15,6 @@ const Connection = new HubConnectionBuilder()
let connectionPromise: Promise<void>
// const GetConnectionAsync = async () => {
// try {
// await Connection.start();
// console.log(Connection.state);
// } catch (err) {
// console.log(err);
// }
// }
const GetConnectionAsync = async () => {
if (Connection.state === HubConnectionState.Disconnected)
connectionPromise = Connection.start()
@ -35,32 +25,6 @@ const GetConnectionAsync = async () => {
return Connection
}
// const GetConnectionAsync = async () => {
// if (Connection.state === HubConnectionState.Disconnected)
// connectionPromise = Connection.start()
// if (Connection.state !== HubConnectionState.Connected)
// await connectionPromise
// return Connection
// }
// const GetConnectionAsync = async ()=>{
// if(Connection.state === HubConnectionState.Disconnected)
// await Connection.start()
// if(Connection.state === HubConnectionState.Connecting)
// await Connection.onreconnected
// // if(Connection.state === HubConnectionState.Disconnecting)
// // await Connection.onclose
// // if(Connection.state === HubConnectionState.Connected)
// console.log(Connection.state)
// return Connection
// }
type handlerFunction = (...args: any[]) => void;
type cleanFunction = (...args: any[]) => void;

64
src/styles/App.less
View File

@ -11,6 +11,11 @@
#root, .app{min-height:100%;}
html {
display: flex;
height: 100%;
}
.login_page{
position: absolute;
height:100%;
@ -28,7 +33,7 @@
.header {
display: flex;
align-items: center;
padding: 4px 24px;
//padding: 4px 24px;
}
.header .logo {
@ -36,14 +41,15 @@
border-radius: 32px;
padding: 8px 24px;
margin: 8px 10px;
box-shadow: #fff 2px;
box-shadow: 0 0 2px #fff;
}
.header .title{
flex-grow: 1;
color: #fff;
text-align: center;
justify-content: baseline;
text-align: start;
justify-content: start;
margin-left: 100px;
}
.header button{
@ -53,9 +59,9 @@
}
.sheet{
padding: 24px;
margin: 8px;
min-height: 280;
padding: 5px 24px;
min-height: 280px;
margin: 0 15px;
}
.site-layout-background {
@ -71,14 +77,26 @@
flex-wrap: wrap;
flex: auto;
}
.display_header {
font-size: 16px;
flex-grow: 1;
display: flex;
}
.display_label{
font-size: 16px;
color: rgb(70, 70, 70);
text-align: left;
justify-content: baseline;
justify-content: center;
margin: 1px 1rem 1px 1rem;
flex: auto;
align-items: baseline;
text-overflow: ellipsis;
overflow-x: hidden;
overflow-y: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
height: 30px;
}
.display_value{
@ -95,7 +113,35 @@
.display_small_value{
color: rgb(50, 50, 50);
text-align: right;
justify-content: baseline;
justify-content: center;
margin: 1px 1rem 1px 1rem;
flex: auto;
}
.menu-title,
.chart-footer {
display: flex;
}
.submit-button {
border-radius: 5px;
font-weight: bold;
text-align: center;
margin: 0 5px 5px 0;
}
.well_menu {
margin-top: 0;
padding-top: 0;
height: 100%;
border-right: 0;
}
tr.table_row_size {
height: 10px;
}
.filter-selector {
width: 50%;
margin-right: 5px;
}

3
src/styles/archive_style.css Normal file
View File

@ -0,0 +1,3 @@
.content-sheet {
display: inline-flex;
}

4
src/styles/index.css
View File

@ -1,3 +1,7 @@
::-webkit-scrollbar {
width: 0;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

16
src/styles/message.css
View File

@ -1,5 +1,15 @@
.event_message {
/*.ant-table.ant-table-small .ant-table-tbody > tr > td {*/
/* padding: 0;*/
/*}*/
/*.ant-table-tbody > tr > td {*/
/* border-bottom: 0.5px;*/
/*}*/
.event_message > td {
font-size: 14px;
padding: 1px !important;
border-bottom: 1px !important;
}
.event_message_off {
@ -22,11 +32,9 @@
background: gold;
}
.event_message_3,
.event_message_3:hover {
.event_message_3 {
color: #c0c0c0;
background: #505060;
height: 1px;
}
td.ant-table-column-sort {