diff --git a/src/app/(main)/layout.tsx b/src/app/(main)/layout.tsx index 0cf2e14..08719db 100644 --- 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,22 +32,20 @@ export default async function MainLayout({ } return ( - - - }> - {children} - - - + + }> + {children} + + ); } diff --git a/src/app/OlMap/MapComponent.tsx b/src/app/OlMap/MapComponent.tsx index 86970ad..7aebaf7 100644 --- 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, @@ -97,7 +98,10 @@ export const useData = () => { const MapComponent: React.FC = ({ children }) => { const MAP_EXTENT = config.MAP_EXTENT as [number, number, number, number]; const MAP_URL = config.MAP_URL; - const MAP_WORKSPACE = config.MAP_WORKSPACE; + + // Subscribe to project context for workspace changes + const project = useProject(); + const MAP_WORKSPACE = project?.workspace || config.MAP_WORKSPACE; const MAP_VIEW_STORAGE_KEY = `${MAP_WORKSPACE}_map_view`; // 持久化 key const mapRef = useRef(null); @@ -763,7 +767,7 @@ const MapComponent: React.FC = ({ children }) => { map.dispose(); deck.finalize(); }; - }, []); + }, [MAP_WORKSPACE, MAP_EXTENT]); // 当数据变化时，更新 deck.gl 图层 useEffect(() => { diff --git a/src/components/olmap/NetworkPartitionOptimization/ZonePropsPanel.tsx b/src/components/olmap/NetworkPartitionOptimization/ZonePropsPanel.tsx index 935dd88..6052313 100644 --- 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 = ({ onClose, }) => { const map = useMap(); + const project = useProject(); + const workspace = project?.workspace; const [props, setProps] = React.useState< PropertyItem[] | Record @@ -103,9 +106,10 @@ const ZonePropsPanel: React.FC = ({ 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 = ({ map.removeLayer(highlightLayer); map.un("click", clickListener); }; - }, [map, handleMapClickSelectFeatures]); + }, [map, handleMapClickSelectFeatures, workspace]); // 获取中文标签 const getChineseLabel = (key: string): string => { const labelMap: Record = { diff --git a/src/components/olmap/SCADADeviceList.tsx b/src/components/olmap/SCADADeviceList.tsx index 0134a3e..5cf9dfa 100644 --- 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 = ({ } }, [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 = ({ } }; fetchScadaDevices(); - }, []); + }, [workspace]); const effectiveDevices = devices.length > 0 ? devices : internalDevices; diff --git a/src/components/project/ProjectSelector.tsx b/src/components/project/ProjectSelector.tsx index 03c951f..9e09cf7 100644 --- 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 = ({ @@ -36,10 +51,13 @@ export const ProjectSelector: React.FC = ({ }) => { const [workspace, setWorkspace] = useState(PROJECTS[0].workspace); const [networkName, setNetworkName] = useState(PROJECTS[0].networkName); + const [extent, setExtent] = useState( + 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 = ({ 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 = ({ )} - + </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); } } }} @@ -155,7 +183,7 @@ export const ProjectSelector: React.FC<ProjectSelectorProps> = ({ sx={{ textTransform: "none", borderRadius: 2, - fontWeight: "bold" + fontWeight: "bold", }} > 进入系统 diff --git a/src/config/config.ts b/src/config/config.ts index 71b03f3..3aae064 100644 --- 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"; diff --git a/src/contexts/ProjectContext.tsx b/src/contexts/ProjectContext.tsx index 19f4e06..add492f 100644 --- a/src/contexts/ProjectContext.tsx +++ b/src/contexts/ProjectContext.tsx @@ -1,7 +1,7 @@ "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 { @@ -25,23 +25,43 @@ export const ProjectProvider: React.FC<{ children: React.ReactNode }> = ({ // 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) : undefined, + ); } }, []); - const applyConfig = (ws: string, net: string) => { + const applyConfig = async (ws: string, net: string, extent?: number[]) => { setMapWorkspace(ws); setNetworkName(net); + if (extent) { + setMapExtent(extent); + localStorage.setItem("NEXT_PUBLIC_MAP_EXTENT", extent.join(",")); + // Reset extent cache + localStorage.removeItem(`${ws}_map_view`); + } + setCurrentProject({ workspace: ws, networkName: net }); - + // 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 +69,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)} /> ); }