OrgTJWater/TJWaterFrontend_Refine
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修补自定义分段后，面板过长的问题

Browse Source
This commit is contained in:
JIANG
2025-11-18 14:32:21 +08:00
parent 9c533c0911
commit a85ded8a39
1 changed files with 45 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/app/OlMap/Controls/StyleEditorPanel.tsx
View File

@@ -715,7 +715,7 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
// 判断此次触发是否由用户点击“应用”按钮引起
const isUserTrigger =
styleUpdateTrigger !== prevStyleUpdateTriggerRef.current;
// 更新 prevStyleUpdateTriggerRef
// 更新 prevStyleUpdateTrigger
prevStyleUpdateTriggerRef.current = styleUpdateTrigger;
const updateJunctionStyle = () => {
@@ -1368,45 +1368,50 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
<Typography variant="subtitle2" gutterBottom>
手动设置区间阈值（按升序填写，最小值 {">="} 0）
</Typography>
<Box className="flex flex-col gap-2">
{Array.from({ length: styleConfig.segments }).map((_, idx) => (
<TextField
key={idx}
label={`阈值 ${idx + 1}`}
type="number"
size="small"
slotProps={{ input: { inputProps: { min: 0, step: 0.1 } } }}
value={
(styleConfig.customBreaks &&
styleConfig.customBreaks[idx]) ??
""
}
onChange={(e) => {
const v = parseFloat(e.target.value);
setStyleConfig((prev) => {
const prevBreaks = prev.customBreaks
? [...prev.customBreaks]
: [];
// 保证长度
while (prevBreaks.length < styleConfig.segments + 1)
prevBreaks.push(0);
prevBreaks[idx] = isNaN(v) ? 0 : Math.max(0, v);
return { ...prev, customBreaks: prevBreaks };
});
}}
onBlur={() => {
// on blur 保证升序
setStyleConfig((prev) => {
const prevBreaks = (prev.customBreaks || []).slice(
0,
styleConfig.segments + 1
);
prevBreaks.sort((a, b) => a - b);
return { ...prev, customBreaks: prevBreaks };
});
}}
/>
))}
<Box
className="flex flex-col gap-2"
sx={{ maxHeight: "240px", overflowY: "auto", paddingTop: "12px" }}
>
{Array.from({ length: styleConfig.segments + 1 }).map(
(_, idx) => (
<TextField
key={idx}
label={`阈值 ${idx + 1}`}
type="number"
size="small"
slotProps={{ input: { inputProps: { min: 0, step: 0.1 } } }}
value={
(styleConfig.customBreaks &&
styleConfig.customBreaks[idx]) ??
""
}
onChange={(e) => {
const v = parseFloat(e.target.value);
setStyleConfig((prev) => {
const prevBreaks = prev.customBreaks
? [...prev.customBreaks]
: [];
// 保证长度
while (prevBreaks.length < styleConfig.segments + 1)
prevBreaks.push(0);
prevBreaks[idx] = isNaN(v) ? 0 : Math.max(0, v);
return { ...prev, customBreaks: prevBreaks };
});
}}
onBlur={() => {
// on blur 保证升序
setStyleConfig((prev) => {
const prevBreaks = (prev.customBreaks || []).slice(
0,
styleConfig.segments + 1
);
prevBreaks.sort((a, b) => a - b);
return { ...prev, customBreaks: prevBreaks };
});
}}
/>
)
)}
</Box>
</Box>
)}