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

属性查询面板添加计算值；完善时间轴获取数据的缓存机制；

Browse Source
This commit is contained in:
JIANG
2025-10-17 18:15:09 +08:00
parent 6ddce65445
commit 4e819b20ea
4 changed files with 251 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
import React, { useState, useEffect, useCallback } from "react";
import { useMap } from "../MapComponent";
import { useData, useMap } from "../MapComponent";
import ToolbarButton from "@/components/olmap/common/ToolbarButton";
import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
@@ -23,8 +23,14 @@ import { toLonLat } from "ol/proj";
import { booleanIntersects, buffer, point, toWgs84 } from "@turf/turf";
import RenderFeature from "ol/render/Feature";
import { config } from "@/config/config";
const backendUrl = config.backendUrl;
const Toolbar: React.FC = () => {
const map = useMap();
const data = useData();
if (!data) return null;
const { currentTime, selectedDate } = data;
const [activeTools, setActiveTools] = useState<string[]>([]);
const [highlightFeature, setHighlightFeature] = useState<FeatureLike | null>(
null
@@ -186,7 +192,7 @@ const Toolbar: React.FC = () => {
const features = results
.filter((json) => json !== null) // 过滤掉失败的请求
.flatMap((json) => new GeoJSON().readFeatures(json));
console.log("查询到的要素：", features);
// console.log("查询到的要素：", features);
return features;
} else {
// 查询指定图层
@@ -201,7 +207,7 @@ const Toolbar: React.FC = () => {
}
const json = await response.json();
const features = new GeoJSON().readFeatures(json);
console.log("查询到的要素：", features);
// console.log("查询到的要素：", features);
return features;
}
} catch (error) {
@@ -399,45 +405,145 @@ const Toolbar: React.FC = () => {
setShowDrawPanel(false);
// 样式编辑器保持其当前状态，不自动关闭
};
const [computedProperties, setComputedProperties] = useState<
Record<string, any>
>({});
// 添加 useEffect 来查询计算属性
useEffect(() => {
if (!highlightFeature || !selectedDate) {
setComputedProperties({});
return;
}
const id = highlightFeature.getProperties().id;
if (!id) {
setComputedProperties({});
return;
}
const queryComputedProperties = async () => {
try {
const properties = highlightFeature?.getProperties?.() || {};
const type =
properties.geometry?.getType?.() === "LineString" ? "link" : "node";
// selectedDate 格式化为 YYYY-MM-DD
let dateObj: Date;
if (selectedDate instanceof Date) {
dateObj = new Date(selectedDate);
} else {
dateObj = new Date(selectedDate);
}
const minutes = Number(currentTime) || 0;
dateObj.setHours(Math.floor(minutes / 60), minutes % 60, 0, 0);
// 转为 UTC ISO 字符串
const querytime = dateObj.toISOString(); // 例如 "2025-09-16T16:30:00.000Z"
const response = await fetch(
`${backendUrl}/queryrecordsbyidtime/?id=${id}&querytime=${querytime}&type=${type}`
);
if (!response.ok) {
throw new Error("API request failed");
}
const data = await response.json();
setComputedProperties(data.results[0] || {});
} catch (error) {
console.error("Error querying computed properties:", error);
setComputedProperties({});
}
};
queryComputedProperties();
}, [highlightFeature, currentTime, selectedDate]);
// 从要素属性中提取属性面板需要的数据
const getFeatureProperties = useCallback(() => {
if (!highlightFeature) return {};
const properties = highlightFeature.getProperties();
console.log(properties, properties.geometry.type, "properties");
// 计算属性字段，增加 key 字段
const pipeComputedFields = [
{ key: "flow", label: "流量", unit: "m³/s" },
{ key: "friction", label: "摩阻", unit: "" },
{ key: "headloss", label: "水头损失", unit: "m" },
{ key: "quality", label: "水质", unit: "mg/L" },
{ key: "reaction", label: "反应", unit: "1/s" },
{ key: "setting", label: "设置", unit: "" },
{ key: "status", label: "状态", unit: "" },
{ key: "velocity", label: "流速", unit: "m/s" },
];
const nodeComputedFields = [
{ key: "actualdemand", label: "实际需水量", unit: "m³/s" },
{ key: "head", label: "水头", unit: "m" },
{ key: "pressure", label: "压力", unit: "kPa" },
{ key: "quality", label: "水质", unit: "mg/L" },
];
if (properties.geometry.getType() === "LineString") {
console.log(properties, "properties");
return {
let result = {
id: properties.id,
type: "管道",
properties: [
{ label: "起始节点ID", value: properties.node1 },
{ label: "终点节点ID", value: properties.node2 },
{ label: "长度", value: properties.length.toFixed(1), unit: "m" },
{ label: "管径", value: properties.diameter.toFixed(1), unit: "mm" },
{ label: "长度", value: properties.length?.toFixed?.(1), unit: "m" },
{
label: "管径",
value: properties.diameter?.toFixed?.(1),
unit: "mm",
},
{ label: "粗糙度", value: properties.roughness },
{ label: "局部损失", value: properties.minor_loss },
{ label: "初始状态", value: "开" },
],
};
// 追加计算属性
if (computedProperties) {
pipeComputedFields.forEach(({ key, label, unit }) => {
if (computedProperties[key] !== undefined) {
result.properties.push({
label,
value:
computedProperties[key].toFixed?.(2) || computedProperties[key],
unit,
});
}
});
}
return result;
}
if (properties.geometry.getType() === "Point") {
return {
let result = {
id: properties.id,
type: "节点",
properties: [
{ label: "海拔", value: properties.elevation.toFixed(1), unit: "m" },
{
label: "海拔",
value: properties.elevation?.toFixed?.(1),
unit: "m",
},
{
label: "需求量",
value: properties.demand.toFixed(1),
value: properties.demand?.toFixed?.(1),
unit: "m³/s",
},
],
};
// 追加计算属性
if (computedProperties) {
nodeComputedFields.forEach(({ key, label, unit }) => {
if (computedProperties[key] !== undefined) {
result.properties.push({
label,
value:
computedProperties[key].toFixed?.(2) || computedProperties[key],
unit,
});
}
});
}
return result;
}
return {};
}, [highlightFeature]);
}, [highlightFeature, computedProperties]);
return (
<>