From 98c26132d2374e94575e3be43e5b11ab0feaf351 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A4=D1=80=D0=BE=D0=BB=D0=BE=D0=B2?= Date: Mon, 26 Jul 2021 14:44:00 +0500 Subject: [PATCH] =?UTF-8?q?CF2-19=20=D0=9D=D0=B0=D1=81=D1=82=D1=80=D0=BE?= =?UTF-8?q?=D0=B8=D1=82=D1=8C=20=D1=84=D0=BE=D1=80=D0=BC=D0=B0=D1=82=20?= =?UTF-8?q?=D1=87=D0=B8=D1=81=D0=BB=D0=BE=D0=B2=D1=8B=D1=85=20=D0=BF=D0=B0?= =?UTF-8?q?=D1=80=D0=B0=D0=BC=D0=B5=D1=82=D1=80=D0=BE=D0=B2=20CF2-7=20?= =?UTF-8?q?=D0=92=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82?= =?UTF-8?q?=20DisplayValue=20=D0=B2=D0=BD=D0=B5=D0=B4=D1=80=D0=B8=D1=82?= =?UTF-8?q?=D1=8C=20=D1=81=D1=82=D1=80=D0=B5=D0=BB=D0=BA=D0=B8=20=D1=80?= =?UTF-8?q?=D0=BE=D1=81=D1=82=D0=B0/=D1=83=D0=B1=D1=8B=D0=B2=D0=B0=D0=BD?= =?UTF-8?q?=D0=B8=D1=8F=20=D0=B7=D0=BD=D0=B0=D1=87=D0=B5=D0=BD=D0=B8=D1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/CustomColumn.jsx | 35 +++++++------ src/components/Display.jsx | 89 +++++++++++++++++++++------------ src/pages/Deposit.jsx | 58 ++++++++++----------- 3 files changed, 107 insertions(+), 75 deletions(-) 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} );