Explorar el Código

feat(app): 添加水地图组件- 新增 WaterMap 组件用于展示水源、水厂、泵站、管道和用户等设施
- 集成报警信息展示功能
- 使用动态导入避免 SSR问题,提高性能
- 设计了加载中的占位符,提升用户体验

nahida hace 9 meses
padre
commit
2d31b87c06
Se han modificado 1 ficheros con 37 adiciones y 0 borrados
  1. 37 0
      app/(other)/test9/components/water-map.tsx

+ 37 - 0
app/(other)/test9/components/water-map.tsx

@@ -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>
+  )
+}