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

import { useEffect, useState } from "react"
import {useDispatch, useSelector} from "react-redux";
import { httppost, httppost2 } from "../../../utils/request";
import apiurl from "../../../service/apiurl";


const Page = () => {
    const dispatch = useDispatch();
    const [data1,setData1] = useState({})//放水=生态=QQ
    const [data2,setData2] = useState({})//输水=生活=PQ
    console.log(1111,data1,data2);

    useEffect(()=>{
        dispatch.map.setLayerVisible({ GongShuiLayer: true })
        getData1()
        return ()=>{
            dispatch.map.setLayerVisible({ GongShuiLayer: false })
        }
    },[])

    const getData1 = async()=>{
        const { code, data } = await httppost2(apiurl.home.getGsList)
        if(code!==200){
            return
        }
        data?.map((item,index)=>{
            if(index<2){
                if(item.sttp==='QQ'){
                    setData1({...item})
                }else{
                    setData2({...item})
                }
            }
        })
    }


  

    return (
        <>
            <div className="home_gongshui">
                <div className="home_gongshui_item">
                    <div className="home_gongshui_item_title">
                        <img width={50} src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/gongshui2.png`} alt=""/>
                        生态供水
                    </div>
                    <div className="home_gongshui_item_text" style={{display:'flex',flexDirection:'column'}}>
                        <div style={{display:'flex'}}>
                            <div className="lf2">实时流量: </div>
                            <div className="rf2">{data1.q}</div>
                        </div>
                        <div style={{marginBottom:'10px', display:'flex'}}>
                            <div className="lf2" style={{color:'#70B603'}}>{data1?.resMonthEcoFlow?.month||'-'}月核定流量: </div>
                            <div className="rf2" style={{color:'#70B603'}}>{data1?.resMonthEcoFlow?.value}</div>
                        </div>
                    </div>
                    <div className="home_gongshui_item_text">
                        <div className="lf">采集时间: </div>
                        <div className="rf">{data1.tm}</div>
                    </div>
                    <div className="home_gongshui_item_text">
                        <div className="lf">今日水量: </div>
                        <div className="rf">{data1.v}</div>
                    </div>
                </div>
                <div className="home_gongshui_item">
                    <div className="home_gongshui_item_title">
                        <img width={50} src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/gongshui1.png`} alt=""/>
                        生活供水
                    </div>
                    <div className="home_gongshui_item_text" style={{display:'flex',flexDirection:'column'}}>
                        <div style={{display:'flex'}}>
                            <div className="lf2">实时流量: </div>
                            <div className="rf2">{data2.q}</div>
                        </div>
                        <div style={{marginBottom:'10px', display:'flex'}}>
                            <div className="lf2" style={{color:'#70B603'}}></div>
                            <div className="rf2" style={{color:'#70B603'}}></div>
                        </div>
                    </div>
                    <div className="home_gongshui_item_text">
                        <div className="lf">采集时间: </div>
                        <div className="rf">{data2.tm}</div>
                    </div>
                    <div className="home_gongshui_item_text">
                        <div className="lf">今日水量: </div>
                        <div className="rf">{data2.v}</div>
                    </div>
                </div>
            </div>
        </>
    )
}

export default Page