322 lines
11 KiB
JavaScript
322 lines
11 KiB
JavaScript
import React, { useMemo, useState } from 'react';
|
|
import { Switch, FormControlLabel,InputLabel, Select, MenuItem,FormControl } from '@material-ui/core/index'
|
|
import PanelBox from '../../components/PanelBox';
|
|
import config from '../../../../config';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import AreaDrpChart from './chart';
|
|
import clsx from 'clsx';
|
|
|
|
|
|
|
|
function DrpReal({ style }) {
|
|
const [tab,setTab] = useState('生态')
|
|
const dispatch = useDispatch();
|
|
const data = [
|
|
{
|
|
"stcd": "61614200",
|
|
"type": "sk",
|
|
"hasRz": true,
|
|
"stnm": "浮桥河水库",
|
|
"adcd": "421181100000",
|
|
"wscd": null,
|
|
"importancy": 0,
|
|
"lgtd": 114.875,
|
|
"lttd": 31.166667,
|
|
"elev": 0,
|
|
"damel": 71.33,
|
|
"dsflz": 68.04,
|
|
"fsltdz": 64.89,
|
|
"ddz": 51.78,
|
|
"zcxsw": 64.89,
|
|
"drpTm": "2025-06-03T02:00:00.000Z",
|
|
"today": 0,
|
|
"h1": 0,
|
|
"h3": 0,
|
|
"h6": 0,
|
|
"h12": 0,
|
|
"h24": 0,
|
|
"h48": 16.5,
|
|
"drpState": 1,
|
|
"rz": 60.71,
|
|
"w": 162.8,
|
|
"a_fsltdz": -4.18,
|
|
"rzTm": "2025-06-03T02:00:00.000Z",
|
|
"rzWarning": 0,
|
|
"rzState": 1,
|
|
"aRz": -4.18
|
|
},{
|
|
"stcd": "61612610",
|
|
"type": "sk",
|
|
"hasRz": true,
|
|
"stnm": "三河口水库",
|
|
"adcd": "421181109000",
|
|
"wscd": null,
|
|
"importancy": 0,
|
|
"lgtd": 115.166667,
|
|
"lttd": 31.333333,
|
|
"elev": 0,
|
|
"damel": 156.8,
|
|
"dsflz": 154.99,
|
|
"fsltdz": 149,
|
|
"ddz": 124,
|
|
"zcxsw": 149,
|
|
"drpTm": "2025-06-03T02:00:00.000Z",
|
|
"today": 0,
|
|
"h1": 0,
|
|
"h3": 0,
|
|
"h6": 0,
|
|
"h12": 0,
|
|
"h24": 0,
|
|
"h48": 12.5,
|
|
"drpState": 1,
|
|
"rz": 141.45,
|
|
"w": 77.8,
|
|
"a_fsltdz": -7.550000000000011,
|
|
"rzTm": "2025-06-03T01:00:00.000Z",
|
|
"rzWarning": 0,
|
|
"rzState": 1,
|
|
"aRz": -7.55
|
|
},{
|
|
"stcd": "61613010",
|
|
"type": "sk",
|
|
"hasRz": true,
|
|
"stnm": "明山水库",
|
|
"adcd": "421181103000",
|
|
"wscd": null,
|
|
"importancy": 0,
|
|
"lgtd": 115.066667,
|
|
"lttd": 31.016667,
|
|
"elev": 0,
|
|
"damel": 98.7,
|
|
"dsflz": 96.07,
|
|
"fsltdz": 93,
|
|
"ddz": 78.02,
|
|
"zcxsw": 93,
|
|
"drpTm": "2025-06-03T02:00:00.000Z",
|
|
"today": 0,
|
|
"h1": 0,
|
|
"h3": 0,
|
|
"h6": 0,
|
|
"h12": 0,
|
|
"h24": 0,
|
|
"h48": 12.5,
|
|
"drpState": 1,
|
|
"rz": 84.43,
|
|
"w": 49.5,
|
|
"a_fsltdz": -8.569999999999993,
|
|
"rzTm": "2025-06-03T02:00:00.000Z",
|
|
"rzWarning": 0,
|
|
"rzState": 1,
|
|
"aRz": -8.57
|
|
},{
|
|
"stcd": "716113901",
|
|
"type": "sk",
|
|
"hasRz": true,
|
|
"stnm": "铺头坳水库",
|
|
"adcd": "421181201000",
|
|
"wscd": null,
|
|
"importancy": 0,
|
|
"lgtd": 115.169444,
|
|
"lttd": 31.090278,
|
|
"elev": 0,
|
|
"damel": 266.7,
|
|
"dsflz": 265.54,
|
|
"fsltdz": 264.3,
|
|
"ddz": 256,
|
|
"zcxsw": 264.3,
|
|
"drpTm": "2025-04-11T05:00:00.000Z",
|
|
"today": 0,
|
|
"h1": 0,
|
|
"h3": 0,
|
|
"h6": 0,
|
|
"h12": 0,
|
|
"h24": 0,
|
|
"h48": 0,
|
|
"drpState": 2,
|
|
"rz": 263.16,
|
|
"w": 0.991,
|
|
"a_fsltdz": -1.1399999999999864,
|
|
"rzTm": "2025-04-11T05:00:00.000Z",
|
|
"rzWarning": 0,
|
|
"rzState": 2,
|
|
"pic": [
|
|
{
|
|
"stcd": "716113901",
|
|
"tm": "2023-03-12T08:02:00.000Z",
|
|
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716113901/20230312160200.jpg"
|
|
},
|
|
{
|
|
"stcd": "716113901",
|
|
"tm": "2023-03-12T07:15:00.000Z",
|
|
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716113902/20230312151500.jpg"
|
|
}
|
|
],
|
|
"aRz": -1.14
|
|
},{
|
|
"stcd": "716111701",
|
|
"type": "sk",
|
|
"hasRz": true,
|
|
"stnm": "桐枧冲水库",
|
|
"adcd": "421181110000",
|
|
"wscd": null,
|
|
"importancy": 0,
|
|
"lgtd": 115.135278,
|
|
"lttd": 31.3925,
|
|
"elev": 0,
|
|
"damel": 276.56,
|
|
"dsflz": 273.66,
|
|
"fsltdz": 269.86,
|
|
"ddz": 256.76,
|
|
"zcxsw": 269.86,
|
|
"drpTm": "2025-04-11T05:00:00.000Z",
|
|
"today": 0,
|
|
"h1": 0,
|
|
"h3": 0,
|
|
"h6": 0,
|
|
"h12": 0,
|
|
"h24": 0,
|
|
"h48": 0,
|
|
"drpState": 2,
|
|
"rz": 265.12,
|
|
"w": 0.689,
|
|
"a_fsltdz": -4.740000000000009,
|
|
"rzTm": "2025-04-11T05:00:00.000Z",
|
|
"rzWarning": 0,
|
|
"rzState": 2,
|
|
"pic": [
|
|
{
|
|
"stcd": "716111701",
|
|
"tm": "2023-03-12T07:03:00.000Z",
|
|
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716111701/20230312150300.jpg"
|
|
},
|
|
{
|
|
"stcd": "716111701",
|
|
"tm": "2023-03-12T07:27:00.000Z",
|
|
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716111702/20230312152700.jpg"
|
|
}
|
|
],
|
|
"aRz": -4.74
|
|
},
|
|
]
|
|
|
|
return (
|
|
<PanelBox
|
|
style={style}
|
|
title="水资源利用"
|
|
color="green"
|
|
extra={
|
|
<>
|
|
<span className="button-group">
|
|
<span className={clsx({ active: tab==='生态' })} onClick={() => {
|
|
// dispatch.map.setLayerVisible({'BxjcLayer':true});
|
|
// dispatch.map.setLayerVisible({'SyjcLayer':false});
|
|
// dispatch.map.setLayerVisible({'SljcLayer':false});
|
|
// dispatch.map.setLayerVisible({'ByjcLayer':false});
|
|
setTab('生态')
|
|
}}>生态</span>
|
|
<span className={clsx({ active: tab==='灌溉发电' })} onClick={() => {
|
|
// dispatch.map.setLayerVisible({'BxjcLayer':false});
|
|
// dispatch.map.setLayerVisible({'SyjcLayer':true});
|
|
// dispatch.map.setLayerVisible({'SljcLayer':false});
|
|
// dispatch.map.setLayerVisible({'ByjcLayer':false});
|
|
setTab('灌溉发电')
|
|
}}>灌溉发电</span>
|
|
{/* <span className={clsx({ active: tab==='发电' })} onClick={() => {
|
|
// dispatch.map.setLayerVisible({'BxjcLayer':false});
|
|
// dispatch.map.setLayerVisible({'SyjcLayer':false});
|
|
// dispatch.map.setLayerVisible({'SljcLayer':true});
|
|
// dispatch.map.setLayerVisible({'ByjcLayer':false});
|
|
setTab('发电')
|
|
}}>发电</span> */}
|
|
<span className={clsx({ active: tab==='泄洪' })} onClick={() => {
|
|
// dispatch.map.setLayerVisible({'BxjcLayer':false});
|
|
// dispatch.map.setLayerVisible({'SyjcLayer':false});
|
|
// dispatch.map.setLayerVisible({'SljcLayer':false});
|
|
// dispatch.map.setLayerVisible({'ByjcLayer':true});
|
|
setTab('泄洪')
|
|
}}>泄洪</span>
|
|
</span>
|
|
</>
|
|
}
|
|
>
|
|
{
|
|
tab==='生态'?
|
|
<div style={{width:"100%",display:'flex',fontSize:'12px',justifyContent:'space-around',padding:'0.5rem 0'}}>
|
|
<div style={{width:'8rem',padding:'0.5rem 0.5rem',background:'#2a5278',display:'flex',flexDirection:'column',justifyContent:'flex-start',alignItems:'center',color:"#ffffff"}}>
|
|
<div><span style={{color:'#76b1d4',fontSize:'22px'}}>15.26</span> m³/s</div>
|
|
<div style={{textAlign:'center'}}>生态流量站(2025-06-02 09:00)</div>
|
|
</div>
|
|
<div style={{width:'8rem',padding:'0.5rem 0.5rem',background:'#2a5278',display:'flex',flexDirection:'column',justifyContent:'flex-start',alignItems:'center',color:"#ffffff"}}>
|
|
<div><span style={{color:'#76b1d4',fontSize:'22px'}}>371.12</span> 万m³</div>
|
|
<div style={{marginTop:'5px'}}>月供水量</div>
|
|
</div>
|
|
<div style={{width:'8rem',padding:'0.5rem 0.5rem',background:'#2a5278',display:'flex',flexDirection:'column',justifyContent:'flex-start',alignItems:'center',color:"#ffffff"}}>
|
|
<div><span style={{color:'#76b1d4',fontSize:'22px'}}>641.12</span> 万m³</div>
|
|
<div style={{marginTop:'5px'}}>年供水量</div>
|
|
</div>
|
|
</div>
|
|
:null
|
|
}
|
|
{
|
|
tab==='灌溉'?
|
|
<div style={{width:"100%",display:'flex',fontSize:'12px',justifyContent:'space-around',padding:'0.5rem 0'}}>
|
|
<div style={{width:'8rem',padding:'0.5rem 0.5rem',background:'#2a5278',display:'flex',flexDirection:'column',justifyContent:'flex-start',alignItems:'center',color:"#ffffff"}}>
|
|
<div><span style={{color:'#76b1d4',fontSize:'22px'}}>12.53</span> m³/s</div>
|
|
<div style={{textAlign:'center'}}>灌溉流量站(2025-06-02 09:00)</div>
|
|
</div>
|
|
<div style={{width:'8rem',padding:'0.5rem 0.5rem',background:'#2a5278',display:'flex',flexDirection:'column',justifyContent:'flex-start',alignItems:'center',color:"#ffffff"}}>
|
|
<div><span style={{color:'#76b1d4',fontSize:'22px'}}>364.21</span> 万m³</div>
|
|
<div style={{marginTop:'5px'}}>月供水量</div>
|
|
</div>
|
|
<div style={{width:'8rem',padding:'0.5rem 0.5rem',background:'#2a5278',display:'flex',flexDirection:'column',justifyContent:'flex-start',alignItems:'center',color:"#ffffff"}}>
|
|
<div><span style={{color:'#76b1d4',fontSize:'22px'}}>427.48</span> 万m³</div>
|
|
<div style={{marginTop:'5px'}}>年供水量</div>
|
|
</div>
|
|
</div>
|
|
:null
|
|
}
|
|
{
|
|
tab==='灌溉发电'?
|
|
<div style={{width:"100%",display:'flex',fontSize:'12px',justifyContent:'space-around',padding:'0.5rem 0'}}>
|
|
<div style={{width:'8rem',padding:'0.5rem 0.5rem',background:'#2a5278',display:'flex',flexDirection:'column',justifyContent:'flex-start',alignItems:'center',color:"#ffffff"}}>
|
|
<div><span style={{color:'#76b1d4',fontSize:'22px'}}>2.41</span> m³/s</div>
|
|
<div style={{textAlign:'center'}}>发电流量站(2025-06-02 09:00)</div>
|
|
</div>
|
|
<div style={{width:'8rem',padding:'0.5rem 0.5rem',background:'#2a5278',display:'flex',flexDirection:'column',justifyContent:'flex-start',alignItems:'center',color:"#ffffff"}}>
|
|
<div><span style={{color:'#76b1d4',fontSize:'22px'}}>126.12</span> 万m³</div>
|
|
<div style={{marginTop:'5px'}}>月供水量</div>
|
|
</div>
|
|
<div style={{width:'8rem',padding:'0.5rem 0.5rem',background:'#2a5278',display:'flex',flexDirection:'column',justifyContent:'flex-start',alignItems:'center',color:"#ffffff"}}>
|
|
<div><span style={{color:'#76b1d4',fontSize:'22px'}}>425.15</span> 万m³</div>
|
|
<div style={{marginTop:'5px'}}>年供水量</div>
|
|
</div>
|
|
</div>
|
|
:null
|
|
}
|
|
{
|
|
tab==='泄洪'?
|
|
<div style={{width:"100%",display:'flex',fontSize:'12px',justifyContent:'space-around',padding:'0.5rem 0'}}>
|
|
<div style={{width:'8rem',padding:'0.5rem 0.5rem',background:'#2a5278',display:'flex',flexDirection:'column',justifyContent:'flex-start',alignItems:'center',color:"#ffffff"}}>
|
|
<div><span style={{color:'#76b1d4',fontSize:'22px'}}>5.12</span> m³/s</div>
|
|
<div style={{textAlign:'center'}}>泄洪流量站(2025-06-02 09:00)</div>
|
|
</div>
|
|
<div style={{width:'8rem',padding:'0.5rem 0.5rem',background:'#2a5278',display:'flex',flexDirection:'column',justifyContent:'flex-start',alignItems:'center',color:"#ffffff"}}>
|
|
<div><span style={{color:'#76b1d4',fontSize:'22px'}}>211.45</span> 万m³</div>
|
|
<div style={{marginTop:'5px'}}>月供水量</div>
|
|
</div>
|
|
<div style={{width:'8rem',padding:'0.5rem 0.5rem',background:'#2a5278',display:'flex',flexDirection:'column',justifyContent:'flex-start',alignItems:'center',color:"#ffffff"}}>
|
|
<div><span style={{color:'#76b1d4',fontSize:'22px'}}>185.21</span> 万m³</div>
|
|
<div style={{marginTop:'5px'}}>年供水量</div>
|
|
</div>
|
|
</div>
|
|
:null
|
|
}
|
|
<div style={{width:'100%',height:'12rem'}}>
|
|
<AreaDrpChart data={[]} tab={tab} />
|
|
</div>
|
|
</PanelBox>
|
|
)
|
|
}
|
|
|
|
export default DrpReal;
|