199 lines
4.7 KiB
JavaScript
199 lines
4.7 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 { useDispatch, useSelector } from 'react-redux';
|
|
import AreaDrpChart from './chart';
|
|
import config from '../../../../config';
|
|
|
|
|
|
|
|
function DrpReal({ style }) {
|
|
const [dimension, setDimension] =useState('61614460');
|
|
const dispatch = useDispatch();
|
|
const data = [
|
|
{
|
|
"stcd": "61614460",
|
|
"stnm": "项生(宋埠)",
|
|
"adcd": "421181000000000",
|
|
"wscd": null,
|
|
"importancy": 0,
|
|
"lgtd": 114.798056,
|
|
"lttd": 31.058611,
|
|
"elev": null,
|
|
"hasRz": true,
|
|
"wrz": null,
|
|
"wrq": null,
|
|
"grz": null,
|
|
"grq": null,
|
|
"sfz": null,
|
|
"sfq": null,
|
|
"type": "sh",
|
|
"tm": "2025-06-03T02:00:00.000Z",
|
|
"rz": 21.91,
|
|
"trend": 1,
|
|
"state": 1,
|
|
"warning": 0,
|
|
"maxRz": 21.91,
|
|
"maxDate": "2025-06-03T02:00:00.000Z",
|
|
"warndes": null
|
|
},{
|
|
"stcd": "61613700",
|
|
"stnm": "四角门(宋铁二桥)",
|
|
"adcd": "421181000000000",
|
|
"wscd": null,
|
|
"importancy": 0,
|
|
"lgtd": 114.8291,
|
|
"lttd": 31.0754,
|
|
"elev": null,
|
|
"hasRz": true,
|
|
"wrz": null,
|
|
"wrq": null,
|
|
"grz": null,
|
|
"grq": null,
|
|
"sfz": null,
|
|
"sfq": null,
|
|
"type": "sh",
|
|
"tm": "2025-06-03T02:00:00.000Z",
|
|
"rz": 27.57,
|
|
"trend": 0,
|
|
"state": 1,
|
|
"warning": 0,
|
|
"maxRz": 27.57,
|
|
"maxDate": "2025-06-03T01:00:00.000Z",
|
|
"warndes": null
|
|
},{
|
|
"stcd": "61612910",
|
|
"stnm": "桃林河(阎河)",
|
|
"adcd": "421181000000000",
|
|
"wscd": null,
|
|
"importancy": 0,
|
|
"lgtd": 115.087777777,
|
|
"lttd": 31.164444444,
|
|
"elev": null,
|
|
"hasRz": true,
|
|
"wrz": null,
|
|
"wrq": null,
|
|
"grz": null,
|
|
"grq": null,
|
|
"sfz": null,
|
|
"sfq": null,
|
|
"type": "sh",
|
|
"tm": "2025-06-03T02:35:00.000Z",
|
|
"rz": 55.67,
|
|
"trend": 0,
|
|
"state": 1,
|
|
"warning": 0,
|
|
"maxRz": 55.67,
|
|
"maxDate": "2025-06-03T02:00:00.000Z",
|
|
"warndes": null
|
|
},{
|
|
"stcd": "61615110",
|
|
"stnm": "杨梅河(木子店)",
|
|
"adcd": "421181000000000",
|
|
"wscd": null,
|
|
"importancy": 0,
|
|
"lgtd": 115.339667,
|
|
"lttd": 31.1595,
|
|
"elev": null,
|
|
"hasRz": true,
|
|
"wrz": null,
|
|
"wrq": null,
|
|
"grz": null,
|
|
"grq": null,
|
|
"sfz": null,
|
|
"sfq": null,
|
|
"type": "sh",
|
|
"tm": "2025-06-03T02:00:00.000Z",
|
|
"rz": 112.71,
|
|
"trend": 0,
|
|
"state": 1,
|
|
"warning": 0,
|
|
"maxRz": 112.71,
|
|
"maxDate": "2025-06-02T22:00:00.000Z",
|
|
"warndes": null
|
|
},{
|
|
"stcd": "61612150",
|
|
"stnm": "鹰山畈(黄土岗)",
|
|
"adcd": "421181000000000",
|
|
"wscd": null,
|
|
"importancy": 0,
|
|
"lgtd": 115.073611,
|
|
"lttd": 31.386667,
|
|
"elev": null,
|
|
"hasRz": true,
|
|
"wrz": null,
|
|
"wrq": null,
|
|
"grz": null,
|
|
"grq": null,
|
|
"sfz": null,
|
|
"sfq": null,
|
|
"type": "sh",
|
|
"tm": "2025-06-03T02:00:00.000Z",
|
|
"rz": 77.12,
|
|
"trend": 0,
|
|
"state": 1,
|
|
"warning": 0,
|
|
"maxRz": 77.25,
|
|
"maxDate": "2025-06-02T16:00:00.000Z",
|
|
"warndes": null
|
|
},
|
|
]
|
|
|
|
|
|
return (
|
|
<PanelBox
|
|
style={style}
|
|
title="水情"
|
|
color="green"
|
|
extra={
|
|
<>
|
|
{/* <img src='/assets/年下拉3.jpg' style={{width:'100px', height:'30px',marginRight:'10px'}}/> */}
|
|
<div style={{height:'30px',overflow:'hidden'}}>
|
|
<Select
|
|
labelId="analysis-select-label"
|
|
value={dimension}
|
|
label=""
|
|
onChange={(event,b) => {
|
|
const value = event.target.value;
|
|
setDimension(value);
|
|
const record = data.filter(o=>o.stcd===value)[0]
|
|
const { lgtd, lttd } = record;
|
|
if (lgtd && lttd) {
|
|
dispatch.runtime.setFeaturePop({ type: 'RealHDPop', properties: record, coordinates: [lgtd, lttd] });
|
|
dispatch.runtime.setCameraTarget({
|
|
center: [lgtd, lttd + config.poiPositionOffsetY.hd],
|
|
zoom: config.poiPositionZoom.hd,
|
|
pitch: config.poiPitch,
|
|
});
|
|
}
|
|
}}
|
|
// sx={{
|
|
// color: '#fff',
|
|
// '.MuiOutlinedInput-notchedOutline': {
|
|
// borderColor: 'rgba(255, 255, 255, 0.3)',
|
|
// },
|
|
// '&:hover .MuiOutlinedInput-notchedOutline': {
|
|
// borderColor: 'rgba(255, 255, 255, 0.6)',
|
|
// },
|
|
// '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
|
|
// borderColor: '#fff',
|
|
// }
|
|
// }}
|
|
>
|
|
{
|
|
data.map((item)=>
|
|
<MenuItem value={item.stcd}>{item.stnm}</MenuItem>
|
|
)
|
|
}
|
|
</Select>
|
|
</div>
|
|
</>
|
|
}
|
|
>
|
|
<AreaDrpChart data={[]} />
|
|
</PanelBox>
|
|
)
|
|
}
|
|
|
|
export default DrpReal;
|