Обновлены стили страницы "Статистика использования уставок"

This commit is contained in:
goodmice 2022-12-28 18:21:31 +05:00
parent 842e1773b4
commit 6a81db11b6
No known key found for this signature in database
GPG Key ID: EA4AA16454AC96C8
3 changed files with 69 additions and 44 deletions

View File

@ -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>
) : (

View File

@ -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;
}

View 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();
}
}
}