修复MAP_EXTENT状态更新的BUG

src/app/(main)/layout.tsx

@@ -1,7 +1,6 @@
 import type { Metadata } from "next";
 import { cookies } from "next/headers";
 import React, { Suspense } from "react";
-import { RefineContext } from "../_refine_context";
 
 import authOptions from "@app/api/auth/[...nextauth]/options";
 import { Header } from "@components/header";
@@ -33,22 +32,20 @@ export default async function MainLayout({
   }
 
   return (
-    <RefineContext defaultMode={defaultMode}>
-      <ThemedLayout
-        Header={Header}
-        Title={Title}
-        childrenBoxProps={{
-          sx: { height: "100vh", p: 0 },
-        }}
-        containerBoxProps={{
-          sx: { height: "100%" },
-        }}
-      >
-        <Suspense fallback={<MapSkeleton />}>
-          {children}
-        </Suspense>
-      </ThemedLayout>
-    </RefineContext>
+    <ThemedLayout
+      Header={Header}
+      Title={Title}
+      childrenBoxProps={{
+        sx: { height: "100vh", p: 0 },
+      }}
+      containerBoxProps={{
+        sx: { height: "100%" },
+      }}
+    >
+      <Suspense fallback={<MapSkeleton />}>
+        {children}
+      </Suspense>
+    </ThemedLayout>
   );
 }
 

src/app/OlMap/Controls/BaseLayers.tsx

@@ -179,7 +179,7 @@ const BaseLayers: React.FC = () => {
   };
 
   return (
-    <div className="absolute right-17 bottom-8 z-1300">
+    <div className="absolute right-17 bottom-11 z-1300">
       <div
         className="w-20 h-20 bg-white rounded-xl drop-shadow-xl shadow-black"
         onMouseEnter={handleEnter}

src/app/OlMap/Controls/ScaleLine.tsx

@@ -1,10 +1,12 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { useMap } from "../MapComponent";
+import { ScaleLine } from "ol/control";
 
 const Scale: React.FC = () => {
   const map = useMap();
   const [zoomLevel, setZoomLevel] = useState(0);
   const [coordinates, setCoordinates] = useState<[number, number]>([0, 0]);
+  const scaleLineRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (!map) return;
@@ -28,19 +30,58 @@ const Scale: React.FC = () => {
     // Initialize values
     updateZoomLevel();
 
+    // ScaleLine control
+    const scaleControl = new ScaleLine({
+      target: scaleLineRef.current || undefined,
+      units: "metric",
+      bar: false,
+      steps: 4,
+      text: true,
+      minWidth: 64,
+    });
+    map.addControl(scaleControl);
+
     return () => {
       map.un("moveend", updateZoomLevel);
       map.un("pointermove", updateCoordinates);
+      map.removeControl(scaleControl);
     };
   }, [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 z-1300">
-      <div className="px-1">缩放: {zoomLevel.toFixed(1)}</div>
-      <div className="px-1">
-        坐标: {coordinates[0]}, {coordinates[1]}
+    <>
+      <style>
+        {`
+          .custom-scale-line .ol-scale-line {
+            position: static;
+            background: transparent;
+            padding: 0;
+          }
+          .custom-scale-line .ol-scale-line-inner {
+            border: 1px solid #475569;
+            border-top: none;
+            color: #334155;
+            font-size: 0.75rem;
+            font-weight: 600;
+            transition: all 0.3s;
+          }
+        `}
+      </style>
+      <div className="absolute bottom-0 right-0 flex items-center gap-2 px-3 py-1.5 bg-white/90 hover:bg-white rounded-tl-xl shadow-lg backdrop-blur-sm text-xs font-medium text-slate-700 z-1300 transition-all duration-300 pointer-events-auto">
+        <div
+          ref={scaleLineRef}
+          className="custom-scale-line flex items-center justify-center min-w-[60px]"
+        />
+        <div className="h-3 w-px bg-slate-300 mx-1" />
+        <div className="min-w-[60px] text-center">
+          缩放: {zoomLevel.toFixed(1)}
+        </div>
+        <div className="h-3 w-px bg-slate-300 mx-1" />
+        <div className="tabular-nums min-w-[140px] text-center">
+          坐标: {coordinates[0]}, {coordinates[1]}
+        </div>
       </div>
-    </div>
+    </>
   );
 };
 

src/app/OlMap/Controls/Zoom.tsx

@@ -30,7 +30,7 @@ const Zoom: React.FC = () => {
   };
 
   return (
-    <div className="absolute right-4 bottom-8 z-1300">
+    <div className="absolute right-4 bottom-11 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

src/app/OlMap/MapComponent.tsx

@@ -1,5 +1,6 @@
 "use client";
 import { config } from "@/config/config";
+import { useProject } from "@/contexts/ProjectContext";
 import React, {
   createContext,
   useContext,
@@ -95,9 +96,15 @@ export const useData = () => {
 };
 
 const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
-  const MAP_EXTENT = config.MAP_EXTENT as [number, number, number, number];
+  const project = useProject();
+  const MAP_WORKSPACE = project?.workspace || config.MAP_WORKSPACE;
+  const MAP_EXTENT = (project?.extent || config.MAP_EXTENT) as [
+    number,
+    number,
+    number,
+    number,
+  ];
   const MAP_URL = config.MAP_URL;
-  const MAP_WORKSPACE = config.MAP_WORKSPACE;
   const MAP_VIEW_STORAGE_KEY = `${MAP_WORKSPACE}_map_view`; // 持久化 key
 
   const mapRef = useRef<HTMLDivElement | null>(null);
@@ -460,7 +467,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
   const scadaLayer = new VectorLayer({
     source: scadaSource,
     style: scadaStyle,
-    // extent: extent, // 设置图层范围
+    extent: MAP_EXTENT, // 设置图层范围
     maxZoom: 24,
     minZoom: 11,
     properties: {
@@ -763,7 +770,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
       map.dispose();
       deck.finalize();
     };
-  }, []);
+  }, [MAP_WORKSPACE, MAP_EXTENT]);
 
   // 当数据变化时，更新 deck.gl 图层
   useEffect(() => {

src/components/header/index.tsx

@@ -21,7 +21,7 @@ import { useGetIdentity, useLogout } from "@refinedev/core";
 import { HamburgerMenu, RefineThemedLayoutHeaderProps } from "@refinedev/mui";
 import React, { useContext, useState } from "react";
 import { ProjectSelector } from "@components/project/ProjectSelector";
-import { setMapWorkspace, setNetworkName } from "@config/config";
+import { setMapExtent, setMapWorkspace, setNetworkName } from "@config/config";
 
 type IUser = {
   id: number;
@@ -53,11 +53,18 @@ export const Header: React.FC<RefineThemedLayoutHeaderProps> = ({
     setShowProjectSelector(true);
   };
 
-  const handleProjectSelect = (workspace: string, networkName: string) => {
+  const handleProjectSelect = (
+    workspace: string,
+    networkName: string,
+    extent: number[],
+  ) => {
     setMapWorkspace(workspace);
     setNetworkName(networkName);
+    setMapExtent(extent);
     localStorage.setItem("NEXT_PUBLIC_MAP_WORKSPACE", workspace);
     localStorage.setItem("NEXT_PUBLIC_NETWORK_NAME", networkName);
+    localStorage.setItem("NEXT_PUBLIC_MAP_EXTENT", extent.join(","));
+    localStorage.removeItem(`${workspace}_map_view`);
     setShowProjectSelector(false);
     window.location.reload();
   };

src/components/olmap/NetworkPartitionOptimization/ZonePropsPanel.tsx

@@ -7,6 +7,7 @@ import { Stroke } from "ol/style";
 import GeoJson from "ol/format/GeoJSON";
 import config from "@config/config";
 import { useMap } from "@app/OlMap/MapComponent";
+import { useProject } from "@/contexts/ProjectContext";
 
 interface PropertyItem {
   key: string;
@@ -26,6 +27,8 @@ const ZonePropsPanel: React.FC<ZonePropsPanelProps> = ({
   onClose,
 }) => {
   const map = useMap();
+  const project = useProject();
+  const workspace = project?.workspace;
 
   const [props, setProps] = React.useState<
     PropertyItem[] | Record<string, any>
@@ -103,9 +106,10 @@ const ZonePropsPanel: React.FC<ZonePropsPanelProps> = ({
     if (!map) {
       return;
     }
+    const workspaceValue = workspace || config.MAP_WORKSPACE;
     const networkZoneLayer = new VectorLayer({
       source: new VectorSource({
-        url: `${config.MAP_URL}/${config.MAP_WORKSPACE}/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=${config.MAP_WORKSPACE}:network_zone&outputFormat=application/json`,
+        url: `${config.MAP_URL}/${workspaceValue}/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=${workspaceValue}:network_zone&outputFormat=application/json`,
         format: new GeoJson(),
       }),
       style: new Style({
@@ -155,7 +159,7 @@ const ZonePropsPanel: React.FC<ZonePropsPanelProps> = ({
       map.removeLayer(highlightLayer);
       map.un("click", clickListener);
     };
-  }, [map, handleMapClickSelectFeatures]);
+  }, [map, handleMapClickSelectFeatures, workspace]);
   // 获取中文标签
   const getChineseLabel = (key: string): string => {
     const labelMap: Record<string, string> = {

src/components/olmap/SCADADeviceList.tsx

@@ -50,9 +50,10 @@ import { FixedSizeList } from "react-window";
 import { useNotification } from "@refinedev/core";
 import axios from "axios";
 import { useGetIdentity } from "@refinedev/core";
-import config, { NETWORK_NAME } from "@/config/config";
+import config from "@/config/config";
 
 import { useMap } from "@app/OlMap/MapComponent";
+import { useProject } from "@/contexts/ProjectContext";
 import { GeoJSON } from "ol/format";
 import { handleMapClickSelectFeatures as mapClickSelectFeatures } from "@/utils/mapQueryService";
 import VectorLayer from "ol/layer/Vector";
@@ -180,12 +181,17 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
     }
   }, [pendingSelection, onSelectionChange]);
 
+  // Get workspace from context
+  const project = useProject();
+  const workspace = project?.workspace;
+
   // 初始化 SCADA 设备列表
   useEffect(() => {
     const fetchScadaDevices = async () => {
       setLoading(true);
       try {
-        const url = `${config.MAP_URL}/${config.MAP_WORKSPACE}/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=${config.MAP_WORKSPACE}:geo_scada&outputFormat=application/json`;
+        const activeWorkspace = workspace || config.MAP_WORKSPACE;
+        const url = `${config.MAP_URL}/${activeWorkspace}/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=${activeWorkspace}:geo_scada&outputFormat=application/json`;
         const response = await fetch(url);
         if (!response.ok) throw new Error("Failed to fetch SCADA devices");
         const json = await response.json();
@@ -211,7 +217,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
       }
     };
     fetchScadaDevices();
-  }, []);
+  }, [workspace]);
 
   const effectiveDevices = devices.length > 0 ? devices : internalDevices;
 

src/components/project/ProjectSelector.tsx

@@ -19,14 +19,29 @@ import { useState } from "react";
 
 interface ProjectSelectorProps {
   open: boolean;
-  onSelect: (workspace: string, networkName: string) => void;
+  onSelect: (workspace: string, networkName: string, extent: number[]) => void;
   onClose?: () => void;
 }
 
 const PROJECTS = [
-  { label: "TJWater (默认)", workspace: "TJWater", networkName: "tjwater" },
-  { label: "苏州河", workspace: "szh", networkName: "szh" },
-  { label: "测试项目", workspace: "test", networkName: "test" },
+  {
+    label: "默认",
+    workspace: "tjwater",
+    networkName: "tjwater",
+    extent: [13508802, 3608164, 13555651, 3633686],
+  },
+  {
+    label: "苏州河",
+    workspace: "szh",
+    networkName: "szh",
+    extent: [13490131, 3630016, 13525879, 3666969],
+  },
+  {
+    label: "测试项目",
+    workspace: "test",
+    networkName: "test",
+    extent: [13508849, 3608036, 13555781, 3633813],
+  },
 ];
 
 export const ProjectSelector: React.FC<ProjectSelectorProps> = ({
@@ -36,10 +51,13 @@ export const ProjectSelector: React.FC<ProjectSelectorProps> = ({
 }) => {
   const [workspace, setWorkspace] = useState(PROJECTS[0].workspace);
   const [networkName, setNetworkName] = useState(PROJECTS[0].networkName);
+  const [extent, setExtent] = useState<number[]>(
+    PROJECTS[0].extent,
+  );
   const [customMode, setCustomMode] = useState(false);
 
   const handleConfirm = () => {
-    onSelect(workspace, networkName);
+    onSelect(workspace, networkName, extent);
   };
 
   return (
@@ -56,8 +74,8 @@ export const ProjectSelector: React.FC<ProjectSelectorProps> = ({
             background: "rgba(255, 255, 255, 0.95)",
             backdropFilter: "blur(10px)",
             position: "relative",
-          }
-        }
+          },
+        },
       }}
       slots={{ transition: Fade }}
       transitionDuration={500}
@@ -76,7 +94,14 @@ export const ProjectSelector: React.FC<ProjectSelectorProps> = ({
           <CloseIcon />
         </IconButton>
       )}
-      <Box sx={{ display: "flex", flexDirection: "column", alignItems: "center", mb: 2 }}>
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          mb: 2,
+        }}
+      >
         <Box sx={{ transform: "scale(1.5)", mb: 2, mt: 1 }}>
           <Title />
         </Box>
@@ -85,7 +110,9 @@ export const ProjectSelector: React.FC<ProjectSelectorProps> = ({
         </Typography>
       </Box>
 
-      <DialogContent sx={{ display: "flex", flexDirection: "column", gap: 3, pt: 1 }}>
+      <DialogContent
+        sx={{ display: "flex", flexDirection: "column", gap: 3, pt: 1 }}
+      >
         {!customMode ? (
           <FormControl fullWidth variant="outlined">
             <InputLabel>项目</InputLabel>
@@ -101,6 +128,7 @@ export const ProjectSelector: React.FC<ProjectSelectorProps> = ({
                   if (p) {
                     setWorkspace(p.workspace);
                     setNetworkName(p.networkName);
+                    setExtent(p.extent);
                   }
                 }
               }}
@@ -127,7 +155,7 @@ export const ProjectSelector: React.FC<ProjectSelectorProps> = ({
               value={workspace}
               onChange={(e) => setWorkspace(e.target.value)}
               fullWidth
-              helperText="例如: TJWater"
+              helperText="例如: tjwater"
             />
             <TextField
               label="管网名称"
@@ -155,7 +183,7 @@ export const ProjectSelector: React.FC<ProjectSelectorProps> = ({
           sx={{
             textTransform: "none",
             borderRadius: 2,
-            fontWeight: "bold"
+            fontWeight: "bold",
           }}
         >
           进入系统

src/config/config.ts

@@ -1,11 +1,10 @@
 export const config = {
-  BACKEND_URL:
-    process.env.NEXT_PUBLIC_BACKEND_URL || "http://127.0.0.1:8000",
+  BACKEND_URL: process.env.NEXT_PUBLIC_BACKEND_URL || "http://127.0.0.1:8000",
   MAP_URL: process.env.NEXT_PUBLIC_MAP_URL || "http://127.0.0.1:8080/geoserver",
-  MAP_WORKSPACE: process.env.NEXT_PUBLIC_MAP_WORKSPACE || "TJWater",
+  MAP_WORKSPACE: process.env.NEXT_PUBLIC_MAP_WORKSPACE || "tjwater",
   MAP_EXTENT: process.env.NEXT_PUBLIC_MAP_EXTENT
     ? process.env.NEXT_PUBLIC_MAP_EXTENT.split(",").map(Number)
-    : [13508849, 3608035.75, 13555781, 3633812.75],
+    : [13508849, 3608036, 13555781, 3633813],
   MAP_DEFAULT_STYLE: {
     "stroke-width": 3,
     "stroke-color": "rgba(51, 153, 204, 0.9)",
@@ -37,6 +36,10 @@ export const setMapWorkspace = (workspace: string) => {
   config.MAP_WORKSPACE = workspace;
 };
 
+export const setMapExtent = (extent: number[]) => {
+  config.MAP_EXTENT = extent;
+};
+
 export const MAPBOX_TOKEN =
   process.env.NEXT_PUBLIC_MAPBOX_TOKEN ||
   "pk.eyJ1IjoiemhpZnUiLCJhIjoiY205azNyNGY1MGkyZDJxcTJleDUwaHV1ZCJ9.wOmSdOnDDdre-mB1Lpy6Fg";

src/contexts/ProjectContext.tsx

@@ -1,12 +1,13 @@
 "use client";
 import React, { createContext, useContext, useEffect, useState } from "react";
 import { useSession } from "next-auth/react";
-import { config, NETWORK_NAME, setMapWorkspace, setNetworkName } from "@/config/config";
+import { config, NETWORK_NAME, setMapWorkspace, setNetworkName, setMapExtent } from "@/config/config";
 import { ProjectSelector } from "@/components/project/ProjectSelector";
 
 interface ProjectContextType {
   workspace: string;
   networkName: string;
+  extent: number[];
 }
 
 const ProjectContext = createContext<ProjectContextType | undefined>(undefined);
@@ -19,29 +20,47 @@ export const ProjectProvider: React.FC<{ children: React.ReactNode }> = ({
   const [currentProject, setCurrentProject] = useState({
     workspace: config.MAP_WORKSPACE,
     networkName: NETWORK_NAME || "tjwater",
+    extent: config.MAP_EXTENT,
   });
 
   useEffect(() => {
     // Check localStorage
     const savedWorkspace = localStorage.getItem("NEXT_PUBLIC_MAP_WORKSPACE");
     const savedNetwork = localStorage.getItem("NEXT_PUBLIC_NETWORK_NAME");
+    const savedExtent = localStorage.getItem("NEXT_PUBLIC_MAP_EXTENT");
 
     // If we have saved config, use it.
     if (savedWorkspace && savedNetwork) {
-      applyConfig(savedWorkspace, savedNetwork);
+      applyConfig(
+        savedWorkspace,
+        savedNetwork,
+        savedExtent ? savedExtent.split(",").map(Number) : config.MAP_EXTENT,
+      );
     }
   }, []);
 
-  const applyConfig = (ws: string, net: string) => {
+  const applyConfig = async (ws: string, net: string, extent: number[]) => {
     setMapWorkspace(ws);
     setNetworkName(net);
-    setCurrentProject({ workspace: ws, networkName: net });
-    
+    setMapExtent(extent);
+    localStorage.setItem("NEXT_PUBLIC_MAP_EXTENT", extent.join(","));
+    // Reset extent cache
+    localStorage.removeItem(`${ws}_map_view`);
+    setCurrentProject({ workspace: ws, networkName: net, extent: extent });
+
     // Save to localStorage
     localStorage.setItem("NEXT_PUBLIC_MAP_WORKSPACE", ws);
     localStorage.setItem("NEXT_PUBLIC_NETWORK_NAME", net);
-    
+
     setIsConfigured(true);
+
+    try {
+      await fetch(`${config.BACKEND_URL}/openproject/?network=${net}`, {
+        method: "POST",
+      });
+    } catch (error) {
+      console.error("Failed to open project:", error);
+    }
   };
 
   // Only show selector if authenticated and not configured
@@ -49,7 +68,7 @@ export const ProjectProvider: React.FC<{ children: React.ReactNode }> = ({
     return (
       <ProjectSelector
         open={true}
-        onSelect={(ws, net) => applyConfig(ws, net)}
+        onSelect={(ws, net, extent) => applyConfig(ws, net, extent)}
       />
     );
   }