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

2025-12-16 16:08:29 +08:00
parent 715ec9ead0
commit 3aa68d796b
10 changed files with 53 additions and 78 deletions
--- a/src/app/OlMap/Controls/BaseLayers.tsx
+++ b/src/app/OlMap/Controls/BaseLayers.tsx
@@ -179,7 +179,7 @@ const BaseLayers: React.FC = () => {
  };

  return (
-    <div className="absolute right-17 bottom-8 z-99">
+    <div className="absolute right-17 bottom-8 z-1300">
      <div
        className="w-20 h-20 bg-white rounded-xl drop-shadow-xl shadow-black"
        onMouseEnter={handleEnter}
--- a/src/app/OlMap/Controls/DrawPanel.tsx
+++ b/src/app/OlMap/Controls/DrawPanel.tsx
@@ -306,7 +306,7 @@ const DrawPanel: React.FC = () => {
  const isSaveDisabled = drawnFeatures.length === 0;

  return (
-    <div className="absolute top-20 left-4 bg-white p-1 rounded-xl shadow-lg flex flex-col opacity-85 hover:opacity-100 transition-opacity z-10">
+    <div className="absolute top-20 left-4 bg-white p-1 rounded-xl shadow-lg flex flex-col opacity-85 hover:opacity-100 transition-opacity z-1300">
      <div className="flex">
        <ToolbarButton
          icon={<BackHandOutlinedIcon />}
--- a/src/app/OlMap/Controls/HistoryDataPanel.tsx
+++ b/src/app/OlMap/Controls/HistoryDataPanel.tsx
@@ -12,7 +12,6 @@ import {
  Tabs,
  Tooltip,
  Typography,
-  Drawer,
 } from "@mui/material";
 import { Refresh, ShowChart, TableChart } from "@mui/icons-material";
 import { DataGrid, GridColDef } from "@mui/x-data-grid";
@@ -649,34 +648,38 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
  return (
    <>
      {/* 主面板 */}
-      <Drawer
-        anchor="right"
-        variant="persistent"
-        hideBackdrop
+      <Box
        sx={{
-          width: 0,
-          flexShrink: 0,
-          "& .MuiDrawer-paper": {
-            width: "min(920px, calc(100vw - 2rem))",
-            boxSizing: "border-box",
-            position: "absolute",
-            top: 80,
-            right: 16,
-            height: "860px",
-            borderRadius: "12px",
-            boxShadow:
-              "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
-            backdropFilter: "blur(8px)",
-            opacity: 0.95,
-            transition: "transform 0.3s ease-in-out, opacity 0.3s ease-in-out",
-            border: "none",
-            "&:hover": {
-              opacity: 1,
-            },
+          position: "fixed",
+          left: "50%",
+          top: "50%",
+          transform: "translate(-50%, -50%)",
+          width: "min(920px, calc(100vw - 2rem))",
+          maxWidth: "100vw",
+          height: "860px",
+          maxHeight: "calc(100vh - 2rem)",
+          boxSizing: "border-box",
+          borderRadius: "12px",
+          boxShadow:
+            "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+          backdropFilter: "blur(8px)",
+          opacity: 0.95,
+          transition: "opacity 0.3s ease-in-out",
+          border: "none",
+          display: "flex",
+          flexDirection: "column",
+          zIndex: 1300,
+          backgroundColor: "white",
+          overflow: "hidden",
+          "&:hover": {
+            opacity: 1,
          },
        }}
      >
-        <Box className="flex flex-col h-full bg-white rounded-xl overflow-hidden">
+        <Box
+          className="flex flex-col h-full rounded-xl"
+          sx={{ height: "100%", width: "100%" }}
+        >
          {/* Header */}
          <Box
            sx={{
@@ -852,7 +855,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
            {activeTab === "chart" ? renderChart() : renderTable()}
          </Box>
        </Box>
-      </Drawer>
+      </Box>
    </>
  );
 };
--- a/src/app/OlMap/Controls/LayerControl.tsx
+++ b/src/app/OlMap/Controls/LayerControl.tsx
@@ -24,8 +24,8 @@ const LayerControl: React.FC = () => {
    deckLayer,
    isContourLayerAvailable,
    isWaterflowLayerAvailable,
+    setShowWaterflowLayer,
    setShowContourLayer,
-    flowAnimation,
  } = data;
  const [layerItems, setLayerItems] = useState<LayerItem[]>([]);

@@ -142,7 +142,7 @@ const LayerControl: React.FC = () => {
        setShowContourLayer && setShowContourLayer(checked);
      }
      if (item.id === "waterflowLayer") {
-        if (flowAnimation) flowAnimation.current = checked;
+        setShowWaterflowLayer && setShowWaterflowLayer(checked);
      }
    }

@@ -156,7 +156,7 @@ const LayerControl: React.FC = () => {
  }

  return (
-    <div className="absolute left-4 bottom-4 bg-white rounded-md drop-shadow-lg z-10 opacity-85 hover:opacity-100 transition-opacity max-w-xs">
+    <div className="absolute left-4 bottom-4 bg-white rounded-md drop-shadow-lg z-1300 opacity-85 hover:opacity-100 transition-opacity max-w-xs">
      <div className="ml-3 grid grid-cols-3">
        {layerItems.map((item) => (
          <FormControlLabel
--- a/src/app/OlMap/Controls/PropertyPanel.tsx
+++ b/src/app/OlMap/Controls/PropertyPanel.tsx
@@ -50,7 +50,7 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
    : 0;

  return (
-    <div className="absolute top-4 right-4 bg-white shadow-2xl rounded-xl overflow-hidden w-96 max-h-[850px] flex flex-col backdrop-blur-sm z-50 opacity-95 hover:opacity-100 transition-all duration-300 ">
+    <div className="absolute top-4 right-4 bg-white shadow-2xl rounded-xl overflow-hidden w-96 max-h-[850px] flex flex-col backdrop-blur-sm z-1300 opacity-95 hover:opacity-100 transition-all duration-300 ">
      {/* 头部 */}
      <div className="flex justify-between items-center px-5 py-4 bg-[#257DD4] text-white">
        <div className="flex items-center gap-2">
--- a/src/app/OlMap/Controls/ScaleLine.tsx
+++ b/src/app/OlMap/Controls/ScaleLine.tsx
@@ -35,7 +35,7 @@ const Scale: React.FC = () => {
  }, [map]);

  return (
-    <div className="absolute bottom-0 right-0 flex col-auto px-2 bg-white bg-opacity-70 text-black rounded-tl shadow-md text-sm">
+    <div className="absolute bottom-0 right-0 flex col-auto px-2 bg-white bg-opacity-70 text-black rounded-tl shadow-md text-sm z-1300">
      <div className="px-1">缩放: {zoomLevel.toFixed(1)}</div>
      <div className="px-1">
        坐标: {coordinates[0]}, {coordinates[1]}
--- a/src/app/OlMap/Controls/StyleEditorPanel.tsx
+++ b/src/app/OlMap/Controls/StyleEditorPanel.tsx
@@ -1436,7 +1436,7 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({

  return (
    <>
-      <div className="absolute top-20 left-4 bg-white p-4 rounded-xl shadow-lg opacity-95 hover:opacity-100 transition-opacity w-80 z-10">
+      <div className="absolute top-20 left-4 bg-white p-4 rounded-xl shadow-lg opacity-95 hover:opacity-100 transition-opacity w-80 z-1300">
        {/* 图层选择 */}
        <FormControl variant="standard" fullWidth margin="dense">
          <InputLabel>选择图层</InputLabel>
--- a/src/app/OlMap/Controls/Toolbar.tsx
+++ b/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 && (
--- a/src/app/OlMap/Controls/Zoom.tsx
+++ b/src/app/OlMap/Controls/Zoom.tsx
@@ -30,7 +30,7 @@ const Zoom: React.FC = () => {
  };

  return (
-    <div className="absolute right-4 bottom-8 z-10">
+    <div className="absolute right-4 bottom-8 z-1300">
      <div className="w-8 h-26 flex flex-col gap-2 items-center">
        <div className="w-8 h-8 bg-gray-50 flex items-center justify-center rounded-xl drop-shadow-xl shadow-black">
          <button
--- a/src/app/OlMap/MapComponent.tsx
+++ b/src/app/OlMap/MapComponent.tsx
@@ -52,8 +52,9 @@ interface DataContextType {
  setShowJunctionTextLayer?: React.Dispatch<React.SetStateAction<boolean>>;
  setShowPipeTextLayer?: React.Dispatch<React.SetStateAction<boolean>>;
  setShowContourLayer?: React.Dispatch<React.SetStateAction<boolean>>;
-  flowAnimation?: React.RefObject<boolean>;
+  // flowAnimation?: React.RefObject<boolean>;
  isContourLayerAvailable?: boolean;
+  setShowWaterflowLayer?: React.Dispatch<React.SetStateAction<boolean>>;
  setContourLayerAvailable?: React.Dispatch<React.SetStateAction<boolean>>;
  isWaterflowLayerAvailable?: boolean;
  setWaterflowLayerAvailable?: React.Dispatch<React.SetStateAction<boolean>>;
@@ -124,7 +125,8 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
  const flowAnimation = useRef(false); // 添加动画控制标志
  const [isContourLayerAvailable, setContourLayerAvailable] = useState(false); // 控制等高线图层显示
  const [isWaterflowLayerAvailable, setWaterflowLayerAvailable] =
-    useState(false); // 控制等高线图层显示
+    useState(true); // 控制等高线图层显示
+  const [showWaterflowLayer, setShowWaterflowLayer] = useState(false); // 控制等高线图层显示
  const [currentZoom, setCurrentZoom] = useState(11); // 当前缩放级别

  // 防抖更新函数
@@ -867,6 +869,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
        opacity: 0.8,
        visible:
          isWaterflowLayerAvailable &&
+          showWaterflowLayer &&
          flowAnimation.current &&
          currentZoom >= 12 &&
          currentZoom <= 24,
@@ -898,6 +901,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
    pipeText,
    pipeData.length,
    isWaterflowLayerAvailable,
+    showWaterflowLayer,
  ]);

  // 计算值更新时，更新 junctionData 和 pipeData
@@ -967,11 +971,12 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
          setShowJunctionTextLayer,
          setShowPipeTextLayer,
          setShowContourLayer,
-          flowAnimation,
+          // flowAnimation,
          isContourLayerAvailable,
          setContourLayerAvailable,
          isWaterflowLayerAvailable,
          setWaterflowLayerAvailable,
+          setShowWaterflowLayer,
          setJunctionText,
          setPipeText,
          junctionText,