feat(workbench): align v2 GIS and SCADA API

src/features/workbench/hooks/use-workbench-map.ts

@@ -1,8 +1,11 @@
 import "maplibre-gl/dist/maplibre-gl.css";
 
-import maplibregl, { type Map as MapLibreMap, type MapSourceDataEvent } from "maplibre-gl";
-import { useEffect, useRef, useState, type RefObject } from "react";
+import type { FeatureCollection, Point } from "geojson";
+import maplibregl, { type GeoJSONSource, type Map as MapLibreMap, type MapSourceDataEvent } from "maplibre-gl";
+import { useCallback, useEffect, useRef, useState, type RefObject } from "react";
+import type { AccessTokenProvider } from "@/shared/auth/keycloak-auth";
 import { env } from "@/shared/config/env";
+import { fetchScadaDeviceCollection, type ScadaDevice } from "../api/scada-client";
 import type { DetailFeature } from "../types";
 import {
   SIMULATION_SOURCE_IDS,
@@ -20,11 +23,13 @@ import { createValueLabelLayers } from "../map/value-label";
 import { setSimulationLayersVisibility } from "../map/simulation-layers";
 import {
   AVAILABLE_WATER_NETWORK_SOURCE_IDS,
+  GEOSERVER_WATER_NETWORK_SOURCE_IDS,
   createBaseStyle,
   createWaterNetworkSources,
   WATER_NETWORK_GLOBAL_VIEW
 } from "../map/sources";
 import {
+  SCADA_SOURCE_ID,
   registerScadaImages,
   scadaBusinessLayers,
   scadaFallbackBusinessLayers,
@@ -46,6 +51,7 @@ type UseWorkbenchMapOptions = {
   impactVisible: boolean;
   onSelectFeature: (feature: DetailFeature) => void;
   selectedFeature: DetailFeature | null;
+  getAccessToken?: AccessTokenProvider;
 };
 
 type UseWorkbenchMapResult = {
@@ -53,6 +59,7 @@ type UseWorkbenchMapResult = {
   mapReady: boolean;
   mapError: string | null;
   sourceStatuses: WorkbenchSourceStatus[];
+  getScadaFeatures: (deviceIds?: string[], signal?: AbortSignal) => Promise<FeatureCollection<Point, ScadaDevice>>;
   fitNetworkBounds: () => void;
 };
 
@@ -68,6 +75,7 @@ export type WorkbenchSourceStatus = {
 const SOURCE_STATUS_LABELS: Record<string, string> = {
   "mapbox-base": "Mapbox 底图",
   "geoserver-mvt": "GeoServer MVT",
+  "scada-api": "SCADA API",
   "scada-icons": "SCADA 图标",
   "annotation-source": "业务标注源"
 };
@@ -76,7 +84,7 @@ const SOURCE_GROUP_BY_ID: Record<string, string> = {
   "mapbox-light": "mapbox-base",
   "mapbox-satellite": "mapbox-base",
   ...Object.fromEntries(
-    AVAILABLE_WATER_NETWORK_SOURCE_IDS.map((sourceId) => [sourceId, "geoserver-mvt"])
+    GEOSERVER_WATER_NETWORK_SOURCE_IDS.map((sourceId) => [sourceId, "geoserver-mvt"])
   ),
   [SIMULATION_SOURCE_IDS.impactArea]: "annotation-source",
   [SIMULATION_SOURCE_IDS.annotations]: "annotation-source"
@@ -86,13 +94,32 @@ export function useWorkbenchMap({
   containerRef,
   impactVisible,
   onSelectFeature,
-  selectedFeature
+  selectedFeature,
+  getAccessToken
 }: UseWorkbenchMapOptions): UseWorkbenchMapResult {
   const mapRef = useRef<MapLibreMap | null>(null);
   const impactVisibleRef = useRef(impactVisible);
   const [mapReady, setMapReady] = useState(false);
   const [mapError, setMapError] = useState<string | null>(null);
   const [sourceStatuses, setSourceStatuses] = useState<Record<string, WorkbenchSourceStatus>>({});
+  const scadaCollectionRef = useRef<FeatureCollection<Point, ScadaDevice>>({
+    type: "FeatureCollection",
+    features: []
+  });
+  const scadaLoadPromiseRef = useRef<Promise<FeatureCollection<Point, ScadaDevice>>>(
+    Promise.resolve(scadaCollectionRef.current)
+  );
+
+  const getScadaFeatures = useCallback(async (deviceIds?: string[], signal?: AbortSignal) => {
+    const collection = await scadaLoadPromiseRef.current;
+    if (signal?.aborted) throw new DOMException("The operation was aborted", "AbortError");
+    if (!deviceIds) return collection;
+    const selectedIds = new Set(deviceIds);
+    return {
+      type: "FeatureCollection" as const,
+      features: collection.features.filter((feature) => selectedIds.has(String(feature.id)))
+    };
+  }, []);
 
   useEffect(() => {
     impactVisibleRef.current = impactVisible;
@@ -104,6 +131,13 @@ export function useWorkbenchMap({
     }
 
     const mapboxToken = env.TJWATER_MAPBOX_ACCESS_TOKEN || undefined;
+    const scadaAbortController = new AbortController();
+    updateSourceStatus(setSourceStatuses, "scada-api", "loading", "正在通过API加载SCADA设备。");
+    const scadaLoadPromise = fetchScadaDeviceCollection(
+      getAccessToken,
+      scadaAbortController.signal
+    );
+    scadaLoadPromiseRef.current = scadaLoadPromise;
     const map = new maplibregl.Map({
       container: containerRef.current,
       style: createBaseStyle(mapboxToken),
@@ -118,8 +152,11 @@ export function useWorkbenchMap({
 
     map.on("load", async () => {
       map.resize();
+      (map.getSource(SCADA_SOURCE_ID) as GeoJSONSource | undefined)?.setData(
+        scadaCollectionRef.current
+      );
       const sources = createWaterNetworkSources();
-      AVAILABLE_WATER_NETWORK_SOURCE_IDS.forEach((sourceId) =>
+      GEOSERVER_WATER_NETWORK_SOURCE_IDS.forEach((sourceId) =>
         map.addSource(sourceId, sources[sourceId])
       );
       map.addSource(SIMULATION_SOURCE_IDS.impactArea, simulationSources.impactArea);
@@ -166,6 +203,25 @@ export function useWorkbenchMap({
       fitNetworkBounds(map, WATER_NETWORK_GLOBAL_VIEW);
     });
 
+    void scadaLoadPromise.then((collection) => {
+      scadaCollectionRef.current = collection;
+      (map.getSource(SCADA_SOURCE_ID) as GeoJSONSource | undefined)?.setData(collection);
+      updateSourceStatus(
+        setSourceStatuses,
+        "scada-api",
+        "online",
+        `已通过API加载 ${collection.features.length} 个SCADA设备。`
+      );
+    }).catch((error) => {
+      if (scadaAbortController.signal.aborted) return;
+      updateSourceStatus(
+        setSourceStatuses,
+        "scada-api",
+        "offline",
+        error instanceof Error ? error.message : "SCADA API加载失败。"
+      );
+    });
+
     let resizeFrame: number | null = null;
     const resizeMap = () => map.resize();
     const resizeObserver = new ResizeObserver(() => {
@@ -213,11 +269,12 @@ export function useWorkbenchMap({
         window.cancelAnimationFrame(resizeFrame);
       }
       resizeObserver.disconnect();
+      scadaAbortController.abort();
       map.remove();
       mapRef.current = null;
       delete window.__waterNetworkMap;
     };
-  }, [containerRef]);
+  }, [containerRef, getAccessToken]);
 
   useMapInteractions({
     mapRef,
@@ -244,6 +301,7 @@ export function useWorkbenchMap({
     mapReady,
     mapError,
     sourceStatuses: Object.values(sourceStatuses),
+    getScadaFeatures,
     fitNetworkBounds: fitToNetworkBounds
   };
 }
@@ -338,6 +396,12 @@ function getSourceStatusMessage(sourceGroupId: string, status: WorkbenchSourceSt
       : "业务标注源加载中断，模拟标注可能暂不可见。";
   }
 
+  if (sourceGroupId === "scada-api") {
+    return status === "online"
+      ? "SCADA设备已通过API加载。"
+      : "SCADA API请求中断，管网图层仍可继续使用。";
+  }
+
   return status === "online" ? "地图数据源已恢复正常。" : "地图数据源请求中断。";
 }
 
@@ -354,5 +418,9 @@ function getSourceErrorMessage(sourceGroupId: string, errorMessage: string) {
     return `业务标注源请求失败：${errorMessage}`;
   }
 
+  if (sourceGroupId === "scada-api") {
+    return `SCADA API请求失败：${errorMessage}`;
+  }
+
   return errorMessage;
 }