diff --git a/src/components/WellTreeSelector.jsx b/src/components/WellTreeSelector.jsx index 98649fd..b2b0b76 100644 --- a/src/components/WellTreeSelector.jsx +++ b/src/components/WellTreeSelector.jsx @@ -1,5 +1,4 @@ import { useState, useEffect } from 'react' -import { useRouteMatch } from 'react-router-dom' import { DepositService } from '../services/api' import LoaderPortal from './LoaderPortal' import { TreeSelect } from 'antd' @@ -11,7 +10,6 @@ export default function WellTreeSelector() { const [wellsTree, setWellsTree] = useState([]) const [showLoader, setShowLoader] = useState(false) const history = useHistory() - const routeMatch = useRouteMatch('/:route/:id') const updateWellsList = async () => { setShowLoader(true) @@ -23,8 +21,8 @@ export default function WellTreeSelector() { value: `/deposit/${deposit.id}`, children: deposit.clusters.map(cluster => ({ title: cluster.caption, - key: `/cluster/${cluster.id}`, - value: `/cluster/${cluster.id}`, + key: `/cluster/${cluster.id}/all`, + value: `/cluster/${cluster.id}/all`, children: cluster.wells.map(well => ({ title: well.caption, key: `/well/${well.id}`, @@ -46,7 +44,6 @@ export default function WellTreeSelector() { const onSelect = (value, node) => { if (value) history.push(value); - console.log(value) } return ( @@ -59,7 +56,6 @@ export default function WellTreeSelector() { treeData={wellsTree} treeDefaultExpandAll onSelect={onSelect} - value = {routeMatch?.url} /> ) diff --git a/src/pages/Cluster.jsx b/src/pages/Cluster.jsx deleted file mode 100644 index 093b4e4..0000000 --- a/src/pages/Cluster.jsx +++ /dev/null @@ -1,144 +0,0 @@ -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/factory" -import { Table, Tag, Button } from 'antd'; - -export default function Cluster() { - let { id } = useParams() - const [clusterTitle, setClusterTitle] = useState("") - const [wellsStat, setWellsStat] = useState(null) - const [showLoader, setShowLoader] = useState(false) - - 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]) - - const columns = [ - { - title: 'скв №', - key: 'caption', - dataIndex: 'caption', - render: (_, item) => {item.caption} - }, - { - 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) => (таблица по секциям) - }, - { - title: 'График глубина-день', - render: (_, item) => () - }, - { - title: 'Таблица по операциям', - render: _ => () - }, - { - title: 'Подрядчики', - key: 'companies', - dataIndex: 'companies', - render: (item) => item.map(company => {company.caption}) - }, - ]; - - return ( - -

{clusterTitle}

- record.id} - /> - ) -} \ No newline at end of file diff --git a/src/pages/ClusterInfo.jsx b/src/pages/ClusterInfo.jsx new file mode 100644 index 0000000..587c551 --- /dev/null +++ b/src/pages/ClusterInfo.jsx @@ -0,0 +1,40 @@ +import { Layout, Menu } from "antd"; +import { Link, Switch, Route, useParams } from "react-router-dom"; +import ClusterWells from './ClusterWells' +import ClusterSections from './ClusterSections' + +const { Content } = Layout; + +export default function ClusterInfo() { + let { id } = useParams(); + let {tab} = useParams() + + return(<> + + + + Скважины + + + Секции + + + + + + + + + + + + + + + + + ) +} \ No newline at end of file diff --git a/src/pages/ClusterSections.jsx b/src/pages/ClusterSections.jsx new file mode 100644 index 0000000..5164b0e --- /dev/null +++ b/src/pages/ClusterSections.jsx @@ -0,0 +1,264 @@ +import { Table, Tag, Button, Badge, Divider, Modal} from "antd" +import { LineChartOutlined, ProfileOutlined } from '@ant-design/icons' +import { useState } from "react" + +const isMaxPrefix = "isMax" +const isMinPrefix = "isMin" + +const filtersMinMax = [ + { + text: "min", + value: "min", + }, + { + text: "max", + value: "max", + }, +] + +const filtersSectionsType = [ + { + text: "Направление", + value: "Направление", + }, + { + text: "Кондуктор", + value: "Кондуктор", + }, + { + text: "Транспорт. ствол", + value: "Транспорт. Ствол", + }, + { + text: "Хвостовик", + value: "Хвостовик", + }, +] + +const makeFilterMinMaxFunction = (key) => (filterValue, dataItem) => + filterValue === "max" + ? dataItem[isMaxPrefix + key] + : filterValue === "min" + ? dataItem[isMinPrefix + key] + : false + +const makeFilterTextMatch = (key) => (filterValue, dataItem) => + dataItem[key] === filterValue + +const makeNumericSorter = (key) => (a, b) => a[key] - b[key] + +const makeStringSorter = (key) => (a, b) => +{ + for (let i = 0; i < a.length; i++) { + if (isNaN(b.charCodeAt(i)) || (a.charCodeAt(i) > b.charCodeAt(i))) + return 1 + + if (a.charCodeAt(i) > b.charCodeAt(i)) + return -1 + } + return 0 +} + +const makeGroupColumn = (title, children) => ({ + title: title, + children: children, +}) + +const makeTextColumn = (title, dataIndex, filters, sorter, render, other) => ({ + title: title, + dataIndex: dataIndex, + key: dataIndex, + filters: filters, + onFilter: filters ? makeFilterTextMatch(dataIndex) : null, + sorter: sorter ? makeStringSorter(dataIndex) : null, + render: render, + ...other +}) + +const makeNumericColumn = (title, dataIndex, filters) => ({ + title: title, + dataIndex: dataIndex, + key: dataIndex, + filters: filters, + onFilter: makeFilterMinMaxFunction(dataIndex), + sorter: makeNumericSorter(dataIndex) +}) + +const makeNumericColumnPlanFact = (title, dataIndex, filters) => + makeGroupColumn( title, [ + makeNumericColumn('п', dataIndex + 'Plan', filters), + makeNumericColumn('ф', dataIndex + 'Fact', filters), + ]) + +const ModalWindowButton = ({buttonIcon, buttonText, modalTitle, modalContent}) =>{ + const [isModalVisible, setIsModalVisible] = useState(false) + + let content = (typeof(modalContent)==="string") + ? + : modalContent + + return ( + <> + + setIsModalVisible(false)} + onCancel={() => setIsModalVisible(false)} + width={1400}> + {content} + + + ) +} + +const columns = [ + makeTextColumn('скв №', 'caption'), + makeGroupColumn( 'По секциям', [ + makeTextColumn('Конструкция скважины', 'sectionType', filtersSectionsType), + makeNumericColumnPlanFact('Глубина', 'sectionWellDepth', filtersMinMax), + makeNumericColumnPlanFact('Продолжительность', 'sectionBuildDays', filtersMinMax), //Цикл строительства + makeNumericColumnPlanFact('МСП', 'sectionRateOfPenetration', filtersMinMax), + makeNumericColumnPlanFact('Рейсовая скорость', 'sectionRouteSpeed', filtersMinMax), + makeNumericColumnPlanFact('Спуск КНБК', 'sectionBhaDownSpeed', filtersMinMax),//Скорость спуска КНБК + makeNumericColumnPlanFact('Подъем КНБК', 'sectionBhaUpSpeed', filtersMinMax),//Скорость подъема КНБК + makeNumericColumnPlanFact('Скорость спуска ОК', 'sectionCasingDownSpeed', filtersMinMax), + ]), + makeNumericColumn('НПВ, сут', 'notProductiveTime', filtersMinMax), + { + title: "TVD", + render: (_, record) => } + modalTitle={`График по скв.:${record.caption}`}/> + //modalContent = {resources['Chart' + record.caption]}/>, + }, + { + title: "Операции", + render: (_, record) => } + modalTitle={`Операции по скв.:${record.caption}`}/> + //modalContent = {resources['Table' + record.caption]}, + }, + { + title: "Подрядчики", + dataIndex: "companies", + render: (item) => + item.map((company) => {company.caption}), + }, +] + +const contractors = [ + { type: "Буровой подрядчик", caption: 'ООО "НГ-Бурение"' }, + // { type: "ННБ", caption: 'ООО НПП "Буринтех"' }, + // { type: "Растворный сревис", caption: 'ООО НПП "Буринтех"' }, + // { type: "Цементирование", caption: "Норд-Сервис" }, +] + +const wellsStat = [ + { key:1, caption :'42669', sectionType :'Направление', sectionWellDepthPlan :80.0, sectionWellDepthFact :79.0, sectionBuildDaysPlan :19.0, sectionBuildDaysFact :10.3, sectionRateOfPenetrationPlan :60.0, sectionRateOfPenetrationFact :158.0, rateOfPenetrationPlan :60.0, rateOfPenetrationFact :63.7, sectionRouteSpeedPlan :4.2, sectionRouteSpeedFact :7.7, routeSpeedPlan :9.7, routeSpeedFact :9.2, sectionBhaDownSpeedPlan :1.0, sectionBhaDownSpeedFact :0.3, sectionBhaUpSpeedPlan :1.0, sectionBhaUpSpeedFact :0.3, sectionCasingDownSpeedPlan :2.0, sectionCasingDownSpeedFact :1.0, companies :contractors }, + { key:2, caption :'42669', sectionType :'Кондуктор', sectionWellDepthPlan :1280.0, sectionWellDepthFact :1284.0, sectionBuildDaysPlan :90.0, sectionBuildDaysFact :138.3, sectionRateOfPenetrationPlan :60.0, sectionRateOfPenetrationFact :85.5, rateOfPenetrationPlan :60.0, rateOfPenetrationFact :63.7, sectionRouteSpeedPlan :14.2, sectionRouteSpeedFact :9.3, routeSpeedPlan :9.7, routeSpeedFact :9.2, sectionBhaDownSpeedPlan :12.5, sectionBhaDownSpeedFact :5.8, sectionBhaUpSpeedPlan :11.0, sectionBhaUpSpeedFact :10.5, sectionCasingDownSpeedPlan :10.0, sectionCasingDownSpeedFact :14.0, companies :contractors }, + { key:3, caption :'42669', sectionType :'Транспорт. Ствол', sectionWellDepthPlan :3615.9, sectionWellDepthFact :3616.0, sectionBuildDaysPlan :406.1, sectionBuildDaysFact :391.0, sectionRateOfPenetrationPlan :60.0, sectionRateOfPenetrationFact :57.7, rateOfPenetrationPlan :60.0, rateOfPenetrationFact :63.7, sectionRouteSpeedPlan :8.9, sectionRouteSpeedFact :9.2, routeSpeedPlan :9.7, routeSpeedFact :9.2, sectionBhaDownSpeedPlan :50.0, sectionBhaDownSpeedFact :40.5, sectionBhaUpSpeedPlan :52.0, sectionBhaUpSpeedFact :57.2, sectionCasingDownSpeedPlan :14.0, sectionCasingDownSpeedFact :16.3, companies :contractors }, + { key:4, caption :'16311', sectionType :'Направление', sectionWellDepthPlan :80.0, sectionWellDepthFact :81.0, sectionBuildDaysPlan :10.8, sectionBuildDaysFact :11.0, sectionRateOfPenetrationPlan :60.0, sectionRateOfPenetrationFact :81.0, rateOfPenetrationPlan :60.0, rateOfPenetrationFact :63.7, sectionRouteSpeedPlan :7.4, sectionRouteSpeedFact :7.4, routeSpeedPlan :9.7, routeSpeedFact :9.2, sectionBhaDownSpeedPlan :1.0, sectionBhaDownSpeedFact :0.5, sectionBhaUpSpeedPlan :1.0, sectionBhaUpSpeedFact :0.5, sectionCasingDownSpeedPlan :1.0, sectionCasingDownSpeedFact :2.3, companies :contractors }, + { key:5, caption :'16311', sectionType :'Кондуктор', sectionWellDepthPlan :1411.0, sectionWellDepthFact :1412.0, sectionBuildDaysPlan :107.8, sectionBuildDaysFact :99.0, sectionRateOfPenetrationPlan :60.0, sectionRateOfPenetrationFact :96.4, rateOfPenetrationPlan :60.0, rateOfPenetrationFact :63.7, sectionRouteSpeedPlan :13.1, sectionRouteSpeedFact :14.3, routeSpeedPlan :9.7, routeSpeedFact :9.2, sectionBhaDownSpeedPlan :12.5, sectionBhaDownSpeedFact :0.3, sectionBhaUpSpeedPlan :11.0, sectionBhaUpSpeedFact :8.8, sectionCasingDownSpeedPlan :9.0, sectionCasingDownSpeedFact :12.8, companies :contractors }, + { key:6, caption :'16311', sectionType :'Транспорт. Ствол', sectionWellDepthPlan :3181.0, sectionWellDepthFact :3181.0, sectionBuildDaysPlan :171.6, sectionBuildDaysFact :171.0, sectionRateOfPenetrationPlan :35.0, sectionRateOfPenetrationFact :80.9, rateOfPenetrationPlan :60.0, rateOfPenetrationFact :63.7, sectionRouteSpeedPlan :18.5, sectionRouteSpeedFact :18.6, routeSpeedPlan :9.7, routeSpeedFact :9.2, sectionBhaDownSpeedPlan :14.0, sectionBhaDownSpeedFact :4.8, sectionBhaUpSpeedPlan :23.0, sectionBhaUpSpeedFact :14.8, sectionCasingDownSpeedPlan :15.0, sectionCasingDownSpeedFact :16.5, companies :contractors }, + { key:7, caption :'16311', sectionType :'Хвостовик', sectionWellDepthPlan :4181.0, sectionWellDepthFact :4187.0, sectionBuildDaysPlan :271.9, sectionBuildDaysFact :220.0, sectionRateOfPenetrationPlan :20.0, sectionRateOfPenetrationFact :32.9, rateOfPenetrationPlan :60.0, rateOfPenetrationFact :63.7, sectionRouteSpeedPlan :15.4, sectionRouteSpeedFact :19.0, routeSpeedPlan :9.7, routeSpeedFact :9.2, sectionBhaDownSpeedPlan :61.5, sectionBhaDownSpeedFact :34.0, sectionBhaUpSpeedPlan :40.0, sectionBhaUpSpeedFact :36.5, sectionCasingDownSpeedPlan :24.5, sectionCasingDownSpeedFact :9.0, companies :contractors }, + { key:8, caption :'16315', sectionType :'Направление', sectionWellDepthPlan :80.0, sectionWellDepthFact :80.0, sectionBuildDaysPlan :21.1, sectionBuildDaysFact :23.0, sectionRateOfPenetrationPlan :60.0, sectionRateOfPenetrationFact :53.3, rateOfPenetrationPlan :27.2, rateOfPenetrationFact :30.1, sectionRouteSpeedPlan :3.8, sectionRouteSpeedFact :3.5, routeSpeedPlan :14.4, routeSpeedFact :7.5, sectionBhaDownSpeedPlan :1.0, sectionBhaDownSpeedFact :0.5, sectionBhaUpSpeedPlan :1.0, sectionBhaUpSpeedFact :1.0, sectionCasingDownSpeedPlan :2.0, sectionCasingDownSpeedFact :2.0, companies :contractors }, + { key:9, caption :'16315', sectionType :'Кондуктор', sectionWellDepthPlan :1500.0, sectionWellDepthFact :1505.0, sectionBuildDaysPlan :130.3, sectionBuildDaysFact :150.5, sectionRateOfPenetrationPlan :60.0, sectionRateOfPenetrationFact :58.2, rateOfPenetrationPlan :27.2, rateOfPenetrationFact :30.1, sectionRouteSpeedPlan :11.5, sectionRouteSpeedFact :10.0, routeSpeedPlan :14.4, routeSpeedFact :7.5, sectionBhaDownSpeedPlan :8.3, sectionBhaDownSpeedFact :0.5, sectionBhaUpSpeedPlan :11.0, sectionBhaUpSpeedFact :6.5, sectionCasingDownSpeedPlan :10.0, sectionCasingDownSpeedFact :11.0, companies :contractors } +] + +const calcAndUpdateStats = (data, keys) => { + let mins = {} + let maxs = {} + + keys.forEach((key) => { + maxs[key] = Number.MIN_VALUE + mins[key] = Number.MAX_VALUE + }) + + data.forEach((item) => { + keys.forEach((key) => { + if (mins[key] > item[key]) mins[key] = item[key] + + if (maxs[key] < item[key]) maxs[key] = item[key] + }) + }) + + for (let i = 0; i < data.length; i++) { + keys.forEach((key) => { + data[i][isMaxPrefix + key] = data[i][key] === maxs[key] + data[i][isMinPrefix + key] = data[i][key] === mins[key] + }) + } +} + +const calcAndUpdateStatsBySections = (data, keys) => { + const sectionTypes = new Set() + data.forEach(item => sectionTypes.add(item.sectionType)) + sectionTypes.forEach(sectionType => { + const filteredBySectionData = data.filter(item => item.sectionType === sectionType) + calcAndUpdateStats(filteredBySectionData, keys) + }) +} + +calcAndUpdateStatsBySections(wellsStat, [ + "sectionWellDepthPlan", + "sectionWellDepthFact", + "sectionBuildDaysPlan", + "sectionBuildDaysFact", + "sectionRateOfPenetrationPlan", + "sectionRateOfPenetrationFact", + "sectionRouteSpeedPlan", + "sectionRouteSpeedFact", + "sectionBhaDownSpeedPlan", + "sectionBhaDownSpeedFact", + "sectionBhaUpSpeedPlan", + "sectionBhaUpSpeedFact", + "sectionCasingDownSpeedPlan", + "sectionCasingDownSpeedFact", +]) + +export default function ClusterStat() { + const [selectedWells, setSelectedWells] = useState([]) + const [selectedWellsKeys, setSelectedWellsKeys] = useState([]) + + const rowSelection = { + selectedRowKeys: selectedWellsKeys, + onChange: (keys, items) => { + setSelectedWells(items) + setSelectedWellsKeys(keys) + }, + } + + return ( + <> +

Статистика по секциям

+
+ + +

Выбранные секции<>

+ +
+ + ) +} diff --git a/src/pages/ClusterWells.jsx b/src/pages/ClusterWells.jsx new file mode 100644 index 0000000..4b72493 --- /dev/null +++ b/src/pages/ClusterWells.jsx @@ -0,0 +1,156 @@ +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/factory" +import { Table, Tag, Button } from 'antd'; + +const isMaxPrefix = "isMax" +const isMinPrefix = "isMin" + +const filtersMinMax = [ + { + text: "min", + value: "min", + }, + { + text: "max", + value: "max", + }, +] + +const filtersWellsType = [ + { + text: "Наклонно-направленная", + value: "sidelong", + }, + { + text: "Горизонтальная", + value: "horizontal", + } +] + +const makeFilterMinMaxFunction = (key) => (filterValue, dataItem) => + filterValue === "max" + ? dataItem[isMaxPrefix + key] + : filterValue === "min" + ? dataItem[isMinPrefix + key] + : false + +const makeFilterTextMatch = (key) => (filterValue, dataItem) => + dataItem[key] === filterValue + +const makeNumericSorter = (key) => (a, b) => a[key] - b[key] + +const makeStringSorter = (key) => (a, b) => +{ + for (let i = 0; i < a.length; i++) { + if (isNaN(b.charCodeAt(i)) || (a.charCodeAt(i) > b.charCodeAt(i))) + return 1 + + if (a.charCodeAt(i) > b.charCodeAt(i)) + return -1 + } + return 0 +} + +const makeGroupColumn = (title, children) => ({ + title: title, + children: children, +}) + +const makeTextColumn = (title, dataIndex, filters, sorter, render, other) => ({ + title: title, + dataIndex: dataIndex, + key: dataIndex, + filters: filters, + onFilter: filters ? makeFilterTextMatch(dataIndex) : null, + sorter: sorter ? makeStringSorter(dataIndex) : null, + render: render, + ...other +}) + +const makeNumericColumn = (title, dataIndex, filters) => ({ + title: title, + dataIndex: dataIndex, + key: dataIndex, + filters: filters, + onFilter: makeFilterMinMaxFunction(dataIndex), + sorter: makeNumericSorter(dataIndex) +}) + +const makeNumericColumnPlanFact = (title, dataIndex, filters) => + makeGroupColumn( title, [ + makeNumericColumn('п', dataIndex + 'Plan', filters), + makeNumericColumn('ф', dataIndex + 'Fact', filters), + ]) + +export default function Cluster() { + let { id } = useParams() + const [wellsStat, setWellsStat] = useState(null) + const [showLoader, setShowLoader] = useState(false) + + 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) + } + catch (ex) { + notify(`Не удалось загрузить статистику по скважинам куста "${id}"`, 'error') + console.log(ex) + } + setShowLoader(false) + } + updateWellsStat() + }, [id]) + + const columns = [ + makeTextColumn('скв №', 'caption', null, null, + (_, item) => {item.caption}), + makeTextColumn('Тип скв.', 'wellType', filtersWellsType), + makeGroupColumn( 'Фактические сроки', [ + makeNumericColumn('начало', 'factStart', filtersMinMax), + makeNumericColumn('окончание', 'factEnd', filtersMinMax), + ]), + makeNumericColumnPlanFact('Продолжительность', 'period', filtersMinMax), + makeNumericColumnPlanFact('МСП', 'rateOfPenetration', filtersMinMax), + makeNumericColumnPlanFact('Рейсовая скорость', 'routeSpeed', filtersMinMax), + makeNumericColumn('НПВ, сут', 'notProductiveTime', filtersMinMax), + { + title: 'График глубина-день', + render: (_, item) => () + }, + { + title: 'Таблица по операциям', + render: _ => () + }, + { + title: 'Подрядчики', + key: 'companies', + dataIndex: 'companies', + render: (item) => item.map(company => {company.caption}) + }, + ]; + + return ( + +

Статистика по скважинам

+
record.id} + /> + ) +} \ No newline at end of file diff --git a/src/pages/Deposit.jsx b/src/pages/Deposit.jsx index de41f2c..e43a252 100644 --- a/src/pages/Deposit.jsx +++ b/src/pages/Deposit.jsx @@ -53,7 +53,7 @@ export default function Deposit() { width={32} anchor={[cluster.latitude, cluster.longitude]} key={`${cluster.latitude} ${cluster.longitude}`}> - + +{cluster.caption} diff --git a/src/pages/Main.jsx b/src/pages/Main.jsx index 970bf77..56d8ca8 100644 --- a/src/pages/Main.jsx +++ b/src/pages/Main.jsx @@ -1,5 +1,5 @@ import Deposit from './Deposit' -import Cluster from './Cluster' +import ClusterInfo from './ClusterInfo' import Well from "./Well"; import LayoutPortal from '../components/LayoutPortal' import {Redirect, Route, Switch} from "react-router-dom"; @@ -18,9 +18,9 @@ export default function Main() { - + - + diff --git a/src/styles/index.css b/src/styles/index.css index 9a60f46..3e3bf1a 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -31,6 +31,10 @@ body { margin-top: 20px; } +.mb-20px { + margin-bottom: 20px; +} + .ml-5px { margin-left: 5px; }