87 lines
3.1 KiB
JavaScript
87 lines
3.1 KiB
JavaScript
import React , { useState }from 'react';
|
|
import { OverallPromise } from '../../../../models/_/real';
|
|
import useRequest from '../../../../utils/useRequest';
|
|
import PanelBox from '../../components/PanelBox';
|
|
import OverallContent from './OverallContent';
|
|
import { Switch, FormControlLabel,InputLabel, Select, MenuItem,FormControl } from '@material-ui/core/index'
|
|
import { styled } from '@material-ui/styles';
|
|
export default function Overall({ style }) {
|
|
|
|
const { data } = useRequest(OverallPromise.get);
|
|
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"
|
|
>
|
|
<OverallContent data={data} />
|
|
<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>
|
|
)
|
|
}
|