water-map.tsx 1002 B

12345678910111213141516171819202122232425262728293031323334353637
  1. "use client"
  2. import dynamic from "next/dynamic"
  3. interface WaterMapProps {
  4. facilities?: Array<{
  5. id: string
  6. name: string
  7. type: "water_source" | "plant" | "pump" | "pipeline" | "user"
  8. position: [number, number]
  9. status: "normal" | "warning" | "alarm"
  10. data?: any
  11. }>
  12. alarms?: Array<{
  13. id: string
  14. position: [number, number]
  15. level: "high" | "medium" | "low"
  16. message: string
  17. }>
  18. }
  19. // 使用动态导入避免SSR问题
  20. const MapComponent = dynamic(() => import("./map-component"), {
  21. ssr: false,
  22. loading: () => (
  23. <div className="h-full w-full rounded-lg overflow-hidden shadow-sm bg-gray-100 flex items-center justify-center">
  24. <div className="text-gray-500">地图加载中...</div>
  25. </div>
  26. ),
  27. })
  28. export default function WaterMap({ facilities = [], alarms = [] }: WaterMapProps) {
  29. return (
  30. <div className="h-full w-full rounded-lg overflow-hidden shadow-sm">
  31. <MapComponent facilities={facilities} alarms={alarms} />
  32. </div>
  33. )
  34. }