修复MAP_EXTENT状态更新的BUG

提升extent变量状态；修改部分默认值
调整环境变量参数，支持项目切换
2026-02-11 14:17:16 +08:00 · 2026-02-11 13:53:56 +08:00 · 2026-02-11 12:07:29 +08:00 · 2026-02-11 11:52:06 +08:00
11 changed files with 170 additions and 58 deletions
--- a/src/app/(main)/layout.tsx
+++ b/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,7 +32,6 @@ export default async function MainLayout({
  }

  return (
-    <RefineContext defaultMode={defaultMode}>
    <ThemedLayout
      Header={Header}
      Title={Title}
@@ -48,7 +46,6 @@ export default async function MainLayout({
        {children}
      </Suspense>
    </ThemedLayout>
-    </RefineContext>
  );
 }

--- 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-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}
--- a/src/app/OlMap/Controls/ScaleLine.tsx
+++ b/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">
+    <>
+      <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>
+    </>
  );
 };

--- 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-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
--- a/src/app/OlMap/MapComponent.tsx
+++ b/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(() => {
--- a/src/components/header/index.tsx
+++ b/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();
  };
--- a/src/components/olmap/NetworkPartitionOptimization/ZonePropsPanel.tsx
+++ b/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> = {
--- a/src/components/olmap/SCADADeviceList.tsx
+++ b/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;

--- a/src/components/project/ProjectSelector.tsx
+++ b/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",
          }}
        >
          进入系统
--- a/src/config/config.ts
+++ b/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";
--- a/src/contexts/ProjectContext.tsx
+++ b/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)}
      />
    );
  }
Author	SHA1	Message	Date
JIANG	a2e6c1f416	修复MAP_EXTENT状态更新的BUG	2026-02-11 14:17:16 +08:00
JIANG	2911b87fac	提升extent变量状态；修改部分默认值	2026-02-11 13:53:56 +08:00
JIANG	8b6198a2ac	调整环境变量参数，支持项目切换	2026-02-11 12:07:29 +08:00
JIANG	03e5f1456c	完善比例尺控件，调整控件位置	2026-02-11 11:52:06 +08:00