diff --git a/src/components/CustomColumn.jsx b/src/components/CustomColumn.jsx index 5d23414..597a2a5 100644 --- a/src/components/CustomColumn.jsx +++ b/src/components/CustomColumn.jsx @@ -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 => )} + {params.map(param => )} diff --git a/src/components/Display.jsx b/src/components/Display.jsx index 8b0993f..6ba5862 100644 --- a/src/components/Display.jsx +++ b/src/components/Display.jsx @@ -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 = - break - case -1: - arrow = - break - default: - break - } + if(isArrowVisible) + switch (arrowState.direction){ + case 0: + arrow = + break + case 1: + arrow = + break + case -1: + arrow = + break + default: + break + } return({prefix} {val} {suffix}{arrow}) } diff --git a/src/pages/Deposit.jsx b/src/pages/Deposit.jsx index 249802a..9988fc6 100644 --- a/src/pages/Deposit.jsx +++ b/src/pages/Deposit.jsx @@ -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 => + + + + + {cluster.caption} + + + ) + return ( - {clustersData.map(cluster => - - - + - {cluster.caption} - - - )} + zoom={viewParams.zoom}> + {markers} );