From 2b216927fafc6beb2f628aa83e52589a210d1ecc Mon Sep 17 00:00:00 2001 From: goodmice Date: Thu, 2 Jun 2022 15:25:13 +0500 Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?= =?UTF-8?q?=D0=BD=D0=BE=20=D0=BE=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B5?= =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D0=B4=D0=B0=D1=82=D1=8B=20=D0=B2=20=D1=81?= =?UTF-8?q?=D1=82=D0=BE=D0=BB=D0=B1=D1=86=D0=B5=20=D0=BC=D0=BE=D0=BD=D0=B8?= =?UTF-8?q?=D1=82=D0=BE=D1=80=D0=B8=D0=BD=D0=B3=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Display.tsx | 14 ++-- .../Telemetry/TelemetryView/CustomColumn.jsx | 5 +- src/styles/display.css | 75 ------------------- src/styles/display.less | 74 ++++++++++++++++++ 4 files changed, 86 insertions(+), 82 deletions(-) delete mode 100755 src/styles/display.css create mode 100644 src/styles/display.less diff --git a/src/components/Display.tsx b/src/components/Display.tsx index 1ae6709..8ecf5d7 100644 --- a/src/components/Display.tsx +++ b/src/components/Display.tsx @@ -1,8 +1,8 @@ import moment from 'moment' -import { useState, useEffect, memo, ReactNode } from 'react' +import { useState, useEffect, memo, ReactNode, useCallback } from 'react' import {CaretUpOutlined, CaretDownOutlined, CaretRightOutlined} from '@ant-design/icons' -import '@styles/display.css' +import '@styles/display.less' export const formatNumber = (value?: unknown, format?: number) => Number.isInteger(format) && Number.isFinite(value) @@ -15,7 +15,7 @@ const displayValueStyle = { display: 'flex', flexGrow: 1 } export type ValueDisplayProps = { prefix?: ReactNode suffix?: ReactNode - format?: number | string + format?: number | string | ((arg: any) => any) isArrowVisible?: boolean enumeration?: Record value: string @@ -34,6 +34,8 @@ export const ValueDisplay = memo(({ prefix, value, suffix, is direction: 0, }) + const fmt = useCallback((arg) => typeof format === 'function' ? format(arg) : format, [format]) + useEffect(() => { setVal((preVal) => { if ((value ?? '-') === '-' || value === '--') return '---' @@ -54,18 +56,18 @@ export const ValueDisplay = memo(({ prefix, value, suffix, is }) } - return formatNumber(value, Number(format)) + return formatNumber(value, Number(fmt(value))) } if (value.length > 4) { const valueDate = moment(value) if (valueDate.isValid()) - return valueDate.format(String(format)) + return valueDate.format(String(fmt(value))) } return value }) - },[value, isArrowVisible, arrowState, format, enumeration]) + },[value, isArrowVisible, arrowState, fmt, enumeration]) let arrow = null if(isArrowVisible) diff --git a/src/pages/Telemetry/TelemetryView/CustomColumn.jsx b/src/pages/Telemetry/TelemetryView/CustomColumn.jsx index 9da3fea..89c44c4 100755 --- a/src/pages/Telemetry/TelemetryView/CustomColumn.jsx +++ b/src/pages/Telemetry/TelemetryView/CustomColumn.jsx @@ -1,16 +1,19 @@ +import moment from 'moment' import { memo } from 'react' import { Display } from '@components/Display' import RigMnemo from './RigMnemo' +const getTimeFormat = (date) => moment(date).isSame(new Date(), 'day') ? 'HH:mm:ss' : 'DD.MM.YYYY HH:mm:ss' + 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' }, + { label: 'Время', accessorName: 'date', format: getTimeFormat }, { label: 'MSE, %', accessorName: 'mse', format: 2 }, ] diff --git a/src/styles/display.css b/src/styles/display.css deleted file mode 100755 index afd40da..0000000 --- a/src/styles/display.css +++ /dev/null @@ -1,75 +0,0 @@ - -.display_flex_container{ - display: flex; - flex-wrap: wrap; - flex: auto; -} -.display_header { - font-size: 16px; - flex-grow: 1; - display: flex; -} - -.display_chart_label { - font-size: 16px; - font-weight: bold; - padding: 0 4px; -} - -.display_chart_values { - position: absolute; - top: 20px; - left: 50px; - font-size: 16px; - font-weight: bold; -} - -.monitoring_value { - position: relative; - z-index: 0; -} - -.monitoring_value:before { - position: absolute; - z-index: -1; - left: 4px; - top: 0; - -webkit-text-stroke: 4px white; - content: attr(data-before); -} - - -.display_label{ - font-size: 16px; - color: rgb(70, 70, 70); - text-align: left; - justify-content: center; - margin: 1px 1rem 1px 1rem; - flex: auto; - align-items: baseline; - text-overflow: ellipsis; - overflow-x: hidden; - overflow-y: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - height: 30px; -} - -.display_value{ - font-size: 18px; - font-weight: bold; - color: rgb(50, 50, 50); - text-align: right; - justify-content: flex-end; - align-items:baseline; - margin: 1px 1rem; - flex: auto; -} - -.display_small_value{ - color: rgb(50, 50, 50); - text-align: right; - justify-content: center; - margin: 1px 1rem 1px 1rem; - flex: auto; -} diff --git a/src/styles/display.less b/src/styles/display.less new file mode 100644 index 0000000..85d329f --- /dev/null +++ b/src/styles/display.less @@ -0,0 +1,74 @@ + +.display_flex_container{ + display: flex; + flex-wrap: wrap; + flex: auto; +} +.display_header { + font-size: 16px; + flex-grow: 1; + display: flex; +} + +.display_chart_label { + font-size: 16px; + font-weight: bold; + padding: 0 4px; +} + +.display_chart_values { + position: absolute; + top: 20px; + left: 50px; + font-size: 16px; + font-weight: bold; +} + +.monitoring_value { + position: relative; + z-index: 0; + + &:before { + position: absolute; + z-index: -1; + left: 4px; + top: 0; + -webkit-text-stroke: 4px white; + content: attr(data-before); + } +} + +.display_label{ + font-size: 16px; + color: rgb(70, 70, 70); + text-align: left; + justify-content: center; + margin: 1px 0 1px 1rem; + flex: auto; + align-items: baseline; + text-overflow: ellipsis; + overflow-x: hidden; + overflow-y: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + height: 30px; +} + +.display_value{ + font-size: 18px; + font-weight: bold; + color: rgb(50, 50, 50); + text-align: right; + justify-content: flex-end; + align-items:baseline; + margin: 1px 1rem; + flex: auto; +} + +.display_small_value{ + color: rgb(50, 50, 50); + text-align: right; + justify-content: center; + margin: 1px 1rem 1px 1rem; + flex: auto; +}