Добавлена страница композитной скважины со сводкой по скважинам

src/pages/WellOperations/WellCompositeEditor/WellCompositeInfo.jsx

@@ -0,0 +1,25 @@
+import { useEffect, useState } from "react"
+import { invokeWebApiWrapperAsync } from "../../../components/factory"
+import LoaderPortal from "../../../components/LoaderPortal";
+import { WellOperationStatService } from "../../../services/api";
+import ClusterWells from "../../Cluster/ClusterWells";
+
+export const WellCompositeInfo = ({idWell, selectedIdWells}) => {
+    const [showLoader, setShowLoader] = useState(false);
+    const [statsWells, setStatsWells] = useState([]);
+
+    useEffect(() => invokeWebApiWrapperAsync(
+        async () => {
+            const operations = await WellOperationStatService.getWellsStat(selectedIdWells)
+            setStatsWells(operations)
+        },
+        setShowLoader,
+        'Не удалось загрузить список операции по скважинам'
+    ), [selectedIdWells])
+
+    return (
+        <LoaderPortal show={showLoader}>
+            <ClusterWells statsWells={statsWells}/>
+        </LoaderPortal>
+    )
+}

src/pages/WellOperations/WellCompositeEditor/index.jsx

@@ -0,0 +1,115 @@
+import { Layout, Menu, TreeSelect } from 'antd'
+import { useState, useEffect } from 'react'
+import { Redirect, Route, Switch, Link, useParams } from 'react-router-dom'
+import { DepositService } from '../../../services/api'
+import { invokeWebApiWrapperAsync } from '../../../components/factory'
+import LoaderPortal from '../../../components/LoaderPortal'
+import { WellCompositeInfo } from './WellCompositeInfo'
+import { WellCompositeSections } from './WellCompositeSections'
+import WellOperationsTable from '../../Cluster/WellOperationsTable'
+
+const { Content } = Layout
+
+export const WellCompositeEditor = ({idWell}) => {
+    const { tab } = useParams()
+    const rootPath = `/well/${idWell}/operations/composite`;
+
+    const [wellsTree, setWellsTree] = useState([])
+    const [showLoader, setShowLoader] = useState(false)
+    const [selectedWells, setSelectedWells] = useState([])
+    const [selectedIdWells, setSelectedIdWells] = useState([])
+
+    useEffect(() => invokeWebApiWrapperAsync(
+        async () => {
+            const deposits = await DepositService.getDeposits()
+            const wellsTree = deposits.map((deposit, dIdx) => ({
+                title: deposit.caption,
+                key: `${dIdx}`,
+                value: `${dIdx}`,
+                children: deposit.clusters.map((cluster, cIdx) => ({
+                    title: cluster.caption,
+                    key: `${dIdx}-${cIdx}`,
+                    value: `${dIdx}-${cIdx}`,
+                    children: cluster.wells.map(well => ({
+                        title: well.caption,
+                        key: `${dIdx}-${cIdx}-${well.id}`,
+                        value: `${dIdx}-${cIdx}-${well.id}`,
+                    })),
+                }))
+            }))
+            setWellsTree(wellsTree)
+        },
+        setShowLoader,
+        'Не удалось загрузить список скважин'
+    ), [idWell])
+
+    const expandIdx = (idx) => {
+        const res = /^(\d+)(?:-(\d+))?(?:-(\d+))?$/g.exec(idx)
+
+        if (res === null) return undefined
+        if (res[1] && res[2] && res[3])
+            return parseInt(res[3])
+
+            const depositIdx = parseInt(res[1])
+        if (res[2]) {
+            const clusterIdx = parseInt(res[2])
+            return wellsTree[depositIdx].children[clusterIdx].children.map(well => expandIdx(well.key)).flat()
+        }
+
+        return wellsTree[depositIdx].children.map(cluster => expandIdx(cluster.key)).flat()
+    }
+
+    const onWellChanged = (value) => {
+        setSelectedWells(value)
+        setSelectedIdWells(value.map(item => expandIdx(item)).flat())
+    }
+
+    return (
+        <LoaderPortal show={showLoader}>
+            <div style={{display: 'flex', width: '100%', alignItems: 'center', justifyContent: 'space-between'}}>
+                <span style={{marginRight: '2'}}>Скважины:</span>
+                <TreeSelect
+                    multiple
+                    treeCheckable
+                    showCheckedStrategy={TreeSelect.SHOW_PARENT}
+                    treeDefaultExpandAll
+                    treeData={wellsTree}
+                    treeLine={{showLeafIcon: false}}
+                    onChange={onWellChanged}
+                    size={'middle'}
+                    style={{flexGrow: '1'}}
+                    value={selectedWells}
+                    placeholder={'Выберите скважины'}
+                />
+                <Menu
+                    mode="horizontal"
+                    selectable={true}
+                    className="well_menu"
+                    selectedKeys={[tab]}
+                >
+                    <Menu.Item key="wells">
+                        <Link to={`${rootPath}/wells`}>Сводка по скважинам</Link>
+                    </Menu.Item>
+                    <Menu.Item key="sections">
+                        <Link to={`${rootPath}/sections`}>Сводка по секциям</Link>
+                    </Menu.Item>
+                </Menu>
+            </div>
+            <Layout>
+                <Content className="site-layout-background">
+                <Switch>            
+                    <Route path={`${rootPath}/wells`}>
+                        <WellCompositeInfo idWell={idWell} selectedIdWells={selectedIdWells}/>
+                    </Route>
+                    <Route path={`${rootPath}/sections`}>
+                        <WellCompositeSections idWell={idWell}/>
+                    </Route>
+                    <Route path={rootPath}>
+                        <Redirect to={`${rootPath}/wells`}/>
+                    </Route>
+                </Switch>
+                </Content>
+            </Layout>
+        </LoaderPortal>
+    )
+}

src/pages/WellOperations/index.jsx

@@ -2,8 +2,9 @@ import {Layout, Menu} from "antd";
 import {Switch, Link, Route, Redirect, useParams, useHistory} from "react-router-dom";
 import { FolderOutlined } from "@ant-design/icons";
 import { WellDrillParams } from './WellDrillParams'
-import { WellOperationsEditor } from './WellOperationsEditor'
 import { WellSectionsStat } from './WellSectionsStat'
+import { WellCompositeEditor } from './WellCompositeEditor'
+import { WellOperationsEditor } from './WellOperationsEditor'
 import { Tvd } from './Tvd'
 import { ImportExportBar } from "./ImportExportBar";
 
@@ -39,6 +40,9 @@ export default function WellOperations({idWell}) {
         <Menu.Item key="params" icon={<FolderOutlined />}>
           <Link to={`${rootPath}/params`}>Режимы</Link>
         </Menu.Item>
+        <Menu.Item key="composite" icon={<FolderOutlined />}>
+          <Link to={`${rootPath}/composite`}>Композитная скважина</Link>
+        </Menu.Item>
         <ImportExportBar idWell={idWell} onImported={onImported}/>
     </Menu>
     <Layout>
@@ -59,6 +63,9 @@ export default function WellOperations({idWell}) {
             <Route path={`${rootPath}/params`}>
               <WellDrillParams idWell={idWell}/>
             </Route>
+            <Route path={`${rootPath}/composite/:tab?`}>
+              <WellCompositeEditor idWell={idWell}/>
+            </Route>
             <Route path={rootPath}>
               <Redirect to={`${rootPath}/plan`}/>
             </Route>