forked from ddrilling/asb_cloud_front
CF2-19 Настроить формат числовых параметров
CF2-7 В компонент DisplayValue внедрить стрелки роста/убывания значения
This commit is contained in:
Фролов
parent
1ca49e8474
commit
98c26132d2
@ -1,29 +1,32 @@
|
||||
import {Display} from './Display'
|
||||
import RigMnemo from '../components/RigMnemo'
|
||||
|
||||
const params = [
|
||||
{label:'Рот., об/мин', accessorName:'rotorSpeed', isArrowVisible:true},
|
||||
{label:'Долото, м', accessorName:'bitDepth', isArrowVisible:true, format:2},
|
||||
{label:'Забой, м', accessorName:'wellDepth', isArrowVisible:true, format:2},
|
||||
{label:'Расход, м³/ч', accessorName:'flow', isArrowVisible:true},
|
||||
{label:'Расход х.х., м³/ч', accessorName:'flowIdle', isArrowVisible:true},
|
||||
{label: 'Время', accessorName: 'date', format:'HH:mm:ss'},
|
||||
]
|
||||
|
||||
export const CustomColumn = ({data}) => {
|
||||
const dataLast = data[data.length -1]
|
||||
|
||||
const lines = [
|
||||
{label:'Рот., об/мин', accessorName:'rotorSpeed'},
|
||||
{label:'Долото, м', accessorName:'bitDepth'},
|
||||
{label:'Забой, м', accessorName:'wellDepth'},
|
||||
{label:'Расход, м³/ч', accessorName:'flow'},
|
||||
{label:'Расход х.х., м³/ч', accessorName:'flowIdle'},
|
||||
{label: 'Отметка времени данных', accessorName: 'date'},
|
||||
]
|
||||
|
||||
if(dataLast)
|
||||
lines.forEach(line => line.value = dataLast[line.accessorName]?.toPrecision(4)??'-' )
|
||||
params.forEach(param => param.value = dataLast[param.accessorName])
|
||||
else
|
||||
lines.forEach(line => line.value = '-' )
|
||||
params.forEach(param => param.value = '-' )
|
||||
|
||||
return (<>
|
||||
{lines.map(line => <Display className='border_small display_flex_container'
|
||||
key={line.label}
|
||||
label={line.label}
|
||||
value={line.value}
|
||||
suffix={line.units}/>)}
|
||||
{params.map(param => <Display className='border_small display_flex_container'
|
||||
key={param.label}
|
||||
label={param.label}
|
||||
value={param.value}
|
||||
suffix={param.units}
|
||||
isArrowVisible = {param.isArrowVisible}
|
||||
format = {param.format}
|
||||
/>)}
|
||||
<RigMnemo
|
||||
blockPosition={dataLast?.blockPosition??0}
|
||||
bitPosition={dataLast?.bitDepth??3200}/>
|
||||
|
||||
@ -1,43 +1,70 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import {CaretUpOutlined, CaretDownOutlined} from '@ant-design/icons'
|
||||
import {CaretUpOutlined, CaretDownOutlined, CaretRightOutlined} from '@ant-design/icons'
|
||||
import moment from 'moment';
|
||||
|
||||
export const ValueDisplay = ({prefix, value, suffix, isArrowVisible}) =>{
|
||||
const [oldVal, setOldVal] = useState(NaN)
|
||||
export const formatNumber = (value, format) =>
|
||||
Number.isInteger(format) && Number.isFinite(value)
|
||||
? (+value).toFixed(format)
|
||||
: (+value).toPrecision(4)
|
||||
|
||||
export const ValueDisplay = ({prefix, value, suffix, isArrowVisible, format}) =>{
|
||||
const [val, setVal] = useState('---')
|
||||
const [arrowState, setArrowState] = useState(0)
|
||||
const [arrowState, setArrowState] = useState({
|
||||
preVal: NaN,
|
||||
preTimestamp: Date.now(),
|
||||
direction: 0,
|
||||
})
|
||||
|
||||
useEffect(()=>{
|
||||
if(value){
|
||||
if(Number.isFinite(+value)){
|
||||
if (isArrowVisible)
|
||||
{
|
||||
let newArrowState = 0
|
||||
if (value > oldVal)
|
||||
newArrowState = 1
|
||||
if (value < oldVal)
|
||||
newArrowState = -1
|
||||
setArrowState(newArrowState)
|
||||
setOldVal(value)
|
||||
}
|
||||
setVal((+value).toPrecision(4)??'---')
|
||||
}
|
||||
else
|
||||
setVal(value)
|
||||
if(value === undefined || value === null){
|
||||
setVal('---')
|
||||
return
|
||||
}
|
||||
|
||||
},[value, isArrowVisible, oldVal])
|
||||
if(Number.isFinite(+value)){
|
||||
if ((isArrowVisible) && (arrowState.preTimestamp + 1000 < Date.now()))
|
||||
{
|
||||
let direction = 0
|
||||
if (value > arrowState.preVal)
|
||||
direction = 1
|
||||
if (value < arrowState.preVal)
|
||||
direction = -1
|
||||
|
||||
setArrowState({
|
||||
preVal: value,
|
||||
preTimestamp: Date.now(),
|
||||
direction: direction,
|
||||
})
|
||||
}
|
||||
|
||||
setVal(formatNumber(value, format))
|
||||
return
|
||||
}
|
||||
|
||||
let valueDate = moment(value)
|
||||
if(valueDate.isValid()){
|
||||
setVal(valueDate.format(format))
|
||||
return
|
||||
}
|
||||
|
||||
setVal(value)
|
||||
},[value, isArrowVisible, arrowState, format])
|
||||
|
||||
let arrow = null
|
||||
switch (arrowState){
|
||||
case 1:
|
||||
arrow = <CaretUpOutlined style={{color:"red"}}/>
|
||||
break
|
||||
case -1:
|
||||
arrow = <CaretDownOutlined style={{color:"red"}}/>
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
if(isArrowVisible)
|
||||
switch (arrowState.direction){
|
||||
case 0:
|
||||
arrow = <CaretRightOutlined style={{color:"#0008"}}/>
|
||||
break
|
||||
case 1:
|
||||
arrow = <CaretUpOutlined style={{color:"#0008"}}/>
|
||||
break
|
||||
case -1:
|
||||
arrow = <CaretDownOutlined style={{color:"#0008"}}/>
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
|
||||
return(<span className='display_value'>{prefix} {val} {suffix}{arrow}</span>)
|
||||
}
|
||||
|
||||
@ -7,7 +7,7 @@ import {ClusterService} from '../services/api'
|
||||
import notify from '../components/notify'
|
||||
|
||||
const calcViewParams = (clusters) => {
|
||||
if (clusters && clusters.length === 0)
|
||||
if (clusters || clusters.length === 0)
|
||||
return {center:[60.81226, 70.0562], zoom: 5}
|
||||
|
||||
const center = clusters.reduce((sum, cluster) => {
|
||||
@ -30,42 +30,44 @@ export default function Deposit() {
|
||||
const [clustersData, setClustersData] = useState([])
|
||||
const [showLoader, setShowLoader] = useState(false)
|
||||
|
||||
const updateClusters = async()=>{
|
||||
setShowLoader(true)
|
||||
try{
|
||||
const data = await ClusterService.getClusters()
|
||||
setClustersData(data)
|
||||
useEffect(()=>{
|
||||
const updateClusters = async()=>{
|
||||
setShowLoader(true)
|
||||
try{
|
||||
const data = await ClusterService.getClusters()
|
||||
setClustersData(data)
|
||||
}
|
||||
catch(ex) {
|
||||
notify(`Не удалось загрузить список кустов`, 'error')
|
||||
console.log(ex)
|
||||
}
|
||||
setShowLoader(false)
|
||||
}
|
||||
catch(ex) {
|
||||
notify(`Не удалось загрузить список кустов`, 'error')
|
||||
console.log(ex)
|
||||
}
|
||||
setShowLoader(false)
|
||||
}
|
||||
|
||||
useEffect(()=>{updateClusters()}, [])
|
||||
updateClusters()
|
||||
}, [])
|
||||
|
||||
const viewParams = calcViewParams(clustersData)
|
||||
|
||||
const markers = clustersData.map(cluster =>
|
||||
<Overlay
|
||||
width={32}
|
||||
anchor={[cluster.latitude, cluster.longitude]}
|
||||
key={`${cluster.latitude} ${cluster.longitude}`}
|
||||
>
|
||||
<Link to={`/cluster/${cluster.id}`}>
|
||||
<img width={40} src={pointer} alt="+"/>
|
||||
<span>{cluster.caption}</span>
|
||||
</Link>
|
||||
|
||||
</Overlay >)
|
||||
|
||||
return (
|
||||
<LoaderPortal show={showLoader}>
|
||||
<Map
|
||||
height='100vh'
|
||||
center={viewParams.center}
|
||||
zoom={viewParams.zoom}
|
||||
>
|
||||
{clustersData.map(cluster =>
|
||||
<Overlay
|
||||
width={32}
|
||||
anchor={[cluster.latitude, cluster.longitude]}
|
||||
key={`${cluster.latitude} ${cluster.longitude}`}
|
||||
>
|
||||
<Link to={`/cluster/${cluster.id}`}>
|
||||
<img width={40} src={pointer} alt="+"/>
|
||||
<span>{cluster.caption}</span>
|
||||
</Link>
|
||||
|
||||
</Overlay >)}
|
||||
zoom={viewParams.zoom}>
|
||||
{markers}
|
||||
</Map>
|
||||
</LoaderPortal>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user