ruoyi-react-front/app/(other)/test5/page.tsx

"use client"

import React, {useEffect, useMemo, useState} from "react"
import type {MenuProps, TableColumnsType} from "antd"
import {
  Badge,
  Button,
  Card,
  Col,
  ConfigProvider,
  DatePicker,
  Descriptions,
  Divider,
  Drawer,
  Layout,
  Menu,
  Progress,
  Row,
  Select,
  Space,
  Statistic,
  Switch,
  Table,
  Tabs,
  Tag,
  Timeline,
  Tooltip as AntdTooltip
} from "antd"
import {
  Activity,
  AlertTriangle,
  BellRing,
  Database,
  Droplets,
  Factory,
  Flame,
  Gauge,
  Layers3,
  Map,
  Moon,
  Settings2,
  ShieldCheck,
  Sun,
  TrendingUp,
  Waves
} from 'lucide-react'
import EChart from "@/components/echarts"
import dayjs from "dayjs"
import {EChartsOption} from "echarts";

const { Header, Sider, Content } = Layout
const { RangePicker } = DatePicker

// Helpers
const primary = "#10b981" // teal, avoid blue
const danger = "#ef4444"
const warn = "#f59e0b"
const ok = "#22c55e"
const muted = "#6b7280"

type Facility = {
  id: string
  industry: "燃气" | "供水" | "排水"
  type: string
  count: number
  age: number
  region: string
}

type Device = {
  id: string
  type: string
  status: "在线" | "离线"
  industry: Facility["industry"]
  risk: "高" | "中" | "低"
  lat: number
  lng: number
}

type Alert = {
  id: string
  level: "I级" | "II级" | "III级" | "IV级"
  industry: Facility["industry"]
  type: string
  time: string
  status: "待处置" | "处置中" | "已闭环"
  location: string
  desc: string
}

function useMockData() {
  const [facilities] = useState<Facility[]>(() => {
    const regions = ["中心城区", "东区", "西区", "南区", "北区"]
    const types = {
      燃气: ["高压管道", "调压站", "门站", "阀门井"],
      供水: ["原水管", "净水厂", "二次供水", "监测点"],
      排水: ["主干管", "泵站", "检查井", "溢流口"],
    } as const
    let i = 0
    return (["燃气", "供水", "排水"] as Facility["industry"][]).flatMap((ind) =>
      types[ind].map((t) => ({
        id: `f-${i++}`,
        industry: ind,
        type: t,
        count: Math.floor(Math.random() * 900 + 100),
        age: Math.floor(Math.random() * 30 + 1),
        region: regions[Math.floor(Math.random() * regions.length)],
      }))
    )
  })

  const [devices, setDevices] = useState<Device[]>(() => {
    const types = ["压力", "流量", "液位", "阀位", "水质", "气体浓度"]
    let i = 0
    return Array.from({ length: 250 }).map(() => ({
      id: `d-${i++}`,
      type: types[Math.floor(Math.random() * types.length)],
      status: Math.random() > 0.12 ? "在线" : "离线",
      industry: (["燃气", "供水", "排水"] as const)[Math.floor(Math.random() * 3)],
      risk: Math.random() > 0.8 ? "高" : Math.random() > 0.5 ? "中" : "低",
      lat: Math.random(),
      lng: Math.random(),
    }))
  })

  // Simulate device status fluctuation
  useEffect(() => {
    const t = setInterval(() => {
      setDevices((prev) =>
        prev.map((d) =>
          Math.random() > 0.97 ? { ...d, status: d.status === "在线" ? "离线" : "在线" } : d
        )
      )
    }, 4000)
    return () => clearInterval(t)
  }, [])

  const [alerts, setAlerts] = useState<Alert[]>(() => {
    const levels: Alert["level"][] = ["I级", "II级", "III级", "IV级"]
    const types = ["泄漏", "压力异常", "流量突变", "停电", "液位过低", "浊度异常"]
    let i = 0
    return Array.from({ length: 30 }).map(() => ({
      id: `a-${i++}`,
      level: levels[Math.floor(Math.random() * levels.length)],
      industry: (["燃气", "供水", "排水"] as const)[Math.floor(Math.random() * 3)],
      type: types[Math.floor(Math.random() * types.length)],
      time: dayjs().subtract(Math.floor(Math.random() * 200), "minute").format("YYYY-MM-DD HH:mm"),
      status: Math.random() > 0.6 ? "已闭环" : Math.random() > 0.3 ? "处置中" : "待处置",
      location: ["中心城区", "东区", "西区", "南区", "北区"][Math.floor(Math.random() * 5)],
      desc: "自动监测发现异常，已推送至管理单位核实。",
    }))
  })

  // Simulate new alerts
  useEffect(() => {
    const t = setInterval(() => {
      setAlerts((prev) => {
        const n: Alert = {
          id: `a-${prev.length + 1}`,
          level: Math.random() > 0.85 ? "I级" : Math.random() > 0.6 ? "II级" : Math.random() > 0.3 ? "III级" : "IV级",
          industry: (["燃气", "供水", "排水"] as const)[Math.floor(Math.random() * 3)],
          type: ["泄漏", "压力异常", "流量突变", "停电", "液位过低", "浊度异常"][Math.floor(Math.random() * 6)],
          time: dayjs().format("YYYY-MM-DD HH:mm"),
          status: "待处置",
          location: ["中心城区", "东区", "西区", "南区", "北区"][Math.floor(Math.random() * 5)],
          desc: "前端设备上报新预警，请尽快核查。",
        }
        return [n, ...prev].slice(0, 60)
      })
    }, 20000)
    return () => clearInterval(t)
  }, [])

  return { facilities, devices, alerts }
}

function LevelTag({ level }: { level: Alert["level"] }) {
  const map = {
    "I级": { color: danger },
    "II级": { color: warn },
    "III级": { color: "#f97316" },
    "IV级": { color: ok },
  } as const
  return <Tag color={map[level].color}>{level}</Tag>
}

function StatusBadge({ s }: { s: Alert["status"] }) {
  const status = {
    待处置: "error",
    处置中: "processing",
    已闭环: "success",
  } as const
  return <Badge status={status[s]} text={s} />
}

export default function Page() {
  const [collapsed, setCollapsed] = useState(false)
  const { facilities, devices, alerts } = useMockData()
  const [selectedMenu, setSelectedMenu] = useState("overview")
  const [drawerOpen, setDrawerOpen] = useState(false)
  const [selectedAlert, setSelectedAlert] = useState<Alert | null>(null)
  const [isDark, setIsDark] = useState(true)

  const totals = useMemo(() => {
    const sum = { 燃气: 0, 供水: 0, 排水: 0 } as Record<Facility["industry"], number>
    facilities.forEach((f) => (sum[f.industry] += f.count))
    return sum
  }, [facilities])

  const onlineRate = useMemo(() => {
    const total = devices.length
    const online = devices.filter((d) => d.status === "在线").length
    return Math.round((online / Math.max(total, 1)) * 100)
  }, [devices])

  const riskDist = useMemo(() => {
    const dist = { 高: 0, 中: 0, 低: 0 } as Record<Device["risk"], number>
    devices.forEach((d) => (dist[d.risk] += 1))
    return dist
  }, [devices])

  // Menu
  const menuItems: MenuProps["items"] = [
    { key: "overview", icon: <Layers3 size={18} />, label: "总体概览" },
    { key: "asset", icon: <Database size={18} />, label: "基础设施管理" },
    { key: "monitor", icon: <Activity size={18} />, label: "运行监测管理" },
    { key: "alert", icon: <BellRing size={18} />, label: "预警处置管理" },
    { type: "divider" as const },
    { key: "settings", icon: <Settings2 size={18} />, label: "设置" },
  ]

  // Charts Options
  const infraPieOption = useMemo(
    () => ({
      title: { text: "设施类型占比", left: "center", textStyle: { fontSize: 14 } },
      tooltip: { trigger: "item" },
      legend: { bottom: 0 },
      color: [primary, "#f59e0b", "#6366f1", "#ef4444", "#14b8a6", "#a855f7"],
      series: [
        {
          type: "pie",
          radius: ["35%", "60%"],
          avoidLabelOverlap: false,
          itemStyle: { borderRadius: 6, borderColor: "#fff", borderWidth: 2 },
          data: ["燃气", "供水", "排水"].map((ind) => ({
            name: ind,
            value: Object.values(facilities)
              .filter((f) => (f as Facility).industry === ind)
              .reduce((acc, f) => acc + (f as Facility).count, 0),
          })),
        },
      ],
    }),
    [facilities]
  )

  const deviceBarOption = useMemo(
    () => {
      const types = Array.from(new Set(devices.map((d) => d.type)))
      const byType = types.map((t) => devices.filter((d) => d.type === t).length)
      return {
        title: { text: "监测设备类型规模", left: "center", textStyle: { fontSize: 14 } },
        tooltip: { trigger: "axis" },
        xAxis: { type: "category", data: types, axisLabel: { rotate: 20 } },
        yAxis: { type: "value" },
        grid: { left: 40, right: 10, bottom: 50, top: 40 },
        color: [primary],
        series: [{ type: "bar", data: byType, barWidth: "50%", itemStyle: { borderRadius: [4, 4, 0, 0] } }],
      } as const
    },
    [devices]
  )

  const alertTrendOption = useMemo(() => {
    const days = 14
    const labels = Array.from({ length: days }).map((_, i) => dayjs().subtract(days - i - 1, "day").format("MM-DD"))
    const series = (["燃气", "供水", "排水"] as const).map((ind, idx) => ({
      name: ind,
      type: "line",
      smooth: true,
      data: labels.map(() => Math.floor(Math.random() * (idx === 0 ? 12 : idx === 1 ? 9 : 7)) + (idx === 0 ? 3 : 1)),
    }))
    return {
      title: { text: "预警趋势（近14天）", left: "center", textStyle: { fontSize: 14 } },
      tooltip: { trigger: "axis" },
      legend: { bottom: 0 },
      grid: { left: 40, right: 10, bottom: 40, top: 40 },
      xAxis: { type: "category", data: labels },
      yAxis: { type: "value" },
      color: [primary, "#f59e0b", "#a855f7"],
      series,
    } as const
  }, [])

  const onlineGaugeOption = useMemo(
    () => ({
      title: { text: "设备在线率", left: "center", top: 10, textStyle: { fontSize: 14 } },
      series: [
        {
          type: "gauge",
          startAngle: 200,
          endAngle: -20,
          radius: "90%",
          pointer: { show: false },
          progress: { show: true, width: 16, itemStyle: { color: onlineRate > 95 ? ok : onlineRate > 85 ? "#84cc16" : warn } },
          axisLine: { lineStyle: { width: 16 } },
          axisTick: { show: false },
          splitLine: { show: false },
          axisLabel: { show: false },
          detail: { valueAnimation: true, formatter: "{value}%", fontSize: 22, offsetCenter: [0, "10%"] },
          data: [{ value: onlineRate }],
        },
      ],
    }),
    [onlineRate]
  )

  const riskBarOption = useMemo(
    () => ({
      title: { text: "风险等级分布", left: "center", textStyle: { fontSize: 14 } },
      tooltip: { trigger: "axis" },
      grid: { left: 40, right: 10, top: 40, bottom: 20 },
      xAxis: { type: "category", data: ["高", "中", "低"] },
      yAxis: { type: "value" },
      color: [danger, warn, ok],
      series: [{ type: "bar", data: [riskDist["高"], riskDist["中"], riskDist["低"]], barWidth: "50%" }],
    }),
    [riskDist]
  )

  const efficiencyPieOption = useMemo(
    () => {
      const total = alerts.length
      const closed = alerts.filter((a) => a.status === "已闭环").length
      const correct = Math.floor(closed * (0.85 + Math.random() * 0.1)) // 假定人工复核正确率
      const wrong = Math.max(closed - correct, 0)
      return {
        title: { text: "预警正确性（闭环内）", left: "center", textStyle: { fontSize: 14 } },
        tooltip: { trigger: "item", formatter: "{b}: {c} ({d}%)" },
        legend: { bottom: 0 },
        color: [ok, danger],
        series: [
          {
            type: "pie",
            radius: ["35%", "60%"],
            data: [
              { name: "正确预警", value: correct },
              { name: "误报", value: wrong },
            ],
          },
        ],
      } as const
    },
    [alerts]
  )

  const radarCapacityOption = useMemo(
    () => ({
      title: { text: "应急保障能力雷达", left: "center", textStyle: { fontSize: 14 } },
      tooltip: {},
      radar: {
        indicator: [
          { name: "抢修速度", max: 100 },
          { name: "物资充足", max: 100 },
          { name: "跨部门联动", max: 100 },
          { name: "覆盖广度", max: 100 },
          { name: "应急演练", max: 100 },
        ],
      },
      color: [primary],
      series: [
        {
          type: "radar",
          data: [{ value: [78, 85, 72, 88, 76], name: "当前" }],
          areaStyle: { color: primary + "33" },
        },
      ],
    }),
    []
  )

  // Tables
  const facilityColumns: TableColumnsType<Facility> = [
    { title: "行业", dataIndex: "industry", key: "industry", width: 90 },
    { title: "类型", dataIndex: "type", key: "type" },
    { title: "数量", dataIndex: "count", key: "count", width: 100 },
    { title: "平均年限", dataIndex: "age", key: "age", width: 120, render: (v) => `${v} 年` },
    { title: "分布区域", dataIndex: "region", key: "region", width: 120 },
  ]

  const alertColumns: TableColumnsType<Alert> = [
    { title: "等级", dataIndex: "level", key: "level", width: 90, render: (v) => <LevelTag level={v} /> },
    { title: "行业", dataIndex: "industry", key: "industry", width: 90 },
    { title: "类型", dataIndex: "type", key: "type", width: 140 },
    { title: "时间", dataIndex: "time", key: "time", width: 160 },
    { title: "状态", dataIndex: "status", key: "status", width: 120, render: (s) => <StatusBadge s={s} /> },
    { title: "位置", dataIndex: "location", key: "location", width: 120 },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <Space size="small">
          <a
            onClick={() => {
              setSelectedAlert(record)
              setDrawerOpen(true)
            }}
          >
            查看
          </a>
          <a>派单</a>
          <a>联动</a>
        </Space>
      ),
      width: 160,
      fixed: "right",
    },
  ]

  const alertLevelColor = (lvl: Alert["level"]) =>
    lvl === "I级" ? danger : lvl === "II级" ? warn : lvl === "III级" ? "#f97316" : ok

  // Derived numbers
  const stats = [
    {
      title: "燃气总规模",
      value: totals["燃气"],
      icon: <Flame className="text-white" size={18} />,
      bg: "bg-emerald-500",
    },
    {
      title: "供水总规模",
      value: totals["供水"],
      icon: <Droplets className="text-white" size={18} />,
      bg: "bg-teal-500",
    },
    {
      title: "排水总规模",
      value: totals["排水"],
      icon: <Waves className="text-white" size={18} />,
      bg: "bg-cyan-500",
    },
    {
      title: "在线设备",
      value: devices.filter((d) => d.status === "在线").length,
      icon: <Gauge className="text-white" size={18} />,
      bg: "bg-lime-500",
    },
  ]

  // Map markers for device distribution
  const markers = devices.slice(0, 120).map((d, i) => ({
    id: d.id,
    top: `${Math.floor(d.lat * 85) + 5}%`,
    left: `${Math.floor(d.lng * 90) + 5}%`,
    color: d.risk === "高" ? danger : d.risk === "中" ? warn : ok,
    title: `${d.industry}/${d.type}（${d.status}）`,
  }))

  const themeTokens = useMemo(
    () => ({
      token: {
        colorPrimary: primary,
        colorInfo: primary,
        borderRadius: 8,
        fontSize: 13,
      },
      components: {
        Layout: {
          headerBg: isDark ? "#0f172a" : "#ffffff",
          siderBg: isDark ? "#0b1220" : "#ffffff",
          bodyBg: isDark ? "#0b1220" : "#f6f7f9",
        },
        Menu: {
          itemSelectedBg: isDark ? "#0ea5a8" : "#d1fae5",
          itemSelectedColor: isDark ? "#fff" : "#0f172a",
          itemActiveBg: "#0ea5a822",
        },
      },
    }),
    [isDark]
  )

  return (
    <ConfigProvider theme={themeTokens}>
      <Layout style={{ minHeight: "100vh" }}>
        <Sider collapsible collapsed={collapsed} onCollapse={setCollapsed} width={240} theme={isDark ? "dark" : "light"}>
          <div className="flex items-center gap-2 px-4 py-3">
            <ShieldCheck className="text-emerald-400" size={22} />
            {!collapsed && (
              <div className={isDark ? "text-emerald-100 font-medium" : "text-emerald-700 font-medium"}>
                城市生命线驾驶舱
              </div>
            )}
          </div>
          <Menu
            theme={isDark ? "dark" : "light"}
            mode="inline"
            selectedKeys={[selectedMenu]}
            onClick={(e) => setSelectedMenu(e.key)}
            items={menuItems}
          />
        </Sider>
        <Layout>
          <Header className="flex items-center justify-between px-4">
            <div className={`flex items-center gap-3 ${isDark ? "text-white" : "text-slate-800"}`}>
              <Factory size={18} />
              <span className="font-medium">综合运行态势</span>
              <span className={`text-xs hidden md:inline ${isDark ? "text-slate-300" : "text-slate-500"}`}>
                更新时间 {dayjs().format("YYYY-MM-DD HH:mm:ss")}
              </span>
            </div>
            <div className="flex items-center gap-3">
              <Select
                size="small"
                defaultValue="全市"
                options={[
                  { value: "全市", label: "全市" },
                  { value: "中心城区", label: "中心城区" },
                  { value: "东区", label: "东区" },
                  { value: "西区", label: "西区" },
                  { value: "南区", label: "南区" },
                  { value: "北区", label: "北区" },
                ]}
                style={{ width: 120 }}
              />
              <RangePicker size="small" />
              <Button
                size="small"
                onClick={() => setIsDark((v) => !v)}
                icon={isDark ? <Sun size={14} /> : <Moon size={14} />}
              >
                {isDark ? "暗色" : "白色"}
              </Button>
            </div>
          </Header>
          <Content className="p-4 md:p-6">
            {selectedMenu === "overview" && (
              <section className="space-y-4">
                <Row gutter={[16, 16]}>
                  {stats.map((s) => (
                    <Col xs={24} sm={12} md={12} lg={6} key={s.title}>
                      <Card>
                        <div className="flex items-center gap-3">
                          <div className={`w-9 h-9 rounded-md flex items-center justify-center ${s.bg}`}>{s.icon}</div>
                          <div className="flex-1">
                            <div className="text-xs text-slate-500">{s.title}</div>
                            <div className="text-xl font-semibold">{s.value.toLocaleString()}</div>
                          </div>
                          <AntdTooltip title="环比增长">
                            <TrendingUp className="text-emerald-500" size={18} />
                          </AntdTooltip>
                        </div>
                      </Card>
                    </Col>
                  ))}
                </Row>

                <Row gutter={[16, 16]}>
                  <Col xs={24} md={12} lg={8}>
                    <Card>
                      <EChart option={infraPieOption} />
                    </Card>
                  </Col>
                  <Col xs={24} md={12} lg={8}>
                    <Card>
                      <EChart option={deviceBarOption as EChartsOption} />
                    </Card>
                  </Col>
                  <Col xs={24} md={24} lg={8}>
                    <Card>
                      <EChart option={onlineGaugeOption} />
                    </Card>
                  </Col>
                </Row>

                <Row gutter={[16, 16]}>
                  <Col xs={24} md={12}>
                    <Card>
                      <EChart option={alertTrendOption as EChartsOption} />
                    </Card>
                  </Col>
                  <Col xs={24} md={12}>
                    <Card>
                      <EChart option={riskBarOption} />
                    </Card>
                  </Col>
                </Row>

                <Card title="监测分布（示意）" extra={<span className="text-xs text-slate-500">标注颜色代表风险等级</span>}>
                  <div className="relative w-full h-[380px] rounded-md overflow-hidden bg-slate-100">
                    <img
                      src="/images/city-map.png"
                      alt="城市简化地图"
                      className="absolute inset-0 w-full h-full object-cover opacity-90"
                    />
                    {/* Markers */}
                    {markers.map((m) => (
                      <AntdTooltip key={m.id} title={m.title}>
                        <div
                          className="absolute w-2.5 h-2.5 rounded-full ring-2 ring-white/70"
                          style={{ top: m.top, left: m.left, backgroundColor: m.color }}
                        />
                      </AntdTooltip>
                    ))}

                    {/* Legend */}
                    <div className="absolute right-3 top-3 bg-white/90 backdrop-blur rounded-md p-2 text-xs shadow">
                      <div className="font-medium mb-1 flex items-center gap-1">
                        <Map size={14} /> 覆盖与风险
                      </div>
                      <div className="flex items-center gap-3">
                        <div className="flex items-center gap-1">
                          <span className="inline-block w-2.5 h-2.5 rounded-full" style={{ background: danger }} /> 高
                        </div>
                        <div className="flex items-center gap-1">
                          <span className="inline-block w-2.5 h-2.5 rounded-full" style={{ background: warn }} /> 中
                        </div>
                        <div className="flex items-center gap-1">
                          <span className="inline-block w-2.5 h-2.5 rounded-full" style={{ background: ok }} /> 低
                        </div>
                      </div>
                    </div>
                  </div>
                </Card>
              </section>
            )}

            {selectedMenu === "asset" && (
              <section className="space-y-4">
                <Tabs
                  defaultActiveKey="archive"
                  items={[
                    { key: "archive", label: "基础档案" },
                    { key: "run", label: "运行信息" },
                    { key: "mgmt", label: "管理信息" },
                    { key: "emergency", label: "应急保障" },
                  ]}
                />
                <Row gutter={[16, 16]}>
                  <Col xs={24} lg={14}>
                    <Card title="设施基础档案">
                      <Table
                        size="small"
                        rowKey="id"
                        columns={facilityColumns}
                        dataSource={facilities}
                        pagination={{ pageSize: 8 }}
                        scroll={{ x: 700 }}
                      />
                    </Card>
                  </Col>
                  <Col xs={24} lg={10}>
                    <Card title="行业重点指标">
                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                          <div className="text-xs text-slate-500 mb-1">平均设施年限</div>
                          <Statistic value={Math.round(facilities.reduce((a, b) => a + b.age, 0) / facilities.length)} suffix="年" />
                          <Progress percent={Math.min(100, Math.round((facilities.filter((f) => f.age >= 20).length / facilities.length) * 100))} size="small" />
                          <div className="text-xs text-slate-500 mt-1">20年以上占比</div>
                        </div>
                        <div>
                          <div className="text-xs text-slate-500 mb-1">重点设施数量</div>
                          <Statistic value={facilities.filter((f) => f.type.includes("主") || f.type.includes("厂")).reduce((a, b) => a + b.count, 0)} />
                          <div className="text-xs text-slate-500 mt-1">主干/厂站等关键设施总量</div>
                        </div>
                      </div>
                    </Card>
                    <Card className="mt-4" title="分布热点（示意）">
                      <EChart
                        option={{
                          title: { text: "区域设施数量", left: "center", textStyle: { fontSize: 14 } },
                          xAxis: { type: "category", data: ["中心城区", "东区", "西区", "南区", "北区"] },
                          yAxis: { type: "value" },
                          grid: { left: 40, right: 10, bottom: 20, top: 40 },
                          color: [primary],
                          series: [
                            {
                              type: "bar",
                              data: ["中心城区", "东区", "西区", "南区", "北区"].map(
                                (r) => facilities.filter((f) => f.region === r).reduce((a, b) => a + b.count, 0)
                              ),
                              barWidth: "50%",
                            },
                          ],
                        }}
                      />
                    </Card>
                  </Col>
                </Row>

                <Row gutter={[16, 16]}>
                  <Col xs={24} md={12}>
                    <Card title="日常供应能力（示意）">
                      <EChart
                        option={{
                          tooltip: { trigger: "axis" },
                          legend: { bottom: 0 },
                          grid: { left: 40, right: 10, top: 20, bottom: 40 },
                          xAxis: { type: "category", data: Array.from({ length: 24 }).map((_, i) => `${i}:00`) },
                          yAxis: { type: "value" },
                          color: [primary, "#f59e0b"],
                          series: [
                            { name: "供水(万m³/h)", type: "line", smooth: true, data: Array.from({ length: 24 }).map(() => 50 + Math.random() * 20) },
                            { name: "燃气(万m³/h)", type: "line", smooth: true, data: Array.from({ length: 24 }).map(() => 30 + Math.random() * 15) },
                          ],
                        }}
                      />
                    </Card>
                  </Col>
                  <Col xs={24} md={12}>
                    <Card title="管理单位信息">
                      <Descriptions size="small" column={1} bordered>
                        <Descriptions.Item label="燃气管理单位">市燃气集团、区属燃气公司等（共 6 家）</Descriptions.Item>
                        <Descriptions.Item label="供水管理单位">市自来水公司、二供物业等（共 9 家）</Descriptions.Item>
                        <Descriptions.Item label="排水管理单位">城排中心、各区运营公司（共 7 家）</Descriptions.Item>
                        <Descriptions.Item label="产权分布">市属 60%，区属 30%，社会 10%</Descriptions.Item>
                      </Descriptions>
                      <Divider className="my-3" />
                      <Timeline
                        items={[
                          { color: "green", children: "制度更新：设施巡检标准（本月）" },
                          { color: "blue", children: "完成年度普查 80%" },
                          { color: "orange", children: "外包维保单位进场（上周）" },
                        ]}
                      />
                    </Card>
                  </Col>
                </Row>

                <Row gutter={[16, 16]}>
                  <Col xs={24} md={12}>
                    <Card title="应急资源配置">
                      <div className="grid grid-cols-2 gap-4">
                        <Card size="small">
                          <div className="text-xs text-slate-500">物资仓库</div>
                          <div className="text-xl font-semibold mt-1">12 处</div>
                          <Progress percent={78} status="active" size="small" />
                          <div className="text-xs text-slate-500 mt-1">库存充足度</div>
                        </Card>
                        <Card size="small">
                          <div className="text-xs text-slate-500">抢修队伍</div>
                          <div className="text-xl font-semibold mt-1">26 支</div>
                          <Progress percent={86} status="active" size="small" />
                          <div className="text-xs text-slate-500 mt-1">到岗率</div>
                        </Card>
                        <Card size="small">
                          <div className="text-xs text-slate-500">重点防护目标</div>
                          <div className="text-xl font-semibold mt-1">143 处</div>
                          <Progress percent={92} status="active" size="small" />
                          <div className="text-xs text-slate-500 mt-1">纳入台账比例</div>
                        </Card>
                        <Card size="small">
                          <div className="text-xs text-slate-500">联动单位</div>
                          <div className="text-xl font-semibold mt-1">19 家</div>
                          <Progress percent={74} status="active" size="small" />
                          <div className="text-xs text-slate-500 mt-1">联动成熟度</div>
                        </Card>
                      </div>
                    </Card>
                  </Col>
                  <Col xs={24} md={12}>
                    <Card>
                      <EChart option={radarCapacityOption} />
                    </Card>
                  </Col>
                </Row>
              </section>
            )}

            {selectedMenu === "monitor" && (
              <section className="space-y-4">
                <Tabs
                  defaultActiveKey="summary"
                  items={[
                    { key: "summary", label: "监测概览" },
                    { key: "distribution", label: "监测分布" },
                    { key: "running", label: "运行概况" },
                  ]}
                />

                <Row gutter={[16, 16]}>
                  <Col xs={24} md={12} lg={8}>
                    <Card>
                      <EChart option={onlineGaugeOption} />
                    </Card>
                  </Col>
                  <Col xs={24} md={12} lg={8}>
                    <Card>
                      <EChart option={deviceBarOption as EChartsOption} />
                    </Card>
                  </Col>
                  <Col xs={24} md={24} lg={8}>
                    <Card>
                      <EChart option={riskBarOption} />
                    </Card>
                  </Col>
                </Row>

                <Card title="监测分布（按行业与风险）">
                  <Row gutter={[16, 16]}>
                    {(["燃气", "供水", "排水"] as const).map((ind) => (
                      <Col xs={24} md={8} key={ind}>
                        <Card size="small" title={ind}>
                          <div className="flex items-center gap-4">
                            <div className="flex-1">
                              <div className="text-xs text-slate-500">设备在线</div>
                              <div className="text-lg font-semibold">
                                {devices.filter((d) => d.industry === ind && d.status === "在线").length}
                              </div>
                              <div className="text-xs text-slate-500">总量 {devices.filter((d) => d.industry === ind).length}</div>
                            </div>
                            <div className="flex-1">
                              <div className="text-xs text-slate-500">高风险</div>
                              <div className="text-lg font-semibold">{devices.filter((d) => d.industry === ind && d.risk === "高").length}</div>
                              <Progress percent={Math.round((devices.filter((d) => d.industry === ind && d.risk === "高").length / Math.max(devices.filter((d) => d.industry === ind).length, 1)) * 100)} size="small" />
                            </div>
                          </div>
                        </Card>
                      </Col>
                    ))}
                  </Row>
                </Card>

                <Card title="运行概况（报警覆盖）">
                  <EChart
                    option={{
                      tooltip: { trigger: "axis" },
                      legend: { bottom: 0 },
                      grid: { left: 40, right: 10, top: 20, bottom: 40 },
                      xAxis: { type: "category", data: Array.from({ length: 12 }).map((_, i) => dayjs().subtract(11 - i, "month").format("YYYY-MM")) },
                      yAxis: { type: "value" },
                      color: [primary, "#f59e0b", "#a855f7"],
                      series: (["燃气", "供水", "排水"] as const).map((ind, idx) => ({
                        name: ind,
                        type: "bar",
                        stack: "sum",
                        emphasis: { focus: "series" },
                        data: Array.from({ length: 12 }).map(() => Math.floor(Math.random() * (idx === 0 ? 50 : idx === 1 ? 40 : 30))),
                      })),
                    }}
                  />
                </Card>
              </section>
            )}

            {selectedMenu === "alert" && (
              <section className="space-y-4">
                <Tabs
                  defaultActiveKey="current"
                  items={[
                    { key: "current", label: "当前预警" },
                    { key: "history", label: "历史分析" },
                    { key: "efficiency", label: "预警效率" },
                    { key: "analysis", label: "预警分析" },
                  ]}
                />

                <Row gutter={[16, 16]}>
                  <Col xs={24} lg={16}>
                    <Card title="总体预警处置情况">
                      <Table
                        size="small"
                        rowKey="id"
                        columns={alertColumns}
                        dataSource={alerts}
                        pagination={{ pageSize: 8 }}
                        onRow={(record) => ({
                          onClick: () => {
                            setSelectedAlert(record)
                            setDrawerOpen(true)
                          },
                        })}
                        scroll={{ x: 900 }}
                      />
                    </Card>
                  </Col>
                  <Col xs={24} lg={8}>
                    <Card title="处置效率">
                      <div className="grid grid-cols-2 gap-4">
                        <div>
                          <div className="text-xs text-slate-500">平均处置时效</div>
                          <div className="text-xl font-semibold mt-1">{(45 + Math.random() * 30).toFixed(0)} 分钟</div>
                          <Progress percent={78} status="active" size="small" />
                          <div className="text-xs text-slate-500 mt-1">较上月 +6%</div>
                        </div>
                        <div>
                          <div className="text-xs text-slate-500">闭环率</div>
                          <div className="text-xl font-semibold mt-1">
                            {Math.round((alerts.filter((a) => a.status === "已闭环").length / Math.max(alerts.length, 1)) * 100)}%
                          </div>
                          <Progress percent={86} status="active" size="small" />
                          <div className="text-xs text-slate-500 mt-1">较上周 +2%</div>
                        </div>
                      </div>
                    </Card>
                    <Card className="mt-4">
                      <EChart option={efficiencyPieOption as EChartsOption} />
                    </Card>
                  </Col>
                </Row>

                <Row gutter={[16, 16]}>
                  <Col xs={24} md={12}>
                    <Card title="各行业预警数量（近6月）">
                      <EChart
                        option={{
                          tooltip: { trigger: "axis" },
                          legend: { bottom: 0 },
                          grid: { left: 40, right: 10, top: 20, bottom: 40 },
                          xAxis: { type: "category", data: Array.from({ length: 6 }).map((_, i) => dayjs().subtract(5 - i, "month").format("YYYY-MM")) },
                          yAxis: { type: "value" },
                          color: [primary, "#f59e0b", "#a855f7"],
                          series: (["燃气", "供水", "排水"] as const).map((ind, idx) => ({
                            name: ind,
                            type: "line",
                            smooth: true,
                            data: Array.from({ length: 6 }).map(() => Math.floor(Math.random() * (idx === 0 ? 60 : idx === 1 ? 45 : 35)) + 5),
                          })),
                        }}
                      />
                    </Card>
                  </Col>
                  <Col xs={24} md={12}>
                    <Card title="预警类型与成因分布">
                      <EChart
                        option={{
                          tooltip: { trigger: "axis" },
                          legend: { bottom: 0 },
                          grid: { left: 40, right: 10, top: 20, bottom: 40 },
                          xAxis: {
                            type: "category",
                            data: ["泄漏", "压力异常", "流量突变", "停电", "液位过低", "浊度异常"],
                            axisLabel: { rotate: 20 },
                          },
                          yAxis: { type: "value" },
                          color: [primary, "#f59e0b"],
                          series: [
                            { name: "设备原因", type: "bar", data: [30, 22, 18, 12, 9, 7] },
                            { name: "外部原因", type: "bar", data: [18, 15, 14, 28, 11, 10] },
                          ],
                        }}
                      />
                    </Card>
                  </Col>
                </Row>

                <Drawer
                  title={
                    <div className="flex items-center gap-2">
                      <AlertTriangle size={18} color={selectedAlert ? alertLevelColor(selectedAlert.level) : primary} />
                      <span>预警详情</span>
                    </div>
                  }
                  placement="right"
                  width={520}
                  open={drawerOpen}
                  onClose={() => setDrawerOpen(false)}
                >
                  {selectedAlert ? (
                    <div className="space-y-4">
                      <Descriptions size="small" column={1} bordered>
                        <Descriptions.Item label="预警编号">{selectedAlert.id}</Descriptions.Item>
                        <Descriptions.Item label="等级">
                          <LevelTag level={selectedAlert.level} />
                        </Descriptions.Item>
                        <Descriptions.Item label="行业">{selectedAlert.industry}</Descriptions.Item>
                        <Descriptions.Item label="类型">{selectedAlert.type}</Descriptions.Item>
                        <Descriptions.Item label="时间">{selectedAlert.time}</Descriptions.Item>
                        <Descriptions.Item label="位置">{selectedAlert.location}</Descriptions.Item>
                        <Descriptions.Item label="状态">
                          <StatusBadge s={selectedAlert.status} />
                        </Descriptions.Item>
                        <Descriptions.Item label="描述">{selectedAlert.desc}</Descriptions.Item>
                      </Descriptions>
                      <Card size="small" title="事件时序">
                        <EChart
                          option={{
                            grid: { left: 30, right: 10, top: 20, bottom: 20 },
                            xAxis: { type: "category", data: ["发现", "确认", "处置", "复盘"] },
                            yAxis: { type: "value" },
                            color: [primary],
                            series: [{ type: "line", smooth: true, data: [0, 12, 38, 60] }],
                          }}
                        />
                      </Card>
                      <Card size="small" title="一张图联动（示意）">
                        <div className="relative w-full h-[200px] rounded-md overflow-hidden">
                          <img src="/images/city-map.png" alt="地图联动示意图" className="absolute inset-0 w-full h-full object-cover opacity-90" />
                          <div className="absolute inset-0">
                            <div
                              className="absolute w-3 h-3 rounded-full ring-2 ring-white animate-pulse"
                              style={{ top: "42%", left: "56%", background: alertLevelColor(selectedAlert.level) }}
                              title="预警位置"
                            />
                          </div>
                        </div>
                      </Card>
                      <Space>
                        <a className="text-emerald-600">查看工单</a>
                        <a className="text-emerald-600">下达指令</a>
                        <a className="text-emerald-600">通知联动</a>
                      </Space>
                    </div>
                  ) : (
                    <div className="text-slate-500 text-sm">请选择左侧预警查看详情。</div>
                  )}
                </Drawer>
              </section>
            )}

            {selectedMenu === "settings" && (
              <section className="space-y-4">
                <Card title="预警设置">
                  <Row gutter={[16, 16]}>
                    <Col xs={24} md={12}>
                      <Card size="small" title="阈值设置">
                        <div className="grid grid-cols-2 gap-4">
                          <div>
                            <div className="text-xs text-slate-500 mb-1">压力异常阈值</div>
                            <Select defaultValue="P≤0.3MPa" options={[{ value: "P≤0.3MPa", label: "P≤0.3MPa" }, { value: "P≤0.2MPa", label: "P≤0.2MPa" }]} />
                          </div>
                          <div>
                            <div className="text-xs text-slate-500 mb-1">流量突变阈值</div>
                            <Select defaultValue="ΔQ≥20%" options={[{ value: "ΔQ≥20%", label: "ΔQ≥20%" }, { value: "ΔQ≥30%", label: "ΔQ≥30%" }]} />
                          </div>
                          <div>
                            <div className="text-xs text-slate-500 mb-1">水质指标（浊度）</div>
                            <Select defaultValue="≥5 NTU" options={[{ value: "≥5 NTU", label: "≥5 NTU" }, { value: "≥3 NTU", label: "≥3 NTU" }]} />
                          </div>
                          <div>
                            <div className="text-xs text-slate-500 mb-1">液位过低</div>
                            <Select defaultValue="≤20%" options={[{ value: "≤20%", label: "≤20%" }, { value: "≤15%", label: "≤15%" }]} />
                          </div>
                        </div>
                      </Card>
                    </Col>
                    <Col xs={24} md={12}>
                      <Card size="small" title="通知策略">
                        <div className="grid grid-cols-2 gap-4">
                          <div className="flex items-center justify-between">
                            <span>高等级预警短信</span>
                            <Switch defaultChecked />
                          </div>
                          <div className="flex items-center justify-between">
                            <span>邮件抄送管理层</span>
                            <Switch />
                          </div>
                          <div className="flex items-center justify-between">
                            <span>自动派单</span>
                            <Switch />
                          </div>
                          <div className="flex items-center justify-between">
                            <span>与值守大屏联动</span>
                            <Switch defaultChecked />
                          </div>
                        </div>
                      </Card>
                    </Col>
                  </Row>
                </Card>
              </section>
            )}
          </Content>
        </Layout>
      </Layout>
    </ConfigProvider>
  )
}