ruoyi-react-front/app/(other)/test8/components/device-management.tsx

"use client"

import {useState} from "react"
import {Button, Card, Col, Form, Input, Modal, Popconfirm, Row, Select, Space, Table, Tag} from "antd"
import {DeleteOutlined, EditOutlined, PlusOutlined, ToolOutlined} from "@ant-design/icons"
import globalMessage from "@/app/_modules/globalMessage";

const { Option } = Select

// 模拟监测设备数据
const mockDeviceData = [
  {
    id: "D001",
    name: "压力监测器001",
    type: "压力监测",
    model: "PT-100",
    location: "解放路调压站",
    installDate: "2023-03-15",
    status: "在线",
    lastMaintenance: "2024-01-10",
    nextMaintenance: "2024-04-10",
    manufacturer: "华为技术",
    serialNumber: "HW20230315001",
  },
  {
    id: "D002",
    name: "流量监测器002",
    type: "流量监测",
    model: "FM-200",
    location: "人民路段",
    installDate: "2023-05-20",
    status: "离线",
    lastMaintenance: "2023-12-15",
    nextMaintenance: "2024-03-15",
    manufacturer: "中兴通讯",
    serialNumber: "ZX20230520002",
  },
  {
    id: "D003",
    name: "温度监测器003",
    type: "温度监测",
    model: "TM-300",
    location: "建设路段",
    installDate: "2023-07-10",
    status: "在线",
    lastMaintenance: "2024-01-05",
    nextMaintenance: "2024-04-05",
    manufacturer: "海康威视",
    serialNumber: "HK20230710003",
  },
  {
    id: "D004",
    name: "泄漏检测器004",
    type: "泄漏检测",
    model: "LD-400",
    location: "解放路北段",
    installDate: "2023-09-25",
    status: "维护中",
    lastMaintenance: "2024-01-20",
    nextMaintenance: "2024-04-20",
    manufacturer: "大华技术",
    serialNumber: "DH20230925004",
  },
]

export default function DeviceManagement() {
  const [isModalVisible, setIsModalVisible] = useState(false)
  const [editingRecord, setEditingRecord] = useState(null)
  const [form] = Form.useForm()

  const handleAdd = () => {
    setEditingRecord(null)
    form.resetFields()
    setIsModalVisible(true)
  }

  const handleEdit = (record: any) => {
    setEditingRecord(record)
    form.setFieldsValue(record)
    setIsModalVisible(true)
  }

  const handleDelete = (id: string) => {
    globalMessage.success("删除成功")
  }

  const handleMaintenance = (record: any) => {
    globalMessage.success(`设备 ${record.name} 维护记录已更新`)
  }

  const handleModalOk = () => {
    form.validateFields().then((values) => {
      if (editingRecord) {
        globalMessage.success("更新成功")
      } else {
        globalMessage.success("添加成功")
      }
      setIsModalVisible(false)
      form.resetFields()
    })
  }

  const columns = [
    { title: "设备编号", dataIndex: "id", key: "id" },
    { title: "设备名称", dataIndex: "name", key: "name" },
    { title: "设备类型", dataIndex: "type", key: "type" },
    { title: "设备型号", dataIndex: "model", key: "model" },
    { title: "安装位置", dataIndex: "location", key: "location" },
    { title: "制造商", dataIndex: "manufacturer", key: "manufacturer" },
    { title: "序列号", dataIndex: "serialNumber", key: "serialNumber" },
    { title: "安装日期", dataIndex: "installDate", key: "installDate" },
    { title: "上次维护", dataIndex: "lastMaintenance", key: "lastMaintenance" },
    { title: "下次维护", dataIndex: "nextMaintenance", key: "nextMaintenance" },
    {
      title: "状态",
      dataIndex: "status",
      key: "status",
      render: (status: string) => {
        const colorMap = {
          在线: "green",
          离线: "red",
          维护中: "orange",
          故障: "red",
        }
        return <Tag color={colorMap[status as keyof typeof colorMap]}>{status}</Tag>
      },
    },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <Space>
          <Button type="link" icon={<EditOutlined />} onClick={() => handleEdit(record)}>
            编辑
          </Button>
          <Button type="link" icon={<ToolOutlined />} onClick={() => handleMaintenance(record)}>
            维护
          </Button>
          <Popconfirm title="确定删除吗？" onConfirm={() => handleDelete(record.id)}>
            <Button type="link" danger icon={<DeleteOutlined />}>
              删除
            </Button>
          </Popconfirm>
        </Space>
      ),
    },
  ]

  return (
    <div className="p-6">
      <Card title="监测设备管理">
        <Row gutter={16} className="mb-4">
          <Col span={6}>
            <Card size="small">
              <div className="text-center">
                <div className="text-2xl font-bold text-blue-600">342</div>
                <div className="text-gray-600">设备总数</div>
              </div>
            </Card>
          </Col>
          <Col span={6}>
            <Card size="small">
              <div className="text-center">
                <div className="text-2xl font-bold text-green-600">298</div>
                <div className="text-gray-600">在线设备</div>
              </div>
            </Card>
          </Col>
          <Col span={6}>
            <Card size="small">
              <div className="text-center">
                <div className="text-2xl font-bold text-red-600">12</div>
                <div className="text-gray-600">离线设备</div>
              </div>
            </Card>
          </Col>
          <Col span={6}>
            <Card size="small">
              <div className="text-center">
                <div className="text-2xl font-bold text-orange-600">32</div>
                <div className="text-gray-600">维护中</div>
              </div>
            </Card>
          </Col>
        </Row>

        <div className="mb-4">
          <Space>
            <Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>
              新增设备
            </Button>
            <Input.Search placeholder="搜索设备..." style={{ width: 300 }} onSearch={(value) => console.log(value)} />
            <Select placeholder="设备类型" style={{ width: 120 }}>
              <Option value="pressure">压力监测</Option>
              <Option value="flow">流量监测</Option>
              <Option value="temperature">温度监测</Option>
              <Option value="leak">泄漏检测</Option>
            </Select>
            <Select placeholder="设备状态" style={{ width: 120 }}>
              <Option value="online">在线</Option>
              <Option value="offline">离线</Option>
              <Option value="maintenance">维护中</Option>
            </Select>
          </Space>
        </div>

        <Table
          columns={columns}
          dataSource={mockDeviceData}
          rowKey="id"
          pagination={{ pageSize: 10 }}
          scroll={{ x: 1200 }}
        />

        <Modal
          title={editingRecord ? "编辑设备" : "新增设备"}
          open={isModalVisible}
          onOk={handleModalOk}
          onCancel={() => setIsModalVisible(false)}
          width={800}
        >
          <Form form={form} layout="vertical">
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item name="name" label="设备名称" rules={[{ required: true }]}>
                  <Input />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item name="type" label="设备类型" rules={[{ required: true }]}>
                  <Select>
                    <Option value="压力监测">压力监测</Option>
                    <Option value="流量监测">流量监测</Option>
                    <Option value="温度监测">温度监测</Option>
                    <Option value="泄漏检测">泄漏检测</Option>
                  </Select>
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item name="model" label="设备型号" rules={[{ required: true }]}>
                  <Input />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item name="manufacturer" label="制造商" rules={[{ required: true }]}>
                  <Input />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item name="serialNumber" label="序列号" rules={[{ required: true }]}>
                  <Input />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item name="location" label="安装位置" rules={[{ required: true }]}>
                  <Input />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item name="installDate" label="安装日期" rules={[{ required: true }]}>
                  <Input type="date" />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item name="status" label="设备状态" rules={[{ required: true }]}>
                  <Select>
                    <Option value="在线">在线</Option>
                    <Option value="离线">离线</Option>
                    <Option value="维护中">维护中</Option>
                  </Select>
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Modal>
      </Card>
    </div>
  )
}