forked from ddrilling/asb_cloud_front
Добавлены иконки для WellTreeSelector
This commit is contained in:
goodmice
parent
ef43102557
commit
66d6936e6e
@ -1,64 +1,73 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { DepositService } from '../services/api'
|
||||
import LoaderPortal from './LoaderPortal'
|
||||
import { TreeSelect } from 'antd'
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useHistory, useRouteMatch } from 'react-router-dom'
|
||||
import { notify } from "./factory"
|
||||
import LoaderPortal from './LoaderPortal'
|
||||
import { DepositService } from '../services/api'
|
||||
import { invokeWebApiWrapperAsync } from './factory'
|
||||
import '../styles/wellTreeSelect.css'
|
||||
import WellIcon from './icons/WellIcon'
|
||||
import { ReactComponent as DepositIcon } from '../images/DepositIcon.svg'
|
||||
import { ReactComponent as ClusterIcon } from '../images/ClusterIcon.svg'
|
||||
|
||||
export const getWellState = (idState) => idState === 1 ? 'active' : 'unknown'
|
||||
export const checkIsWellOnline = (lastTelemetryDate) => {
|
||||
if (!lastTelemetryDate) return false
|
||||
return Date.now() - new Date(lastTelemetryDate) < 600_000
|
||||
}
|
||||
|
||||
export default function WellTreeSelector() {
|
||||
const [wellsTree, setWellsTree] = useState([])
|
||||
const [showLoader, setShowLoader] = useState(false)
|
||||
const history = useHistory()
|
||||
const routeMatch = useRouteMatch('/:route/:id')
|
||||
const [wellsTree, setWellsTree] = useState([])
|
||||
const [showLoader, setShowLoader] = useState(false)
|
||||
const history = useHistory()
|
||||
const routeMatch = useRouteMatch('/:route/:id')
|
||||
|
||||
const updateWellsList = async () => {
|
||||
setShowLoader(true)
|
||||
try {
|
||||
const deposits = await DepositService.getDeposits()
|
||||
const wellsTree = deposits.map(deposit =>({
|
||||
title: deposit.caption,
|
||||
key: `/deposit/${deposit.id}`,
|
||||
value: `/deposit/${deposit.id}`,
|
||||
children: deposit.clusters.map(cluster => ({
|
||||
title: cluster.caption,
|
||||
key: `/cluster/${cluster.id}`,
|
||||
value: `/cluster/${cluster.id}`,
|
||||
children: cluster.wells.map(well => ({
|
||||
title: well.caption,
|
||||
key: `/well/${well.id}`,
|
||||
value: `/well/${well.id}`,
|
||||
})),
|
||||
})),
|
||||
}))
|
||||
setWellsTree(wellsTree)
|
||||
}
|
||||
catch (e) {
|
||||
notify('Не удалось загрузить список скважин', 'error')
|
||||
console.error(`${e.message}`)
|
||||
}
|
||||
setShowLoader(false)
|
||||
}
|
||||
useEffect(() => invokeWebApiWrapperAsync(
|
||||
async () => {
|
||||
const deposits = await DepositService.getDeposits()
|
||||
const wellsTree = deposits.map(deposit =>({
|
||||
title: deposit.caption,
|
||||
key: `/deposit/${deposit.id}`,
|
||||
value: `/deposit/${deposit.id}`,
|
||||
icon: <DepositIcon width={24} height={24}/>,
|
||||
children: deposit.clusters.map(cluster => ({
|
||||
title: cluster.caption,
|
||||
key: `/cluster/${cluster.id}`,
|
||||
value: `/cluster/${cluster.id}`,
|
||||
icon: <ClusterIcon width={24} height={24}/>,
|
||||
children: cluster.wells.map(well => ({
|
||||
title: well.caption,
|
||||
key: `/well/${well.id}`,
|
||||
value: `/well/${well.id}`,
|
||||
icon: <WellIcon
|
||||
width={24}
|
||||
height={24}
|
||||
state={getWellState(well.idState)}
|
||||
online={checkIsWellOnline(well.lastTelemetryDate)}
|
||||
/>
|
||||
})),
|
||||
})),
|
||||
}))
|
||||
setWellsTree(wellsTree)
|
||||
},
|
||||
setShowLoader,
|
||||
`Не удалось загрузить список скважин`
|
||||
), [])
|
||||
|
||||
useEffect(() => { updateWellsList() }, [])
|
||||
const onSelect = (value) => value && history.push(value)
|
||||
|
||||
const onSelect = (value, node) => {
|
||||
if (value)
|
||||
history.push(value);
|
||||
}
|
||||
|
||||
return (
|
||||
<LoaderPortal show={showLoader}>
|
||||
<TreeSelect
|
||||
className='header-tree-select'
|
||||
bordered={false}
|
||||
dropdownMatchSelectWidth={false}
|
||||
placeholder='Выберите месторождение'
|
||||
treeData={wellsTree}
|
||||
treeDefaultExpandAll
|
||||
onSelect={onSelect}
|
||||
value = {routeMatch?.url}
|
||||
/>
|
||||
</LoaderPortal>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<LoaderPortal show={showLoader}>
|
||||
<TreeSelect
|
||||
treeIcon
|
||||
className={'header-tree-select'}
|
||||
bordered={false}
|
||||
dropdownMatchSelectWidth={false}
|
||||
placeholder={'Выберите месторождение'}
|
||||
treeData={wellsTree}
|
||||
treeDefaultExpandAll
|
||||
onSelect={onSelect}
|
||||
value = {routeMatch?.url}
|
||||
/>
|
||||
</LoaderPortal>
|
||||
)
|
||||
}
|
||||
|
||||
@ -17,9 +17,9 @@ interface WellIconProps {
|
||||
|
||||
const defaultColors: WellIconColors = {
|
||||
online: 'red',
|
||||
active: 'green',
|
||||
inactive: 'gainsboro',
|
||||
unknown: 'gainsboro',
|
||||
active: 'black',
|
||||
inactive: 'gray',
|
||||
unknown: 'gray',
|
||||
}
|
||||
|
||||
const defaultProps: WellIconProps = {
|
||||
@ -57,9 +57,9 @@ export const WellIcon = React.memo(({ width, height, state, online, colors, ...o
|
||||
</g>
|
||||
{online && ( // Полоски, показывающие наличие свежей телеметрии
|
||||
<g stroke={colors.online}>
|
||||
<path d={'m18 0.066a2 2 0 0 1 0.14 1.7 2 2 0 0 1-1.2 1.2'}/>
|
||||
<path d={'m20 0.04a3 3 0 0 1-1.8 3.8'}/>
|
||||
<path d={'m20 0.031a4 4 0 0 1-2.5 4.8'}/>
|
||||
<path d="m18.4 0.0662a2 2 0 0 1 0.141 1.7 2 2 0 0 1-1.22 1.19"/>
|
||||
<path d="m19.5 0.0402a3 3 0 0 1-1.79 3.85"/>
|
||||
<path d="m20.5 0.031a4 4 0 0 1-2.5 4.79"/>
|
||||
</g>
|
||||
)}
|
||||
</svg>
|
||||
|
||||
12
src/images/ClusterIcon.svg
Normal file
12
src/images/ClusterIcon.svg
Normal file
@ -0,0 +1,12 @@
|
||||
<svg width="20.5mm" height="20.5mm" version="1.1" viewBox="0 0 20.5 20.5" xmlns="http://www.w3.org/2000/svg" fill="none" stroke-width=".855" stroke="currentColor">
|
||||
<g stroke="gray" stroke-width="1.4">
|
||||
<path d="m8.5 4.5v6"/>
|
||||
<path d="m2.5 4.5 6 6"/>
|
||||
<path d="m14.5 4.5-6 6"/>
|
||||
<path d="m8.5 14.5v6"/>
|
||||
</g>
|
||||
<circle cx="2.5" cy="2.5" r="2.07"/>
|
||||
<circle cx="8.5" cy="2.5" r="2.07"/>
|
||||
<circle cx="14.5" cy="2.5" r="2.07"/>
|
||||
<circle cx="8.5" cy="12.5" r="2.07"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 489 B |
22
src/images/DepositIcon.svg
Normal file
22
src/images/DepositIcon.svg
Normal file
@ -0,0 +1,22 @@
|
||||
<svg
|
||||
width="50mm"
|
||||
height="50mm"
|
||||
version="1.1"
|
||||
viewBox="0 0 50 50"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
stroke-opacity="30%"
|
||||
stroke-width="2.9"
|
||||
stroke="currentColor"
|
||||
fill="currentColor"
|
||||
>
|
||||
<g stroke-linecap="round" stroke-linejoin="round" fill="none">
|
||||
<path d="m33.2 39.2 3.6 6.24"/>
|
||||
<path d="m13.2 4.6 3.6 6.24"/>
|
||||
<path d="m16.8 39.2-3.6 6.24"/>
|
||||
<path d="m36.8 4.6-3.6 6.24"/>
|
||||
<path d="m48.6 25h-7.2"/>
|
||||
<path d="m8.65 25h-7.2"/>
|
||||
<path transform="matrix(.29 0 0 .29 -2.87 12.6)" d="m68 91.8-28.2-48.9 28.2-48.9 56.4-1e-7 28.2 48.9-28.2 48.9z" stroke-width="10" stroke-opacity="100%"/>
|
||||
</g>
|
||||
<path d="m24.9 17.3 4.55 7.86c3 6.93-4.45 7.55-4.45 7.55s-7.35-0.0621-4.45-7.55z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 729 B |
Loading…
Reference in New Issue
Block a user