新增健康预测数据查看组件

src/app/(main)/health-risk-analysis/page.tsx

@@ -5,13 +5,18 @@ import Timeline from "@components/olmap/HealthRiskAnalysis/Timeline";
 import MapToolbar from "@app/OlMap/Controls/Toolbar";
 import { HealthRiskProvider } from "@components/olmap/HealthRiskAnalysis/HealthRiskContext";
 import HealthRiskPieChart from "@components/olmap/HealthRiskAnalysis/HealthRiskPieChart";
+import HistoryDataPanel from "@components/olmap/HealthRiskAnalysis/HistoryDataPanel";
 
 export default function Home() {
   return (
     <div className="relative w-full h-full overflow-hidden">
       <HealthRiskProvider>
         <MapComponent>
-          <MapToolbar queryType="realtime" />
+          <MapToolbar
+            queryType="realtime"
+            hiddenButtons={["style"]}
+            HistoryPanel={HistoryDataPanel}
+          />
           <Timeline />
           <HealthRiskPieChart />
         </MapComponent>

src/app/OlMap/Controls/Toolbar.tsx

@@ -26,8 +26,13 @@ const backendUrl = config.BACKEND_URL;
 interface ToolbarProps {
   hiddenButtons?: string[]; // 可选的隐藏按钮列表，例如 ['info', 'draw', 'style']
   queryType?: string; // 可选的查询类型参数
+  HistoryPanel?: React.FC<any>; // 可选的自定义历史数据面板
 }
-const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons, queryType }) => {
+const Toolbar: React.FC<ToolbarProps> = ({
+  hiddenButtons,
+  queryType,
+  HistoryPanel,
+}) => {
   const map = useMap();
   const data = useData();
   if (!data) return null;
@@ -654,43 +659,80 @@ const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons, queryType }) => {
           setLayerStyleStates={setLayerStyleStates}
         />
       )}
-      {showHistoryPanel && (
-        <HistoryDataPanel
-          featureInfos={(() => {
-            if (!highlightFeature || !showHistoryPanel) return [];
-            const properties = highlightFeature.getProperties();
-            const id = properties.id;
-            if (!id) return [];
+      {showHistoryPanel &&
+        (HistoryPanel ? (
+          <HistoryPanel
+            featureInfos={(() => {
+              if (!highlightFeature || !showHistoryPanel) return [];
+              const properties = highlightFeature.getProperties();
+              const id = properties.id;
+              if (!id) return [];
 
-            // 从图层名称推断类型
-            const layerId =
-              highlightFeature.getId()?.toString().split(".")[0] || "";
-            let type = "unknown";
+              // 从图层名称推断类型
+              const layerId =
+                highlightFeature.getId()?.toString().split(".")[0] || "";
+              let type = "unknown";
 
-            if (layerId.includes("pipe")) {
-              type = "pipe";
-            } else if (layerId.includes("junction")) {
-              type = "junction";
-            } else if (layerId.includes("tank")) {
-              type = "tank";
-            } else if (layerId.includes("reservoir")) {
-              type = "reservoir";
-            } else if (layerId.includes("pump")) {
-              type = "pump";
-            } else if (layerId.includes("valve")) {
-              type = "valve";
-            }
-            // 仅处理 type 为 pipe 或 junction 的情况
-            if (type !== "pipe" && type !== "junction") {
-              return [];
-            }
-            return [[id, type]];
-          })()}
-          scheme_type="burst_Analysis"
-          scheme_name={schemeName}
-          type={queryType as "realtime" | "scheme" | "none"}
-        />
-      )}
+              if (layerId.includes("pipe")) {
+                type = "pipe";
+              } else if (layerId.includes("junction")) {
+                type = "junction";
+              } else if (layerId.includes("tank")) {
+                type = "tank";
+              } else if (layerId.includes("reservoir")) {
+                type = "reservoir";
+              } else if (layerId.includes("pump")) {
+                type = "pump";
+              } else if (layerId.includes("valve")) {
+                type = "valve";
+              }
+              // 仅处理 type 为 pipe 或 junction 的情况
+              if (type !== "pipe" && type !== "junction") {
+                return [];
+              }
+              return [[id, type]];
+            })()}
+            scheme_type="burst_Analysis"
+            scheme_name={schemeName}
+            type={queryType as "realtime" | "scheme" | "none"}
+          />
+        ) : (
+          <HistoryDataPanel
+            featureInfos={(() => {
+              if (!highlightFeature || !showHistoryPanel) return [];
+              const properties = highlightFeature.getProperties();
+              const id = properties.id;
+              if (!id) return [];
+
+              // 从图层名称推断类型
+              const layerId =
+                highlightFeature.getId()?.toString().split(".")[0] || "";
+              let type = "unknown";
+
+              if (layerId.includes("pipe")) {
+                type = "pipe";
+              } else if (layerId.includes("junction")) {
+                type = "junction";
+              } else if (layerId.includes("tank")) {
+                type = "tank";
+              } else if (layerId.includes("reservoir")) {
+                type = "reservoir";
+              } else if (layerId.includes("pump")) {
+                type = "pump";
+              } else if (layerId.includes("valve")) {
+                type = "valve";
+              }
+              // 仅处理 type 为 pipe 或 junction 的情况
+              if (type !== "pipe" && type !== "junction") {
+                return [];
+              }
+              return [[id, type]];
+            })()}
+            scheme_type="burst_Analysis"
+            scheme_name={schemeName}
+            type={queryType as "realtime" | "scheme" | "none"}
+          />
+        ))}
 
       {/* 图例显示 */}
       {activeLegendConfigs.length > 0 && (