实现 SCADA 设备列表数据对接；监测点优化，实现传感器定位；爆管分析，属性面板新增计算属性的获取；更新部分图标；爆管分析定位，更改时间轴样式。

2025-10-29 16:39:23 +08:00
parent 86e7349c85
commit a5954624a0
22 changed files with 474 additions and 170 deletions
--- a/src/app/(main)/burst-pipe-analysis/page.tsx
+++ b/src/app/(main)/burst-pipe-analysis/page.tsx
@@ -8,7 +8,7 @@ export default function Home() {
  return (
    <div className="relative w-full h-full overflow-hidden">
      <MapComponent>
-        <MapToolbar />
+        <MapToolbar queryType="scheme" />
        <BurstPipeAnalysisPanel />
      </MapComponent>
    </div>
--- a/src/app/(main)/network-simulation/page.tsx
+++ b/src/app/(main)/network-simulation/page.tsx
@@ -14,35 +14,35 @@ const mockDevices = [
    name: "SCADA-001",
    type: "pressure",
    coordinates: [121.4737, 31.2304] as [number, number],
-    status: "online" as const,
+    status: "在线" as const,
  },
  {
    id: "SCADA-002",
    name: "SCADA-002",
    type: "flow",
    coordinates: [121.4807, 31.2204] as [number, number],
-    status: "warning" as const,
+    status: "警告" as const,
  },
  {
    id: "SCADA-003",
    name: "SCADA-003",
    type: "pressure",
    coordinates: [121.4607, 31.2354] as [number, number],
-    status: "offline" as const,
+    status: "离线" as const,
  },
  {
    id: "SCADA-004",
    name: "SCADA-004",
    type: "demand",
    coordinates: [121.4457, 31.2104] as [number, number],
-    status: "online" as const,
+    status: "在线" as const,
  },
  {
    id: "SCADA-005",
    name: "SCADA-005",
    type: "level",
    coordinates: [121.4457, 31.2104] as [number, number],
-    status: "online" as const,
+    status: "在线" as const,
  },
 ];

@@ -77,21 +77,21 @@ export default function Home() {
  return (
    <div className="relative w-full h-full overflow-hidden">
      <MapComponent>
-        <MapToolbar />
+        <MapToolbar queryType="realtime" />
        <Timeline />
+        <SCADADeviceList
+          devices={[]}
+          onDeviceClick={handleDeviceClick}
+          onSelectionChange={handleSelectionChange}
+          selectedDeviceIds={selectedDeviceIds}
+        />
+        <SCADADataPanel
+          deviceIds={selectedDeviceIds}
+          deviceLabels={deviceLabels}
+          visible={panelVisible}
+          onClose={handleClosePanel}
+        />
      </MapComponent>
-      <SCADADeviceList
-        devices={devices}
-        onDeviceClick={handleDeviceClick}
-        onSelectionChange={handleSelectionChange}
-        selectedDeviceIds={selectedDeviceIds}
-      />
-      <SCADADataPanel
-        deviceIds={selectedDeviceIds}
-        deviceLabels={deviceLabels}
-        visible={panelVisible}
-        onClose={handleClosePanel}
-      />
    </div>
  );
 }
--- a/src/app/(main)/scada-data-cleaning/page.tsx
+++ b/src/app/(main)/scada-data-cleaning/page.tsx
@@ -13,35 +13,35 @@ const mockDevices = [
    name: "SCADA-001",
    type: "pressure",
    coordinates: [121.4737, 31.2304] as [number, number],
-    status: "online" as const,
+    status: "在线" as const,
  },
  {
    id: "SCADA-002",
    name: "SCADA-002",
    type: "flow",
    coordinates: [121.4807, 31.2204] as [number, number],
-    status: "warning" as const,
+    status: "警告" as const,
  },
  {
    id: "SCADA-003",
    name: "SCADA-003",
    type: "pressure",
    coordinates: [121.4607, 31.2354] as [number, number],
-    status: "offline" as const,
+    status: "离线" as const,
  },
  {
    id: "SCADA-004",
    name: "SCADA-004",
    type: "demand",
    coordinates: [121.4457, 31.2104] as [number, number],
-    status: "online" as const,
+    status: "在线" as const,
  },
  {
    id: "SCADA-005",
    name: "SCADA-005",
    type: "level",
    coordinates: [121.4457, 31.2104] as [number, number],
-    status: "online" as const,
+    status: "在线" as const,
  },
 ];

@@ -77,19 +77,19 @@ export default function Home() {
    <div className="relative w-full h-full overflow-hidden">
      <MapComponent>
        <MapToolbar hiddenButtons={["style"]} />
+        <SCADADeviceList
+          devices={[]}
+          onDeviceClick={handleDeviceClick}
+          onSelectionChange={handleSelectionChange}
+          selectedDeviceIds={selectedDeviceIds}
+        />
+        <SCADADataPanel
+          deviceIds={selectedDeviceIds}
+          deviceLabels={deviceLabels}
+          visible={panelVisible}
+          onClose={handleClosePanel}
+        />
      </MapComponent>
-      <SCADADeviceList
-        devices={devices}
-        onDeviceClick={handleDeviceClick}
-        onSelectionChange={handleSelectionChange}
-        selectedDeviceIds={selectedDeviceIds}
-      />
-      <SCADADataPanel
-        deviceIds={selectedDeviceIds}
-        deviceLabels={deviceLabels}
-        visible={panelVisible}
-        onClose={handleClosePanel}
-      />
    </div>
  );
 }
--- a/src/app/OlMap/Controls/LayerControl.tsx
+++ b/src/app/OlMap/Controls/LayerControl.tsx
@@ -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) => {
--- a/src/app/OlMap/Controls/Timeline.tsx
+++ b/src/app/OlMap/Controls/Timeline.tsx
@@ -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",
--- a/src/app/OlMap/Controls/Toolbar.tsx
+++ b/src/app/OlMap/Controls/Toolbar.tsx
@@ -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]);

  // 从要素属性中提取属性面板需要的数据
--- a/src/app/OlMap/MapComponent.tsx
+++ b/src/app/OlMap/MapComponent.tsx
@@ -23,6 +23,10 @@ import { Deck } from "@deck.gl/core";
 import { TextLayer } from "@deck.gl/layers";
 import { TripsLayer } from "@deck.gl/geo-layers";
 import { CollisionFilterExtension } from "@deck.gl/extensions";
+import VectorSource from "ol/source/Vector";
+import GeoJson from "ol/format/GeoJSON";
+import VectorLayer from "ol/layer/Vector";
+import { Style, Icon } from "ol/style";

 interface MapComponentProps {
  children?: React.ReactNode;
@@ -31,6 +35,8 @@ interface DataContextType {
  currentTime?: number; // 当前时间
  setCurrentTime?: React.Dispatch<React.SetStateAction<number>>;
  selectedDate?: Date; // 选择的日期
+  schemeName?: string; // 当前方案名称
+  setSchemeName?: React.Dispatch<React.SetStateAction<string>>;
  setSelectedDate?: React.Dispatch<React.SetStateAction<Date>>;
  currentJunctionCalData?: any[]; // 当前计算结果
  setCurrentJunctionCalData?: React.Dispatch<React.SetStateAction<any[]>>;
@@ -44,6 +50,7 @@ interface DataContextType {
  pipeText: string;
  setJunctionText?: React.Dispatch<React.SetStateAction<string>>;
  setPipeText?: React.Dispatch<React.SetStateAction<string>>;
+  scadaData?: any[]; // SCADA 数据
 }

 // 创建自定义Layer类来包装deck.gl
@@ -103,6 +110,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
  const [currentTime, setCurrentTime] = useState<number>(-1); // 默认选择当前时间
  // const [selectedDate, setSelectedDate] = useState<Date>(new Date("2025-9-17"));
  const [selectedDate, setSelectedDate] = useState<Date>(new Date()); // 默认今天
+  const [schemeName, setSchemeName] = useState<string>(""); // 当前方案名称

  const [currentJunctionCalData, setCurrentJunctionCalData] = useState<any[]>(
    []
@@ -165,7 +173,22 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
      setPipeDataState((prev) => [...prev, ...uniqueNewData]);
    }
  };
+  // 配置地图数据源、图层和样式
  const defaultFlatStyle: FlatStyleLike = config.mapDefaultStyle;
+  // 定义 SCADA 图层的样式函数，根据 type 字段选择不同图标
+  const scadaStyle = (feature: any) => {
+    const type = feature.get("type");
+    const scadaPressureIcon = "/icons/scada_pressure.svg";
+    const scadaFlowIcon = "/icons/scada_flow.svg";
+    // 如果 type 不匹配，可以设置默认图标或不显示
+    return new Style({
+      image: new Icon({
+        src: type === "pipe_flow" ? scadaFlowIcon : scadaPressureIcon,
+        scale: 0.1, // 根据需要调整图标大小
+        anchor: [0.5, 0.5], // 图标锚点居中
+      }),
+    });
+  };
  // 矢量瓦片数据源和图层
  const junctionSource = new VectorTileSource({
    url: `${mapUrl}/gwc/service/tms/1.0.0/TJWater:geo_junctions_mat@WebMercatorQuad@pbf/{z}/{x}/{-y}.pbf`, // 替换为你的 MVT 瓦片服务 URL
@@ -177,6 +200,10 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
    format: new MVT(),
    projection: "EPSG:3857",
  });
+  const scadaSource = new VectorSource({
+    url: `${mapUrl}/TJWater/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=TJWater:geo_scada&outputFormat=application/json`,
+    format: new GeoJson(),
+  });
  // WebGL 渲染优化显示
  const junctionLayer = new WebGLVectorTileLayer({
    source: junctionSource as any, // 使用 WebGL 渲染
@@ -223,7 +250,19 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
      ],
    },
  });
-
+  const scadaLayer = new VectorLayer({
+    source: scadaSource,
+    style: scadaStyle,
+    // extent: extent, // 设置图层范围
+    maxZoom: 24,
+    minZoom: 12,
+    properties: {
+      name: "SCADA", // 设置图层名称
+      value: "scada",
+      type: "point",
+      properties: [],
+    },
+  });
  useEffect(() => {
    if (!mapRef.current) return;
    // 缓存 junction、pipe 数据，提供给 deck.gl 显示标签使用
@@ -340,7 +379,6 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
        console.error("Pipe tile load error:", error);
      }
    });
-    // 更新标签可见性状态
    // 监听 junctionLayer 的 visible 变化
    const handleJunctionVisibilityChange = () => {
      const isVisible = junctionLayer.getVisible();
@@ -361,7 +399,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
        projection: "EPSG:3857",
      }),
      // 图层依面、线、点、标注次序添加
-      layers: [pipeLayer, junctionLayer],
+      layers: [pipeLayer, junctionLayer, scadaLayer],
      controls: [],
    });
    setMap(map);
@@ -417,7 +455,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
          d[junctionText] ? (d[junctionText] as number).toFixed(3) : "",
        getSize: 18,
        fontWeight: "bold",
-        getColor: [255, 138, 92],
+        getColor: [0, 0, 0],
        getAngle: 0,
        getTextAnchor: "middle",
        getAlignmentBaseline: "center",
@@ -593,6 +631,8 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
          setCurrentTime,
          selectedDate,
          setSelectedDate,
+          schemeName,
+          setSchemeName,
          currentJunctionCalData,
          setCurrentJunctionCalData,
          currentPipeCalData,