tsg-web/src/views/Home/homePanelsLayoutPage/item_yujing/index.js

import { useEffect, useState } from "react"
import { Button, Modal, message } from 'antd';
import {CloseOutlined} from "@ant-design/icons";
import { httppost2 } from "../../../../utils/request";
import apiurl from "../../../../service/apiurl";
import moment from "moment";
import Table_qx from './table_qx'
import Table_wy from './table_wy'
import Table_sl from './table_sl'
import Table_sy from './table_sy'
import Table_AI from './table_AI'



const Page = ({mySetTms}) => {
    const [ dataObj, setDataObj ] = useState({})
    console.log(dataObj)
    const [ open, setOpen ] = useState(false)
    const [ key , setkey ] = useState('')
    const [ tms , setTms ] = useState([
        moment().add(-1,'days').format('YYYY-MM-DD HH:mm:ss'),
        moment().format('YYYY-MM-DD HH:mm:ss'),
    ])

    useEffect(()=>{
        (async()=>{
            const params = {
                start:tms[0],
                end:tms[1]
            }
            const { code, data } = await httppost2(apiurl.home.yj_qxyj,params)
            if(code!==200){
                message.error('请求失败')
                return
            }
            mySetTms([
                moment(tms[0]),
                moment(tms[1])
            ]) 
            setDataObj(data)
        })()
    },[])
  

    return (
        <div className="yujing">
            <div className="title">
                预警时间：{tms[0]?.slice(0,16)} 至 {tms[1]?.slice(0,16)}
            </div>
            <div className="bodyBox">
                <div className="bodyBoxItem">
                    <div className="num sw">
                        <div style={{fontSize:'18px'}}>{dataObj.rzWarn?.split('(')[0]}</div>
                        {
                            dataObj.rzWarn!=='-'?
                            <div style={{fontSize:'14px',marginTop:'-7px'}}>({dataObj.rzWarn?.split('(')[1]?.split(')')[0]})</div>
                            :null
                        }
                    
                    </div>
                    <div className="content">超汛限告警</div>
                    <div></div>
                </div>
                <div className="bodyBoxItem" onClick={()=>{setOpen(true);setkey('气象预警')}}>
                    <div className="num">{dataObj.qxWarn?.length||0}</div>
                    <div className="content">气象预警</div>
                </div>
                <div className="bodyBoxItem" onClick={()=>{setOpen(true);setkey('位移告警')}}>
                    <div className="num">{dataObj.shiftWarn?.length||0}</div>
                    <div className="content">位移告警</div>
                    <div></div>
                </div>
                <div className="bodyBoxItem" onClick={()=>{setOpen(true);setkey('渗压告警')}}>
                    <div className="num">{dataObj.pressWarn?.length||0}</div>
                    <div className="content">渗压告警</div>
                    <div></div>
                </div>
                <div className="bodyBoxItem" onClick={()=>{setOpen(true);setkey('渗流告警')}}>
                    <div className="num">{dataObj.flowWarn?.length||0}</div>
                    <div className="content">渗流告警</div>
                    <div></div>
                </div>
                <div className="bodyBoxItem" onClick={()=>{setOpen(true);setkey('AI告警')}}>
                    <div className="num">{dataObj.aiWarnCount}</div>
                    <div className="content">AI告警</div>
                    <div></div>
                </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>
                        {key}
                        <div className="normalModalStyle_title_cancel">
                            <CloseOutlined onClick={()=>setOpen(false)} style={{color:"#333"}}/>
                        </div>
                    </div>
                    { key==='气象预警'?<Table_qx data={dataObj.qxWarn} onCancel={()=>setOpen(false)}/>:null }
                    { key==='位移告警'?<Table_wy data={dataObj.shiftWarn} onCancel={()=>setOpen(false)}/>:null }
                    { key==='渗压告警'?<Table_sy data={dataObj.pressWarn} onCancel={()=>setOpen(false)}/>:null }
                    { key==='渗流告警'?<Table_sl data={dataObj.flowWarn} onCancel={()=>setOpen(false)}/>:null }
                    { key==='AI告警'?<Table_AI/>:null }
                </div>
            </Modal>
        </div>
    )
}

export default Page