From 2522b2daeac1e6f8d18badf7d88bdf79ceecf395 Mon Sep 17 00:00:00 2001 From: yxh01132861 Date: Fri, 20 Oct 2023 17:58:09 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E8=AF=84=E5=AE=A1=E9=97=AE=E9=A2=98?= =?UTF-8?q?=E5=A4=84=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/widgets/LegendWidget/helper.ts | 4 +-- .../CustomMaPpingColor/index.tsx | 29 ++++++++++--------- .../components/ScaleSelector/helper.ts | 24 ++++++++------- .../components/ScaleSelector/index.tsx | 4 +-- .../components/ScaleSelector/type.ts | 4 +-- 5 files changed, 36 insertions(+), 29 deletions(-) diff --git a/packages/li-analysis-assets/src/widgets/LegendWidget/helper.ts b/packages/li-analysis-assets/src/widgets/LegendWidget/helper.ts index f72e3cbe..3ed2efb7 100644 --- a/packages/li-analysis-assets/src/widgets/LegendWidget/helper.ts +++ b/packages/li-analysis-assets/src/widgets/LegendWidget/helper.ts @@ -87,10 +87,10 @@ export const parserLegendData = (layer: Layer) => { }); if (type === 'threshold') { - if (!labels[0]) { + if (labels[0] === undefined) { labels.splice(0, 1, '<'); } - if (!labels[labels.length - 1]) { + if (labels[labels.length - 1] === undefined) { labels.splice(labels.length - 1, 1, '<'); } } diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMaPpingColor/index.tsx b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMaPpingColor/index.tsx index 942c6f89..d828345d 100644 --- a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMaPpingColor/index.tsx +++ b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMaPpingColor/index.tsx @@ -3,11 +3,11 @@ import { usePrefixCls } from '@formily/antd-v5/esm/__builtins__'; import classnames from 'classnames'; import { isEmpty, uniqueId } from 'lodash-es'; import React, { useEffect, useMemo, useState } from 'react'; -import type { CustomMappingColor, CustomMappingData } from '../type'; +import type { CustomMappingColorItem, CustomMappingData } from '../type'; import CustomItem from './CustomItem'; import useStyle from './style'; -type CustomMaPpingColorProps = { +type CustomMappingColorProps = { dataType: 'string' | 'number'; domain: string[] | [number, number]; value?: CustomMappingData; @@ -15,11 +15,11 @@ type CustomMaPpingColorProps = { className?: string; }; -const CustomMaPpingColor = (props: CustomMaPpingColorProps) => { +const CustomMappingColor = (props: CustomMappingColorProps) => { const { dataType = 'string', domain, value, onChange, className } = props; const prefixCls = usePrefixCls('formily-color-range-selector__custom-range'); const [wrapSSR, hashId] = useStyle(prefixCls); - const [customRanges, setCustomRanges] = useState([]); + const [customRanges, setCustomRanges] = useState([]); const selectedOption = useMemo(() => { if (dataType === 'string' && customRanges.length) { @@ -40,7 +40,7 @@ const CustomMaPpingColor = (props: CustomMaPpingColorProps) => { useEffect(() => { if (value?.list?.length) { - const list = value.list.map((item: CustomMappingColor) => { + const list = value.list.map((item: CustomMappingColorItem) => { return { id: uniqueId(), ...item, @@ -56,7 +56,7 @@ const CustomMaPpingColor = (props: CustomMaPpingColorProps) => { const min = Number(_item.value[0]); const _interval = Number(((Number(domain[1]) - min) / 2).toFixed(2)) + min; - const addList = [ + const addList: CustomMappingColorItem[] = [ { id: _item.id, value: [min, _interval], @@ -64,20 +64,21 @@ const CustomMaPpingColor = (props: CustomMaPpingColorProps) => { }, { id: uniqueId(), + // @ts-ignore value: [_interval, null], color: _item.color ?? '#5B8FF9', }, ]; - const list: CustomMappingColor[] = [...customRanges.slice(0, -1), ...addList]; + const list = [...customRanges.slice(0, -1), ...addList]; setCustomRanges(list); } else { - const addItem: CustomMappingColor = { + const addItem: CustomMappingColorItem = { id: uniqueId(), value: [], color: customRanges[customRanges.length - 1]?.color ?? '#5B8FF9', }; - const list: CustomMappingColor[] = [...customRanges, addItem]; + const list: CustomMappingColorItem[] = [...customRanges, addItem]; setCustomRanges(list); } }; @@ -124,7 +125,8 @@ const CustomMaPpingColor = (props: CustomMaPpingColorProps) => { const onChangePaletteRangeItem = (value: (string | number | null)[], color: string, index: number) => { if (dataType === 'number') { - const list = customRanges.map((item, _index) => { + // @ts-ignore + const list: CustomMappingColor[] = customRanges.map((item, _index) => { if (index === _index) { return { ...item, @@ -152,7 +154,8 @@ const CustomMaPpingColor = (props: CustomMaPpingColorProps) => { setCustomRanges(list); } else { - const list = customRanges.map((item, _index) => { + // @ts-ignore + const list: CustomMappingColor[] = customRanges.map((item, _index) => { if (index === _index) { return { ...item, @@ -177,7 +180,7 @@ const CustomMaPpingColor = (props: CustomMaPpingColorProps) => { return wrapSSR(
- {customRanges.map((customItem: CustomMappingColor, index: number) => { + {customRanges.map((customItem: CustomMappingColorItem, index: number) => { const [min, max] = domain as [number, number]; const position = index === 0 ? 'first' : index === customRanges.length - 1 ? 'last' : null; @@ -211,4 +214,4 @@ const CustomMaPpingColor = (props: CustomMaPpingColorProps) => { ); }; -export default CustomMaPpingColor; +export default CustomMappingColor; diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/helper.ts b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/helper.ts index cf8394b1..e460af5d 100644 --- a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/helper.ts +++ b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/helper.ts @@ -1,13 +1,13 @@ import { fill } from 'lodash-es'; import { CUSTOM } from './constants'; -import type { CustomMappingColor, CustomMappingData, SelectorValue } from './type'; +import type { CustomMappingColorItem, CustomMappingData, SelectorValue } from './type'; // 通过自定义颜色映射转换为 Scale 的 domain 与 range 数据 -const getScaleDataByMappingColors = (list: CustomMappingColor[]) => { - const mapList: { color: string; value: string | number }[] = []; +const getScaleDataByMappingColors = (list: CustomMappingColorItem[]) => { + const mapList: { color: string; value: string }[] = []; list.forEach((item) => { item.value.forEach((_item) => { - mapList.push({ color: item.color, value: _item }); + mapList.push({ color: item.color, value: typeof _item === 'string' ? _item : _item.toString() }); }); }); @@ -31,15 +31,17 @@ export const getDefaultValue = ( const _length: number = range.length - 1 > 0 ? range.length - 1 : 0; const _domain = fill(Array(_length), undefined).map((_, index) => { const _value = min + _interval * index + 1; - return _value % 1 === 0 ? _value : _value.toFixed(2); + return _value % 1 === 0 ? Number(_value) : Number(_value.toFixed(2)); }); - return { + const defaultValue: SelectorValue = { isCustom: true, type: 'threshold', domain: _domain, range, }; + + return defaultValue; } else { // 数值类型为 string 时 const _domain = range.map((item, index) => { @@ -51,12 +53,14 @@ export const getDefaultValue = ( const { domain, range: colors } = getScaleDataByMappingColors(_domain); - return { + const defaultValue: SelectorValue = { isCustom: true, type: 'cat', domain, range: colors, }; + + return defaultValue; } }; @@ -66,9 +70,9 @@ export const getScaleByCustomMappingData = (val: CustomMappingData) => { if (type === 'number') { const range = list.map((item) => item.color); - const _val = list.map((item) => item.value[1]).filter((item) => item); + const _val = list.map((item) => Number(item.value[1])).filter((item) => item); - const layerValue = { + const layerValue: SelectorValue = { isCustom: true, type: 'threshold', domain: _val, @@ -79,7 +83,7 @@ export const getScaleByCustomMappingData = (val: CustomMappingData) => { } const { domain, range } = getScaleDataByMappingColors(list); - const layerValue = { + const layerValue: SelectorValue = { isCustom: true, type: 'cat', domain, diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/index.tsx b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/index.tsx index 76744a8e..8bf57687 100644 --- a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/index.tsx +++ b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/index.tsx @@ -5,7 +5,7 @@ import cls from 'classnames'; import React, { useEffect, useMemo, useState } from 'react'; import { useUpdateEffect } from 'ahooks'; import { DEHAULT_OPTIONS } from './constants'; -import CustomMaPpingColor from './CustomMaPpingColor'; +import CustomMappingColor from './CustomMappingColor'; import { getDefaultValue, getScaleByCustomMappingData, getCustomMappingData } from './helper'; import useStyle from './style'; import type { CustomMappingData, SelectorValue, SelectorValueType, SelectType } from './type'; @@ -118,7 +118,7 @@ const Internal = (props: ScaleSelectorProp) => { )} {type === 'custom' && ( -