feat(map): refine SCADA feature experience

2026-07-14 10:48:24 +08:00
parent 0b7e827024
commit 1c85d938a6
35 changed files with 1020 additions and 842 deletions
@@ -1,7 +1,10 @@
 "use client";

 import { Target, TriangleAlert, X } from "lucide-react";
+import Image from "next/image";
 import { useMemo } from "react";
+import { cn } from "@/lib/utils";
+import { SCADA_ICON_PATHS } from "../map/scada";
 import type { DetailFeature } from "../types";
 import {
  formatFeaturePropertyValue,
@@ -55,6 +58,13 @@ export function FeatureInsightPanel({ feature, onClose }: FeatureInsightPanelPro
          ["阶段数据", formatFeaturePropertyValue("stage_data", feature.properties.stage_data)],
          ["状态", "在线"]
        ];
+      case "scada":
+        return [
+          ["设备类型", formatFeaturePropertyValue("device_type_name", feature.properties.device_type_name)],
+          ["运行状态", formatFeaturePropertyValue("active", feature.properties.active)],
+          ["关联检查井", formatFeaturePropertyValue("junction_id", feature.properties.junction_id)],
+          ["同步时间", formatFeaturePropertyValue("synced_at", feature.properties.synced_at)]
+        ];
    }
  }, [feature]);

@@ -103,6 +113,19 @@ export function FeatureInsightPanel({ feature, onClose }: FeatureInsightPanelPro
              ))}
            </div>

+            {feature.layer === "scada" ? (
+              <section className={cn("mt-4 rounded border p-3", getScadaPresentation(feature.properties.device_type_id).sectionClassName)}>
+                <div className="flex items-center gap-3">
+                  <Image src={getScadaPresentation(feature.properties.device_type_id).iconPath} alt="" width={42} height={42} />
+                  <div className="min-w-0">
+                    <p className={cn("truncate text-sm font-semibold", getScadaPresentation(feature.properties.device_type_id).labelClassName)}>{formatFeaturePropertyValue("point_name", feature.properties.point_name)}</p>
+                    <p className="mt-0.5 truncate text-xs text-slate-500 tabular-nums">{formatFeaturePropertyValue("device_external_id", feature.properties.device_external_id)}</p>
+                  </div>
+                </div>
+                <p className="mt-2 text-sm leading-6 text-slate-700">当前点位由管网密度聚类生成，仅用于空间展示。图层暂未提供实时测值或历史曲线。</p>
+              </section>
+            ) : null}
+
            <section className="mt-4 rounded border border-orange-100 bg-orange-50/70 p-3">
              <div className="flex items-center gap-2 text-sm font-semibold text-orange-900">
                <TriangleAlert size={16} aria-hidden="true" />
@@ -140,3 +163,11 @@ export function FeatureInsightPanel({ feature, onClose }: FeatureInsightPanelPro
    </aside>
  );
 }
+
+function getScadaPresentation(rawTypeId: unknown) {
+  const typeId = Number(rawTypeId);
+  if (typeId === 72) return { iconPath: SCADA_ICON_PATHS.waterQuality, sectionClassName: "border-teal-200 bg-teal-50/70", labelClassName: "text-teal-800" };
+  if (typeId === 58) return { iconPath: SCADA_ICON_PATHS.radarLevel, sectionClassName: "border-blue-200 bg-blue-50/70", labelClassName: "text-blue-800" };
+  if (typeId === 45) return { iconPath: SCADA_ICON_PATHS.ultrasonicFlow, sectionClassName: "border-orange-200 bg-orange-50/70", labelClassName: "text-orange-800" };
+  return { iconPath: SCADA_ICON_PATHS.unknown, sectionClassName: "border-slate-200 bg-slate-50", labelClassName: "text-slate-800" };
+}