OrgTJWater/TJWaterServer
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整环境变量参数，支持项目切换

Browse Source
This commit is contained in:
JIANG
2026-02-11 12:07:29 +08:00
parent 03e5f1456c
commit 8b6198a2ac
7 changed files with 106 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/app/(main)/layout.tsx
View File

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

8
src/app/OlMap/MapComponent.tsx
View File

@@ -1,5 +1,6 @@
"use client"; "use client";
import { config } from "@/config/config"; import { config } from "@/config/config";
import { useProject } from "@/contexts/ProjectContext";
import React, { import React, {
createContext, createContext,
useContext, useContext,
@@ -97,7 +98,10 @@ export const useData = () => {
const MapComponent: React.FC<MapComponentProps> = ({ children }) => { const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
const MAP_EXTENT = config.MAP_EXTENT as [number, number, number, number]; const MAP_EXTENT = config.MAP_EXTENT as [number, number, number, number];
const MAP_URL = config.MAP_URL; 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 MAP_VIEW_STORAGE_KEY = `${MAP_WORKSPACE}_map_view`; // 持久化 key
const mapRef = useRef<HTMLDivElement | null>(null); const mapRef = useRef<HTMLDivElement | null>(null);
@@ -763,7 +767,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
map.dispose(); map.dispose();
deck.finalize(); deck.finalize();
}; };
}, []); }, [MAP_WORKSPACE, MAP_EXTENT]);
// 当数据变化时，更新 deck.gl 图层 // 当数据变化时，更新 deck.gl 图层
useEffect(() => { useEffect(() => {

8
src/components/olmap/NetworkPartitionOptimization/ZonePropsPanel.tsx
View File

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

12
src/components/olmap/SCADADeviceList.tsx
View File

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

48
src/components/project/ProjectSelector.tsx
View File

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

11
src/config/config.ts
View File

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

32
src/contexts/ProjectContext.tsx
View File

@@ -1,7 +1,7 @@
"use client"; "use client";
import React, { createContext, useContext, useEffect, useState } from "react"; import React, { createContext, useContext, useEffect, useState } from "react";
import { useSession } from "next-auth/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"; import { ProjectSelector } from "@/components/project/ProjectSelector";
interface ProjectContextType { interface ProjectContextType {
@@ -25,23 +25,43 @@ export const ProjectProvider: React.FC<{ children: React.ReactNode }> = ({
// Check localStorage // Check localStorage
const savedWorkspace = localStorage.getItem("NEXT_PUBLIC_MAP_WORKSPACE"); const savedWorkspace = localStorage.getItem("NEXT_PUBLIC_MAP_WORKSPACE");
const savedNetwork = localStorage.getItem("NEXT_PUBLIC_NETWORK_NAME"); const savedNetwork = localStorage.getItem("NEXT_PUBLIC_NETWORK_NAME");
const savedExtent = localStorage.getItem("NEXT_PUBLIC_MAP_EXTENT");
// If we have saved config, use it. // If we have saved config, use it.
if (savedWorkspace && savedNetwork) { 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); setMapWorkspace(ws);
setNetworkName(net); 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 }); setCurrentProject({ workspace: ws, networkName: net });
// Save to localStorage // Save to localStorage
localStorage.setItem("NEXT_PUBLIC_MAP_WORKSPACE", ws); localStorage.setItem("NEXT_PUBLIC_MAP_WORKSPACE", ws);
localStorage.setItem("NEXT_PUBLIC_NETWORK_NAME", net); localStorage.setItem("NEXT_PUBLIC_NETWORK_NAME", net);
setIsConfigured(true); 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 // Only show selector if authenticated and not configured
@@ -49,7 +69,7 @@ export const ProjectProvider: React.FC<{ children: React.ReactNode }> = ({
return ( return (
<ProjectSelector <ProjectSelector
open={true} open={true}
onSelect={(ws, net) => applyConfig(ws, net)} onSelect={(ws, net, extent) => applyConfig(ws, net, extent)}
/> />
); );
} }