|
@@ -0,0 +1,37 @@
|
|
|
|
|
+"use client"
|
|
|
|
|
+import dynamic from "next/dynamic"
|
|
|
|
|
+
|
|
|
|
|
+interface WaterMapProps {
|
|
|
|
|
+ facilities?: Array<{
|
|
|
|
|
+ id: string
|
|
|
|
|
+ name: string
|
|
|
|
|
+ type: "water_source" | "plant" | "pump" | "pipeline" | "user"
|
|
|
|
|
+ position: [number, number]
|
|
|
|
|
+ status: "normal" | "warning" | "alarm"
|
|
|
|
|
+ data?: any
|
|
|
|
|
+ }>
|
|
|
|
|
+ alarms?: Array<{
|
|
|
|
|
+ id: string
|
|
|
|
|
+ position: [number, number]
|
|
|
|
|
+ level: "high" | "medium" | "low"
|
|
|
|
|
+ message: string
|
|
|
|
|
+ }>
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// 使用动态导入避免SSR问题
|
|
|
|
|
+const MapComponent = dynamic(() => import("./map-component"), {
|
|
|
|
|
+ ssr: false,
|
|
|
|
|
+ loading: () => (
|
|
|
|
|
+ <div className="h-full w-full rounded-lg overflow-hidden shadow-sm bg-gray-100 flex items-center justify-center">
|
|
|
|
|
+ <div className="text-gray-500">地图加载中...</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ ),
|
|
|
|
|
+})
|
|
|
|
|
+
|
|
|
|
|
+export default function WaterMap({ facilities = [], alarms = [] }: WaterMapProps) {
|
|
|
|
|
+ return (
|
|
|
|
|
+ <div className="h-full w-full rounded-lg overflow-hidden shadow-sm">
|
|
|
|
|
+ <MapComponent facilities={facilities} alarms={alarms} />
|
|
|
|
|
+ </div>
|
|
|
|
|
+ )
|
|
|
|
|
+}
|