forked from ddrilling/asb_cloud_front
PointerIcon перемещён в папку для иконок и переписан на tsx
This commit is contained in:
goodmice
parent
0899b37e9e
commit
ef43102557
@ -1,60 +0,0 @@
|
||||
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
|
||||
83
src/components/icons/PointerIcon.tsx
Normal file
83
src/components/icons/PointerIcon.tsx
Normal file
@ -0,0 +1,83 @@
|
||||
import React from 'react'
|
||||
|
||||
type PointerIconColors = {
|
||||
online?: string
|
||||
active?: string
|
||||
inactive?: string
|
||||
unknown?: string
|
||||
}
|
||||
|
||||
interface PointerIconProps {
|
||||
width?: string | number
|
||||
height?: string | number
|
||||
online?: boolean
|
||||
state?: 'active' | 'inactive' | 'unknown'
|
||||
colors?: PointerIconColors
|
||||
}
|
||||
|
||||
const defaultColors: PointerIconColors = {
|
||||
online: 'red',
|
||||
active: 'black',
|
||||
inactive: 'gray',
|
||||
unknown: 'gray',
|
||||
}
|
||||
|
||||
const defaultProps: PointerIconProps = {
|
||||
width: 48,
|
||||
height: 59,
|
||||
state: 'unknown',
|
||||
}
|
||||
|
||||
// Рекомендованное соотношение сторон 1:1.19
|
||||
export const PointerIcon = React.memo(({ width, height, online, state, colors, ...other } : PointerIconProps = defaultProps) => {
|
||||
colors = { ...defaultColors, ...colors }
|
||||
|
||||
return (
|
||||
<svg
|
||||
version={'1.1'}
|
||||
viewBox={'0 -1.5 7.9 9.4'}
|
||||
xmlns={'http://www.w3.org/2000/svg'}
|
||||
xmlnsXlink={'http://www.w3.org/1999/xlink'}
|
||||
|
||||
fill={'none'}
|
||||
stroke={'currentColor'}
|
||||
strokeWidth={.17}
|
||||
|
||||
width={width}
|
||||
height={height}
|
||||
color={colors[state ?? 'unknown']}
|
||||
{...other}
|
||||
>
|
||||
{/* Арматурная сетка */}
|
||||
<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'}
|
||||
/>
|
||||
|
||||
<g strokeWidth={0.084}>
|
||||
{/* Шляпы */}
|
||||
<g fill={'currentColor'}>
|
||||
<rect x={2.8} y={.98} width={2.3} height={.45}/>
|
||||
<rect x={3.4} y={.31} width={1.2} height={.45}/>
|
||||
</g>
|
||||
|
||||
{/* Столб и границы почвы */}
|
||||
<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>
|
||||
|
||||
{/* Волны от антенны */}
|
||||
{online && (
|
||||
<g stroke={colors.online}>
|
||||
<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>
|
||||
)}
|
||||
</svg>
|
||||
)
|
||||
})
|
||||
|
||||
export default PointerIcon
|
||||
@ -15,7 +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'
|
||||
import PointerIcon from '../../components/icons/PointerIcon'
|
||||
|
||||
const filtersMinMax = [
|
||||
{ text: 'min', value: 'min' },
|
||||
@ -23,8 +23,8 @@ const filtersMinMax = [
|
||||
]
|
||||
|
||||
const filtersWellsType = []
|
||||
const DAY_IN_MS = 1000 * 60 * 60 * 24
|
||||
const ONLINE_DEADTIME = 600
|
||||
const DAY_IN_MS = 86_400_000
|
||||
const ONLINE_DEADTIME = 600_000
|
||||
|
||||
export default function ClusterWells({statsWells}) {
|
||||
|
||||
@ -54,7 +54,7 @@ export default function ClusterWells({statsWells}) {
|
||||
let data = statsWells?.map((well) => {
|
||||
if (!filtersWellsType.some((el) => el.text === well.wellType))
|
||||
filtersWellsType.push({ text: well.wellType, value: well.wellType,})
|
||||
|
||||
|
||||
return {
|
||||
key: well.caption,
|
||||
id: well.id,
|
||||
@ -75,7 +75,7 @@ export default function ClusterWells({statsWells}) {
|
||||
idState: well.idState
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
calcAndUpdateStatsBySections(data ?? [], [
|
||||
'factStart',
|
||||
'factEnd',
|
||||
@ -91,17 +91,17 @@ export default function ClusterWells({statsWells}) {
|
||||
setTableData(data)
|
||||
}, [statsWells])
|
||||
|
||||
const getDate = (str) => Number.isNaN(new Date(str).getTime()) ? '-' : new Date(str).toLocaleString()
|
||||
const getDate = (str) => Number.isNaN(+new Date(str)) ? '-' : new Date(str).toLocaleString()
|
||||
|
||||
const columns = [
|
||||
makeTextColumn('скв №', 'caption', null, null,
|
||||
makeTextColumn('скв №', 'caption', null, null,
|
||||
(_, item) => (
|
||||
<Link to={`/well/${item.id}`} style={{display: 'flex', alignItems: 'center'}}>
|
||||
<PointerIcon
|
||||
color={item.idState === 1 ? 'black' : 'gray'}
|
||||
size={32}
|
||||
online={item.lastTelemetryDate && ((new Date()).getTime() - Date.parse(item.lastTelemetryDate)) / 1000 < ONLINE_DEADTIME}
|
||||
onlineColor={'currentColor'}
|
||||
state={item.idState === 1 ? 'active' : 'unknown'}
|
||||
width={32}
|
||||
height={38}
|
||||
online={item.lastTelemetryDate && (Date.now() - Date.parse(item.lastTelemetryDate) < ONLINE_DEADTIME)}
|
||||
/>
|
||||
{item.caption ?? '-'}
|
||||
</Link>
|
||||
@ -121,7 +121,7 @@ export default function ClusterWells({statsWells}) {
|
||||
key: 'tvd',
|
||||
render: (value) => <Button onClick={()=> {
|
||||
setSelectedWellId(value.id)
|
||||
setIsTVDModalVisible(true)
|
||||
setIsTVDModalVisible(true)
|
||||
}}><LineChartOutlined /></Button>,
|
||||
align: 'center'
|
||||
},
|
||||
@ -130,7 +130,7 @@ export default function ClusterWells({statsWells}) {
|
||||
key: 'operations',
|
||||
render: (value) => <Button onClick={()=> {
|
||||
setSelectedWellId(value.id)
|
||||
setIsOpsModalVisible(true)
|
||||
setIsOpsModalVisible(true)
|
||||
}}><ProfileOutlined /></Button>,
|
||||
align: 'center'
|
||||
},
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Map, Overlay } from "pigeon-maps"
|
||||
import { PointerIcon } from '../components/PointerIcon'
|
||||
import { PointerIcon } from '../components/icons/PointerIcon'
|
||||
import { Link } from "react-router-dom";
|
||||
import LoaderPortal from '../components/LoaderPortal'
|
||||
import { useState, useEffect } from "react";
|
||||
@ -58,7 +58,7 @@ export default function Deposit() {
|
||||
anchor={[cluster.latitude, cluster.longitude]}
|
||||
key={`${cluster.latitude} ${cluster.longitude}`}>
|
||||
<Link to={`/cluster/${cluster.id}/all`}>
|
||||
<PointerIcon color={'black'} />
|
||||
<PointerIcon state={'active'} width={48} height={59}/>
|
||||
<span>{cluster.caption}</span>
|
||||
</Link>
|
||||
</Overlay >
|
||||
|
||||
Loading…
Reference in New Issue
Block a user