feat(app): 新增燃气管网基础数据管理功能

- 添加 PipelineDataManagement 组件，实现对燃气管网数据的管理
- 包含管线数据、管点数据和窨井数据的展示和操作功能- 使用 Ant Design 组件库实现表格、表单和模态框
- 支持数据的新增、编辑和删除操作

app/(other)/test8/components/pipeline-data-management.tsx

@@ -0,0 +1,332 @@
+"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} from "@ant-design/icons"
+import globalMessage from "@/app/_modules/globalMessage";
+
+const { Option } = Select
+
+// 模拟管网数据
+const mockPipelineData = [
+  {
+    id: "P001",
+    name: "解放路主干线",
+    type: "主干管",
+    material: "钢管",
+    diameter: "DN400",
+    pressure: "0.4MPa",
+    length: 1200,
+    installDate: "2020-03-15",
+    status: "正常",
+    location: "解放路段",
+  },
+  {
+    id: "P002",
+    name: "人民路支线",
+    type: "支管",
+    material: "PE管",
+    diameter: "DN200",
+    pressure: "0.2MPa",
+    length: 800,
+    installDate: "2021-06-20",
+    status: "维护中",
+    location: "人民路段",
+  },
+  {
+    id: "P003",
+    name: "建设路次高压管",
+    type: "次高压管",
+    material: "钢管",
+    diameter: "DN600",
+    pressure: "0.8MPa",
+    length: 2000,
+    installDate: "2019-11-10",
+    status: "正常",
+    location: "建设路段",
+  },
+]
+
+const mockNodeData = [
+  {
+    id: "N001",
+    name: "解放路调压站",
+    type: "调压站",
+    inletPressure: "0.4MPa",
+    outletPressure: "0.2MPa",
+    capacity: "5000m³/h",
+    status: "运行",
+    location: "解放路与建设路交叉口",
+  },
+  {
+    id: "N002",
+    name: "人民路阀门井",
+    type: "阀门井",
+    inletPressure: "0.2MPa",
+    outletPressure: "0.2MPa",
+    capacity: "-",
+    status: "正常",
+    location: "人民路中段",
+  },
+]
+
+const mockWellData = [
+  {
+    id: "W001",
+    name: "解放路窨井001",
+    type: "检查井",
+    depth: "2.5m",
+    material: "混凝土",
+    coverType: "铸铁井盖",
+    status: "正常",
+    location: "解放路北段",
+    lastInspection: "2024-01-15",
+  },
+  {
+    id: "W002",
+    name: "人民路窨井002",
+    type: "阀门井",
+    depth: "3.0m",
+    material: "砖砌",
+    coverType: "复合井盖",
+    status: "需维护",
+    location: "人民路南段",
+    lastInspection: "2024-01-10",
+  },
+]
+
+export default function PipelineDataManagement() {
+  const [activeTab, setActiveTab] = useState("pipeline")
+  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 handleModalOk = () => {
+    form.validateFields().then((values) => {
+      if (editingRecord) {
+        globalMessage.success("更新成功")
+      } else {
+        globalMessage.success("添加成功")
+      }
+      setIsModalVisible(false)
+      form.resetFields()
+    })
+  }
+
+  const pipelineColumns = [
+    { title: "管线编号", dataIndex: "id", key: "id" },
+    { title: "管线名称", dataIndex: "name", key: "name" },
+    { title: "管线类型", dataIndex: "type", key: "type" },
+    { title: "管材", dataIndex: "material", key: "material" },
+    { title: "管径", dataIndex: "diameter", key: "diameter" },
+    { title: "压力等级", dataIndex: "pressure", key: "pressure" },
+    { title: "长度(m)", dataIndex: "length", key: "length" },
+    { title: "安装日期", dataIndex: "installDate", key: "installDate" },
+    {
+      title: "状态",
+      dataIndex: "status",
+      key: "status",
+      render: (status: string) => (
+        <Tag color={status === "正常" ? "green" : status === "维护中" ? "orange" : "red"}>{status}</Tag>
+      ),
+    },
+    {
+      title: "操作",
+      key: "action",
+      render: (_, record) => (
+        <Space>
+          <Button type="link" icon={<EditOutlined />} onClick={() => handleEdit(record)}>
+            编辑
+          </Button>
+          <Popconfirm title="确定删除吗？" onConfirm={() => handleDelete(record.id)}>
+            <Button type="link" danger icon={<DeleteOutlined />}>
+              删除
+            </Button>
+          </Popconfirm>
+        </Space>
+      ),
+    },
+  ]
+
+  const nodeColumns = [
+    { title: "节点编号", dataIndex: "id", key: "id" },
+    { title: "节点名称", dataIndex: "name", key: "name" },
+    { title: "节点类型", dataIndex: "type", key: "type" },
+    { title: "进口压力", dataIndex: "inletPressure", key: "inletPressure" },
+    { title: "出口压力", dataIndex: "outletPressure", key: "outletPressure" },
+    { title: "处理能力", dataIndex: "capacity", key: "capacity" },
+    {
+      title: "状态",
+      dataIndex: "status",
+      key: "status",
+      render: (status: string) => (
+        <Tag color={status === "运行" ? "green" : status === "正常" ? "blue" : "red"}>{status}</Tag>
+      ),
+    },
+    {
+      title: "操作",
+      key: "action",
+      render: (_, record) => (
+        <Space>
+          <Button type="link" icon={<EditOutlined />} onClick={() => handleEdit(record)}>
+            编辑
+          </Button>
+          <Popconfirm title="确定删除吗？" onConfirm={() => handleDelete(record.id)}>
+            <Button type="link" danger icon={<DeleteOutlined />}>
+              删除
+            </Button>
+          </Popconfirm>
+        </Space>
+      ),
+    },
+  ]
+
+  const wellColumns = [
+    { title: "窨井编号", dataIndex: "id", key: "id" },
+    { title: "窨井名称", dataIndex: "name", key: "name" },
+    { title: "窨井类型", dataIndex: "type", key: "type" },
+    { title: "深度", dataIndex: "depth", key: "depth" },
+    { title: "材质", dataIndex: "material", key: "material" },
+    { title: "井盖类型", dataIndex: "coverType", key: "coverType" },
+    { title: "最后检查", dataIndex: "lastInspection", key: "lastInspection" },
+    {
+      title: "状态",
+      dataIndex: "status",
+      key: "status",
+      render: (status: string) => <Tag color={status === "正常" ? "green" : "orange"}>{status}</Tag>,
+    },
+    {
+      title: "操作",
+      key: "action",
+      render: (_, record) => (
+        <Space>
+          <Button type="link" icon={<EditOutlined />} onClick={() => handleEdit(record)}>
+            编辑
+          </Button>
+          <Popconfirm title="确定删除吗？" onConfirm={() => handleDelete(record.id)}>
+            <Button type="link" danger icon={<DeleteOutlined />}>
+              删除
+            </Button>
+          </Popconfirm>
+        </Space>
+      ),
+    },
+  ]
+
+  const renderTabContent = () => {
+    switch (activeTab) {
+      case "pipeline":
+        return (
+          <Table columns={pipelineColumns} dataSource={mockPipelineData} rowKey="id" pagination={{ pageSize: 10 }} />
+        )
+      case "node":
+        return <Table columns={nodeColumns} dataSource={mockNodeData} rowKey="id" pagination={{ pageSize: 10 }} />
+      case "well":
+        return <Table columns={wellColumns} dataSource={mockWellData} rowKey="id" pagination={{ pageSize: 10 }} />
+      default:
+        return null
+    }
+  }
+
+  const renderModalForm = () => {
+    if (activeTab === "pipeline") {
+      return (
+        <>
+          <Form.Item name="name" label="管线名称" rules={[{ required: true }]}>
+            <Input />
+          </Form.Item>
+          <Form.Item name="type" label="管线类型" rules={[{ required: true }]}>
+            <Select>
+              <Option value="主干管">主干管</Option>
+              <Option value="支管">支管</Option>
+              <Option value="次高压管">次高压管</Option>
+            </Select>
+          </Form.Item>
+          <Form.Item name="material" label="管材" rules={[{ required: true }]}>
+            <Select>
+              <Option value="钢管">钢管</Option>
+              <Option value="PE管">PE管</Option>
+              <Option value="铸铁管">铸铁管</Option>
+            </Select>
+          </Form.Item>
+          <Form.Item name="diameter" label="管径" rules={[{ required: true }]}>
+            <Input />
+          </Form.Item>
+          <Form.Item name="pressure" label="压力等级" rules={[{ required: true }]}>
+            <Input />
+          </Form.Item>
+          <Form.Item name="length" label="长度(m)" rules={[{ required: true }]}>
+            <Input type="number" />
+          </Form.Item>
+          <Form.Item name="location" label="位置" rules={[{ required: true }]}>
+            <Input />
+          </Form.Item>
+        </>
+      )
+    }
+    return null
+  }
+
+  return (
+    <div className="p-6">
+      <Card title="燃气管网基础数据管理">
+        <Row gutter={16} className="mb-4">
+          <Col>
+            <Button type={activeTab === "pipeline" ? "primary" : "default"} onClick={() => setActiveTab("pipeline")}>
+              管线数据
+            </Button>
+          </Col>
+          <Col>
+            <Button type={activeTab === "node" ? "primary" : "default"} onClick={() => setActiveTab("node")}>
+              管点数据
+            </Button>
+          </Col>
+          <Col>
+            <Button type={activeTab === "well" ? "primary" : "default"} onClick={() => setActiveTab("well")}>
+              窨井数据
+            </Button>
+          </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)} />
+          </Space>
+        </div>
+
+        {renderTabContent()}
+
+        <Modal
+          title={editingRecord ? "编辑数据" : "新增数据"}
+          open={isModalVisible}
+          onOk={handleModalOk}
+          onCancel={() => setIsModalVisible(false)}
+          width={600}
+        >
+          <Form form={form} layout="vertical">
+            {renderModalForm()}
+          </Form>
+        </Modal>
+      </Card>
+    </div>
+  )
+}