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

92 lines
3.2 KiB
JavaScript

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(1)
const [data,setData] = useState([])
console.log('data',data);
useEffect(()=>{
dispatch.map.setLayerVisible({ ShuiKuLayer: true })
dispatch.map.setLayerVisible({ HdswLayer: false })
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.stcd==="61610700"),...data.filter(o=>o.stcd==="10818")]
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.stcd==="61610700"),...list.filter(o=>o.stcd==="10818")]
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:'100%'}} 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