CF2-28 Создать страницу детализации куста(Cluster). Перенести на нее вкладку анализ (лучшая/худшая скважина)

src/pages/Cluster.jsx

@@ -1,8 +1,143 @@
 import {useParams} from "react-router-dom";
+import {Link} from "react-router-dom";
+import LoaderPortal from '../components/LoaderPortal'
+import { useState, useEffect } from "react";
+import {ClusterService} from '../services/api'
+import notify from '../components/notify'
+import {Table, Tag, Button} from 'antd';
 
-export default function Cluster() {
-  
+const columns = [
+  {
+    title: 'скв №',
+    key: 'caption',
+    dataIndex: 'caption',
+    render: (_, item) => <Link to={`/well/${item.id}`}>{item.caption}</Link>
+  },
+  {
+    title: 'Тип скв.',
+    key: 'wellType',
+    dataIndex: 'wellType',
+  },
+  {
+    title: 'Фактические сроки бурения',
+    children: [
+      {
+        title: 'начало',
+        key: 'factStart',
+        dataIndex: 'factStart',
+      },
+      {
+        title: 'окончание',
+        key: 'factEnd',
+        dataIndex: 'factEnd',
+      },
+    ]
+  },
+  {
+    title: 'Продолжительность бурения',
+    children: [      
+      {
+        title: 'план',
+        key: 'periodPlan',
+        dataIndex: 'periodPlan',
+      },
+      {
+        title: 'факт',
+        key: 'periodFact',
+        dataIndex: 'periodFact',
+      },
+    ]
+  },
+  {
+    title: 'МСП за скв',
+    children: [
+      {
+        title: 'план',
+        key: 'rateOfPenetrationPlan',
+        dataIndex: 'rateOfPenetrationPlan',
+      },
+      {
+        title: 'факт',
+        key: 'rateOfPenetrationFact',
+        dataIndex: 'rateOfPenetrationFact',
+      },
+    ],
+  },
+  {
+    title: 'Рейсовая скорость за скв',
+    children: [
+      {
+        title: 'план',
+        key: 'routeSpeedPlan',
+        dataIndex: 'routeSpeedPlan',
+      },
+      {
+        title: 'факт',
+        key: 'routeSpeedFact',
+        dataIndex: 'routeSpeedFact',
+      },
+    ],
+  },
+  {
+    title: 'Секции',
+    key: 'sections',
+    dataIndex: 'sections',
+    render: (item) => (<span>таблица по секциям</span>)
+  },
+  {
+    title: 'График глубина-день',
+    render: _ => (<Button>Открыть</Button>)
+  },
+  {
+    title: 'Таблица по операциям',
+    render: _ => (<Button>Открыть</Button>)
+  },
+  {
+    title: 'Подрядчики',
+    key: 'companies',
+    dataIndex: 'companies',
+    render: (item) => item.map(company => <Tag color="blue">{company.caption}</Tag>)
+  },
+];
+
+export default function Cluster() {  
   let { id } = useParams()
+  const [clusterTitle, setClusterTitle] = useState("")
+  const [wellsStat, setWellsStat] = useState(null)
+  const [showLoader, setShowLoader] = useState(false)
 
-  return(<div>Куст {id}</div>)
+  useEffect(()=>{
+    const updateWellsStat = async() => {
+      setShowLoader(true)
+      try{
+        const msInDay = 1000*60*60*24
+        const data = await ClusterService.getStat(id)
+        const wellsStat = data.wellsStat.map(w=>({...w,
+          periodPlan: (new Date(w.planEnd) - new Date(w.planStart))/msInDay,
+          periodFact: (new Date(w.factEnd) - new Date(w.factStart))/msInDay,
+        }))
+        setWellsStat(wellsStat)
+        setClusterTitle(data.caption)
+      }
+      catch(ex) {
+        notify(`Не удалось загрузить статистику по скважинам куста "${id}"`, 'error')
+        console.log(ex)
+      }
+      setShowLoader(false)
+    }
+    updateWellsStat()
+  },[id])
+
+  return(
+    <LoaderPortal show={showLoader}>
+      <h3>{clusterTitle}</h3>
+      <Table
+          columns={columns}
+          dataSource={wellsStat}
+          size={'small'}
+          bordered
+          pagination={false}
+          rowKey={(record) => record.id}
+        />
+    </LoaderPortal>)
 }