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

更新环境变量

Browse Source
This commit is contained in:
JIANG
2025-11-10 14:45:45 +08:00
parent 82e6706019
commit 929fafe9af
7 changed files with 33 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -81,8 +81,9 @@ class DeckLayer extends Layer {
const MapContext = createContext<OlMap | undefined>(undefined); const MapContext = createContext<OlMap | undefined>(undefined);
const DataContext = createContext<DataContextType | undefined>(undefined); const DataContext = createContext<DataContextType | undefined>(undefined);
const extent = config.mapExtent; const MAP_EXTENT = config.MAP_EXTENT;
const mapUrl = config.mapUrl; const MAP_URL = config.MAP_URL;
const MAP_WORKSPACE = config.MAP_WORKSPACE;
// 添加防抖函数 // 添加防抖函数
function debounce<F extends (...args: any[]) => any>(func: F, waitFor: number) { function debounce<F extends (...args: any[]) => any>(func: F, waitFor: number) {
@@ -176,7 +177,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
} }
}; };
// 配置地图数据源、图层和样式 // 配置地图数据源、图层和样式
const defaultFlatStyle: FlatStyleLike = config.mapDefaultStyle; const defaultFlatStyle: FlatStyleLike = config.MAP_DEFAULT_STYLE;
// 定义 SCADA 图层的样式函数，根据 type 字段选择不同图标 // 定义 SCADA 图层的样式函数，根据 type 字段选择不同图标
const scadaStyle = (feature: any) => { const scadaStyle = (feature: any) => {
const type = feature.get("type"); const type = feature.get("type");
@@ -239,32 +240,32 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
}; };
// 矢量瓦片数据源和图层 // 矢量瓦片数据源和图层
const junctionSource = new VectorTileSource({ const junctionSource = new VectorTileSource({
url: `${mapUrl}/gwc/service/tms/1.0.0/TJWater:geo_junctions_mat@WebMercatorQuad@pbf/{z}/{x}/{-y}.pbf`, // 替换为你的 MVT 瓦片服务 URL url: `${MAP_URL}/gwc/service/tms/1.0.0/${MAP_WORKSPACE}:geo_junctions_mat@WebMercatorQuad@pbf/{z}/{x}/{-y}.pbf`, // 替换为你的 MVT 瓦片服务 URL
format: new MVT(), format: new MVT(),
projection: "EPSG:3857", projection: "EPSG:3857",
}); });
const pipeSource = new VectorTileSource({ const pipeSource = new VectorTileSource({
url: `${mapUrl}/gwc/service/tms/1.0.0/TJWater:geo_pipes_mat@WebMercatorQuad@pbf/{z}/{x}/{-y}.pbf`, // 替换为你的 MVT 瓦片服务 URL url: `${MAP_URL}/gwc/service/tms/1.0.0/${MAP_WORKSPACE}:geo_pipes_mat@WebMercatorQuad@pbf/{z}/{x}/{-y}.pbf`, // 替换为你的 MVT 瓦片服务 URL
format: new MVT(), format: new MVT(),
projection: "EPSG:3857", projection: "EPSG:3857",
}); });
const scadaSource = new VectorSource({ const scadaSource = new VectorSource({
url: `${mapUrl}/TJWater/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=TJWater:geo_scada&outputFormat=application/json`, url: `${MAP_URL}/${MAP_WORKSPACE}/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=${MAP_WORKSPACE}:geo_scada&outputFormat=application/json`,
format: new GeoJson(), format: new GeoJson(),
}); });
const reservoirsSource = new VectorSource({ const reservoirsSource = new VectorSource({
url: `${mapUrl}/TJWater/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=TJWater:geo_reservoirs&outputFormat=application/json`, url: `${MAP_URL}/${MAP_WORKSPACE}/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=${MAP_WORKSPACE}:geo_reservoirs&outputFormat=application/json`,
format: new GeoJson(), format: new GeoJson(),
}); });
const valvesSource = new VectorSource({ const valvesSource = new VectorSource({
url: `${mapUrl}/TJWater/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=TJWater:geo_valves&outputFormat=application/json`, url: `${MAP_URL}/${MAP_WORKSPACE}/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=${MAP_WORKSPACE}:geo_valves&outputFormat=application/json`,
format: new GeoJson(), format: new GeoJson(),
}); });
// WebGL 渲染优化显示 // WebGL 渲染优化显示
const junctionLayer = new WebGLVectorTileLayer({ const junctionLayer = new WebGLVectorTileLayer({
source: junctionSource as any, // 使用 WebGL 渲染 source: junctionSource as any, // 使用 WebGL 渲染
style: defaultFlatStyle, style: defaultFlatStyle,
extent: extent, // 设置图层范围 extent: MAP_EXTENT, // 设置图层范围
maxZoom: 24, maxZoom: 24,
minZoom: 12, minZoom: 12,
properties: { properties: {
@@ -284,7 +285,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
const pipeLayer = new WebGLVectorTileLayer({ const pipeLayer = new WebGLVectorTileLayer({
source: pipeSource as any, // 使用 WebGL 渲染 source: pipeSource as any, // 使用 WebGL 渲染
style: defaultFlatStyle, style: defaultFlatStyle,
extent: extent, // 设置图层范围 extent: MAP_EXTENT, // 设置图层范围
maxZoom: 24, maxZoom: 24,
minZoom: 12, minZoom: 12,
properties: { properties: {
@@ -322,7 +323,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
const reservoirsLayer = new VectorLayer({ const reservoirsLayer = new VectorLayer({
source: reservoirsSource, source: reservoirsSource,
style: reservoirsStyle, style: reservoirsStyle,
extent: extent, // 设置图层范围 extent: MAP_EXTENT, // 设置图层范围
maxZoom: 24, maxZoom: 24,
minZoom: 12, minZoom: 12,
properties: { properties: {
@@ -335,7 +336,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
const valvesLayer = new VectorLayer({ const valvesLayer = new VectorLayer({
source: valvesSource, source: valvesSource,
style: valvesStyle, style: valvesStyle,
extent: extent, // 设置图层范围 extent: MAP_EXTENT, // 设置图层范围
maxZoom: 24, maxZoom: 24,
minZoom: 12, minZoom: 12,
properties: { properties: {
@@ -492,7 +493,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
controls: [], controls: [],
}); });
setMap(map); setMap(map);
map.getView().fit(extent, { map.getView().fit(MAP_EXTENT, {
padding: [50, 50, 50, 50], // 添加一些内边距 padding: [50, 50, 50, 50], // 添加一些内边距
duration: 1000, // 动画持续时间 duration: 1000, // 动画持续时间
}); });

2
src/components/olmap/MonitoringPlaceOptimization/SchemeQuery.tsx
View File

@@ -148,7 +148,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
setLoading(true); setLoading(true);
try { try {
const response = await axios.get( const response = await axios.get(
`${config.backendUrl}/getallsensorplacements/?network=${network}` `${config.BACKEND_URL}/getallsensorplacements/?network=${network}`
); );
let filteredResults = response.data; let filteredResults = response.data;

17
src/components/olmap/SCADADataPanel.tsx
View File

@@ -92,12 +92,11 @@ const fetchFromBackend = async (
const starttime = dayjs(range.from).format("YYYY-MM-DD HH:mm:ss"); const starttime = dayjs(range.from).format("YYYY-MM-DD HH:mm:ss");
const endtime = dayjs(range.to).format("YYYY-MM-DD HH:mm:ss"); const endtime = dayjs(range.to).format("YYYY-MM-DD HH:mm:ss");
// 清洗数据接口 // 清洗数据接口
const cleaningSCADAUrl = `${config.backendUrl}/querycleaningscadadatabydeviceidandtimerange/?ids=${ids}&starttime=${starttime}&endtime=${endtime}`; const cleaningSCADAUrl = `${config.BACKEND_URL}/querycleaningscadadatabydeviceidandtimerange/?ids=${ids}&starttime=${starttime}&endtime=${endtime}`;
// 原始数据 // 原始数据
const rawSCADAUrl = `${config.backendUrl}/queryscadadatabydeviceidandtimerange/?ids=${ids}&starttime=${starttime}&endtime=${endtime}`; const rawSCADAUrl = `${config.BACKEND_URL}/queryscadadatabydeviceidandtimerange/?ids=${ids}&starttime=${starttime}&endtime=${endtime}`;
// 模拟数据接口 // 模拟数据接口
const simulationSCADAUrl = `${config.backendUrl}/querysimulationscadadatabydeviceidandtimerange/?ids=${ids}&starttime=${starttime}&endtime=${endtime}`; const simulationSCADAUrl = `${config.BACKEND_URL}/querysimulationscadadatabydeviceidandtimerange/?ids=${ids}&starttime=${starttime}&endtime=${endtime}`;
try { try {
let response; let response;
response = await fetch(cleaningSCADAUrl); response = await fetch(cleaningSCADAUrl);
@@ -274,9 +273,9 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
const starttime = dayjs(range.from).format("YYYY-MM-DD HH:mm:ss"); const starttime = dayjs(range.from).format("YYYY-MM-DD HH:mm:ss");
const endtime = dayjs(range.to).format("YYYY-MM-DD HH:mm:ss"); const endtime = dayjs(range.to).format("YYYY-MM-DD HH:mm:ss");
const cleaningUrl = `${config.backendUrl}/querycleaningscadadatabydeviceidandtimerange/?ids=${ids}&starttime=${starttime}&endtime=${endtime}`; const cleaningUrl = `${config.BACKEND_URL}/querycleaningscadadatabydeviceidandtimerange/?ids=${ids}&starttime=${starttime}&endtime=${endtime}`;
const rawUrl = `${config.backendUrl}/queryscadadatabydeviceidandtimerange/?ids=${ids}&starttime=${starttime}&endtime=${endtime}`; const rawUrl = `${config.BACKEND_URL}/queryscadadatabydeviceidandtimerange/?ids=${ids}&starttime=${starttime}&endtime=${endtime}`;
const simUrl = `${config.backendUrl}/querysimulationscadadatabydeviceidandtimerange/?ids=${ids}&starttime=${starttime}&endtime=${endtime}`; const simUrl = `${config.BACKEND_URL}/querysimulationscadadatabydeviceidandtimerange/?ids=${ids}&starttime=${starttime}&endtime=${endtime}`;
try { try {
const [cleanRes, rawRes, simRes] = await Promise.all([ const [cleanRes, rawRes, simRes] = await Promise.all([
@@ -357,7 +356,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
useEffect(() => { useEffect(() => {
const fetchDeviceLabels = async () => { const fetchDeviceLabels = async () => {
try { try {
const url = `${config.mapUrl}/TJWater/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=TJWater:geo_scada&outputFormat=application/json`; 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 response = await fetch(url); const response = await fetch(url);
if (!response.ok) return; if (!response.ok) return;
@@ -466,7 +465,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
// 调用后端清洗接口 // 调用后端清洗接口
const response = await axios.post( const response = await axios.post(
`${config.backendUrl}/scadadevicedatacleaning/`, `${config.BACKEND_URL}/scadadevicedatacleaning/`,
null, null,
{ {
params: { params: {

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

@@ -183,7 +183,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
const fetchScadaDevices = async () => { const fetchScadaDevices = async () => {
setLoading(true); setLoading(true);
try { try {
const url = `${config.mapUrl}/TJWater/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=TJWater:geo_scada&outputFormat=application/json`; 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 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();
@@ -607,7 +607,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
// 调用后端清洗接口 // 调用后端清洗接口
const response = await axios.post( const response = await axios.post(
`${config.backendUrl}/scadadevicedatacleaning/`, `${config.BACKEND_URL}/scadadevicedatacleaning/`,
null, null,
{ {
params: { params: {

4
src/components/olmap/ZonePropsPanel.tsx
View File

@@ -20,8 +20,6 @@ interface ZonePropsPanelProps {
onClose?: () => void; onClose?: () => void;
} }
const mapUrl = config.mapUrl;
const ZonePropsPanel: React.FC<ZonePropsPanelProps> = ({ const ZonePropsPanel: React.FC<ZonePropsPanelProps> = ({
title = "分区属性信息", title = "分区属性信息",
isVisible = true, isVisible = true,
@@ -107,7 +105,7 @@ const ZonePropsPanel: React.FC<ZonePropsPanelProps> = ({
} }
const networkZoneLayer = new VectorLayer({ const networkZoneLayer = new VectorLayer({
source: new VectorSource({ source: new VectorSource({
url: `${mapUrl}/TJWater/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=TJWater:network_zone&outputFormat=application/json`, 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`,
format: new GeoJson(), format: new GeoJson(),
}), }),
style: new Style({ style: new Style({

9
src/config/config.ts
View File

@@ -1,10 +1,11 @@
export const config = { export const config = {
backendUrl: process.env.BACKEND_URL || "http://192.168.1.42:8000", BACKEND_URL: process.env.BACKEND_URL || "http://192.168.1.42:8000",
mapUrl: process.env.MAP_URL || "http://127.0.0.1:8080/geoserver", MAP_URL: process.env.MAP_URL || "http://127.0.0.1:8080/geoserver",
mapExtent: process.env.MAP_EXTENT MAP_WORKSPACE: process.env.MAP_WORKSPACE || "TJWater",
MAP_EXTENT: process.env.MAP_EXTENT
? process.env.MAP_EXTENT.split(",").map(Number) ? process.env.MAP_EXTENT.split(",").map(Number)
: [13508849, 3608035.75, 13555781, 3633812.75], : [13508849, 3608035.75, 13555781, 3633812.75],
mapDefaultStyle: { 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)",
"circle-fill-color": "rgba(255,138, 92,0.8)", "circle-fill-color": "rgba(255,138, 92,0.8)",

4
src/utils/mapQueryService.ts
View File

@@ -43,8 +43,8 @@ interface MapClickEvent {
* GeoServer 服务配置 * GeoServer 服务配置
*/ */
const GEOSERVER_CONFIG = { const GEOSERVER_CONFIG = {
url: config.mapUrl, url: config.MAP_URL,
workspace: "TJWater", workspace: config.MAP_WORKSPACE,
layers: ["geo_pipes_mat", "geo_junctions_mat"], layers: ["geo_pipes_mat", "geo_junctions_mat"],
wfsVersion: "1.0.0", wfsVersion: "1.0.0",
outputFormat: "application/json", outputFormat: "application/json",