重新设计关阀分析模块

.github/copilot-instructions.md

@@ -0,0 +1,154 @@
+# Copilot Instructions for TJWater Frontend
+
+## Project Overview
+
+A Next.js 15 + TypeScript water network management system built with Refine framework, featuring real-time hydraulic simulation, SCADA data management, and GIS visualization using OpenLayers and Deck.gl.
+
+## Build, Test, and Lint Commands
+
+```bash
+# Development
+npm run dev              # Start dev server (uses 4GB memory allocation)
+
+# Production
+npm run build            # Build for production (standalone output)
+npm run start            # Start production server
+
+# Testing
+npm run test             # Run all tests
+npm run test:watch       # Run tests in watch mode
+npm run test:coverage    # Generate coverage report
+
+# Linting
+npm run lint             # Run ESLint
+```
+
+**Run single test file:**
+```bash
+npm test -- path/to/test-file.test.ts
+```
+
+## Architecture
+
+### Framework Stack
+- **Next.js 15** with App Router (not Pages Router)
+- **Refine** framework for admin/CRUD operations
+- **NextAuth.js** with Keycloak for SSO authentication
+- **Material-UI (MUI) v6** for UI components
+- **OpenLayers** + **Deck.gl** for map visualization
+
+### Route Structure
+- `src/app/layout.tsx` - Root layout with RefineContext
+- `src/app/(main)/` - Protected routes with shared layout
+  - `/network-simulation` - Real-time network simulation
+  - `/scada-data-cleaning` - SCADA data management
+  - `/monitoring-place-optimization` - Sensor placement optimization
+  - `/health-risk-analysis` - Health risk assessment
+  - `/risk-analysis-location` - Risk location analysis
+  - `/network-partition-optimization` - Network partitioning
+- `src/app/OlMap/` - Standalone map route with custom controls
+- `src/app/login/` - Public authentication pages
+
+### Key Directories
+- `src/app/_refine_context.tsx` - Refine configuration with resources, auth provider, and data provider
+- `src/providers/data-provider/` - REST API data provider (currently mock, update API_URL for production)
+- `src/contexts/color-mode/` - Theme switching (light/dark mode persisted in cookies)
+- `src/components/` - Reusable UI components (header, loading, olmap, title)
+- `src/utils/` - Map utilities (layers.ts, mapQueryService.ts, color parsing)
+- `src/config/config.ts` - Environment-based configuration with fallback defaults
+
+### Path Aliases (TypeScript)
+```typescript
+@app/*      -> src/app/*
+@assets/*   -> src/assets/*
+@components/* -> src/components/*
+@config/*   -> src/config/*
+@contexts/* -> src/contexts/*
+@interfaces/* -> src/interfaces/*
+@libs/*     -> src/libs/*
+@providers/* -> src/providers/*
+@utils/*    -> src/utils/*
+@/*         -> src/*
+```
+
+### Map Architecture
+The map system uses a hybrid approach:
+- **OpenLayers** as the base map engine (vector tiles from GeoServer)
+- **Deck.gl** overlays for advanced visualizations (trips, contours, text labels)
+- **DeckLayer** custom class bridges OL and Deck.gl (`@utils/layers`)
+- Map data sourced from GeoServer MVT tiles (configured in `@config/config.ts`)
+- Layers: junctions, pipes, valves, reservoirs, pumps, tanks, scada
+
+### Client vs Server Components
+- Most interactive components use `"use client"` directive (~35 files)
+- Map components are always client-side (OpenLayers requires browser APIs)
+- Layout and page files without interactivity can be server components
+
+## Key Conventions
+
+### Authentication Flow
+- Keycloak SSO via NextAuth.js (`src/app/api/auth/[...nextauth]/`)
+- Session managed with `SessionProvider` wrapper
+- Auth check redirects to `/login` if unauthenticated
+- Use `useSession()` hook for current user data
+
+### Environment Variables
+- All frontend-accessible variables must have `NEXT_PUBLIC_` prefix
+- Backend URL: `NEXT_PUBLIC_BACKEND_URL` (defaults to http://192.168.1.42:8000)
+- GeoServer URL: `NEXT_PUBLIC_MAP_URL` (defaults to http://127.0.0.1:8080/geoserver)
+- Map layers: `NEXT_PUBLIC_MAP_AVAILABLE_LAYERS` (comma-separated)
+- Keycloak config in `.env.local` (not committed)
+
+### Refine Resources
+Resources defined in `_refine_context.tsx` use Chinese labels and route to pages in `(main)/`:
+- Each resource has: name (Chinese), list (route path), meta (icon + label)
+- Icons from `react-icons` library
+- No CRUD operations defined (list-only pages)
+
+### Map Styling
+- Default styles in `config.MAP_DEFAULT_STYLE` (stroke, circle, colors)
+- Circle radius uses zoom-based interpolation (1px at z12, 8px at z24)
+- WebGL rendering for vector tiles
+- Style legends generated dynamically in map controls
+
+### TypeScript Configuration
+- Strict mode enabled
+- Path aliases match jest.config.js mappings
+- Target ES5 for broader compatibility
+- Incremental builds enabled
+
+### Next.js Configuration
+- **Standalone output** for Docker deployment
+- SVG files handled by `@svgr/webpack` (imported as React components)
+- No custom server or middleware
+
+### Testing Setup
+- Jest with React Testing Library
+- jsdom environment for component testing
+- Path aliases configured to match tsconfig.json
+- Setup file at `jest.setup.js`
+
+## Common Patterns
+
+### Adding a New Route
+1. Create directory in `src/app/(main)/your-route/`
+2. Add `page.tsx` and optional `loading.tsx`
+3. Register resource in `src/app/_refine_context.tsx` resources array
+4. Import icon from `react-icons`
+
+### Working with Maps
+- Use `MapComponent` from `src/app/OlMap/MapComponent.tsx`
+- Access map context via `useMapData()` hook
+- Vector tile layers auto-load from GeoServer workspace
+- Custom overlays use Deck.gl layers (TextLayer, TripsLayer, ContourLayer)
+
+### API Calls
+- Update `dataProvider` in `src/providers/data-provider/index.ts` for real backend
+- Currently points to `https://api.fake-rest.refine.dev`
+- Use Refine hooks (`useList`, `useOne`, etc.) for data fetching
+
+### Theme Management
+- Theme stored in cookies (not localStorage)
+- Toggle via `ColorModeContext` from `@contexts/color-mode`
+- Supports light/dark modes only
+- Default mode read from cookie in root layout (server-side)

jest.config.js

@@ -0,0 +1,30 @@
+const nextJest = require('next/jest')
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: './',
+})
+
+// Add any custom config to be passed to Jest
+const customJestConfig = {
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  testEnvironment: 'jest-environment-jsdom',
+  moduleNameMapper: {
+    '^@pages/(.*)$': '<rootDir>/pages/$1',
+    '^@/(.*)$': '<rootDir>/src/$1',
+    '^@app/(.*)$': '<rootDir>/src/app/$1',
+    '^@assets/(.*)$': '<rootDir>/src/assets/$1',
+    '^@components/(.*)$': '<rootDir>/src/components/$1',
+    '^@config/(.*)$': '<rootDir>/src/config/$1',
+    '^@contexts/(.*)$': '<rootDir>/src/contexts/$1',
+    '^@interfaces/(.*)$': '<rootDir>/src/interfaces/$1',
+    '^@libs/(.*)$': '<rootDir>/src/libs/$1',
+    '^@providers/(.*)$': '<rootDir>/src/providers/$1',
+    '^@utils/(.*)$': '<rootDir>/src/utils/$1',
+    // Handle specific aliases if generic one causes issues, but trying generic first matching tsconfig
+    // '^@(.*)$': '<rootDir>/src/$1',
+  },
+}
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(customJestConfig)

jest.setup.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom'

next.config.mjs

@@ -1,6 +1,14 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: "standalone",
+  turbopack: {
+    rules: {
+      "*.svg": {
+        loaders: ["@svgr/webpack"],
+        as: "*.js",
+      },
+    },
+  },
   webpack(config) {
     config.module.rules.push({
       test: /\.svg$/,

package.json

@@ -10,6 +10,9 @@
     "build": "refine build",
     "start": "refine start",
     "lint": "next lint",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
     "refine": "refine"
   },
   "dependencies": {
@@ -22,12 +25,12 @@
     "@mui/x-data-grid": "^7.22.2",
     "@mui/x-date-pickers": "^8.12.0",
     "@refinedev/cli": "^2.16.50",
-    "@refinedev/core": "^5.0.6",
+    "@refinedev/core": "^5.0.8",
     "@refinedev/devtools": "^2.0.3",
     "@refinedev/kbar": "^2.0.1",
-    "@refinedev/mui": "^7.0.1",
+    "@refinedev/mui": "^8.0.0",
     "@refinedev/nextjs-router": "^7.0.4",
-    "@refinedev/react-hook-form": "^5.0.3",
+    "@refinedev/react-hook-form": "^5.0.4",
     "@refinedev/simple-rest": "^6.0.1",
     "@tailwindcss/postcss": "^4.1.13",
     "@turf/turf": "^7.2.0",
@@ -37,7 +40,7 @@
     "echarts": "^6.0.0",
     "echarts-for-react": "^3.0.5",
     "js-cookie": "^3.0.5",
-    "next": "15.5.9",
+    "next": "^16.1.6",
     "next-auth": "^4.24.5",
     "ol": "^10.7.0",
     "postcss": "^8.5.6",
@@ -48,16 +51,27 @@
     "react-window": "^1.8.10",
     "tailwindcss": "^4.1.13"
   },
+  "overrides": {
+    "fast-xml-parser": "5.3.4"
+  },
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/jest": "^30.0.0",
     "@types/js-cookie": "^3.0.6",
     "@types/node": "^20",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
     "@types/react-window": "^1.8.8",
+    "baseline-browser-mapping": "^2.9.19",
     "cross-env": "^7.0.3",
-    "eslint": "^8",
+    "eslint": "^9.39.2",
-    "eslint-config-next": "^15.0.3",
+    "eslint-config-next": "^16.1.6",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
+    "ts-jest": "^29.4.6",
     "typescript": "^5.8.3"
   },
   "refine": {

public/icons/contaminant_source.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1769741101058" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6910" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M102.4 921.6a25.6 25.6 0 0 1 25.6-25.6h768a25.6 25.6 0 0 1 0 51.2h-768A25.6 25.6 0 0 1 102.4 921.6zM638.464 612.5056A177.664 177.664 0 0 1 512 665.6a177.664 177.664 0 0 1-126.464-53.0944A183.6544 183.6544 0 0 1 332.8 483.328c0-20.224 10.0352-54.6304 31.232-100.352 20.3264-43.8272 47.9232-91.8016 76.1344-136.8576 25.6512-40.96 51.4048-78.7456 71.8336-107.776 20.48 29.0304 46.1824 66.816 71.8336 107.776 28.2112 45.056 55.808 93.0304 76.1344 136.8576 21.1968 45.7216 31.232 80.128 31.232 100.352 0 48.64-19.0464 95.0272-52.736 129.1264zM480.3584 94.464C417.28 182.9376 281.6 384.512 281.6 483.328c0 61.952 24.2688 121.344 67.4816 165.12A228.864 228.864 0 0 0 512 716.8a228.864 228.864 0 0 0 162.9184-68.3008A234.8544 234.8544 0 0 0 742.4 483.328c0-98.8672-135.68-300.4416-198.8096-388.9152C524.544 67.584 512 51.2 512 51.2s-12.4928 16.384-31.6416 43.264z" fill="#03a86b" p-id="6911"></path><path d="M409.6 870.4a51.2 51.2 0 1 1-102.4 0 51.2 51.2 0 0 1 102.4 0z" fill="#03a86b" p-id="6912"></path><path d="M640 780.8a38.4 38.4 0 1 1-76.8 0 38.4 38.4 0 0 1 76.8 0zM778.24 675.84a30.72 30.72 0 1 1-61.44 0 30.72 30.72 0 0 1 61.44 0zM317.44 706.56a30.72 30.72 0 1 1-61.44 0 30.72 30.72 0 0 1 61.44 0zM419.7376 435.2a25.6 25.6 0 0 1 18.0736 31.3344 76.8 76.8 0 0 0 94.0544 94.0544 25.6 25.6 0 1 1 13.2608 49.4592 128 128 0 0 1-156.7744-156.7744 25.6 25.6 0 0 1 31.3856-18.0736z" fill="#03a86b" p-id="6913"></path></svg>

src/app/OlMap/Controls/LayerControl.tsx

@@ -28,10 +28,21 @@ const LayerControl: React.FC = () => {
   } = data;
   const [layerItems, setLayerItems] = useState<LayerItem[]>([]);
 
+  const layerOrder = [
+    "junctions",
+    "reservoirs",
+    "tanks",
+    "pipes",
+    "pumps",
+    "valves",
+    "scada",
+    "waterflowLayer",
+    "junctionContourLayer",
+  ];
+
   // 更新图层列表
   const updateLayers = useCallback(() => {
     if (!map || !data) return;
-    const { deckLayer } = data;
 
     const items: LayerItem[] = [];
 
@@ -93,19 +104,6 @@ const LayerControl: React.FC = () => {
       });
     }
 
-    // 3. 定义图层显示顺序和过滤白名单
-    const layerOrder = [
-      "junctions",
-      "reservoirs",
-      "tanks",
-      "pipes",
-      "pumps",
-      "valves",
-      "scada",
-      "waterflowLayer",
-      "junctionContourLayer",
-    ];
-
     // 过滤并排序
     const sortedItems = items
       .filter((item) => layerOrder.includes(item.id))
@@ -116,7 +114,7 @@ const LayerControl: React.FC = () => {
       });
 
     setLayerItems(sortedItems);
-  }, [map, isWaterflowLayerAvailable, isContourLayerAvailable]);
+  }, [map, deckLayer, isWaterflowLayerAvailable, isContourLayerAvailable]);
 
   useEffect(() => {
     updateLayers();
@@ -146,7 +144,7 @@ const LayerControl: React.FC = () => {
     }
 
     setLayerItems((prev) =>
-      prev.map((i) => (i.id === item.id ? { ...i, visible: checked } : i))
+      prev.map((i) => (i.id === item.id ? { ...i, visible: checked } : i)),
     );
   };
 

src/app/OlMap/MapComponent.tsx

@@ -111,7 +111,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
   const [schemeName, setSchemeName] = useState<string>(""); // 当前方案名称
   // 记录 id、对应属性的计算值
   const [currentJunctionCalData, setCurrentJunctionCalData] = useState<any[]>(
-    []
+    [],
   );
   const [currentPipeCalData, setCurrentPipeCalData] = useState<any[]>([]);
   // junctionData 和 pipeData 分别缓存瓦片解析后节点和管道的数据，用于 deck.gl 定位、标签渲染
@@ -180,7 +180,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
         setPipeData(tilePipeDataBuffer.current);
         tilePipeDataBuffer.current = [];
       }
-    }, 100)
+    }, 100),
   );
 
   const setJunctionData = (newData: any[]) => {
@@ -317,7 +317,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
             scale: 0.12,
             anchor: [0.5, 0.5],
           }),
-        })
+        }),
       );
     }
     return styles;
@@ -500,7 +500,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
           const uniqueData = Array.from(data.values());
           if (uniqueData.length > 0) {
             uniqueData.forEach((item) =>
-              tileJunctionDataBuffer.current.push(item)
+              tileJunctionDataBuffer.current.push(item),
             );
             debouncedUpdateData.current();
           }
@@ -709,7 +709,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
         if (center && typeof zoom === "number") {
           localStorage.setItem(
             MAP_VIEW_STORAGE_KEY,
-            JSON.stringify({ center, zoom })
+            JSON.stringify({ center, zoom }),
           );
         }
       } catch (err) {
@@ -947,27 +947,12 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
 
     // 动画循环
     const animate = () => {
-      if (!flowAnimation.current) {
-        try {
-          deckLayer.removeDeckLayer("waterflowLayer");
-        } catch (error) {
-          console.error("Error in animation loop:", error);
-        }
-        return;
-      }
       // 动画总时长（秒）
-      if (mergedPipeData.length === 0) {
-        animationFrameId = requestAnimationFrame(animate);
-        return;
-      }
       const animationDuration = 10;
-      // 缓冲时间（秒）
       const bufferTime = 2;
-      // 完整循环周期
       const loopLength = animationDuration + bufferTime;
-      // 确保时间范围与你的时间戳数据匹配
+      const currentTime = (Date.now() / 1000) % loopLength;
-      const currentTime = (Date.now() / 1000) % loopLength; // (0,12) 之间循环
+
-      // console.log("Current Time:", currentTime);
       const waterflowLayer = new TripsLayer({
         id: "waterflowLayer",
         name: "水流",
@@ -981,7 +966,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
         visible:
           isWaterflowLayerAvailable &&
           showWaterflowLayer &&
-          flowAnimation.current &&
+          flowAnimation.current && // 保持动画标志作为可见性的一部分
           currentZoom >= 12 &&
           currentZoom <= 24,
         widthMinPixels: 5,
@@ -990,13 +975,17 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
         trailLength: 2, // 水流尾迹淡出时间
         currentTime: currentTime,
       });
+
       if (deckLayer.getDeckLayerById("waterflowLayer")) {
         deckLayer.updateDeckLayer("waterflowLayer", waterflowLayer);
       } else {
         deckLayer.addDeckLayer(waterflowLayer);
       }
-      // 继续请求动画帧，每帧执行一次函数
+
+      // 只有在需要动画时才请求下一帧，但图层已经添加到了 deckLayer 中
+      if (flowAnimation.current) {
         animationFrameId = requestAnimationFrame(animate);
+      }
     };
     animate();
 
@@ -1007,6 +996,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
       }
     };
   }, [
+    currentPipeCalData,
     currentZoom,
     mergedPipeData,
     pipeText,

src/components/olmap/BurstPipeAnalysis/AnalysisParameters.tsx

@@ -44,7 +44,7 @@ const AnalysisParameters: React.FC = () => {
   const [startTime, setStartTime] = useState<Dayjs | null>(dayjs(new Date()));
   const [duration, setDuration] = useState<number>(3600);
   const [schemeName, setSchemeName] = useState<string>(
-    "FANGAN" + new Date().getTime()
+    "FANGAN" + new Date().getTime(),
   );
   const [network, setNetwork] = useState<string>(NETWORK_NAME);
   const [isSelecting, setIsSelecting] = useState<boolean>(false);
@@ -88,7 +88,7 @@ const AnalysisParameters: React.FC = () => {
             width: 3,
             lineDash: [15, 10],
           }),
-        })
+        }),
       );
       const geometry = feature.getGeometry();
       const lineCoords =
@@ -115,7 +115,7 @@ const AnalysisParameters: React.FC = () => {
               scale: 0.2,
               anchor: [0.5, 1],
             }),
-          })
+          }),
         );
       }
       return styles;
@@ -163,14 +163,14 @@ const AnalysisParameters: React.FC = () => {
       // 移除不在highlightFeatures中的
       const filtered = prevPipes.filter((pipe) =>
         highlightFeatures.some(
-          (feature) => feature.getProperties().id === pipe.id
+          (feature) => feature.getProperties().id === pipe.id,
-        )
+        ),
       );
       // 添加新的
       const newPipes = highlightFeatures
         .filter(
           (feature) =>
-            !filtered.some((p) => p.id === feature.getProperties().id)
+            !filtered.some((p) => p.id === feature.getProperties().id),
         )
         .map((feature) => {
           const properties = feature.getProperties();
@@ -207,7 +207,7 @@ const AnalysisParameters: React.FC = () => {
       const featureId = feature.getProperties().id;
       setHighlightFeatures((prev) => {
         const existingIndex = prev.findIndex(
-          (f) => f.getProperties().id === featureId
+          (f) => f.getProperties().id === featureId,
         );
         if (existingIndex !== -1) {
           // 如果已存在，移除
@@ -218,7 +218,7 @@ const AnalysisParameters: React.FC = () => {
         }
       });
     },
-    [map]
+    [map],
   );
 
   // 开始选择管道
@@ -242,14 +242,14 @@ const AnalysisParameters: React.FC = () => {
   const handleRemovePipe = (id: string) => {
     // 从高亮features中移除
     setHighlightFeatures((prev) =>
-      prev.filter((f) => f.getProperties().id !== id)
+      prev.filter((f) => f.getProperties().id !== id),
     );
   };
 
   const handleAreaChange = (id: string, value: string) => {
     const numValue = parseFloat(value) || 0;
     setPipePoints((prev) =>
-      prev.map((pipe) => (pipe.id === id ? { ...pipe, area: numValue } : pipe))
+      prev.map((pipe) => (pipe.id === id ? { ...pipe, area: numValue } : pipe)),
     );
   };
 
@@ -266,30 +266,26 @@ const AnalysisParameters: React.FC = () => {
 
     const burst_ID = pipePoints.map((pipe) => pipe.id);
     const burst_size = pipePoints.map((pipe) =>
-      parseInt(pipe.area.toString(), 10)
+      parseInt(pipe.area.toString(), 10),
     );
     // 格式化开始时间，去除秒部分
     const modify_pattern_start_time = startTime
       ? startTime.format("YYYY-MM-DDTHH:mm:00Z")
       : "";
     const modify_total_duration = duration;
-    const body = {
+    const params = {
-      name: network,
+      network: network,
       modify_pattern_start_time: modify_pattern_start_time,
       burst_ID: burst_ID,
       burst_size: burst_size,
       modify_total_duration: modify_total_duration,
-      scheme_Name: schemeName,
+      scheme_name: schemeName,
     };
 
     try {
-      await axios.post(`${config.BACKEND_URL}/api/v1/burst_analysis/`, body, {
+      await axios.get(`${config.BACKEND_URL}/api/v1/burst_analysis/`, {
-        headers: {
+        params,
-          "Accept-Encoding": "gzip",
-          "Content-Type": "application/json",
-        },
       });
-
       // 更新弹窗为成功状态
       open?.({
         key: "burst-analysis",

src/components/olmap/BurstPipeAnalysis/BurstPipeAnalysisPanel.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect, useRef, useState } from "react";
+import React, { useState } from "react";
 import {
   Box,
   Drawer,
@@ -16,10 +16,12 @@ import {
   Analytics as AnalyticsIcon,
   Search as SearchIcon,
   MyLocation as MyLocationIcon,
+  Handyman as HandymanIcon,
 } from "@mui/icons-material";
 import AnalysisParameters from "./AnalysisParameters";
 import SchemeQuery from "./SchemeQuery";
-import LocationResults, { LocationResult } from "./LocationResults";
+import LocationResults from "./LocationResults";
+import ValveIsolation from "./ValveIsolation";
 import ContaminantAnalysisParameters from "../ContaminantSimulation/AnalysisParameters";
 import ContaminantSchemeQuery from "../ContaminantSimulation/SchemeQuery";
 import ContaminantResultsPanel from "../ContaminantSimulation/ResultsPanel";
@@ -27,25 +29,7 @@ import axios from "axios";
 import { config } from "@config/config";
 import { useNotification } from "@refinedev/core";
 import { useData } from "@app/OlMap/MapComponent";
-interface SchemeDetail {
+import { LocationResult, SchemeRecord, ValveIsolationResult } from "./types";
-  burst_ID: string[];
-  burst_size: number[];
-  modify_total_duration: number;
-  modify_fixed_pump_pattern: any;
-  modify_valve_opening: any;
-  modify_variable_pump_pattern: any;
-}
-
-interface SchemeRecord {
-  id: number;
-  schemeName: string;
-  type: string;
-  user: string;
-  create_time: string;
-  startTime: string;
-  // 详情信息
-  schemeDetail?: SchemeDetail;
-}
 
 interface TabPanelProps {
   children?: React.ReactNode;
@@ -81,9 +65,6 @@ const BurstPipeAnalysisPanel: React.FC<BurstPipeAnalysisPanelProps> = ({
   const [internalOpen, setInternalOpen] = useState(true);
   const [currentTab, setCurrentTab] = useState(0);
   const [panelMode, setPanelMode] = useState<PanelMode>("burst");
-  const previousMapText = useRef<{ junction?: string; pipe?: string } | null>(
-    null
-  );
 
   const data = useData();
 
@@ -91,6 +72,9 @@ const BurstPipeAnalysisPanel: React.FC<BurstPipeAnalysisPanelProps> = ({
   const [schemes, setSchemes] = useState<SchemeRecord[]>([]);
   // 定位结果数据
   const [locationResults, setLocationResults] = useState<LocationResult[]>([]);
+  // 关阀分析结果和加载状态
+  const [valveAnalysisLoading, setValveAnalysisLoading] = useState(false);
+  const [valveAnalysisResult, setValveAnalysisResult] = useState<ValveIsolationResult | null>(null);
 
   const { open } = useNotification();
 
@@ -108,28 +92,20 @@ const BurstPipeAnalysisPanel: React.FC<BurstPipeAnalysisPanelProps> = ({
     setCurrentTab(newValue);
   };
 
-  useEffect(() => {
+  const handleModeChange = (_event: React.SyntheticEvent, newMode: PanelMode) => {
-    if (!data) return;
+    setPanelMode(newMode);
-    if (panelMode === "contaminant") {
+    // 切换模式时，如果当前标签索引超出新模式的标签数量，重置为第一个标签
-      if (!previousMapText.current) {
+    // 爆管分析有4个标签(0-3)，水质模拟有3个标签(0-2)
-        previousMapText.current = {
+    const maxTabIndex = newMode === "burst" ? 3 : 2;
-          junction: data.junctionText,
+    if (currentTab > maxTabIndex) {
-          pipe: data.pipeText,
+      setCurrentTab(0);
+    }
   };
-      }
-      data.setJunctionText?.("quality");
-      data.setPipeText?.("quality");
-    } else if (panelMode === "burst" && previousMapText.current) {
-      data.setJunctionText?.(previousMapText.current.junction || "pressure");
-      data.setPipeText?.(previousMapText.current.pipe || "flow");
-      previousMapText.current = null;
-    }
-  }, [panelMode, data]);
 
   const handleLocateScheme = async (scheme: SchemeRecord) => {
     try {
       const response = await axios.get(
-        `${config.BACKEND_URL}/api/v1/burst-locate-result/${scheme.schemeName}`
+        `${config.BACKEND_URL}/api/v1/burst-locate-result/${scheme.schemeName}`,
       );
       setLocationResults(response.data);
       setCurrentTab(2); // 切换到定位结果标签页
@@ -225,7 +201,7 @@ const BurstPipeAnalysisPanel: React.FC<BurstPipeAnalysisPanelProps> = ({
           <Box className="border-b border-gray-200 bg-white">
             <Tabs
               value={panelMode}
-              onChange={(_event, value: PanelMode) => setPanelMode(value)}
+              onChange={handleModeChange}
               variant="fullWidth"
               sx={{
                 minHeight: 46,
@@ -284,6 +260,13 @@ const BurstPipeAnalysisPanel: React.FC<BurstPipeAnalysisPanelProps> = ({
                 iconPosition="start"
                 label={isBurstMode ? "定位结果" : "模拟结果"}
               />
+              {isBurstMode && (
+                <Tab
+                  icon={<HandymanIcon fontSize="small" />}
+                  iconPosition="start"
+                  label="关阀分析"
+                />
+              )}
             </Tabs>
           </Box>
 
@@ -304,17 +287,30 @@ const BurstPipeAnalysisPanel: React.FC<BurstPipeAnalysisPanelProps> = ({
                 onLocate={handleLocateScheme}
               />
             ) : (
-              <ContaminantSchemeQuery />
+              <ContaminantSchemeQuery onViewResults={() => setCurrentTab(2)} />
             )}
           </TabPanel>
 
           <TabPanel value={currentTab} index={2}>
             {isBurstMode ? (
-              <LocationResults results={locationResults} />
+              <LocationResults
+                results={locationResults}
+              />
             ) : (
               <ContaminantResultsPanel schemeName={data?.schemeName} />
             )}
           </TabPanel>
+
+          {isBurstMode && (
+            <TabPanel value={currentTab} index={3}>
+              <ValveIsolation
+                loading={valveAnalysisLoading}
+                result={valveAnalysisResult}
+                onLoadingChange={setValveAnalysisLoading}
+                onResultChange={setValveAnalysisResult}
+              />
+            </TabPanel>
+          )}
         </Box>
       </Drawer>
     </>

src/components/olmap/BurstPipeAnalysis/LocationResults.tsx

@@ -9,7 +9,9 @@ import {
   Tooltip,
   Link,
 } from "@mui/material";
-import { LocationOn as LocationIcon } from "@mui/icons-material";
+import {
+  LocationOn as LocationIcon,
+} from "@mui/icons-material";
 import { queryFeaturesByIds } from "@/utils/mapQueryService";
 import { useMap } from "@app/OlMap/MapComponent";
 import { GeoJSON } from "ol/format";
@@ -29,21 +31,15 @@ import { Point } from "ol/geom";
 import { toLonLat } from "ol/proj";
 import moment from "moment";
 import "moment-timezone";
-
+import { LocationResult } from "./types";
-export interface LocationResult {
-  id: number;
-  type: string;
-  burst_incident: string;
-  leakage: number | null;
-  detect_time: string;
-  locate_result: string[] | null;
-}
 
 interface LocationResultsProps {
   results?: LocationResult[];
 }
 
-const LocationResults: React.FC<LocationResultsProps> = ({ results = [] }) => {
+const LocationResults: React.FC<LocationResultsProps> = ({
+  results = [],
+}) => {
   const [highlightLayer, setHighlightLayer] =
     useState<VectorLayer<VectorSource> | null>(null);
   const [highlightFeatures, setHighlightFeatures] = useState<Feature[]>([]);
@@ -56,14 +52,14 @@ const LocationResults: React.FC<LocationResultsProps> = ({ results = [] }) => {
 
   const handleLocatePipes = (pipeIds: string[]) => {
     if (pipeIds.length > 0) {
-      queryFeaturesByIds(pipeIds).then((features) => {
+      queryFeaturesByIds(pipeIds, "geo_pipes_mat").then((features) => {
         if (features.length > 0) {
           // 设置高亮要素
           setHighlightFeatures(features);
           // 将 OpenLayers Feature 转换为 GeoJSON Feature
           const geojsonFormat = new GeoJSON();
           const geojsonFeatures = features.map((feature) =>
-            geojsonFormat.writeFeatureObject(feature)
+            geojsonFormat.writeFeatureObject(feature),
           );
 
           const extent = bbox(featureCollection(geojsonFeatures as any));
@@ -103,7 +99,7 @@ const LocationResults: React.FC<LocationResultsProps> = ({ results = [] }) => {
             width: 3,
             lineDash: [15, 10],
           }),
-        })
+        }),
       );
       const geometry = feature.getGeometry();
       const lineCoords =
@@ -130,7 +126,7 @@ const LocationResults: React.FC<LocationResultsProps> = ({ results = [] }) => {
               scale: 0.2,
               anchor: [0.5, 1],
             }),
-          })
+          }),
         );
       }
       return styles;
@@ -251,7 +247,9 @@ const LocationResults: React.FC<LocationResultsProps> = ({ results = [] }) => {
                   {result.burst_incident}
                 </Typography>
                 <Chip
-                  label={result.type}
+                  label={
+                    result.type === "burst_analysis" ? "爆管模拟" : result.type
+                  }
                   size="small"
                   color="primary"
                   variant="outlined"
@@ -347,6 +345,7 @@ const LocationResults: React.FC<LocationResultsProps> = ({ results = [] }) => {
                   >
                     管段列表
                   </Typography>
+                  <Box className="flex items-center gap-2">
                     <Tooltip title="定位所有管道">
                       <IconButton
                         size="small"
@@ -363,12 +362,19 @@ const LocationResults: React.FC<LocationResultsProps> = ({ results = [] }) => {
                       </IconButton>
                     </Tooltip>
                   </Box>
+                </Box>
                 <Box className="grid grid-cols-2 gap-2">
                   {result.locate_result.map((pipeId, idx) => (
                     <Box
                       key={idx}
                       className="bg-gradient-to-r from-blue-50 to-white rounded-lg px-3 py-2 border border-blue-200 hover:border-blue-400 hover:shadow-md transition-all cursor-pointer group"
                       onClick={() => handleLocatePipes([pipeId])}
+                      sx={{
+                        "&:active": {
+                          transform: "scale(0.98)",
+                          boxShadow: "0 1px 2px rgba(25, 118, 210, 0.2)",
+                        },
+                      }}
                     >
                       <Box className="flex items-center justify-between">
                         <Typography
@@ -377,10 +383,24 @@ const LocationResults: React.FC<LocationResultsProps> = ({ results = [] }) => {
                         >
                           {pipeId}
                         </Typography>
-                        <LocationIcon
+                        <Box className="flex items-center gap-1">
-                          sx={{ fontSize: "1rem" }}
+                          {/* <Tooltip title="定位管段">
-                          className="text-blue-400 group-hover:text-blue-600 transition-colors"
+                            <IconButton
-                        />
+                              size="small"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                handleLocatePipes([pipeId]);
+                              }}
+                              sx={{
+                                "&:hover": {
+                                  backgroundColor: "rgba(37, 125, 212, 0.1)",
+                                },
+                              }}
+                            >
+                              <LocationIcon sx={{ fontSize: "1rem" }} />
+                            </IconButton>
+                          </Tooltip> */}
+                        </Box>
                       </Box>
                     </Box>
                   ))}

src/components/olmap/BurstPipeAnalysis/SchemeQuery.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import ReactDOM from "react-dom"; // 添加这行
 
 import {
@@ -49,36 +49,7 @@ import {
 import { Point } from "ol/geom";
 import { toLonLat } from "ol/proj";
 import Timeline from "@app/OlMap/Controls/Timeline";
-
+import { SchemaItem, SchemeRecord } from "./types";
-interface SchemeDetail {
-  burst_ID: string[];
-  burst_size: number[];
-  modify_total_duration: number;
-  modify_fixed_pump_pattern: any;
-  modify_valve_opening: any;
-  modify_variable_pump_pattern: any;
-}
-
-interface SchemeRecord {
-  id: number;
-  schemeName: string;
-  type: string;
-  user: string;
-  create_time: string;
-  startTime: string;
-  // 详情信息
-  schemeDetail?: SchemeDetail;
-}
-
-interface SchemaItem {
-  scheme_id: number;
-  scheme_name: string;
-  scheme_type: string;
-  username: string;
-  create_time: string;
-  scheme_start_time: string;
-  scheme_detail?: SchemeDetail;
-}
 
 interface SchemeQueryProps {
   schemes?: SchemeRecord[];
@@ -87,6 +58,8 @@ interface SchemeQueryProps {
   network?: string;
 }
 
+const SCHEME_TYPE = "burst_analysis";
+
 const SchemeQuery: React.FC<SchemeQueryProps> = ({
   schemes: externalSchemes,
   onSchemesChange,
@@ -114,8 +87,8 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
 
   const map = useMap();
   const data = useData();
-  if (!data) return null;
+  const { schemeName, setSchemeName } = data || {};
-  const { schemeName, setSchemeName } = data;
+
   // 使用外部提供的 schemes 或内部状态
   const schemes =
     externalSchemes !== undefined ? externalSchemes : internalSchemes;
@@ -127,13 +100,17 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
     return time.format("MM-DD");
   };
 
+  const filteredSchemes = useMemo(() => {
+    return schemes.filter((scheme) => scheme.type === SCHEME_TYPE);
+  }, [schemes]);
+
   const handleQuery = async () => {
     if (!queryAll && !queryDate) return;
 
     setLoading(true);
     try {
       const response = await axios.get(
-        `${config.BACKEND_URL}/api/v1/getallschemes/?network=${network}`
+        `${config.BACKEND_URL}/api/v1/getallschemes/?network=${network}`,
       );
       let filteredResults = response.data;
 
@@ -154,7 +131,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
           create_time: item.create_time,
           startTime: item.scheme_start_time,
           schemeDetail: item.scheme_detail,
-        }))
+        })),
       );
 
       if (filteredResults.length === 0) {
@@ -180,14 +157,14 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
 
   const handleLocatePipes = (pipeIds: string[]) => {
     if (pipeIds.length > 0) {
-      queryFeaturesByIds(pipeIds).then((features) => {
+      queryFeaturesByIds(pipeIds, "geo_pipes_mat").then((features) => {
         if (features.length > 0) {
           // 设置高亮要素
           setHighlightFeatures(features);
           // 将 OpenLayers Feature 转换为 GeoJSON Feature
           const geojsonFormat = new GeoJSON();
           const geojsonFeatures = features.map((feature) =>
-            geojsonFormat.writeFeatureObject(feature)
+            geojsonFormat.writeFeatureObject(feature),
           );
 
           const extent = bbox(featureCollection(geojsonFeatures as any));
@@ -202,25 +179,24 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
 
   // 内部的方案查询函数
   const handleViewDetails = (id: number) => {
+    const scheme = filteredSchemes.find((s) => s.id === id);
+    if (!scheme) return;
+
     setShowTimeline(true);
     // 计算时间范围
-    const scheme = schemes.find((s) => s.id === id);
+    const schemeDate = scheme.startTime
-    const burstPipeIds = scheme?.schemeDetail?.burst_ID || [];
-    const schemeDate = scheme?.startTime
       ? new Date(scheme.startTime)
       : undefined;
-    if (scheme?.startTime && scheme.schemeDetail?.modify_total_duration) {
+    if (scheme.startTime && scheme.schemeDetail?.modify_total_duration) {
       const start = new Date(scheme.startTime);
       const end = new Date(
-        start.getTime() + scheme.schemeDetail.modify_total_duration * 1000
+        start.getTime() + scheme.schemeDetail.modify_total_duration * 1000,
       );
       setSelectedDate(schemeDate);
       setTimeRange({ start, end });
-      if (setSchemeName) {
-        setSchemeName(scheme.schemeName);
-      }
-      handleLocatePipes(burstPipeIds);
     }
+    setSchemeName?.(scheme.schemeName);
+    handleLocatePipes(scheme.schemeDetail?.burst_ID || []);
   };
 
   // 初始化管道图层和高亮图层
@@ -254,7 +230,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
             width: 3,
             lineDash: [15, 10],
           }),
-        })
+        }),
       );
       const geometry = feature.getGeometry();
       const lineCoords =
@@ -281,7 +257,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
               scale: 0.2,
               anchor: [0.5, 1],
             }),
-          })
+          }),
         );
       }
       return styles;
@@ -336,9 +312,9 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
             timeRange={timeRange}
             disableDateSelection={!!timeRange}
             schemeName={schemeName}
-            schemeType="burst_Analysis"
+            schemeType={SCHEME_TYPE}
           />,
-          mapContainer // 渲染到地图容器中，而不是 body
+          mapContainer, // 渲染到地图容器中，而不是 body
         )}
       <Box className="flex flex-col h-full">
         {/* 查询条件 - 单行布局 */}
@@ -391,7 +367,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
 
         {/* 结果列表 */}
         <Box className="flex-1 overflow-auto">
-          {schemes.length === 0 ? (
+          {filteredSchemes.length === 0 ? (
             <Box className="flex flex-col items-center justify-center h-full text-gray-400">
               <Box className="mb-4">
                 <svg
@@ -428,9 +404,9 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
           ) : (
             <Box className="space-y-2 p-2">
               <Typography variant="caption" className="text-gray-500 px-2">
-                共 {schemes.length} 条记录
+                共 {filteredSchemes.length} 条记录
               </Typography>
-              {schemes.map((scheme) => (
+              {filteredSchemes.map((scheme) => (
                 <Card
                   key={scheme.id}
                   variant="outlined"
@@ -449,7 +425,11 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
                             {scheme.schemeName}
                           </Typography>
                           <Chip
-                            label={scheme.type}
+                            label={
+                              scheme.type === "burst_analysis"
+                                ? "爆管模拟"
+                                : scheme.type
+                            }
                             size="small"
                             className="h-5"
                             color="primary"
@@ -475,7 +455,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
                             size="small"
                             onClick={() =>
                               setExpandedId(
-                                expandedId === scheme.id ? null : scheme.id
+                                expandedId === scheme.id ? null : scheme.id,
                               )
                             }
                             color="primary"
@@ -484,7 +464,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
                             <InfoIcon fontSize="small" />
                           </IconButton>
                         </Tooltip>
-                        <Tooltip title="定位">
+                        <Tooltip title="查看定位结果">
                           <IconButton
                             size="small"
                             onClick={() => onLocate?.(scheme)}
@@ -528,7 +508,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
                                         >
                                           {pipeId}
                                         </Link>
-                                      )
+                                      ),
                                     )
                                   ) : (
                                     <Typography
@@ -618,7 +598,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
                                   className="font-medium text-gray-900"
                                 >
                                   {moment(scheme.create_time).format(
-                                    "YYYY-MM-DD HH:mm"
+                                    "YYYY-MM-DD HH:mm",
                                   )}
                                 </Typography>
                               </Box>
@@ -634,7 +614,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
                                   className="font-medium text-gray-900"
                                 >
                                   {moment(scheme.startTime).format(
-                                    "YYYY-MM-DD HH:mm"
+                                    "YYYY-MM-DD HH:mm",
                                   )}
                                 </Typography>
                               </Box>
@@ -652,7 +632,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
                               className="border-blue-600 text-blue-600 hover:bg-blue-50"
                               onClick={() =>
                                 handleLocatePipes?.(
-                                  scheme.schemeDetail!.burst_ID
+                                  scheme.schemeDetail!.burst_ID,
                                 )
                               }
                               sx={{

src/components/olmap/BurstPipeAnalysis/types.ts

@@ -0,0 +1,46 @@
+export interface SchemeDetail {
+  burst_ID: string[];
+  burst_size: number[];
+  modify_total_duration: number;
+  modify_fixed_pump_pattern: any;
+  modify_valve_opening: any;
+  modify_variable_pump_pattern: any;
+}
+
+export interface SchemeRecord {
+  id: number;
+  schemeName: string;
+  type: string;
+  user: string;
+  create_time: string;
+  startTime: string;
+  // 详情信息
+  schemeDetail?: SchemeDetail;
+}
+
+export interface SchemaItem {
+  scheme_id: number;
+  scheme_name: string;
+  scheme_type: string;
+  username: string;
+  create_time: string;
+  scheme_start_time: string;
+  scheme_detail?: SchemeDetail;
+}
+
+export interface LocationResult {
+  id: number;
+  type: string;
+  burst_incident: string;
+  leakage: number | null;
+  detect_time: string;
+  locate_result: string[] | null;
+}
+
+export interface ValveIsolationResult {
+  accident_elements: string[];
+  affected_nodes: string[];
+  must_close_valves: string[];
+  optional_valves: string[];
+  isolatable: boolean;
+}

src/components/olmap/ContaminantSimulation/AnalysisParameters.tsx

@@ -22,7 +22,7 @@ import { config, NETWORK_NAME } from "@/config/config";
 import { useMap } from "@app/OlMap/MapComponent";
 import VectorLayer from "ol/layer/Vector";
 import VectorSource from "ol/source/Vector";
-import { Style, Stroke, Fill, Circle as CircleStyle } from "ol/style";
+import { Style, Stroke, Fill, Circle as CircleStyle, Icon } from "ol/style";
 import Feature from "ol/Feature";
 import { handleMapClickSelectFeatures as mapClickSelectFeatures } from "@/utils/mapQueryService";
 
@@ -31,10 +31,13 @@ const AnalysisParameters: React.FC = () => {
   const { open } = useNotification();
 
   const network = NETWORK_NAME;
+  const [schemeName, setSchemeName] = useState<string>(
+    "WQ_" + new Date().getTime(),
+  );
   const [startTime, setStartTime] = useState<Dayjs | null>(dayjs(new Date()));
   const [sourceNode, setSourceNode] = useState<string>("");
-  const [concentration, setConcentration] = useState<number>(1);
+  const [concentration, setConcentration] = useState<number>(100);
-  const [duration, setDuration] = useState<number>(900);
+  const [duration, setDuration] = useState<number>(3600);
   const [pattern, setPattern] = useState<string>("");
   const [isSelecting, setIsSelecting] = useState<boolean>(false);
   const [submitting, setSubmitting] = useState<boolean>(false);
@@ -42,7 +45,7 @@ const AnalysisParameters: React.FC = () => {
   const [highlightLayer, setHighlightLayer] =
     useState<VectorLayer<VectorSource> | null>(null);
   const [highlightFeature, setHighlightFeature] = useState<Feature | null>(
-    null
+    null,
   );
 
   const isFormValid = useMemo(() => {
@@ -51,20 +54,41 @@ const AnalysisParameters: React.FC = () => {
       Boolean(startTime) &&
       Boolean(sourceNode) &&
       concentration > 0 &&
-      duration > 0
+      duration > 0 &&
+      schemeName.trim() !== ""
     );
-  }, [network, startTime, sourceNode, concentration, duration]);
+  }, [network, startTime, sourceNode, concentration, duration, schemeName]);
 
   useEffect(() => {
     if (!map) return;
 
-    const sourceStyle = new Style({
+    const themeColor = "rgba(3, 168, 107"; // #03a86b
+
+    const sourceStyle = [
+      // 外层扩散光圈
+      new Style({
         image: new CircleStyle({
-        radius: 10,
+          radius: 12,
-        fill: new Fill({ color: "rgba(37, 125, 212, 0.35)" }),
+          fill: new Fill({ color: `${themeColor}, 0.2)` }),
-        stroke: new Stroke({ color: "rgba(37, 125, 212, 1)", width: 3 }),
         }),
-    });
+      }),
+      // 中层扩散背景
+      new Style({
+        image: new CircleStyle({
+          radius: 8,
+          stroke: new Stroke({ color: `${themeColor}, 0.5)`, width: 2 }),
+          fill: new Fill({ color: `${themeColor}, 0.3)` }),
+        }),
+      }),
+      // 上层图标
+      new Style({
+        image: new Icon({
+          src: "/icons/contaminant_source.svg",
+          scale: 0.2,
+          anchor: [0.5, 1],
+        }),
+      }),
+    ];
 
     const layer = new VectorLayer({
       source: new VectorSource(),
@@ -117,7 +141,7 @@ const AnalysisParameters: React.FC = () => {
       setIsSelecting(false);
       map.un("click", handleMapClickSelectFeatures);
     },
-    [map, open]
+    [map, open],
   );
 
   const handleStartSelection = () => {
@@ -146,15 +170,19 @@ const AnalysisParameters: React.FC = () => {
       message: "方案提交分析中",
       undoableTimeout: 3,
     });
-
+    // 格式化开始时间，去除秒部分
+    const start_time = startTime
+      ? startTime.format("YYYY-MM-DDTHH:mm:00Z")
+      : "";
     try {
       const params = {
         network,
-        start_time: startTime.toISOString(),
+        start_time: start_time,
         source: sourceNode,
         concentration,
         duration,
         pattern: pattern || undefined,
+        scheme_name: schemeName,
       };
 
       await axios.get(`${config.BACKEND_URL}/api/v1/contaminant_simulation/`, {
@@ -297,13 +325,14 @@ const AnalysisParameters: React.FC = () => {
 
       <Box className="mb-4">
         <Typography variant="subtitle2" className="mb-2 font-medium">
-          管网名称
+          方案名称
         </Typography>
         <TextField
           fullWidth
           size="small"
-          value={network}
+          value={schemeName}
-          disabled
+          onChange={(e) => setSchemeName(e.target.value)}
+          placeholder="输入方案名称"
         />
       </Box>
 

src/components/olmap/ContaminantSimulation/SchemeQuery.tsx

@@ -31,24 +31,36 @@ import { useNotification } from "@refinedev/core";
 import { config, NETWORK_NAME } from "@config/config";
 import { queryFeaturesByIds } from "@/utils/mapQueryService";
 import { useData, useMap } from "@app/OlMap/MapComponent";
+import { GeoJSON } from "ol/format";
+import VectorLayer from "ol/layer/Vector";
+import VectorSource from "ol/source/Vector";
+import { Style, Icon, Circle, Fill, Stroke } from "ol/style";
+import Feature from "ol/Feature";
+import { bbox, featureCollection } from "@turf/turf";
 import Timeline from "@app/OlMap/Controls/Timeline";
 import { ContaminantSchemaItem, ContaminantSchemeRecord } from "./types";
 
 interface SchemeQueryProps {
   schemes?: ContaminantSchemeRecord[];
   onSchemesChange?: (schemes: ContaminantSchemeRecord[]) => void;
+  onViewResults?: () => void;
   network?: string;
 }
 
-const SCHEME_TYPE = "contaminant_simulation";
+const SCHEME_TYPE = "contaminant_analysis";
 
 const SchemeQuery: React.FC<SchemeQueryProps> = ({
   schemes: externalSchemes,
   onSchemesChange,
+  onViewResults,
   network = NETWORK_NAME,
 }) => {
   const [queryAll, setQueryAll] = useState<boolean>(true);
   const [queryDate, setQueryDate] = useState<Dayjs | null>(dayjs(new Date()));
+  const [highlightLayer, setHighlightLayer] =
+    useState<VectorLayer<VectorSource> | null>(null);
+  const [highlightFeatures, setHighlightFeatures] = useState<Feature[]>([]);
+
   const [showTimeline, setShowTimeline] = useState(false);
   const [selectedDate, setSelectedDate] = useState<Date | undefined>(undefined);
   const [timeRange, setTimeRange] = useState<
@@ -64,8 +76,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
   const { open } = useNotification();
   const map = useMap();
   const data = useData();
-  const { schemeName, setSchemeName, setJunctionText, setPipeText } =
+  const { schemeName, setSchemeName } = data || {};
-    data || {};
 
   const schemes =
     externalSchemes !== undefined ? externalSchemes : internalSchemes;
@@ -79,6 +90,83 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
     }
   }, [map]);
 
+  // 初始化高亮图层
+  useEffect(() => {
+    if (!map) return;
+
+    const themeColor = "rgba(3, 168, 107"; // #03a86b
+
+    const sourceStyle = [
+      // 外层扩散光圈
+      new Style({
+        image: new Circle({
+          radius: 12,
+          fill: new Fill({
+            color: `${themeColor}, 0.2)`,
+          }),
+        }),
+      }),
+      // 中层扩散背景
+      new Style({
+        image: new Circle({
+          radius: 8,
+          stroke: new Stroke({
+            color: `${themeColor}, 0.5)`,
+            width: 2,
+          }),
+          fill: new Fill({
+            color: `${themeColor}, 0.3)`,
+          }),
+        }),
+      }),
+      // 上层图标
+      new Style({
+        image: new Icon({
+          src: "/icons/contaminant_source.svg",
+          scale: 0.2,
+          anchor: [0.5, 1],
+        }),
+      }),
+    ];
+
+    const highlightLayer = new VectorLayer({
+      source: new VectorSource(),
+      style: sourceStyle,
+      maxZoom: 24,
+      minZoom: 12,
+      properties: {
+        name: "污染源高亮",
+        value: "contaminant_source_highlight",
+      },
+    });
+
+    map.addLayer(highlightLayer);
+    setHighlightLayer(highlightLayer);
+
+    return () => {
+      map.removeLayer(highlightLayer);
+    };
+  }, [map]);
+
+  // 高亮要素的函数
+  useEffect(() => {
+    if (!highlightLayer) {
+      return;
+    }
+    const source = highlightLayer.getSource();
+    if (!source) {
+      return;
+    }
+    // 清除之前的高亮
+    source.clear();
+    // 添加新的高亮要素
+    highlightFeatures.forEach((feature) => {
+      if (feature instanceof Feature) {
+        source.addFeature(feature);
+      }
+    });
+  }, [highlightFeatures, highlightLayer]);
+
   const formatTime = (timeStr: string) => {
     const time = moment(timeStr);
     return time.format("MM-DD");
@@ -93,16 +181,18 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
     setLoading(true);
     try {
       const response = await axios.get(
-        `${config.BACKEND_URL}/api/v1/getallschemes/?network=${network}`
+        `${config.BACKEND_URL}/api/v1/getallschemes/?network=${network}`,
       );
       let filteredResults = response.data;
 
       if (!queryAll) {
         const formattedDate = queryDate!.format("YYYY-MM-DD");
-        filteredResults = response.data.filter((item: ContaminantSchemaItem) => {
+        filteredResults = response.data.filter(
+          (item: ContaminantSchemaItem) => {
             const itemDate = moment(item.create_time).format("YYYY-MM-DD");
             return itemDate === formattedDate;
-        });
+          },
+        );
       }
 
       setSchemes(
@@ -114,7 +204,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
           create_time: item.create_time,
           startTime: item.scheme_start_time,
           schemeDetail: item.scheme_detail,
-        }))
+        })),
       );
 
       if (filteredResults.length === 0) {
@@ -138,11 +228,20 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
     }
   };
 
-  const handleLocateSource = (sourceId?: string) => {
+  const handleLocateSource = (sourceIds: string[]) => {
-    if (!sourceId) return;
+    if (sourceIds.length > 0) {
-    queryFeaturesByIds([sourceId], "geo_junctions_mat").then((features) => {
+      queryFeaturesByIds(sourceIds, "geo_junctions_mat").then((features) => {
         if (features.length > 0) {
-        const extent = features[0].getGeometry()?.getExtent();
+          // 设置高亮要素
+          setHighlightFeatures(features);
+          // 将 OpenLayers Feature 转换为 GeoJSON Feature
+          const geojsonFormat = new GeoJSON();
+          const geojsonFeatures = features.map((feature) =>
+            geojsonFormat.writeFeatureObject(feature),
+          );
+
+          const extent = bbox(featureCollection(geojsonFeatures as any));
+
           if (extent) {
             map?.getView().fit(extent, {
               maxZoom: 18,
@@ -151,6 +250,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
           }
         }
       });
+    }
   };
 
   const handleViewDetails = (id: number) => {
@@ -158,17 +258,21 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
     if (!scheme) return;
 
     setShowTimeline(true);
-    const schemeDate = scheme.startTime ? new Date(scheme.startTime) : undefined;
+    const schemeDate = scheme.startTime
+      ? new Date(scheme.startTime)
+      : undefined;
     if (scheme.startTime && scheme.schemeDetail?.duration) {
       const start = new Date(scheme.startTime);
-      const end = new Date(start.getTime() + scheme.schemeDetail.duration * 1000);
+      const end = new Date(
+        start.getTime() + scheme.schemeDetail.duration * 1000,
+      );
       setSelectedDate(schemeDate);
       setTimeRange({ start, end });
     }
     setSchemeName?.(scheme.schemeName);
-    setJunctionText?.("quality");
+    if (scheme.schemeDetail?.source) {
-    setPipeText?.("quality");
+      handleLocateSource([scheme.schemeDetail.source]);
-    handleLocateSource(scheme.schemeDetail?.source);
+    }
   };
 
   return (
@@ -183,7 +287,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
             schemeName={schemeName}
             schemeType={SCHEME_TYPE}
           />,
-          mapContainer
+          mapContainer,
         )}
       <Box className="flex flex-col h-full">
         <Box className="mb-2 p-2 bg-gray-50 rounded">
@@ -291,7 +395,11 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
                             {scheme.schemeName}
                           </Typography>
                           <Chip
-                            label={scheme.type}
+                            label={
+                              scheme.type === "contaminant_analysis"
+                                ? "水质模拟"
+                                : scheme.type
+                            }
                             size="small"
                             className="h-5"
                             color="primary"
@@ -302,18 +410,21 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
                           variant="caption"
                           className="text-gray-500 block"
                         >
-                          ID: {scheme.id} · 日期: {formatTime(scheme.create_time)}
+                          ID: {scheme.id} · 日期:{" "}
+                          {formatTime(scheme.create_time)}
                         </Typography>
                       </Box>
                       <Box className="flex gap-1 ml-2">
                         <Tooltip
-                          title={expandedId === scheme.id ? "收起详情" : "查看详情"}
+                          title={
+                            expandedId === scheme.id ? "收起详情" : "查看详情"
+                          }
                         >
                           <IconButton
                             size="small"
                             onClick={() =>
                               setExpandedId(
-                                expandedId === scheme.id ? null : scheme.id
+                                expandedId === scheme.id ? null : scheme.id,
                               )
                             }
                             color="primary"
@@ -322,16 +433,19 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
                             <InfoIcon fontSize="small" />
                           </IconButton>
                         </Tooltip>
-                        <Tooltip title="定位污染源">
+                        {/* <Tooltip title="定位污染源">
                           <IconButton
                             size="small"
-                            onClick={() => handleLocateSource(scheme.schemeDetail?.source)}
+                            onClick={() =>
+                              scheme.schemeDetail?.source &&
+                              handleLocateSource([scheme.schemeDetail.source])
+                            }
                             color="primary"
                             className="p-1"
                           >
                             <LocationIcon fontSize="small" />
                           </IconButton>
-                        </Tooltip>
+                        </Tooltip> */}
                       </Box>
                     </Box>
 
@@ -355,7 +469,9 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
                                       className="font-medium text-blue-600 hover:text-blue-800 underline cursor-pointer"
                                       onClick={(e) => {
                                         e.preventDefault();
-                                        handleLocateSource(scheme.schemeDetail?.source);
+                                        handleLocateSource([
+                                          scheme.schemeDetail!.source!,
+                                        ]);
                                       }}
                                     >
                                       {scheme.schemeDetail.source}
@@ -381,7 +497,8 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
                                   variant="caption"
                                   className="font-medium text-gray-900"
                                 >
-                                  {scheme.schemeDetail?.concentration ?? "N/A"} mg/L
+                                  {scheme.schemeDetail?.concentration ?? "N/A"}{" "}
+                                  mg/L
                                 </Typography>
                               </Box>
                               <Box className="flex items-center gap-2">
@@ -443,7 +560,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
                                   className="font-medium text-gray-900"
                                 >
                                   {moment(scheme.create_time).format(
-                                    "YYYY-MM-DD HH:mm"
+                                    "YYYY-MM-DD HH:mm",
                                   )}
                                 </Typography>
                               </Box>
@@ -459,7 +576,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
                                   className="font-medium text-gray-900"
                                 >
                                   {moment(scheme.startTime).format(
-                                    "YYYY-MM-DD HH:mm"
+                                    "YYYY-MM-DD HH:mm",
                                   )}
                                 </Typography>
                               </Box>
@@ -473,13 +590,16 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
                             fullWidth
                             size="small"
                             className="border-blue-600 text-blue-600 hover:bg-blue-50"
-                            onClick={() => handleLocateSource(scheme.schemeDetail?.source)}
+                            onClick={() =>
+                              scheme.schemeDetail?.source &&
+                              handleLocateSource([scheme.schemeDetail.source])
+                            }
                             sx={{
                               textTransform: "none",
                               fontWeight: 500,
                             }}
                           >
-                            定位污染源
+                            定位全部污染源
                           </Button>
                           <Button
                             variant="contained"

src/components/olmap/ContaminantSimulation/types.ts

@@ -3,7 +3,6 @@ export interface ContaminantSchemeDetail {
   concentration: number;
   duration: number;
   pattern?: string | null;
-  start_time?: string;
 }
 
 export interface ContaminantSchemeRecord {

src/components/olmap/HealthRiskAnalysis/Timeline.tsx

@@ -150,7 +150,6 @@ const Timeline: React.FC<TimelineProps> = ({
 
   const handleStop = useCallback(() => {
     setIsPlaying(false);
-    setSelectedDateTime(getRoundedDate(new Date()));
     if (intervalRef.current) {
       clearInterval(intervalRef.current);
       intervalRef.current = null;
@@ -344,11 +343,11 @@ const Timeline: React.FC<TimelineProps> = ({
       colorCases.push(["<=", ["get", "healthRisk"], breakValue], colorStr);
       widthCases.push(["<=", ["get", "healthRisk"], breakValue], width);
     });
-    console.log(
+    // console.log(
-      `应用健康风险样式，年份: ${currentYear}, 分段: ${breaks.length}`,
+    //   `应用健康风险样式，年份: ${currentYear}, 分段: ${breaks.length}`,
-    );
+    // );
-    console.log("颜色表达式:", colorCases);
+    // console.log("颜色表达式:", colorCases);
-    console.log("宽度表达式:", widthCases);
+    // console.log("宽度表达式:", widthCases);
     // 应用样式到图层
     pipeLayer.setStyle({
       "stroke-color": ["case", ...colorCases, "rgba(128, 128, 128, 1)"],
@@ -435,16 +434,19 @@ const Timeline: React.FC<TimelineProps> = ({
           message: `模拟预测完成，获取到 ${results.length} 条管道数据`,
         });
       } else {
+        // 读取后端 HTTPException 返回的 detail 信息
+        const errorData = await response.json().catch(() => ({}));
+        const errorMessage = errorData.detail || "模拟预测失败";
         open?.({
           type: "error",
-          message: "模拟预测失败",
+          message: errorMessage,
         });
       }
-    } catch (error) {
+    } catch (error: any) {
       console.error("Simulation prediction failed:", error);
       open?.({
         type: "error",
-        message: "模拟预测时发生错误",
+        message: `模拟预测时发生错误: ${error.message || "未知错误"}`,
       });
     } finally {
       setIsPredicting(false);

src/components/olmap/MonitoringPlaceOptimization/SchemeQuery.tsx

@@ -141,6 +141,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
       }
     });
   }, [highlightFeatures]);
+  
   // 查询方案
   const handleQuery = async () => {
     if (!queryAll && !queryDate) return;
@@ -148,7 +149,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
     setLoading(true);
     try {
       const response = await axios.get(
-        `${config.BACKEND_URL}/api/v1/getallsensorplacements/?network=${network}`
+        `${config.BACKEND_URL}/api/v1/getallsensorplacements/?network=${network}`,
       );
 
       let filteredResults = response.data;
@@ -171,7 +172,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
           user: item.username,
           create_time: item.create_time,
           sensorLocation: item.sensor_location,
-        }))
+        })),
       );
 
       if (filteredResults.length === 0) {
@@ -206,14 +207,14 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
     }
 
     if (sensorIds.length > 0) {
-      queryFeaturesByIds(sensorIds).then((features) => {
+      queryFeaturesByIds(sensorIds, "geo_junctions_mat").then((features) => {
         if (features.length > 0) {
           // 设置高亮要素
           setHighlightFeatures(features);
           // 将 OpenLayers Feature 转换为 GeoJSON Feature
           const geojsonFormat = new GeoJSON();
           const geojsonFeatures = features.map((feature) =>
-            geojsonFormat.writeFeatureObject(feature)
+            geojsonFormat.writeFeatureObject(feature),
           );
 
           const extent = bbox(featureCollection(geojsonFeatures as any));
@@ -376,7 +377,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
                           size="small"
                           onClick={() =>
                             setExpandedId(
-                              expandedId === scheme.id ? null : scheme.id
+                              expandedId === scheme.id ? null : scheme.id,
                             )
                           }
                           color="primary"
@@ -385,7 +386,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
                           <InfoIcon fontSize="small" />
                         </IconButton>
                       </Tooltip>
-                      <Tooltip title="定位">
+                      {/* <Tooltip title="定位">
                         <IconButton
                           size="small"
                           onClick={() => onLocate?.(scheme.id)}
@@ -394,7 +395,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
                         >
                           <LocationIcon fontSize="small" />
                         </IconButton>
-                      </Tooltip>
+                      </Tooltip> */}
                     </Box>
                   </Box>
 
@@ -466,7 +467,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
                                 className="font-medium text-gray-900"
                               >
                                 {moment(scheme.create_time).format(
-                                  "YYYY-MM-DD HH:mm"
+                                  "YYYY-MM-DD HH:mm",
                                 )}
                               </Typography>
                             </Box>
@@ -500,7 +501,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
                                     >
                                       {sensorId}
                                     </Link>
-                                  )
+                                  ),
                                 )}
                               </Box>
                             </Box>

src/components/olmap/SCADADeviceList.tsx

@@ -124,7 +124,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
   const [isSelecting, setIsSelecting] = useState<boolean>(false);
   const [internalSelection, setInternalSelection] = useState<string[]>([]);
   const [pendingSelection, setPendingSelection] = useState<string[] | null>(
-    null
+    null,
   );
   const [internalDevices, setInternalDevices] = useState<SCADADevice[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
@@ -142,7 +142,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
   // 清洗对话框状态
   const [cleanDialogOpen, setCleanDialogOpen] = useState<boolean>(false);
   const [cleanStartTime, setCleanStartTime] = useState<Dayjs>(() =>
-    dayjs().subtract(1, "week")
+    dayjs().subtract(1, "week"),
   );
   const [cleanEndTime, setCleanEndTime] = useState<Dayjs>(() => dayjs());
   const [timeRangeError, setTimeRangeError] = useState<string>("");
@@ -199,7 +199,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
           status: STATUS_OPTIONS[Math.floor(Math.random() * 4)],
           coordinates: (feature.getGeometry() as Point)?.getCoordinates() as [
             number,
-            number
+            number,
           ],
           properties: feature.getProperties(),
         }));
@@ -218,7 +218,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
   // 获取设备类型列表
   const deviceTypes = useMemo(() => {
     const types = Array.from(
-      new Set(effectiveDevices.map((device) => device.type))
+      new Set(effectiveDevices.map((device) => device.type)),
     );
     return types.sort();
   }, [effectiveDevices]);
@@ -406,7 +406,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
               color: `rgba(255, 255, 0, ${(opacity * 0.3).toFixed(3)})`,
             }),
           }),
-        })
+        }),
       );
       vectorContext.drawGeometry(flashGeom);
 
@@ -423,7 +423,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
               width: 2,
             }),
           }),
-        })
+        }),
       );
       vectorContext.drawGeometry(flashGeom);
 
@@ -436,7 +436,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
               color: `rgba(255, 255, 255, ${opacity.toFixed(3)})`,
             }),
           }),
-        })
+        }),
       );
       vectorContext.drawGeometry(flashGeom);
 
@@ -519,7 +519,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
       // 更新高亮要素
       setHighlightFeatures((prev) => {
         const existingIndex = prev.findIndex(
-          (f) => f.getProperties().id === featureId
+          (f) => f.getProperties().id === featureId,
         );
         if (existingIndex !== -1) {
           // 如果已存在,移除
@@ -530,7 +530,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
         }
       });
     },
-    [map, effectiveDevices, multiSelect, open]
+    [map, effectiveDevices, multiSelect, open],
   );
 
   // 处理清洗对话框关闭
@@ -561,7 +561,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
         setTimeRangeError(error);
       }
     },
-    [cleanEndTime, validateTimeRange]
+    [cleanEndTime, validateTimeRange],
   );
 
   // 处理结束时间变化
@@ -574,7 +574,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
         setTimeRangeError(error);
       }
     },
-    [cleanStartTime, validateTimeRange]
+    [cleanStartTime, validateTimeRange],
   );
 
   // 确认清洗
@@ -608,7 +608,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
     open?.({
       type: "progress",
       message: "正在清洗数据，请稍候...",
-      undoableTimeout: 3000,
+      undoableTimeout: 3,
     });
 
     try {
@@ -617,7 +617,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
 
       // 调用后端清洗接口
       const response = await axios.post(
-        `${config.BACKEND_URL}/api/v1/composite/clean-scada?device_ids=all&start_time=${startTime}&end_time=${endTime}`
+        `${config.BACKEND_URL}/api/v1/composite/clean-scada?device_ids=all&start_time=${startTime}&end_time=${endTime}`,
       );
 
       // 处理成功响应
@@ -1103,7 +1103,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
                               variant="caption"
                               sx={{
                                 color: `${getStatusColor(
-                                  device.status.value
+                                  device.status.value,
                                 )}.main`,
                                 fontWeight: "bold",
                                 fontSize: 16,
@@ -1134,7 +1134,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
                                 />
                                 <Chip
                                   label={`可靠度: ${getReliability(
-                                    device.reliability
+                                    device.reliability,
                                   )}`}
                                   size="small"
                                   variant="outlined"
@@ -1156,7 +1156,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
                                 >
                                   传输频率:{" "}
                                   {getTransmissionFrequency(
-                                    device.transmission_frequency
+                                    device.transmission_frequency,
                                   )}{" "}
                                   分钟
                                 </Typography>

src/utils/parseColor.test.js

@@ -0,0 +1,21 @@
+const { parseColor } = require('./parseColor');
+
+describe('parseColor', () => {
+    it('should parse hex color', () => {
+        expect(parseColor('#FF0000')).toEqual({ r: 255, g: 0, b: 0 });
+        expect(parseColor('00FF00')).toEqual({ r: 0, g: 255, b: 0 });
+    });
+
+    it('should parse rgb color', () => {
+        expect(parseColor('rgb(0, 0, 255)')).toEqual({ r: 0, g: 0, b: 255, a: 1 });
+    });
+
+    it('should parse rgba color', () => {
+        expect(parseColor('rgba(0, 0, 255, 0.5)')).toEqual({ r: 0, g: 0, b: 255, a: 0.5 });
+    });
+
+    it('should default alpha to 1 if not provided in rgba-like pattern', () => {
+        // The regex supports optional alpha
+        expect(parseColor('rgba(0, 0, 255)')).toEqual({ r: 0, g: 0, b: 255, a: 1 });
+    });
+});

tsconfig.json

@@ -16,18 +16,45 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "plugins": [
       {
         "name": "next"
       }
     ],
     "paths": {
-      "@*": [
-        "./src/*"
-      ],
       "@pages/*": [
         "./pages/*"
+      ],
+      "@app/*": [
+        "./src/app/*"
+      ],
+      "@assets/*": [
+        "./src/assets/*"
+      ],
+      "@components/*": [
+        "./src/components/*"
+      ],
+      "@config/*": [
+        "./src/config/*"
+      ],
+      "@contexts/*": [
+        "./src/contexts/*"
+      ],
+      "@interfaces/*": [
+        "./src/interfaces/*"
+      ],
+      "@libs/*": [
+        "./src/libs/*"
+      ],
+      "@providers/*": [
+        "./src/providers/*"
+      ],
+      "@utils/*": [
+        "./src/utils/*"
+      ],
+      "@/*": [
+        "./src/*"
       ]
     },
     "incremental": true
@@ -36,7 +63,8 @@
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
-    ".next/types/**/*.ts"
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
   ],
   "exclude": [
     "node_modules"