重新设计弹出组件的层次布局，非常驻窗口将置于顶部；新增变量控制水流图层的显示；完善历史数据面板的设计

src/app/OlMap/Controls/Toolbar.tsx

@@ -7,6 +7,7 @@ import PaletteOutlinedIcon from "@mui/icons-material/PaletteOutlined";
 import QueryStatsOutlinedIcon from "@mui/icons-material/QueryStatsOutlined";
 import PropertyPanel from "./PropertyPanel"; // 引入属性面板组件
 import DrawPanel from "./DrawPanel"; // 引入绘图面板组件
+import HistoryDataPanel from "./HistoryDataPanel"; // 引入绘图面板组件
 
 import VectorSource from "ol/source/Vector";
 import VectorLayer from "ol/layer/Vector";
@@ -39,6 +40,7 @@ const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons, queryType }) => {
   const [showPropertyPanel, setShowPropertyPanel] = useState<boolean>(false);
   const [showDrawPanel, setShowDrawPanel] = useState<boolean>(false);
   const [showStyleEditor, setShowStyleEditor] = useState<boolean>(false);
+  const [showHistoryPanel, setShowHistoryPanel] = useState<boolean>(false);
   const [highlightLayer, setHighlightLayer] =
     useState<VectorLayer<VectorSource> | null>(null);
 
@@ -240,7 +242,7 @@ const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons, queryType }) => {
         setShowDrawPanel(false);
         break;
       case "history":
-        // 取消历史查询激活时的清理（目前不保留额外状态）
+        setShowHistoryPanel(false);
         break;
     }
   };
@@ -255,54 +257,18 @@ const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons, queryType }) => {
         setShowDrawPanel(true);
         break;
       case "history":
-        // 激活历史查询后立即触发一次网络历史数据查询（结果暂时打印到控制台）
-        queryNetworkHistory();
+        setShowHistoryPanel(true);
+        // 激活历史查询后：HistoryDataPanel 自行负责根据传入的 props 拉取数据。
         break;
     }
   };
 
-  // 查询管网历史数据的函数（激活时调用）
-  const queryNetworkHistory = async () => {
-    try {
-      // 由当前选中日期和 currentTime 构造查询时间（UTC ISO）
-      let dateObj: Date;
-      if (selectedDate instanceof Date) {
-        dateObj = new Date(selectedDate);
-      } else {
-        dateObj = new Date(selectedDate as any);
-      }
-      const minutes = Number(currentTime) || 0;
-      dateObj.setHours(Math.floor(minutes / 60), minutes % 60, 0, 0);
-      const querytime = dateObj.toISOString();
-
-      let url: string;
-      if (queryType === "scheme") {
-        url = `${backendUrl}/queryschemesimulationrecordsbytime/?scheme_name=${schemeName}&querytime=${querytime}`;
-      } else {
-        url = `${backendUrl}/querysimulationrecordsbytime/?querytime=${querytime}`;
-      }
-
-      const response = await fetch(url);
-      if (!response.ok) {
-        console.error("查询管网历史数据失败：", response.statusText);
-        return;
-      }
-      const result = await response.json();
-      // TODO: 根据需要把结果展示到面板或状态中，目前先打印
-      console.log("管网历史数据：", result);
-      // 简单提示用户已查询（可改为更友好的 UI）
-      // eslint-disable-next-line no-alert
-      alert("已查询管网历史数据（请查看控制台或后续面板展示）。");
-    } catch (error) {
-      console.error("查询管网历史数据出错：", error);
-    }
-  };
-
   // 关闭所有面板（除了样式编辑器）
   const closeAllPanelsExceptStyle = () => {
     setShowPropertyPanel(false);
     setHighlightFeature(null);
     setShowDrawPanel(false);
+    setShowHistoryPanel(false);
     // 样式编辑器保持其当前状态，不自动关闭
   };
   const [computedProperties, setComputedProperties] = useState<
@@ -686,6 +652,7 @@ const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons, queryType }) => {
           setLayerStyleStates={setLayerStyleStates}
         />
       )}
+      {showHistoryPanel && <HistoryDataPanel deviceIds={[]} />}
 
       {/* 图例显示 */}
       {activeLegendConfigs.length > 0 && (