forked from ddrilling/asb_cloud_front
Обновлены стили страницы "Статистика использования уставок"
This commit is contained in:
parent
842e1773b4
commit
6a81db11b6
@ -13,15 +13,15 @@ import { useElementSize } from '@utils'
|
||||
|
||||
import { makeGetColor } from '@pages/Well/WellOperations/Tvd'
|
||||
|
||||
import '@styles/limiting_parameter_statistics.less'
|
||||
import '@styles/pages/limiting_parameter_statistics.less'
|
||||
|
||||
const columns = [
|
||||
makeColumn('Цвет', 'color', { width: 50, render: (d) => (
|
||||
<div style={{ backgroundColor: d, padding: '5px 0' }} />
|
||||
) }),
|
||||
makeTextColumn('Уставка', 'nameFeedRegulator'),
|
||||
makeNumericColumn('Проходка, м', 'depth'),
|
||||
makeNumericColumn('Кол-во включений', 'numberInclusions', undefined, undefined, makeNumericRender(0)),
|
||||
makeNumericColumn('Проходка, м', 'depth', undefined, undefined, 140),
|
||||
makeNumericColumn('Кол-во включений', 'numberInclusions', makeNumericRender(0), undefined, 150),
|
||||
]
|
||||
|
||||
export const LimitingParameterStatistics = memo(() => {
|
||||
@ -59,16 +59,16 @@ export const LimitingParameterStatistics = memo(() => {
|
||||
}
|
||||
}
|
||||
if (record.idFeedRegulator === selectedRegulator)
|
||||
out.style = { background: '#FAFAFA', fontSize: '16px', fontWeight: '600' }
|
||||
out.className = 'dd-selected-row'
|
||||
return out
|
||||
}, [selectedRegulator])
|
||||
|
||||
const onPieOver = useCallback(function (e, d) {
|
||||
const onPieOver = useCallback(function (_, d) { // Стрелочная функция не подойдёт из-за использования `this`
|
||||
setSelectedRegulator(d.data.idFeedRegulator)
|
||||
d3.select(this).attr('transform', 'scale(1.05)')
|
||||
}, [])
|
||||
|
||||
const onPieOut = useCallback(function (e, d) {
|
||||
const onPieOut = useCallback(function () { // Стрелочная функция не подойдёт из-за использования `this`
|
||||
setSelectedRegulator(null)
|
||||
d3.select(this).attr('transform', 'scale(1)')
|
||||
}, [])
|
||||
@ -181,15 +181,15 @@ export const LimitingParameterStatistics = memo(() => {
|
||||
<Button onClick={() => setIsOpen(true)}>Статистика использования уставок</Button>
|
||||
<Modal
|
||||
centered
|
||||
width={1024}
|
||||
width={950}
|
||||
footer={false}
|
||||
title={'Статистика использования уставок'}
|
||||
onCancel={() => setIsOpen(false)}
|
||||
open={isOpen}
|
||||
>
|
||||
<LoaderPortal show={isLoading}>
|
||||
<LoaderPortal show={isLoading} className={'limit-parameter-stats-page'}>
|
||||
<div className={'filter-groups'}>
|
||||
<Input.Group compact style={{ flex: 1 }}>
|
||||
<Input.Group compact style={{ flex: 2 }}>
|
||||
<Input
|
||||
addonBefore={(
|
||||
<Radio
|
||||
@ -203,7 +203,7 @@ export const LimitingParameterStatistics = memo(() => {
|
||||
disabled={mode !== 'depth'}
|
||||
prefix={'От'}
|
||||
suffix={'м'}
|
||||
style={{ width: 'calc(50% + 113px / 2)', textAlign: 'right' }}
|
||||
style={{ width: 'calc(50% + 128px / 2)', textAlign: 'right' }}
|
||||
onChange={(e) => onDepthChanged(e, 'from')}
|
||||
value={depthFilter.from}
|
||||
/>
|
||||
@ -212,12 +212,12 @@ export const LimitingParameterStatistics = memo(() => {
|
||||
disabled={mode !== 'depth'}
|
||||
prefix={'До'}
|
||||
suffix={'м'}
|
||||
style={{ width: 'calc(50% - 113px / 2)', textAlign: 'right' }}
|
||||
style={{ width: 'calc(50% - 128px / 2)', textAlign: 'right' }}
|
||||
onChange={(e) => onDepthChanged(e, 'to')}
|
||||
value={depthFilter.to}
|
||||
/>
|
||||
</Input.Group>
|
||||
<Input.Group compact style={{ flex: 1 }}>
|
||||
<Input.Group compact style={{ flex: 3 }}>
|
||||
<Input style={{ width: 128 }} addonBefore={(
|
||||
<Radio
|
||||
checked={mode === 'time'}
|
||||
@ -240,9 +240,9 @@ export const LimitingParameterStatistics = memo(() => {
|
||||
{data ? (
|
||||
<svg ref={setSvgRef} width={'100%'} height={'100%'}>
|
||||
<g transform={`translate(${width / 2}, ${height / 2})`}>
|
||||
<g className={'slices'} stroke={'#0005'} />
|
||||
<g className={'labels'} fill={'black'} />
|
||||
<g className={'lines'} fill={'none'} stroke={'black'} />
|
||||
<g className={'slices'} />
|
||||
<g className={'labels'} />
|
||||
<g className={'lines'} />
|
||||
</g>
|
||||
</svg>
|
||||
) : (
|
||||
|
@ -1,29 +0,0 @@
|
||||
.filter-groups {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
|
||||
& .filter-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
& .date-filter {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-label {
|
||||
width: 100%;
|
||||
margin: 20px 0;
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.lps-pie-chart {
|
||||
min-height: 30vh;
|
||||
max-height: 50vh;
|
||||
}
|
54
src/styles/pages/limiting_parameter_statistics.less
Normal file
54
src/styles/pages/limiting_parameter_statistics.less
Normal file
@ -0,0 +1,54 @@
|
||||
@import '../include/antd_theme';
|
||||
@import '../mixins';
|
||||
|
||||
.limit-parameter-stats-page {
|
||||
& .filter-groups {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
|
||||
& .filter-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
& .date-filter {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
& .modal-label {
|
||||
width: 100%;
|
||||
margin: 20px 0;
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dd-selected-row {
|
||||
background: @primary;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
& .lps-pie-chart {
|
||||
min-height: 30vh;
|
||||
max-height: 50vh;
|
||||
|
||||
& .slices {
|
||||
stroke: #0005;
|
||||
}
|
||||
|
||||
& .labels {
|
||||
fill: white;
|
||||
}
|
||||
|
||||
& .lines {
|
||||
fill: none;
|
||||
stroke: white;
|
||||
.no-events();
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user