tsg-web/src/views/Home/homePanelsLayoutPage/item_gongchengshuiku.js

import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react';
import { Table, Modal, message } from 'antd';
import {CloseOutlined} from "@ant-design/icons";
import usePageTable from '../../../components/crud/usePageTable2'
import { createCrudService } from '../../../components/crud/_';
import { httppost2 } from '../../../utils/request';
import apiurl from '../../../service/apiurl';
import SetDrpStation from '../setMapStation/drp.js'
import moment from 'moment';



const Page = () => {
    const [ tableData, setTableData ] = useState([])//在线
    const [ open, setOpen ] = useState(false)
    const getData = async(val)=>{
        const { code, data} = await httppost2(apiurl.home.skjbxx)
        if(code!==200){
            return
        }
        setTableData(data[0])
    }

    useEffect(()=>{
        getData()
    },[])


    const getNum = (v)=>{
        const num = +v
        if(Number.isFinite(num)){
            return num.toFixed(2)
        }
    }
  

    return (
        <>
        <div className="home_shuizhi">
            <dit className='home_shuizhi_item2'>
                <div>工程位置:</div>
                <div>{tableData.resLoc}</div>
            </dit>
            <dit className='home_shuizhi_item2'>
                <div>水库规模:</div>
                <div>{
                    {
                        1:'大 (1)型',
                        2:'大 (2)型',
                        3:'中型',
                        4:'小 (1)型',
                        5:'小 (2)型',
                        9:'其他',
                    }[tableData.engScal]
                    }</div>
            </dit>
            <dit className='home_shuizhi_item2'>
                <div>主要功能:</div>
                <div>{tableData.rsvFunction}</div>
            </dit>
            <dit className='home_shuizhi_item2'>
                <div>坝址以上流域面积(km²):</div>
                <div>{getNum(tableData.watShedArea)}</div>
            </dit>
            <dit className='home_shuizhi_item2'>
                <div>总库容(万m³):</div>
                <div>{getNum(tableData.totCap)}</div>
            </dit>
            <dit className='home_shuizhi_item2'>
                <div>校核洪水位(m):</div>
                <div>{getNum(tableData.calFloodLev)}</div>
            </dit>
            <dit className='home_shuizhi_item2'>
                <div>设计洪水位(m):</div>
                <div>{getNum(tableData.desFloodLev)}</div>
            </dit>
            <dit className='home_shuizhi_item2'>
                <div>正常蓄水位(m):</div>
                <div>{getNum(tableData.normWatLev)}</div>
            </dit>
            <dit className='home_shuizhi_item2'>
                <div>汛限水位(m):</div>
                <div>{getNum(tableData.flLowLimLev)}</div>
            </dit>
            <dit className='home_shuizhi_item2'>
                <div>死水位(m):</div>
                <div>{getNum(tableData.deadLev)}</div>
            </dit>
            <dit className='home_shuizhi_item2'>
                <div>兴利库容(万m³):</div>
                <div>{getNum(tableData.benResCap)}</div>
            </dit>
            <dit className='home_shuizhi_item2'>
                <div>死库容(万m³):</div>
                <div>{getNum(tableData.deadCap)}</div>
            </dit>
            <dit className='home_shuizhi_item2'>
                <div>工程特性表:</div>
                <div style={{color:'#007AFDB3',cursor:'pointer'}} onClick={()=>setOpen(true)}>工程特性表详情</div>
            </dit>
            {/* <div style={{width:'100%',color:'#007AFDB3',fontWeight:500,cursor:'pointer',marginTop:'10px',textAlign:'center'}}>更多详情</div> */}
        </div>


        <Modal 
            footer={null} 
            width={1200}
            bodyStyle={{
                padding:0,
            }}
            closable={false}
            destroyOnClose={true}
            open={open} 
            onCancel={()=>setOpen(false)}
            wrapClassName='home_modal'
        >
            <div className="normalModalStyle">
                <div className="normalModalStyle_title">
                    <div className="normalModalStyle_title_icon"></div>
                    {'工程特性表'}
                    <div className="normalModalStyle_title_cancel">
                        <CloseOutlined onClick={()=>setOpen(false)} style={{color:"#333"}}/>
                    </div>
                </div>
                <iframe
                    style={{
                        height: '70vh',
                        width: '100%',
                        border: 0,
                        marginTop: 0,
                    }}
                    src={`${process.env.PUBLIC_URL}/static/pdf/web/viewer.html?file=${encodeURIComponent(`http://local.gunshiiot.com:18083/xyt/data.pdf`)}`}
                />
            </div>
        </Modal>
        </>
    )
}

export default Page