140 lines
4.5 KiB
JavaScript
140 lines
4.5 KiB
JavaScript
import React, { useState } from 'react'
|
|
import PanelBox from '../../components/PanelBox';
|
|
import MiniSinglePie from './MiniSinglePie'
|
|
import clsx from 'clsx';
|
|
import { Switch, FormControlLabel,InputLabel, Select, MenuItem,FormControl } from '@material-ui/core/index'
|
|
import { styled } from '@material-ui/styles';
|
|
|
|
|
|
export default function GQ({ style }) {
|
|
const v1 = 20;
|
|
const v2 = 32;
|
|
const r = (v1 * 100 / v2).toFixed(1);
|
|
|
|
const v3 = 650;
|
|
const v4 = 800;
|
|
const r2 = (v3 * 100 / v4).toFixed(1);
|
|
const [selected, setSelected] = useState(1)
|
|
const CustomSwitch = styled(Switch)({
|
|
'& .MuiSwitch-switchBase': {
|
|
color: '#fff',
|
|
'&.Mui-checked': {
|
|
color: '#1890ff',
|
|
'& + .MuiSwitch-track': {
|
|
backgroundColor: '#1890ff',
|
|
opacity: 0.5,
|
|
},
|
|
},
|
|
},
|
|
'& .MuiSwitch-track': {
|
|
backgroundColor: 'rgba(255, 255, 255, 0.3)',
|
|
},
|
|
});
|
|
|
|
const StyledFormControlLabel = styled(FormControlLabel)({
|
|
'& .MuiFormControlLabel-label': {
|
|
color: '#fff'
|
|
}
|
|
});
|
|
const [dimension, setDimension] = useState('fqh');
|
|
const [checked, setChecked] = React.useState(false);
|
|
|
|
return (
|
|
<PanelBox
|
|
style={style}
|
|
title="蓄水"
|
|
color="green"
|
|
// tabs={
|
|
// <span className="button-group">
|
|
// <span className={clsx({active:selected == 1})} onClick={() => setSelected(1)}>供蓄水</span>
|
|
// <span className={clsx({active:selected == 2})} onClick={() => setSelected(2)}>蓄水</span>
|
|
// <span className={clsx({active:selected == 3})} onClick={() => setSelected(3)}>警情</span>
|
|
// </span>
|
|
// }
|
|
extra={
|
|
<i className="ionicons gear"></i>
|
|
}
|
|
>
|
|
<div style={{ width: '100%', height: '100%', position: 'relative' }}>
|
|
{/* <div style={{
|
|
display: 'flex',
|
|
justifyContent: 'flex-end',
|
|
marginTop: '10px',
|
|
paddingRight: '20px'
|
|
}}>
|
|
<FormControl sx={{ minWidth: 200, marginBottom: 2 }}>
|
|
<InputLabel id="analysis-select-label">灌区</InputLabel>
|
|
<Select
|
|
labelId="analysis-select-label"
|
|
value={dimension}
|
|
label="灌区"
|
|
onChange={(event) => {
|
|
const value = event.target.value;
|
|
setDimension(value);
|
|
}}
|
|
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',
|
|
}
|
|
}}
|
|
>
|
|
<MenuItem value="waterUsage">浮桥河灌区</MenuItem>
|
|
</Select>
|
|
</FormControl>
|
|
</div> */}
|
|
<img src={`${process.env.PUBLIC_URL}/assets/xs.png`} alt="" style={{ width: 421, height: '100%' }} />
|
|
</div>
|
|
<div style={{ position: 'absolute', color: '#fff', top: 70, left: -280, display: 'flex', alignItems: 'center' }}>
|
|
|
|
<StyledFormControlLabel
|
|
control={
|
|
<CustomSwitch
|
|
checked={checked}
|
|
onChange={(e) => setChecked(e.target.checked)}
|
|
/>
|
|
}
|
|
label="多灌区模式"
|
|
/>
|
|
{checked && <div style={{ marginTop: "-15px" }}>
|
|
<FormControl sx={{ minWidth: 200, marginBottom: 2 }}>
|
|
<InputLabel id="analysis-select-label"></InputLabel>
|
|
<Select
|
|
labelId="analysis-select-label"
|
|
value={dimension}
|
|
label=""
|
|
onChange={(event) => {
|
|
const value = event.target.value;
|
|
setDimension(value);
|
|
}}
|
|
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',
|
|
}
|
|
}}
|
|
>
|
|
<MenuItem value="fqh">浮桥河灌区</MenuItem>
|
|
<MenuItem value="shk">三河口水库灌区</MenuItem>
|
|
<MenuItem value="qjs">群建水库灌区</MenuItem>
|
|
<MenuItem value="dsb">大石板灌区</MenuItem>
|
|
</Select>
|
|
</FormControl>
|
|
</div>}
|
|
</div>
|
|
</PanelBox>
|
|
)
|
|
}
|