feat(app): 新增燃气管网安全运行监测系统页面

- 添加总览仪表板、基础数据管理、隐患管理、运行监测、监测报警、风险评估等功能模块
- 实现暗黑主题切换功能
- 集成地图组件和多个数据展示组件
- 优化布局和样式，提升用户体验

app/(other)/test8/page.tsx

@@ -0,0 +1,392 @@
+"use client"
+
+import {useState} from "react"
+import {Badge, Card, Col, Layout, Menu, Row, Statistic, Switch} from "antd"
+import {
+  BellOutlined,
+  DashboardOutlined,
+  DatabaseOutlined,
+  EnvironmentOutlined,
+  ExclamationCircleOutlined,
+  MonitorOutlined,
+  MoonOutlined,
+  SafetyOutlined,
+  SunOutlined,
+} from "@ant-design/icons"
+import dynamic from "next/dynamic"
+
+const GasNetworkMap = dynamic(() => import("./components/gas-network-map"), {
+  ssr: false,
+  loading: () => <div className="flex items-center justify-center h-96">加载地图中...</div>,
+})
+
+const PipelineDataManagement = dynamic(() => import("./components/pipeline-data-management"), {
+  ssr: false,
+  loading: () => <div className="flex items-center justify-center h-96">加载中...</div>,
+})
+
+const DeviceManagement = dynamic(() => import("./components/device-management"), {
+  ssr: false,
+  loading: () => <div className="flex items-center justify-center h-96">加载中...</div>,
+})
+
+const HazardArchive = dynamic(() => import("./components/hazard-archive"), {
+  ssr: false,
+  loading: () => <div className="flex items-center justify-center h-96">加载中...</div>,
+})
+
+const HazardTreatmentStats = dynamic(() => import("./components/hazard-treatment-stats"), {
+  ssr: false,
+  loading: () => <div className="flex items-center justify-center h-96">加载中...</div>,
+})
+
+const KeyIndicatorsMonitoring = dynamic(() => import("./components/key-indicators-monitoring"), {
+  ssr: false,
+  loading: () => <div className="flex items-center justify-center h-96">加载中...</div>,
+})
+
+const MonitoringVisualization = dynamic(() => import("./components/monitoring-visualization"), {
+  ssr: false,
+  loading: () => <div className="flex items-center justify-center h-96">加载中...</div>,
+})
+
+const AbnormalAlarm = dynamic(() => import("./components/abnormal-alarm"), {
+  ssr: false,
+  loading: () => <div className="flex items-center justify-center h-96">加载中...</div>,
+})
+
+const AlarmVisualization = dynamic(() => import("./components/alarm-visualization"), {
+  ssr: false,
+  loading: () => <div className="flex items-center justify-center h-96">加载中...</div>,
+})
+
+// 添加风险评估模块组件的动态导入
+const RiskArchive = dynamic(() => import("./components/risk-archive"), {
+  ssr: false,
+  loading: () => <div className="flex items-center justify-center h-96">加载中...</div>,
+})
+
+const RiskVisualization = dynamic(() => import("./components/risk-visualization"), {
+  ssr: false,
+  loading: () => <div className="flex items-center justify-center h-96">加载中...</div>,
+})
+
+const { Header, Sider, Content } = Layout
+
+export default function HomePage() {
+  const [selectedKey, setSelectedKey] = useState("dashboard")
+  const [isDarkMode, setIsDarkMode] = useState(false)
+
+  const menuItems = [
+    {
+      key: "dashboard",
+      icon: <DashboardOutlined />,
+      label: "总览仪表板",
+    },
+    {
+      key: "basic-data",
+      icon: <DatabaseOutlined />,
+      label: "基础数据管理",
+      children: [
+        { key: "pipeline-data", label: "燃气管网数据" },
+        { key: "device-management", label: "监测设备管理" },
+      ],
+    },
+    {
+      key: "hazard-management",
+      icon: <ExclamationCircleOutlined />,
+      label: "隐患管理",
+      children: [
+        { key: "hazard-archive", label: "隐患台账" },
+        { key: "hazard-treatment", label: "隐患治理统计" },
+      ],
+    },
+    {
+      key: "operation-monitoring",
+      icon: <MonitorOutlined />,
+      label: "运行监测",
+      children: [
+        { key: "key-indicators", label: "关键指标监测" },
+        { key: "monitoring-visualization", label: "监测可视化" },
+      ],
+    },
+    {
+      key: "alarm-monitoring",
+      icon: <BellOutlined />,
+      label: "监测报警",
+      children: [
+        { key: "abnormal-alarm", label: "异常报警" },
+        { key: "alarm-visualization", label: "报警可视化" },
+      ],
+    },
+    {
+      key: "risk-assessment",
+      icon: <SafetyOutlined />,
+      label: "风险评估",
+      children: [
+        { key: "risk-archive", label: "风险档案" },
+        { key: "risk-visualization", label: "风险可视化" },
+      ],
+    },
+  ]
+
+  const renderContent = () => {
+    switch (selectedKey) {
+      case "dashboard":
+        return (
+          <div className="p-6">
+            <div className="mb-6">
+              <h1 className={`text-2xl font-bold mb-2 ${isDarkMode ? "text-white" : "text-gray-800"}`}>
+                燃气管网安全运行监测系统 - 长沙市
+              </h1>
+              <p className={isDarkMode ? "text-gray-300" : "text-gray-600"}>
+                实时监控长沙市燃气管网运行状态，保障城市燃气安全
+              </p>
+            </div>
+
+            <Row gutter={[16, 16]} className="mb-6">
+              <Col span={6}>
+                <Card className="dashboard-card">
+                  <Statistic title="管网总长度" value={2156.8} suffix="km" valueStyle={{ color: "#1890ff" }} />
+                </Card>
+              </Col>
+              <Col span={6}>
+                <Card className="dashboard-card">
+                  <Statistic title="监测设备" value={568} suffix="台" valueStyle={{ color: "#52c41a" }} />
+                </Card>
+              </Col>
+              <Col span={6}>
+                <Card className="dashboard-card">
+                  <Statistic title="待处理隐患" value={12} suffix="项" valueStyle={{ color: "#faad14" }} />
+                </Card>
+              </Col>
+              <Col span={6}>
+                <Card className="dashboard-card">
+                  <Statistic title="活跃报警" value={3} suffix="个" valueStyle={{ color: "#f5222d" }} />
+                </Card>
+              </Col>
+            </Row>
+
+            <Row gutter={[16, 16]} className="mb-6">
+              <Col span={24}>
+                <Card title="长沙市燃气管网一张图" className="mb-4">
+                  <GasNetworkMap height="500px" />
+                </Card>
+              </Col>
+            </Row>
+
+            <Row gutter={[16, 16]}>
+              <Col span={12}>
+                <Card title="系统状态" className="h-64">
+                  <div className="flex items-center justify-center h-full">
+                    <div className="text-center">
+                      <Badge status="processing" />
+                      <span className="ml-2 text-lg">系统运行正常</span>
+                    </div>
+                  </div>
+                </Card>
+              </Col>
+              <Col span={12}>
+                <Card title="最新动态" className="h-64">
+                  <div className="space-y-3">
+                    <div className="flex items-center">
+                      <Badge status="warning" />
+                      <span className="ml-2">管线压力异常 - 五一大道段</span>
+                    </div>
+                    <div className="flex items-center">
+                      <Badge status="success" />
+                      <span className="ml-2">设备维护完成 - 监测点CS001</span>
+                    </div>
+                    <div className="flex items-center">
+                      <Badge status="processing" />
+                      <span className="ml-2">隐患整改中 - 芙蓉路段</span>
+                    </div>
+                  </div>
+                </Card>
+              </Col>
+            </Row>
+          </div>
+        )
+      case "pipeline-data":
+        return <PipelineDataManagement />
+      case "device-management":
+        return <DeviceManagement />
+      case "hazard-archive":
+        return <HazardArchive />
+      case "hazard-treatment":
+        return <HazardTreatmentStats />
+      case "key-indicators":
+        return <KeyIndicatorsMonitoring />
+      case "monitoring-visualization":
+        return <MonitoringVisualization />
+      case "abnormal-alarm":
+        return <AbnormalAlarm />
+      case "alarm-visualization":
+        return <AlarmVisualization />
+      // 添加风险评估模块页面的渲染逻辑
+      case "risk-archive":
+        return <RiskArchive />
+      case "risk-visualization":
+        return <RiskVisualization />
+      default:
+        return (
+          <div className="p-6">
+            <Card>
+              <div className="text-center py-12">
+                <h2 className="text-xl font-semibold mb-4">功能开发中</h2>
+                <p className="text-gray-600">该功能模块正在开发中，敬请期待...</p>
+              </div>
+            </Card>
+          </div>
+        )
+    }
+  }
+
+  return (
+    <>
+      <style jsx>{`
+          /* 添加主题相关样式 */
+          :global(.dark-theme) {
+              background-color: #141414;
+              color: #ffffff;
+          }
+
+          :global(.dark-theme .ant-layout) {
+              background-color: #141414;
+          }
+
+          :global(.dark-theme .ant-layout-header) {
+              background-color: #1f1f1f !important;
+              border-bottom: 1px solid #303030;
+          }
+
+          :global(.dark-theme .ant-layout-sider) {
+              background-color: #1f1f1f !important;
+          }
+
+          :global(.dark-theme .ant-layout-content) {
+              background-color: #0f0f0f !important;
+          }
+
+          :global(.dark-theme .ant-menu) {
+              background-color: #1f1f1f !important;
+              color: #ffffff;
+          }
+
+          :global(.dark-theme .ant-menu-item) {
+              color: #ffffff !important;
+          }
+
+          :global(.dark-theme .ant-menu-item:hover) {
+              background-color: #303030 !important;
+          }
+
+          :global(.dark-theme .ant-menu-item-selected) {
+              background-color: #1890ff !important;
+          }
+
+          :global(.dark-theme .ant-card) {
+              background-color: #1f1f1f !important;
+              border-color: #303030 !important;
+          }
+
+          :global(.dark-theme .ant-card-head) {
+              background-color: #1f1f1f !important;
+              border-bottom-color: #303030 !important;
+          }
+
+          :global(.dark-theme .ant-card-head-title) {
+              color: #ffffff !important;
+          }
+
+          :global(.dark-theme .ant-statistic-title) {
+              color: #bfbfbf !important;
+          }
+
+          /* Ant Design customizations - 只在此组件内生效 */
+          :global(.ant-layout-header) {
+              padding: 0 24px;
+              line-height: 64px;
+          }
+
+          :global(.ant-menu-inline) {
+              border-right: none;
+          }
+
+          :global(.ant-card) {
+              border-radius: 8px;
+              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+          }
+
+          :global(.ant-statistic-title) {
+              font-size: 14px;
+              color: #666;
+          }
+
+          :global(.ant-statistic-content) {
+              font-size: 24px;
+              font-weight: 600;
+          }
+
+          /* Custom dashboard card styles */
+          :global(.dashboard-card) {
+              transition: all 0.3s ease;
+          }
+
+          :global(.dashboard-card:hover) {
+              transform: translateY(-2px);
+              box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+          }
+      `}</style>
+
+      <div className={isDarkMode ? "dark-theme" : ""}>
+        <Layout className="min-h-screen">
+          <Header className={isDarkMode ? "bg-gray-800" : "bg-blue-600"} style={{ padding: "0 24px" }}>
+            <div className="flex items-center justify-between">
+              <div className="flex items-center">
+                <EnvironmentOutlined className="text-white text-2xl mr-3" />
+                <h1 className="text-white text-xl font-semibold">长沙市燃气管网安全监测平台</h1>
+              </div>
+              <div className="flex items-center gap-2">
+                <SunOutlined className="text-white" />
+                <Switch
+                  checked={isDarkMode}
+                  onChange={setIsDarkMode}
+                  checkedChildren={<MoonOutlined />}
+                  unCheckedChildren={<SunOutlined />}
+                />
+                <MoonOutlined className="text-white" />
+              </div>
+            </div>
+          </Header>
+
+          <Layout>
+            <Sider
+              width={250}
+              className={isDarkMode ? "bg-gray-800" : "bg-white"}
+              style={{ boxShadow: "2px 0 8px rgba(0,0,0,0.1)" }}
+            >
+              <Menu
+                mode="inline"
+                selectedKeys={[selectedKey]}
+                defaultOpenKeys={[
+                  "basic-data",
+                  "hazard-management",
+                  "operation-monitoring",
+                  "alarm-monitoring",
+                  "risk-assessment",
+                ]}
+                items={menuItems}
+                onClick={({ key }) => setSelectedKey(key)}
+                className="border-r-0"
+                theme={isDarkMode ? "dark" : "light"}
+              />
+            </Sider>
+
+            <Content className={isDarkMode ? "bg-gray-900" : "bg-gray-50"}>{renderContent()}</Content>
+          </Layout>
+        </Layout>
+      </div>
+    </>
+  )
+}

app/(other)/test9/page.tsx

@@ -0,0 +1,1200 @@
+"use client"
+
+import {useState} from "react"
+import {
+  App,
+  Badge,
+  Button,
+  Card,
+  Col,
+  Form,
+  Input,
+  Modal,
+  Row,
+  Select,
+  Space,
+  Statistic,
+  Table,
+  Tag,
+  Upload,
+} from "antd"
+import {
+  ArrowDownOutlined,
+  ArrowUpOutlined,
+  CheckCircleOutlined,
+  CloseCircleOutlined,
+  EditOutlined,
+  ExclamationCircleOutlined,
+  ExportOutlined,
+  EyeOutlined,
+  PlusOutlined,
+  SyncOutlined,
+  UploadOutlined,
+} from "@ant-design/icons"
+import EChart from "@/components/echarts"
+import WaterMap from "./components/water-map"
+import AdminLayout from "./components/admin-layout"
+import type {EChartsCoreOption} from "echarts/core"
+import globalMessage from "@/app/_modules/globalMessage";
+
+const { Search } = Input
+const { Option } = Select
+
+export default function WaterSupplyMonitoring() {
+  const [activeTab, setActiveTab] = useState("dashboard")
+  const [modalVisible, setModalVisible] = useState(false)
+  const [facilityDetailModal, setFacilityDetailModal] = useState(false)
+  const [deviceDetailModal, setDeviceDetailModal] = useState(false)
+  const [thresholdModal, setThresholdModal] = useState(false)
+  const [exportModal, setExportModal] = useState(false)
+  const [selectedRecord, setSelectedRecord] = useState<any>(null)
+  const [loading, setLoading] = useState(false)
+  const [form] = Form.useForm()
+  const [thresholdForm] = Form.useForm()
+
+  // 模拟数据
+  const facilitiesData = [
+    { key: "1", name: "湘江水源地", type: "水源地", location: "长沙市岳麓区", status: "正常", capacity: "10000m³/d" },
+    { key: "2", name: "长沙第一水厂", type: "水厂", location: "长沙市芙蓉区", status: "正常", capacity: "50000m³/d" },
+    { key: "3", name: "岳麓区增压泵站", type: "泵站", location: "长沙市岳麓区", status: "预警", capacity: "20000m³/d" },
+    { key: "4", name: "五一大道主管网", type: "管网", location: "长沙市芙蓉区", status: "正常", length: "15km" },
+    { key: "5", name: "中南大学", type: "大用户", location: "长沙市岳麓区", status: "报警", usage: "500m³/d" },
+  ]
+
+  const devicesData = [
+    { key: "1", name: "流量计001", type: "流量计", location: "泵站A", status: "正常", lastMaintenance: "2024-01-15" },
+    {
+      key: "2",
+      name: "压力计002",
+      type: "压力计",
+      location: "管网节点1",
+      status: "故障",
+      lastMaintenance: "2024-01-10",
+    },
+    {
+      key: "3",
+      name: "声波监测003",
+      type: "漏失监测",
+      location: "主管线",
+      status: "正常",
+      lastMaintenance: "2024-01-20",
+    },
+    {
+      key: "4",
+      name: "流量计004",
+      type: "流量计",
+      location: "水厂出口",
+      status: "维修中",
+      lastMaintenance: "2024-01-12",
+    },
+  ]
+
+  const monitoringData = [
+    { key: "1", point: "监测点001", type: "流量", value: "125.6 m³/h", status: "正常", time: "2024-01-25 14:30" },
+    { key: "2", point: "监测点002", type: "压力", value: "0.45 MPa", status: "正常", time: "2024-01-25 14:30" },
+    { key: "3", point: "监测点003", type: "漏失", value: "检测到异常", status: "报警", time: "2024-01-25 14:25" },
+    { key: "4", point: "监测点004", type: "流量", value: "89.2 m³/h", status: "预警", time: "2024-01-25 14:30" },
+  ]
+
+  const alarmsData = [
+    { key: "1", location: "增压泵站A", type: "压力异常", level: "中级", status: "待处理", time: "2024-01-25 14:25" },
+    { key: "2", location: "大用户A", type: "流量超限", level: "高级", status: "处理中", time: "2024-01-25 14:20" },
+    { key: "3", location: "主管网节点", type: "设备故障", level: "低级", status: "已处理", time: "2024-01-25 14:15" },
+  ]
+
+  // 图表配置
+  const flowChartOption: EChartsCoreOption = {
+    title: {
+      text: "长沙市供水流量趋势",
+      left: "center",
+      textStyle: { fontSize: 16, fontWeight: "bold" },
+    },
+    tooltip: {
+      trigger: "axis",
+      backgroundColor: "rgba(0,0,0,0.8)",
+      borderColor: "#1890ff",
+      textStyle: { color: "#fff" },
+    },
+    legend: { data: ["湘江取水量", "供水总量", "用水需求"], bottom: 0 },
+    xAxis: {
+      type: "category",
+      data: ["00:00", "04:00", "08:00", "12:00", "16:00", "20:00", "24:00"],
+      axisLine: { lineStyle: { color: "#d9d9d9" } },
+    },
+    yAxis: {
+      type: "value",
+      name: "流量(万m³/h)",
+      axisLine: { lineStyle: { color: "#d9d9d9" } },
+    },
+    series: [
+      {
+        name: "湘江取水量",
+        type: "line",
+        data: [120, 132, 101, 134, 90, 230, 210],
+        smooth: true,
+        itemStyle: { color: "#1890ff" },
+        areaStyle: { opacity: 0.3 },
+        animationDelay: 0,
+      },
+      {
+        name: "供水总量",
+        type: "line",
+        data: [110, 125, 95, 128, 85, 220, 200],
+        smooth: true,
+        itemStyle: { color: "#52c41a" },
+        areaStyle: { opacity: 0.3 },
+        animationDelay: 300,
+      },
+      {
+        name: "用水需求",
+        type: "line",
+        data: [100, 120, 90, 125, 80, 215, 195],
+        smooth: true,
+        itemStyle: { color: "#faad14" },
+        areaStyle: { opacity: 0.3 },
+        animationDelay: 600,
+      },
+    ],
+    animationDuration: 2000,
+    animationEasing: "cubicOut",
+  }
+
+  const pressureChartOption: EChartsCoreOption = {
+    title: {
+      text: "长沙市管网压力分布",
+      left: "center",
+      textStyle: { fontSize: 16, fontWeight: "bold" },
+    },
+    tooltip: {
+      trigger: "item",
+      formatter: "{a} <br/>{b}: {c} ({d}%)",
+    },
+    series: [
+      {
+        name: "压力分布",
+        type: "pie",
+        radius: ["40%", "70%"],
+        center: ["50%", "60%"],
+        data: [
+          { value: 45, name: "正常压力", itemStyle: { color: "#52c41a" } },
+          { value: 25, name: "低压预警", itemStyle: { color: "#faad14" } },
+          { value: 15, name: "高压预警", itemStyle: { color: "#ff7a45" } },
+          { value: 15, name: "压力异常", itemStyle: { color: "#ff4d4f" } },
+        ],
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: "rgba(0, 0, 0, 0.5)",
+          },
+        },
+        animationType: "scale",
+        animationEasing: "elasticOut",
+        animationDelay: (idx: number) => Math.random() * 200,
+      },
+    ],
+  }
+
+  const alarmTrendOption: EChartsCoreOption = {
+    title: {
+      text: "长沙市供水报警趋势统计",
+      left: "center",
+      textStyle: { fontSize: 16, fontWeight: "bold" },
+    },
+    tooltip: {
+      trigger: "axis",
+      backgroundColor: "rgba(0,0,0,0.8)",
+      borderColor: "#1890ff",
+    },
+    legend: { data: ["高级报警", "中级报警", "低级报警"], bottom: 0 },
+    xAxis: {
+      type: "category",
+      data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+    },
+    yAxis: { type: "value", name: "报警次数" },
+    series: [
+      {
+        name: "高级报警",
+        type: "bar",
+        data: [2, 1, 3, 2, 1, 0, 1],
+        itemStyle: { color: "#ff4d4f" },
+        animationDelay: (idx: number) => idx * 100,
+      },
+      {
+        name: "中级报警",
+        type: "bar",
+        data: [5, 3, 4, 6, 3, 2, 4],
+        itemStyle: { color: "#faad14" },
+        animationDelay: (idx: number) => idx * 100 + 300,
+      },
+      {
+        name: "低级报警",
+        type: "bar",
+        data: [8, 6, 7, 9, 5, 4, 6],
+        itemStyle: { color: "#1890ff" },
+        animationDelay: (idx: number) => idx * 100 + 600,
+      },
+    ],
+    animationDuration: 1500,
+  }
+
+  // 实时监控仪表盘配置
+  const gaugeOption: EChartsCoreOption = {
+    series: [
+      {
+        name: "供水压力",
+        type: "gauge",
+        progress: {
+          show: true,
+          width: 18,
+        },
+        axisLine: {
+          lineStyle: {
+            width: 18,
+          },
+        },
+        axisTick: {
+          show: false,
+        },
+        splitLine: {
+          length: 15,
+          lineStyle: {
+            width: 2,
+            color: "#999",
+          },
+        },
+        axisLabel: {
+          distance: 25,
+          color: "#999",
+          fontSize: 12,
+        },
+        anchor: {
+          show: true,
+          showAbove: true,
+          size: 25,
+          itemStyle: {
+            borderWidth: 10,
+          },
+        },
+        title: {
+          show: false,
+        },
+        detail: {
+          valueAnimation: true,
+          fontSize: 20,
+          offsetCenter: [0, "70%"],
+        },
+        data: [
+          {
+            value: 0.65,
+            name: "MPa",
+          },
+        ],
+      },
+    ],
+  }
+
+  // 仪表盘数据
+  const dashboardStats = {
+    totalFacilities: 156,
+    normalFacilities: 142,
+    warningFacilities: 8,
+    alarmFacilities: 6,
+    totalDevices: 324,
+    onlineDevices: 298,
+    offlineDevices: 26,
+    todayAlarms: 12,
+    processedAlarms: 9,
+    pendingAlarms: 3,
+  }
+
+  const handleExport = (type: string) => {
+    setLoading(true)
+    setTimeout(() => {
+      globalMessage.success(`${type}数据导出成功！`)
+      setLoading(false)
+      setExportModal(false)
+    }, 2000)
+  }
+
+  const handleRefresh = () => {
+    setLoading(true)
+    setTimeout(() => {
+      globalMessage.success("数据刷新成功！")
+      setLoading(false)
+    }, 1500)
+  }
+
+  const handleViewDetail = (record: any, type: string) => {
+    setSelectedRecord(record)
+    if (type === "facility") {
+      setFacilityDetailModal(true)
+    } else if (type === "device") {
+      setDeviceDetailModal(true)
+    }
+  }
+
+  const handleProcessAlarm = (record: any) => {
+    setSelectedRecord(record)
+    setModalVisible(true)
+  }
+
+  const handleThresholdSetting = () => {
+    setThresholdModal(true)
+  }
+
+  const renderDashboard = () => (
+    <div className="space-y-6">
+      {/* 系统概览仪表盘 */}
+      <Row gutter={[16, 16]}>
+        <Col xs={24} sm={12} md={6}>
+          <Card className="hover:shadow-lg transition-shadow duration-300">
+            <Statistic
+              title="供水设施总数"
+              value={dashboardStats.totalFacilities}
+              prefix={<CheckCircleOutlined style={{ color: "#1890ff" }} />}
+              suffix="个"
+              valueStyle={{ color: "#1890ff", fontSize: "24px", fontWeight: "bold" }}
+            />
+          </Card>
+        </Col>
+        <Col xs={24} sm={12} md={6}>
+          <Card className="hover:shadow-lg transition-shadow duration-300">
+            <Statistic
+              title="正常运行"
+              value={dashboardStats.normalFacilities}
+              prefix={<CheckCircleOutlined style={{ color: "#52c41a" }} />}
+              suffix="个"
+              valueStyle={{ color: "#52c41a", fontSize: "24px", fontWeight: "bold" }}
+            />
+          </Card>
+        </Col>
+        <Col xs={24} sm={12} md={6}>
+          <Card className="hover:shadow-lg transition-shadow duration-300">
+            <Statistic
+              title="预警设施"
+              value={dashboardStats.warningFacilities}
+              prefix={<ExclamationCircleOutlined style={{ color: "#faad14" }} />}
+              suffix="个"
+              valueStyle={{ color: "#faad14", fontSize: "24px", fontWeight: "bold" }}
+            />
+          </Card>
+        </Col>
+        <Col xs={24} sm={12} md={6}>
+          <Card className="hover:shadow-lg transition-shadow duration-300">
+            <Statistic
+              title="报警设施"
+              value={dashboardStats.alarmFacilities}
+              prefix={<CloseCircleOutlined style={{ color: "#ff4d4f" }} />}
+              suffix="个"
+              valueStyle={{ color: "#ff4d4f", fontSize: "24px", fontWeight: "bold" }}
+            />
+          </Card>
+        </Col>
+      </Row>
+
+      {/* 实时监控数据 */}
+      <Row gutter={[16, 16]}>
+        <Col xs={24} lg={16}>
+          <Card title="长沙市供水管网实时监控地图" className="hover:shadow-lg transition-shadow duration-300">
+            <div className="h-96">
+              <WaterMap />
+            </div>
+          </Card>
+        </Col>
+        <Col xs={24} lg={8}>
+          <Card title="实时供水压力" className="hover:shadow-lg transition-shadow duration-300">
+            <EChart option={gaugeOption} style={{ height: 300 }} />
+          </Card>
+        </Col>
+      </Row>
+
+      {/* 图表展示 */}
+      <Row gutter={[16, 16]}>
+        <Col xs={24} lg={12}>
+          <Card title="供水流量趋势" className="hover:shadow-lg transition-shadow duration-300">
+            <EChart option={flowChartOption} />
+          </Card>
+        </Col>
+        <Col xs={24} lg={12}>
+          <Card title="管网压力分布" className="hover:shadow-lg transition-shadow duration-300">
+            <EChart option={pressureChartOption} />
+          </Card>
+        </Col>
+      </Row>
+
+      <Card title="报警趋势统计" className="hover:shadow-lg transition-shadow duration-300">
+        <EChart option={alarmTrendOption} />
+      </Card>
+    </div>
+  )
+
+  const renderContent = () => {
+    switch (activeTab) {
+      case "dashboard":
+        return renderDashboard()
+      case "facilities":
+        return (
+          <div className="space-y-6">
+            {/* 统计卡片 */}
+            <Row gutter={[16, 16]}>
+              <Col xs={24} sm={12} md={6}>
+                <Card className="hover:shadow-lg transition-all duration-300 hover:scale-105">
+                  <Statistic
+                    title="供水设施总数"
+                    value={25}
+                    prefix={<CheckCircleOutlined style={{ color: "#1890ff" }} />}
+                    valueStyle={{ color: "#1890ff" }}
+                  />
+                </Card>
+              </Col>
+              <Col xs={24} sm={12} md={6}>
+                <Card className="hover:shadow-lg transition-all duration-300 hover:scale-105">
+                  <Statistic
+                    title="正常运行"
+                    value={22}
+                    prefix={<ArrowUpOutlined />}
+                    valueStyle={{ color: "#52c41a" }}
+                  />
+                </Card>
+              </Col>
+              <Col xs={24} sm={12} md={6}>
+                <Card className="hover:shadow-lg transition-all duration-300 hover:scale-105">
+                  <Statistic
+                    title="预警状态"
+                    value={2}
+                    prefix={<ExclamationCircleOutlined />}
+                    valueStyle={{ color: "#faad14" }}
+                  />
+                </Card>
+              </Col>
+              <Col xs={24} sm={12} md={6}>
+                <Card className="hover:shadow-lg transition-all duration-300 hover:scale-105">
+                  <Statistic
+                    title="报警状态"
+                    value={1}
+                    prefix={<ArrowDownOutlined />}
+                    valueStyle={{ color: "#ff4d4f" }}
+                  />
+                </Card>
+              </Col>
+            </Row>
+
+            {/* 图表展示 */}
+            <Row gutter={[16, 16]}>
+              <Col xs={24} lg={12}>
+                <Card title="供水流量趋势" className="hover:shadow-lg transition-shadow duration-300">
+                  <EChart option={flowChartOption} />
+                </Card>
+              </Col>
+              <Col xs={24} lg={12}>
+                <Card title="管网压力分布" className="hover:shadow-lg transition-shadow duration-300">
+                  <EChart option={pressureChartOption} />
+                </Card>
+              </Col>
+            </Row>
+
+            {/* 供水设施管理表格 */}
+            <Card
+              title="供水设施管理"
+              className="hover:shadow-lg transition-shadow duration-300"
+              extra={
+                <Space>
+                  <Search placeholder="搜索设施" style={{ width: 200 }} />
+                  <Select defaultValue="all" style={{ width: 120 }}>
+                    <Option value="all">全部类型</Option>
+                    <Option value="水源地">水源地</Option>
+                    <Option value="水厂">水厂</Option>
+                    <Option value="泵站">泵站</Option>
+                    <Option value="管网">管网</Option>
+                    <Option value="大用户">大用户</Option>
+                  </Select>
+                  <Button
+                    type="primary"
+                    icon={<ExportOutlined />}
+                    onClick={() => setExportModal(true)}
+                    className="hover:scale-105 transition-transform duration-200"
+                  >
+                    批量导出
+                  </Button>
+                  <Button
+                    icon={<SyncOutlined />}
+                    onClick={handleRefresh}
+                    loading={loading}
+                    className="hover:scale-105 transition-transform duration-200"
+                  >
+                    刷新数据
+                  </Button>
+                </Space>
+              }
+            >
+              <Table
+                columns={[
+                  { title: "设施名称", dataIndex: "name", key: "name" },
+                  { title: "设施类型", dataIndex: "type", key: "type" },
+                  { title: "位置", dataIndex: "location", key: "location" },
+                  {
+                    title: "运行状态",
+                    dataIndex: "status",
+                    key: "status",
+                    render: (status: string) => (
+                      <Badge
+                        status={status === "正常" ? "success" : status === "预警" ? "warning" : "error"}
+                        text={status}
+                      />
+                    ),
+                  },
+                  { title: "容量/长度", dataIndex: "capacity", key: "capacity" },
+                  {
+                    title: "操作",
+                    key: "action",
+                    render: (_, record) => (
+                      <Space>
+                        <Button
+                          size="small"
+                          icon={<EyeOutlined />}
+                          onClick={() => handleViewDetail(record, "facility")}
+                          className="hover:scale-110 transition-transform duration-200"
+                        >
+                          详情
+                        </Button>
+                        <Button
+                          size="small"
+                          icon={<EditOutlined />}
+                          onClick={() => globalMessage.info("编辑功能开发中...")}
+                          className="hover:scale-110 transition-transform duration-200"
+                        >
+                          编辑
+                        </Button>
+                      </Space>
+                    ),
+                  },
+                ]}
+                dataSource={facilitiesData}
+                pagination={{ pageSize: 10 }}
+                loading={loading}
+              />
+            </Card>
+
+            {/* GIS一图展示 */}
+            <Card title="供水设施一图展示" className="hover:shadow-lg transition-shadow duration-300">
+              <div className="h-96">
+                <WaterMap />
+              </div>
+            </Card>
+          </div>
+        )
+      case "devices":
+        return (
+          <div className="space-y-6">
+            {/* 设备统计 */}
+            <Row gutter={[16, 16]}>
+              <Col xs={24} sm={12} md={6}>
+                <Card className="hover:shadow-lg transition-all duration-300 hover:scale-105">
+                  <Statistic
+                    title="监测设备总数"
+                    value={dashboardStats.totalDevices}
+                    prefix={<CheckCircleOutlined style={{ color: "#1890ff" }} />}
+                    valueStyle={{ color: "#1890ff" }}
+                  />
+                </Card>
+              </Col>
+              <Col xs={24} sm={12} md={6}>
+                <Card className="hover:shadow-lg transition-all duration-300 hover:scale-105">
+                  <Statistic
+                    title="在线设备"
+                    value={dashboardStats.onlineDevices}
+                    prefix={<CheckCircleOutlined style={{ color: "#52c41a" }} />}
+                    valueStyle={{ color: "#52c41a" }}
+                  />
+                </Card>
+              </Col>
+              <Col xs={24} sm={12} md={6}>
+                <Card className="hover:shadow-lg transition-all duration-300 hover:scale-105">
+                  <Statistic
+                    title="离线设备"
+                    value={dashboardStats.offlineDevices}
+                    prefix={<CloseCircleOutlined style={{ color: "#ff4d4f" }} />}
+                    valueStyle={{ color: "#ff4d4f" }}
+                  />
+                </Card>
+              </Col>
+              <Col xs={24} sm={12} md={6}>
+                <Card className="hover:shadow-lg transition-all duration-300 hover:scale-105">
+                  <Statistic
+                    title="故障设备"
+                    value={8}
+                    prefix={<ExclamationCircleOutlined style={{ color: "#faad14" }} />}
+                    valueStyle={{ color: "#faad14" }}
+                  />
+                </Card>
+              </Col>
+            </Row>
+
+            {/* 监测设备管理表格 */}
+            <Card
+              title="监测设备管理"
+              className="hover:shadow-lg transition-shadow duration-300"
+              extra={
+                <Space>
+                  <Search placeholder="搜索设备" style={{ width: 200 }} />
+                  <Select defaultValue="all" style={{ width: 120 }}>
+                    <Option value="all">全部类型</Option>
+                    <Option value="流量计">流量计</Option>
+                    <Option value="压力计">压力计</Option>
+                    <Option value="漏失监测">漏失监测</Option>
+                  </Select>
+                  <Button
+                    type="primary"
+                    icon={<PlusOutlined />}
+                    onClick={() => globalMessage.info("添加设备功能开发中...")}
+                    className="hover:scale-105 transition-transform duration-200"
+                  >
+                    添加设备
+                  </Button>
+                  <Button
+                    icon={<ExportOutlined />}
+                    onClick={() => setExportModal(true)}
+                    className="hover:scale-105 transition-transform duration-200"
+                  >
+                    导出
+                  </Button>
+                </Space>
+              }
+            >
+              <Table
+                columns={[
+                  { title: "设备名称", dataIndex: "name", key: "name" },
+                  { title: "设备类型", dataIndex: "type", key: "type" },
+                  { title: "安装位置", dataIndex: "location", key: "location" },
+                  {
+                    title: "运行状态",
+                    dataIndex: "status",
+                    key: "status",
+                    render: (status: string) => (
+                      <Badge
+                        status={
+                          status === "正常"
+                            ? "success"
+                            : status === "故障"
+                              ? "error"
+                              : status === "维修中"
+                                ? "processing"
+                                : "default"
+                        }
+                        text={status}
+                      />
+                    ),
+                  },
+                  { title: "最后维护", dataIndex: "lastMaintenance", key: "lastMaintenance" },
+                  {
+                    title: "操作",
+                    key: "action",
+                    render: (_, record) => (
+                      <Space>
+                        <Button
+                          size="small"
+                          icon={<EyeOutlined />}
+                          onClick={() => handleViewDetail(record, "device")}
+                          className="hover:scale-110 transition-transform duration-200"
+                        >
+                          详情
+                        </Button>
+                        {record.status === "故障" && (
+                          <Button
+                            size="small"
+                            type="primary"
+                            onClick={() => globalMessage.success("维修派单已生成！")}
+                            className="hover:scale-110 transition-transform duration-200"
+                          >
+                            派单
+                          </Button>
+                        )}
+                      </Space>
+                    ),
+                  },
+                ]}
+                dataSource={devicesData}
+                pagination={{ pageSize: 10 }}
+                loading={loading}
+              />
+            </Card>
+          </div>
+        )
+      case "monitoring":
+        return (
+          <div className="space-y-6">
+            {/* 运行监测表格 */}
+            <Card
+              title="运行监测数据"
+              className="hover:shadow-lg transition-shadow duration-300"
+              extra={
+                <Space>
+                  <Search placeholder="搜索监测点" style={{ width: 200 }} />
+                  <Select defaultValue="all" style={{ width: 120 }}>
+                    <Option value="all">全部类型</Option>
+                    <Option value="流量">流量</Option>
+                    <Option value="压力">压力</Option>
+                    <Option value="漏失">漏失</Option>
+                  </Select>
+                  <Button
+                    icon={<SyncOutlined />}
+                    onClick={handleRefresh}
+                    loading={loading}
+                    className="hover:scale-105 transition-transform duration-200"
+                  >
+                    实时刷新
+                  </Button>
+                  <Button
+                    icon={<ExportOutlined />}
+                    onClick={() => setExportModal(true)}
+                    className="hover:scale-105 transition-transform duration-200"
+                  >
+                    导出数据
+                  </Button>
+                </Space>
+              }
+            >
+              <Table
+                columns={[
+                  { title: "监测点位", dataIndex: "point", key: "point" },
+                  { title: "监测类型", dataIndex: "type", key: "type" },
+                  { title: "监测值", dataIndex: "value", key: "value" },
+                  {
+                    title: "状态",
+                    dataIndex: "status",
+                    key: "status",
+                    render: (status: string) => (
+                      <Badge
+                        status={status === "正常" ? "success" : status === "预警" ? "warning" : "error"}
+                        text={status}
+                      />
+                    ),
+                  },
+                  { title: "更新时间", dataIndex: "time", key: "time" },
+                  {
+                    title: "操作",
+                    key: "action",
+                    render: (_, record) => (
+                      <Space>
+                        <Button
+                          size="small"
+                          icon={<EyeOutlined />}
+                          onClick={() => globalMessage.info(`查看${record.point}历史数据`)}
+                          className="hover:scale-110 transition-transform duration-200"
+                        >
+                          历史
+                        </Button>
+                        <Button
+                          size="small"
+                          onClick={() => globalMessage.info(`定位到${record.point}`)}
+                          className="hover:scale-110 transition-transform duration-200"
+                        >
+                          定位
+                        </Button>
+                      </Space>
+                    ),
+                  },
+                ]}
+                dataSource={monitoringData}
+                pagination={{ pageSize: 10 }}
+                loading={loading}
+              />
+            </Card>
+          </div>
+        )
+      case "alarms":
+        return (
+          <div className="space-y-6">
+            {/* 报警统计 */}
+            <Row gutter={[16, 16]}>
+              <Col xs={24} sm={12} md={6}>
+                <Card className="hover:shadow-lg transition-all duration-300 hover:scale-105">
+                  <Statistic
+                    title="今日报警总数"
+                    value={dashboardStats.todayAlarms}
+                    prefix={<CloseCircleOutlined style={{ color: "#ff4d4f" }} />}
+                    valueStyle={{ color: "#ff4d4f" }}
+                  />
+                </Card>
+              </Col>
+              <Col xs={24} sm={12} md={6}>
+                <Card className="hover:shadow-lg transition-all duration-300 hover:scale-105">
+                  <Statistic
+                    title="高级报警"
+                    value={dashboardStats.processedAlarms}
+                    prefix={<CloseCircleOutlined style={{ color: "#ff4d4f" }} />}
+                    valueStyle={{ color: "#ff4d4f" }}
+                  />
+                </Card>
+              </Col>
+              <Col xs={24} sm={12} md={6}>
+                <Card className="hover:shadow-lg transition-all duration-300 hover:scale-105">
+                  <Statistic
+                    title="中级报警"
+                    value={dashboardStats.pendingAlarms}
+                    prefix={<ExclamationCircleOutlined style={{ color: "#faad14" }} />}
+                    valueStyle={{ color: "#faad14" }}
+                  />
+                </Card>
+              </Col>
+              <Col xs={24} sm={12} md={6}>
+                <Card className="hover:shadow-lg transition-all duration-300 hover:scale-105">
+                  <Statistic
+                    title="低级报警"
+                    value={3} // 假设低级报警数量为3
+                    prefix={<CheckCircleOutlined style={{ color: "#1890ff" }} />}
+                    valueStyle={{ color: "#1890ff" }}
+                  />
+                </Card>
+              </Col>
+            </Row>
+
+            {/* 报警趋势图 */}
+            <Card title="报警趋势统计" className="hover:shadow-lg transition-shadow duration-300">
+              <EChart option={alarmTrendOption} />
+            </Card>
+
+            {/* 报警管理表格 */}
+            <Card
+              title="报警事件管理"
+              className="hover:shadow-lg transition-shadow duration-300"
+              extra={
+                <Space>
+                  <Search placeholder="搜索报警" style={{ width: 200 }} />
+                  <Select defaultValue="all" style={{ width: 120 }}>
+                    <Option value="all">全部级别</Option>
+                    <Option value="high">高级</Option>
+                    <Option value="medium">中级</Option>
+                    <Option value="low">低级</Option>
+                  </Select>
+                  <Button
+                    type="primary"
+                    onClick={() => globalMessage.info("批量处理功能开发中...")}
+                    className="hover:scale-105 transition-transform duration-200"
+                  >
+                    批量处理
+                  </Button>
+                  <Button
+                    onClick={handleThresholdSetting}
+                    className="hover:scale-105 transition-transform duration-200"
+                  >
+                    阈值设置
+                  </Button>
+                </Space>
+              }
+            >
+              <Table
+                columns={[
+                  { title: "报警位置", dataIndex: "location", key: "location" },
+                  { title: "报警类型", dataIndex: "type", key: "type" },
+                  {
+                    title: "报警级别",
+                    dataIndex: "level",
+                    key: "level",
+                    render: (level: string) => (
+                      <Tag color={level === "高级" ? "red" : level === "中级" ? "orange" : "blue"}>{level}</Tag>
+                    ),
+                  },
+                  {
+                    title: "处理状态",
+                    dataIndex: "status",
+                    key: "status",
+                    render: (status: string) => (
+                      <Badge
+                        status={status === "已处理" ? "success" : status === "处理中" ? "processing" : "default"}
+                        text={status}
+                      />
+                    ),
+                  },
+                  { title: "报警时间", dataIndex: "time", key: "time" },
+                  {
+                    title: "操作",
+                    key: "action",
+                    render: (_, record) => (
+                      <Space>
+                        <Button
+                          size="small"
+                          type="primary"
+                          onClick={() => handleProcessAlarm(record)}
+                          disabled={record.status === "已处理"}
+                          className="hover:scale-110 transition-transform duration-200"
+                        >
+                          处理
+                        </Button>
+                        <Button
+                          size="small"
+                          onClick={() => handleViewDetail(record, "alarm")}
+                          className="hover:scale-110 transition-transform duration-200"
+                        >
+                          详情
+                        </Button>
+                      </Space>
+                    ),
+                  },
+                ]}
+                dataSource={alarmsData}
+                pagination={{ pageSize: 10 }}
+                loading={loading}
+              />
+            </Card>
+
+            {/* 报警一张图 */}
+            <Card title="监测报警一张图" className="hover:shadow-lg transition-shadow duration-300">
+              <div className="h-96">
+                <WaterMap
+                  alarms={[
+                    { id: "1", position: [39.9242, 116.4274], level: "medium", message: "压力异常" },
+                    { id: "2", position: [39.9442, 116.4474], level: "high", message: "流量超限" },
+                  ]}
+                />
+              </div>
+            </Card>
+          </div>
+        )
+      default:
+        return <div className="text-center py-20 text-gray-500">功能开发中...</div>
+    }
+  }
+
+  return (
+    <App className={'h-min-[100vh]'}>
+      <AdminLayout activeKey={activeTab} onMenuSelect={setActiveTab}>
+        {renderContent()}
+
+        <Modal
+          title="设施详细信息"
+          open={facilityDetailModal}
+          onCancel={() => setFacilityDetailModal(false)}
+          footer={[
+            <Button key="close" onClick={() => setFacilityDetailModal(false)}>
+              关闭
+            </Button>,
+          ]}
+          width={600}
+        >
+          {selectedRecord && (
+            <div className="space-y-4">
+              <Row gutter={[16, 16]}>
+                <Col span={12}>
+                  <div>
+                    <strong>设施名称：</strong>
+                    {selectedRecord.name}
+                  </div>
+                </Col>
+                <Col span={12}>
+                  <div>
+                    <strong>设施类型：</strong>
+                    {selectedRecord.type}
+                  </div>
+                </Col>
+                <Col span={12}>
+                  <div>
+                    <strong>位置：</strong>
+                    {selectedRecord.location}
+                  </div>
+                </Col>
+                <Col span={12}>
+                  <div>
+                    <strong>运行状态：</strong>
+                    <Badge
+                      status={
+                        selectedRecord.status === "正常"
+                          ? "success"
+                          : selectedRecord.status === "预警"
+                            ? "warning"
+                            : "error"
+                      }
+                      text={selectedRecord.status}
+                    />
+                  </div>
+                </Col>
+                <Col span={24}>
+                  <div>
+                    <strong>容量/规模：</strong>
+                    {selectedRecord.capacity || selectedRecord.length || selectedRecord.usage}
+                  </div>
+                </Col>
+              </Row>
+            </div>
+          )}
+        </Modal>
+
+        <Modal
+          title="设备详细信息"
+          open={deviceDetailModal}
+          onCancel={() => setDeviceDetailModal(false)}
+          footer={[
+            <Button key="close" onClick={() => setDeviceDetailModal(false)}>
+              关闭
+            </Button>,
+          ]}
+          width={600}
+        >
+          {selectedRecord && (
+            <div className="space-y-4">
+              <Row gutter={[16, 16]}>
+                <Col span={12}>
+                  <div>
+                    <strong>设备名称：</strong>
+                    {selectedRecord.name}
+                  </div>
+                </Col>
+                <Col span={12}>
+                  <div>
+                    <strong>设备类型：</strong>
+                    {selectedRecord.type}
+                  </div>
+                </Col>
+                <Col span={12}>
+                  <div>
+                    <strong>安装位置：</strong>
+                    {selectedRecord.location}
+                  </div>
+                </Col>
+                <Col span={12}>
+                  <div>
+                    <strong>运行状态：</strong>
+                    <Badge
+                      status={
+                        selectedRecord.status === "正常"
+                          ? "success"
+                          : selectedRecord.status === "故障"
+                            ? "error"
+                            : selectedRecord.status === "维修中"
+                              ? "processing"
+                              : "default"
+                      }
+                      text={selectedRecord.status}
+                    />
+                  </div>
+                </Col>
+                <Col span={24}>
+                  <div>
+                    <strong>最后维护时间：</strong>
+                    {selectedRecord.lastMaintenance}
+                  </div>
+                </Col>
+              </Row>
+            </div>
+          )}
+        </Modal>
+
+        <Modal
+          title="阈值设置"
+          open={thresholdModal}
+          onOk={() => {
+            thresholdForm.validateFields().then(() => {
+              globalMessage.success("阈值设置成功")
+              setThresholdModal(false)
+              thresholdForm.resetFields()
+            })
+          }}
+          onCancel={() => {
+            setThresholdModal(false)
+            thresholdForm.resetFields()
+          }}
+          width={600}
+        >
+          <Form form={thresholdForm} layout="vertical">
+            <Form.Item label="监测类型" name="type" rules={[{ required: true }]}>
+              <Select>
+                <Option value="flow">流量监测</Option>
+                <Option value="pressure">压力监测</Option>
+                <Option value="leak">漏失监测</Option>
+              </Select>
+            </Form.Item>
+            <Row gutter={16}>
+              <Col span={12}>
+                <Form.Item label="预警阈值" name="warningThreshold" rules={[{ required: true }]}>
+                  <Input placeholder="请输入预警阈值" />
+                </Form.Item>
+              </Col>
+              <Col span={12}>
+                <Form.Item label="报警阈值" name="alarmThreshold" rules={[{ required: true }]}>
+                  <Input placeholder="请输入报警阈值" />
+                </Form.Item>
+              </Col>
+            </Row>
+            <Form.Item label="生效时间段" name="timeRange">
+              <Select>
+                <Option value="all">全天</Option>
+                <Option value="peak">高峰时段</Option>
+                <Option value="normal">正常时段</Option>
+              </Select>
+            </Form.Item>
+          </Form>
+        </Modal>
+
+        <Modal
+          title="数据导出"
+          open={exportModal}
+          onCancel={() => setExportModal(false)}
+          footer={[
+            <Button key="cancel" onClick={() => setExportModal(false)}>
+              取消
+            </Button>,
+            <Button key="export" type="primary" loading={loading} onClick={() => handleExport("当前页面")}>
+              确认导出
+            </Button>,
+          ]}
+        >
+          <div className="space-y-4">
+            <div>
+              <strong>导出格式：</strong>
+              <Select defaultValue="excel" style={{ width: 120, marginLeft: 8 }}>
+                <Option value="excel">Excel</Option>
+                <Option value="csv">CSV</Option>
+                <Option value="pdf">PDF</Option>
+              </Select>
+            </div>
+            <div>
+              <strong>导出范围：</strong>
+              <Select defaultValue="current" style={{ width: 150, marginLeft: 8 }}>
+                <Option value="current">当前页面</Option>
+                <Option value="all">全部数据</Option>
+                <Option value="selected">选中数据</Option>
+              </Select>
+            </div>
+          </div>
+        </Modal>
+
+        {/* 处理报警模态框 */}
+        <Modal
+          title="处理报警事件"
+          open={modalVisible}
+          onOk={() => {
+            form.validateFields().then(() => {
+              globalMessage.success("报警处理成功")
+              setModalVisible(false)
+              form.resetFields()
+            })
+          }}
+          onCancel={() => {
+            setModalVisible(false)
+            form.resetFields()
+          }}
+          className="hover:shadow-2xl transition-shadow duration-300"
+        >
+          <Form form={form} layout="vertical">
+            <Form.Item label="处理结果" name="result" rules={[{ required: true }]}>
+              <Select>
+                <Option value="resolved">已解决</Option>
+                <Option value="false_alarm">误报</Option>
+                <Option value="pending">待进一步处理</Option>
+              </Select>
+            </Form.Item>
+            <Form.Item label="处理意见" name="comment">
+              <Input.TextArea rows={4} placeholder="请输入处理意见..." />
+            </Form.Item>
+            <Form.Item label="附件上传" name="attachment">
+              <Upload>
+                <Button icon={<UploadOutlined />}>上传附件</Button>
+              </Upload>
+            </Form.Item>
+          </Form>
+        </Modal>
+      </AdminLayout>
+    </App>
+  )
+}