asb_cloud_front/src/pages/Cluster/ClusterWells.jsx

import { useParams } from "react-router-dom";
import { Link } from "react-router-dom";
import { useState, useEffect } from "react";
import { Table, Tag, Button, Modal } from "antd";
import {
  makeTextColumn,
  makeGroupColumn,
  makeNumericColumn,
  makeNumericColumnPlanFact,
  calcAndUpdateStatsBySections,
} from "../../components/Table";
import { invokeWebApiWrapperAsync } from '../../components/factory';
import { WellOperationStatService } from '../../services/api';
import DepthToDay from '../../components/charts/DepthToDay';

const filtersMinMax = [
  {
    text: "min",
    value: "min",
  },
  {
    text: "max",
    value: "max",
  },
];

const filtersWellsType = [
  {
    text: "Наклонно-направленная",
    value: "Наклонно-направленная",
  },
  {
    text: "Горизонтальная",
    value: "Горизонтальная",
  },
];

export default function ClusterWells({ clusterData }) {
  let { id } = useParams();
  const [wellsStat, setWellsStat] = useState([]);
  const [selectedWellId, setSelectedWellId] = useState(0);
  const [isModalVisible, setIsModalVisible] = useState(false)
  const [dataPlan, setDataPlan] = useState([]);
  const [dataFact, setDataFact] = useState([]);
  const [dataForecast, setDataForecast] = useState([]);

  useEffect(() => {
    invokeWebApiWrapperAsync(
      async () => {
        const operations = await WellOperationStatService.getTvd(selectedWellId);

        const planData = operations.map(el => { 
          return {key: el.plan?.id, depth: el.plan?.wellDepth, date: el.plan?.startDate}
        }).filter(el => el.key)

        setDataPlan(planData)

        const factData = operations.map(el => { 
          return {key: el.fact?.id, depth: el.fact?.wellDepth, date: el.fact?.startDate}
        }).filter(el => el.key)

        setDataFact(factData)

        const predictData = operations.map(el => { 
          return {key: el.predict?.id, depth: el.predict?.wellDepth, date: el.predict?.startDate}
        }).filter(el => el.key)

        setDataForecast(predictData)
      },
      null,
      `Не удалось загрузить операции по скважине "${selectedWellId}"`,
    );
  }, [selectedWellId]);

  const closeModal = () => {
    setIsModalVisible(false)
  }

  calcAndUpdateStatsBySections(wellsStat ?? [], [
    "factStart",
    "factEnd",
    "periodPlan",
    "periodFact",
    "rateOfPenetrationPlan",
    "rateOfPenetrationFact",
    "routeSpeedPlan",
    "routeSpeedFact",
    "notProductiveTime",
  ]);

  useEffect(() => {
    let tableData = clusterData.statsWells?.map((el) => {
      return {
        key: el.id,
        id: el.id,
        caption: el.caption,
        wellType: el.wellType,
        factStart: new Date(el.total.fact.start).toLocaleString(),
        factEnd: new Date(el.total.fact.end).toLocaleString(),
        periodPlan: (
          Math.abs(
            new Date(el.total.plan.start) - new Date(el.total.plan.end)
          ) /
          (1000 * 60 * 60 * 24)
        ).toFixed(2),
        periodFact: (
          Math.abs(
            new Date(el.total.fact.start) - new Date(el.total.fact.end)
          ) /
          (1000 * 60 * 60 * 24)
        ).toFixed(2),
        rateOfPenetrationPlan: el.total.plan.rop.toFixed(2),
        rateOfPenetrationFact: el.total.fact.rop.toFixed(2),
        routeSpeedPlan: el.total.plan.routeSpeed.toFixed(2),
        routeSpeedFact: el.total.fact.routeSpeed.toFixed(2),
        notProductiveTimePlan: el.total.plan.nonProductiveHours.toFixed(2),
        notProductiveTimeFact: el.total.fact.nonProductiveHours.toFixed(2),
        companies: el.companies,
      };
    });

    setWellsStat(tableData);
  }, [id, clusterData]);

  const columns = [
    makeTextColumn("скв №", "caption", null, null, (_, item) => (
      <Link to={`/well/${item.id}`}>{item.caption}</Link>
    )),
    makeTextColumn("Тип скв.", "wellType", filtersWellsType),
    makeGroupColumn("Фактические сроки", [
      makeNumericColumn("начало", "factStart"),
      makeNumericColumn("окончание", "factEnd"),
    ]),
    makeNumericColumnPlanFact("Продолжительность", "period", filtersMinMax),
    makeNumericColumnPlanFact("МСП", "rateOfPenetration", filtersMinMax),
    makeNumericColumnPlanFact("Рейсовая скорость", "routeSpeed", filtersMinMax),
    makeNumericColumnPlanFact("НПВ, сут", "notProductiveTime", filtersMinMax),
    {
      title: "График глубина-день",
      render: (_, item) => <Button onClick={()=> {
        setIsModalVisible(true) 
        setSelectedWellId(_.id)
      }}>Открыть</Button>,
    },
    {
      title: "Таблица по операциям",
      render: (_) => <Button>Открыть</Button>,
    },
    {
      title: "Подрядчики",
      key: "companies",
      dataIndex: "companies",
      render: (item) =>
        item.map((company) => <Tag color="blue">{company.caption}</Tag>),
    },
  ];

  return (
    <div>
      <Table
        columns={columns}
        dataSource={wellsStat}
        size={"small"}
        bordered
        pagination={false}
        rowKey={(record) => record.id}
      />

      <Modal
      title='Modal'
      centered
      visible={isModalVisible}
      onOk={closeModal}
      onCancel={closeModal}
      width={800}
      >
        <DepthToDay 
          dataPlan={dataPlan} 
          dataFact={dataFact} 
          dataForecast={dataForecast} />
      </Modal>
    </div>
  );
}