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

import { useEffect, useState } from "react"
import {useDispatch, useSelector} from "react-redux";
import {reservoirlist, reswarn} from "../../../service/sssq"
import { SkRealPromiseWX } from "../../../models/_/real";
import genDamImage from '../../../components/DamGraph/DamImage'
import MyImg from './myImg'
import Ykqk from './item_shuiku/yhqk'




const Page = () => {
    const dispatch = useDispatch();
    const [ checked, setChecked ] = useState(0)
    const [data,setData] = useState([])
    console.log('data',data);
    useEffect(()=>{
        dispatch.map.setLayerVisible({ ShuiKuLayer: true })
        dispatch.map.setLayerVisible({ HdswLayer: true })
        getData()
        return ()=>{
            dispatch.map.setLayerVisible({ ShuiKuLayer: false })
            dispatch.map.setLayerVisible({ HdswLayer: false })
        }
    },[])

    const getData = async (params) => {
      const data = await reservoirlist(params) || []
      // const list = [...data.filter(o=>o.stnm==='檀树岗(新)'),...data.filter(o=>o.stnm!=='檀树岗(新)')]
      const list = [...data.filter(o=>o.stnm==='檀树岗'),...data.filter(o=>o.stnm==='檀树岗(新)')]
        setData(list)
      }

  const getShuiKu = () => {
      SkRealPromiseWX.get().then((res) => {
        const list = [...res].map((i)=>{
          return {
            id : i.stcd,
            name: i.stnm,
            ...i
          }
        })
        // const list2 = [...list.filter(o=>o.stnm==='檀树岗(新)'),...list.filter(o=>o.stnm!=='檀树岗(新)')]
        const list2 = [...list.filter(o=>o.stnm==='檀树岗'),...list.filter(o=>o.stnm==='檀树岗(新)')]
        console.log('res',list2);
        const data = list2[checked]
        dispatch.runtime.setFeaturePop({
          id: data.id,
          type: 'shuiku',
          data,
          lgtd: data.lgtd,
          lttd: data.lttd,
          elev: data.elev,
        })
      });
    }

    
  

    return (
        <>
          <div className="home_yuqing">
              <div className="home_yuqing_header" style={{marginBottom:'10px'}}>
                  {
                      data.map((item,index)=>
                          <div style={{width:'50%'}}><div style={{width:'90%'}}  className={checked===index?'home_yuqing_header_item avtive':'home_yuqing_header_item'} onClick={()=>setChecked(index)}>{item.stnm}</div></div>
                      )
                  }
              </div>
              {
                data ? (
                  <MyImg record={{...data[checked]}}/>
                ) : (
                  <div className="noPic">暂无数据</div>
                )
              }
              <div style={{position:'absolute',right:'14px',top:'15px',color:'#409EFF',cursor:'pointer',fontWeight:'500'}} onClick={getShuiKu}>详情</div>
          </div>
          <div className='homePage_head2' style={{marginTop:'10px'}}>
              <div className='homePage_head2_Bg'>
                  <img src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/titleBg2.png`} width="14" height="14" alt="" style={{margin:'0 10px'}} />
                  溢洪情况
              </div>
          </div>
          <Ykqk record={{...data[checked]}}/>
        </>
    )
}

export default Page