feat(app): 新增监测设备管理功能

- 实现了设备管理页面，包括设备列表、搜索、筛选、新增、编辑和删除功能
- 添加了设备状态标签和维护记录更新功能
- 优化了页面布局和样式，提升了用户体验

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

@@ -0,0 +1,285 @@
+"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>
+  )
+}