From cc37bccacfaaa19ca8896826eb6a0f995e36f9e5 Mon Sep 17 00:00:00 2001 From: goodmice Date: Mon, 15 Aug 2022 06:57:20 +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=D1=81=D0=BE=D1=85=D1=80=D0=B0=D0=BD=D0=B5=D0=BD?= =?UTF-8?q?=D0=B8=D0=B5=20=D0=B8=20=D1=80=D0=B5=D0=B4=D0=B0=D0=BA=D1=82?= =?UTF-8?q?=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=B8=D0=B5=20=D0=BA=D0=BE?= =?UTF-8?q?=D0=BB=D0=BE=D0=BD=D0=BA=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../d3/monitoring/D3MonitoringCharts.tsx | 41 +++++++++++++++---- ...roupsEditor.tsx => D3MonitoringEditor.tsx} | 31 ++++++++++---- .../d3/monitoring/D3MonitoringLimitChart.tsx | 41 +++++++++++-------- .../d3/monitoring/D3MonitoringLimitEditor.tsx | 18 ++++++++ 4 files changed, 96 insertions(+), 35 deletions(-) rename src/components/d3/monitoring/{D3MonitoringGroupsEditor.tsx => D3MonitoringEditor.tsx} (82%) create mode 100644 src/components/d3/monitoring/D3MonitoringLimitEditor.tsx diff --git a/src/components/d3/monitoring/D3MonitoringCharts.tsx b/src/components/d3/monitoring/D3MonitoringCharts.tsx index c8c0e29..d93633a 100644 --- a/src/components/d3/monitoring/D3MonitoringCharts.tsx +++ b/src/components/d3/monitoring/D3MonitoringCharts.tsx @@ -26,9 +26,9 @@ import D3MouseZone from '@components/d3/D3MouseZone' import { getByAccessor, getChartClass, getGroupClass, getTicks } from '@components/d3/functions' import { renderArea, renderLine, renderNeedle, renderPoint, renderRectArea } from '@components/d3/renders' -import D3MonitoringGroupsEditor from './D3MonitoringGroupsEditor' +import D3MonitoringEditor from './D3MonitoringEditor' import { D3HorizontalCursor, D3HorizontalCursorSettings } from './D3HorizontalCursor' -import D3MonitoringLimitChart from './D3MonitoringLimitChart' +import D3MonitoringLimitChart, { TelemetryRegulators } from './D3MonitoringLimitChart' const roundTo = (v: number, to: number = 50) => { if (v === 0) return v @@ -77,6 +77,15 @@ const defaultOffsets: ChartOffset = { right: 20, } +const defaultRegulators: TelemetryRegulators = { + 1: { color: '#007070', label: 'Расход' }, + 2: { color: '#59B359', label: 'Скорость блока' }, + 3: { color: '#FF0000', label: 'Давление' }, + 4: { color: '#0000CC', label: 'Осевая нагрузка' }, + 5: { color: '#00B3B3', label: 'Вес на крюке' }, + 6: { color: '#990099', label: 'Момент на роторе' }, +} + const getDefaultYAxisConfig = (): ChartAxis => ({ type: 'time', accessor: (d: any) => new Date(d.date) @@ -192,6 +201,7 @@ const _D3MonitoringCharts = >({ const [chartAreaRef, setChartAreaRef] = useState(null) const [axesAreaRef, setAxesAreaRef] = useState(null) const [settingsVisible, setSettingsVisible] = useState(false) + const [regulators, setRegulators] = useState(defaultRegulators) const offset = usePartialProps(_offset, defaultOffsets) const yTicks = usePartialProps>>(_yTicks, getDefaultYTicks) @@ -272,23 +282,28 @@ const _D3MonitoringCharts = >({ } ), [chartArea]) - const onGroupsChange = useCallback((sets: ExtendedChartDataset[][]) => { + const onGroupsChange = useCallback((settings: ExtendedChartDataset[][], regulators: TelemetryRegulators) => { if (chartName) { invokeWebApiWrapperAsync( async () => { - await UserSettingsService.update(chartName, sets) + await UserSettingsService.update(chartName, { + settings, + regulators, + }) }, undefined, 'Не удалось сохранить параметры графиков' ) } - setDatasets(sets) + setDatasets(settings) + setRegulators(regulators) setSettingsVisible(false) }, [chartName]) const onGroupsReset = useCallback(() => { setSettingsVisible(false) setDatasets(datasetGroups) + setRegulators(defaultRegulators) if (chartName) { invokeWebApiWrapperAsync( async () => await UserSettingsService.delete(chartName), @@ -306,13 +321,19 @@ const _D3MonitoringCharts = >({ let sets = chartName ? await UserSettingsService.get(chartName) : null if (typeof sets === 'string') sets = JSON.parse(sets) - if (Array.isArray(sets)) { - setDatasets(sets) + const { settings, regulators } = sets + if (regulators) + setRegulators(regulators) + if (Array.isArray(settings)) { + setDatasets(settings) } else if (Array.isArray(datasetGroups)) { setDatasets(datasetGroups) if (chartName) { invokeWebApiWrapperAsync( - async () => await UserSettingsService.insert(chartName, datasetGroups), + async () => await UserSettingsService.insert(chartName, { + settings: datasetGroups, + regulators: defaultRegulators, + }), undefined, 'Не удалось сохранить настройки графиков' ) @@ -574,6 +595,7 @@ const _D3MonitoringCharts = >({ })} >({ )} - setSettingsVisible(false)} diff --git a/src/components/d3/monitoring/D3MonitoringGroupsEditor.tsx b/src/components/d3/monitoring/D3MonitoringEditor.tsx similarity index 82% rename from src/components/d3/monitoring/D3MonitoringGroupsEditor.tsx rename to src/components/d3/monitoring/D3MonitoringEditor.tsx index 90bbc4e..bf904db 100644 --- a/src/components/d3/monitoring/D3MonitoringGroupsEditor.tsx +++ b/src/components/d3/monitoring/D3MonitoringEditor.tsx @@ -7,12 +7,15 @@ import { notify } from '@components/factory' import { getChartIcon } from '@utils' import { ExtendedChartDataset } from './D3MonitoringCharts' +import { TelemetryRegulators } from './D3MonitoringLimitChart' import D3MonitoringChartEditor from './D3MonitoringChartEditor' +import D3MonitoringLimitEditor from './D3MonitoringLimitEditor' export type D3MonitoringGroupsEditorProps = { visible?: boolean groups: ExtendedChartDataset[][] - onChange: (value: ExtendedChartDataset[][]) => void + regulators: TelemetryRegulators + onChange: (value: ExtendedChartDataset[][], regs: TelemetryRegulators) => void onCancel: () => void onReset: () => void } @@ -36,9 +39,12 @@ const getNodePos = (node: EventDataNode): { group: number, chart?: number } => { return { group: out[1], chart: out[2] } } -const _D3MonitoringGroupsEditor = ({ +type EditingMode = null | 'limit' | 'chart' + +const _D3MonitoringEditor = ({ visible, groups: oldGroups, + regulators: oldRegulators, onChange, onCancel, onReset, @@ -46,10 +52,13 @@ const _D3MonitoringGroupsEditor = ({ const [groups, setGroups] = useState[][]>([]) const [expand, setExpand] = useState([]) const [selected, setSelected] = useState([]) + const [mode, setMode] = useState(null) + const [regulators, setRegulators] = useState({}) useEffect(() => setGroups(oldGroups), [oldGroups]) + useEffect(() => setRegulators(oldRegulators), [oldRegulators]) - const onModalOk = useCallback(() => onChange(groups), [groups]) + const onModalOk = useCallback(() => onChange(groups, regulators), [groups, regulators]) const onDrop = useCallback((info: { node: EventDataNode @@ -148,23 +157,29 @@ const _D3MonitoringGroupsEditor = ({ selectedKeys={selected} treeData={treeItems} onDrop={onDrop} - onSelect={setSelected} + onSelect={(value) => { + setSelected(value) + setMode('chart') + }} height={250} /> +
- {selectedGroup && selectedChart ? ( + {mode === 'chart' && selectedGroup && selectedChart ? ( group={selectedGroup} chart={selectedChart} onChange={onChartChange} /> + ) : (mode === 'limit' ? ( + value={regulators} onChange={setRegulators} /> ) : ( - )} + ))}
) } -export const D3MonitoringGroupsEditor = memo(_D3MonitoringGroupsEditor) as typeof _D3MonitoringGroupsEditor +export const D3MonitoringEditor = memo(_D3MonitoringEditor) as typeof _D3MonitoringEditor -export default D3MonitoringGroupsEditor +export default D3MonitoringEditor diff --git a/src/components/d3/monitoring/D3MonitoringLimitChart.tsx b/src/components/d3/monitoring/D3MonitoringLimitChart.tsx index aea37d9..203041d 100644 --- a/src/components/d3/monitoring/D3MonitoringLimitChart.tsx +++ b/src/components/d3/monitoring/D3MonitoringLimitChart.tsx @@ -3,15 +3,6 @@ import * as d3 from 'd3' import { TelemetryDataSaubDto } from '@api' -export type D3MonitoringLimitChartProps = { - yAxis?: d3.ScaleTime - data: DataType[] - width: number - height: number - left: number - top: number -} - type LimitChartData = { id: number dateStart: Date @@ -24,14 +15,10 @@ type LimitChartDataRaw = { dateEnd?: string } -const regulators: Record = { - 1: { color: '#007070', label: 'Расход' }, - 2: { color: '#59B359', label: 'Скорость блока' }, - 3: { color: '#FF0000', label: 'Давление' }, - 4: { color: '#0000CC', label: 'Осевая нагрузка' }, - 5: { color: '#00B3B3', label: 'Вес на крюке' }, - 6: { color: '#990099', label: 'Момент на роторе' }, -} +export type TelemetryRegulators = Record const getLast = (out: LimitChartDataRaw[]) => out.at(-1) as LimitChartDataRaw function isDataCorrect(value: LimitChartDataRaw): value is Required { @@ -63,7 +50,25 @@ const calcualteData = (data: DataType[]) })) } -const _D3MonitoringLimitChart = ({ yAxis, data: chartData, width, height, left, top }: D3MonitoringLimitChartProps) => { +export type D3MonitoringLimitChartProps = { + yAxis?: d3.ScaleTime + regulators: TelemetryRegulators + data: DataType[] + width: number + height: number + left: number + top: number +} + +const _D3MonitoringLimitChart = ({ + yAxis, + data: chartData, + width, + height, + left, + top, + regulators +}: D3MonitoringLimitChartProps) => { const [ref, setRef] = useState(null) const data = useMemo(() => calcualteData(chartData), [chartData]) diff --git a/src/components/d3/monitoring/D3MonitoringLimitEditor.tsx b/src/components/d3/monitoring/D3MonitoringLimitEditor.tsx new file mode 100644 index 0000000..fbb64fb --- /dev/null +++ b/src/components/d3/monitoring/D3MonitoringLimitEditor.tsx @@ -0,0 +1,18 @@ +import { memo } from 'react' +import { TelemetryRegulators } from './D3MonitoringLimitChart' + +export type D3MonitoringLimitEditorProps = { + value: TelemetryRegulators + onChange: (value: TelemetryRegulators) => void +} + +const _D3MonitoringLimitEditor = ({ value, onChange }: D3MonitoringLimitEditorProps) => { + + return ( + <> + ) +} + +export const D3MonitoringLimitEditor = memo(_D3MonitoringLimitEditor) as typeof _D3MonitoringLimitEditor + +export default D3MonitoringLimitEditor