asb_cloud_front/src/pages/WellAnalysis.jsx

import {Table, Select, DatePicker, ConfigProvider} from 'antd';
import {AnalyticsService} from '../services/api'
import {useState, useEffect} from 'react'
import {useParams} from 'react-router-dom'
import notify from '../components/notify'
import LoaderPortal from '../components/LoaderPortal'
import locale from "antd/lib/locale/ru_RU";
import moment from 'moment'
import '../styles/message.css'

const {Option} = Select
const pageSize = 26
const {RangePicker} = DatePicker;

const columns = [
    {
        title: 'Название операции',
        key: 'name',
        dataIndex: 'name',
    },
    {
        title: 'Дата начала операции',
        key: 'beginDate',
        dataIndex: 'beginDate',
        render: (item) => moment.utc(item).local().format('DD MMM YYYY, HH:mm:ss')
    },
    {
        title: 'Дата окончания операции',
        key: 'endDate',
        dataIndex: 'endDate',
        render: (item) => moment.utc(item).local().format('DD MMM YYYY, HH:mm:ss')
    },
    {
        title: 'Глубина скважины в начале операции',
        key: 'beginWellDepth',
        dataIndex: 'startWellDepth',
    },
    {
        title: 'Глубина скважины в конце операции',
        key: 'endWellDepth',
        dataIndex: 'endWellDepth',
    }
];

const filterOptions = [
    {label: 'Невозможно определить операцию', value: 1},
    {label: 'Роторное бурение', value: 2},
    {label: 'Слайдирование', value: 3},
    {label: 'Подъем с проработкой', value: 4},
    {label: 'Спуск с проработкой', value: 5},
    {label: 'Подъем с промывкой', value: 6},
    {label: 'Спуск с промывкой', value: 7},
    {label: 'Спуск в скважину', value: 8},
    {label: 'Спуск с вращением', value: 9},
    {label: 'Подъем из скважины', value: 10},
    {label: 'Подъем с вращением', value: 11},
    {label: 'Промывка в покое', value: 12},
    {label: 'Промывка с вращением', value: 13},
    {label: 'Удержание в клиньях', value: 14},
    {label: 'Неподвижное состояние', value: 15},
    {label: 'Вращение без циркуляции', value: 16},
    {label: 'На поверхности', value: 17}
]

export default function WellAnalysis() {
    let {id} = useParams()

    const [page, setPage] = useState(1)
    const [range, setRange] = useState([])
    const [categories, setCategories] = useState([])
    const [pagination, setPagination] = useState(null)
    const [operations, setOperations] = useState([])

    const [loader, setLoader] = useState(false)

    const children = filterOptions.map((line) => <Option key={line.value}>{line.label}</Option>)

    const onChangeRange = (range) => {
        setRange(range)
      }

    useEffect(() => {
        const GetOperations = async () => {
          setLoader(true)
          try {
            let begin = null
            let end = null
            if (range?.length > 1) {
              begin = range[0].toISOString()
              end = range[1].toISOString()
            }

            await AnalyticsService.getOperationsByWell(
                `${id}`,
                (page-1) * pageSize,
                pageSize,
                categories,
                begin,
                end).then((paginatedOperations) => {
                    setOperations(paginatedOperations?.items.map(o => {
                        return {
                            key: o.id,
                            begin: o.date,
                            ...o
                        }
                    }))

                    setPagination({
                        total: paginatedOperations?.count,
                        current: Math.floor(paginatedOperations?.skip / pageSize),
                    })
                }
            )
          } catch (ex) {
                notify(`Не удалось загрузить операции по скважине "${id}"`, 'error')
            console.log(ex)
          }
          setLoader(false)
        }
        GetOperations()
    }, [id, categories, range, page])

    return(<>
        <div className='filter-group'>
            <h3 className='filter-group-heading'>Фильтр операций</h3>
                <Select
                    mode="multiple"
                    allowClear
                    placeholder="Фильтр операций"
                    className="filter-selector"
                    value={categories}
                    onChange={setCategories}>
                    {children}
                </Select>
                <ConfigProvider locale={locale}>
                    <RangePicker
                        showTime
                        placeholder={["Дата начала операции", "Дата окончания операции"]}
                        onChange={onChangeRange}
                    />
                </ConfigProvider>
        </div>
        <LoaderPortal show={loader}>
        <Table
          columns={columns}
          dataSource={operations}
          size={'small'}
          pagination={{
            pageSize: pageSize,
            showSizeChanger: false,
            total: pagination?.total,
            current: page,
            onChange: (page) => setPage(page)
          }}
          rowKey={(record) => record.id}
        />
        </LoaderPortal>
    </>)
  }