重新设计属性面板，为 demand 提供二级表格显示更多信息

src/app/OlMap/Controls/Toolbar.tsx

@@ -4,6 +4,7 @@ import ToolbarButton from "@/components/olmap/common/ToolbarButton";
 import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
 import PaletteOutlinedIcon from "@mui/icons-material/PaletteOutlined";
+import QueryStatsOutlinedIcon from "@mui/icons-material/QueryStatsOutlined";
 import PropertyPanel from "./PropertyPanel"; // 引入属性面板组件
 import DrawPanel from "./DrawPanel"; // 引入绘图面板组件
 
@@ -266,6 +267,9 @@ const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons, queryType }) => {
       case "draw":
         setShowDrawPanel(false);
         break;
+      case "history":
+        // 取消历史查询激活时的清理（目前不保留额外状态）
+        break;
     }
   };
 
@@ -278,6 +282,47 @@ const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons, queryType }) => {
       case "draw":
         setShowDrawPanel(true);
         break;
+      case "history":
+        // 激活历史查询后立即触发一次网络历史数据查询（结果暂时打印到控制台）
+        queryNetworkHistory();
+        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);
     }
   };
 
@@ -363,7 +408,7 @@ const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons, queryType }) => {
     const nodeComputedFields = [
       { key: "actualdemand", label: "实际需水量", unit: "m³/s" },
       { key: "head", label: "水头", unit: "m" },
-      { key: "pressure", label: "压力", unit: "kPa" },
+      { key: "pressure", label: "压力", unit: "m" },
       { key: "quality", label: "水质", unit: "mg/L" },
     ];
 
@@ -410,11 +455,22 @@ const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons, queryType }) => {
             value: properties.elevation?.toFixed?.(1),
             unit: "m",
           },
+          // 将 demand1~demand5 与 pattern1~pattern5 作为二级表格展示
           {
-            label: "需求量",
-            value: properties.demand?.toFixed?.(1),
-            unit: "m³/s",
-          },
+            type: "table",
+            label: "基本需水量",
+            columns: ["demand", "pattern"],
+            rows: Array.from({ length: 5 }, (_, i) => i + 1)
+              .map((idx) => {
+                const d = properties?.[`demand${idx}`]?.toFixed?.(3);
+                const p = properties?.[`pattern${idx}`];
+                // 仅当 demand 有效时展示该行
+                if (d !== undefined && d !== null && d !== "") {
+                  return [typeof d === "number" ? d.toFixed(3) : d, p ?? "-"];
+                }
+              })
+              .filter(Boolean) as (string | number)[][],
+          } as any,
         ],
       };
       // 追加计算属性
@@ -623,6 +679,14 @@ const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons, queryType }) => {
             onClick={() => handleToolClick("info")}
           />
         )}
+        {!hiddenButtons?.includes("history") && (
+          <ToolbarButton
+            icon={<QueryStatsOutlinedIcon />}
+            name="查询历史数据"
+            isActive={activeTools.includes("history")}
+            onClick={() => handleToolClick("history")}
+          />
+        )}
         {!hiddenButtons?.includes("draw") && (
           <ToolbarButton
             icon={<EditOutlinedIcon />}