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

Добавлены оповещения сплывающими окнами. Изменены некоторые стили

Browse Source
This commit is contained in:
Alexey 2021-05-27 12:53:42 +05:00
parent fa45a27a4c
commit 6f12d57805
18 changed files with 263 additions and 212 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/ChartTimeOnlineFooter.jsx
View File

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

4
src/components/ModeDisplay.jsx
View File

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

2
src/components/Well.jsx
View File

@ -18,7 +18,7 @@ export default function Well() {
<Menu <Menu
mode="horizontal" mode="horizontal"
selectable={false} selectable={false}
style={{height: '100%', borderRight: 0}} className="well_menu"
> >
<Menu.Item key="1" icon={<FundViewOutlined/>}> <Menu.Item key="1" icon={<FundViewOutlined/>}>
<Link to='telemetry'>Мониторинг</Link> <Link to='telemetry'>Мониторинг</Link>

1
src/components/WellTreeSelector.jsx
View File

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

10
src/pages/Analysis.jsx
View File

@ -1,3 +1,7 @@
export default function Analysis(props){ export default function Analysis(props) {
return(<h2>Анализ</h2>) return (
} <div className="menu_title">
<h2>Анализ</h2>
</div>
)
}

167
src/pages/Archive.jsx
View File

@ -1,4 +1,4 @@
import { useState, useEffect } from 'react' import {useState, useEffect} from 'react'
import { import {
Button, Button,
DatePicker, DatePicker,
@ -7,19 +7,19 @@ import {
Row, Row,
Col, Col,
} from 'antd' } from 'antd'
import { useParams } from 'react-router-dom' import {useParams} from 'react-router-dom'
import { Subscribe } from '../services/signalr' import {Subscribe} from '../services/signalr'
import { DataService } from '../services/api' import {DataService} from '../services/api'
import 'moment/locale/ru' import 'moment/locale/ru'
import locale from 'antd/lib/locale/ru_RU' import locale from 'antd/lib/locale/ru_RU'
import { ChartTimeArchive } from '../components/charts/ChartTimeArchive' import {ChartTimeArchive} from '../components/charts/ChartTimeArchive'
import { Display } from '../components/Display' import {Display} from '../components/Display'
import { ChartTimeOnlineFooter } from '../components/ChartTimeOnlineFooter' import {ChartTimeOnlineFooter} from '../components/ChartTimeOnlineFooter'
import { UserOfWells } from '../components/UserOfWells' import {UserOfWells} from '../components/UserOfWells'
const { RangePicker } = DatePicker; const {RangePicker} = DatePicker;
const { Option } = Select; const {Option} = Select;
// Выбор периода времени // Выбор периода времени
const PeriodOfTime = () => { const PeriodOfTime = () => {
@ -29,7 +29,7 @@ const PeriodOfTime = () => {
<ConfigProvider locale={locale}> <ConfigProvider locale={locale}>
<RangePicker <RangePicker
showTime showTime
style={{ margin: '5px 5px', }} style={{margin: '5px 5px',}}
/> />
</ConfigProvider> </ConfigProvider>
) )
@ -38,40 +38,41 @@ const PeriodOfTime = () => {
// Выбор "перьев" для графиков - перенести в шапку графика // Выбор "перьев" для графиков - перенести в шапку графика
const SelectDataCharts = () => { const SelectDataCharts = () => {
const linesCollection = [ const linesCollection = [
{ label: "Глубина забоя", xAccessorName: "wellDepth", color: '#a0a' }, {label: "Глубина забоя", xAccessorName: "wellDepth", color: '#a0a'},
{ label: "Положение инструмента", xAccessorName: "bitDepth", color: '#a0a' }, {label: "Положение инструмента", xAccessorName: "bitDepth", color: '#a0a'},
{ label: "Высота талевого блока", xAccessorName: "blockPosition", color: '#a0a' }, {label: "Высота талевого блока", xAccessorName: "blockPosition", color: '#a0a'},
{ label: "Талевый блок. Мин положение", xAccessorName: "blockPositionMin", color: '#a0a' }, {label: "Талевый блок. Мин положение", xAccessorName: "blockPositionMin", color: '#a0a'},
{ label: "Талевый блок. Макс положение", xAccessorName: "blockPositionMax", color: '#a0a' }, {label: "Талевый блок. Макс положение", xAccessorName: "blockPositionMax", color: '#a0a'},
{ label: "Скорость талевого блока", xAccessorName: "blockSpeed", color: '#a0a' }, {label: "Скорость талевого блока", xAccessorName: "blockSpeed", color: '#a0a'},
{ label: "Скорости талевого блока. Задание", xAccessorName: "blockSpeedSp", color: '#a0a' }, {label: "Скорости талевого блока. Задание", xAccessorName: "blockSpeedSp", color: '#a0a'},
{ label: "Талевый блок. Задание скорости для роторного бурения", xAccessorName: "blockSpeedSpRotor", color: '#a0a' }, {label: "Талевый блок. Задание скорости для роторного бурения", xAccessorName: "blockSpeedSpRotor", color: '#a0a'},
{ label: "Талевый блок. Задание скорости для режима слайда", xAccessorName: "blockSpeedSpSlide", color: '#a0a' }, {label: "Талевый блок. Задание скорости для режима слайда", xAccessorName: "blockSpeedSpSlide", color: '#a0a'},
{ label: "Талевый блок. Задание скорости для проработки", xAccessorName: "blockSpeedSpDevelop", color: '#a0a' }, {label: "Талевый блок. Задание скорости для проработки", xAccessorName: "blockSpeedSpDevelop", color: '#a0a'},
{ label: "Давление", xAccessorName: "pressure", color: '#a0a' }, {label: "Давление", xAccessorName: "pressure", color: '#a0a'},
{ label: "Давление. Холостой ход", xAccessorName: "pressureIdle", color: '#a0a' }, {label: "Давление. Холостой ход", xAccessorName: "pressureIdle", color: '#a0a'},
{ label: "Давление. Задание", xAccessorName: "pressureSp", color: '#a0a' }, {label: "Давление. Задание", xAccessorName: "pressureSp", color: '#a0a'},
{ label: "Давление. Задание для роторного бурения", xAccessorName: "pressureSpRotor", color: '#a0a' }, {label: "Давление. Задание для роторного бурения", xAccessorName: "pressureSpRotor", color: '#a0a'},
{ label: "Давление. Задание для режима слайда", xAccessorName: "pressureSpSlide", color: '#a0a' }, {label: "Давление. Задание для режима слайда", xAccessorName: "pressureSpSlide", color: '#a0a'},
{ label: "Давление. Задание для проработки", xAccessorName: "pressureSpDevelop", color: '#a0a' }, {label: "Давление. Задание для проработки", xAccessorName: "pressureSpDevelop", color: '#a0a'},
{ label: "Давление дифф. Аварийное макс.", xAccessorName: "pressureDeltaLimitMax", color: '#a0a' }, {label: "Давление дифф. Аварийное макс.", xAccessorName: "pressureDeltaLimitMax", color: '#a0a'},
{ label: "Осевая нагрузка", xAccessorName: "axialLoad", color: '#a0a' }, {label: "Осевая нагрузка", xAccessorName: "axialLoad", color: '#a0a'},
{ label: "Осевая нагрузка. Задание", xAccessorName: "axialLoadSp", color: '#a0a' }, {label: "Осевая нагрузка. Задание", xAccessorName: "axialLoadSp", color: '#a0a'},
{ label: "Осевая нагрузка. Аварийная макс.", xAccessorName: "axialLoadLimitMax", color: '#a0a' }, {label: "Осевая нагрузка. Аварийная макс.", xAccessorName: "axialLoadLimitMax", color: '#a0a'},
{ label: "Вес на крюке", xAccessorName: "hookWeight", color: '#a0a' }, {label: "Вес на крюке", xAccessorName: "hookWeight", color: '#a0a'},
{ label: "Вес на крюке. Холостой ход", xAccessorName: "hookWeightIdle", color: '#a0a' }, {label: "Вес на крюке. Холостой ход", xAccessorName: "hookWeightIdle", color: '#a0a'},
{ label: "Вес на крюке. Посадка", xAccessorName: "hookWeightLimitMin", color: '#a0a' }, {label: "Вес на крюке. Посадка", xAccessorName: "hookWeightLimitMin", color: '#a0a'},
{ label: "Вес на крюке. Затяжка", xAccessorName: "hookWeightLimitMax", color: '#a0a' }, {label: "Вес на крюке. Затяжка", xAccessorName: "hookWeightLimitMax", color: '#a0a'},
{ label: "Момент на роторе", xAccessorName: "rotorTorque", color: '#a0a' }, {label: "Момент на роторе", xAccessorName: "rotorTorque", color: '#a0a'},
{ label: "Момент на роторе. Холостой ход", xAccessorName: "rotorTorqueIdle", color: '#a0a' }, {label: "Момент на роторе. Холостой ход", xAccessorName: "rotorTorqueIdle", color: '#a0a'},
{ label: "Момент на роторе. Задание", xAccessorName: "rotorTorqueSp", color: '#a0a' }, {label: "Момент на роторе. Задание", xAccessorName: "rotorTorqueSp", color: '#a0a'},
{ label: "Момент на роторе. Аварийный макс.", xAccessorName: "rotorTorqueLimitMax", color: '#a0a' }, {label: "Момент на роторе. Аварийный макс.", xAccessorName: "rotorTorqueLimitMax", color: '#a0a'},
{ label: "Обороты ротора", xAccessorName: "rotorSpeed", color: '#a0a' }, {label: "Обороты ротора", xAccessorName: "rotorSpeed", color: '#a0a'},
{ label: "Расход", xAccessorName: "flow", color: '#a0a' }, {label: "Расход", xAccessorName: "flow", color: '#a0a'},
{ label: "Расход. Холостой ход", xAccessorName: "flowIdle", color: '#a0a' }, {label: "Расход. Холостой ход", xAccessorName: "flowIdle", color: '#a0a'},
{ label: "Расход. Аварийный макс.", xAccessorName: "flowDeltaLimitMax", color: '#a0a' }, {label: "Расход. Аварийный макс.", xAccessorName: "flowDeltaLimitMax", color: '#a0a'},
] ]
const children = linesCollection.map((line) => (<Option key={line.xAccessorName}>{line.label}</Option>)) const children = linesCollection.map((line) => (<Option key={line.xAccessorName}>{line.label}</Option>))
function handleChange(value) { function handleChange(value) {
console.log(`selected ${value}`); console.log(`selected ${value}`);
} }
@ -80,7 +81,7 @@ const SelectDataCharts = () => {
<Select <Select
mode="multiple" mode="multiple"
allowClear allowClear
style={{ width: '50%' }} style={{width: '50%'}}
placeholder="Выберите значения" placeholder="Выберите значения"
defaultValue={["wellDepth"]} defaultValue={["wellDepth"]}
onChange={handleChange} onChange={handleChange}
@ -90,7 +91,7 @@ const SelectDataCharts = () => {
) )
} }
const Column = ({ lineGroup, data, interval }) => { const Column = ({lineGroup, data, interval}) => {
let lines = [lineGroup.linePv] let lines = [lineGroup.linePv]
if (lineGroup.lineSp) if (lineGroup.lineSp)
@ -108,12 +109,12 @@ const Column = ({ lineGroup, data, interval }) => {
<Display <Display
label={lineGroup.label} label={lineGroup.label}
value={pv} value={pv}
suffix={lineGroup.linePv?.units} /> suffix={lineGroup.linePv?.units}/>
<ChartTimeArchive <ChartTimeArchive
data={data} data={data}
yDisplay={lineGroup.yDisplay} yDisplay={lineGroup.yDisplay}
lines={lines} lines={lines}
interval={interval} /> interval={interval}/>
<ChartTimeOnlineFooter <ChartTimeOnlineFooter
data={dataLast} data={dataLast}
{...lineGroup} /> {...lineGroup} />
@ -123,7 +124,7 @@ const Column = ({ lineGroup, data, interval }) => {
const paramsGroups = [] const paramsGroups = []
export default function Archive(props) { export default function Archive(props) {
let { id } = useParams(); let {id} = useParams();
const [saubData, setSaubData] = useState([]) const [saubData, setSaubData] = useState([])
const [chartInterval, setChartInterval] = useState(600) const [chartInterval, setChartInterval] = useState(600)
@ -146,42 +147,40 @@ export default function Archive(props) {
const colSpan = 24 / (paramsGroups.length) const colSpan = 24 / (paramsGroups.length)
return (<> return (<div className="content-sheet">
<div style={{ display: 'flex' }}> <div className="menu_title">
<h2>Архив</h2> <h2>Архив</h2>
<span style={{ flexGrow: 10 }}></span> <span style={{flexGrow: 10}}></span>
<UserOfWells data={saubData} /> <UserOfWells data={saubData}/>
</div> </div>
<hr /> <hr/>
<Button type="primary" style={{ <div className="content-sheet">
borderRadius: '5px', <Button type="primary" style={{
font: 'bold', borderRadius: '5px',
textAlign: 'center', font: 'bold',
margin: '5px 5px', textAlign: 'center',
}}>Добавить график</Button> margin: '5px 5px',
<PeriodOfTime /> }}>Добавить график</Button>
<SelectDataCharts /> Интервал:&nbsp;
<Row style={{ marginBottom: '1rem' }}> <Select defaultValue="600" onChange={setChartInterval}>
<Col> <Option value='600'>10 минут</Option>
Интервал:&nbsp; <Option value='1800'>30 минут</Option>
<Select defaultValue="600" onChange={setChartInterval}> <Option value='3600'>1 час</Option>
<Option value='600'>10 минут</Option> <Option value='21600'>6 час</Option>
<Option value='1800'>30 минут</Option> <Option value='86400'>1 день</Option>
<Option value='3600'>1 час</Option> </Select>
<Option value='21600'>6 час</Option> <SelectDataCharts/>
<Option value='86400'>1 день</Option> <PeriodOfTime/>
</Select> <Row>
</Col> <Col span={24 - 2}>
</Row> <Row>
<Row> {paramsGroups.map(group =>
<Col span={24 - 2}> <Col span={colSpan} className='border_small' key={group.label}>
<Row> <Column data={saubData} lineGroup={group} interval={chartInterval}/>
{paramsGroups.map(group => </Col>)}
<Col span={colSpan} className='border_small' key={group.label}> </Row>
<Column data={saubData} lineGroup={group} interval={chartInterval} /> </Col>
</Col>)} </Row>
</Row> </div>
</Col> </div>)
</Row>
</>)
} }

6
src/pages/Files.jsx
View File

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

7
src/pages/Header.jsx
View File

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

19
src/pages/Main.jsx
View File

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

57
src/pages/Messages.jsx
View File

@ -1,18 +1,19 @@
import { Table } from 'antd'; import {Table} from 'antd';
import { MessageService } from '../services/api' import {MessageService} from '../services/api'
import { useState, useEffect } from 'react' import {useState, useEffect} from 'react'
import { useParams } from 'react-router-dom' import {useParams} from 'react-router-dom'
import { Subscribe } from '../services/signalr' import {Subscribe} from '../services/signalr'
import Loader from '../components/Loader' import Loader from '../components/Loader'
import moment from 'moment'; import moment from 'moment';
import '../styles/message.css' import '../styles/message.css'
import Notification from '../components/Notification'
// Словарь категорий для строк таблицы // Словарь категорий для строк таблицы
const categoryDictionary = { const categoryDictionary = {
1: {title:'Авария'}, 1: {title: 'Авария'},
2: {title:'Предупреждение'}, 2: {title: 'Предупреждение'},
3: {title:'Информация'}, 3: {title: 'Информация'},
} }
// Конфигурация таблицы // Конфигурация таблицы
@ -48,8 +49,8 @@ const columns = [
]; ];
// Данные для таблицы // Данные для таблицы
export default function Messages(props) { export default function Messages() {
let { id } = useParams() let {id} = useParams()
const [messages, setMessages] = useState([]) const [messages, setMessages] = useState([])
const [loader] = useState(false) const [loader] = useState(false)
@ -60,9 +61,13 @@ export default function Messages(props) {
} }
useEffect(() => { useEffect(() => {
MessageService.getMessage(id) MessageService.getMessage(id)
.then(handleReceiveMessages) .then(handleReceiveMessages)
.catch(error => console.error(error)) .catch ((ex) => {
Notification(`Не удалось загрузить сообщения по скважине "${id}"`, 'error')
console.log(ex)
})
let unSubscribeMessagesHub = Subscribe('ReceiveMessages', `well_${id}`, handleReceiveMessages) let unSubscribeMessagesHub = Subscribe('ReceiveMessages', `well_${id}`, handleReceiveMessages)
return () => { return () => {
unSubscribeMessagesHub() unSubscribeMessagesHub()
@ -70,19 +75,19 @@ export default function Messages(props) {
}, [id]); }, [id]);
return ( return (
<> <>
<h2>Сообщения</h2> <h2>Сообщения</h2>
<hr /> <hr/>
<Table <Table
columns={columns} columns={columns}
dataSource={messages} dataSource={messages}
rowClassName={(record) => `event_message_${record.categoryId}`} rowClassName={(record) => `event_message_${record.categoryId} event_message`}
size={'small'} size={'small'}
pagination={{ pageSize: 10 }} pagination={{pageSize: 28}}
rowKey={(record) => record.id} rowKey={(record) => record.id}
/> />
{loader && <Loader />} {loader && <Loader/>}
</> </>
) )
} }

13
src/pages/Report.jsx
View File

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

45
src/pages/TelemetryView.jsx
View File

@ -1,20 +1,19 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react'
import { Row, Col, Select, } from 'antd' import { useParams } from 'react-router-dom'
import {Row, Col, Select, Table} from 'antd'
import { ChartTimeOnline } from '../components/charts/ChartTimeOnline' import { ChartTimeOnline } from '../components/charts/ChartTimeOnline'
import Loader from '../components/Loader'
import { ChartTimeOnlineFooter } from '../components/ChartTimeOnlineFooter' import { ChartTimeOnlineFooter } from '../components/ChartTimeOnlineFooter'
import { CustomColumn } from '../components/CustomColumn' import { CustomColumn } from '../components/CustomColumn'
import { UserOfWells } from '../components/UserOfWells' import { UserOfWells } from '../components/UserOfWells'
import { ModeDisplay } from '../components/ModeDisplay' import { ModeDisplay } from '../components/ModeDisplay'
import { Display } from '../components/Display' import { Display } from '../components/Display'
import notify from '../components/Notification'
import moment from 'moment' import moment from 'moment'
import { Table } from 'antd';
import { MessageService } from '../services/api'
import Loader from '../components/Loader'
import { useParams } from 'react-router-dom'
import { Subscribe } from '../services/signalr' import { Subscribe } from '../services/signalr'
import { DataService } from '../services/api' import { DataService, MessageService } from '../services/api'
import '../styles/message_telemetry.css' import '../styles/message.css'
import Notification from "../components/Notification";
const { Option } = Select const { Option } = Select
@ -165,13 +164,20 @@ export default function TelemetryView(props) {
} }
useEffect(() => { useEffect(() => {
DataService.getData(id) try {
.then(handleReceiveDataSaub) DataService.getData(id)
.catch(error => console.error(error)) .then(handleReceiveDataSaub)
} catch (ex) {
MessageService.getMessage(id) Notification(`Не удалось загрузить данные по скважине ${id}`, 'error')
.then(handleReceiveMessages) }
.catch(error => console.error(error))
try {
MessageService.getMessage(id)
.then(handleReceiveMessages)
} catch (ex) {
Notification(`Не удалось загрузить сообщения по скважине ${id}`, 'error')
console.log(ex)
}
let unSubscribeDataSaubHub = Subscribe('ReceiveDataSaub', `well_${id}`, handleReceiveDataSaub) let unSubscribeDataSaubHub = Subscribe('ReceiveDataSaub', `well_${id}`, handleReceiveDataSaub)
let unSubscribeMessagesHub = Subscribe('ReceiveMessages', `well_${id}`, handleReceiveMessages) let unSubscribeMessagesHub = Subscribe('ReceiveMessages', `well_${id}`, handleReceiveMessages)
@ -184,11 +190,11 @@ export default function TelemetryView(props) {
const colSpan = 24 / (paramsGroups.length) const colSpan = 24 / (paramsGroups.length)
return (<div> return (<div>
{/* <div>Well id: {id}; points count: {saubData.length}</div> */}
<Row style={{ marginBottom: '1rem' }}> <Row style={{ marginBottom: '1rem' }}>
<Col> <Col>
<ModeDisplay data={saubData} /> <ModeDisplay data={saubData} />
</Col> </Col>
<span style={{ flexGrow: 0.1 }}>&nbsp;</span>
<Col> <Col>
Интервал:&nbsp; Интервал:&nbsp;
<Select defaultValue="600" onChange={setChartInterval}> <Select defaultValue="600" onChange={setChartInterval}>
@ -199,7 +205,7 @@ export default function TelemetryView(props) {
<Option value='86400'>1 день</Option> <Option value='86400'>1 день</Option>
</Select> </Select>
</Col> </Col>
<span style={{ flexGrow: 1 }}></span> <span style={{ flexGrow: 1 }}>&nbsp;</span>
<Col> <Col>
<UserOfWells data={saubData}/> <UserOfWells data={saubData}/>
</Col> </Col>
@ -221,7 +227,8 @@ export default function TelemetryView(props) {
showHeader={false} showHeader={false}
columns={columns} columns={columns}
dataSource={messages} dataSource={messages}
rowClassName={(record) => `event_message_${record.categoryId}`} rowClassName={(record) => `event_message_${record.categoryId} event_message`}
className={'message_table'}
size={'small'} size={'small'}
pagination={false} pagination={false}
rowKey={(record) => record.id} rowKey={(record) => record.id}

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

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

57
src/styles/App.less
View File

@ -11,6 +11,11 @@
#root, .app{min-height:100%;} #root, .app{min-height:100%;}
html {
display: flex;
height: 100%;
}
.login_page{ .login_page{
position: absolute; position: absolute;
height:100%; height:100%;
@ -28,7 +33,7 @@
.header { .header {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 4px 24px; //padding: 4px 24px;
} }
.header .logo { .header .logo {
@ -36,14 +41,15 @@
border-radius: 32px; border-radius: 32px;
padding: 8px 24px; padding: 8px 24px;
margin: 8px 10px; margin: 8px 10px;
box-shadow: #fff 2px; box-shadow: 0 0 2px #fff;
} }
.header .title{ .header .title{
flex-grow: 1; flex-grow: 1;
color: #fff; color: #fff;
text-align: center; text-align: start;
justify-content: baseline; justify-content: start;
margin-left: 100px;
} }
.header button{ .header button{
@ -53,9 +59,8 @@
} }
.sheet{ .sheet{
padding: 24px; padding: 5px 24px;
margin: 8px; min-height: 280px;
min-height: 280;
} }
.site-layout-background { .site-layout-background {
@ -71,14 +76,26 @@
flex-wrap: wrap; flex-wrap: wrap;
flex: auto; flex: auto;
} }
.display_header {
font-size: 16px;
flex-grow: 1;
display: flex;
}
.display_label{ .display_label{
font-size: 16px; font-size: 16px;
color: rgb(70, 70, 70); color: rgb(70, 70, 70);
text-align: left; text-align: left;
justify-content: baseline; justify-content: center;
margin: 1px 1rem 1px 1rem; margin: 1px 1rem 1px 1rem;
flex: auto; 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{ .display_value{
@ -95,7 +112,29 @@
.display_small_value{ .display_small_value{
color: rgb(50, 50, 50); color: rgb(50, 50, 50);
text-align: right; text-align: right;
justify-content: baseline; justify-content: center;
margin: 1px 1rem 1px 1rem; margin: 1px 1rem 1px 1rem;
flex: auto; flex: auto;
} }
.menu_title {
display: flex;
}
.submit_button {
display: flex;
align-items: center;
padding: 20px;
border-radius: 5px;
}
.well_menu {
margin-top: 0;
padding-top: 0;
height: 100%;
border-right: 0;
}
tr.table_row_size {
height: 10px;
}

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 { body {
margin: 0; margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 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; font-size: 14px;
padding: 1px !important;
border-bottom: 1px !important;
} }
.event_message_off { .event_message_off {
@ -22,11 +32,9 @@
background: gold; background: gold;
} }
.event_message_3, .event_message_3 {
.event_message_3:hover {
color: #c0c0c0; color: #c0c0c0;
background: #505060; background: #505060;
height: 1px;
} }
td.ant-table-column-sort { td.ant-table-column-sort {