Добавлен значок свкважими на таблицу аналитики скважин

src/components/PointerIcon.jsx

@@ -0,0 +1,60 @@
+import PropTypes from 'prop-types'
+
+export const PointerIcon = ({color, size, online, onlineColor}) => (
+  <svg
+    width={size.width ?? size}
+    height={size.height ?? (Number.isInteger(size) ? size*1.19 : size)}
+    version={'1.1'}
+    viewBox={'0 -1.5 7.9 9.4'}
+    xmlns={'http://www.w3.org/2000/svg'}
+    stroke={color}
+    fill={'none'}
+  >
+    {online && ( // Волны от антенны
+      <g stroke={onlineColor} strokeWidth={0.164583}>
+        <path d={'m 2.2051668,-0.54483294 a 2.46875,2.46875 0 0 1 3.4913396,-1.1e-7'}/>
+        <path d={'m 2.558464,-0.19153572 a 1.975,1.975 0 0 1 2.7930718,-9e-8'}/>
+        <path d={'m 2.907598,0.15759823 a 1.48125,1.48125 0 0 1 2.0948038,-7e-8'}/>
+      </g>
+    )}
+    {/* Арматурная сетка */}
+    <path
+      d={'m3.1 1.6 1.9 1.5-2.3 1.1 2.9 2-0.78-4.6h-1.7l-0.78 4.6 2.9-2-2.3-1.1 1.9-1.5'}
+      strokeLinecap={'round'}
+      strokeLinejoin={'bevel'}
+      strokeWidth={'.17'}
+    />
+    <g fill={color}> {/* Шляпы */}
+      <rect x={'2.8'} y={'.98'} width={'2.3'} height={'.45'} strokeWidth={'.084'} />
+      <rect x={'3.4'} y={'.31'} width={'1.2'} height={'.45'} strokeWidth={'.084'} />
+    </g>
+    <g strokeWidth={'.084'}> {/* Столб и границы почвы */}
+      <rect x={'3.9'} y={'1.6'} width={'.11'} height={'6'} strokeLinejoin={'round'} />
+      <path d={'m1.2 6.2 2.1 8e-7v1.5'} /> 
+      <path d={'m4.5 7.7v-1.5l1.9-8e-7'} />
+    </g>
+  </svg>
+)
+
+PointerIcon.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.shape({
+      width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      height: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+    })
+  ]),
+  online: PropTypes.bool,
+  onlineColor: PropTypes.string
+}
+
+PointerIcon.defaultProps = {
+  color: 'currentColor',
+  size: {width: '48', height: '59'},
+  online: false,
+  onlineColor: 'red'
+}
+
+export default PointerIcon

src/images/pointer.svg

@@ -1,14 +0,0 @@
-<svg width="48" height="48" version="1.1" viewBox="0 0 7.9 7.9" xmlns="http://www.w3.org/2000/svg"
-  xmlns:osb="http://www.openswatchbook.org/uri/2009/osb">
-  <g stroke="#000">
-    <path d="m3.1 1.6 1.9 1.5-2.3 1.1 2.9 2-0.78-4.6h-1.7l-0.78 4.6 2.9-2-2.3-1.1 1.9-1.5" fill="none"
-      stroke-linecap="round" stroke-linejoin="bevel" stroke-width=".17" />
-    <rect x="2.8" y=".98" width="2.3" height=".45" stroke-width=".084" />
-    <rect x="3.4" y=".31" width="1.2" height=".45" stroke-width=".084" />
-    <g fill="none" stroke-width=".084">
-      <rect x="3.9" y="1.6" width=".11" height="6" stroke-linejoin="round" />
-      <path d="m1.2 6.2 2.1 8e-7v1.5" />
-      <path d="m4.5 7.7v-1.5l1.9-8e-7" />
-    </g>
-  </g>
-</svg>

src/pages/Cluster/ClusterWells.jsx

@@ -15,6 +15,7 @@ import { Tvd } from '../WellOperations/Tvd'
 import WellOperationsTable from './WellOperationsTable'
 import { getOperations } from './functions'
 import LoaderPortal from '../../components/LoaderPortal'
+import PointerIcon from '../../components/PointerIcon'
 
 const filtersMinMax = [
   { text: 'min', value: 'min' },
@@ -23,6 +24,7 @@ const filtersMinMax = [
 
 const filtersWellsType = []
 const DAY_IN_MS = 1000 * 60 * 60 * 24
+const ONLINE_DEADTIME = 600
 
 export default function ClusterWells({statsWells}) {
 
@@ -68,7 +70,8 @@ export default function ClusterWells({statsWells}) {
         routeSpeedFact: well.total?.fact?.routeSpeed,
         notProductiveTimePlan: well.total?.plan?.nonProductiveHours,
         notProductiveTimeFact: well.total?.fact?.nonProductiveHours,
-        companies: well.companies
+        companies: well.companies,
+        lastTelemetryDate: well.lastTelemetryDate
       }
     })
   
@@ -91,8 +94,18 @@ export default function ClusterWells({statsWells}) {
 
   const columns = [
     makeTextColumn('скв №', 'caption', null, null, 
-      (_, item) => (<Link to={`/well/${item.id}`}>{item.caption ?? '-'}</Link>
+      (_, item) => (
-    )),
+        <Link to={`/well/${item.id}`} style={{display: 'flex', alignItems: 'center'}}>
+          <PointerIcon
+            color={item.state === 'working' ? 'black' : 'gray'}
+            size={32}
+            online={item.lastTelemetryDate && ((new Date()).getTime() - Date.parse(item.lastTelemetryDate)) / 1000 < ONLINE_DEADTIME}
+            onlineColor={'currentColor'}
+          />
+          {item.caption ?? '-'}
+        </Link>
+      )
+    ),
     makeTextColumn('Тип скв.', 'wellType', filtersWellsType, null, (text) => text ?? '-'),
     makeGroupColumn('Фактические сроки', [
       makeColumn('начало', 'factStart', { sorter: makeDateSorter('factStart'), render: getDate }),