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

调整数据小数点位数显示；更换 valve 图标，上调 valvesLayer 的显示层级；特殊处理流量的样式显示

Browse Source
This commit is contained in:
JIANG
2025-11-19 14:39:21 +08:00
parent bb040f1612
commit 538b9fe177
6 changed files with 140 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/OlMap/Controls/HistoryDataPanel.tsx
View File

@@ -70,7 +70,6 @@ export interface HistoryDataPanelProps {
defaultTab?: "chart" | "table";
/** Y 轴数值的小数位数 */
fractionDigits?: number;
// 清洗功能已移除，相关参数请通过外部面板/服务清洗后再传入
}
type PanelTab = "chart" | "table";
@@ -235,7 +234,7 @@ const HistoryDataPanel: React.FC<HistoryDataPanelProps> = ({
fetchTimeSeriesData = defaultFetcher,
visible = true,
defaultTab = "chart",
fractionDigits = 2,
fractionDigits = 3,
}) => {
// 从 devices 中提取 id 列表用于渲染与查询
const deviceIds = devices?.map((d) => d.id) ?? [];

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

@@ -301,7 +301,7 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
if (layerId !== undefined && property !== undefined) {
// 验证自定义断点设置
if (styleConfig.classificationMethod === "custom_breaks") {
const expected = styleConfig.segments + 1;
const expected = styleConfig.segments;
const custom = styleConfig.customBreaks || [];
if (
custom.length !== expected ||
@@ -609,7 +609,6 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
// 更新当前 VectorTileSource 中的所有缓冲要素属性
const updateVectorTileSource = (property: string, data: any[]) => {
if (!map) return;
const vectorTileSources = map
.getAllLayers()
.filter((layer) => layer instanceof WebGLVectorTileLayer)
@@ -636,7 +635,12 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
const featureId = renderFeature.get("id");
const value = dataMap.get(featureId);
if (value !== undefined) {
(renderFeature as any).properties_[property] = value;
if (property === "flow") {
// 特殊处理流量属性，取绝对值
(renderFeature as any).properties_[property] = Math.abs(value);
} else {
(renderFeature as any).properties_[property] = value;
}
}
});
});
@@ -677,7 +681,12 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
const featureId = renderFeature.get("id");
const value = dataMap.get(featureId);
if (value !== undefined) {
(renderFeature as any).properties_[property] = value;
if (property === "flow") {
// 特殊处理流量属性，取绝对值
(renderFeature as any).properties_[property] = Math.abs(value);
} else {
(renderFeature as any).properties_[property] = value;
}
}
});
}
@@ -845,7 +854,7 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
useEffect(() => {
if (styleConfig.classificationMethod !== "custom_breaks") return;
const numBreaks = styleConfig.segments + 1;
const numBreaks = styleConfig.segments;
setStyleConfig((prev) => {
const prevBreaks = prev.customBreaks || [];
if (prevBreaks.length === numBreaks) return prev;
@@ -1372,46 +1381,44 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
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 };
});
}}
/>
)
)}
{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>
</Box>
)}
@@ -1473,7 +1480,7 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
}
/>
}
label="显示属性（放大后显示）"
label="显示属性（缩放 >=15 级时显示）"
/>
<div className="my-3"></div>
{/* 操作按钮 */}

4
src/app/OlMap/Controls/Toolbar.tsx
View File

@@ -403,7 +403,7 @@ const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons, queryType }) => {
result.properties.push({
label,
value:
computedProperties[key].toFixed?.(2) || computedProperties[key],
computedProperties[key].toFixed?.(3) || computedProperties[key],
unit,
});
}
@@ -446,7 +446,7 @@ const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons, queryType }) => {
result.properties.push({
label,
value:
computedProperties[key].toFixed?.(2) || computedProperties[key],
computedProperties[key].toFixed?.(3) || computedProperties[key],
unit,
});
}