ykzz-web/src/views/Gcyx/InformationSearch/BasicSituation/index.js

import React, { useState, useEffect } from 'react'
import { Row, Col, Form, Input, DatePicker, Button, Upload, message, Modal, Divider } from "antd"
import { formItemLayout } from '../../../../components/crud/FormLayoutProps'
import { httppost2,httppost5 } from '../../../../utils/request'
import apiurl from '../../../../service/apiurl'
import { exportFile } from '../../../../utils/tools'
import './index.less'
export default function BasicSituation() {
  const [form] = Form.useForm();
  const [skdisabled, setSkDisabled] = useState(true)
  const [basicObj, setBasicObj] = useState({})
  const getBasicInfo = async () => {
    try {
      const res = await httppost2(apiurl.gcyx.jbqk.list)
      if (res.code == 200) {
        setBasicObj(res.data)
        form.setFieldsValue(res.data)
      }
    } catch (error) {
      console.log(error);

    }
  }
  const onFinish = async (val) => {
    try {
      const res = await httppost2(apiurl.gcyx.jbqk.edit, { ...basicObj, ...val })
      if (res.code == 200) {
        setSkDisabled(true)
        message.success('编辑成功')
      }
    } catch (error) {
      console.log(error);
    }
  }
  // 导出
  const exportExcel = () => {
    httppost5(apiurl.gcyx.jbqk.export).then(res => {
      exportFile(`基本情况.xlsx`, res.data)
    })
  }
  useEffect(() => {
    getBasicInfo()
  }, [])

  return (

    <div className='content-root clearFloat xybm xxcx' style={{ paddingBottom: "0" }}>
      <div className='lf CrudAdcdTreeTableBox' style={{ width: "100%", overflowY: "auto" }}>
        <Form
          form={form}
          {...formItemLayout}
          onFinish={onFinish}
        >
          <Row >
            <Col span={12}>
              <Form.Item>
                <div style={{ display: 'flex', columnGap: 20, marginBottom: 20 }}>
                  {
                    skdisabled ? <Button type="primary" onClick={() => setSkDisabled(false)}>编辑</Button> :
                      <div style={{ display: 'flex', columnGap: 20 }}>
                        <Button onClick={() => setSkDisabled(true)}>取消</Button>
                        <Button type="primary" htmlType="submit">保存</Button>
                      </div>
                  }
                  <Button onClick={exportExcel} >导出</Button>

                </div>
              </Form.Item>
            </Col>
          </Row>
          <div style={{ width: '100%', padding: '15px 10px', background: "#e0edff", fontSize: 16, color: '#02a7f0', fontWeight: 700 }}>水文</div>
          <Row style={{ background: "#f0f8fe", padding: 10 }}>
            <Col span={8}>
              <Form.Item
                label="全流域面积(km²)"
                name="basArea"
                style={{ marginBottom: 0 }}
                labelCol={{
                  style: { marginLeft: "6%" }
                }}
              >
                <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item
                label="利用水文系列年限(年)"
                name="yearLimit"
                labelCol={{
                  style: { marginLeft: "13%" }
                }}
                style={{ marginBottom: 0 }}
              >
                <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item
                label="多年平均年径流量(亿m³)"
                name="annualAvgYearQ"
                style={{ marginBottom: 0 }}
                labelCol={{
                  style: { marginLeft: "8%" }
                }}
              >
                <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
              </Form.Item>
            </Col>
          </Row>
          <Row style={{ background: "#f0f8fe", padding: '10px' }}>
            <Col span={8}>
              <Form.Item
                label="多年平均流量(m³/s)"
                name="annualAvgQ"
                style={{ marginBottom: 0 }}
                labelCol={{
                  style: { marginLeft: "2.5%" }
                }}
              >
                <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item
                label="设计洪水标准P%相应流量(m³/s)"
                name="desStandardQ"
                labelCol={{
                  style: { marginLeft: "0%" }
                }}
              >
                <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
              </Form.Item>
            </Col>
          </Row>
          <div style={{ width: '100%', padding: '15px 10px', background: "#e0edff", fontSize: 16, color: '#02a7f0', fontWeight: 700 }}>工程规模</div>
          <Row style={{ background: "#f0f8fe", padding: 10 }}>
            <Col span={8}>
              <Form.Item
                label="设计灌溉面积(万亩)"
                name="designIrrArea"
                style={{ marginBottom: 0 }}
                labelCol={{
                  style: { marginLeft: "2.5%" }
                }}
              >
                <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item
                label="灌溉保证率(%)"
                name="irrEnsureRate"
                labelCol={{
                  style: { marginLeft: "21%" }
                }}
                style={{ marginBottom: 0 }}
              >
                <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item
                label="设计引水流量(m³/s)"
                name="desDiverQ"
                style={{ marginBottom: 0 }}
                labelCol={{
                  style: { marginLeft: "11%" }
                }}
              >
                <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
              </Form.Item>
            </Col>
          </Row>
          <Row style={{ background: "#f0f8fe", padding: '10px' }}>
            <Col span={8}>
              <Form.Item
                label="外江设计洪水位(m)"
                name="outerDesFlood"
                style={{ marginBottom: 0 }}
                labelCol={{
                  style: { marginLeft: "2.5%" }
                }}
              >
                <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item
                label="外江最高运行水位(m)"
                name="outerMaxRunFlood"
                labelCol={{
                  style: { marginLeft: "13%" }
                }}
                style={{ marginBottom: 0 }}
              >
                <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item
                label="灌溉设计水位(m)"
                name="irrDesFlood"
                labelCol={{
                  style: { marginLeft: "14%" }
                }}
              >
                <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
              </Form.Item>
            </Col>
          </Row>
          <div style={{ width: '100%', padding: '15px 10px', background: "#e0edff", fontSize: 16, color: '#02a7f0', fontWeight: 700 }}>建设征地与移民安置</div>
          <Row style={{ background: "#f0f8fe", padding: 10 }}>
            <Col span={8}>
              <Form.Item
                label="永久征地面积(亩)"
                name="perLandArea"
                style={{ marginBottom: 0 }}
                labelCol={{
                  style: { marginLeft: "5.5%" }
                }}
              >
                <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item
                label="临时用地(亩)"
                name="tempLandUse"
                labelCol={{
                  style: { marginLeft: "24%" }
                }}
                style={{ marginBottom: 0 }}
              >
                <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item
                label="搬迁安置人口(人)"
                name="resetPopulation"
                style={{ marginBottom: 0 }}
                labelCol={{
                  style: { marginLeft: "15%" }
                }}
              >
                <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
              </Form.Item>
            </Col>
          </Row>
          <div style={{ width: '100%', padding: '15px 10px', background: "#e0edff", fontSize: 16, color: '#02a7f0', fontWeight: 700 }}>主要建筑物及设备</div>
          <Row style={{ background: "#f0f8fe", padding: 10 }}>
            <Col span={8}>
              <Form.Item
                label="水闸形式"
                name="gateType"
                style={{ marginBottom: 0 }}
                labelCol={{
                  style: { marginLeft: "15.5%" }
                }}
              >
                <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
              </Form.Item>
            </Col>
            <Col span={16}>
              <Form.Item
                label="水闸地基特性"
                name="foundCharacter"
                labelCol={{
                  style: { marginLeft: "11%" }
                }}
                style={{ marginBottom: 0 }}
              >
                <Input allowClear style={{ width: '133%' }} disabled={skdisabled} />
              </Form.Item>
            </Col>
          </Row>
          <Row style={{ background: "#f0f8fe", padding: '10px 10px 0 10px' }}>
            <Col span={8}>
              <Form.Item
                label="水闸地震动参数(g)"
                name="groundMotionPara"
                style={{ marginBottom: 0 }}
                labelCol={{
                  style: { marginLeft: "3.5%" }
                }}
              >
                <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item
                label="水闸地震基本烈度(度)"
                name="basicSeisIntensity"
                labelCol={{
                  style: { marginLeft: "11.5%" }
                }}
                style={{ marginBottom: 0 }}
              >
                <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item
                label="水闸地震设计烈度(度)"
                name="desSeisIntensity"
                labelCol={{
                  style: { marginLeft: "10%" }
                }}
              >
                <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
              </Form.Item>
            </Col>
          </Row>
          <Row style={{ background: "#f0f8fe", padding: '0 10px' }}>
            <Col span={8}>
              <Form.Item
                label="水闸闸顶高程(m)"
                name="gateTopElev"
                style={{ marginBottom: 0 }}
                labelCol={{
                  style: { marginLeft: "5.5%" }
                }}
              >
                <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item
                label="水闸底槛高程(m)"
                name="gateBottomElev"
                labelCol={{
                  style: { marginLeft: "17%" }
                }}
                style={{ marginBottom: 0 }}
              >
                <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item
                label="水闸闸孔尺寸(m)"
                name="gatePoreSize"
                labelCol={{
                  style: { marginLeft: "16%" }
                }}
              >
                <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
              </Form.Item>
            </Col>
          </Row>
          <Row style={{ background: "#f0f8fe", padding: '0 10px' }}>
            <Col span={8}>
              <Form.Item
                label="水闸工作闸门数量(个)"
                name="gateWorkNum"
                style={{ marginBottom: 0 }}
                labelCol={{
                  style: { marginLeft: "0%" }
                }}
              >
                <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item
                label="水闸事故闸门数量(个)"
                name="gateAccNum"
                labelCol={{
                  style: { marginLeft: "11%" }
                }}
                style={{ marginBottom: 0 }}
              >
                <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item
                label="水闸闸室长度(m)"
                name="gateRoomLen"
                labelCol={{
                  style: { marginLeft: "16%" }
                }}
              >
                <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
              </Form.Item>
            </Col>
          </Row>
          <Row style={{ background: "#f0f8fe", padding: '0 10px' }}>
            <Col span={8}>
              <Form.Item
                label="荆江大堤堤防级别(级)"
                name="dikeLevel"
                style={{ marginBottom: 0 }}
                labelCol={{
                  style: { marginLeft: "0%" }
                }}
              >
                <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item
                label="荆江大堤堤顶宽度(m)"
                name="dikeTopWidth"
                labelCol={{
                  style: { marginLeft: "11%" }
                }}
                style={{ marginBottom: 0 }}
              >
                <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item
                label="穿堤箱涵长度(m)"
                name="dikeBoxLen"
                labelCol={{
                  style: { marginLeft: "16%" }
                }}
              >
                <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
              </Form.Item>
            </Col>
          </Row>
          <Row style={{ background: "#f0f8fe", padding: '0 10px' }}>
            <Col span={8}>
              <Form.Item
                label="箱涵尺寸"
                name="dikeBoxSize"
                style={{ marginBottom: 0 }}
                labelCol={{
                  style: { marginLeft: "15%" }
                }}
              >
                <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item
                label="消能方式"
                name="elimMethod"
                labelCol={{
                  style: { marginLeft: "26%" }
                }}
                style={{ marginBottom: 0 }}
              >
                <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item
                label="消力池长度(m)"
                name="dissPoolLen"
                labelCol={{
                  style: { marginLeft: "19%" }
                }}
              >
                <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
              </Form.Item>
            </Col>
          </Row>
          <Row style={{ background: "#f0f8fe", padding: '0 10px' }}>
            <Col span={8}>
              <Form.Item
                label="出口海漫长度(m)"
                name="exportSeaLen"
                style={{ marginBottom: 0 }}
                labelCol={{
                  style: { marginLeft: "5%" }
                }}
              >
                <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </div>
    </div>

  )
}