爆管分析页面，新增时间轴、工具栏，修改部分组件以满足页面功能需求

src/components/olmap/BurstPipeAnalysis/AnalysisParameters.tsx

@@ -18,13 +18,15 @@ import "dayjs/locale/zh-cn";
 import { useMap } from "@app/OlMap/MapComponent";
 import VectorLayer from "ol/layer/Vector";
 import VectorSource from "ol/source/Vector";
-import Style from "ol/style/Style";
-import Stroke from "ol/style/Stroke";
+import { Style, Stroke, Icon } from "ol/style";
 import { handleMapClickSelectFeatures as mapClickSelectFeatures } from "@/utils/mapQueryService";
-import Feature from "ol/Feature";
+import Feature, { FeatureLike } from "ol/Feature";
 import { useNotification } from "@refinedev/core";
 import axios from "axios";
 import { config, NETWORK_NAME } from "@/config/config";
+import { along, lineString, length, toMercator } from "@turf/turf";
+import { Point } from "ol/geom";
+import { toLonLat } from "ol/proj";
 
 interface PipePoint {
   id: string;
@@ -54,34 +56,65 @@ const AnalysisParameters: React.FC = () => {
   useEffect(() => {
     if (!map) return;
 
-    // 创建高亮图层
-    const highlightLayer = new VectorLayer({
-      source: new VectorSource(),
-      style: [
-        // 外层发光效果（底层）
+    const burstPipeStyle = function (feature: FeatureLike) {
+      const styles = [];
+      // 线条样式（底层发光，主线条，内层高亮线）
+      styles.push(
         new Style({
           stroke: new Stroke({
             color: "rgba(255, 0, 0, 0.3)",
             width: 12,
           }),
         }),
-        // 主线条 - 使用虚线表示爆管
         new Style({
           stroke: new Stroke({
-            color: "#ff0000",
+            color: "rgba(255, 0, 0, 1)",
             width: 6,
-            lineDash: [15, 10], // 虚线样式，表示管道损坏/爆管
-          }),
-        }),
-        // 内层高亮线
-        new Style({
-          stroke: new Stroke({
-            color: "#ff6666",
-            width: 3,
             lineDash: [15, 10],
           }),
         }),
-      ],
+        new Style({
+          stroke: new Stroke({
+            color: "rgba(255, 102, 102, 1)",
+            width: 3,
+            lineDash: [15, 10],
+          }),
+        })
+      );
+      const geometry = feature.getGeometry();
+      const lineCoords =
+        geometry?.getType() === "LineString"
+          ? (geometry as any).getCoordinates()
+          : null;
+      if (geometry) {
+        const lineCoordsWGS84 = lineCoords.map((coord: []) => {
+          const [lon, lat] = toLonLat(coord);
+          return [lon, lat];
+        });
+        // 计算中点
+        const lineStringFeature = lineString(lineCoordsWGS84);
+        const lineLength = length(lineStringFeature);
+        const midPoint = along(lineStringFeature, lineLength / 2).geometry
+          .coordinates;
+        // 在中点添加 icon 样式
+        const midPointMercator = toMercator(midPoint);
+        styles.push(
+          new Style({
+            geometry: new Point(midPointMercator),
+            image: new Icon({
+              src: "/icons/burst_pipe_icon.svg",
+              scale: 0.2,
+              anchor: [0.5, 1],
+            }),
+          })
+        );
+      }
+      return styles;
+    };
+    // 创建高亮图层
+    const highlightLayer = new VectorLayer({
+      source: new VectorSource(),
+      style: burstPipeStyle,
       properties: {
         name: "高亮管道",
         value: "highlight_pipeline",
@@ -132,7 +165,6 @@ const AnalysisParameters: React.FC = () => {
         )
         .map((feature) => {
           const properties = feature.getProperties();
-          console.log("管道属性:", feature, properties);
           return {
             id: properties.id,
             diameter: properties.diameter || 0,
@@ -210,6 +242,14 @@ const AnalysisParameters: React.FC = () => {
   const handleAnalyze = async () => {
     setAnalyzing(true);
 
+    // 显示处理中的通知
+    open?.({
+      key: "burst-analysis",
+      type: "progress",
+      message: "方案提交分析中",
+      undoableTimeout: 3,
+    });
+
     const burst_ID = pipePoints.map((pipe) => pipe.id);
     const burst_size = pipePoints.map((pipe) =>
       parseInt(pipe.area.toString(), 10)
@@ -240,8 +280,8 @@ const AnalysisParameters: React.FC = () => {
       open?.({
         key: "burst-analysis",
         type: "success",
-        message: "分析请求提交成功",
-        description: "方案已成功提交，正在进行分析",
+        message: "方案分析成功",
+        description: "方案分析完成，请在方案查询中查看结果。",
       });
     } catch (error) {
       console.error("分析请求失败:", error);
@@ -427,7 +467,7 @@ const AnalysisParameters: React.FC = () => {
           disabled={analyzing}
           className="bg-blue-600 hover:bg-blue-700"
         >
-          {analyzing ? "方案提交中..." : "方案分析"}
+          {analyzing ? "方案提交分析中..." : "方案分析"}
         </Button>
       </Box>
     </Box>