Добавлены иконки для WellTreeSelector

src/components/WellTreeSelector.jsx

@@ -1,10 +1,19 @@
-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([])
@@ -12,48 +21,48 @@ export default function WellTreeSelector() {
     const history = useHistory()
     const routeMatch = useRouteMatch('/:route/:id')
 
-  const updateWellsList = async () => {
+    useEffect(() => invokeWebApiWrapperAsync(
-    setShowLoader(true)
+        async () => {
-    try {
             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)
-    }
+        },
-    catch (e) {
+        setShowLoader,
-      notify('Не удалось загрузить список скважин', 'error')
+        `Не удалось загрузить список скважин`
-      console.error(`${e.message}`)
+    ), [])
-    }
-    setShowLoader(false)
-  }
 
-  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'
+                treeIcon
+                className={'header-tree-select'}
                 bordered={false}
                 dropdownMatchSelectWidth={false}
-        placeholder='Выберите месторождение'
+                placeholder={'Выберите месторождение'}
                 treeData={wellsTree}
                 treeDefaultExpandAll
                 onSelect={onSelect}

src/components/icons/WellIcon.tsx

@@ -17,9 +17,9 @@ interface WellIconProps {
 
 const defaultColors: WellIconColors = {
     online: 'red',
-    active: 'green',
+    active: 'black',
-    inactive: 'gainsboro',
+    inactive: 'gray',
-    unknown: 'gainsboro',
+    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="m18.4 0.0662a2 2 0 0 1 0.141 1.7 2 2 0 0 1-1.22 1.19"/>
-                    <path d={'m20 0.04a3 3 0 0 1-1.8 3.8'}/>
+                    <path d="m19.5 0.0402a3 3 0 0 1-1.79 3.85"/>
-                    <path d={'m20 0.031a4 4 0 0 1-2.5 4.8'}/>
+                    <path d="m20.5 0.031a4 4 0 0 1-2.5 4.79"/>
                 </g>
             )}
         </svg>

src/images/ClusterIcon.svg

@@ -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>

src/images/DepositIcon.svg

@@ -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>