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

src/components/WellTreeSelector.jsx

@@ -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 [wellsTree, setWellsTree] = useState([])
-  const [showLoader, setShowLoader] = useState(false)
+    const [showLoader, setShowLoader] = useState(false)
-  const history = useHistory()
+    const history = useHistory()
-  const routeMatch = useRouteMatch('/:route/:id')
+    const routeMatch = useRouteMatch('/:route/:id')
 
-  const updateWellsList = async () => {
+    useEffect(() => invokeWebApiWrapperAsync(
-    setShowLoader(true)
+        async () => {
-    try {
+            const deposits = await DepositService.getDeposits()
-      const deposits = await DepositService.getDeposits()
+            const wellsTree = deposits.map(deposit =>({
-      const wellsTree = deposits.map(deposit =>({
+                title: deposit.caption,
-        title: deposit.caption,
+                key: `/deposit/${deposit.id}`,
-        key: `/deposit/${deposit.id}`,
+                value: `/deposit/${deposit.id}`,
-        value: `/deposit/${deposit.id}`,
+                icon: <DepositIcon width={24} height={24}/>,
-        children: deposit.clusters.map(cluster => ({
+                children: deposit.clusters.map(cluster => ({
-          title: cluster.caption,
+                    title: cluster.caption,
-          key: `/cluster/${cluster.id}`,
+                    key: `/cluster/${cluster.id}`,
-          value: `/cluster/${cluster.id}`,
+                    value: `/cluster/${cluster.id}`,
-          children: cluster.wells.map(well => ({
+                    icon: <ClusterIcon width={24} height={24}/>,
-            title: well.caption,
+                    children: cluster.wells.map(well => ({
-            key: `/well/${well.id}`,
+                        title: well.caption,
-            value: `/well/${well.id}`,
+                        key: `/well/${well.id}`,
-          })),
+                        value: `/well/${well.id}`,
-        })),
+                        icon: <WellIcon
-      }))
+                            width={24}
-      setWellsTree(wellsTree)
+                            height={24}
-    }
+                            state={getWellState(well.idState)}
-    catch (e) {
+                            online={checkIsWellOnline(well.lastTelemetryDate)}
-      notify('Не удалось загрузить список скважин', 'error')
+                        />
-      console.error(`${e.message}`)
+                    })),
-    }
+                })),
-    setShowLoader(false)
+            }))
-  }
+            setWellsTree(wellsTree)
+        },
+        setShowLoader,
+        `Не удалось загрузить список скважин`
+    ), [])
 
-  useEffect(() => { updateWellsList() }, [])
+    const onSelect = (value) => value && history.push(value)
 
-  const onSelect = (value, node) => {
+    return (
-    if (value)
+        <LoaderPortal show={showLoader}>
-      history.push(value);
+            <TreeSelect
-  }
+                treeIcon
-
+                className={'header-tree-select'}
-  return (
+                bordered={false}
-    <LoaderPortal show={showLoader}>
+                dropdownMatchSelectWidth={false}
-      <TreeSelect
+                placeholder={'Выберите месторождение'}
-        className='header-tree-select'
+                treeData={wellsTree}
-        bordered={false}
+                treeDefaultExpandAll
-        dropdownMatchSelectWidth={false}
+                onSelect={onSelect}
-        placeholder='Выберите месторождение'
+                value = {routeMatch?.url}
-        treeData={wellsTree}
+            />
-        treeDefaultExpandAll
+        </LoaderPortal>
-        onSelect={onSelect}
+    )
-        value = {routeMatch?.url}
+}
-      />
-    </LoaderPortal>
-  )
-}

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>