OrgTJWater/TJWaterFrontend_Refine
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 DataContext = createContext<DataContextType | undefined>(undefined);
const extent = config.mapExtent;
const mapUrl = config.mapUrl;
const MAP_EXTENT = config.MAP_EXTENT;
const MAP_URL = config.MAP_URL;
const MAP_WORKSPACE = config.MAP_WORKSPACE;
// 添加防抖函数
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 字段选择不同图标
const scadaStyle = (feature: any) => {
const type = feature.get("type");
@@ -239,32 +240,32 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
};
// 矢量瓦片数据源和图层
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(),
projection: "EPSG:3857",
});
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(),
projection: "EPSG:3857",
});
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(),
});
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(),
});
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(),
});
// WebGL 渲染优化显示
const junctionLayer = new WebGLVectorTileLayer({
source: junctionSource as any, // 使用 WebGL 渲染
style: defaultFlatStyle,
extent: extent, // 设置图层范围
extent: MAP_EXTENT, // 设置图层范围
maxZoom: 24,
minZoom: 12,
properties: {
@@ -284,7 +285,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
const pipeLayer = new WebGLVectorTileLayer({
source: pipeSource as any, // 使用 WebGL 渲染
style: defaultFlatStyle,
extent: extent, // 设置图层范围
extent: MAP_EXTENT, // 设置图层范围
maxZoom: 24,
minZoom: 12,
properties: {
@@ -322,7 +323,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
const reservoirsLayer = new VectorLayer({
source: reservoirsSource,
style: reservoirsStyle,
extent: extent, // 设置图层范围
extent: MAP_EXTENT, // 设置图层范围
maxZoom: 24,
minZoom: 12,
properties: {
@@ -335,7 +336,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
const valvesLayer = new VectorLayer({
source: valvesSource,
style: valvesStyle,
extent: extent, // 设置图层范围
extent: MAP_EXTENT, // 设置图层范围
maxZoom: 24,
minZoom: 12,
properties: {
@@ -492,7 +493,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
controls: [],
});
setMap(map);
map.getView().fit(extent, {
map.getView().fit(MAP_EXTENT, {
padding: [50, 50, 50, 50], // 添加一些内边距
duration: 1000, // 动画持续时间
});

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

@@ -148,7 +148,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
setLoading(true);
try {
const response = await axios.get(
`${config.backendUrl}/getallsensorplacements/?network=${network}`
`${config.BACKEND_URL}/getallsensorplacements/?network=${network}`
);
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 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 {
let response;
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 endtime = dayjs(range.to).format("YYYY-MM-DD HH:mm:ss");
const cleaningUrl = `${config.backendUrl}/querycleaningscadadatabydeviceidandtimerange/?ids=${ids}&starttime=${starttime}&endtime=${endtime}`;
const rawUrl = `${config.backendUrl}/queryscadadatabydeviceidandtimerange/?ids=${ids}&starttime=${starttime}&endtime=${endtime}`;
const simUrl = `${config.backendUrl}/querysimulationscadadatabydeviceidandtimerange/?ids=${ids}&starttime=${starttime}&endtime=${endtime}`;
const cleaningUrl = `${config.BACKEND_URL}/querycleaningscadadatabydeviceidandtimerange/?ids=${ids}&starttime=${starttime}&endtime=${endtime}`;
const rawUrl = `${config.BACKEND_URL}/queryscadadatabydeviceidandtimerange/?ids=${ids}&starttime=${starttime}&endtime=${endtime}`;
const simUrl = `${config.BACKEND_URL}/querysimulationscadadatabydeviceidandtimerange/?ids=${ids}&starttime=${starttime}&endtime=${endtime}`;
try {
const [cleanRes, rawRes, simRes] = await Promise.all([
@@ -357,7 +356,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
useEffect(() => {
const fetchDeviceLabels = async () => {
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);
if (!response.ok) return;
@@ -466,7 +465,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
// 调用后端清洗接口
const response = await axios.post(
`${config.backendUrl}/scadadevicedatacleaning/`,
`${config.BACKEND_URL}/scadadevicedatacleaning/`,
null,
{
params: {

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

@@ -183,7 +183,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
const fetchScadaDevices = async () => {
setLoading(true);
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);
if (!response.ok) throw new Error("Failed to fetch SCADA devices");
const json = await response.json();
@@ -607,7 +607,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
// 调用后端清洗接口
const response = await axios.post(
`${config.backendUrl}/scadadevicedatacleaning/`,
`${config.BACKEND_URL}/scadadevicedatacleaning/`,
null,
{
params: {

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

@@ -20,8 +20,6 @@ interface ZonePropsPanelProps {
onClose?: () => void;
}
const mapUrl = config.mapUrl;
const ZonePropsPanel: React.FC<ZonePropsPanelProps> = ({
title = "分区属性信息",
isVisible = true,
@@ -107,7 +105,7 @@ const ZonePropsPanel: React.FC<ZonePropsPanelProps> = ({
}
const networkZoneLayer = new VectorLayer({
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(),
}),
style: new Style({

9
src/config/config.ts
View File

@@ -1,10 +1,11 @@
export const config = {
backendUrl: process.env.BACKEND_URL || "http://192.168.1.42:8000",
mapUrl: process.env.MAP_URL || "http://127.0.0.1:8080/geoserver",
mapExtent: process.env.MAP_EXTENT
BACKEND_URL: process.env.BACKEND_URL || "http://192.168.1.42:8000",
MAP_URL: process.env.MAP_URL || "http://127.0.0.1:8080/geoserver",
MAP_WORKSPACE: process.env.MAP_WORKSPACE || "TJWater",
MAP_EXTENT: process.env.MAP_EXTENT
? process.env.MAP_EXTENT.split(",").map(Number)
: [13508849, 3608035.75, 13555781, 3633812.75],
mapDefaultStyle: {
MAP_DEFAULT_STYLE: {
"stroke-width": 3,
"stroke-color": "rgba(51, 153, 204, 0.9)",
"circle-fill-color": "rgba(255,138, 92,0.8)",

4
src/utils/mapQueryService.ts
View File

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