提交

.env.local

@@ -1 +1 @@
-BACKEND_URL=http://192.168.110.93:8080
+BACKEND_URL=http://192.168.110.235:8301

app/(other)/test11/page.tsx

@@ -1,787 +1,1031 @@
 "use client"
-
+// 在文件顶部导入 useMemo
 import {useState} from "react"
 import {
-  Alert,
-  Badge,
-  Button,
-  Card,
-  Col,
-  Form,
-  Input,
-  Layout,
-  Menu,
-  message,
-  Modal,
-  Row,
-  Select,
-  Space,
-  Statistic,
-  Table,
-  Tabs,
-  Tag,
+    Badge,
+    Button,
+    Card,
+    Col,
+    Form,
+    Input,
+    Layout,
+    Menu,
+    message,
+    Modal,
+    Row,
+    Select,
+    Space,
+    Statistic,
+    Table,
+    Tabs,
+    Tag,
 } from "antd"
 import {
-  AlertOutlined,
-  BarChartOutlined,
-  DashboardOutlined,
-  EditOutlined,
-  EnvironmentOutlined,
-  EyeOutlined,
-  PlusOutlined,
-  SettingOutlined,
+    AlertOutlined,
+    BarChartOutlined,
+    DashboardOutlined,
+    DatabaseOutlined,
+    EditOutlined,
+    EyeOutlined,
+    HomeOutlined,
+    PlusOutlined,
+    SettingOutlined
 } from "@ant-design/icons"
 import dynamic from "next/dynamic"
 import EChart from "@/components/echarts"
 import GisMapBaidu from "@/components/gisMapBaidu";
+import GisMapJinggai from "@/components/GISModule/gisMapJinggai";
+import PicEcharts from "@/components/GISModule/PicEcharts";
+import BarChart from "@/components/GISModule/eqClassIficationEcharts";
+import Dtxxdata from "@/components/GISModule/Dtxxdata";
+import Sbledata from "@/components/GISModule/Sbledata";
+import DbgdData from "@/components/GISModule/DbgdData";
+import SbqyxxData from "@/components/GISModule/SbqyxxData";
+
+//实时监测-实时监测一张图
+import RTMMGis from "@/components/realTimeMontorModule/RTMMGis";
 
-const { Header, Sider, Content } = Layout
-const { TabPane } = Tabs
-const { Option } = Select
+const {Header, Sider, Content} = Layout
+const {TabPane} = Tabs
+const {Option} = Select
 
 // 动态导入地图组件避免SSR问题
-const MapView = dynamic(() => import("./components/map-view"), { ssr: false })
+const MapView = dynamic(() => import("./components/map-view"), {ssr: false})
+
 
 export default function ManholeMonitoringSystem() {
-  const [selectedMenu, setSelectedMenu] = useState("dashboard")
-  const [deviceModalVisible, setDeviceModalVisible] = useState(false)
-  const [selectedDevice, setSelectedDevice] = useState(null)
-  const [addDeviceModalVisible, setAddDeviceModalVisible] = useState(false)
-  const [editDeviceModalVisible, setEditDeviceModalVisible] = useState(false)
-  const [editingDevice, setEditingDevice] = useState(null)
-  const [devices, setDevices] = useState([
-    {
-      id: 1,
-      name: "设备001",
-      type: "智能井盖",
-      status: "normal",
-      location: "朝阳区建国路",
-      lat: 39.9042,
-      lng: 116.4074,
-      battery: 85,
-      signal: 90,
-    },
-    {
-      id: 2,
-      name: "设备002",
-      type: "智能井盖",
-      status: "warning",
-      location: "海淀区中关村",
-      lat: 39.9826,
-      lng: 116.3186,
-      battery: 45,
-      signal: 75,
-    },
-    {
-      id: 3,
-      name: "设备003",
-      type: "智能井盖",
-      status: "error",
-      location: "西城区金融街",
-      lat: 39.926,
-      lng: 116.3663,
-      battery: 20,
-      signal: 60,
-    },
-    {
-      id: 4,
-      name: "设备004",
-      type: "智能井盖",
-      status: "normal",
-      location: "东城区王府井",
-      lat: 39.9097,
-      lng: 116.4109,
-      battery: 92,
-      signal: 95,
-    },
-    {
-      id: 5,
-      name: "设备005",
-      type: "智能井盖",
-      status: "maintenance",
-      location: "丰台区丽泽",
-      lat: 39.8584,
-      lng: 116.3135,
-      battery: 78,
-      signal: 80,
-    },
-  ])
-  const [alerts, setAlerts] = useState([
-    {
-      id: 1,
-      deviceName: "设备002",
-      type: "位移异常",
-      level: "warning",
-      time: "2024-01-15 14:30:25",
-      location: "海淀区中关村",
-      status: "pending", // pending, processed, ignored
-    },
-    {
-      id: 2,
-      deviceName: "设备003",
-      type: "电池电压低",
-      level: "error",
-      time: "2024-01-15 14:25:10",
-      location: "西城区金融街",
-      status: "pending",
-    },
-    {
-      id: 3,
-      deviceName: "设备001",
-      type: "震动异常",
-      level: "info",
-      time: "2024-01-15 14:20:15",
-      location: "朝阳区建国路",
-      status: "processed",
-    },
-  ])
-
-  const [addDeviceForm] = Form.useForm()
-  const [editDeviceForm] = Form.useForm()
-
-  const handleAddDevice = (values: any) => {
-    const newDevice = {
-      id: devices.length + 1,
-      name: values.name,
-      type: values.type,
-      status: values.status,
-      location: values.location,
-      lat: Number.parseFloat(values.lat),
-      lng: Number.parseFloat(values.lng),
-      battery: Number.parseInt(values.battery),
-      signal: Number.parseInt(values.signal),
-    }
-    setDevices([...devices, newDevice])
-    setAddDeviceModalVisible(false)
-    addDeviceForm.resetFields()
-    message.success("设备添加成功！")
-  }
-
-  const handleEditDevice = (values: any) => {
-    const updatedDevices = devices.map((device) =>
-      device.id === editingDevice.id
-        ? {
-          ...device,
-          ...values,
-          lat: Number.parseFloat(values.lat),
-          lng: Number.parseFloat(values.lng),
-          battery: Number.parseInt(values.battery),
-          signal: Number.parseInt(values.signal),
+    const [selectedMenu, setSelectedMenu] = useState("home")
+    const [deviceModalVisible, setDeviceModalVisible] = useState(false)
+
+    const [selectedDevice, setSelectedDevice] = useState(null)
+    const [addDeviceModalVisible, setAddDeviceModalVisible] = useState(false)
+    const [editDeviceModalVisible, setEditDeviceModalVisible] = useState(false)
+    const [editingDevice, setEditingDevice] = useState(null)
+
+    const [devices, setDevices] = useState([
+        {
+            id: 1,
+            name: "设备001",
+            type: "智能井盖",
+            status: "normal",
+            location: "朝阳区建国路",
+            lat: 39.9042,
+            lng: 116.4074,
+            battery: 85,
+            signal: 90,
+        },
+        {
+            id: 2,
+            name: "设备002",
+            type: "智能井盖",
+            status: "warning",
+            location: "海淀区中关村",
+            lat: 39.9826,
+            lng: 116.3186,
+            battery: 45,
+            signal: 75,
+        },
+        {
+            id: 3,
+            name: "设备003",
+            type: "智能井盖",
+            status: "error",
+            location: "西城区金融街",
+            lat: 39.926,
+            lng: 116.3663,
+            battery: 20,
+            signal: 60,
+        },
+        {
+            id: 4,
+            name: "设备004",
+            type: "智能井盖",
+            status: "normal",
+            location: "东城区王府井",
+            lat: 39.9097,
+            lng: 116.4109,
+            battery: 92,
+            signal: 95,
+        },
+        {
+            id: 5,
+            name: "设备005",
+            type: "智能井盖",
+            status: "maintenance",
+            location: "丰台区丽泽",
+            lat: 39.8584,
+            lng: 116.3135,
+            battery: 78,
+            signal: 80,
+        },
+    ])
+    const [alerts, setAlerts] = useState([
+        {
+            id: 1,
+            deviceName: "设备002",
+            type: "位移异常",
+            level: "warning",
+            time: "2024-01-15 14:30:25",
+            location: "海淀区中关村",
+            status: "pending", // pending, processed, ignored
+        },
+        {
+            id: 2,
+            deviceName: "设备003",
+            type: "电池电压低",
+            level: "error",
+            time: "2024-01-15 14:25:10",
+            location: "西城区金融街",
+            status: "pending",
+        },
+        {
+            id: 3,
+            deviceName: "设备001",
+            type: "震动异常",
+            level: "info",
+            time: "2024-01-15 14:20:15",
+            location: "朝阳区建国路",
+            status: "processed",
+        },
+    ])
+
+    const [addDeviceForm] = Form.useForm()
+    const [editDeviceForm] = Form.useForm()
+
+    const handleAddDevice = (values: any) => {
+        const newDevice = {
+            id: devices.length + 1,
+            name: values.name,
+            type: values.type,
+            status: values.status,
+            location: values.location,
+            lat: Number.parseFloat(values.lat),
+            lng: Number.parseFloat(values.lng),
+            battery: Number.parseInt(values.battery),
+            signal: Number.parseInt(values.signal),
         }
-        : device,
-    )
-    setDevices(updatedDevices)
-    setEditDeviceModalVisible(false)
-    setEditingDevice(null)
-    editDeviceForm.resetFields()
-    message.success("设备信息更新成功！")
-  }
-
-  const openEditModal = (device: any) => {
-    setEditingDevice(device)
-    editDeviceForm.setFieldsValue(device)
-    setEditDeviceModalVisible(true)
-  }
-
-  const handleProcessAlert = (alertId: number) => {
-    const updatedAlerts = alerts.map((alert) => (alert.id === alertId ? { ...alert, status: "processed" } : alert))
-    setAlerts(updatedAlerts)
-    message.success("报警已处理！")
-  }
-
-  const handleIgnoreAlert = (alertId: number) => {
-    const updatedAlerts = alerts.map((alert) => (alert.id === alertId ? { ...alert, status: "ignored" } : alert))
-    setAlerts(updatedAlerts)
-    message.success("报警已忽略！")
-  }
-
-  // 设备状态统计
-  const deviceStats = {
-    total: devices.length,
-    normal: devices.filter((d) => d.status === "normal").length,
-    warning: devices.filter((d) => d.status === "warning").length,
-    error: devices.filter((d) => d.status === "error").length,
-    maintenance: devices.filter((d) => d.status === "maintenance").length,
-  }
-
-  // 区域分布图表配置
-  const regionChartOption = {
-    title: { text: "设备区域分布", left: "center" },
-    tooltip: { trigger: "item" },
-    series: [
-      {
-        type: "pie",
-        radius: "50%",
-        data: [
-          { value: 1, name: "朝阳区" },
-          { value: 1, name: "海淀区" },
-          { value: 1, name: "西城区" },
-          { value: 1, name: "东城区" },
-          { value: 1, name: "丰台区" },
+        setDevices([...devices, newDevice])
+        setAddDeviceModalVisible(false)
+        addDeviceForm.resetFields()
+        message.success("设备添加成功！")
+    }
+
+    const handleEditDevice = (values: any) => {
+        const updatedDevices = devices.map((device) =>
+            device.id === editingDevice.id
+                ? {
+                    ...device,
+                    ...values,
+                    lat: Number.parseFloat(values.lat),
+                    lng: Number.parseFloat(values.lng),
+                    battery: Number.parseInt(values.battery),
+                    signal: Number.parseInt(values.signal),
+                }
+                : device,
+        )
+        setDevices(updatedDevices)
+        setEditDeviceModalVisible(false)
+        setEditingDevice(null)
+        editDeviceForm.resetFields()
+        message.success("设备信息更新成功！")
+    }
+
+    const openEditModal = (device: any) => {
+        setEditingDevice(device)
+        editDeviceForm.setFieldsValue(device)
+        setEditDeviceModalVisible(true)
+    }
+
+    const handleProcessAlert = (alertId: number) => {
+        const updatedAlerts = alerts.map((alert) => (alert.id === alertId ? {...alert, status: "processed"} : alert))
+        setAlerts(updatedAlerts)
+        message.success("报警已处理！")
+    }
+
+    const handleIgnoreAlert = (alertId: number) => {
+        const updatedAlerts = alerts.map((alert) => (alert.id === alertId ? {...alert, status: "ignored"} : alert))
+        setAlerts(updatedAlerts)
+        message.success("报警已忽略！")
+    }
+
+    // 设备状态统计
+    const deviceStats = {
+        total: devices.length,
+        normal: devices.filter((d) => d.status === "normal").length,
+        warning: devices.filter((d) => d.status === "warning").length,
+        error: devices.filter((d) => d.status === "error").length,
+        maintenance: devices.filter((d) => d.status === "maintenance").length,
+    }
+
+    // 区域分布图表配置
+    const regionChartOption = {
+        title: {text: "设备区域分布", left: "center"},
+        tooltip: {trigger: "item"},
+        series: [
+            {
+                type: "pie",
+                radius: "50%",
+                data: [
+                    {value: 1, name: "朝阳区"},
+                    {value: 1, name: "海淀区"},
+                    {value: 1, name: "西城区"},
+                    {value: 1, name: "东城区"},
+                    {value: 1, name: "丰台区"},
+                ],
+            },
         ],
-      },
-    ],
-  }
-
-  // 设备状态分布图表配置
-  const statusChartOption = {
-    title: { text: "设备状态分布", left: "center" },
-    tooltip: { trigger: "item" },
-    series: [
-      {
-        type: "pie",
-        radius: "50%",
-        data: [
-          { value: deviceStats.normal, name: "正常", itemStyle: { color: "#52c41a" } },
-          { value: deviceStats.warning, name: "告警", itemStyle: { color: "#faad14" } },
-          { value: deviceStats.error, name: "故障", itemStyle: { color: "#f5222d" } },
-          { value: deviceStats.maintenance, name: "维修中", itemStyle: { color: "#722ed1" } },
+    }
+
+    // 设备状态分布图表配置
+    const statusChartOption = {
+        title: {text: "设备状态分布", left: "center"},
+        tooltip: {trigger: "item"},
+        series: [
+            {
+                type: "pie",
+                radius: "50%",
+                data: [
+                    {value: deviceStats.normal, name: "正常", itemStyle: {color: "#52c41a"}},
+                    {value: deviceStats.warning, name: "告警", itemStyle: {color: "#faad14"}},
+                    {value: deviceStats.error, name: "故障", itemStyle: {color: "#f5222d"}},
+                    {value: deviceStats.maintenance, name: "维修中", itemStyle: {color: "#722ed1"}},
+                ],
+            },
         ],
-      },
-    ],
-  }
-
-  // 实时监测数据图表配置
-  const monitoringChartOption = {
-    title: { text: "实时监测数据趋势", left: "center" },
-    tooltip: { trigger: "axis" },
-    legend: { data: ["倾斜角度", "位移距离", "震动强度"], top: 30 },
-    xAxis: {
-      type: "category",
-      data: ["00:00", "04:00", "08:00", "12:00", "16:00", "20:00"],
-    },
-    yAxis: { type: "value" },
-    series: [
-      {
-        name: "倾斜角度",
-        type: "line",
-        data: [2.1, 2.3, 2.0, 2.5, 2.8, 2.4],
-        itemStyle: { color: "#1890ff" },
-      },
-      {
-        name: "位移距离",
-        type: "line",
-        data: [0.5, 0.7, 0.4, 0.9, 1.2, 0.8],
-        itemStyle: { color: "#52c41a" },
-      },
-      {
-        name: "震动强度",
-        type: "line",
-        data: [15, 18, 12, 22, 28, 20],
-        itemStyle: { color: "#faad14" },
-      },
-    ],
-  }
-
-  const deviceColumns = [
-    { title: "设备编号", dataIndex: "name", key: "name" },
-    { title: "设备类型", dataIndex: "type", key: "type" },
-    {
-      title: "运维状态",
-      dataIndex: "status",
-      key: "status",
-      render: (status: string) => {
-        const statusMap = {
-          normal: { color: "success", text: "正常" },
-          warning: { color: "warning", text: "告警" },
-          error: { color: "error", text: "故障" },
-          maintenance: { color: "processing", text: "维修中" },
-        }
-        const config = statusMap[status as keyof typeof statusMap]
-        return <Badge status={config.color as any} text={config.text} />
-      },
-    },
-    { title: "所在位置", dataIndex: "location", key: "location" },
-    {
-      title: "电池电量",
-      dataIndex: "battery",
-      key: "battery",
-      render: (battery: number) => `${battery}%`,
-    },
-    {
-      title: "信号强度",
-      dataIndex: "signal",
-      key: "signal",
-      render: (signal: number) => `${signal}%`,
-    },
-    {
-      title: "操作",
-      key: "action",
-      render: (_, record: any) => (
-        <Space>
-          <Button
-            type="link"
-            icon={<EyeOutlined />}
-            onClick={() => {
-              setSelectedDevice(record)
-              setDeviceModalVisible(true)
-            }}
-          >
-            查看
-          </Button>
-          <Button type="link" icon={<EditOutlined />} onClick={() => openEditModal(record)}>
-            编辑
-          </Button>
-        </Space>
-      ),
-    },
-  ]
-
-  const alertColumns = [
-    { title: "设备名称", dataIndex: "deviceName", key: "deviceName" },
-    { title: "报警类型", dataIndex: "type", key: "type" },
-    {
-      title: "报警级别",
-      dataIndex: "level",
-      key: "level",
-      render: (level: string) => {
-        const levelMap = {
-          info: { color: "blue", text: "信息" },
-          warning: { color: "orange", text: "警告" },
-          error: { color: "red", text: "严重" },
-        }
-        const config = levelMap[level as keyof typeof levelMap]
-        return <Tag color={config.color}>{config.text}</Tag>
-      },
-    },
-    { title: "报警时间", dataIndex: "time", key: "time" },
-    { title: "设备位置", dataIndex: "location", key: "location" },
-    {
-      title: "状态",
-      dataIndex: "status",
-      key: "status",
-      render: (status: string) => {
-        const statusMap = {
-          pending: { color: "orange", text: "待处理" },
-          processed: { color: "green", text: "已处理" },
-          ignored: { color: "gray", text: "已忽略" },
-        }
-        const config = statusMap[status as keyof typeof statusMap]
-        return <Tag color={config.color}>{config.text}</Tag>
-      },
-    },
-    {
-      title: "操作",
-      key: "action",
-      render: (_, record: any) => (
-        <Space>
-          {record.status === "pending" && (
-            <>
-              <Button type="link" onClick={() => handleProcessAlert(record.id)}>
-                处理
-              </Button>
-              <Button type="link" onClick={() => handleIgnoreAlert(record.id)}>
-                忽略
-              </Button>
-            </>
-          )}
-          {record.status !== "pending" && <span className="text-gray-400">已处理</span>}
-        </Space>
-      ),
-    },
-  ]
-
-  const renderContent = () => {
-    switch (selectedMenu) {
-      case "dashboard":
-        return (
-          <div className="space-y-6">
-            {/* 统计卡片 */}
-            <Row gutter={16}>
-              <Col span={6}>
-                <Card>
-                  <Statistic title="设备总数" value={deviceStats.total} valueStyle={{ color: "#1890ff" }} />
-                </Card>
-              </Col>
-              <Col span={6}>
-                <Card>
-                  <Statistic title="正常设备" value={deviceStats.normal} valueStyle={{ color: "#52c41a" }} />
-                </Card>
-              </Col>
-              <Col span={6}>
-                <Card>
-                  <Statistic title="告警设备" value={deviceStats.warning} valueStyle={{ color: "#faad14" }} />
-                </Card>
-              </Col>
-              <Col span={6}>
-                <Card>
-                  <Statistic title="故障设备" value={deviceStats.error} valueStyle={{ color: "#f5222d" }} />
-                </Card>
-              </Col>
-            </Row>
-
-            {/* 图表展示 */}
-            <Row gutter={16}>
-              <Col span={12}>
-                <Card title="设备区域分布">
-                  <EChart option={regionChartOption} />
-                </Card>
-              </Col>
-              <Col span={12}>
-                <Card title="设备状态分布">
-                  <EChart option={statusChartOption} />
-                </Card>
-              </Col>
-            </Row>
-
-            {/* 实时监测趋势 */}
-            <Card title="实时监测数据趋势">
-              <EChart option={monitoringChartOption} />
-            </Card>
-          </div>
-        )
+    }
 
-      case "devices":
-        return (
-          <div className="space-y-6">
-            <Card
-              title="监测设备台账"
-              extra={
-                <Button type="primary" icon={<PlusOutlined />} onClick={() => setAddDeviceModalVisible(true)}>
-                  添加设备
-                </Button>
-              }
-            >
-              <Table columns={deviceColumns} dataSource={devices} rowKey="id" pagination={{ pageSize: 10 }} />
-            </Card>
-          </div>
-        )
+    // 实时监测数据图表配置
+    const monitoringChartOption = {
+        title: {text: "实时监测数据趋势", left: "center"},
+        tooltip: {trigger: "axis"},
+        legend: {data: ["倾斜角度", "位移距离", "震动强度"], top: 30},
+        xAxis: {
+            type: "category",
+            data: ["00:00", "04:00", "08:00", "12:00", "16:00", "20:00"],
+        },
+        yAxis: {type: "value"},
+        series: [
+            {
+                name: "倾斜角度",
+                type: "line",
+                data: [2.1, 2.3, 2.0, 2.5, 2.8, 2.4],
+                itemStyle: {color: "#1890ff"},
+            },
+            {
+                name: "位移距离",
+                type: "line",
+                data: [0.5, 0.7, 0.4, 0.9, 1.2, 0.8],
+                itemStyle: {color: "#52c41a"},
+            },
+            {
+                name: "震动强度",
+                type: "line",
+                data: [15, 18, 12, 22, 28, 20],
+                itemStyle: {color: "#faad14"},
+            },
+        ],
+    }
 
-      case "map":
-        return (
-          <div className="space-y-6">
-            <Card title="监测设备 GIS 一张图">
-              <div style={{ height: "600px" }}>
-                <GisMapBaidu height={'50'} />
-              </div>
-            </Card>
-          </div>
-        )
+    const deviceColumns = [
+        {title: "设备编号", dataIndex: "name", key: "name"},
+        {title: "设备类型", dataIndex: "type", key: "type"},
+        {
+            title: "运维状态",
+            dataIndex: "status",
+            key: "status",
+            render: (status: string) => {
+                const statusMap = {
+                    normal: {color: "success", text: "正常"},
+                    warning: {color: "warning", text: "告警"},
+                    error: {color: "error", text: "故障"},
+                    maintenance: {color: "processing", text: "维修中"},
+                }
+                const config = statusMap[status as keyof typeof statusMap]
+                return <Badge status={config.color as any} text={config.text}/>
+            },
+        },
+        {title: "所在位置", dataIndex: "location", key: "location"},
+        {
+            title: "电池电量",
+            dataIndex: "battery",
+            key: "battery",
+            render: (battery: number) => `${battery}%`,
+        },
+        {
+            title: "信号强度",
+            dataIndex: "signal",
+            key: "signal",
+            render: (signal: number) => `${signal}%`,
+        },
+        {
+            title: "操作",
+            key: "action",
+            render: (_, record: any) => (
+                <Space>
+                    <Button
+                        type="link"
+                        icon={<EyeOutlined/>}
+                        onClick={() => {
+                            setSelectedDevice(record)
+                            setDeviceModalVisible(true)
+                        }}
+                    >
+                        查看
+                    </Button>
+                    <Button type="link" icon={<EditOutlined/>} onClick={() => openEditModal(record)}>
+                        编辑
+                    </Button>
+                </Space>
+            ),
+        },
+    ]
 
-      case "monitoring":
-        return (
-          <div className="space-y-6">
-            <Row gutter={16}>
-              <Col span={24}>
-                <Alert
-                  message="实时监测状态"
-                  description="系统正在实时监测所有窨井盖设备状态，包括开启、位移、倾斜、震动、溢水等情况"
-                  type="info"
-                  showIcon
-                  className="mb-4"
-                />
-              </Col>
-            </Row>
-
-            <Tabs defaultActiveKey="realtime">
-              <TabPane tab="实时监测" key="realtime">
-                <Row gutter={16}>
-                  <Col span={24}>
-                    <Card title="实时监测一张图">
-                      <div style={{ height: "500px" }}>
-                        <MapView devices={devices} showRealTimeData />
-                      </div>
-                    </Card>
-                  </Col>
-                </Row>
-              </TabPane>
-
-              <TabPane tab="监测数据" key="data">
-                <Card title="实时监测数据">
-                  <EChart option={monitoringChartOption} />
-                </Card>
-              </TabPane>
-            </Tabs>
-          </div>
-        )
+    const alertColumns = [
+        {title: "设备名称", dataIndex: "deviceName", key: "deviceName"},
+        {title: "报警类型", dataIndex: "type", key: "type"},
+        {
+            title: "报警级别",
+            dataIndex: "level",
+            key: "level",
+            render: (level: string) => {
+                const levelMap = {
+                    info: {color: "blue", text: "信息"},
+                    warning: {color: "orange", text: "警告"},
+                    error: {color: "red", text: "严重"},
+                }
+                const config = levelMap[level as keyof typeof levelMap]
+                return <Tag color={config.color}>{config.text}</Tag>
+            },
+        },
+        {title: "报警时间", dataIndex: "time", key: "time"},
+        {title: "设备位置", dataIndex: "location", key: "location"},
+        {
+            title: "状态",
+            dataIndex: "status",
+            key: "status",
+            render: (status: string) => {
+                const statusMap = {
+                    pending: {color: "orange", text: "待处理"},
+                    processed: {color: "green", text: "已处理"},
+                    ignored: {color: "gray", text: "已忽略"},
+                }
+                const config = statusMap[status as keyof typeof statusMap]
+                return <Tag color={config.color}>{config.text}</Tag>
+            },
+        },
+        {
+            title: "操作",
+            key: "action",
+            render: (_, record: any) => (
+                <Space>
+                    {record.status === "pending" && (
+                        <>
+                            <Button type="link" onClick={() => handleProcessAlert(record.id)}>
+                                处理
+                            </Button>
+                            <Button type="link" onClick={() => handleIgnoreAlert(record.id)}>
+                                忽略
+                            </Button>
+                        </>
+                    )}
+                    {record.status !== "pending" && <span className="text-gray-400">已处理</span>}
+                </Space>
+            ),
+        },
+    ]
 
-      case "alerts":
-        return (
-          <div className="space-y-6">
-            <Row gutter={16}>
-              <Col span={6}>
-                <Card>
-                  <Statistic title="今日告警" value={alerts.length} valueStyle={{ color: "#f5222d" }} />
-                </Card>
-              </Col>
-              <Col span={6}>
-                <Card>
-                  <Statistic
-                    title="待处理"
-                    value={alerts.filter((a) => a.status === "pending").length}
-                    valueStyle={{ color: "#faad14" }}
-                  />
-                </Card>
-              </Col>
-              <Col span={6}>
-                <Card>
-                  <Statistic
-                    title="已处理"
-                    value={alerts.filter((a) => a.status === "processed").length}
-                    valueStyle={{ color: "#52c41a" }}
-                  />
-                </Card>
-              </Col>
-              <Col span={6}>
-                <Card>
-                  <Statistic
-                    title="已忽略"
-                    value={alerts.filter((a) => a.status === "ignored").length}
-                    valueStyle={{ color: "#d9d9d9" }}
-                  />
-                </Card>
-              </Col>
-            </Row>
-
-            <Card title="监测报警记录">
-              <Table columns={alertColumns} dataSource={alerts} rowKey="id" pagination={{ pageSize: 10 }} />
-            </Card>
-          </div>
-        )
+    const renderContent = () => {
+        switch (selectedMenu) {
+            case "home":
+                return (
+                    <div>
+                        <div className="space-y-6" style={{height: '93vh', backgroundColor: '#3a3899'}}>
+                            <div className="flex m-0" style={{height: '70%'}}>
+                                <div className="" style={{width: '25%'}}>
+                                    <div className='' style={{height: '50%'}}>
+                                        <div style={{
+                                            height: '12%',
+                                            backgroundImage: 'url(/boxTitle.png)',
+                                            backgroundSize: '100% 100%',
+                                            textAlign: 'left',
+                                            color: 'white',
+                                            fontSize: '18px',
+                                            fontWeight: 'bold',
+                                            paddingLeft: '20px'
+                                        }}>
+                                            待办工单
+                                        </div>
+                                        <div className='' style={{
+                                            height: '88%',
+                                            backgroundImage: 'url(/eject.PNG)',
+                                            backgroundSize: '100% 100%',
+                                            padding: '10px'
+                                        }}>
+                                            <DbgdData></DbgdData>
+                                        </div>
+                                    </div>
+
+                                    <div className='' style={{height: '50%'}}>
+                                        <div style={{
+                                            height: '12%',
+                                            backgroundImage: 'url(/boxTitle.png)',
+                                            backgroundSize: '100% 100%',
+                                            textAlign: 'left',
+                                            color: 'white',
+                                            fontSize: '18px',
+                                            fontWeight: 'bold',
+                                            paddingLeft: '20px'
+                                        }}>
+                                            告警类型统计（15天内）
+                                        </div>
+                                        <div className='' style={{
+                                            height: '88%',
+                                            backgroundImage: 'url(/eject.PNG)',
+                                            backgroundSize: '100% 100%'
+                                        }}>
+                                            <PicEcharts
+                                                // title="告警类型统计"
+                                                data={[
+                                                    {value: 335, name: '位移告警'},
+                                                    {value: 310, name: '倾斜告警'},
+                                                    {value: 234, name: '水位告警'},
+                                                    {value: 135, name: '电压告警'},
+                                                    {value: 1548, name: '温度告警'}
+                                                ]}
+                                                style={{height: '100%', width: '100%'}}
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div className="" style={{width: '70%'}}>
+                                    <GisMapJinggai height={'65'}/>
+                                </div>
+
+                                <div className="" style={{width: '25%'}}>
+                                    <div className='' style={{height: '100%'}}>
+                                        <div style={{
+                                            height: '6%',
+                                            backgroundImage: 'url(/boxTitle.png)',
+                                            backgroundSize: '100% 100%',
+                                            textAlign: 'left',
+                                            color: 'white',
+                                            fontSize: '18px',
+                                            fontWeight: 'bold',
+                                            paddingLeft: '20px'
+                                        }}>
+                                            设备列表
+                                        </div>
+                                        {/* 修改表格容器样式，添加背景色覆盖白色区域 */}
+                                        <div className='' style={{
+                                            height: '94%',
+                                            backgroundImage: 'url(/eject.PNG)',
+                                            backgroundSize: '100% 100%',
+                                            padding: '40px 20px 40px 20px',
+                                            boxSizing: 'border-box',
+                                            overflowY: 'hidden',
+                                            backgroundColor: '#3a3899'  // 添加与页面主色调一致的背景色
+                                        }}>
+                                            <div style={{height: '100%',}}>
+                                                <Sbledata></Sbledata>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div className="flex m-0" style={{height: '30%', justifyContent: 'space-evenly'}}>
+                                <div style={{width: '33%'}}>
+                                    <div style={{
+                                        height: '12%',
+                                        backgroundImage: 'url(/boxTitle.png)',
+                                        backgroundSize: '100% 100%',
+                                        textAlign: 'left',
+                                        color: 'white',
+                                        fontSize: '18px',
+                                        fontWeight: 'bold',
+                                        paddingLeft: '30px'
+                                    }}>
+                                        设备区域信息
+                                    </div>
+                                    <div className='' style={{
+                                        height: '88%',
+                                        backgroundImage: 'url(/eject.PNG)',
+                                        backgroundSize: '100% 100%'
+                                    }}>
+                                        <SbqyxxData
+                                            data={[
+                                                {value: 81, name: '太安社区'},
+                                                {value: 85, name: '桃花岭社区'},
+                                                {value: 60, name: '龙泉山社区'},
+                                                {value: 45, name: '鸳鸯山社区'},
+                                                {value: 50, name: '龙兴社区'},
+                                                {value: 55, name: '胜利门社区'},
+                                                {value: 88, name: '鹤鸣山社区'},
+                                                {value: 25, name: '教场坪社区'},
+                                                {value: 45, name: '荷花池社区'},
+                                                {value: 22, name: '廻龙山社区'},
+                                                {value: 35, name: '凤鸣塔社区'},
+                                                {value: 35, name: '望圣坡社区'},
+                                                {value: 22, name: '凤凰山社区'},
+                                                {value: 58, name: '苦藤铺社区'},
+                                                {value: 75, name: '黄草尾社区'},
+                                                {value: 65, name: '老鸦溪社区'},
+                                                {value: 66, name: '渔家巷社区'}
+                                            ]}
+                                            style={{height: '99%', width: '100%'}}
+                                        />
+                                    </div>
+                                </div>
+                                <div style={{width: '33%'}}>
+                                    <div style={{
+                                        height: '12%',
+                                        backgroundImage: 'url(/boxTitle.png)',
+                                        backgroundSize: '100% 100%',
+                                        textAlign: 'left',
+                                        color: 'white',
+                                        fontSize: '18px',
+                                        fontWeight: 'bold',
+                                        paddingLeft: '30px'
+                                    }}>
+                                        设备分类
+                                    </div>
+                                    <div className='' style={{
+                                        height: '88%',
+                                        backgroundImage: 'url(/eject.PNG)',
+                                        backgroundSize: '100% 100%'
+                                    }}>
+                                        <BarChart
+                                            data={[
+                                                {value: 120, name: '电用井盖'},
+                                                {value: 85, name: '供水井盖'},
+                                                {value: 60, name: '通信井盖'},
+                                                {value: 45, name: '燃气井盖'},
+                                                {value: 30, name: '污水井盖'},
+                                                {value: 30, name: '雨水井盖'},
+                                                {value: 30, name: '路灯井盖'},
+                                                {value: 30, name: '网络井盖'},
+                                                {value: 30, name: '电缆井盖'},
+                                                {value: 30, name: '园林井盖'},
+                                                {value: 30, name: '化粪池井盖'}
+                                            ]}
+                                            style={{height: '99%', width: '100%'}}
+                                        />
+                                    </div>
+                                </div>
+                                <div style={{width: '33%'}}>
+                                    <div style={{
+                                        height: '12%',
+                                        backgroundImage: 'url(/boxTitle.png)',
+                                        backgroundSize: '100% 100%',
+                                        textAlign: 'left',
+                                        color: 'white',
+                                        fontSize: '18px',
+                                        fontWeight: 'bold',
+                                        paddingLeft: '30px'
+                                    }}>
+                                        动态信息
+                                    </div>
+                                    <div className='' style={{
+                                        height: '88%',
+                                        backgroundImage: 'url(/eject.PNG)',
+                                        backgroundSize: '100% 100%',
+                                        padding: '20px'
+                                    }}>
+                                        <Dtxxdata height={'100%'} width={'100%'}/>
+                                    </div>
+                                </div>
+                            </div>
+
+                        </div>
+                        {/*<div>*/}
+                        {/*    <GisMapJinggai height={'100'}/>*/}
+                        {/*</div>*/}
+                    </div>
+                )
+
+            case "dashboard":
+                return (
+                    <div className="space-y-6">
+                        {/* 统计卡片 */}
+                        <Row gutter={16}>
+                            <Col span={6}>
+                                <Card>
+                                    <Statistic title="设备总数" value={deviceStats.total} valueStyle={{color: "#1890ff"}}/>
+                                </Card>
+                            </Col>
+                            <Col span={6}>
+                                <Card>
+                                    <Statistic title="正常设备" value={deviceStats.normal} valueStyle={{color: "#52c41a"}}/>
+                                </Card>
+                            </Col>
+                            <Col span={6}>
+                                <Card>
+                                    <Statistic title="告警设备" value={deviceStats.warning}
+                                               valueStyle={{color: "#faad14"}}/>
+                                </Card>
+                            </Col>
+                            <Col span={6}>
+                                <Card>
+                                    <Statistic title="故障设备" value={deviceStats.error} valueStyle={{color: "#f5222d"}}/>
+                                </Card>
+                            </Col>
+                        </Row>
+
+                        {/* 图表展示 */}
+                        <Row gutter={16}>
+                            <Col span={12}>
+                                <Card title="设备区域分布">
+                                    <EChart option={regionChartOption}/>
+                                </Card>
+                            </Col>
+                            <Col span={12}>
+                                <Card title="设备状态分布">
+                                    <EChart option={statusChartOption}/>
+                                </Card>
+                            </Col>
+                        </Row>
+
+                        {/* 实时监测趋势 */}
+                        <Card title="实时监测数据趋势">
+                            <EChart option={monitoringChartOption}/>
+                        </Card>
+                    </div>
+                )
+
+            case "devices":
+                return (
+                    <div className="space-y-6">
+                        <Card
+                            title="监测设备台账"
+                            extra={
+                                <Button type="primary" icon={<PlusOutlined/>}
+                                        onClick={() => setAddDeviceModalVisible(true)}>
+                                    添加设备
+                                </Button>
+                            }
+                        >
+                            <Table columns={deviceColumns} dataSource={devices} rowKey="id"
+                                   pagination={{pageSize: 10}}/>
+                        </Card>
+                    </div>
+                )
+
+            case "map":
+                return (
+                    <div className="space-y-6">
+                        <Card title="监测设备 GIS 一张图">
+                            <div style={{height: "600px"}}>
+                                <GisMapBaidu height={'50'}/>
+                            </div>
+                        </Card>
+                    </div>
+                )
+
+            case "monitoring":
+                return (
+                    <div className="space-y-6" style={{paddingLeft:'10px'}}>
+                        <Tabs defaultActiveKey="realtime">
+                            <TabPane tab="实时监测" key="realtime">
+                                <RTMMGis height={'86.2'}></RTMMGis>
+                            </TabPane>
+
+                            <TabPane tab="窑井状态监测" key="data">
+                                <Card title="窑井状态监测">
+                                    <EChart option={monitoringChartOption}/>
+                                </Card>
+                            </TabPane>
+                        </Tabs>
+                    </div>
+                )
+
+            case "alerts":
+                return (
+                    <div className="space-y-6">
+                        <Row gutter={16}>
+                            <Col span={6}>
+                                <Card>
+                                    <Statistic title="今日告警" value={alerts.length} valueStyle={{color: "#f5222d"}}/>
+                                </Card>
+                            </Col>
+                            <Col span={6}>
+                                <Card>
+                                    <Statistic
+                                        title="待处理"
+                                        value={alerts.filter((a) => a.status === "pending").length}
+                                        valueStyle={{color: "#faad14"}}
+                                    />
+                                </Card>
+                            </Col>
+                            <Col span={6}>
+                                <Card>
+                                    <Statistic
+                                        title="已处理"
+                                        value={alerts.filter((a) => a.status === "processed").length}
+                                        valueStyle={{color: "#52c41a"}}
+                                    />
+                                </Card>
+                            </Col>
+                            <Col span={6}>
+                                <Card>
+                                    <Statistic
+                                        title="已忽略"
+                                        value={alerts.filter((a) => a.status === "ignored").length}
+                                        valueStyle={{color: "#d9d9d9"}}
+                                    />
+                                </Card>
+                            </Col>
+                        </Row>
+
+                        <Card title="监测报警记录">
+                            <Table columns={alertColumns} dataSource={alerts} rowKey="id" pagination={{pageSize: 10}}/>
+                        </Card>
+                    </div>
+                )
+
+            case "settlement":
+                return (
+                    <div className="space-y-6 p-2">
+                        <Tabs defaultActiveKey="realtime">
+                            <TabPane tab="案件流转管理" key="realtime">
+                                <Row gutter={16}>
+                                    <Col span={24}>
+                                        <Card title="案件流转管理">
+                                            <div style={{height: "500px"}}>
+                                                <MapView devices={devices} showRealTimeData/>
+                                            </div>
+                                        </Card>
+                                    </Col>
+                                </Row>
+                            </TabPane>
+
+                            <TabPane tab="工单处置管理" key="data">
+                                <Card title="工单处置管理">
+                                    <EChart option={monitoringChartOption}/>
+                                </Card>
+                            </TabPane>
 
-      default:
-        return <div>页面开发中...</div>
+                            <TabPane tab="经办工单" key="data1">
+                                <Card title="经办工单">
+                                    <EChart option={monitoringChartOption}/>
+                                </Card>
+                            </TabPane>
+
+                            <TabPane tab="办结工单" key="data2">
+                                <Card title="办结工单">
+                                    <EChart option={monitoringChartOption}/>
+                                </Card>
+                            </TabPane>
+                        </Tabs>
+                    </div>
+                )
+            default:
+                return <div>页面开发中...</div>
+        }
     }
-  }
-
-  return (
-    <Layout className="min-h-screen">
-      <Header className="bg-blue-600 text-white" style={{backgroundColor:'white'}}>
-        <div className="flex items-center justify-between">
-          <h1 className="text-xl font-bold">窨井盖安全运行监测子系统</h1>
-          <div className="text-sm">当前时间: {new Date().toLocaleString("zh-CN")}</div>
-        </div>
-      </Header>
-
-      <Layout>
-        <Sider width={200} className="bg-white">
-          <Menu
-            mode="inline"
-            selectedKeys={[selectedMenu]}
-            onClick={({ key }) => setSelectedMenu(key)}
-            className="h-full border-r"
-          >
-            <Menu.Item key="dashboard" icon={<DashboardOutlined />}>
-              监控面板
-            </Menu.Item>
-            <Menu.Item key="devices" icon={<SettingOutlined />}>
-              设备管理
-            </Menu.Item>
-            <Menu.Item key="map" icon={<EnvironmentOutlined />}>
-              GIS地图
-            </Menu.Item>
-            <Menu.Item key="monitoring" icon={<BarChartOutlined />}>
-              实时监测
-            </Menu.Item>
-            <Menu.Item key="alerts" icon={<AlertOutlined />}>
-              报警管理
-            </Menu.Item>
-          </Menu>
-        </Sider>
-
-        <Layout className="p-6">
-          <Content className="bg-gray-50 min-h-full">{renderContent()}</Content>
-        </Layout>
-      </Layout>
-
-      {/* 设备详情弹窗 */}
-      <Modal
-        title="设备详情"
-        open={deviceModalVisible}
-        onCancel={() => setDeviceModalVisible(false)}
-        footer={null}
-        width={600}
-      >
-        {selectedDevice && (
-          <div className="space-y-4">
-            <Row gutter={16}>
-              <Col span={12}>
-                <div>
-                  <strong>设备编号:</strong> {selectedDevice.name}
-                </div>
-              </Col>
-              <Col span={12}>
-                <div>
-                  <strong>设备类型:</strong> {selectedDevice.type}
-                </div>
-              </Col>
-            </Row>
-            <Row gutter={16}>
-              <Col span={12}>
-                <div>
-                  <strong>所在位置:</strong> {selectedDevice.location}
-                </div>
-              </Col>
-              <Col span={12}>
-                <div>
-                  <strong>运维状态:</strong>
-                  <Badge
-                    status={selectedDevice.status === "normal" ? "success" : "error"}
-                    text={selectedDevice.status === "normal" ? "正常" : "异常"}
-                  />
-                </div>
-              </Col>
-            </Row>
-            <Row gutter={16}>
-              <Col span={12}>
-                <div>
-                  <strong>电池电量:</strong> {selectedDevice.battery}%
-                </div>
-              </Col>
-              <Col span={12}>
-                <div>
-                  <strong>信号强度:</strong> {selectedDevice.signal}%
+
+    return (
+        <Layout className="min-h-screen">
+            <Header className="bg-blue-600 text-white" style={{backgroundColor: 'white'}}>
+                <div className="flex items-center justify-between">
+                    <h1 className="text-xl font-bold">窨井盖安全运行监测子系统</h1>
+                    <div className="text-sm">当前时间: {new Date().toLocaleString("zh-CN")}</div>
                 </div>
-              </Col>
-            </Row>
-          </div>
-        )}
-      </Modal>
-
-      {/* 添加设备弹窗 */}
-      <Modal
-        title="添加设备"
-        open={addDeviceModalVisible}
-        onCancel={() => {
-          setAddDeviceModalVisible(false)
-          addDeviceForm.resetFields()
-        }}
-        onOk={() => addDeviceForm.submit()}
-        width={600}
-      >
-        <Form form={addDeviceForm} layout="vertical" onFinish={handleAddDevice}>
-          <Row gutter={16}>
-            <Col span={12}>
-              <Form.Item name="name" label="设备编号" rules={[{ required: true, message: "请输入设备编号" }]}>
-                <Input placeholder="请输入设备编号" />
-              </Form.Item>
-            </Col>
-            <Col span={12}>
-              <Form.Item name="type" label="设备类型" rules={[{ required: true, message: "请选择设备类型" }]}>
-                <Select placeholder="请选择设备类型">
-                  <Option value="智能井盖">智能井盖</Option>
-                  <Option value="传感器">传感器</Option>
-                  <Option value="监控设备">监控设备</Option>
-                </Select>
-              </Form.Item>
-            </Col>
-          </Row>
-          <Row gutter={16}>
-            <Col span={12}>
-              <Form.Item name="status" label="运维状态" rules={[{ required: true, message: "请选择运维状态" }]}>
-                <Select placeholder="请选择运维状态">
-                  <Option value="normal">正常</Option>
-                  <Option value="warning">告警</Option>
-                  <Option value="error">故障</Option>
-                  <Option value="maintenance">维修中</Option>
-                </Select>
-              </Form.Item>
-            </Col>
-            <Col span={12}>
-              <Form.Item name="location" label="所在位置" rules={[{ required: true, message: "请输入所在位置" }]}>
-                <Input placeholder="请输入所在位置" />
-              </Form.Item>
-            </Col>
-          </Row>
-          <Row gutter={16}>
-            <Col span={12}>
-              <Form.Item name="lat" label="纬度" rules={[{ required: true, message: "请输入纬度" }]}>
-                <Input placeholder="请输入纬度" type="number" step="0.000001" />
-              </Form.Item>
-            </Col>
-            <Col span={12}>
-              <Form.Item name="lng" label="经度" rules={[{ required: true, message: "请输入经度" }]}>
-                <Input placeholder="请输入经度" type="number" step="0.000001" />
-              </Form.Item>
-            </Col>
-          </Row>
-          <Row gutter={16}>
-            <Col span={12}>
-              <Form.Item name="battery" label="电池电量(%)" rules={[{ required: true, message: "请输入电池电量" }]}>
-                <Input placeholder="请输入电池电量" type="number" min="0" max="100" />
-              </Form.Item>
-            </Col>
-            <Col span={12}>
-              <Form.Item name="signal" label="信号强度(%)" rules={[{ required: true, message: "请输入信号强度" }]}>
-                <Input placeholder="请输入信号强度" type="number" min="0" max="100" />
-              </Form.Item>
-            </Col>
-          </Row>
-        </Form>
-      </Modal>
-
-      {/* 编辑设备弹窗 */}
-      <Modal
-        title="编辑设备"
-        open={editDeviceModalVisible}
-        onCancel={() => {
-          setEditDeviceModalVisible(false)
-          setEditingDevice(null)
-          editDeviceForm.resetFields()
-        }}
-        onOk={() => editDeviceForm.submit()}
-        width={600}
-      >
-        <Form form={editDeviceForm} layout="vertical" onFinish={handleEditDevice}>
-          <Row gutter={16}>
-            <Col span={12}>
-              <Form.Item name="name" label="设备编号" rules={[{ required: true, message: "请输入设备编号" }]}>
-                <Input placeholder="请输入设备编号" />
-              </Form.Item>
-            </Col>
-            <Col span={12}>
-              <Form.Item name="type" label="设备类型" rules={[{ required: true, message: "请选择设备类型" }]}>
-                <Select placeholder="请选择设备类型">
-                  <Option value="智能井盖">智能井盖</Option>
-                  <Option value="传感器">传感器</Option>
-                  <Option value="监控设备">监控设备</Option>
-                </Select>
-              </Form.Item>
-            </Col>
-          </Row>
-          <Row gutter={16}>
-            <Col span={12}>
-              <Form.Item name="status" label="运维状态" rules={[{ required: true, message: "请选择运维状态" }]}>
-                <Select placeholder="请选择运维状态">
-                  <Option value="normal">正常</Option>
-                  <Option value="warning">告警</Option>
-                  <Option value="error">故障</Option>
-                  <Option value="maintenance">维修中</Option>
-                </Select>
-              </Form.Item>
-            </Col>
-            <Col span={12}>
-              <Form.Item name="location" label="所在位置" rules={[{ required: true, message: "请输入所在位置" }]}>
-                <Input placeholder="请输入所在位置" />
-              </Form.Item>
-            </Col>
-          </Row>
-          <Row gutter={16}>
-            <Col span={12}>
-              <Form.Item name="lat" label="纬度" rules={[{ required: true, message: "请输入纬度" }]}>
-                <Input placeholder="请输入纬度" type="number" step="0.000001" />
-              </Form.Item>
-            </Col>
-            <Col span={12}>
-              <Form.Item name="lng" label="经度" rules={[{ required: true, message: "请输入经度" }]}>
-                <Input placeholder="请输入经度" type="number" step="0.000001" />
-              </Form.Item>
-            </Col>
-          </Row>
-          <Row gutter={16}>
-            <Col span={12}>
-              <Form.Item name="battery" label="电池电量(%)" rules={[{ required: true, message: "请输入电池电量" }]}>
-                <Input placeholder="请输入电池电量" type="number" min="0" max="100" />
-              </Form.Item>
-            </Col>
-            <Col span={12}>
-              <Form.Item name="signal" label="信号强度(%)" rules={[{ required: true, message: "请输入信号强度" }]}>
-                <Input placeholder="请输入信号强度" type="number" min="0" max="100" />
-              </Form.Item>
-            </Col>
-          </Row>
-        </Form>
-      </Modal>
-    </Layout>
-  )
+            </Header>
+            <Layout>
+                <Sider width={200} className="bg-white">
+                    <Menu
+                        mode="inline"
+                        selectedKeys={[selectedMenu]}
+                        onClick={({key}) => setSelectedMenu(key)}
+                        className="h-full border-r"
+                    >
+                        <Menu.Item key="home" icon={<HomeOutlined/>}>
+                            GIS地图
+                        </Menu.Item>
+                        <Menu.Item key="dashboard" icon={<DashboardOutlined/>}>
+                            监控面板
+                        </Menu.Item>
+                        <Menu.Item key="devices" icon={<SettingOutlined/>}>
+                            设备管理
+                        </Menu.Item>
+                        {/*<Menu.Item key="map" icon={<EnvironmentOutlined/>}>*/}
+                        {/*    GIS地图*/}
+                        {/*</Menu.Item>*/}
+                        <Menu.Item key="monitoring" icon={<BarChartOutlined/>}>
+                            实时监测
+                        </Menu.Item>
+                        <Menu.Item key="alerts" icon={<AlertOutlined/>}>
+                            报警管理
+                        </Menu.Item>
+                        <Menu.Item key="settlement" icon={<DatabaseOutlined/>}>
+                            案件办结
+                        </Menu.Item>
+                    </Menu>
+                </Sider>
+
+                <Layout>
+                    <Content className="bg-gray-50 min-h-full">{renderContent()}</Content>
+                </Layout>
+            </Layout>
+            {/* 设备详情弹窗 */}
+            <Modal
+                title="设备详情"
+                open={deviceModalVisible}
+                onCancel={() => setDeviceModalVisible(false)}
+                footer={null}
+                width={600}
+            >
+                {selectedDevice && (
+                    <div className="space-y-4">
+                        <Row gutter={16}>
+                            <Col span={12}>
+                                <div>
+                                    <strong>设备编号:</strong> {selectedDevice.name}
+                                </div>
+                            </Col>
+                            <Col span={12}>
+                                <div>
+                                    <strong>设备类型:</strong> {selectedDevice.type}
+                                </div>
+                            </Col>
+                        </Row>
+                        <Row gutter={16}>
+                            <Col span={12}>
+                                <div>
+                                    <strong>所在位置:</strong> {selectedDevice.location}
+                                </div>
+                            </Col>
+                            <Col span={12}>
+                                <div>
+                                    <strong>运维状态:</strong>
+                                    <Badge
+                                        status={selectedDevice.status === "normal" ? "success" : "error"}
+                                        text={selectedDevice.status === "normal" ? "正常" : "异常"}
+                                    />
+                                </div>
+                            </Col>
+                        </Row>
+                        <Row gutter={16}>
+                            <Col span={12}>
+                                <div>
+                                    <strong>电池电量:</strong> {selectedDevice.battery}%
+                                </div>
+                            </Col>
+                            <Col span={12}>
+                                <div>
+                                    <strong>信号强度:</strong> {selectedDevice.signal}%
+                                </div>
+                            </Col>
+                        </Row>
+                    </div>
+                )}
+            </Modal>
+
+            {/* 添加设备弹窗 */}
+            <Modal
+                title="添加设备"
+                open={addDeviceModalVisible}
+                onCancel={() => {
+                    setAddDeviceModalVisible(false)
+                    addDeviceForm.resetFields()
+                }}
+                onOk={() => addDeviceForm.submit()}
+                width={600}
+            >
+                <Form form={addDeviceForm} layout="vertical" onFinish={handleAddDevice}>
+                    <Row gutter={16}>
+                        <Col span={12}>
+                            <Form.Item name="name" label="设备编号" rules={[{required: true, message: "请输入设备编号"}]}>
+                                <Input placeholder="请输入设备编号"/>
+                            </Form.Item>
+                        </Col>
+                        <Col span={12}>
+                            <Form.Item name="type" label="设备类型" rules={[{required: true, message: "请选择设备类型"}]}>
+                                <Select placeholder="请选择设备类型">
+                                    <Option value="智能井盖">智能井盖</Option>
+                                    <Option value="传感器">传感器</Option>
+                                    <Option value="监控设备">监控设备</Option>
+                                </Select>
+                            </Form.Item>
+                        </Col>
+                    </Row>
+                    <Row gutter={16}>
+                        <Col span={12}>
+                            <Form.Item name="status" label="运维状态" rules={[{required: true, message: "请选择运维状态"}]}>
+                                <Select placeholder="请选择运维状态">
+                                    <Option value="normal">正常</Option>
+                                    <Option value="warning">告警</Option>
+                                    <Option value="error">故障</Option>
+                                    <Option value="maintenance">维修中</Option>
+                                </Select>
+                            </Form.Item>
+                        </Col>
+                        <Col span={12}>
+                            <Form.Item name="location" label="所在位置" rules={[{required: true, message: "请输入所在位置"}]}>
+                                <Input placeholder="请输入所在位置"/>
+                            </Form.Item>
+                        </Col>
+                    </Row>
+                    <Row gutter={16}>
+                        <Col span={12}>
+                            <Form.Item name="lat" label="纬度" rules={[{required: true, message: "请输入纬度"}]}>
+                                <Input placeholder="请输入纬度" type="number" step="0.000001"/>
+                            </Form.Item>
+                        </Col>
+                        <Col span={12}>
+                            <Form.Item name="lng" label="经度" rules={[{required: true, message: "请输入经度"}]}>
+                                <Input placeholder="请输入经度" type="number" step="0.000001"/>
+                            </Form.Item>
+                        </Col>
+                    </Row>
+                    <Row gutter={16}>
+                        <Col span={12}>
+                            <Form.Item name="battery" label="电池电量(%)" rules={[{required: true, message: "请输入电池电量"}]}>
+                                <Input placeholder="请输入电池电量" type="number" min="0" max="100"/>
+                            </Form.Item>
+                        </Col>
+                        <Col span={12}>
+                            <Form.Item name="signal" label="信号强度(%)" rules={[{required: true, message: "请输入信号强度"}]}>
+                                <Input placeholder="请输入信号强度" type="number" min="0" max="100"/>
+                            </Form.Item>
+                        </Col>
+                    </Row>
+                </Form>
+            </Modal>
+
+            {/* 编辑设备弹窗 */}
+            <Modal
+                title="编辑设备"
+                open={editDeviceModalVisible}
+                onCancel={() => {
+                    setEditDeviceModalVisible(false)
+                    setEditingDevice(null)
+                    editDeviceForm.resetFields()
+                }}
+                onOk={() => editDeviceForm.submit()}
+                width={600}
+            >
+                <Form form={editDeviceForm} layout="vertical" onFinish={handleEditDevice}>
+                    <Row gutter={16}>
+                        <Col span={12}>
+                            <Form.Item name="name" label="设备编号" rules={[{required: true, message: "请输入设备编号"}]}>
+                                <Input placeholder="请输入设备编号"/>
+                            </Form.Item>
+                        </Col>
+                        <Col span={12}>
+                            <Form.Item name="type" label="设备类型" rules={[{required: true, message: "请选择设备类型"}]}>
+                                <Select placeholder="请选择设备类型">
+                                    <Option value="智能井盖">智能井盖</Option>
+                                    <Option value="传感器">传感器</Option>
+                                    <Option value="监控设备">监控设备</Option>
+                                </Select>
+                            </Form.Item>
+                        </Col>
+                    </Row>
+                    <Row gutter={16}>
+                        <Col span={12}>
+                            <Form.Item name="status" label="运维状态" rules={[{required: true, message: "请选择运维状态"}]}>
+                                <Select placeholder="请选择运维状态">
+                                    <Option value="normal">正常</Option>
+                                    <Option value="warning">告警</Option>
+                                    <Option value="error">故障</Option>
+                                    <Option value="maintenance">维修中</Option>
+                                </Select>
+                            </Form.Item>
+                        </Col>
+                        <Col span={12}>
+                            <Form.Item name="location" label="所在位置" rules={[{required: true, message: "请输入所在位置"}]}>
+                                <Input placeholder="请输入所在位置"/>
+                            </Form.Item>
+                        </Col>
+                    </Row>
+                    <Row gutter={16}>
+                        <Col span={12}>
+                            <Form.Item name="lat" label="纬度" rules={[{required: true, message: "请输入纬度"}]}>
+                                <Input placeholder="请输入纬度" type="number" step="0.000001"/>
+                            </Form.Item>
+                        </Col>
+                        <Col span={12}>
+                            <Form.Item name="lng" label="经度" rules={[{required: true, message: "请输入经度"}]}>
+                                <Input placeholder="请输入经度" type="number" step="0.000001"/>
+                            </Form.Item>
+                        </Col>
+                    </Row>
+                    <Row gutter={16}>
+                        <Col span={12}>
+                            <Form.Item name="battery" label="电池电量(%)" rules={[{required: true, message: "请输入电池电量"}]}>
+                                <Input placeholder="请输入电池电量" type="number" min="0" max="100"/>
+                            </Form.Item>
+                        </Col>
+                        <Col span={12}>
+                            <Form.Item name="signal" label="信号强度(%)" rules={[{required: true, message: "请输入信号强度"}]}>
+                                <Input placeholder="请输入信号强度" type="number" min="0" max="100"/>
+                            </Form.Item>
+                        </Col>
+                    </Row>
+                </Form>
+            </Modal>
+        </Layout>
+    )
 }

app/layout.tsx

@@ -8,33 +8,33 @@ import '@ant-design/v5-patch-for-react-19';
 import zhCN from 'antd/locale/zh_CN';
 
 export const metadata: Metadata = {
-  title: "MorTnon RuoYi",
-  description: "MorTnon 版本高级 RuoYi 前台",
+    title: "MorTnon RuoYi",
+    description: "MorTnon 版本高级 RuoYi 前台",
 };
 
 export default function RootLayout({
-                                     children,
+                                       children,
                                    }: Readonly<{
-  children: React.ReactNode;
+    children: React.ReactNode;
 }>) {
-  return (
-    <html lang="en">
-    <body>
-    <AntdRegistry>
-      <App>
-        <ConfigProvider theme={{hashed: false}} locale={zhCN}>
-          {children}
-        </ConfigProvider>
-      </App>
-    </AntdRegistry>
-    </body>
-    <script
-        type="text/javascript"
-        src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=jWDCUpsk33htQsF6IEwk4ctkERTOFFH0"
-    ></script>
-    <script src="https://unpkg.com/mapv-three@1.0.10/dist/mapvthree.umd.js"></script>
-    <script src="//mapv.baidu.com/build/mapv.min.js"></script>
-    <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.189/dist/mapvgl.min.js"></script>
-    </html>
-  );
+    return (
+        <html lang="en">
+        <body>
+        <AntdRegistry>
+            <App>
+                <ConfigProvider theme={{hashed: false}} locale={zhCN}>
+                    {children}
+                </ConfigProvider>
+            </App>
+        </AntdRegistry>
+        </body>
+        <script
+            type="text/javascript"
+            src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=jWDCUpsk33htQsF6IEwk4ctkERTOFFH0"
+        ></script>
+        <script src="https://unpkg.com/mapv-three@1.0.10/dist/mapvthree.umd.js"></script>
+        <script src="//mapv.baidu.com/build/mapv.min.js"></script>
+        <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.189/dist/mapvgl.min.js"></script>
+        </html>
+    );
 }

components/GISModule/DbgdData.tsx

@@ -0,0 +1,568 @@
+import React, {useState} from "react";
+import {Badge, Col, ConfigProvider, message, Modal, Row, Table, Timeline,} from "antd"
+
+export default function getGisSbleData(props: { height: string }) {
+    // 添加图片预览相关状态
+    const [previewImage, setPreviewImage] = useState<string | null>(null);
+    const [previewVisible, setPreviewVisible] = useState(false);
+    // 设备列表状态
+    const [TodoWorkOrder, setTodoWorkOrder] = useState(false)
+    const [TodoWorkOrderDevice, setTodoWorkOrderDevice] = useState(null)
+    // 添加工单表格数据和列定义
+    const todoWorkOrders = [
+        {
+            id: '1',  // 添加唯一 id 作为 rowKey
+            equipmentId: 'WO202309001',
+            EventLevel: 'high',
+            EventClassification: '污水井盖',
+            Region: '区域一',
+            ReportPerson: '张三',
+            CurrentLink: '维护中',
+            EventDescription: '井盖出现裂痕，需要维修',
+            PictureBeforeDisposal: 'sunhuaiManhole.png',
+            deviceName: '井盖一',
+            createTime: '2023-09-15 08:30:00',
+            status: 'pending',
+            type: '故障维修',
+        }, {
+            id: '2',  // 添加唯一 id 作为 rowKey
+            equipmentId: 'WO202309002',
+            EventLevel: 'low',
+            EventClassification: '污水井盖',
+            Region: '区域一',
+            ReportPerson: '张三',
+            CurrentLink: '维护中',
+            EventDescription: '井盖出现裂痕，需要维修',
+            PictureBeforeDisposal: 'sunhuaiManhole.png',
+            deviceName: '井盖二',
+            createTime: '2023-09-15 08:30:00',
+            status: 'pending',
+            type: '故障维修',
+        }, {
+            id: '3',  // 添加唯一 id 作为 rowKey
+            equipmentId: 'WO202309003',
+            EventLevel: 'low',
+            EventClassification: '污水井盖',
+            Region: '区域一',
+            ReportPerson: '张三',
+            CurrentLink: '维护中',
+            EventDescription: '井盖出现裂痕，需要维修',
+            PictureBeforeDisposal: 'sunhuaiManhole.png',
+            deviceName: '井盖三',
+            createTime: '2023-09-15 08:30:00',
+            status: 'pending',
+            type: '故障维修',
+        }, {
+            id: '4',  // 添加唯一 id 作为 rowKey
+            equipmentId: 'WO202309004',
+            EventLevel: 'low',
+            EventClassification: '污水井盖',
+            Region: '区域一',
+            ReportPerson: '张三',
+            CurrentLink: '维护中',
+            EventDescription: '井盖出现裂痕，需要维修',
+            PictureBeforeDisposal: 'sunhuaiManhole.png',
+            deviceName: '井盖四',
+            createTime: '2023-09-15 08:30:00',
+            status: 'pending',
+            type: '故障维修',
+        }, {
+            id: '5',  // 添加唯一 id 作为 rowKey
+            equipmentId: 'WO202309005',
+            EventLevel: 'medium',
+            EventClassification: '污水井盖',
+            Region: '区域一',
+            ReportPerson: '张三',
+            CurrentLink: '维护中',
+            EventDescription: '井盖出现裂痕，需要维修',
+            PictureBeforeDisposal: 'sunhuaiManhole.png',
+            deviceName: '井盖五',
+            createTime: '2023-09-15 08:30:00',
+            status: 'pending',
+            type: '故障维修',
+        }, {
+            id: '6',  // 添加唯一 id 作为 rowKey
+            equipmentId: 'WO202309006',
+            EventLevel: 'medium',
+            EventClassification: '污水井盖',
+            Region: '区域一',
+            ReportPerson: '张三',
+            CurrentLink: '维护中',
+            EventDescription: '井盖出现裂痕，需要维修',
+            PictureBeforeDisposal: 'sunhuaiManhole.png',
+            deviceName: '井盖六',
+            createTime: '2023-09-15 08:30:00',
+            status: 'pending',
+            type: '故障维修',
+        }
+    ];
+
+    const workOrderColumns = [
+        {
+            title: '工单编号',
+            dataIndex: 'equipmentId',
+            key: 'equipmentId',
+            width: '20%',
+            ellipsis: true,  // 添加省略号属性
+            render: (text) => <span style={{color: 'white', fontWeight: 'bold'}}>{text}</span>
+        },
+        {
+            title: '工单类型',
+            dataIndex: 'type',
+            key: 'type',
+            width: '18%',
+            ellipsis: true,  // 添加省略号属性
+            render: (text) => <span style={{color: 'white'}}>{text}</span>
+        },
+        {
+            title: '设备名称',
+            dataIndex: 'deviceName',
+            key: 'deviceName',
+            width: '18%',
+            ellipsis: true,  // 添加省略号属性
+            render: (text) => <span style={{color: 'white'}}>{text}</span>
+        },
+        {
+            title: '优先级',
+            dataIndex: 'EventLevel',
+            key: 'EventLevel',
+            width: '14%',
+            render: (priority) => {
+                const colorMap = {
+                    high: '#f5222d',
+                    medium: '#faad14',
+                    low: '#52c41a'
+                };
+                const textMap = {
+                    high: '高',
+                    medium: '中',
+                    low: '低'
+                };
+                return (
+                    <Badge color={colorMap[priority]} text={
+                        <span style={{color: colorMap[priority]}}>{textMap[priority]}</span>
+                    }/>
+                );
+            }
+        },
+    ];
+    // 添加工单行点击处理函数 - 修改为打开设备详情弹窗
+    const handleWorkOrderRowClick = (record) => {
+        // 根据工单中的设备名称查找对应的设备信息
+        const device = todoWorkOrders.find(device => device.deviceName === record.deviceName);
+        if (device) {
+            // 设置选中设备并打开弹窗
+            setTodoWorkOrderDevice(device);
+            setTodoWorkOrder(true);
+        } else {
+            message.warning(`未找到设备: ${record.deviceName}`);
+        }
+    };
+    return (
+        <ConfigProvider
+            theme={{
+                components: {
+                    Table: {
+                        headerBorderRadius: 0,
+                    },
+                },
+            }}
+        >
+            <div style={{height: props.height}}>
+                <Table
+                    className="custom-table"
+                    columns={workOrderColumns}
+                    dataSource={todoWorkOrders}
+                    rowKey="id"
+                    pagination={false}
+                    size="small"
+                    style={{backgroundColor: 'transparent', padding: '10px'}}
+                    // rowClassName={() => 'bg-[#3a3899]'}
+                    // 添加固定表头配置
+                    scroll={{x: 200, y: 180}}
+                    // 添加行点击事件
+                    onRow={(record) => ({
+                        onClick: () => handleWorkOrderRowClick(record),
+                        style: {
+                            cursor: 'pointer', // 鼠标悬停显示手型
+                        }
+                    })}
+                />
+                {/*待办工单详情*/}
+                <Modal
+                    title="待办工单详情"
+                    open={TodoWorkOrder}
+                    onCancel={() => setTodoWorkOrder(false)}
+                    // footer={null}
+                    width={1000}
+                    className="custom-modal"
+                    style={{
+                        textAlign: 'center'
+                    }}
+                >
+                    {TodoWorkOrderDevice && (
+                        <div className="space-y-4" style={{
+                            display: 'flex',
+                            justifyContent: 'space-between'
+                        }}>
+                            <div style={{
+                                width: '50%',
+                            }}>
+                                <div className="space-y-4" style={{textAlign: 'left'}}>
+                                    <Row>
+                                        <Col>
+                                            <div>
+                                                <strong style={{
+                                                    color: '#B0E0E6'
+                                                }}>设备名称:</strong> {TodoWorkOrderDevice.deviceName}
+                                            </div>
+                                        </Col>
+                                    </Row>
+                                    <Row>
+                                        <Col>
+                                            <div>
+                                                <strong style={{
+                                                    color: '#B0E0E6'
+                                                }}>设备类型:</strong> {TodoWorkOrderDevice.EventClassification}
+                                            </div>
+                                        </Col>
+                                    </Row>
+                                    <Row>
+                                        <Col>
+                                            <div>
+                                                <strong style={{
+                                                    color: '#B0E0E6'
+                                                }}>事件类型:</strong> {TodoWorkOrderDevice.type}
+                                            </div>
+                                        </Col>
+                                    </Row>
+                                    <Row>
+                                        <Col>
+                                            <div>
+                                                <strong style={{
+                                                    color: '#B0E0E6'
+                                                }}>事件描述:</strong> {TodoWorkOrderDevice.EventDescription}
+                                            </div>
+                                        </Col>
+                                    </Row>
+                                    <Row>
+                                        <Col>
+                                            <div>
+                                                <strong style={{
+                                                    color: '#B0E0E6'
+                                                }}>所属区域:</strong> {TodoWorkOrderDevice.Region}
+                                            </div>
+                                        </Col>
+                                    </Row>
+                                    <Row>
+                                        <Col>
+                                            <div>
+                                                <strong style={{
+                                                    color: '#B0E0E6'
+                                                }}>当前环节:</strong> {TodoWorkOrderDevice.CurrentLink}
+                                            </div>
+                                        </Col>
+                                    </Row>
+                                    <Row>
+                                        <Col>
+                                            <div>
+                                                <strong style={{
+                                                    color: '#B0E0E6'
+                                                }}>优先级:</strong>
+                                                <Badge
+                                                    style={{
+                                                        marginLeft: '10px'
+                                                    }}
+                                                    status={
+                                                        TodoWorkOrderDevice.EventLevel === "high" ? "error" :
+                                                            TodoWorkOrderDevice.EventLevel === "medium" ? "warning" : "success"
+                                                    }
+                                                    text={
+                                                        <span style={{
+                                                            color:
+                                                                TodoWorkOrderDevice.EventLevel === "high" ? "#f5222d" :
+                                                                    TodoWorkOrderDevice.EventLevel === "medium" ? "#faad14" : "#52c41a"
+                                                        }}>
+                                                        {
+                                                            TodoWorkOrderDevice.EventLevel === "high" ? "高优先级" :
+                                                                TodoWorkOrderDevice.EventLevel === "medium" ? "中优先级" : "低优先级"
+                                                        }
+                                                    </span>
+                                                    }
+                                                />
+                                            </div>
+                                        </Col>
+                                    </Row>
+
+                                    <Row>
+                                        <Col>
+                                            <div>
+                                                <strong style={{
+                                                    color: '#B0E0E6'
+                                                }}>上报人:</strong> {TodoWorkOrderDevice.ReportPerson}
+                                            </div>
+                                        </Col>
+                                    </Row>
+                                    <Row>
+                                        <Col>
+                                            <div>
+                                                <strong style={{
+                                                    color: '#B0E0E6'
+                                                }}>上报时间:</strong> {TodoWorkOrderDevice.createTime}
+                                            </div>
+                                        </Col>
+                                    </Row>
+                                    {/**/}
+                                    <Row>
+                                        <Col>
+                                            <div style={{display: 'flex'}}>
+                                                <strong style={{
+                                                    color: '#B0E0E6'
+                                                }}>现场图片:</strong>
+                                                <img
+                                                    src={TodoWorkOrderDevice.PictureBeforeDisposal}
+                                                    alt="现场图片"
+                                                    style={{width: '40%', marginLeft: '10px', cursor: 'pointer'}}
+                                                    onClick={() => {
+                                                        setPreviewImage(TodoWorkOrderDevice.PictureBeforeDisposal);
+                                                        setPreviewVisible(true);
+                                                    }}
+                                                />
+                                            </div>
+                                        </Col>
+                                    </Row>
+                                </div>
+                            </div>
+
+                            <div style={{width: '50%'}}>
+                                <div style={{
+                                    backgroundSize: '100% 100%',
+                                    textAlign: 'left',
+                                    color: 'white',
+                                    fontSize: '18px',
+                                    fontWeight: 'bold',
+                                    marginBottom: '10px' // 添加底部间距
+                                }}>
+                                    工单处理流程
+                                </div>
+                                <div style={{
+                                    textAlign: 'left',
+                                    height: '500px', // 设置固定高度
+                                    overflowY: 'auto', // 垂直方向超出时显示滚动条
+                                    padding: '10px' // 添加内边距，优化视觉效果
+                                }}>
+                                    <Timeline
+                                        items={[
+                                            {
+                                                color: 'green',
+                                                children: (
+                                                    <div style={{color: 'white'}}>
+                                                        <p style={{
+                                                            fontSize: '16px',
+                                                            fontWeight: 'bold',
+                                                            color: '#B0E0E6'
+                                                        }}>【指挥协调上报】</p>
+                                                        <strong style={{
+                                                            color: '#B0E0E6'
+                                                        }}>办理时间:</strong> 2025-03-17 09:03:16 <p></p>
+                                                        <strong style={{
+                                                            color: '#B0E0E6'
+                                                        }}>处置单位:</strong> 数字化城市管理指挥中心 <p></p>
+                                                        <strong style={{
+                                                            color: '#B0E0E6'
+                                                        }}>经办人员:</strong> 张三 <p></p>
+                                                        <strong style={{
+                                                            color: '#B0E0E6'
+                                                        }}>办理意见:</strong> 无 <p></p>
+                                                    </div>
+                                                ),
+                                            },
+                                            {
+                                                color: 'green',
+                                                children: (
+                                                    <div style={{color: 'white'}}>
+                                                        <p style={{
+                                                            fontSize: '16px',
+                                                            fontWeight: 'bold',
+                                                            color: '#B0E0E6'
+                                                        }}>【指挥协调待受理】</p>
+                                                        <strong style={{
+                                                            color: '#B0E0E6'
+                                                        }}>办理时间:</strong> 2025-03-17 09:15:19 <p></p>
+                                                        <strong style={{
+                                                            color: '#B0E0E6'
+                                                        }}>处置单位:</strong> 数字化城市管理指挥中心 <p></p>
+                                                        <strong style={{
+                                                            color: '#B0E0E6'
+                                                        }}>经办人员:</strong> 受理员 <p></p>
+                                                        <strong style={{
+                                                            color: '#B0E0E6'
+                                                        }}>办理意见:</strong> 无 <p></p>
+                                                    </div>
+                                                ),
+                                            },
+                                            {
+                                                children: (
+                                                    <div style={{color: 'white'}}>
+                                                        <p style={{
+                                                            fontSize: '16px',
+                                                            fontWeight: 'bold',
+                                                            color: '#B0E0E6'
+                                                        }}>【指挥协调案件立案】</p>
+                                                        <strong style={{
+                                                            color: '#B0E0E6'
+                                                        }}>办理时间:</strong> 2025-03-17 09:03:16 <p></p>
+                                                        <strong style={{
+                                                            color: '#B0E0E6'
+                                                        }}>处置单位:</strong> 数字化城市管理指挥中心 <p></p>
+                                                        <strong style={{
+                                                            color: '#B0E0E6'
+                                                        }}>经办人员:</strong> 值班长 <p></p>
+                                                        <strong style={{
+                                                            color: '#B0E0E6'
+                                                        }}>办理意见:</strong> 无 <p></p>
+                                                    </div>
+                                                ),
+                                            },
+                                            {
+                                                color: 'gray',
+                                                children: (
+                                                    <div style={{color: 'white'}}>
+                                                        <p style={{
+                                                            fontSize: '16px',
+                                                            fontWeight: 'bold',
+                                                            color: '#B0E0E6'
+                                                        }}>【指挥协调待派遣】</p>
+                                                        <strong style={{
+                                                            color: '#B0E0E6'
+                                                        }}>办理时间:</strong> 2025-03-17 09:03:16 <p></p>
+                                                        <strong style={{
+                                                            color: '#B0E0E6'
+                                                        }}>处置单位:</strong> 数字化城市管理指挥中心 <p></p>
+                                                        <strong style={{
+                                                            color: '#B0E0E6'
+                                                        }}>经办人员:</strong> 派遣员 <p></p>
+                                                        <strong style={{
+                                                            color: '#B0E0E6'
+                                                        }}>办理意见:</strong> 派遣给:'二二路灯管理所,时限:4小时 <p></p>
+                                                    </div>
+                                                ),
+                                            },
+                                            {
+                                                color: 'gray',
+                                                children: (
+                                                    <div style={{color: 'white'}}>
+                                                        <p style={{
+                                                            fontSize: '16px',
+                                                            fontWeight: 'bold',
+                                                            color: '#B0E0E6'
+                                                        }}>【指挥协调处理】</p>
+                                                        <strong style={{
+                                                            color: '#B0E0E6'
+                                                        }}>办理时间:</strong> 2025-03-17 09:03:16 <p></p>
+                                                        <strong style={{
+                                                            color: '#B0E0E6'
+                                                        }}>处置单位:</strong> 数字化城市管理指挥中心 <p></p>
+                                                        <strong style={{
+                                                            color: '#B0E0E6'
+                                                        }}>经办人员:</strong> 张三 <p></p>
+                                                        <strong style={{
+                                                            color: '#B0E0E6'
+                                                        }}>办理意见:</strong> 无 <p></p>
+                                                    </div>
+                                                ),
+                                            }, {
+                                                color: '#00CCFF',
+                                                children: <strong style={{
+                                                    color: '#00CCFF',
+                                                    fontWeight: 'bold',
+                                                    fontSize: '16px',
+                                                }}>工单结束</strong>,
+                                            },
+                                        ]}
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                </Modal>
+                {/* 添加图片预览弹窗 */}
+                <Modal
+                    visible={previewVisible}
+                    footer={null}
+                    onCancel={() => setPreviewVisible(false)}
+                    maskClosable={true}
+                    width="800px"
+                    height="500px"
+                    bodyStyle={{padding: 0}}
+                    closable={true}
+                    zIndex={10000}
+                >
+                    {previewImage && (
+                        <img
+                            src={previewImage}
+                            alt="预览图片"
+                            style={{
+                                width: '700px',
+                                // maxWidth: '90vw',
+                                // maxHeight: '90vh',
+                                display: 'block',
+                                margin: '0 auto'
+                            }}
+                        />
+                    )}
+                </Modal>
+
+                {/* 添加全局样式覆盖表头背景色 */}
+                <style jsx global>{`
+                .custom-table .ant-table-thead > tr > th,
+                .custom-table .ant-table-thead > tr > td {
+                    background-color: rgba(58, 56, 153, 1) !important; /* 目标背景色 */
+                    color: white !important; /* 表头文字颜色 */
+                    border: none !important; /* 移除边框 */
+                }
+                
+                 /* 新增：移除表头伪元素样式 */
+                .custom-table .ant-table-thead > tr > th::before,
+                .fixed-header .ant-table-thead > tr > th::after {
+                    content: none !important; /* 清除伪元素内容 */
+                    background: none !important; /* 清除背景 */
+                }
+                .custom-table .ant-table-cell-scrollbar {
+                    background-color: #3a3899 !important; /* 目标背景色 */
+                    color: white !important; /* 表头文字颜色 */
+                    box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
+                }
+                .ant-table-wrapper .ant-table-tbody >tr >th, .ant-table-wrapper .ant-table-tbody >tr >td {
+                    background-color: rgba(58, 56, 153, 1) !important; /* 目标背景色 */
+                    color: white !important; /* 表头文字颜色 */
+                    border: none !important; /* 移除边框 */
+                }
+                 /* 修改Modal背景色和添加渐变边框 */
+                .custom-modal .ant-modal-content {
+                    background-color: rgba(58, 56, 153, 1) !important; /* 主背景色 */
+                    color: white; /* 文字颜色 */
+                    /* 添加由外向内的径向渐变边框 */
+                    border: 2px solid transparent;
+                    border-radius: 8px;
+                    background-clip: padding-box, border-box;
+                    background-origin: padding-box, border-box;
+                    background-image: 
+                        linear-gradient( rgba(58, 56, 153, 1),  rgba(58, 56, 153, 1)), /* 背景色 */
+                        radial-gradient(circle at center, #ff6b6b, #4ecdc4); /* 由外向内的径向渐变边框 */
+                }
+                /* 可选：修改Modal标题栏样式 */
+                .custom-modal .ant-modal-header {
+                    background-color:  rgba(58, 56, 153, 1) !important;
+                    border-bottom: none; /* 移除底部边框 */
+                }
+                
+                .custom-modal .ant-modal-title{
+                    color:white !important;
+                    border-bottom:1px solid white;
+                }
+            `}</style>
+            </div>
+        </ConfigProvider>
+    )
+}

components/GISModule/Dtxxdata.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+import {Badge, ConfigProvider, Table,} from "antd"
+
+function dtxxdata(props: { height: string }) {
+    return (
+       <ConfigProvider
+        theme={{
+            components: {
+                Table: {
+                    headerBorderRadius: 0,
+                },
+            },
+        }}
+       >
+           <div style={{height: props.height}}>
+               <Table className="fixed-header"
+                      headerBg='red'
+                      bordered={false}
+                      columns={[
+                          {
+                              title: '时间',
+                              dataIndex: 'time',
+                              key: 'time',
+                              width: '30%',
+                              render: (text) => <span style={{color: 'white'}}>{text}</span>
+                          },
+                          {
+                              title: '事件',
+                              dataIndex: 'event',
+                              key: 'event',
+                              width: '50%',
+                              ellipsis: true,
+                              render: (text) => <span style={{color: 'white'}}>{text}</span>
+                          },
+                          {
+                              title: '状态',
+                              dataIndex: 'status',
+                              key: 'status',
+                              width: '20%',
+                              render: (status) => (
+                                  <Badge status={status === 'success' ? 'success' : 'processing'}
+                                         text={<span style={{color: status === 'success' ? '#52c41a' : '#faad14'}}>
+                                                                   {status === 'success' ? '已完成' : '处理中'}
+                                                               </span>}/>
+                              )
+                          }
+                      ]}
+                      dataSource={[
+                          {key: '1', time: '2025-09-23 09:23', event: '污水井盖#W023发生倾斜告警', status: 'processing'},
+                          {key: '2', time: '2025-08-45 09:23', event: '电力井盖#D112维修完成', status: 'success'},
+                          {key: '3', time: '2025-07-18 09:23', event: '通信井盖#T056电压异常', status: 'processing'},
+                          {key: '4', time: '2025-08-23 09:23', event: '雨水井盖#Y091更换完成', status: 'success'},
+                          {key: '5', time: '2025-08-23 09:23', event: '燃气井盖#R034压力告警', status: 'success'},
+                          {key: '6', time: '2025-08-23 09:23', event: '新增通信井盖#T057安装完成', status: 'success'},
+                          {key: '7', time: '2025-08-23 09:23', event: '电力井盖#D108电池更换', status: 'success'}
+                      ]}
+                      pagination={false}
+                      size="small"
+                      style={{backgroundColor: 'transparent'}}
+                   // 添加固定表头配置
+                      scroll={{x: 200, y: 138}}></Table>
+               <style jsx global>{`
+                .fixed-header .ant-table-thead > tr > th,
+                .custom-table .ant-table-thead > tr > td {
+                    background-color: rgba(58, 56, 153, 1) !important; /* 目标背景色 */
+                    color: white !important; /* 表头文字颜色 */
+                    border: none !important; /* 移除边框 */
+                }
+                 /* 新增：移除表头伪元素样式 */
+                .fixed-header .ant-table-thead > tr > th::before,
+                .fixed-header .ant-table-thead > tr > th::after {
+                    content: none !important; /* 清除伪元素内容 */
+                    background: none !important; /* 清除背景 */
+                }
+
+                .fixed-header .ant-table-cell-scrollbar {
+                    background-color: #3a3899 !important; /* 目标背景色 */
+                    color: white !important; /* 表头文字颜色 */
+                    box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
+                }
+            `}</style>
+           </div>
+       </ConfigProvider>
+    )
+}
+
+export default dtxxdata;

components/GISModule/PicEcharts.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import EChart, {type EChartProps} from "../echarts";
+
+// 饼图特定属性接口
+export type PieChartProps = {
+    // 饼图数据
+    data: { value: number; name: string }[];
+    // 饼图标题
+    title?: string;
+    // 饼图半径配置
+    radius?: [string, string];
+    // 饼图颜色配置
+    colors?: string[];
+    // 其他EChart通用属性
+} & Omit<EChartProps, "option">;
+
+const PieChart = ({
+                      data,
+                      title = "统计数据",
+                      radius = ["40%", "70%"],
+                      colors,
+                      ...props
+                  }: PieChartProps) => {
+    // 默认饼图配置
+    const defaultOption = {
+        // title: {
+        //     text: title,
+        //     left: "center",
+        //     textStyle: {
+        //         color: "#fff", // 标题文字颜色
+        //     },
+        // },
+        tooltip: {
+            trigger: "item",
+            formatter: "{a} <br/>{b}: {c} ({d}%)",
+        },
+        legend: {
+            orient: "vertical",
+            top:20,
+            right: 10,
+            textStyle: {
+                color: "#fff", // 图例文字颜色
+            },
+        },
+        series: [
+            {
+                name: "统计",
+                type: "pie",
+                radius: radius,
+                // 添加center属性控制饼图位置，[left, top]，百分比值相对于容器
+                center: ['40%', '50%'], // 调整第一个值(左右位置)，越小越靠左
+                avoidLabelOverlap: false,
+                itemStyle: {
+                    borderRadius: 10,
+                    borderColor: "#3a3899", // 饼图块边框颜色
+                    borderWidth: 2,
+                },
+                label: {
+                    show: false,
+                    position: "center",
+                    color: "#fff",
+                },
+                emphasis: {
+                    label: {
+                        show: true,
+                        fontSize: 16,
+                        fontWeight: "bold",
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    show: false,
+                },
+                data: data,
+                color: colors || ["#f5222d", "#faad14", "#52c41a", "#1890ff", "#722ed1"],
+            },
+        ],
+    };
+
+    return <EChart option={defaultOption} {...props} />;
+};
+
+export default PieChart;

components/GISModule/Sbledata.tsx

@@ -0,0 +1,1071 @@
+import React, {useMemo, useState} from "react";
+import {Badge, Button, Col, ConfigProvider, Modal, Row, Select, Table,} from "antd"
+
+export default function getGisSbleData(props: { height: string }) {
+    // 添加设备类型筛选状态
+    const [typeFilter, setTypeFilter] = useState('all');
+    // 添加导航按钮状态管理
+    const [activeNavButton, setActiveNavButton] = useState("realtime");
+    // 设备列表状态
+    const [GISdeviceModalVisible, setGISDeviceModalVisible] = useState(false)
+    const [GISselectedDevice, setGISSelectedDevice] = useState(null)
+    // 添加图片预览相关状态
+    const [previewImage, setPreviewImage] = useState<string | null>(null);
+    const [previewVisible, setPreviewVisible] = useState(false);
+//gis设备列表
+    const EquipmentListData = {
+        columns: [
+            {
+                title: () => (
+                    <div style={{
+                        textAlign: 'center',
+                        // color: 'white',
+                        // padding: '8px' // 保持内边距一致
+                    }}>
+                        设备名称
+                    </div>
+                ),
+                dataIndex: "name",
+                width: 100,
+                ellipsis: true,
+                render: (text, record) => (  // 添加record参数获取行数据
+                    <div
+                        style={{
+                            // backgroundColor: '#e8e8e8',
+                            textAlign: 'center',
+                            cursor: 'pointer',  // 显示手型光标
+                            color: 'white', // 单元格字体颜色
+                            fontWeight: 'bold'
+                            // transition: 'background-color 0.2s'  // 过渡效果
+                        }}
+                        onClick={() => {
+                            // 设置选中设备并打开弹窗
+                            setGISSelectedDevice(record);
+                            setGISDeviceModalVisible(true);
+                        }}
+                        onMouseOver={(e) => {
+                            e.currentTarget.style.backgroundColor = '#3b2e50';  // 鼠标悬停效果
+                        }}
+                        onMouseOut={(e) => {
+                            e.currentTarget.style.backgroundColor = 'transparent';  // 恢复原背景色
+                        }}
+                    >
+                        {text}
+                    </div>
+                ),
+            },
+            {
+                title: () => (
+                    <div style={{
+                        // padding: '8px',
+                        textAlign: 'center',
+                        // color: 'white' // 统一文字颜色
+                    }}>
+                        <div>设备类型</div>
+                        {/* 添加下拉筛选器 */}
+                        <Select
+                            defaultValue="all"
+                            style={{width: 100}}
+                            onChange={(value) => setTypeFilter(value)}
+                            size="small"
+                        >
+                            <Select.Option value="all">全部</Select.Option>
+                            <Select.Option value="电用井盖">电用井盖</Select.Option>
+                            <Select.Option value="供水井盖">供水井盖</Select.Option>
+                            <Select.Option value="通信井盖">通信井盖</Select.Option>
+                            <Select.Option value="燃气井盖">燃气井盖</Select.Option>
+                            <Select.Option value="污水井盖">污水井盖</Select.Option>
+                            <Select.Option value="雨水井盖">雨水井盖</Select.Option>
+                            <Select.Option value="路灯井盖">路灯井盖</Select.Option>
+                            <Select.Option value="网络井盖">网络井盖</Select.Option>
+                            <Select.Option value="电缆井盖">电缆井盖</Select.Option>
+                            <Select.Option value="园林井盖">园林井盖</Select.Option>
+                            <Select.Option value="化粪池井盖">化粪池井盖</Select.Option>
+
+                        </Select>
+                    </div>
+                ),
+                dataIndex: "type",
+                width: 150,
+                ellipsis: true,
+                render: (text, record) => (  // 添加record参数获取行数据
+                    <div
+                        style={{
+                            // padding: '8px 0',
+                            textAlign: 'center',
+                            cursor: 'pointer',
+                            color: 'white', // 单元格字体颜色
+                            fontWeight: 'bold'
+                            // transition: 'background-color 0.2s'
+                        }}
+                        onClick={() => {
+                            // 设置选中设备并打开弹窗
+                            setGISSelectedDevice(record);
+                            setGISDeviceModalVisible(true);
+                        }}
+                        onMouseOver={(e) => {
+                            e.currentTarget.style.backgroundColor = '#3b2e50';
+                        }}
+                        onMouseOut={(e) => {
+                            e.currentTarget.style.backgroundColor = 'transparent';
+                        }}
+                    >
+                        {text}
+                    </div>
+                ),
+            },
+            {
+                title: () => (  // 将标题改为函数组件，自定义表头样式
+                    <div style={{
+                        // padding: '8px',
+                        textAlign: 'center',
+                        // color: 'white' // 统一文字颜色
+                    }}>
+                        设备电量
+                    </div>
+                ),
+                dataIndex: "electricity",
+                width: 100,
+                render: (text) => {
+                    // 根据电量值设置背景色和文字色
+                    const bgColor = text < '30' ? '#fff1f0' :  // 低电量：浅红背景
+                        text < '50' ? '#fffbe6' :  // 中电量：浅黄背景
+                            '#f6ffed';  // 高电量：浅绿背景
+
+                    const textColor = text < '30' ? '#f5222d' :  // 低电量：红色文字
+                        text < '50' ? '#faad14' :  // 中电量：橙色文字
+                            '#52c41a';  // 高电量：绿色文字
+
+                    return (
+                        <div style={{
+                            backgroundColor: bgColor,  // 单元格背景色
+                            color: textColor,          // 文字颜色（确保与背景对比度）
+                            fontWeight: 'bold',
+                            textAlign: 'center',       // 文字居中
+                            borderRadius: '4px'        // 圆角边框（可选）
+                        }}>
+                            {text}%
+                        </div>
+                    );
+                },
+            }
+        ],
+        data: [{
+            id: '1',
+            name: '井盖一',
+            type: '电用井盖',
+            electricity: '80',
+            facilityCode: '5001110103009062',
+            region: '东三路米香街道',
+            regionGrade: '暂无',
+            locationDescription: '东三路A地铁口向西方向300米',
+            competentDepartment: '东三路社区服务中心',
+            ownershipUnit: 'A市住房和城乡建设委员会',
+            maintenanceUnit: 'A市住房和城乡建设委员会',
+            nameOfPersonInCharge: '张三',
+            PhoneOfPersonInCharge: '15399665548',
+            status: '1',
+            manholeType: '1',
+            manholeCover: '暂无',
+            manholeShape: '圆形',
+            constructionTime: '2025-09-15 20:57:42',
+            longitude: '110.22252454',
+            latitude: '27.1148554',
+            manholeImage: 'manholeimg.png',
+            QRCode: '/QRCode.jpg',
+        }, {
+            id: '2',
+            name: '井盖二',
+            type: '供水井盖',
+            electricity: '80',
+            facilityCode: '5001110103009062',
+            region: '东三路米香街道',
+            regionGrade: '暂无',
+            locationDescription: '东三路A地铁口向西方向300米',
+            competentDepartment: '东三路社区服务中心',
+            ownershipUnit: 'A市住房和城乡建设委员会',
+            maintenanceUnit: 'A市住房和城乡建设委员会',
+            nameOfPersonInCharge: '张三',
+            PhoneOfPersonInCharge: '15399665548',
+            status: '0',
+            manholeType: '1',
+            manholeCover: '暂无',
+            manholeShape: '圆形',
+            constructionTime: '2025-09-15 20:57:42',
+            longitude: '110.22252454',
+            latitude: '27.1148554',
+            manholeImage: 'manholeimg.png',
+            QRCode: '/QRCode.jpg',
+        }, {
+            id: '3',
+            name: '井盖三',
+            type: '通信井盖',
+            electricity: '80',
+            facilityCode: '5001110103009062',
+            region: '东三路米香街道',
+            regionGrade: '暂无',
+            locationDescription: '东三路A地铁口向西方向300米',
+            competentDepartment: '东三路社区服务中心',
+            ownershipUnit: 'A市住房和城乡建设委员会',
+            maintenanceUnit: 'A市住房和城乡建设委员会',
+            nameOfPersonInCharge: '张三',
+            PhoneOfPersonInCharge: '15399665548',
+            status: '1',
+            manholeType: '1',
+            manholeCover: '暂无',
+            manholeShape: '圆形',
+            constructionTime: '2025-09-15 20:57:42',
+            longitude: '110.22252454',
+            latitude: '27.1148554',
+            manholeImage: 'manholeimg.png',
+            QRCode: '/QRCode.jpg',
+        }, {
+            id: '4',
+            name: '井盖四',
+            type: '污水井盖',
+            electricity: '80',
+            facilityCode: '5001110103009062',
+            region: '东三路米香街道',
+            regionGrade: '暂无',
+            locationDescription: '东三路A地铁口向西方向300米',
+            competentDepartment: '东三路社区服务中心',
+            ownershipUnit: 'A市住房和城乡建设委员会',
+            maintenanceUnit: 'A市住房和城乡建设委员会',
+            nameOfPersonInCharge: '张三',
+            PhoneOfPersonInCharge: '15399665548',
+            status: '1',
+            manholeType: '1',
+            manholeCover: '暂无',
+            manholeShape: '圆形',
+            constructionTime: '2025-09-15 20:57:42',
+            longitude: '110.22252454',
+            latitude: '27.1148554',
+            manholeImage: 'manholeimg.png',
+            QRCode: '/QRCode.jpg',
+        }, {
+            id: '5',
+            name: '井盖五',
+            type: '污水井盖',
+            electricity: '80',
+            facilityCode: '5001110103009062',
+            region: '东三路米香街道',
+            regionGrade: '暂无',
+            locationDescription: '东三路A地铁口向西方向300米',
+            competentDepartment: '东三路社区服务中心',
+            ownershipUnit: 'A市住房和城乡建设委员会',
+            maintenanceUnit: 'A市住房和城乡建设委员会',
+            nameOfPersonInCharge: '张三',
+            PhoneOfPersonInCharge: '15399665548',
+            status: '1',
+            manholeType: '1',
+            manholeCover: '暂无',
+            manholeShape: '圆形',
+            constructionTime: '2025-09-15 20:57:42',
+            longitude: '110.22252454',
+            latitude: '27.1148554',
+            manholeImage: 'manholeimg.png',
+            QRCode: '/QRCode.jpg',
+        }, {
+            id: '6',
+            name: '井盖六',
+            type: '污水井盖',
+            electricity: '80',
+            facilityCode: '5001110103009062',
+            region: '东三路米香街道',
+            regionGrade: '暂无',
+            locationDescription: '东三路A地铁口向西方向300米',
+            competentDepartment: '东三路社区服务中心',
+            ownershipUnit: 'A市住房和城乡建设委员会',
+            maintenanceUnit: 'A市住房和城乡建设委员会',
+            nameOfPersonInCharge: '张三',
+            PhoneOfPersonInCharge: '15399665548',
+            status: '1',
+            manholeType: '1',
+            manholeCover: '暂无',
+            manholeShape: '圆形',
+            constructionTime: '2025-09-15 20:57:42',
+            longitude: '110.22252454',
+            latitude: '27.1148554',
+            manholeImage: 'manholeimg.png',
+            QRCode: '/QRCode.jpg',
+        }, {
+            id: '7',
+            name: '井盖七',
+            type: '通信井盖',
+            electricity: '80',
+            facilityCode: '5001110103009062',
+            region: '东三路米香街道',
+            regionGrade: '暂无',
+            locationDescription: '东三路A地铁口向西方向300米',
+            competentDepartment: '东三路社区服务中心',
+            ownershipUnit: 'A市住房和城乡建设委员会',
+            maintenanceUnit: 'A市住房和城乡建设委员会',
+            nameOfPersonInCharge: '张三',
+            PhoneOfPersonInCharge: '15399665548',
+            status: '1',
+            manholeType: '1',
+            manholeCover: '暂无',
+            manholeShape: '圆形',
+            constructionTime: '2025-09-15 20:57:42',
+            longitude: '110.22252454',
+            latitude: '27.1148554',
+            manholeImage: 'manholeimg.png',
+            QRCode: '/QRCode.jpg',
+        }, , {
+            id: '8',
+            name: '井盖八',
+            type: '通信井盖',
+            electricity: '80',
+            facilityCode: '5001110103009062',
+            region: '东三路米香街道',
+            regionGrade: '暂无',
+            locationDescription: '东三路A地铁口向西方向300米',
+            competentDepartment: '东三路社区服务中心',
+            ownershipUnit: 'A市住房和城乡建设委员会',
+            maintenanceUnit: 'A市住房和城乡建设委员会',
+            nameOfPersonInCharge: '张三',
+            PhoneOfPersonInCharge: '15399665548',
+            status: '1',
+            manholeType: '1',
+            manholeCover: '暂无',
+            manholeShape: '圆形',
+            constructionTime: '2025-09-15 20:57:42',
+            longitude: '110.22252454',
+            latitude: '27.1148554',
+            manholeImage: 'manholeimg.png',
+            QRCode: '/QRCode.jpg',
+        }, {
+            id: '9',
+            name: '井盖九',
+            type: '通信井盖',
+            electricity: '80',
+            facilityCode: '5001110103009062',
+            region: '东三路米香街道',
+            regionGrade: '暂无',
+            locationDescription: '东三路A地铁口向西方向300米',
+            competentDepartment: '东三路社区服务中心',
+            ownershipUnit: 'A市住房和城乡建设委员会',
+            maintenanceUnit: 'A市住房和城乡建设委员会',
+            nameOfPersonInCharge: '张三',
+            PhoneOfPersonInCharge: '15399665548',
+            status: '1',
+            manholeType: '1',
+            manholeCover: '暂无',
+            manholeShape: '圆形',
+            constructionTime: '2025-09-15 20:57:42',
+            longitude: '110.22252454',
+            latitude: '27.1148554',
+            manholeImage: 'manholeimg.png',
+            QRCode: '/QRCode.jpg',
+        }, {
+            id: '10',
+            name: '井盖十',
+            type: '通信井盖',
+            electricity: '80',
+            facilityCode: '5001110103009062',
+            region: '东三路米香街道',
+            regionGrade: '暂无',
+            locationDescription: '东三路A地铁口向西方向300米',
+            competentDepartment: '东三路社区服务中心',
+            ownershipUnit: 'A市住房和城乡建设委员会',
+            maintenanceUnit: 'A市住房和城乡建设委员会',
+            nameOfPersonInCharge: '张三',
+            PhoneOfPersonInCharge: '15399665548',
+            status: '1',
+            manholeType: '1',
+            manholeCover: '暂无',
+            manholeShape: '圆形',
+            constructionTime: '2025-09-15 20:57:42',
+            longitude: '110.22252454',
+            latitude: '27.1148554',
+            manholeImage: 'manholeimg.png',
+            QRCode: '/QRCode.jpg',
+        }, {
+            id: '11',
+            name: '井盖十一',
+            type: '通信井盖',
+            electricity: '80',
+            facilityCode: '5001110103009062',
+            region: '东三路米香街道',
+            regionGrade: '暂无',
+            locationDescription: '东三路A地铁口向西方向300米',
+            competentDepartment: '东三路社区服务中心',
+            ownershipUnit: 'A市住房和城乡建设委员会',
+            maintenanceUnit: 'A市住房和城乡建设委员会',
+            nameOfPersonInCharge: '张三',
+            PhoneOfPersonInCharge: '15399665548',
+            status: '1',
+            manholeType: '1',
+            manholeCover: '暂无',
+            manholeShape: '圆形',
+            constructionTime: '2025-09-15 20:57:42',
+            longitude: '110.22252454',
+            latitude: '27.1148554',
+            manholeImage: 'manholeimg.png',
+            QRCode: '/QRCode.jpg',
+        }, {
+            id: '12',
+            name: '井盖十二',
+            type: '通信井盖',
+            electricity: '80',
+            facilityCode: '5001110103009062',
+            region: '东三路米香街道',
+            regionGrade: '暂无',
+            locationDescription: '东三路A地铁口向西方向300米',
+            competentDepartment: '东三路社区服务中心',
+            ownershipUnit: 'A市住房和城乡建设委员会',
+            maintenanceUnit: 'A市住房和城乡建设委员会',
+            nameOfPersonInCharge: '张三',
+            PhoneOfPersonInCharge: '15399665548',
+            status: '1',
+            manholeType: '1',
+            manholeCover: '暂无',
+            manholeShape: '圆形',
+            constructionTime: '2025-09-15 20:57:42',
+            longitude: '110.22252454',
+            latitude: '27.1148554',
+            manholeImage: 'manholeimg.png',
+            QRCode: '/QRCode.jpg',
+        }],
+    }
+
+// 使用 useMemo 动态计算筛选数据，依赖 typeFilter 和 EquipmentListData.data
+    const filteredData = useMemo(() => {
+        return typeFilter === 'all'
+            ? EquipmentListData.data
+            : EquipmentListData.data.filter(item => item.type === typeFilter);
+    }, [typeFilter, EquipmentListData.data]);  // 当筛选条件或原始数据变化时重新计算
+
+
+    const popUpdata = {
+        columns: [
+            {
+                title: () => (
+                    <div style={{
+                        textAlign: 'center',
+                        // color: 'white',
+                        // padding: '8px' // 保持内边距一致
+                    }}>
+                        设备ID
+                    </div>
+                ),
+                dataIndex: "codeID",
+                width: 150,
+                ellipsis: true,
+                render: (text, record) => (  // 添加record参数获取行数据
+                    <div
+                        style={{
+                            // backgroundColor: '#e8e8e8',
+                            textAlign: 'center',
+                            cursor: 'pointer',  // 显示手型光标
+                            color: 'white', // 单元格字体颜色
+                            fontWeight: 'bold'
+                            // transition: 'background-color 0.2s'  // 过渡效果
+                        }}
+                    >
+                        {text}
+                    </div>
+                ),
+            },
+            {
+                title: () => (
+                    <div style={{
+                        textAlign: 'center',
+                        // color: 'white',
+                        // padding: '8px' // 保持内边距一致
+                    }}>
+                        检测时间
+                    </div>
+                ),
+                dataIndex: "date",
+                ellipsis: true,
+                render: (text, record) => (  // 添加record参数获取行数据
+                    <div
+                        style={{
+                            // backgroundColor: '#e8e8e8',
+                            textAlign: 'center',
+                            cursor: 'pointer',  // 显示手型光标
+                            color: 'white', // 单元格字体颜色
+                            fontWeight: 'bold'
+                            // transition: 'background-color 0.2s'  // 过渡效果
+                        }}
+                    >
+                        {text}
+                    </div>
+                ),
+            },
+            {
+                title: () => (
+                    <div style={{
+                        textAlign: 'center',
+                        // color: 'white',
+                        // padding: '8px' // 保持内边距一致
+                    }}>
+                        温度（℃）
+                    </div>
+                ),
+                dataIndex: "temperature",
+                ellipsis: true,
+                render: (text, record) => (  // 添加record参数获取行数据
+                    <div
+                        style={{
+                            // backgroundColor: '#e8e8e8',
+                            textAlign: 'center',
+                            cursor: 'pointer',  // 显示手型光标
+                            color: 'white', // 单元格字体颜色
+                            fontWeight: 'bold'
+                            // transition: 'background-color 0.2s'  // 过渡效果
+                        }}
+                    >
+                        {text}
+                    </div>
+                ),
+            },
+            {
+                title: () => (
+                    <div style={{
+                        textAlign: 'center',
+                        // color: 'white',
+                        // padding: '8px' // 保持内边距一致
+                    }}>
+                        角度（°）
+                    </div>
+                ),
+                dataIndex: "angle",
+                ellipsis: true,
+                render: (text, record) => (  // 添加record参数获取行数据
+                    <div
+                        style={{
+                            // backgroundColor: '#e8e8e8',
+                            textAlign: 'center',
+                            cursor: 'pointer',  // 显示手型光标
+                            color: 'white', // 单元格字体颜色
+                            fontWeight: 'bold'
+                            // transition: 'background-color 0.2s'  // 过渡效果
+                        }}
+                    >
+                        {text}
+                    </div>
+                ),
+            }, {
+                title: () => (
+                    <div style={{
+                        textAlign: 'center',
+                        // color: 'white',
+                        // padding: '8px' // 保持内边距一致
+                    }}>
+                        电压（V）
+                    </div>
+                ),
+                dataIndex: "voltage",
+                ellipsis: true,
+                render: (text, record) => (  // 添加record参数获取行数据
+                    <div
+                        style={{
+                            // backgroundColor: '#e8e8e8',
+                            textAlign: 'center',
+                            cursor: 'pointer',  // 显示手型光标
+                            color: 'white', // 单元格字体颜色
+                            fontWeight: 'bold'
+                            // transition: 'background-color 0.2s'  // 过渡效果
+                        }}
+                    >
+                        {text}
+                    </div>
+                ),
+            }
+        ],
+        data: [{
+            id: '1',  // 添加唯一 id 作为 rowKey
+            date: '2016-05-02',
+            codeID: '5001110103009062',
+            temperature: '29',
+            angle: '4',
+            voltage: '3.6'
+        }, {
+            id: '1',  // 添加唯一 id 作为 rowKey
+            date: '2016-05-02',
+            codeID: '5001110103009062',
+            temperature: '29',
+            angle: '4',
+            voltage: '3.6'
+        }, {
+            id: '1',  // 添加唯一 id 作为 rowKey
+            date: '2016-05-02',
+            codeID: '5001110103009062',
+            temperature: '29',
+            angle: '4',
+            voltage: '3.6'
+        }, {
+            id: '1',  // 添加唯一 id 作为 rowKey
+            date: '2016-05-02',
+            codeID: '5001110103009062',
+            temperature: '29',
+            angle: '4',
+            voltage: '3.6'
+        }, {
+            id: '1',  // 添加唯一 id 作为 rowKey
+            date: '2016-05-02',
+            codeID: '5001110103009062',
+            temperature: '29',
+            angle: '4',
+            voltage: '3.6'
+        }, {
+            id: '1',  // 添加唯一 id 作为 rowKey
+            date: '2016-05-02',
+            codeID: '5001110103009062',
+            temperature: '29',
+            angle: '4',
+            voltage: '3.6'
+        }, {
+            id: '1',  // 添加唯一 id 作为 rowKey
+            date: '2016-05-02',
+            codeID: '5001110103009062',
+            temperature: '29',
+            angle: '4',
+            voltage: '3.6'
+        }, {
+            id: '1',  // 添加唯一 id 作为 rowKey
+            date: '2016-05-02',
+            codeID: '5001110103009062',
+            temperature: '29',
+            angle: '4',
+            voltage: '3.6'
+        }, {
+            id: '1',  // 添加唯一 id 作为 rowKey
+            date: '2016-05-02',
+            codeID: '5001110103009062',
+            temperature: '29',
+            angle: '4',
+            voltage: '3.6'
+        }, {
+            id: '1',  // 添加唯一 id 作为 rowKey
+            date: '2016-05-02',
+            codeID: '5001110103009062',
+            temperature: '29',
+            angle: '4',
+            voltage: '3.6'
+        }, {
+            id: '1',  // 添加唯一 id 作为 rowKey
+            date: '2016-05-02',
+            codeID: '5001110103009062',
+            temperature: '29',
+            angle: '4',
+            voltage: '3.6'
+        }, {
+            id: '1',  // 添加唯一 id 作为 rowKey
+            date: '2016-05-02',
+            codeID: '5001110103009062',
+            temperature: '29',
+            angle: '4',
+            voltage: '3.6'
+        }, {
+            id: '1',  // 添加唯一 id 作为 rowKey
+            date: '2016-05-02',
+            codeID: '5001110103009062',
+            temperature: '29',
+            angle: '4',
+            voltage: '3.6'
+        }, {
+            id: '1',  // 添加唯一 id 作为 rowKey
+            date: '2016-05-02',
+            codeID: '5001110103009062',
+            temperature: '29',
+            angle: '4',
+            voltage: '3.6'
+        },]
+    }
+
+    return (
+        <ConfigProvider
+            theme={{
+                components: {
+                    Table: {
+                        headerBorderRadius: 0,
+                    },
+                },
+            }}
+        >
+            <div style={{height: props.height}}>
+                <Table
+                    className="custom-table"
+                    style={{
+                        width: '100%',
+                        height: '100%',
+                        // 可选：设置表格背景透明，避免覆盖容器背景
+                        backgroundColor: 'transparent'
+                    }}
+                    rowClassName={(record, index) => {
+                        // return 'bg-[#3a3899]';
+                    }}
+                    columns={EquipmentListData.columns}
+                    dataSource={filteredData}
+                    pagination={false}
+                    rowKey="id"
+                    size="small"
+                    scroll={{x: 200, y: 420}}
+                />
+                {/* GIS设备详情弹窗 */}
+                <Modal
+                    title="GIS设备详情"
+                    open={GISdeviceModalVisible}
+                    onCancel={() => setGISDeviceModalVisible(false)}
+                    // footer={null}
+                    width={1200}
+                    className="custom-modal"
+                    style={{
+                        textAlign: 'center'
+                    }}
+                >
+                    {GISselectedDevice && (
+                        <div className="space-y-4" style={{
+                            display: 'flex',
+                            justifyContent: 'space-between'
+                        }}>
+                            <div style={{
+                                width: '50%',
+                            }}>
+                                <div className="space-y-4" style={{textAlign: 'left'}}>
+                                    <Row gutter={16}>
+                                        <Col span={12}>
+                                            <div>
+                                                <strong style={{
+                                                    color: '#B0E0E6'
+                                                }}>设备名称:</strong> {GISselectedDevice.name}
+                                            </div>
+                                        </Col>
+                                        <Col span={12}>
+                                            <div>
+                                                <strong style={{
+                                                    color: '#B0E0E6'
+                                                }}>设备类型:</strong> {GISselectedDevice.type}
+                                            </div>
+                                        </Col>
+                                    </Row>
+                                    <Row gutter={16}>
+                                        <Col span={12}>
+                                            <div>
+                                                <strong style={{
+                                                    color: '#B0E0E6'
+                                                }}>设备电量:</strong> {GISselectedDevice.electricity}%
+                                            </div>
+                                        </Col>
+                                        <Col span={12}>
+                                            <div>
+                                                <strong style={{
+                                                    color: '#B0E0E6'
+                                                }}>设备编号:</strong>{GISselectedDevice.facilityCode}
+                                            </div>
+                                        </Col>
+                                    </Row>
+                                    <Row gutter={16}>
+                                        <Col span={12}>
+                                            <div>
+                                                <strong style={{
+                                                    color: '#B0E0E6'
+                                                }}>所属区域:</strong> {GISselectedDevice.region}
+                                            </div>
+                                        </Col>
+                                        <Col span={12}>
+                                            <div>
+                                                <strong style={{
+                                                    color: '#B0E0E6'
+                                                }}>道路等级:</strong> {GISselectedDevice.regionGrade}
+                                            </div>
+                                        </Col>
+                                    </Row>
+                                    <Row gutter={16}>
+                                        <Col span={12}>
+                                            <div>
+                                                <strong style={{
+                                                    color: '#B0E0E6'
+                                                }}>位置描述:</strong> {GISselectedDevice.locationDescription}
+                                            </div>
+                                        </Col>
+                                        <Col span={12}>
+                                            <div>
+                                                <strong style={{
+                                                    color: '#B0E0E6'
+                                                }}>主管部门:</strong> {GISselectedDevice.competentDepartment}
+                                            </div>
+                                        </Col>
+                                    </Row>
+                                    <Row gutter={16}>
+                                        <Col span={12}>
+                                            <div>
+                                                <strong style={{
+                                                    color: '#B0E0E6'
+                                                }}>权属单位:</strong> {GISselectedDevice.ownershipUnit}
+                                            </div>
+                                        </Col>
+                                        <Col span={12}>
+                                            <div>
+                                                <strong style={{
+                                                    color: '#B0E0E6'
+                                                }}>养护单位:</strong> {GISselectedDevice.maintenanceUnit}
+                                            </div>
+                                        </Col>
+                                    </Row>
+                                    <Row gutter={16}>
+                                        <Col span={12}>
+                                            <div>
+                                                <strong style={{
+                                                    color: '#B0E0E6'
+                                                }}>负责人姓名:</strong> {GISselectedDevice.nameOfPersonInCharge}
+                                            </div>
+                                        </Col>
+                                        <Col span={12}>
+                                            <div>
+                                                <strong style={{
+                                                    color: '#B0E0E6'
+                                                }}>负责人电话:</strong> {GISselectedDevice.PhoneOfPersonInCharge}
+                                            </div>
+                                        </Col>
+                                    </Row>
+                                    <Row gutter={16}>
+                                        <Col span={12}>
+                                            <div>
+                                                <strong style={{
+                                                    color: '#B0E0E6'
+                                                }}>设施状态:</strong>
+                                                <Badge
+                                                    style={{
+                                                        marginLeft: '10px'
+                                                    }}
+                                                    status={GISselectedDevice.status === "1" ? "success" : "error"}
+                                                    text={
+                                                        <span style={{
+                                                            color: GISselectedDevice.status === "1" ? "#52c41a" : "#f5222d"
+                                                        }}>
+                                                        {GISselectedDevice.status === "1" ? "正常" : "异常"}
+                                                    </span>
+                                                    }
+                                                />
+                                            </div>
+                                        </Col>
+                                        <Col span={12}>
+                                            <div>
+                                                <strong style={{
+                                                    color: '#B0E0E6'
+                                                }}>是否智能井盖:</strong>
+                                                <Badge
+                                                    style={{
+                                                        color: 'white'
+                                                    }}
+                                                    status={GISselectedDevice.manholeType === "0" ? "1" : "2"}
+                                                    text={GISselectedDevice.manholeType === "1" ? "是" : "否"}
+                                                />
+                                            </div>
+                                        </Col>
+                                    </Row>
+                                    <Row gutter={16}>
+                                        <Col span={12}>
+                                            <div>
+                                                <strong style={{
+                                                    color: '#B0E0E6'
+                                                }}>井盖材质:</strong> {GISselectedDevice.manholeCover}
+                                            </div>
+                                        </Col>
+                                        <Col span={12}>
+                                            <div>
+                                                <strong style={{
+                                                    color: '#B0E0E6'
+                                                }}>井身形状:</strong> {GISselectedDevice.manholeShape}
+                                            </div>
+                                        </Col>
+                                    </Row>
+                                    <Row gutter={16}>
+                                        <Col span={12}>
+                                            <div>
+                                                <strong style={{
+                                                    color: '#B0E0E6'
+                                                }}>建设时问:</strong> {GISselectedDevice.constructionTime}
+                                            </div>
+                                        </Col>
+                                        <Col span={12}>
+                                            <div>
+                                                <strong style={{
+                                                    color: '#B0E0E6'
+                                                }}>经纬度:</strong> {GISselectedDevice.longitude}°N, {GISselectedDevice.latitude}°E
+                                            </div>
+                                        </Col>
+                                    </Row>
+                                    <Row gutter={16}>
+                                        <Col span={12}>
+                                            <div>
+                                                <strong style={{
+                                                    color: '#B0E0E6'
+                                                }}>井盖图片:</strong>
+                                                <img
+                                                    src={GISselectedDevice.manholeImage}
+                                                    alt="井盖图片"
+                                                    style={{width: '60%', marginTop: '10px', cursor: 'pointer'}}
+                                                    onClick={() => {
+                                                        setPreviewImage(GISselectedDevice.manholeImage);
+                                                        setPreviewVisible(true);
+                                                    }}
+                                                />
+                                            </div>
+                                        </Col>
+                                        <Col span={12}>
+                                            <div>
+                                                <strong style={{
+                                                    color: '#B0E0E6'
+                                                }}>二维码:</strong>
+                                                {/* 二维码图片也添加点击放大功能 */}
+                                                <img
+                                                    src={GISselectedDevice.QRCode}
+                                                    alt="二维码"
+                                                    style={{width: '60%', marginTop: '10px', cursor: 'pointer'}}
+                                                    onClick={() => {
+                                                        setPreviewImage(GISselectedDevice.QRCode);
+                                                        setPreviewVisible(true);
+                                                    }}
+                                                />
+                                            </div>
+                                        </Col>
+                                    </Row>
+                                </div>
+                            </div>
+                            {/*GIS井盖详情第二模块*/}
+                            {/*GIS井盖详情第二模块 - 修改为按钮式导航*/}
+                            <div style={{width: '50%'}}>
+                                {/* 按钮式导航 */}
+                                <div style={{marginBottom: '16px', textAlign: 'left'}}>
+                                    <Button.Group>
+                                        <Button
+                                            type={activeNavButton === "realtime" ? "primary" : "default"}
+                                            onClick={() => setActiveNavButton("realtime")}
+                                            style={{minWidth: '120px'}}
+                                        >
+                                            实时监测
+                                        </Button>
+                                        <Button
+                                            type={activeNavButton === "history" ? "primary" : "default"}
+                                            onClick={() => setActiveNavButton("history")}
+                                            style={{minWidth: '120px'}}
+                                        >
+                                            历史事件
+                                        </Button>
+                                        <Button
+                                            type={activeNavButton === "inspection" ? "primary" : "default"}
+                                            onClick={() => setActiveNavButton("inspection")}
+                                            style={{minWidth: '120px'}}
+                                        >
+                                            日常巡查
+                                        </Button>
+
+                                    </Button.Group>
+
+                                    <div style={{
+                                        marginTop: '10px',
+                                        color: '#EEE',
+                                        fontSize: '14px'
+                                    }}>近15日数据
+                                    </div>
+                                </div>
+
+                                {/* 内容区域 */}
+                                <div style={{
+                                    padding: '20px',
+                                    border: '1px solid #e8e8e8',
+                                    borderRadius: '4px',
+                                    height: '500px'
+                                }}>
+                                    {activeNavButton === "realtime" && (
+                                        <div>
+                                            <Table
+                                                className="RTM-Gis-table"
+                                                style={{
+                                                    width: '100%',
+                                                    height: '100%',
+                                                    // 可选：设置表格背景透明，避免覆盖容器背景
+                                                    backgroundColor: 'transparent'
+                                                }}
+                                                columns={popUpdata.columns}
+                                                dataSource={popUpdata.data}
+                                                // pagination={false}
+                                                rowKey="id"
+                                                size="small"
+                                            />
+                                        </div>
+                                    )}
+                                    {activeNavButton === "history" && (
+                                        <div>历史事件记录展示区域</div>
+                                    )}
+                                    {activeNavButton === "inspection" && (
+                                        <div>日常巡查信息展示区域</div>
+                                    )}
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                </Modal>
+                {/* 添加图片预览弹窗 */}
+                <Modal
+                    visible={previewVisible}
+                    footer={null}
+                    onCancel={() => setPreviewVisible(false)}
+                    maskClosable={true}
+                    width="800px"
+                    height="500px"
+                    bodyStyle={{padding: 0}}
+                    closable={true}
+                    zIndex={10000}
+                >
+                    {previewImage && (
+                        <img
+                            src={previewImage}
+                            alt="预览图片"
+                            style={{
+                                width: '700px',
+                                // maxWidth: '90vw',
+                                // maxHeight: '90vh',
+                                display: 'block',
+                                margin: '0 auto'
+                            }}
+                        />
+                    )}
+                </Modal>
+
+                {/* 添加全局样式覆盖表头背景色 */}
+                <style jsx global>{`
+                .custom-table .ant-table-thead > tr > th,
+                .custom-table .ant-table-thead > tr > td {
+                    background-color: rgba(58, 56, 153, 1) !important; /* 目标背景色 */
+                    color: white !important; /* 表头文字颜色 */
+                    border: none !important; /* 移除边框 */
+                }
+                .ant-table-wrapper .ant-table-tbody >tr >th, .ant-table-wrapper .ant-table-tbody >tr >td {
+                    background-color: rgba(58, 56, 153, 1) !important; /* 目标背景色 */
+                    color: white !important; /* 表头文字颜色 */
+                    border: none !important; /* 移除边框 */
+                }
+                 /* 修改Modal背景色和添加渐变边框 */
+                .custom-modal .ant-modal-content {
+                    background-color: rgba(58, 56, 153, 1) !important; /* 主背景色 */
+                    color: white; /* 文字颜色 */
+                    /* 添加由外向内的径向渐变边框 */
+                    border: 2px solid transparent;
+                    border-radius: 8px;
+                    background-clip: padding-box, border-box;
+                    background-origin: padding-box, border-box;
+                    background-image: 
+                        linear-gradient( rgba(58, 56, 153, 1),  rgba(58, 56, 153, 1)), /* 背景色 */
+                        radial-gradient(circle at center, #ff6b6b, #4ecdc4); /* 由外向内的径向渐变边框 */
+                }
+                /* 可选：修改Modal标题栏样式 */
+                .custom-modal .ant-modal-header {
+                    background-color:  rgba(58, 56, 153, 1) !important;
+                    border-bottom: none; /* 移除底部边框 */
+                }
+                
+                .custom-modal .ant-modal-title{
+                    color:white !important;
+                    border-bottom:1px solid white;
+                }
+            `}</style>
+            </div>
+        </ConfigProvider>
+    )
+}

components/GISModule/SbqyxxData.tsx

@@ -0,0 +1,106 @@
+import React from "react";
+import EChart, {type EChartProps} from "../echarts";
+
+// 柱状图特定属性接口
+export type BarChartProps = {
+    // 柱状图数据
+    data: { value: number; name: string }[];
+    // 柱状图标题
+    title?: string;
+    // X轴名称
+    xAxisName?: string;
+    // Y轴名称
+    yAxisName?: string;
+    // 柱状图颜色配置
+    color?: string;
+    // 其他EChart通用属性
+} & Omit<EChartProps, "option">;
+
+const BarChart = ({
+                      data,
+                      title = "统计数据",
+                      xAxisName = "",
+                      yAxisName = "",
+                      color = "#1890ff",
+                      ...props
+                  }: BarChartProps) => {
+    // 提取x轴数据和系列数据
+    const xAxisData = data.map(item => item.name);
+    const seriesData = data.map(item => item.value);
+
+    // 默认柱状图配置
+    const defaultOption = {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow'
+            },
+        },
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '8%',
+            top: '15%',
+            containLabel: true
+        },
+        xAxis: [
+            {
+                type: 'category',
+                data: xAxisData,
+                axisLine: {
+                    lineStyle: {
+                        color: '#fff'
+                    }
+                },
+                axisLabel: {
+                    color: '#fff'
+                },
+                name: xAxisName,
+                nameTextStyle: {
+                    color: '#fff',
+                    padding: [0, 0, 10, 0]
+                }
+            }
+        ],
+        yAxis: [
+            {
+                type: 'value',
+                axisLine: {
+                    lineStyle: {
+                        color: '#fff'
+                    }
+                },
+                axisLabel: {
+                    color: '#fff',
+                    formatter: '{value}'
+                },
+                splitLine: {
+                    lineStyle: {
+                        color: 'rgba(255, 255, 255, 0.1)'
+                    }
+                },
+                name: yAxisName,
+                nameTextStyle: {
+                    color: '#fff',
+                    padding: [0, 10, 0, 0]
+                }
+            }
+        ],
+        series: [
+            {
+                name: title,
+                type: 'bar',
+                barWidth: '60%',
+                data: seriesData,
+                itemStyle: {
+                    color: color,
+                    borderRadius: [4, 4, 0, 0]
+                }
+            }
+        ]
+    };
+
+    return <EChart option={defaultOption} {...props} />;
+};
+
+export default BarChart;

components/GISModule/eqClassIficationEcharts.tsx

@@ -0,0 +1,106 @@
+import React from "react";
+import EChart, {type EChartProps} from "../echarts";
+
+// 柱状图特定属性接口
+export type BarChartProps = {
+    // 柱状图数据
+    data: { value: number; name: string }[];
+    // 柱状图标题
+    title?: string;
+    // X轴名称
+    xAxisName?: string;
+    // Y轴名称
+    yAxisName?: string;
+    // 柱状图颜色配置
+    color?: string;
+    // 其他EChart通用属性
+} & Omit<EChartProps, "option">;
+
+const BarChart = ({
+                      data,
+                      title = "统计数据",
+                      xAxisName = "",
+                      yAxisName = "",
+                      color = "#1890ff",
+                      ...props
+                  }: BarChartProps) => {
+    // 提取x轴数据和系列数据
+    const xAxisData = data.map(item => item.name);
+    const seriesData = data.map(item => item.value);
+
+    // 默认柱状图配置
+    const defaultOption = {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow'
+            },
+        },
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '8%',
+            top: '15%',
+            containLabel: true
+        },
+        xAxis: [
+            {
+                type: 'category',
+                data: xAxisData,
+                axisLine: {
+                    lineStyle: {
+                        color: '#fff'
+                    }
+                },
+                axisLabel: {
+                    color: '#fff'
+                },
+                name: xAxisName,
+                nameTextStyle: {
+                    color: '#fff',
+                    padding: [0, 0, 10, 0]
+                }
+            }
+        ],
+        yAxis: [
+            {
+                type: 'value',
+                axisLine: {
+                    lineStyle: {
+                        color: '#fff'
+                    }
+                },
+                axisLabel: {
+                    color: '#fff',
+                    formatter: '{value}'
+                },
+                splitLine: {
+                    lineStyle: {
+                        color: 'rgba(255, 255, 255, 0.1)'
+                    }
+                },
+                name: yAxisName,
+                nameTextStyle: {
+                    color: '#fff',
+                    padding: [0, 10, 0, 0]
+                }
+            }
+        ],
+        series: [
+            {
+                name: title,
+                type: 'bar',
+                barWidth: '60%',
+                data: seriesData,
+                itemStyle: {
+                    color: color,
+                    borderRadius: [4, 4, 0, 0]
+                }
+            }
+        ]
+    };
+
+    return <EChart option={defaultOption} {...props} />;
+};
+
+export default BarChart;

components/GISModule/gisMapJinggai.tsx

@@ -0,0 +1,180 @@
+'use client'
+import React, {useEffect, useRef, useState} from 'react';
+import deom1 from "../assets/deom1.png";
+import deom2 from "../assets/deom2.png";
+import Uptow from "../assets/up-two.png";
+import markerData from "../assets/markerData.json";
+import fameng from "../assets/fameng.png";
+import shuifa from "../assets/shuifa.png";
+import dataJson from "../assets/index.json";
+import "../assets/BaiduMapPage.css";
+
+// 仅在浏览器环境中声明 window 类型
+declare global {
+    interface Window {
+        BMapGL: any;
+        initMap: () => void;
+    }
+}
+
+function GisMapJinggai(props: {height: string}) {
+    const mapRef = useRef<HTMLDivElement>(null);
+    const [map, setMap] = useState<any>(null);
+    const [isClient, setIsClient] = useState(false);
+
+    // 标记是否在浏览器环境
+    useEffect(() => {
+        setIsClient(true);
+    }, []);
+
+    // 初始化地图
+    useEffect(() => {
+        if (!isClient || !mapRef.current) return;
+        // 检查是否已加载百度地图 GL JS API
+        if (!window.BMapGL) {
+            // 动态加载百度地图 GL JS API
+            const script = document.createElement('script');
+            script.src = `https://api.map.baidu.com/api?v=2.0&ak=jWDCUpsk33htQsF6IEwk4ctkERTOFFH0&type=webgl`;
+            script.async = true;
+            script.onload = () => {
+                initializeMap();
+            };
+            document.head.appendChild(script);
+        } else {
+            initializeMap();
+        }
+
+        return () => {
+            // 清理工作
+            if (map && map.destroy) {
+                map.destroy();
+            }
+        };
+    }, [isClient]);
+
+    const initializeMap = () => {
+        if (!window.BMapGL || !mapRef.current) return;
+
+        // 创建地图实例
+        const mapInstance = new window.BMapGL.Map(mapRef.current);
+        // 设置中心点坐标
+        const point = new window.BMapGL.Point(110.39573035064166, 28.44628067667752);
+        mapInstance.centerAndZoom(point, 15);
+        // 启用滚轮放大缩小
+        mapInstance.enableScrollWheelZoom(true);
+        // 设置初始倾斜角度为30度（范围：0-45度）
+        mapInstance.setTilt(45);
+        // 添加控件
+        mapInstance.setMinZoom(15);
+        mapInstance.setMaxZoom(19);
+        mapInstance.setMapStyleV2({
+            styleId: '62ce43ad2a1362c23e612b783d7406e7'
+        });
+
+        // 添加标记点
+        if (markerData?.list?.dataOne) {
+            markerData.list.dataOne.forEach((item: any) => {
+                const icon = new window.BMapGL.Icon(fameng.src, new window.BMapGL.Size(23, 25), {
+                    anchor: new window.BMapGL.Size(10, 25),
+                });
+                const markers = new window.BMapGL.Point(item.lng, item.lat);
+                const marker = new window.BMapGL.Marker(markers, {icon});
+                mapInstance.addOverlay(marker);
+
+                // 创建信息窗口
+                const opts = {
+                    width: 300,
+                    title: item.name
+                };
+                const infoWindow = new window.BMapGL.InfoWindow(
+                    "倾斜角度：188deg<br/>" +
+                    "状态：正常运行<br/>" +
+                    "信噪比：16db<br/>" +
+                    "负责人：张三<br/>" +
+                    "联系方式：121234564", opts
+                );
+
+                marker.addEventListener('click', () => {
+                    mapInstance.openInfoWindow(infoWindow, markers);
+                });
+            });
+        }
+
+        if (markerData?.list?.dataTwo) {
+            markerData.list.dataTwo.forEach((item: any) => {
+                const icon = new window.BMapGL.Icon(shuifa.src, new window.BMapGL.Size(23, 25), {
+                    anchor: new window.BMapGL.Size(20, 0),
+                });
+                const markers = new window.BMapGL.Point(item.lng, item.lat);
+                const marker = new window.BMapGL.Marker(markers, {icon});
+                mapInstance.addOverlay(marker);
+
+                // 创建信息窗口
+                const opts = {
+                    width: 300,
+                    title: item.name
+                };
+                const infoWindow = new window.BMapGL.InfoWindow(
+                    "倾斜角度：188deg<br/>" +
+                    "状态：正常运行<br/>" +
+                    "信噪比：16db<br/>" +
+                    "负责人：张三<br/>" +
+                    "联系方式：121234564", opts
+                );
+
+                marker.addEventListener('click', () => {
+                    mapInstance.openInfoWindow(infoWindow, markers);
+                });
+            });
+        }
+
+        // 添加线路图层
+        if (window.BMapGL.LineLayer && dataJson) {
+            const lineLayer = new window.BMapGL.LineLayer({
+                enablePicked: true,
+                autoSelect: true,
+                pickWidth: 30,
+                pickHeight: 30,
+                opacity: 1,
+                selectedColor: 'blue',
+                style: {
+                    sequence: false,
+                    marginLength: 18,
+                    borderMask: true,
+                    strokeWeight: 10,
+                    strokeLineJoin: 'round',
+                    strokeLineCap: 'round',
+                    strokeTextureUrl: ['match', ['get', 'name'], 'demo1', deom1.src, 'demo2', deom2.src, Uptow.src],
+                }
+            });
+
+            lineLayer.setData(dataJson);
+            mapInstance.addNormalLayer(lineLayer);
+        }
+
+        setMap(mapInstance);
+
+        // 添加点击地图事件
+        mapInstance.addEventListener('click', (e: any) => {
+            console.log('点击位置经纬度:', e.latlng?.lng, e.latlng?.lat);
+        });
+    };
+
+    if (!isClient) {
+        return (
+            <div className="flex items-center justify-center h-full bg-gray-100">
+                <div className="text-gray-500">地图加载中...</div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="flex flex-col font-sans" style={{height: props.height + "vh"}}>
+            <div className="flex flex-1 overflow-hidden">
+                <div ref={mapRef} className="flex-1 h-full"></div>
+            </div>
+        </div>
+    );
+}
+
+export default GisMapJinggai;

components/realTimeMontorModule/RTMMBarchart.tsx

@@ -0,0 +1,106 @@
+import React from "react";
+import EChart, {type EChartProps} from "../echarts";
+
+// 柱状图特定属性接口
+export type BarChartProps = {
+    // 柱状图数据
+    data: { value: number; name: string }[];
+    // 柱状图标题
+    title?: string;
+    // X轴名称
+    xAxisName?: string;
+    // Y轴名称
+    yAxisName?: string;
+    // 柱状图颜色配置
+    color?: string;
+    // 其他EChart通用属性
+} & Omit<EChartProps, "option">;
+
+const BarChart = ({
+                      data,
+                      title = "统计数据",
+                      xAxisName = "",
+                      yAxisName = "",
+                      color = "#1890ff",
+                      ...props
+                  }: BarChartProps) => {
+    // 提取x轴数据和系列数据
+    const xAxisData = data.map(item => item.name);
+    const seriesData = data.map(item => item.value);
+
+    // 默认柱状图配置
+    const defaultOption = {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow'
+            },
+        },
+        grid: {
+            left: '0%',
+            right: '0%',
+            bottom: '0%',
+            top: '10%',
+            containLabel: true
+        },
+        xAxis: [
+            {
+                type: 'category',
+                data: xAxisData,
+                axisLine: {
+                    lineStyle: {
+                        color: '#fff'
+                    }
+                },
+                axisLabel: {
+                    color: 'black'
+                },
+                name: xAxisName,
+                nameTextStyle: {
+                    color: 'black',
+                    padding: [0, 0, 10, 0]
+                }
+            }
+        ],
+        yAxis: [
+            {
+                type: 'value',
+                axisLine: {
+                    lineStyle: {
+                        color: 'black'
+                    }
+                },
+                axisLabel: {
+                    color: 'black',
+                    formatter: '{value}'
+                },
+                splitLine: {
+                    lineStyle: {
+                        color: 'rgba(255, 255, 255, 0.1)'
+                    }
+                },
+                name: yAxisName,
+                nameTextStyle: {
+                    color: 'black',
+                    padding: [0, 10, 0, 0]
+                }
+            }
+        ],
+        series: [
+            {
+                name: title,
+                type: 'bar',
+                barWidth: '60%',
+                data: seriesData,
+                itemStyle: {
+                    color: color,
+                    borderRadius: [4, 4, 0, 0]
+                }
+            }
+        ]
+    };
+
+    return <EChart option={defaultOption} {...props} />;
+};
+
+export default BarChart;

components/realTimeMontorModule/RTMMGis.tsx

@@ -0,0 +1,563 @@
+'use client'
+import React, {useEffect, useRef, useState} from 'react';
+import deom1 from "../assets/deom1.png";
+import deom2 from "../assets/deom2.png";
+import Uptow from "../assets/up-two.png";
+import markerData from "../assets/markerData.json";
+import fameng from "../assets/fameng.png";
+import shuifa from "../assets/shuifa.png";
+import dataJson from "../assets/index.json";
+import "../assets/BaiduMapPage.css";
+
+import {Badge, Card, Col, Modal, Row,} from "antd"
+
+// 添加图标导入
+import {CheckCircleOutlined, CloseCircleOutlined, ExclamationCircleOutlined, WifiOutlined} from '@ant-design/icons';
+import RTMMPicEcharts from "@/components/realTimeMontorModule/RTMMPicEcharts";
+import RTMMBarChart from "@/components/realTimeMontorModule/RTMMBarchart";
+// ... 其余代码保持不变 ...
+
+// 仅在浏览器环境中声明 window 类型
+declare global {
+    interface Window {
+        BMapGL: any;
+        initMap: () => void;
+    }
+}
+
+function GisMapBaidu(props: { height: string }) {
+    const mapRef = useRef<HTMLDivElement>(null);
+    const [map, setMap] = useState<any>(null);
+    const [isClient, setIsClient] = useState(false);
+
+    // 设备列表状态
+    const [popupFrameVisible, setPopupFrameVisible] = useState(false);
+    const [manholeCoverData, setManholeCoverData] = useState<any>(null);
+
+    // 标记是否在浏览器环境
+    useEffect(() => {
+        setIsClient(true);
+    }, []);
+
+    // 初始化地图
+    useEffect(() => {
+        if (!isClient || !mapRef.current) return;
+
+        // 检查是否已加载百度地图 GL JS API
+        if (!window.BMapGL) {
+            // 动态加载百度地图 GL JS API
+            const script = document.createElement('script');
+            script.src = `https://api.map.baidu.com/api?v=2.0&ak=jWDCUpsk33htQsF6IEwk4ctkERTOFFH0&type=webgl`;
+            script.async = true;
+            script.onload = () => {
+                initializeMap();
+            };
+            document.head.appendChild(script);
+        } else {
+            initializeMap();
+        }
+
+        return () => {
+            // 清理工作
+            if (map && map.destroy) {
+                map.destroy();
+            }
+        };
+    }, [isClient]);
+
+    const initializeMap = () => {
+        if (!window.BMapGL || !mapRef.current) return;
+
+        // 创建地图实例
+        const mapInstance = new window.BMapGL.Map(mapRef.current);
+        // 设置中心点坐标
+        const point = new window.BMapGL.Point(110.39573035064166, 28.44628067667752);
+        mapInstance.centerAndZoom(point, 16);
+        // 启用滚轮放大缩小
+        mapInstance.enableScrollWheelZoom(true);
+        // 设置初始倾斜角度为30度（范围：0-45度）
+        mapInstance.setTilt(45);
+
+        // 添加控件
+        mapInstance.setMinZoom(16);
+        mapInstance.setMaxZoom(19);
+        mapInstance.setMapStyleV2({
+            styleId: '62ce43ad2a1362c23e612b783d7406e7'
+        });
+
+        // 添加标记点
+        if (markerData?.list?.dataOne) {
+            markerData.list.dataOne.forEach((item: any) => {
+                const icon = new window.BMapGL.Icon(fameng.src, new window.BMapGL.Size(23, 25), {
+                    anchor: new window.BMapGL.Size(10, 25),
+                });
+                const markers = new window.BMapGL.Point(item.lng, item.lat);
+                const marker = new window.BMapGL.Marker(markers, {icon});
+                mapInstance.addOverlay(marker);
+
+                // 创建信息窗口
+                const opts = {
+                    width: 300,
+                    title: item.name
+                };
+                const infoWindow = new window.BMapGL.InfoWindow(
+                    "倾斜角度：188deg<br/>" +
+                    "状态：正常运行<br/>" +
+                    "信噪比：16db<br/>" +
+                    "负责人：张三<br/>" +
+                    "联系方式：121234564", opts
+                );
+
+                marker.addEventListener('click', () => {
+                    mapInstance.openInfoWindow(infoWindow, markers);
+                    console.log('点击了标记点', item);
+                    // 添加显示弹窗的逻辑
+                    setManholeCoverData(item);
+                    setPopupFrameVisible(true);
+                });
+            });
+        }
+
+        if (markerData?.list?.dataTwo) {
+            markerData.list.dataTwo.forEach((item: any) => {
+                const icon = new window.BMapGL.Icon(shuifa.src, new window.BMapGL.Size(23, 25), {
+                    anchor: new window.BMapGL.Size(20, 0),
+                });
+                const markers = new window.BMapGL.Point(item.lng, item.lat);
+                const marker = new window.BMapGL.Marker(markers, {icon});
+                mapInstance.addOverlay(marker);
+
+                // 创建信息窗口
+                const opts = {
+                    width: 300,
+                    title: item.name
+                };
+                // const infoWindow = new window.BMapGL.InfoWindow(
+                //     "倾斜角度：188deg<br/>" +
+                //     "状态：正常运行<br/>" +
+                //     "信噪比：16db<br/>" +
+                //     "负责人：张三<br/>" +
+                //     "联系方式：121234564", opts
+                // );
+
+
+                marker.addEventListener('click', () => {
+                    // mapInstance.openInfoWindow(infoWindow, markers);
+                    setManholeCoverData({
+                        ...item,
+                        neme:item.name,
+                        itemCode:'12312442222',
+                        type: '供水井盖',
+                        state:'1',
+                        worker:'东三社区',
+                        miaoshu:'检测到倾斜角度异常',
+                        time:'2023-08-01 10:00:00',
+
+                        temperature:'25',//温度
+                        humidity:'50',//湿度
+                        flow:'100',//流量
+                        flowSpeed:'2',//流速
+                        waterLevel:'100',//水位
+                        waterQuality:'100',//水质
+                        PHValue:'7.0',//PH值
+                        rongjieyang:'100',//融结氧
+                        ammoniaNitrogen:'100',//氨氮
+                    });
+                    // 添加显示弹窗的逻辑
+                    setPopupFrameVisible(true);
+                });
+            });
+        }
+
+        // 添加线路图层
+        if (window.BMapGL.LineLayer && dataJson) {
+            const lineLayer = new window.BMapGL.LineLayer({
+                enablePicked: true,
+                autoSelect: true,
+                pickWidth: 30,
+                pickHeight: 30,
+                opacity: 1,
+                selectedColor: 'blue',
+                style: {
+                    sequence: false,
+                    marginLength: 18,
+                    borderMask: true,
+                    strokeWeight: 10,
+                    strokeLineJoin: 'round',
+                    strokeLineCap: 'round',
+                    strokeTextureUrl: ['match', ['get', 'name'], 'demo1', deom1.src, 'demo2', deom2.src, Uptow.src],
+                }
+            });
+
+            lineLayer.setData(dataJson);
+            mapInstance.addNormalLayer(lineLayer);
+        }
+
+        setMap(mapInstance);
+
+        // 添加点击地图事件
+        mapInstance.addEventListener('click', (e: any) => {
+            console.log('点击位置经纬度:', e.latlng?.lng, e.latlng?.lat);
+        });
+    };
+
+    if (!isClient) {
+        return (
+            <div className="flex items-center justify-center h-full bg-gray-100">
+                <div className="text-gray-500">地图加载中...</div>
+            </div>
+        );
+    }
+
+    // 合并return语句，修复Modal无法显示的问题
+    return (
+        <>
+            <div className="flex flex-col font-sans" style={{ height: props.height + "vh" }}>
+                <div className="flex flex-1 overflow-hidden statisticsBox">
+                    {/* 添加左侧三个板块区域 */}
+                    <div style={{ width: '380px', overflow: 'auto' }}>
+                        {/* 板块1 */}
+                        <Card title="状态监测统计（15天）" style={{ marginBottom: '10px',
+                            backgroundColor: '#b9d8ff85'}}>
+                            <div style={{ textAlign: 'center',height: '200px' }}>
+                                <RTMMPicEcharts
+                                    // title="告警类型统计"
+                                    data={[
+                                        {value: 335, name: '位移告警'},
+                                        {value: 310, name: '倾斜告警'},
+                                        {value: 234, name: '水位告警'},
+                                        {value: 135, name: '电压告警'},
+                                        {value: 1548, name: '温度告警'}
+                                    ]}
+                                    style={{height: '100%', width: '100%'}}
+                                />
+                            </div>
+                        </Card>
+
+                        {/* 板块2 */}
+                        <Card title="设备状态" style={{ marginBottom: '16px', backgroundColor: '#b9d8ff85' }}>
+                            <div>
+                                {/* 修改为2行2列的四宫格布局 */}
+                                <Row gutter={[16, 16]}>
+                                    {/* 正常运行状态卡片 */}
+                                    <Col span={12}>
+                                        <div style={{
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            padding: '12px',
+                                            backgroundColor: 'rgba(255, 255, 255, 0.7)',
+                                            borderRadius: '8px'
+                                        }}>
+                                            {/* 左侧图标 */}
+                                            <div style={{
+                                                width: '40px',
+                                                height: '40px',
+                                                backgroundColor: '#f0f9eb',
+                                                borderRadius: '50%',
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                justifyContent: 'center',
+                                                marginRight: '12px'
+                                            }}>
+                                                <CheckCircleOutlined style={{ fontSize: '24px', color: '#52c41a' }} />
+                                            </div>
+
+                                            {/* 右侧文字和数值 */}
+                                            <div>
+                                                <div style={{ color: '#333' }}>正常运行</div>
+                                                <div style={{ fontSize: '20px', fontWeight: 'bold', color: '#52c41a' }}>12</div>
+                                            </div>
+                                        </div>
+                                    </Col>
+
+                                    {/* 需要注意状态卡片 */}
+                                    <Col span={12}>
+                                        <div style={{
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            padding: '12px',
+                                            backgroundColor: 'rgba(255, 255, 255, 0.7)',
+                                            borderRadius: '8px'
+                                        }}>
+                                            <div style={{
+                                                width: '40px',
+                                                height: '40px',
+                                                backgroundColor: '#fffbe6',
+                                                borderRadius: '50%',
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                justifyContent: 'center',
+                                                marginRight: '12px'
+                                            }}>
+                                                <ExclamationCircleOutlined style={{ fontSize: '24px', color: '#faad14' }} />
+                                            </div>
+                                            <div>
+                                                <div style={{ color: '#333' }}>需要注意</div>
+                                                <div style={{ fontSize: '20px', fontWeight: 'bold', color: '#faad14' }}>3</div>
+                                            </div>
+                                        </div>
+                                    </Col>
+
+                                    {/* 异常状态卡片 */}
+                                    <Col span={12}>
+                                        <div style={{
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            padding: '12px',
+                                            backgroundColor: 'rgba(255, 255, 255, 0.7)',
+                                            borderRadius: '8px'
+                                        }}>
+                                            <div style={{
+                                                width: '40px',
+                                                height: '40px',
+                                                backgroundColor: '#fff2f0',
+                                                borderRadius: '50%',
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                justifyContent: 'center',
+                                                marginRight: '12px'
+                                            }}>
+                                                <CloseCircleOutlined style={{ fontSize: '24px', color: '#f5222d' }} />
+                                            </div>
+                                            <div>
+                                                <div style={{ color: '#333' }}>异常状态</div>
+                                                <div style={{ fontSize: '20px', fontWeight: 'bold', color: '#f5222d' }}>1</div>
+                                            </div>
+                                        </div>
+                                    </Col>
+
+                                    {/* 离线类型卡片 */}
+                                    <Col span={12}>
+                                        <div style={{
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            padding: '12px',
+                                            backgroundColor: 'rgba(255, 255, 255, 0.7)',
+                                            borderRadius: '8px'
+                                        }}>
+                                            <div style={{
+                                                width: '40px',
+                                                height: '40px',
+                                                backgroundColor: '#f5f5f5',
+                                                borderRadius: '50%',
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                justifyContent: 'center',
+                                                marginRight: '12px'
+                                            }}>
+                                                <WifiOutlined style={{ fontSize: '24px', color: '#999999' }} />
+                                            </div>
+                                            <div>
+                                                <div style={{ color: '#333' }}>离线类型</div>
+                                                <div style={{ fontSize: '20px', fontWeight: 'bold', color: '#999999' }}>2</div>
+                                            </div>
+                                        </div>
+                                    </Col>
+                                </Row>
+                            </div>
+                        </Card>
+
+                        {/* 板块3 */}
+                        <Card title="分类监测态势" style={{ marginBottom: '16px', backgroundColor: '#b9d8ff85' }}>
+
+                            <div style={{ height:'170px'}}>
+                                <RTMMBarChart
+                                    data={[
+                                        {value: 120, name: '电用井盖'},
+                                        {value: 85, name: '供水井盖'},
+                                        {value: 60, name: '通信井盖'},
+                                        {value: 45, name: '燃气井盖'},
+                                        {value: 30, name: '污水井盖'},
+                                        {value: 30, name: '雨水井盖'},
+                                        {value: 30, name: '路灯井盖'},
+                                        {value: 30, name: '网络井盖'},
+                                        {value: 30, name: '电缆井盖'},
+                                        {value: 30, name: '园林井盖'},
+                                        {value: 30, name: '化粪池井盖'}
+                                    ]}
+                                    style={{height: '100%', width: '100%'}}
+                                />
+                            </div>
+                        </Card>
+                    </div>
+
+                    {/* 地图容器区域 */}
+                    <div ref={mapRef} className="flex-1 h-full"></div>
+                </div>
+            </div>
+
+
+            <Modal
+                title="GIS设备详情"
+                open={popupFrameVisible}
+                onCancel={() => setPopupFrameVisible(false)}
+                width={800}
+                className="custom-modal"
+                // 添加mask={false}移除遮罩层
+                mask={false}
+                // 定位样式保持不变
+                style={{
+                    position: 'absolute',
+                    right: 0,
+                    top: 150,
+                    textAlign: 'center',
+                }}
+            >
+                {manholeCoverData && (
+                    <div className="space-y-4" style={{ display: 'flex', justifyContent: 'space-between' }}>
+                        <div style={{ width: '50%' }}>
+                            <div className="space-y-4" style={{ textAlign: 'left' }}>
+                                <Row gutter={16}>
+                                    <Col span={12}>
+                                        <div>
+                                            <strong style={{ color: '#B0E0E6' }}>设备名称:</strong> {manholeCoverData.name}
+                                        </div>
+                                    </Col>
+                                </Row>
+                                <Row gutter={16}>
+                                    <Col span={12}>
+                                        <div>
+                                            <strong style={{ color: '#B0E0E6' }}>设备编号:</strong> {manholeCoverData.itemCode}
+                                        </div>
+                                    </Col>
+                                </Row>
+                                <Row gutter={16}>
+                                    <Col span={12}>
+                                        <div>
+                                            <strong style={{ color: '#B0E0E6' }}>设备类型:</strong> {manholeCoverData.type}
+                                        </div>
+                                    </Col>
+                                </Row>
+                                <Row gutter={16}>
+                                    <Col span={12}>
+                                        <div>
+                                            <strong style={{ color: '#B0E0E6' }}>状态:</strong>
+                                            <Badge
+                                                style={{
+                                                    marginLeft: '10px'
+                                                }}
+                                                status={manholeCoverData.state === "1" ? "success" : "error"}
+                                                text={
+                                                    <span style={{
+                                                        color: manholeCoverData.state === "1" ? "#52c41a" : "#f5222d"
+                                                    }}>
+                                                        {manholeCoverData.state === "1" ? "正常" : "异常"}
+                                                    </span>
+                                                }
+                                            />
+                                        </div>
+                                    </Col>
+                                </Row>
+                                <Row gutter={16}>
+                                    <Col span={12}>
+                                        <div>
+                                            <strong style={{ color: '#B0E0E6' }}>权属单位:</strong> {manholeCoverData.worker}
+                                        </div>
+                                    </Col>
+                                </Row>
+                                <Row gutter={16}>
+                                    <Col span={15}>
+                                        <div>
+                                            <strong style={{ color: '#B0E0E6' }}>监测描述:</strong> {manholeCoverData.miaoshu}
+                                        </div>
+                                    </Col>
+                                </Row>
+                                <div style={{ color: '#B0E0E6', fontWeight:'bold',fontSize:'20px'}}>窑井下监测信息</div>
+
+                                <Row gutter={16}>
+                                    <Col span={12}>
+                                        <div>
+                                            <strong style={{ color: '#B0E0E6' }}>温度:</strong> {manholeCoverData.temperature}
+                                        </div>
+                                    </Col>
+                                    <Col span={12}>
+                                        <div>
+                                            <strong style={{ color: '#B0E0E6' }}>湿度:</strong> {manholeCoverData.humidity}
+                                        </div>
+                                    </Col>
+                                </Row>
+                                <Row gutter={16}>
+                                    <Col span={12}>
+                                        <div>
+                                            <strong style={{ color: '#B0E0E6' }}>流量:</strong> {manholeCoverData.flow}
+                                        </div>
+                                    </Col>
+                                    <Col span={12}>
+                                        <div>
+                                            <strong style={{ color: '#B0E0E6' }}>水位:</strong> {manholeCoverData.waterLevel}
+                                        </div>
+                                    </Col>
+                                </Row>
+                                <Row gutter={16}>
+                                    <Col span={12}>
+                                        <div>
+                                            <strong style={{ color: '#B0E0E6' }}>流速:</strong> {manholeCoverData.flowSpeed}
+                                        </div>
+                                    </Col>
+                                    <Col span={12}>
+                                        <div>
+                                            <strong style={{ color: '#B0E0E6' }}>水质:</strong> {manholeCoverData.waterQuality}
+                                        </div>
+                                    </Col>
+                                </Row>
+                                <Row gutter={16}>
+                                    <Col span={12}>
+                                        <div>
+                                            <strong style={{ color: '#B0E0E6' }}>PH值:</strong> {manholeCoverData.PHValue}
+                                        </div>
+                                    </Col>
+                                    <Col span={12}>
+                                        <div>
+                                            <strong style={{ color: '#B0E0E6' }}>氨氮:</strong> {manholeCoverData.ammoniaNitrogen}
+                                        </div>
+                                    </Col>
+                                </Row>
+                            </div>
+                        </div>
+                        <div style={{width: '50%'}}>2</div>
+                    </div>
+                )}
+            </Modal>
+
+            {/* 添加全局样式覆盖表头背景色 */}
+            <style jsx global>{`
+                 /* 修改Modal背景色和添加渐变边框 */
+                .custom-modal .ant-modal-content {
+                    background-color: rgba(58, 56, 153, 1) !important; /* 主背景色 */
+                    color: white; /* 文字颜色 */
+                    /* 添加由外向内的径向渐变边框 */
+                    border: 2px solid transparent;
+                    border-radius: 8px;
+                    background-clip: padding-box, border-box;
+                    background-origin: padding-box, border-box;
+                    background-image: 
+                        linear-gradient( rgba(58, 56, 153, 1),  rgba(58, 56, 153, 1)), /* 背景色 */
+                        radial-gradient(circle at center, #ff6b6b, #4ecdc4); /* 由外向内的径向渐变边框 */
+                }
+                /* 可选：修改Modal标题栏样式 */
+                .custom-modal .ant-modal-header {
+                    background-color:  rgba(58, 56, 153, 1) !important;
+                    border-bottom: none; /* 移除底部边框 */
+                }
+                
+                .custom-modal .ant-modal-title{
+                    color:white !important;
+                    border-bottom:1px solid white;
+                }
+                
+                .statisticsBox .ant-card .ant-card-head{
+                    background-color:  rgba(58, 56, 153, 1) !important;
+                    min-height: 40px !important;
+                    color:white;
+                    padding:0px 12px !important;
+                }
+                
+                .statisticsBox .ant-card .ant-card-body {
+                    padding:12px !important;
+                }
+            `}</style>
+        </>
+    );
+}
+
+export default GisMapBaidu;

components/realTimeMontorModule/RTMMPicEcharts.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import EChart, {type EChartProps} from "../echarts";
+
+// 饼图特定属性接口
+export type PieChartProps = {
+    // 饼图数据
+    data: { value: number; name: string }[];
+    // 饼图标题
+    title?: string;
+    // 饼图半径配置
+    radius?: [string, string];
+    // 饼图颜色配置
+    colors?: string[];
+    // 其他EChart通用属性
+} & Omit<EChartProps, "option">;
+
+const PieChart = ({
+                      data,
+                      title = "统计数据",
+                      radius = ["50%", "90%"],
+                      colors,
+                      ...props
+                  }: PieChartProps) => {
+    // 默认饼图配置
+    const defaultOption = {
+        // title: {
+        //     text: title,
+        //     left: "center",
+        //     textStyle: {
+        //         color: "#fff", // 标题文字颜色
+        //     },
+        // },
+        tooltip: {
+            trigger: "item",
+            formatter: "{a} <br/>{b}: {c} ({d}%)",
+        },
+        legend: {
+            orient: "vertical",
+            top:20,
+            right: 10,
+            textStyle: {
+                color: "black", // 图例文字颜色
+            },
+        },
+        series: [
+            {
+                name: "统计",
+                type: "pie",
+                radius: radius,
+                // 添加center属性控制饼图位置，[left, top]，百分比值相对于容器
+                center: ['30%', '50%'], // 调整第一个值(左右位置)，越小越靠左
+                avoidLabelOverlap: false,
+                itemStyle: {
+                    borderRadius: 10,
+                    borderColor: "#3a3899", // 饼图块边框颜色
+                    borderWidth: 2,
+                },
+                label: {
+                    show: false,
+                    position: "center",
+                    color: "black",
+                },
+                emphasis: {
+                    label: {
+                        show: true,
+                        fontSize: 16,
+                        fontWeight: "bold",
+                        color: "black",
+                    },
+                },
+                labelLine: {
+                    show: false,
+                },
+                data: data,
+                color: colors || ["#f5222d", "#faad14", "#52c41a", "#1890ff", "#722ed1"],
+            },
+        ],
+    };
+
+    return <EChart option={defaultOption} {...props} />;
+};
+
+export default PieChart;