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 { 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>
);
}

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

@@ -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<MapComponentProps> = ({ 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<HTMLDivElement | null>(null);
@@ -763,7 +767,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
map.dispose();
deck.finalize();
};
}, []);
}, [MAP_WORKSPACE, MAP_EXTENT]);
// 当数据变化时，更新 deck.gl 图层
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 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> = {

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

@@ -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;

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

@@ -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[] | undefined>(
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);
}
}
}}
@@ -155,7 +183,7 @@ export const ProjectSelector: React.FC<ProjectSelectorProps> = ({
sx={{
textTransform: "none",
borderRadius: 2,
fontWeight: "bold"
fontWeight: "bold",
}}
>
进入系统

11
src/config/config.ts
View File

@@ -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";

32
src/contexts/ProjectContext.tsx
View File

@@ -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)}
/>
);
}