asb_cloud_front/src/pages/WellAnalysis.jsx

import { Table, Select, DatePicker } from "antd";
import { TelemetryAnalyticsService } 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 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 TelemetryAnalyticsService.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>
        <RangePicker
          showTime
          placeholder={["Дата начала операции", "Дата окончания операции"]}
          onChange={onChangeRange}
        />
      </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>
    </>
  );
}