141 lines
4.9 KiB
JavaScript
141 lines
4.9 KiB
JavaScript
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
|