OrgTJWater/next-tjwater-drainage-frontend
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(scada): align map asset fields

Browse Source
This commit is contained in:
jiang
2026-07-15 18:30:12 +08:00
parent 16ecb69d00
commit 055335e404
11 changed files with 153 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
MAP_STYLE_GUIDE.md
+1 -1
View File
@@ -41,7 +41,7 @@ Closed、Off、Inactive 只把 core 改为 inactive 灰，不改变几何身份
## 状态与图层顺序 ## 状态与图层顺序
状态优先级是 `selected > hover > status > source`。五个业务 vector source 使用 `promoteId: "id"`，hover 与 selected 通过 feature-state 控制，opacity 使用 120ms 过渡且不脉冲。 状态优先级是 `selected > hover > status > source`。常规业务 vector source 使用 `promoteId: "id"`，SCADA source 使用 `promoteId: "scada_id"`，hover 与 selected 通过 feature-state 控制，opacity 使用 120ms 过渡且不脉冲。
- hover：白色增宽 casing 加 source/status core，selected 时 opacity 为 0。 - hover：白色增宽 casing 加 source/status core，selected 时 opacity 为 0。
- selected：保留普通 core，外侧使用白色分隔、操作蓝外框和窄白外缘。 - selected：保留普通 core，外侧使用白色分隔、操作蓝外框和窄白外缘。
features/workbench/components/feature-insight-panel.tsx
+94 -15
View File
@@ -1,8 +1,9 @@
"use client"; "use client";
import { Target, TriangleAlert, X } from "lucide-react"; import { Check, Copy, Target, TriangleAlert, X } from "lucide-react";
import Image from "next/image"; import Image from "next/image";
import { useMemo } from "react"; import { useEffect, useMemo, useRef, useState } from "react";
import { showMapNotice } from "@/features/map/core/components/notice";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { SCADA_ICON_PATHS } from "../map/scada"; import { SCADA_ICON_PATHS } from "../map/scada";
import type { DetailFeature } from "../types"; import type { DetailFeature } from "../types";
@@ -17,6 +18,15 @@ type FeatureInsightPanelProps = {
}; };
export function FeatureInsightPanel({ feature, onClose }: FeatureInsightPanelProps) { export function FeatureInsightPanel({ feature, onClose }: FeatureInsightPanelProps) {
const [copiedScadaUuid, setCopiedScadaUuid] = useState(false);
const copyResetTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
useEffect(() => () => {
if (copyResetTimeoutRef.current) {
clearTimeout(copyResetTimeoutRef.current);
}
}, []);
const metrics = useMemo(() => { const metrics = useMemo(() => {
if (!feature) { if (!feature) {
return []; return [];
@@ -60,7 +70,7 @@ export function FeatureInsightPanel({ feature, onClose }: FeatureInsightPanelPro
]; ];
case "scada": case "scada":
return [ return [
["设备类型", formatFeaturePropertyValue("device_type_name", feature.properties.device_type_name)], ["设备类型", formatFeaturePropertyValue("kind", feature.properties.kind)],
["运行状态", formatFeaturePropertyValue("active", feature.properties.active)], ["运行状态", formatFeaturePropertyValue("active", feature.properties.active)],
["关联检查井", formatFeaturePropertyValue("junction_id", feature.properties.junction_id)], ["关联检查井", formatFeaturePropertyValue("junction_id", feature.properties.junction_id)],
["同步时间", formatFeaturePropertyValue("synced_at", feature.properties.synced_at)] ["同步时间", formatFeaturePropertyValue("synced_at", feature.properties.synced_at)]
@@ -73,9 +83,43 @@ export function FeatureInsightPanel({ feature, onClose }: FeatureInsightPanelPro
return []; return [];
} }
return getLocalizedFeatureProperties(feature.properties); const properties = feature.layer === "scada" && feature.properties.scada_id === undefined
? { scada_id: feature.id, ...feature.properties }
: feature.properties;
return getLocalizedFeatureProperties(properties);
}, [feature]); }, [feature]);
const scadaQueryUuid = feature?.layer === "scada"
? getCopyablePropertyValue(feature.properties.scada_id ?? feature.id)
: null;
const handleCopyScadaUuid = async () => {
if (!scadaQueryUuid) {
return;
}
try {
if (!navigator.clipboard) {
throw new Error("Clipboard API unavailable");
}
await navigator.clipboard.writeText(scadaQueryUuid);
setCopiedScadaUuid(true);
if (copyResetTimeoutRef.current) {
clearTimeout(copyResetTimeoutRef.current);
}
copyResetTimeoutRef.current = setTimeout(() => setCopiedScadaUuid(false), 1500);
} catch {
showMapNotice({
tone: "error",
title: "无法复制 UUID",
message: "请手动选择查询 UUID 后复制。"
});
}
};
return ( return (
<aside className="acrylic-panel pointer-events-auto flex h-full min-h-0 flex-col rounded border"> <aside className="acrylic-panel pointer-events-auto flex h-full min-h-0 flex-col rounded border">
<div className="border-b border-slate-200/80 p-4"> <div className="border-b border-slate-200/80 p-4">
@@ -114,14 +158,33 @@ export function FeatureInsightPanel({ feature, onClose }: FeatureInsightPanelPro
</div> </div>
{feature.layer === "scada" ? ( {feature.layer === "scada" ? (
<section className={cn("mt-4 rounded border p-3", getScadaPresentation(feature.properties.device_type_id).sectionClassName)}> <section className={cn("mt-4 rounded border p-3", getScadaPresentation(feature.properties.kind).sectionClassName)}>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Image src={getScadaPresentation(feature.properties.device_type_id).iconPath} alt="" width={42} height={42} /> <Image src={getScadaPresentation(feature.properties.kind).iconPath} alt="" width={42} height={42} />
<div className="min-w-0"> <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={cn("truncate text-sm font-semibold", getScadaPresentation(feature.properties.kind).labelClassName)}>{formatFeaturePropertyValue("name", feature.properties.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> <p className="mt-0.5 truncate text-xs text-slate-500 tabular-nums">{formatFeaturePropertyValue("external_id", feature.properties.external_id)}</p>
</div> </div>
</div> </div>
{scadaQueryUuid ? (
<div className="mt-3 rounded border border-white/70 bg-white/65 px-3 py-2 shadow-sm">
<div className="flex items-center justify-between gap-2">
<p className="text-xs font-semibold text-slate-500">编号 UUID</p>
<button
type="button"
aria-label={copiedScadaUuid ? "编号 UUID 已复制" : "复制编号 UUID"}
title={copiedScadaUuid ? "编号 UUID 已复制" : "复制编号 UUID"}
onClick={() => void handleCopyScadaUuid()}
className="relative grid h-8 w-8 shrink-0 place-items-center rounded border border-slate-200/80 bg-white/80 text-slate-500 transition-[background-color,color,transform] duration-150 hover:text-slate-950 active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600/25"
>
<Copy size={14} aria-hidden="true" className={cn("absolute transition-[opacity,transform] duration-150", copiedScadaUuid ? "scale-90 opacity-0" : "scale-100 opacity-100")} />
<Check size={15} aria-hidden="true" className={cn("absolute text-emerald-600 transition-[opacity,transform] duration-150", copiedScadaUuid ? "scale-100 opacity-100" : "scale-90 opacity-0")} />
</button>
</div>
<p className="mt-1 break-all font-mono text-xs font-semibold leading-5 text-slate-900">{scadaQueryUuid}</p>
<p className="mt-1 text-xs leading-5 text-slate-500">SCADA 时序查询 asset_ids</p>
</div>
) : null}
<p className="mt-2 text-sm leading-6 text-slate-700">当前点位由管网节点空间均匀采样生成，仅用于空间展示，不代表设备真实安装坐标。图层暂未提供实时测值或历史曲线。</p> <p className="mt-2 text-sm leading-6 text-slate-700">当前点位由管网节点空间均匀采样生成，仅用于空间展示，不代表设备真实安装坐标。图层暂未提供实时测值或历史曲线。</p>
</section> </section>
) : null} ) : null}
@@ -141,8 +204,11 @@ export function FeatureInsightPanel({ feature, onClose }: FeatureInsightPanelPro
<dl className="surface-reading mt-2 divide-y divide-slate-100 rounded border"> <dl className="surface-reading mt-2 divide-y divide-slate-100 rounded border">
{propertyEntries.map((entry) => ( {propertyEntries.map((entry) => (
<div key={entry.key} className="grid grid-cols-[110px_1fr] gap-2 px-3 py-2 text-sm"> <div key={entry.key} className="grid grid-cols-[110px_1fr] gap-2 px-3 py-2 text-sm">
<dt className="truncate text-slate-500">{entry.label}</dt> <dt className="truncate text-slate-500">{feature.layer === "scada" && entry.key === "scada_id" ? "编号 UUID" : entry.label}</dt>
<dd className="truncate font-medium text-slate-800">{entry.value}</dd> <dd className={cn(
"font-medium text-slate-800",
feature.layer === "scada" && entry.key === "scada_id" ? "break-all font-mono text-xs leading-5" : "truncate"
)}>{entry.value}</dd>
</div> </div>
))} ))}
</dl> </dl>
@@ -160,14 +226,27 @@ export function FeatureInsightPanel({ feature, onClose }: FeatureInsightPanelPro
</div> </div>
)} )}
</div> </div>
<span className="sr-only" aria-live="polite">{copiedScadaUuid ? "编号 UUID 已复制" : ""}</span>
</aside> </aside>
); );
} }
function getScadaPresentation(rawTypeId: unknown) { function getCopyablePropertyValue(value: unknown) {
const typeId = Number(rawTypeId); if (typeof value === "string" && value.trim().length > 0) {
if (typeId === 72) return { iconPath: SCADA_ICON_PATHS.waterQuality, sectionClassName: "material-tone-normal border-teal-200", labelClassName: "text-teal-800" }; return value.trim();
if (typeId === 58) return { iconPath: SCADA_ICON_PATHS.radarLevel, sectionClassName: "material-tone-info border-blue-200", labelClassName: "text-blue-800" }; }
if (typeId === 45) return { iconPath: SCADA_ICON_PATHS.ultrasonicFlow, sectionClassName: "material-tone-warning border-orange-200", labelClassName: "text-orange-800" };
if (typeof value === "number" || typeof value === "bigint") {
return String(value);
}
return null;
}
function getScadaPresentation(rawKind: unknown) {
const kind = String(rawKind ?? "");
if (kind === "water_quality") return { iconPath: SCADA_ICON_PATHS.waterQuality, sectionClassName: "material-tone-normal border-teal-200", labelClassName: "text-teal-800" };
if (kind === "radar_level") return { iconPath: SCADA_ICON_PATHS.radarLevel, sectionClassName: "material-tone-info border-blue-200", labelClassName: "text-blue-800" };
if (kind === "ultrasonic_flow") return { iconPath: SCADA_ICON_PATHS.ultrasonicFlow, sectionClassName: "material-tone-warning border-orange-200", labelClassName: "text-orange-800" };
return { iconPath: SCADA_ICON_PATHS.unknown, sectionClassName: "surface-control border-transparent", labelClassName: "text-slate-800" }; return { iconPath: SCADA_ICON_PATHS.unknown, sectionClassName: "surface-control border-transparent", labelClassName: "text-slate-800" };
} }
features/workbench/components/feature-popover.tsx
+13 -12
View File
@@ -210,11 +210,12 @@ type ScadaFeaturePopoverProps = {
function ScadaFeaturePopover({ feature, copied, canCopy, onCopy, onClose }: ScadaFeaturePopoverProps) { function ScadaFeaturePopover({ feature, copied, canCopy, onCopy, onClose }: ScadaFeaturePopoverProps) {
const properties = feature.properties; const properties = feature.properties;
const presentation = getScadaPresentation(properties.device_type_id); const presentation = getScadaPresentation(properties.kind);
const active = properties.active === true || String(properties.active).toLowerCase() === "true"; const active = properties.active === true || String(properties.active).toLowerCase() === "true";
const pointId = formatFeaturePropertyValue("point_external_id", properties.point_external_id ?? feature.id); const scadaId = formatFeaturePropertyValue("scada_id", properties.scada_id ?? feature.id);
const attributes = [ const attributes = [
["设备编号", formatFeaturePropertyValue("device_external_id", properties.device_external_id)], ["站点编号", formatFeaturePropertyValue("site_external_id", properties.site_external_id)],
["设备编号", formatFeaturePropertyValue("external_id", properties.external_id)],
["关联检查井", formatFeaturePropertyValue("junction_id", properties.junction_id)], ["关联检查井", formatFeaturePropertyValue("junction_id", properties.junction_id)],
["同步时间", formatFeaturePropertyValue("synced_at", properties.synced_at)] ["同步时间", formatFeaturePropertyValue("synced_at", properties.synced_at)]
]; ];
@@ -233,8 +234,8 @@ function ScadaFeaturePopover({ feature, copied, canCopy, onCopy, onClose }: Scad
<Image src={presentation.iconPath} alt="" width={48} height={48} className="drop-shadow-sm" /> <Image src={presentation.iconPath} alt="" width={48} height={48} className="drop-shadow-sm" />
<div className="min-w-0"> <div className="min-w-0">
<div className="flex min-w-0 flex-nowrap items-center gap-1.5"> <div className="flex min-w-0 flex-nowrap items-center gap-1.5">
<span className={cn("min-w-0 truncate text-xs font-semibold", presentation.labelClassName)} title={formatFeaturePropertyValue("device_type_name", properties.device_type_name)}> <span className={cn("min-w-0 truncate text-xs font-semibold", presentation.labelClassName)} title={formatFeaturePropertyValue("kind", properties.kind)}>
{formatFeaturePropertyValue("device_type_name", properties.device_type_name)} {formatFeaturePropertyValue("kind", properties.kind)}
</span> </span>
<span className={cn( <span className={cn(
"inline-flex shrink-0 items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-semibold ring-1 ring-inset", "inline-flex shrink-0 items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-semibold ring-1 ring-inset",
@@ -246,9 +247,9 @@ function ScadaFeaturePopover({ feature, copied, canCopy, onCopy, onClose }: Scad
</span> </span>
</div> </div>
<h3 className="mt-1 truncate text-base font-semibold text-slate-950"> <h3 className="mt-1 truncate text-base font-semibold text-slate-950">
{formatFeaturePropertyValue("point_name", properties.point_name)} {formatFeaturePropertyValue("name", properties.name)}
</h3> </h3>
<p className="mt-0.5 truncate text-xs text-slate-600 tabular-nums">测点 {pointId}</p> <p className="mt-0.5 truncate text-xs text-slate-600 tabular-nums">编号 UUID {scadaId}</p>
</div> </div>
<div className="flex items-center gap-0.5"> <div className="flex items-center gap-0.5">
{canCopy ? ( {canCopy ? (
@@ -292,10 +293,10 @@ function ScadaFeaturePopover({ feature, copied, canCopy, onCopy, onClose }: Scad
); );
} }
function getScadaPresentation(rawTypeId: unknown) { function getScadaPresentation(rawKind: unknown) {
const typeId = Number(rawTypeId); const kind = String(rawKind ?? "");
if (typeId === 72) return { iconPath: SCADA_ICON_PATHS.waterQuality, headerClassName: "bg-teal-50/70", labelClassName: "text-teal-800" }; if (kind === "water_quality") return { iconPath: SCADA_ICON_PATHS.waterQuality, headerClassName: "bg-teal-50/70", labelClassName: "text-teal-800" };
if (typeId === 58) return { iconPath: SCADA_ICON_PATHS.radarLevel, headerClassName: "bg-blue-50/70", labelClassName: "text-blue-800" }; if (kind === "radar_level") return { iconPath: SCADA_ICON_PATHS.radarLevel, headerClassName: "bg-blue-50/70", labelClassName: "text-blue-800" };
if (typeId === 45) return { iconPath: SCADA_ICON_PATHS.ultrasonicFlow, headerClassName: "bg-orange-50/70", labelClassName: "text-orange-800" }; if (kind === "ultrasonic_flow") return { iconPath: SCADA_ICON_PATHS.ultrasonicFlow, headerClassName: "bg-orange-50/70", labelClassName: "text-orange-800" };
return { iconPath: SCADA_ICON_PATHS.unknown, headerClassName: "bg-slate-50/70", labelClassName: "text-slate-700" }; return { iconPath: SCADA_ICON_PATHS.unknown, headerClassName: "bg-slate-50/70", labelClassName: "text-slate-700" };
} }
features/workbench/map/feature-adapter.test.ts
+9 -10
View File
@@ -61,25 +61,24 @@ describe("drainage feature adapter", () => {
); );
}); });
it("uses the promoted SCADA point id for feature-state interactions", () => { it("uses the promoted SCADA id for feature-state interactions", () => {
const detail = toDetailFeature({ const detail = toDetailFeature({
id: "aaedc54a-e5b4-5791-b729-4b7e838a8d00", id: "4bfa834b-cbbb-5f35-9523-7487ac021ed2",
sourceLayer: SOURCE_LAYERS.scada, sourceLayer: SOURCE_LAYERS.scada,
properties: { properties: {
id: "4bfa834b-cbbb-5f35-9523-7487ac021ed2", scada_id: "4bfa834b-cbbb-5f35-9523-7487ac021ed2",
point_id: "aaedc54a-e5b4-5791-b729-4b7e838a8d00", site_external_id: "36455",
point_external_id: "36455", name: "DY22东市南街环城南路西段交叉口",
point_name: "DY22东市南街环城南路西段交叉口", external_id: "26825171",
device_external_id: "26825171", kind: "water_quality"
device_type_name: "2代水质仪"
} }
} as unknown as MapGeoJSONFeature); } as unknown as MapGeoJSONFeature);
expect(detail).toMatchObject({ expect(detail).toMatchObject({
id: "aaedc54a-e5b4-5791-b729-4b7e838a8d00", id: "4bfa834b-cbbb-5f35-9523-7487ac021ed2",
layer: "scada", layer: "scada",
title: "DY22东市南街环城南路西段交叉口", title: "DY22东市南街环城南路西段交叉口",
subtitle: "2代水质仪 · 设备 26825171" subtitle: "water_quality · 设备 26825171"
}); });
}); });
}); });
features/workbench/map/feature-adapter.ts
+5 -3
View File
@@ -3,10 +3,12 @@ import type { DetailFeature } from "../types";
import { formatValue } from "../utils/format-value"; import { formatValue } from "../utils/format-value";
import { SOURCE_LAYERS, type WaterNetworkSourceId } from "./sources"; import { SOURCE_LAYERS, type WaterNetworkSourceId } from "./sources";
const UUID_PATTERN = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
export function getFeatureId(feature: MapGeoJSONFeature) { export function getFeatureId(feature: MapGeoJSONFeature) {
const layer = getWaterNetworkSourceId(feature); const layer = getWaterNetworkSourceId(feature);
const raw = layer === "scada" const raw = layer === "scada"
? feature.id ?? feature.properties?.id ?? feature.properties?.point_id ?? feature.properties?.point_external_id ? feature.properties?.scada_id ?? (typeof feature.id === "string" && UUID_PATTERN.test(feature.id) ? feature.id : undefined)
: feature.id ?? feature.properties?.id; : feature.id ?? feature.properties?.id;
return raw === undefined || raw === null ? "" : String(raw); return raw === undefined || raw === null ? "" : String(raw);
@@ -70,8 +72,8 @@ function getFeaturePresentation(
}; };
case "scada": case "scada":
return { return {
title: String(properties.point_name || `SCADA 测点 ${displayId}`), title: String(properties.name || `SCADA 测点 ${displayId}`),
subtitle: `${formatValue(properties.device_type_name)} · 设备 ${formatValue(properties.device_external_id)}` subtitle: `${formatValue(properties.kind)} · 设备 ${formatValue(properties.external_id)}`
}; };
} }
} }
features/workbench/map/scada.test.ts
+4 -4
View File
@@ -14,10 +14,10 @@ import { waterNetworkLayers } from "./layers";
describe("SCADA map presentation", () => { describe("SCADA map presentation", () => {
it("maps the three authoritative device types and falls back to unknown", () => { it("maps the three authoritative device types and falls back to unknown", () => {
expect(SCADA_ICON_EXPRESSION).toEqual([ expect(SCADA_ICON_EXPRESSION).toEqual([
"match", ["to-number", ["get", "device_type_id"]], "match", ["get", "kind"],
72, SCADA_IMAGE_IDS.waterQuality, "water_quality", SCADA_IMAGE_IDS.waterQuality,
58, SCADA_IMAGE_IDS.radarLevel, "radar_level", SCADA_IMAGE_IDS.radarLevel,
45, SCADA_IMAGE_IDS.ultrasonicFlow, "ultrasonic_flow", SCADA_IMAGE_IDS.ultrasonicFlow,
SCADA_IMAGE_IDS.unknown SCADA_IMAGE_IDS.unknown
]); ]);
}); });
features/workbench/map/scada.ts
+4 -4
View File
@@ -27,10 +27,10 @@ export const SCADA_IMAGE_IDS = {
} as const; } as const;
export const SCADA_ICON_EXPRESSION: ExpressionSpecification = [ export const SCADA_ICON_EXPRESSION: ExpressionSpecification = [
"match", ["to-number", ["get", "device_type_id"]], "match", ["get", "kind"],
72, SCADA_IMAGE_IDS.waterQuality, "water_quality", SCADA_IMAGE_IDS.waterQuality,
58, SCADA_IMAGE_IDS.radarLevel, "radar_level", SCADA_IMAGE_IDS.radarLevel,
45, SCADA_IMAGE_IDS.ultrasonicFlow, "ultrasonic_flow", SCADA_IMAGE_IDS.ultrasonicFlow,
SCADA_IMAGE_IDS.unknown SCADA_IMAGE_IDS.unknown
]; ];
features/workbench/map/sources.test.ts
+1 -1
View File
@@ -10,7 +10,7 @@ describe("createWaterNetworkSources", () => {
expect(scada.tiles).toEqual([ expect(scada.tiles).toEqual([
expect.stringContaining("/lingang:scada_points/point/WebMercatorQuad/") expect.stringContaining("/lingang:scada_points/point/WebMercatorQuad/")
]); ]);
expect(scada.promoteId).toBe("point_id"); expect(scada.promoteId).toBe("scada_id");
}); });
}); });
features/workbench/map/sources.ts
+1 -1
View File
@@ -64,7 +64,7 @@ export function createWaterNetworkSources() {
SOURCE_LAYERS.scada, SOURCE_LAYERS.scada,
"point", "point",
[121.7350340307058, 30.84636502815, 121.97051839928491, 30.994737681416165], [121.7350340307058, 30.84636502815, 121.97051839928491, 30.994737681416165],
"point_id" "scada_id"
) )
}; };
} }
features/workbench/utils/feature-properties.test.ts
+13 -17
View File
@@ -71,27 +71,23 @@ describe("feature panel properties", () => {
it("shows SCADA identity, device, state, and sync fields", () => { it("shows SCADA identity, device, state, and sync fields", () => {
const model = getFeaturePanelModel("scada", { const model = getFeaturePanelModel("scada", {
id: "4bfa834b-cbbb-5f35-9523-7487ac021ed2", scada_id: "4bfa834b-cbbb-5f35-9523-7487ac021ed2",
point_id: "aaedc54a-e5b4-5791-b729-4b7e838a8d00", site_external_id: "36455",
point_external_id: "36455", name: "DY22东市南街环城南路西段交叉口",
point_name: "DY22东市南街环城南路西段交叉口", external_id: "26825171",
device_external_id: "26825171", kind: "water_quality",
active: true, active: true,
device_type_id: 72,
device_type_name: "2代水质仪",
junction_id: "31011502010001809", junction_id: "31011502010001809",
synced_at: "Jul 15, 2026, 7:38:45 AM" synced_at: "Jul 15, 2026, 7:38:45 AM"
}); });
expect(model.id).toBe("36455"); expect(model.id).toBe("4bfa834b-cbbb-5f35-9523-7487ac021ed2");
expect(model.badge).toEqual({ label: "在线", tone: "active" }); expect(model.badge).toEqual({ label: "在线", tone: "active" });
expect(model.attributes.map((entry) => entry.key)).toEqual([ expect(model.attributes.map((entry) => entry.key)).toEqual([
"id", "site_external_id",
"point_id", "name",
"point_name", "external_id",
"device_external_id", "kind",
"device_type_id",
"device_type_name",
"junction_id", "junction_id",
"synced_at" "synced_at"
]); ]);
@@ -99,12 +95,12 @@ describe("feature panel properties", () => {
it("omits the internal SCADA clustering size from user-facing properties", () => { it("omits the internal SCADA clustering size from user-facing properties", () => {
const entries = getLocalizedFeatureProperties({ const entries = getLocalizedFeatureProperties({
point_name: "THC雷达液位计（MQTT）", name: "THC雷达液位计（MQTT）",
cluster_size: 29, cluster_size: 29,
device_external_id: "DEVICE-002" external_id: "DEVICE-002"
}); });
expect(entries.map((entry) => entry.key)).toEqual(["point_name", "device_external_id"]); expect(entries.map((entry) => entry.key)).toEqual(["name", "external_id"]);
}); });
it("labels uniformly sampled SCADA locations", () => { it("labels uniformly sampled SCADA locations", () => {
features/workbench/utils/feature-properties.ts
+8 -3
View File
@@ -23,6 +23,7 @@ export type FeaturePanelModel = {
const PROPERTY_LABELS: Record<string, string> = { const PROPERTY_LABELS: Record<string, string> = {
fid: "GeoServer 要素 ID", fid: "GeoServer 要素 ID",
id: "编号", id: "编号",
scada_id: "编号 UUID",
gid: "要素编号", gid: "要素编号",
name: "名称", name: "名称",
code: "编码", code: "编码",
@@ -69,14 +70,18 @@ const PROPERTY_LABELS: Record<string, string> = {
device_type_name: "设备类型", device_type_name: "设备类型",
device_icon_code: "设备图标编码", device_icon_code: "设备图标编码",
active: "运行状态", active: "运行状态",
external_id: "设备编号",
junction_id: "关联检查井", junction_id: "关联检查井",
kind: "设备类型",
location_source: "位置来源", location_source: "位置来源",
site_external_id: "站点编号",
synced_at: "同步时间" synced_at: "同步时间"
}; };
const PROPERTY_ORDER: Record<string, number> = { const PROPERTY_ORDER: Record<string, number> = {
fid: 9, fid: 9,
id: 10, id: 10,
scada_id: 10,
gid: 11, gid: 11,
name: 12, name: 12,
code: 13, code: 13,
@@ -136,7 +141,7 @@ const FEATURE_PANEL_PROPERTY_KEYS: Record<WaterNetworkSourceId, readonly string[
junctions: ["id", "invert_elevation", "max_depth"], junctions: ["id", "invert_elevation", "max_depth"],
orifices: ["id", "discharge_coeff", "gated", "shape", "geom1", "geom2"], orifices: ["id", "discharge_coeff", "gated", "shape", "geom1", "geom2"],
outfalls: ["id", "invert_elevation", "outfall_type"], outfalls: ["id", "invert_elevation", "outfall_type"],
scada: ["id", "point_id", "point_external_id", "point_name", "device_external_id", "active", "device_type_id", "device_type_name", "junction_id", "synced_at"] scada: ["scada_id", "site_external_id", "name", "external_id", "kind", "active", "junction_id", "synced_at"]
}; };
const FEATURE_PANEL_BADGE_KEYS: Partial<Record<WaterNetworkSourceId, string>> = { const FEATURE_PANEL_BADGE_KEYS: Partial<Record<WaterNetworkSourceId, string>> = {
@@ -159,7 +164,7 @@ export function getFeaturePanelProperties(
featureId?: string featureId?: string
): LocalizedFeatureProperty[] { ): LocalizedFeatureProperty[] {
return FEATURE_PANEL_PROPERTY_KEYS[layer].map((key) => { return FEATURE_PANEL_PROPERTY_KEYS[layer].map((key) => {
const value = key === "id" ? properties[key] ?? featureId : properties[key]; const value = key === "id" || key === "scada_id" ? properties[key] ?? featureId : properties[key];
return { return {
key, key,
@@ -175,7 +180,7 @@ export function getFeaturePanelModel(
featureId?: string featureId?: string
): FeaturePanelModel { ): FeaturePanelModel {
const entries = getFeaturePanelProperties(layer, properties, featureId); const entries = getFeaturePanelProperties(layer, properties, featureId);
const idKey = layer === "scada" ? "point_external_id" : "id"; const idKey = layer === "scada" ? "scada_id" : "id";
const id = entries.find((entry) => entry.key === idKey)?.value ?? "暂无"; const id = entries.find((entry) => entry.key === idKey)?.value ?? "暂无";
const badgeKey = FEATURE_PANEL_BADGE_KEYS[layer]; const badgeKey = FEATURE_PANEL_BADGE_KEYS[layer];
const badgeEntry = badgeKey ? entries.find((entry) => entry.key === badgeKey) : undefined; const badgeEntry = badgeKey ? entries.find((entry) => entry.key === badgeKey) : undefined;