实现 SCADA 设备列表数据对接；监测点优化，实现传感器定位；爆管分析，属性面板新增计算属性的获取；更新部分图标；爆管分析定位，更改时间轴样式。
This commit is contained in:
JIANG
@@ -3,6 +3,7 @@ import { useMap } from "../MapComponent";
|
||||
import { Layer } from "ol/layer";
|
||||
import { Checkbox, FormControlLabel } from "@mui/material";
|
||||
import WebGLVectorTileLayer from "ol/layer/WebGLVectorTile";
|
||||
import VectorLayer from "ol/layer/Vector";
|
||||
|
||||
const LayerControl: React.FC = () => {
|
||||
const map = useMap();
|
||||
@@ -16,7 +17,10 @@ const LayerControl: React.FC = () => {
|
||||
const mapLayers = map
|
||||
.getLayers()
|
||||
.getArray()
|
||||
.filter((layer) => layer instanceof WebGLVectorTileLayer) as Layer[];
|
||||
.filter(
|
||||
(layer) =>
|
||||
layer instanceof WebGLVectorTileLayer || layer instanceof VectorLayer
|
||||
) as Layer[];
|
||||
setLayers(mapLayers);
|
||||
const visible = new Map<Layer, boolean>();
|
||||
mapLayers.forEach((layer) => {
|
||||
|
||||
@@ -25,8 +25,9 @@ import { PlayArrow, Pause, Stop, Refresh } from "@mui/icons-material";
|
||||
import { TbRewindBackward15, TbRewindForward15 } from "react-icons/tb";
|
||||
import { FiSkipBack, FiSkipForward } from "react-icons/fi";
|
||||
import { useData } from "../MapComponent";
|
||||
import { config } from "@/config/config";
|
||||
import { config, NETWORK_NAME } from "@/config/config";
|
||||
import { useMap } from "../MapComponent";
|
||||
import { Network } from "inspector/promises";
|
||||
const backendUrl = config.backendUrl;
|
||||
|
||||
interface TimelineProps {
|
||||
@@ -69,6 +70,7 @@ const Timeline: React.FC<TimelineProps> = ({
|
||||
const [isPlaying, setIsPlaying] = useState<boolean>(false);
|
||||
const [playInterval, setPlayInterval] = useState<number>(5000); // 毫秒
|
||||
const [calculatedInterval, setCalculatedInterval] = useState<number>(15); // 分钟
|
||||
const [isCalculating, setIsCalculating] = useState<boolean>(false);
|
||||
|
||||
// 计算时间轴范围
|
||||
const minTime = timeRange
|
||||
@@ -105,6 +107,7 @@ const Timeline: React.FC<TimelineProps> = ({
|
||||
// 检查node缓存
|
||||
if (junctionProperties !== "") {
|
||||
const nodeCacheKey = `${query_time}_${junctionProperties}_${schemeName}`;
|
||||
console.log("Node Cache Key:", nodeCacheKey);
|
||||
if (nodeCacheRef.current.has(nodeCacheKey)) {
|
||||
nodeRecords = nodeCacheRef.current.get(nodeCacheKey)!;
|
||||
} else {
|
||||
@@ -121,7 +124,7 @@ const Timeline: React.FC<TimelineProps> = ({
|
||||
|
||||
// 检查link缓存
|
||||
if (pipeProperties !== "") {
|
||||
const linkCacheKey = `${query_time}_${pipeProperties}`;
|
||||
const linkCacheKey = `${query_time}_${pipeProperties}_${schemeName}`;
|
||||
if (linkCacheRef.current.has(linkCacheKey)) {
|
||||
linkRecords = linkCacheRef.current.get(linkCacheKey)!;
|
||||
} else {
|
||||
@@ -148,9 +151,9 @@ const Timeline: React.FC<TimelineProps> = ({
|
||||
if (!nodeResponse.ok)
|
||||
throw new Error(`Node fetch failed: ${nodeResponse.status}`);
|
||||
nodeRecords = await nodeResponse.json();
|
||||
// 缓存数据
|
||||
// 缓存数据（修复键以包含 schemeName）
|
||||
nodeCacheRef.current.set(
|
||||
`${query_time}_${junctionProperties}`,
|
||||
`${query_time}_${junctionProperties}_${schemeName}`,
|
||||
nodeRecords || []
|
||||
);
|
||||
}
|
||||
@@ -159,9 +162,9 @@ const Timeline: React.FC<TimelineProps> = ({
|
||||
if (!linkResponse.ok)
|
||||
throw new Error(`Link fetch failed: ${linkResponse.status}`);
|
||||
linkRecords = await linkResponse.json();
|
||||
// 缓存数据
|
||||
// 缓存数据（修复键以包含 schemeName）
|
||||
linkCacheRef.current.set(
|
||||
`${query_time}_${pipeProperties}`,
|
||||
`${query_time}_${pipeProperties}_${schemeName}`,
|
||||
linkRecords || []
|
||||
);
|
||||
}
|
||||
@@ -429,6 +432,63 @@ const Timeline: React.FC<TimelineProps> = ({
|
||||
}
|
||||
}, [map, handlePause]);
|
||||
|
||||
const handleForceCalculate = async () => {
|
||||
if (!NETWORK_NAME) {
|
||||
open?.({
|
||||
type: "error",
|
||||
message: "方案名称未设置，无法进行强制计算。",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
setIsCalculating(true);
|
||||
// 显示处理中的通知
|
||||
open?.({
|
||||
type: "progress",
|
||||
message: "正在强制计算，请稍候...",
|
||||
undoableTimeout: 3,
|
||||
});
|
||||
try {
|
||||
const body = {
|
||||
name: NETWORK_NAME,
|
||||
simulation_date: selectedDate.toISOString().split("T")[0], // YYYY-MM-DD
|
||||
start_time: `${formatTime(currentTime)}:00`, // HH:MM:00
|
||||
duration: calculatedInterval,
|
||||
};
|
||||
|
||||
const response = await fetch(
|
||||
`${backendUrl}/runsimulationmanuallybydate/`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(body),
|
||||
}
|
||||
);
|
||||
|
||||
if (response.ok) {
|
||||
open?.({
|
||||
type: "success",
|
||||
message: "重新计算成功",
|
||||
});
|
||||
} else {
|
||||
open?.({
|
||||
type: "error",
|
||||
message: "重新计算失败",
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Recalculation failed:", error);
|
||||
open?.({
|
||||
type: "error",
|
||||
message: "重新计算时发生错误",
|
||||
});
|
||||
} finally {
|
||||
setIsCalculating(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 w-[920px] opacity-90 hover:opacity-100 transition-opacity duration-300">
|
||||
<LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={zhCN}>
|
||||
@@ -574,7 +634,8 @@ const Timeline: React.FC<TimelineProps> = ({
|
||||
variant="outlined"
|
||||
size="small"
|
||||
startIcon={<Refresh />}
|
||||
// onClick={onRefresh}
|
||||
onClick={handleForceCalculate}
|
||||
disabled={isCalculating}
|
||||
>
|
||||
强制计算
|
||||
</Button>
|
||||
@@ -610,6 +671,7 @@ const Timeline: React.FC<TimelineProps> = ({
|
||||
"& .MuiSlider-track": {
|
||||
backgroundColor: "primary.main",
|
||||
height: 6,
|
||||
display: timeRange ? "none" : "block",
|
||||
},
|
||||
"& .MuiSlider-rail": {
|
||||
backgroundColor: "grey.300",
|
||||
|
||||
@@ -59,12 +59,13 @@ interface LayerStyleState {
|
||||
// 添加接口定义隐藏按钮的props
|
||||
interface ToolbarProps {
|
||||
hiddenButtons?: string[]; // 可选的隐藏按钮列表，例如 ['info', 'draw', 'style']
|
||||
queryType?: string; // 可选的查询类型参数
|
||||
}
|
||||
const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons }) => {
|
||||
const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons, queryType }) => {
|
||||
const map = useMap();
|
||||
const data = useData();
|
||||
if (!data) return null;
|
||||
const { currentTime, selectedDate } = data;
|
||||
const { currentTime, selectedDate, schemeName } = data;
|
||||
const [activeTools, setActiveTools] = useState<string[]>([]);
|
||||
const [highlightFeature, setHighlightFeature] = useState<FeatureLike | null>(
|
||||
null
|
||||
@@ -319,9 +320,16 @@ const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons }) => {
|
||||
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}`
|
||||
);
|
||||
let response;
|
||||
if (queryType === "scheme") {
|
||||
response = await fetch(
|
||||
`${backendUrl}/queryschemesimulationrecordsbyidtime/?scheme_name=${schemeName}&id=${id}&querytime=${querytime}&type=${type}`
|
||||
);
|
||||
} else {
|
||||
response = await fetch(
|
||||
`${backendUrl}/querysimulationrecordsbyidtime/?id=${id}&querytime=${querytime}&type=${type}`
|
||||
);
|
||||
}
|
||||
if (!response.ok) {
|
||||
throw new Error("API request failed");
|
||||
}
|
||||
@@ -333,7 +341,7 @@ const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons }) => {
|
||||
}
|
||||
};
|
||||
// 仅当 currentTime 有效时查询
|
||||
if (currentTime !== -1) queryComputedProperties();
|
||||
if (currentTime !== -1 && queryType) queryComputedProperties();
|
||||
}, [highlightFeature, currentTime, selectedDate]);
|
||||
|
||||
// 从要素属性中提取属性面板需要的数据
|
||||
|
||||
Reference in New Issue
Block a user