132 lines
6.6 KiB
JavaScript
132 lines
6.6 KiB
JavaScript
import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react';
|
||
import { Table, Modal, message } from 'antd';
|
||
import { QuestionCircleOutlined, 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.szList)
|
||
if(code!==200){
|
||
return
|
||
}
|
||
setTableData(data)
|
||
console.log('list',data)
|
||
}
|
||
|
||
useEffect(()=>{
|
||
getData()
|
||
},[])
|
||
|
||
|
||
|
||
return (
|
||
<>
|
||
<div className="home_shuizhi">
|
||
<div className='home_shuizhi_title1'>水质最后采集时间：{tableData?.tm?moment(tableData.tm).format('YYYY-MM-DD HH:mm'):'-'}</div>
|
||
<div className='home_shuizhi_title2'>
|
||
<div className='lf'>水质类别</div>
|
||
<div className='rf'>{tableData?.level}<QuestionCircleOutlined className='icon'onClick={()=>setOpen(true)}/></div>
|
||
</div>
|
||
<div className='home_shuizhi_item'>
|
||
<div className='home_shuizhi_item_box1'>水温(℃)</div>
|
||
<div className='home_shuizhi_item_box2'>{tableData?.temp}</div>
|
||
<div className='home_shuizhi_item_box3'>{tableData?.tempLevel}</div>
|
||
<div className='home_shuizhi_item_box4'>{tableData?.tempStandard}</div>
|
||
</div>
|
||
<div className='home_shuizhi_item'>
|
||
<div className='home_shuizhi_item_box1'>PH</div>
|
||
<div className='home_shuizhi_item_box2'>{tableData?.ph}</div>
|
||
<div className='home_shuizhi_item_box3'>{tableData?.phLevel}</div>
|
||
<div className='home_shuizhi_item_box4'>{tableData?.phStandard}</div>
|
||
</div>
|
||
<div className='home_shuizhi_item'>
|
||
<div className='home_shuizhi_item_box1'>溶解氧(mg/L)</div>
|
||
<div className='home_shuizhi_item_box2'>{tableData?.bod}</div>
|
||
<div className='home_shuizhi_item_box3'>{tableData?.bodLevel}</div>
|
||
<div className='home_shuizhi_item_box4'>{tableData?.bodStandard}</div>
|
||
</div>
|
||
<div className='home_shuizhi_item'>
|
||
<div className='home_shuizhi_item_box1'>浊度(NTU)</div>
|
||
<div className='home_shuizhi_item_box2'>{tableData?.turb}</div>
|
||
<div className='home_shuizhi_item_box3'>{tableData?.turbLevel}</div>
|
||
<div className='home_shuizhi_item_box4'>{tableData?.turbStandard}</div>
|
||
</div>
|
||
<div className='home_shuizhi_item'>
|
||
<div className='home_shuizhi_item_box1'>电导率(μs/cm)</div>
|
||
<div className='home_shuizhi_item_box2'>{tableData?.cond}</div>
|
||
<div className='home_shuizhi_item_box3'>{tableData?.condLevel}</div>
|
||
<div className='home_shuizhi_item_box4'>{tableData?.condStandard}</div>
|
||
</div>
|
||
<div className='home_shuizhi_item'>
|
||
<div className='home_shuizhi_item_box1'>高锰酸盐(mg/L)</div>
|
||
<div className='home_shuizhi_item_box2'>{tableData?.codmn}</div>
|
||
<div className='home_shuizhi_item_box3'>{tableData?.codmnLevel}</div>
|
||
<div className='home_shuizhi_item_box4'>{tableData?.codmnStandard}</div>
|
||
</div>
|
||
<div className='home_shuizhi_item'>
|
||
<div className='home_shuizhi_item_box1'>氨氮(mg/L)</div>
|
||
<div className='home_shuizhi_item_box2'>{tableData?.nh3n}</div>
|
||
<div className='home_shuizhi_item_box3'>{tableData?.nh3nLevel}</div>
|
||
<div className='home_shuizhi_item_box4'>{tableData?.nh3nStandard}</div>
|
||
</div>
|
||
<div className='home_shuizhi_item'>
|
||
<div className='home_shuizhi_item_box1'>总磷(mg/L)</div>
|
||
<div className='home_shuizhi_item_box2'>{tableData?.tp}</div>
|
||
<div className='home_shuizhi_item_box3'>{tableData?.tpLevel}</div>
|
||
<div className='home_shuizhi_item_box4'>{tableData?.tpStandard}</div>
|
||
</div><div className='home_shuizhi_item'>
|
||
<div className='home_shuizhi_item_box1'>总氮(mg/L)</div>
|
||
<div className='home_shuizhi_item_box2'>{tableData?.tn}</div>
|
||
<div className='home_shuizhi_item_box3'>{tableData?.tnLevel}</div>
|
||
<div className='home_shuizhi_item_box4'>{tableData?.tnStandard}</div>
|
||
</div><div className='home_shuizhi_item'>
|
||
<div className='home_shuizhi_item_box1'>叶绿素(ug/L)</div>
|
||
<div className='home_shuizhi_item_box2'>{tableData?.chla}</div>
|
||
<div className='home_shuizhi_item_box3'>{tableData?.chlaLevel}</div>
|
||
<div className='home_shuizhi_item_box4'>{tableData?.chlaStandard}</div>
|
||
</div>
|
||
|
||
<Modal
|
||
footer={null}
|
||
width={1000}
|
||
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>
|
||
<div style={{padding:'10px 60px 60px 60px'}}>
|
||
<h4>标准文件：<a href='http://local.gunshiiot.com:18083/tsg/GB3838-2002地表水环境质量标准.pdf' target="_blank">GB3838-2002地表水环境质量标准.pdf</a></h4>
|
||
<h4>本系统根据以下水质检测项目进行判断：</h4>
|
||
<img width={'100%'} src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/shuizhi2.png`} alt="" />
|
||
</div>
|
||
</div>
|
||
</Modal>
|
||
|
||
</div>
|
||
</>
|
||
)
|
||
}
|
||
|
||
export default Page
|