Implemented a Zustand-based project_id store, expanded project selection/switching to persist project_id,

and centralized backend requests via api/apiFetch (including data provider updates) to inject X-Project-ID.

src/components/header/index.tsx

@@ -22,6 +22,7 @@ import { HamburgerMenu, RefineThemedLayoutHeaderProps } from "@refinedev/mui";
 import React, { useContext, useState } from "react";
 import { ProjectSelector } from "@components/project/ProjectSelector";
 import { setMapExtent, setMapWorkspace, setNetworkName } from "@config/config";
+import { useProjectStore } from "@/store/projectStore";
 
 type IUser = {
   id: number;
@@ -37,6 +38,9 @@ export const Header: React.FC<RefineThemedLayoutHeaderProps> = ({
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [showProjectSelector, setShowProjectSelector] = useState(false);
   const open = Boolean(anchorEl);
+  const setCurrentProjectId = useProjectStore(
+    (state) => state.setCurrentProjectId,
+  );
 
   const { data: user } = useGetIdentity<IUser>();
 
@@ -54,6 +58,7 @@ export const Header: React.FC<RefineThemedLayoutHeaderProps> = ({
   };
 
   const handleProjectSelect = (
+    projectId: string,
     workspace: string,
     networkName: string,
     extent: number[],
@@ -65,6 +70,7 @@ export const Header: React.FC<RefineThemedLayoutHeaderProps> = ({
     localStorage.setItem("NEXT_PUBLIC_NETWORK_NAME", networkName);
     localStorage.setItem("NEXT_PUBLIC_MAP_EXTENT", extent.join(","));
     localStorage.removeItem(`${workspace}_map_view`);
+    setCurrentProjectId(projectId || networkName || workspace);
     setShowProjectSelector(false);
     window.location.reload();
   };

src/components/olmap/BurstPipeAnalysis/AnalysisParameters.tsx

@@ -23,7 +23,7 @@ import { Style, Stroke, Icon } from "ol/style";
 import { handleMapClickSelectFeatures as mapClickSelectFeatures } from "@/utils/mapQueryService";
 import Feature, { FeatureLike } from "ol/Feature";
 import { useNotification } from "@refinedev/core";
-import axios from "axios";
+import { api } from "@/lib/api";
 import { config, NETWORK_NAME } from "@/config/config";
 import { along, lineString, length, toMercator } from "@turf/turf";
 import { Point } from "ol/geom";
@@ -283,7 +283,7 @@ const AnalysisParameters: React.FC = () => {
     };
 
     try {
-      await axios.get(`${config.BACKEND_URL}/api/v1/burst_analysis/`, {
+      await api.get(`${config.BACKEND_URL}/api/v1/burst_analysis/`, {
         params,
         paramsSerializer: {
           indexes: null, // 移除数组索引，即由 burst_ID[] 变为 burst_ID

src/components/olmap/BurstPipeAnalysis/BurstPipeAnalysisPanel.tsx

@@ -22,7 +22,7 @@ import AnalysisParameters from "./AnalysisParameters";
 import SchemeQuery from "./SchemeQuery";
 import LocationResults from "./LocationResults";
 import ValveIsolation from "./ValveIsolation";
-import axios from "axios";
+import { api } from "@/lib/api";
 import { config } from "@config/config";
 import { useNotification } from "@refinedev/core";
 import { LocationResult, SchemeRecord, ValveIsolationResult } from "./types";
@@ -85,7 +85,7 @@ const BurstPipeAnalysisPanel: React.FC<BurstPipeAnalysisPanelProps> = ({
 
   const handleLocateScheme = async (scheme: SchemeRecord) => {
     try {
-      const response = await axios.get(
+      const response = await api.get(
         `${config.BACKEND_URL}/api/v1/burst-locate-result/${scheme.schemeName}`,
       );
       setLocationResults(response.data);

src/components/olmap/BurstPipeAnalysis/SchemeQuery.tsx

@@ -26,7 +26,7 @@ import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import "dayjs/locale/zh-cn"; // 引入中文包
 import dayjs, { Dayjs } from "dayjs";
-import axios from "axios";
+import { api } from "@/lib/api";
 import moment from "moment";
 import { config, NETWORK_NAME } from "@config/config";
 import { useNotification } from "@refinedev/core";
@@ -109,7 +109,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
 
     setLoading(true);
     try {
-      const response = await axios.get(
+      const response = await api.get(
         `${config.BACKEND_URL}/api/v1/getallschemes/?network=${network}`,
       );
       let filteredResults = response.data;

src/components/olmap/BurstPipeAnalysis/ValveIsolation.tsx

@@ -27,7 +27,7 @@ import {
   CheckBox as CheckBoxIcon,
   CheckBoxOutlineBlank as CheckBoxOutlineBlankIcon,
 } from "@mui/icons-material";
-import axios from "axios";
+import { api } from "@/lib/api";
 import { config, NETWORK_NAME } from "@config/config";
 import { ValveIsolationResult } from "./types";
 import { useNotification } from "@refinedev/core";
@@ -270,7 +270,7 @@ const ValveIsolation: React.FC<ValveIsolationProps> = ({
         if (disabled.length > 0) {
           params.disabled_valves = disabled;
         }
-        const response = await axios.get(
+        const response = await api.get(
           `${config.BACKEND_URL}/api/v1/valve_isolation_analysis/`,
           {
             params,

src/components/olmap/ContaminantSimulation/AnalysisParameters.tsx

@@ -17,7 +17,7 @@ import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import "dayjs/locale/zh-cn";
 import dayjs, { Dayjs } from "dayjs";
 import { useNotification } from "@refinedev/core";
-import axios from "axios";
+import { api } from "@/lib/api";
 import { config, NETWORK_NAME } from "@/config/config";
 import { useMap } from "@app/OlMap/MapComponent";
 import VectorLayer from "ol/layer/Vector";
@@ -189,7 +189,7 @@ const AnalysisParameters: React.FC = () => {
         scheme_name: schemeName,
       };
 
-      await axios.get(`${config.BACKEND_URL}/api/v1/contaminant_simulation/`, {
+      await api.get(`${config.BACKEND_URL}/api/v1/contaminant_simulation/`, {
         params,
       });
 

src/components/olmap/ContaminantSimulation/SchemeQuery.tsx

@@ -25,7 +25,7 @@ import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import "dayjs/locale/zh-cn";
 import dayjs, { Dayjs } from "dayjs";
-import axios from "axios";
+import { api } from "@/lib/api";
 import moment from "moment";
 import { useNotification } from "@refinedev/core";
 import { config, NETWORK_NAME } from "@config/config";
@@ -180,7 +180,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
     if (!queryAll && !queryDate) return;
     setLoading(true);
     try {
-      const response = await axios.get(
+      const response = await api.get(
         `${config.BACKEND_URL}/api/v1/getallschemes/?network=${network}`,
       );
       let filteredResults = response.data;

src/components/olmap/FlushingAnalysis/AnalysisParameters.tsx

@@ -25,7 +25,7 @@ import { Style, Stroke, Fill, Circle as CircleStyle } from "ol/style";
 import { handleMapClickSelectFeatures as mapClickSelectFeatures } from "@/utils/mapQueryService";
 import Feature, { FeatureLike } from "ol/Feature";
 import { useNotification } from "@refinedev/core";
-import axios from "axios";
+import { api } from "@/lib/api";
 import { config, NETWORK_NAME } from "@/config/config";
 
 interface ValveItem {
@@ -242,7 +242,7 @@ const AnalysisParameters: React.FC = () => {
       // but axios usually handles array as valves[]=1&valves[]=2
       // FastAPI default expects repeated query params.
 
-      const response = await axios.get(`${config.BACKEND_URL}/flushing_analysis/`, {
+      const response = await api.get(`${config.BACKEND_URL}/flushing_analysis/`, {
         params,
         // Ensure arrays are sent as repeated keys: valves=1&valves=2
         paramsSerializer: {

src/components/olmap/FlushingAnalysis/SchemeQuery.tsx

@@ -27,7 +27,7 @@ import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import "dayjs/locale/zh-cn";
 import dayjs, { Dayjs } from "dayjs";
-import axios from "axios";
+import { api } from "@/lib/api";
 import moment from "moment";
 import { config, NETWORK_NAME } from "@config/config";
 import { useNotification } from "@refinedev/core";
@@ -221,7 +221,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
 
     setLoading(true);
     try {
-      const response = await axios.get(
+      const response = await api.get(
         `${config.BACKEND_URL}/api/v1/getallschemes/?network=${network}`,
       );
 

src/components/olmap/HealthRiskAnalysis/Timeline.tsx

@@ -29,6 +29,7 @@ import { TbArrowBackUp, TbArrowForwardUp } from "react-icons/tb";
 import { FiSkipBack, FiSkipForward } from "react-icons/fi";
 import { useData } from "../../../app/OlMap/MapComponent";
 import { config, NETWORK_NAME } from "@/config/config";
+import { apiFetch } from "@/lib/apiFetch";
 import { useMap } from "../../../app/OlMap/MapComponent";
 import { useHealthRisk } from "./HealthRiskContext";
 import {
@@ -422,7 +423,7 @@ const Timeline: React.FC<TimelineProps> = ({
       undoableTimeout: 3,
     });
     try {
-      const response = await fetch(
+      const response = await apiFetch(
         `${config.BACKEND_URL}/api/v1/composite/pipeline-health-prediction?query_time=${query_time}&network_name=${NETWORK_NAME}`,
       );
 

src/components/olmap/MonitoringPlaceOptimization/OptimizationParameters.tsx

@@ -12,7 +12,7 @@ import {
 import { PlayArrow as PlayArrowIcon } from "@mui/icons-material";
 import { useNotification } from "@refinedev/core";
 import { useGetIdentity } from "@refinedev/core";
-import axios from "axios";
+import { api } from "@/lib/api";
 import { config, NETWORK_NAME } from "@/config/config";
 
 type IUser = {
@@ -93,7 +93,7 @@ const OptimizationParameters: React.FC = () => {
 
     try {
       // 发送优化请求
-      const response = await axios.post(
+      const response = await api.post(
         `${config.BACKEND_URL}/api/v1/sensorplacementscheme/create`,
         null,
         {

src/components/olmap/MonitoringPlaceOptimization/SchemeQuery.tsx

@@ -24,7 +24,7 @@ import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import "dayjs/locale/zh-cn"; // 引入中文包
 import dayjs, { Dayjs } from "dayjs";
-import axios from "axios";
+import { api } from "@/lib/api";
 import moment from "moment";
 import { config, NETWORK_NAME } from "@config/config";
 import { useNotification } from "@refinedev/core";
@@ -148,7 +148,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
 
     setLoading(true);
     try {
-      const response = await axios.get(
+      const response = await api.get(
         `${config.BACKEND_URL}/api/v1/getallsensorplacements/?network=${network}`,
       );
 

src/components/olmap/SCADADataPanel.tsx

@@ -37,7 +37,8 @@ import { zhCN as pickerZhCN } from "@mui/x-date-pickers/locales";
 import config from "@/config/config";
 import { useGetIdentity } from "@refinedev/core";
 import { useNotification } from "@refinedev/core";
-import axios from "axios";
+import { api } from "@/lib/api";
+import { apiFetch } from "@/lib/apiFetch";
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
@@ -96,10 +97,10 @@ const fetchFromBackend = async (
   try {
     // 优先查询清洗数据和模拟数据
     const [cleaningRes, simulationRes] = await Promise.all([
-      fetch(cleaningDataUrl)
+      apiFetch(cleaningDataUrl)
         .then((r) => (r.ok ? r.json() : null))
         .catch(() => null),
-      fetch(simulationDataUrl)
+      apiFetch(simulationDataUrl)
         .then((r) => (r.ok ? r.json() : null))
         .catch(() => null),
     ]);
@@ -118,7 +119,7 @@ const fetchFromBackend = async (
       );
     } else {
       // 如果清洗数据没有数据，查询原始数据，返回模拟和原始数据
-      const rawRes = await fetch(rawDataUrl)
+      const rawRes = await apiFetch(rawDataUrl)
         .then((r) => (r.ok ? r.json() : null))
         .catch(() => null);
       const rawData = transformBackendData(rawRes, deviceIds);
@@ -338,13 +339,13 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
       const simulationDataUrl = `${config.BACKEND_URL}/api/v1/composite/scada-simulation?device_ids=${device_ids}&start_time=${start_time}&end_time=${end_time}`;
       try {
         const [cleanRes, rawRes, simRes] = await Promise.all([
-          fetch(cleaningDataUrl)
+          apiFetch(cleaningDataUrl)
             .then((r) => (r.ok ? r.json() : null))
             .catch(() => null),
-          fetch(rawDataUrl)
+          apiFetch(rawDataUrl)
             .then((r) => (r.ok ? r.json() : null))
             .catch(() => null),
-          fetch(simulationDataUrl)
+          apiFetch(simulationDataUrl)
             .then((r) => (r.ok ? r.json() : null))
             .catch(() => null),
         ]);
@@ -474,7 +475,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
       const endTime = dayjs(rangeTo).toISOString();
 
       // 调用后端清洗接口
-      const response = await axios.post(
+      const response = await api.post(
         `${
           config.BACKEND_URL
         }/api/v1/composite/clean-scada?device_ids=${deviceIds.join(

src/components/olmap/SCADADeviceList.tsx

@@ -48,7 +48,7 @@ import {
 } from "@mui/icons-material";
 import { FixedSizeList } from "react-window";
 import { useNotification } from "@refinedev/core";
-import axios from "axios";
+import { api } from "@/lib/api";
 import { useGetIdentity } from "@refinedev/core";
 import config from "@/config/config";
 
@@ -622,7 +622,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
       const endTime = dayjs(cleanEndTime).toISOString();
 
       // 调用后端清洗接口
-      const response = await axios.post(
+      const response = await api.post(
         `${config.BACKEND_URL}/api/v1/composite/clean-scada?device_ids=all&start_time=${startTime}&end_time=${endTime}`,
       );
 

src/components/project/ProjectSelector.tsx

@@ -19,24 +19,31 @@ import { useState } from "react";
 
 interface ProjectSelectorProps {
   open: boolean;
-  onSelect: (workspace: string, networkName: string, extent: number[]) => void;
+  onSelect: (
+    projectId: string,
+    workspace: string,
+    networkName: string,
+    extent: number[],
+  ) => void;
   onClose?: () => void;
 }
 
 const PROJECTS = [
   {
+    id: "tjwater",
     label: "默认",
     workspace: "tjwater",
     networkName: "tjwater",
     extent: [13508802, 3608164, 13555651, 3633686],
   },
+  // {
+  //   label: "苏州河",
+  //   workspace: "szh",
+  //   networkName: "szh",
+  //   extent: [13490131, 3630016, 13525879, 3666969],
+  // },
   {
-    label: "苏州河",
-    workspace: "szh",
-    networkName: "szh",
-    extent: [13490131, 3630016, 13525879, 3666969],
-  },
-  {
+    id: "test",
     label: "测试项目",
     workspace: "test",
     networkName: "test",
@@ -49,6 +56,7 @@ export const ProjectSelector: React.FC<ProjectSelectorProps> = ({
   onSelect,
   onClose,
 }) => {
+  const [projectId, setProjectId] = useState(PROJECTS[0].id);
   const [workspace, setWorkspace] = useState(PROJECTS[0].workspace);
   const [networkName, setNetworkName] = useState(PROJECTS[0].networkName);
   const [extent, setExtent] = useState<number[]>(
@@ -57,7 +65,8 @@ export const ProjectSelector: React.FC<ProjectSelectorProps> = ({
   const [customMode, setCustomMode] = useState(false);
 
   const handleConfirm = () => {
-    onSelect(workspace, networkName, extent);
+    const resolvedProjectId = projectId.trim() || workspace || networkName;
+    onSelect(resolvedProjectId, workspace, networkName, extent);
   };
 
   return (
@@ -123,9 +132,11 @@ export const ProjectSelector: React.FC<ProjectSelectorProps> = ({
                 const val = e.target.value;
                 if (val === "custom") {
                   setCustomMode(true);
+                  setProjectId(workspace);
                 } else {
                   const p = PROJECTS.find((p) => p.workspace === val);
                   if (p) {
+                    setProjectId(p.id);
                     setWorkspace(p.workspace);
                     setNetworkName(p.networkName);
                     setExtent(p.extent);
@@ -150,6 +161,13 @@ export const ProjectSelector: React.FC<ProjectSelectorProps> = ({
           </FormControl>
         ) : (
           <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
+            <TextField
+              label="项目 ID"
+              value={projectId}
+              onChange={(e) => setProjectId(e.target.value)}
+              fullWidth
+              helperText="例如: tjwater"
+            />
             <TextField
               label="Geoserver 工作区"
               value={workspace}