Добавлено открытие графика глубина-день

src/components/AnalysisDepthToDay.jsx

@@ -1,5 +1,4 @@
 import { ChartDepthToDay } from './charts/ChartDepthToDay'
-import { useParams } from "react-router-dom"
 import notify from "../components/notify"
 import { useState, useEffect } from 'react'
 import { AnalyticsService } from "../services/api"
@@ -10,8 +9,7 @@ const lines = [
   { label: "Положение инструмента", yAccessorName: "bitDepth", color: '#ff0' }
 ]
 
-export function AnalysisDepthToDay() {
+export function AnalysisDepthToDay({idWell}) {
-  let { id } = useParams()
   const [depthToDayData, setDepthToDayData] = useState([])
   const [loader, setLoader] = useState(false)
 
@@ -21,15 +19,15 @@ export function AnalysisDepthToDay() {
 
   useEffect(() => {
     setLoader(true)
-    AnalyticsService.getWellDepthToDay(id)
+    AnalyticsService.getWellDepthToDay(idWell)
       .then(handleReceiveDepthToDayData)
       .catch(error => {
-        notify(`Не удалось получить данные для Анализа Глубина-День по скважине "${id}"`,
+        notify(`Не удалось получить данные для Анализа Глубина-День по скважине "${idWell}"`,
           'warning')
         console.log(error)
       })
       .finally(setLoader(false))
-  }, [id])
+  }, [idWell])
 
   return (
     <LoaderPortal show={loader}>

src/components/modalWindows/ModalChartDepthToday.jsx

@@ -0,0 +1,25 @@
+import { useState } from 'react'
+import { AnalysisDepthToDay } from '../AnalysisDepthToDay'
+import { Button, Modal } from 'antd'
+
+export default function ModalChartDepthToDay({idWell}) {
+  const [chartVisible, setChartVisible] = useState(false)
+
+  return (<>
+    <Button type="secondary" onClick={() => setChartVisible(true)} style={{ marginLeft: "5px" }}>
+      Открыть
+    </Button>
+    <Modal
+      title='Последние показатели бурового раствора'
+      centered
+      visible={chartVisible}
+      onOk={() => setChartVisible(false)}
+      onCancel={() => setChartVisible(false)}
+      width={1800}
+      okText='Ок'
+      cancelText='Отмена'
+    >
+      <AnalysisDepthToDay idWell={idWell}/>
+    </Modal>
+  </>)
+}

src/pages/Analysis.jsx

@@ -3,7 +3,7 @@ import { AnalysisDepthToInterval } from '../components/AnalysisDepthToInterval'
 import { AnalysisOperationTime } from '../components/AnalysisOperationTime'
 import { Row, Col } from 'antd'
 
-export default function Analysis() {
+export default function Analysis({idWell}) {
 
   return (
     <>
@@ -11,18 +11,18 @@ export default function Analysis() {
       <Row justify="space-around" align="middle">
         <Col span={10}>
           <h2>График Глубина-день</h2>
-          <AnalysisDepthToDay />
+          <AnalysisDepthToDay idWell={idWell}/>
         </Col>
         <Col span={10}>
           <h2>График Глубина за интервал</h2>
-          <AnalysisDepthToInterval />
+          <AnalysisDepthToInterval  idWell={idWell}/>
         </Col>
       </Row >
       <Row><div style={{height: "150px"}}>&nbsp;</div></Row>
       <Row justify="space-around" align="middle">
         <Col span={10}>
           <h2>График Операция за время</h2>
-          <AnalysisOperationTime />
+          <AnalysisOperationTime  idWell={idWell}/>
         </Col>
       </Row>
     </>

src/pages/Cluster.jsx

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

src/pages/Well.jsx

@@ -95,7 +95,7 @@ export default function Well() {
               <Report/>
             </Route>
             <Route path="/well/:id/analysis">
-              <Analysis/>
+              <Analysis idWell={id}/>
             </Route>
             <Route path="/well/:id/wellAnalysis">
               <WellAnalysis/>