ruoyi-react-front/app/(other)/test10/components/AlarmPanel.tsx

"use client"

import {useState} from "react"
import dynamic from "next/dynamic"
import {
  Alert,
  Badge,
  Button,
  Card,
  Col,
  DatePicker,
  Form,
  Input,
  Modal,
  Row,
  Select,
  Space,
  Statistic,
  Table,
  Tabs,
  Upload,
} from "antd"
import {EditOutlined, ExportOutlined, EyeOutlined, SearchOutlined, UploadOutlined} from "@ant-design/icons"
import globalMessage from "@/app/_modules/globalMessage";

const MapView = dynamic(() => import("./MapView"), {
  ssr: false,
  loading: () => <div className="flex items-center justify-center h-full">地图加载中...</div>,
})

const { Option } = Select
const { RangePicker } = DatePicker
const { TabPane } = Tabs
const { TextArea } = Input

export default function AlarmPanel() {
  const [selectedTab, setSelectedTab] = useState("current-alarms")
  const [modalVisible, setModalVisible] = useState(false)
  const [selectedAlarm, setSelectedAlarm] = useState<any>(null)

  // 模拟报警数据
  const alarmData = [
    {
      key: "1",
      id: "AL001",
      time: "2024-01-15 14:25:30",
      device: "LV002",
      deviceName: "人民路积水点液位计",
      location: "人民路与南京路交叉口",
      level: "高",
      type: "液位超限",
      currentValue: "0.8m",
      threshold: "0.5m",
      status: "未处理",
      description: "液位持续超过报警阈值，可能存在积水风险",
    },
    {
      key: "2",
      id: "AL002",
      time: "2024-01-15 14:20:15",
      device: "FL001",
      deviceName: "主干道流量计",
      location: "淮海路主干管网",
      level: "中",
      type: "流量异常",
      currentValue: "3.2m³/s",
      threshold: "3.0m³/s",
      status: "处理中",
      description: "流量超过设计值，需要关注管网负荷情况",
    },
    {
      key: "3",
      id: "AL003",
      time: "2024-01-15 14:15:45",
      device: "PS001",
      deviceName: "第一泵站",
      location: "城东泵站",
      level: "高",
      type: "设备故障",
      currentValue: "停机",
      threshold: "正常运行",
      status: "已派单",
      description: "泵站突然停机，疑似电机故障",
    },
  ]

  const handleAlarmDetail = (record: any) => {
    setSelectedAlarm(record)
    setModalVisible(true)
  }

  const handleAlarmProcess = (record: any) => {
    globalMessage.success(`报警 ${record.id} 已开始处理`)
  }

  const columns = [
    { title: "报警编号", dataIndex: "id", key: "id", width: 100 },
    { title: "报警时间", dataIndex: "time", key: "time", width: 150 },
    { title: "设备编号", dataIndex: "device", key: "device", width: 100 },
    { title: "设备名称", dataIndex: "deviceName", key: "deviceName", width: 150 },
    { title: "位置", dataIndex: "location", key: "location", width: 150 },
    {
      title: "报警级别",
      dataIndex: "level",
      key: "level",
      width: 100,
      render: (level: string) => (
        <Badge color={level === "高" ? "red" : level === "中" ? "orange" : "blue"} text={level} />
      ),
    },
    { title: "报警类型", dataIndex: "type", key: "type", width: 100 },
    { title: "当前值", dataIndex: "currentValue", key: "currentValue", width: 100 },
    {
      title: "处理状态",
      dataIndex: "status",
      key: "status",
      width: 100,
      render: (status: string) => (
        <Badge status={status === "未处理" ? "error" : status === "处理中" ? "processing" : "success"} text={status} />
      ),
    },
    {
      title: "操作",
      key: "action",
      width: 200,
      render: (_, record) => (
        <Space>
          <Button size="small" icon={<EyeOutlined />} onClick={() => handleAlarmDetail(record)}>
            详情
          </Button>
          <Button size="small" type="primary" icon={<EditOutlined />} onClick={() => handleAlarmProcess(record)}>
            处理
          </Button>
        </Space>
      ),
    },
  ]

  return (
    <div className="space-y-6">
      {/* 统计概览 */}
      <Row gutter={[16, 16]}>
        <Col span={6}>
          <Card>
            <Statistic title="当前报警总数" value={23} valueStyle={{ color: "#cf1322" }} suffix="条" />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic title="高级别报警" value={8} valueStyle={{ color: "#ff4d4f" }} suffix="条" />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic title="今日处理" value={15} valueStyle={{ color: "#52c41a" }} suffix="条" />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic title="处理率" value={87.5} valueStyle={{ color: "#1890ff" }} suffix="%" />
          </Card>
        </Col>
      </Row>

      {/* 滚动报警提醒 */}
      <Alert
        message="实时报警"
        description="【14:25:30】人民路积水点液位超限报警 | 【14:20:15】主干道流量异常 | 【14:15:45】第一泵站设备故障"
        type="error"
        showIcon
        closable
      />

      <Tabs activeKey={selectedTab} onChange={setSelectedTab}>
        <TabPane tab="监测报警" key="current-alarms">
          <Card title="报警清单">
            <div className="mb-4">
              <Space wrap>
                <Input placeholder="设备编号" prefix={<SearchOutlined />} style={{ width: 150 }} />
                <Select placeholder="报警级别" style={{ width: 120 }}>
                  <Option value="high">高</Option>
                  <Option value="medium">中</Option>
                  <Option value="low">低</Option>
                </Select>
                <Select placeholder="处理状态" style={{ width: 120 }}>
                  <Option value="unprocessed">未处理</Option>
                  <Option value="processing">处理中</Option>
                  <Option value="processed">已处理</Option>
                </Select>
                <RangePicker placeholder={["开始时间", "结束时间"]} />
                <Button type="primary" icon={<SearchOutlined />}>
                  查询
                </Button>
                <Button icon={<ExportOutlined />}>导出</Button>
              </Space>
            </div>

            <Table columns={columns} dataSource={alarmData} pagination={{ pageSize: 10 }} scroll={{ x: 1200 }} />
          </Card>
        </TabPane>

        <TabPane tab="报警地图" key="alarm-map">
          <Card title="当前报警 GIS " className="h-96">
            <MapView type="overview" />
          </Card>
        </TabPane>

        <TabPane tab="监测预警" key="warnings">
          <Card title="当前预警管理">
            <div className="space-y-4">
              <Alert
                message="管网运行风险预警"
                description="检测到3个区域管网负荷率超过85%，建议加强监控"
                type="warning"
                showIcon
              />
              <Alert
                message="积水内涝预警"
                description="气象部门发布暴雨预警，5个易积水点需重点关注"
                type="info"
                showIcon
              />
            </div>
          </Card>
        </TabPane>
      </Tabs>

      {/* 报警详情模态框 */}
      <Modal
        title="报警详情"
        open={modalVisible}
        onCancel={() => setModalVisible(false)}
        width={800}
        footer={[
          <Button key="close" onClick={() => setModalVisible(false)}>
            关闭
          </Button>,
          <Button key="process" type="primary">
            处理报警
          </Button>,
        ]}
      >
        {selectedAlarm && (
          <div className="space-y-4">
            <Row gutter={[16, 16]}>
              <Col span={12}>
                <div>
                  <strong>报警编号:</strong> {selectedAlarm.id}
                </div>
                <div>
                  <strong>报警时间:</strong> {selectedAlarm.time}
                </div>
                <div>
                  <strong>设备编号:</strong> {selectedAlarm.device}
                </div>
                <div>
                  <strong>设备名称:</strong> {selectedAlarm.deviceName}
                </div>
              </Col>
              <Col span={12}>
                <div>
                  <strong>报警级别:</strong>{" "}
                  <Badge color={selectedAlarm.level === "高" ? "red" : "orange"} text={selectedAlarm.level} />
                </div>
                <div>
                  <strong>报警类型:</strong> {selectedAlarm.type}
                </div>
                <div>
                  <strong>当前值:</strong> {selectedAlarm.currentValue}
                </div>
                <div>
                  <strong>阈值:</strong> {selectedAlarm.threshold}
                </div>
              </Col>
            </Row>

            <div>
              <strong>位置信息:</strong> {selectedAlarm.location}
            </div>

            <div>
              <strong>报警描述:</strong> {selectedAlarm.description}
            </div>

            <Card title="处理记录" size="small">
              <Form layout="vertical">
                <Form.Item label="处理意见">
                  <TextArea rows={3} placeholder="请输入处理意见..." />
                </Form.Item>
                <Form.Item label="附件上传">
                  <Upload>
                    <Button icon={<UploadOutlined />}>上传文件</Button>
                  </Upload>
                </Form.Item>
              </Form>
            </Card>
          </div>
        )}
      </Modal>
    </div>
  )
}