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

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>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