forked from ddrilling/asb_cloud_front
Стилистические исправления страница Операции
This commit is contained in:
parent
45bd384eaf
commit
e75d75cb5f
@ -33,19 +33,17 @@ export const OperationsChart = memo(({ data, yDomain, width, height, bottom = 30
|
||||
useEffect(() => d3.select(axisY.current).call(d3.axisLeft(y)), [axisY, y]) // Рисуем ось Y
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={'page-left'} ref={setRef}>
|
||||
<svg width={width ?? '100%'} height={height ?? '100%'}>
|
||||
<g ref={axisX} className={'axis x'} transform={`translate(${left}, ${h - bottom})`} />
|
||||
<g ref={axisY} className={'axis y'} transform={`translate(${left}, ${top})`} />
|
||||
<g transform={`translate(${left}, ${top})`} stroke={color}>
|
||||
{lines.map(({ x, y }, i) => (
|
||||
<line key={i} x1={x} y1={h - bottom - top} x2={x} y2={y} />
|
||||
))}
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</>
|
||||
<div className={'page-left'} ref={setRef}>
|
||||
<svg width={width ?? '100%'} height={height ?? '100%'}>
|
||||
<g ref={axisX} className={'axis x'} transform={`translate(${left}, ${h - bottom})`} />
|
||||
<g ref={axisY} className={'axis y'} transform={`translate(${left}, ${top})`} />
|
||||
<g transform={`translate(${left}, ${top})`} stroke={color}>
|
||||
{lines.map(({ x, y }, i) => (
|
||||
<line key={i} x1={x} y1={h - bottom - top} x2={x} y2={y} />
|
||||
))}
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
||||
|
@ -1,14 +1,14 @@
|
||||
import { memo } from 'react'
|
||||
|
||||
import { Table, makeTextColumn, makeNumericColumn, makeDateColumn } from '@components/Table'
|
||||
import { Table, makeTextColumn, makeNumericColumn, makeDateColumn, makeNumericRender } from '@components/Table'
|
||||
|
||||
import '@styles/detected_operations.less'
|
||||
|
||||
export const columns = [
|
||||
makeTextColumn('Пользователь', 'telemetryUserName', null, null, null, { width: 200 }),
|
||||
makeDateColumn('Дата начала', 'dateStart', null, undefined, { width: 150 }),
|
||||
makeNumericColumn('Продолжительность (мин)', 'durationMinutes', null, null, null, 150),
|
||||
makeNumericColumn('Глубина (м)', 'depthStart', null, null, null, 100),
|
||||
makeNumericColumn('Продолжительность (мин)', 'durationMinutes', null, null, makeNumericRender(2), 150),
|
||||
makeNumericColumn('Глубина (м)', 'depthStart', null, null, makeNumericRender(1), 100),
|
||||
]
|
||||
|
||||
export const OperationsTable = memo(({ data, height, ...other }) => (
|
||||
|
@ -1,6 +1,6 @@
|
||||
import moment from 'moment'
|
||||
import { InputNumber } from 'antd'
|
||||
import { memo, useCallback, useContext, useEffect, useState } from 'react'
|
||||
import { InputNumber } from 'antd'
|
||||
import moment from 'moment'
|
||||
|
||||
import { IdWellContext } from '@asb/context'
|
||||
import LoaderPortal from '@components/LoaderPortal'
|
||||
@ -17,7 +17,7 @@ import '@styles/detected_operations.less'
|
||||
export const Operations = memo(() => {
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [dateRange, setDateRange] = useState([])
|
||||
const [yDomain, setYDomain] = useState(10)
|
||||
const [yDomain, setYDomain] = useState(20)
|
||||
const [dates, setDates] = useState()
|
||||
const [data, setData] = useState([])
|
||||
|
||||
@ -62,11 +62,11 @@ export const Operations = memo(() => {
|
||||
<DateRangeWrapper
|
||||
value={dates}
|
||||
onChange={setDates}
|
||||
disabled={isLoading}
|
||||
disabledDate={disabledDates}
|
||||
disabledTime={disabledTimes}
|
||||
style={{ marginRight: '10px' }}
|
||||
showTime={{ hideDisabledOptions: true }}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<InputNumber
|
||||
min={1}
|
||||
@ -80,7 +80,7 @@ export const Operations = memo(() => {
|
||||
</div>
|
||||
<LoaderPortal show={isLoading}>
|
||||
<div className={'page-main'}>
|
||||
<OperationsChart data={data} yDomain={yDomain} height={'50vh'} />
|
||||
<OperationsChart data={data} height={'50vh'} yDomain={yDomain} />
|
||||
<OperationsTable data={data} height={'20vh'} />
|
||||
</div>
|
||||
</LoaderPortal>
|
||||
|
@ -29,7 +29,7 @@ export const Telemetry = memo(() => {
|
||||
<PrivateMenu.Link key={'messages'} icon={<AlertOutlined/>} title={'Сообщения'} />
|
||||
<PrivateMenu.Link key={'archive'} icon={<DatabaseOutlined />} title={'Архив'} />
|
||||
<PrivateMenu.Link key={'dashboard_nnb'} title={'ННБ'} />
|
||||
<PrivateMenu.Link key={'operations'} title={'Отмеченные операции'} />
|
||||
<PrivateMenu.Link key={'operations'} title={'Операции'} />
|
||||
</PrivateMenu>
|
||||
|
||||
<Layout>
|
||||
|
Loading…
Reference in New Issue
Block a user