61 lines
2.6 KiB
JavaScript
61 lines
2.6 KiB
JavaScript
|
import React,{useState} from 'react'
|
||
|
|
import PanelBox from '../../components/PanelBox';
|
||
|
|
import MiniSinglePie from './MiniSinglePie'
|
||
|
|
import clsx from 'clsx';
|
||
|
|
|
||
|
|
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)
|
||
|
|
return (
|
||
|
|
<PanelBox
|
||
|
|
style={style}
|
||
|
|
title="水资源调度"
|
||
|
|
color="orange"
|
||
|
|
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>
|
||
|
|
}
|
||
|
|
extra={
|
||
|
|
<i className="ionicons gear"></i>
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<div style={{ display: 'flex', height: '100%' }}>
|
||
|
|
<div style={{ width: '50%', padding: '0.5rem', display: 'flex', flexDirection: 'column', color: '#ccc', fontSize: '1rem', lineHeight: 1.2 }}>
|
||
|
|
<div style={{ flexGrow: 1 }}>
|
||
|
|
<MiniSinglePie name="开机率" value={r} color="#b6e8d9" />
|
||
|
|
</div>
|
||
|
|
<div style={{ display: 'flex', alignItems: 'baseline' }}>
|
||
|
|
<div style={{ width: '50%', textAlign: 'right' }}>排涝泵站数</div>
|
||
|
|
<div style={{ flexGrow: 1, color: ' rgb(127, 225, 255)', fontSize: '1.2rem', paddingLeft: '1rem' }}>{v1}</div>
|
||
|
|
</div>
|
||
|
|
<div style={{ display: 'flex', alignItems: 'baseline' }}>
|
||
|
|
<div style={{ width: '50%', textAlign: 'right' }}>泵站数</div>
|
||
|
|
<div style={{ flexGrow: 1, color: ' rgb(127, 225, 255)', fontSize: '1.2rem', paddingLeft: '1rem' }}>{v2}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style={{ width: '50%', padding: '0.5rem', display: 'flex', flexDirection: 'column', color: '#ccc', fontSize: '1rem', lineHeight: 1.2 }}>
|
||
|
|
<div style={{ flexGrow: 1 }}>
|
||
|
|
<MiniSinglePie name="开机功率" value={r2} color="#fab7b7" />
|
||
|
|
</div>
|
||
|
|
<div style={{ display: 'flex', alignItems: 'baseline' }}>
|
||
|
|
<div style={{ width: '50%', textAlign: 'right' }}>开机功率</div>
|
||
|
|
<div style={{ flexGrow: 1, color: ' rgb(127, 225, 255)', fontSize: '1.2rem', paddingLeft: '1rem' }}>{v3}kw</div>
|
||
|
|
</div>
|
||
|
|
<div style={{ display: 'flex', alignItems: 'baseline' }}>
|
||
|
|
<div style={{ width: '50%', textAlign: 'right' }}>总功率</div>
|
||
|
|
<div style={{ flexGrow: 1, color: ' rgb(127, 225, 255)', fontSize: '1.2rem', paddingLeft: '1rem' }}>{v4}kw</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</PanelBox>
|
||
|
|
)
|
||
|
|
}
|