ruoyi-react-front/app/(other)/test8/components/pipeline-data-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} 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>
  )
}