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

Исправлено оповещение об ошибке в TelemetryView. Испарвлены стили.

Browse Source
This commit is contained in:
Alexey 2021-05-27 13:46:46 +05:00
parent 6f12d57805
commit dd46525c89
5 changed files with 107 additions and 69 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 className="menu_title"> <div className="chart-footer">
<ControlOutlined className='display_label'/> <ControlOutlined className='display_label'/>
{spField} {spField}
</div> </div>

2
src/components/Well.jsx
View File

@ -41,7 +41,7 @@ export default function Well() {
</Menu> </Menu>
<Layout> <Layout>
<Content className="site-layout-background sheet"> <Content className="site-layout-background">
<Switch> <Switch>
<Route path="/well/:id/file"> <Route path="/well/:id/file">
<Files/> <Files/>

2
src/pages/Main.jsx
View File

@ -13,7 +13,7 @@ export default function Main() {
<Content> <Content>
<PageHeader/> <PageHeader/>
<Layout> <Layout>
<Content className="site-layout-background sheet well_menu"> <Content className="site-layout-background sheet">
<Switch> <Switch>
<Route path="/well/:id/"> <Route path="/well/:id/">
<Well/> <Well/>

166
src/pages/TelemetryView.jsx
View File

@ -1,83 +1,120 @@
import { useState, useEffect } from 'react' import {useState, useEffect} from 'react'
import { useParams } from 'react-router-dom' import {useParams} from 'react-router-dom'
import {Row, Col, Select, Table} from 'antd' 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 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 notify from '../components/Notification'
import moment from 'moment' import moment from 'moment'
import { Subscribe } from '../services/signalr' import {Subscribe} from '../services/signalr'
import { DataService, MessageService } from '../services/api' import {DataService, MessageService} from '../services/api'
import '../styles/message.css' import '../styles/message.css'
import Notification from "../components/Notification"; import Notification from "../components/Notification";
const { Option } = Select const {Option} = Select
const dash = [7, 3] const dash = [7, 3]
const blockHeightGroup = { const blockHeightGroup = {
label: "Высота блока", label: "Высота блока",
yDisplay: false, yDisplay: false,
linePv: { label: "blockHeight", units: 'м', xAccessorName: "blockHeight", yAccessorName: "date", color: '#333' }, linePv: {label: "blockHeight", units: 'м', xAccessorName: "blockHeight", yAccessorName: "date", color: '#333'},
} }
const blockSpeedGroup = { const blockSpeedGroup = {
label: "Скорость блока", label: "Скорость блока",
yDisplay: false, yDisplay: false,
linePv: { label: "blockSpeed", units: 'м/ч', xAccessorName: "blockSpeed", yAccessorName: "date", color: '#0a0' }, linePv: {label: "blockSpeed", units: 'м/ч', xAccessorName: "blockSpeed", yAccessorName: "date", color: '#0a0'},
lineSp: { label: "blockSpeedSp", units: 'м/ч', xAccessorName: "blockSpeedSp", yAccessorName: "date", color: '#0a0' }, lineSp: {label: "blockSpeedSp", units: 'м/ч', xAccessorName: "blockSpeedSp", yAccessorName: "date", color: '#0a0'},
} }
const pressureGroup = { const pressureGroup = {
label: "Давление", label: "Давление",
yDisplay: false, yDisplay: false,
linePv: { label: "pressure", units: 'атм', xAccessorName: "pressure", yAccessorName: "date", color: '#c00' }, linePv: {label: "pressure", units: 'атм', xAccessorName: "pressure", yAccessorName: "date", color: '#c00'},
lineSp: { label: "pressureSp", units: 'атм', xAccessorName: "pressureSp", yAccessorName: "date", color: '#c00' }, lineSp: {label: "pressureSp", units: 'атм', xAccessorName: "pressureSp", yAccessorName: "date", color: '#c00'},
lineIdle: { label: "pressureIdle", units: 'атм', xAccessorName: "pressureIdle", yAccessorName: "date", color: '#c00' }, lineIdle: {label: "pressureIdle", units: 'атм', xAccessorName: "pressureIdle", yAccessorName: "date", color: '#c00'},
linesOther: [ linesOther: [
{ label: "мекс. перепад", units: 'атм', xAccessorName: "pressureDeltaLimitMax", yAccessorName: "date", color: '#c00' }, {
label: "мекс. перепад",
units: 'атм',
xAccessorName: "pressureDeltaLimitMax",
yAccessorName: "date",
color: '#c00'
},
], ],
} }
const axialLoadGroup = { const axialLoadGroup = {
label: "Осевая нагрузка", label: "Осевая нагрузка",
yDisplay: false, yDisplay: false,
linePv: { label: "axialLoad", units: 'т', xAccessorName: "axialLoad", yAccessorName: "date", color: '#00a' }, linePv: {label: "axialLoad", units: 'т', xAccessorName: "axialLoad", yAccessorName: "date", color: '#00a'},
lineSp: { label: "axialLoadSp", units: 'т', xAccessorName: "axialLoadSp", yAccessorName: "date", color: '#00a', dash }, lineSp: {label: "axialLoadSp", units: 'т', xAccessorName: "axialLoadSp", yAccessorName: "date", color: '#00a', dash},
linesOther: [ linesOther: [
{ label: "axialLoadLimitMax", units: 'т', xAccessorName: "axialLoadLimitMax", yAccessorName: "date", color: '#00a' }, {label: "axialLoadLimitMax", units: 'т', xAccessorName: "axialLoadLimitMax", yAccessorName: "date", color: '#00a'},
], ],
} }
const hookWeightGroup = { const hookWeightGroup = {
label: "Ввес на крюке", label: "Ввес на крюке",
yDisplay: false, yDisplay: false,
linePv: { label: "hookWeight", units: 'т', xAccessorName: "hookWeight", yAccessorName: "date", color: '#0aa' }, linePv: {label: "hookWeight", units: 'т', xAccessorName: "hookWeight", yAccessorName: "date", color: '#0aa'},
lineIdle: { label: "hookWeightIdle", units: 'т', xAccessorName: "hookWeightIdle", yAccessorName: "date", color: '#0aa', dash }, lineIdle: {
label: "hookWeightIdle",
units: 'т',
xAccessorName: "hookWeightIdle",
yAccessorName: "date",
color: '#0aa',
dash
},
linesOther: [ 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 = { const rotorTorqueGroup = {
label: "Момент на роторе", label: "Момент на роторе",
yDisplay: false, yDisplay: false,
linePv: { label: "rotorTorque", units: 'кН·м', xAccessorName: "rotorTorque", yAccessorName: "date", color: '#a0a' }, linePv: {label: "rotorTorque", units: 'кН·м', xAccessorName: "rotorTorque", yAccessorName: "date", color: '#a0a'},
lineSp: { label: "rotorTorqueSp", units: 'кН·м', xAccessorName: "rotorTorqueSp", yAccessorName: "date", color: '#a0a' }, lineSp: {label: "rotorTorqueSp", units: 'кН·м', xAccessorName: "rotorTorqueSp", yAccessorName: "date", color: '#a0a'},
lineIdle: { label: "rotorTorqueIdle", units: 'кН·м', xAccessorName: "rotorTorqueIdle", yAccessorName: "date", color: '#a0a' }, lineIdle: {
label: "rotorTorqueIdle",
units: 'кН·м',
xAccessorName: "rotorTorqueIdle",
yAccessorName: "date",
color: '#a0a'
},
linesOther: [ 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] const paramsGroups = [blockHeightGroup, blockSpeedGroup, pressureGroup, axialLoadGroup, hookWeightGroup, rotorTorqueGroup]
export const Column = ({ lineGroup, data, interval }) => { export const Column = ({lineGroup, data, interval}) => {
let lines = [lineGroup.linePv] let lines = [lineGroup.linePv]
if (lineGroup.lineSp) if (lineGroup.lineSp)
@ -101,7 +138,7 @@ export const Column = ({ lineGroup, data, interval }) => {
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} />
@ -110,9 +147,9 @@ export const Column = ({ lineGroup, data, interval }) => {
// Словарь категорий для строк таблицы // Словарь категорий для строк таблицы
const categoryDictionary = { const categoryDictionary = {
1: { title: 'Авария' }, 1: {title: 'Авария'},
2: { title: 'Предупреждение' }, 2: {title: 'Предупреждение'},
3: { title: 'Информация' }, 3: {title: 'Информация'},
} }
// Конфигурация таблицы // Конфигурация таблицы
@ -144,7 +181,7 @@ const columns = [
]; ];
export default function TelemetryView(props) { export default function TelemetryView(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)
const [messages, setMessages] = useState([]) const [messages, setMessages] = useState([])
@ -164,20 +201,19 @@ export default function TelemetryView(props) {
} }
useEffect(() => { useEffect(() => {
try { DataService.getData(id)
DataService.getData(id) .then(handleReceiveDataSaub)
.then(handleReceiveDataSaub) .catch((ex) => {
} catch (ex) { Notification(`Не удалось загрузить данные по скважине "${id}"`, 'error')
Notification(`Не удалось загрузить данные по скважине ${id}`, 'error') console.log(ex)
} })
try { MessageService.getMessage(id)
MessageService.getMessage(id) .then(handleReceiveMessages)
.then(handleReceiveMessages) .catch((ex) => {
} catch (ex) { Notification(`Не удалось загрузить сообщения по скважине "${id}"`, 'error')
Notification(`Не удалось загрузить сообщения по скважине ${id}`, 'error') console.log(ex)
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)
@ -190,11 +226,11 @@ export default function TelemetryView(props) {
const colSpan = 24 / (paramsGroups.length) const colSpan = 24 / (paramsGroups.length)
return (<div> return (<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> <span style={{flexGrow: 0.1}}>&nbsp;</span>
<Col> <Col>
Интервал:&nbsp; Интервал:&nbsp;
<Select defaultValue="600" onChange={setChartInterval}> <Select defaultValue="600" onChange={setChartInterval}>
@ -205,34 +241,34 @@ export default function TelemetryView(props) {
<Option value='86400'>1 день</Option> <Option value='86400'>1 день</Option>
</Select> </Select>
</Col> </Col>
<span style={{ flexGrow: 1 }}>&nbsp;</span> <span style={{flexGrow: 1}}>&nbsp;</span>
<Col> <Col>
<UserOfWells data={saubData}/> <UserOfWells data={saubData}/>
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col span={2} > <Col span={2}>
<CustomColumn data={saubData} /> <CustomColumn data={saubData}/>
</Col> </Col>
<Col span={24 - 2}> <Col span={24 - 2}>
<Row> <Row>
{paramsGroups.map(group => {paramsGroups.map(group =>
<Col span={colSpan} className='border_small' key={group.label}> <Col span={colSpan} className='border_small' key={group.label}>
<Column data={saubData} lineGroup={group} interval={chartInterval} /> <Column data={saubData} lineGroup={group} interval={chartInterval}/>
</Col>)} </Col>)}
</Row> </Row>
</Col> </Col>
</Row> </Row>
<Table <Table
showHeader={false} showHeader={false}
columns={columns} columns={columns}
dataSource={messages} dataSource={messages}
rowClassName={(record) => `event_message_${record.categoryId} event_message`} rowClassName={(record) => `event_message_${record.categoryId} event_message`}
className={'message_table'} className={'message_table'}
size={'small'} size={'small'}
pagination={false} pagination={false}
rowKey={(record) => record.id} rowKey={(record) => record.id}
/> />
{loader && <Loader />} {loader && <Loader/>}
</div>) </div>)
} }

4
src/styles/App.less
View File

@ -61,6 +61,7 @@ html {
.sheet{ .sheet{
padding: 5px 24px; padding: 5px 24px;
min-height: 280px; min-height: 280px;
margin: 0 15px;
} }
.site-layout-background { .site-layout-background {
@ -117,7 +118,8 @@ html {
flex: auto; flex: auto;
} }
.menu_title { .menu_title,
.chart-footer {
display: flex; display: flex;
} }