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 sj = {
  "stcd": "61610701",
  "stnm": "檀树岗2",
  "rvnm": "檀树岗河",
  "hnnm": "长江中游下段北岸",
  "bsnm": "长江",
  "lgtd": "114.744317000",
  "lttd": "31.505000000",
  "stlc": "黄冈市红安县七里镇檀树岗村",
  "alt": null,
  "mdbz": null,
  "mdpr": null,
  "dtmnm": "吴淞",
  "dtmel": null,
  "dtpr": "0.000",
  "sttp": "RR",
  "dfrtms": null,
  "fritm": null,
  "frgrd": "3",
  "esstym": "197103",
  "bgfrym": "197103",
  "edfrym": null,
  "atcunit": "黄冈市水利和湖泊局",
  "admauth": "黄冈水文",
  "locality": "湖北水文",
  "stbk": null,
  "stazt": null,
  "dstrvm": null,
  "drna": "78",
  "phcd": "TSG",
  "usfl": "1",
  "comments": "中小河流改造",
  "moditime": "2022-02-23 00:00:00",
  "remGd": null,
  "ogid": null,
  "vlfl": null,
  "atid": null,
  "sdfl": null,
  "rma": null,
  "mdps": null,
  "mddt": null,
  "stindex": null,
  "starea": null,
  "stlevel": null,
  "code": null,
  "ispbj": null,
  "issxst": null,
  "stpq": null,
  "sthday": null,
  "source": "SW",
  "importancy": 0,
  "clgtd": "114.744317000",
  "clttd": "31.505000000",
  "elev": null,
  "crucial": 0,
  "buildYear": null,
  "adcd": null,
  "lyid": null,
  "resCode": "42120250085",
  "rvCode": null,
  "status": 1,
  "agreement": null,
  "simCard": null,
  "bdCard": null,
  "v": 104.1
}

const Page = () => {
    const dispatch = useDispatch();
    const [ checked, setChecked ] = useState(0)
    const [data,setData] = useState([])
    console.log('aaa',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 data1 = await reservoirlist(params)
        setData(data1)
      }

    const getShuiKu = ()=>{
      SkRealPromiseWX.get().then((res) => {
        const list = [...res,sj].map((i)=>{
          return {
            id : i.stcd,
            name: i.stnm,
            ...i
          }
        })
        const data = list[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