|
|
@ -188,21 +188,50 @@ const Capacity = ({ actions, dispatch, siteList, capacity, waterLevelSix, curren |
|
|
|
width: '40%', height: '100%', |
|
|
|
backgroundImage: 'url(/assets/images/monitor/pillar.png)', |
|
|
|
backgroundSize: '80% 80%', |
|
|
|
backgroundPosition: 'center', |
|
|
|
backgroundPosition: 'bottom', |
|
|
|
backgroundRepeat: 'no-repeat', |
|
|
|
position: 'relative' |
|
|
|
}}> |
|
|
|
<div className='pump-title' style={{ |
|
|
|
display: 'flex', justifyContent: 'center', alignItems: 'center', |
|
|
|
width: '40%', top: 10, position: 'absolute', left: "28%" |
|
|
|
}}> |
|
|
|
<img style={{ width: 67, height: 68, marginLeft: 94 }} src='/assets/images/monitor/site.png' /> |
|
|
|
<div style={{ |
|
|
|
width: 180, height: 41, backgroundImage: 'url(/assets/images/monitor/title.png)', |
|
|
|
backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat', |
|
|
|
textAlign: 'center', lineHeight: '41px', fontSize: 20, color: '#FFF', fontStyle: "italic" |
|
|
|
}}> |
|
|
|
{changeable ? <Select |
|
|
|
popupClassName="pump-title-select-popup" |
|
|
|
bordered={false} |
|
|
|
style={{ minWidth: 150, fontSize: 20 }} |
|
|
|
showSearch |
|
|
|
filterOption={(input, option) => |
|
|
|
(option?.label ?? '').toLowerCase().includes(input.toLowerCase()) |
|
|
|
} |
|
|
|
placeholder="请选择站点" |
|
|
|
value={strucId} |
|
|
|
optionFilterProp="children" |
|
|
|
onSelect={v => { |
|
|
|
setStrucId(v) |
|
|
|
}} |
|
|
|
options={siteList} |
|
|
|
/> : siteList?.filter(v => v.value == strucId)[0]?.label} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div style={{ |
|
|
|
backgroundImage: 'url(/assets/images/monitor/pedestal.png)', |
|
|
|
backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat', |
|
|
|
color: '#00FFF8', fontSize: 20, width: 160, height: 160, textAlign: 'center', |
|
|
|
position: 'absolute', top: '6%', left: 10, |
|
|
|
position: 'absolute', top: '16%', left: 10, |
|
|
|
}}> |
|
|
|
<div style={{ fontSize: 20, color: '#E2F8FF', fontWeight: 600 }}> |
|
|
|
湿度:</div> |
|
|
|
<span style={{ fontFamily: "D-DIN-Italic" }}>{capacity?.sun?.sHumidity}</span> % |
|
|
|
</div> |
|
|
|
<div style={{ width: 240, color: '#00FFF8', fontSize: 20, position: 'absolute', top: '15%', left: "calc(50% - 120px)", display: 'inline-block' }}> |
|
|
|
<div style={{ width: 240, color: '#00FFF8', fontSize: 20, position: 'absolute', top: '25%', left: "calc(50% - 120px)", display: 'inline-block' }}> |
|
|
|
<div style={{ display: "flex", alignItems: "center", justifyContent: "center" }}> |
|
|
|
<span style={{ fontSize: 20, color: '#E2F8FF', fontWeight: 600, }}> |
|
|
|
总用量:</span><span title={capacity?.sun?.daySun?.toFixed(2)} style={{ fontFamily: "D-DIN-Italic", lineHeight: "16px", display: "inline-block", marginRight: 6 }}>{capacity?.sun?.daySun?.toFixed(2)}</span> kWh |
|
|
@ -213,7 +242,7 @@ const Capacity = ({ actions, dispatch, siteList, capacity, waterLevelSix, curren |
|
|
|
backgroundImage: 'url(/assets/images/monitor/pedestal.png)', |
|
|
|
backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat', |
|
|
|
color: '#00FFF8', fontSize: 20, width: 160, height: 160, textAlign: 'center', |
|
|
|
position: 'absolute', top: '6%', right: -10, |
|
|
|
position: 'absolute', top: '16%', right: -10, |
|
|
|
}}> |
|
|
|
<div style={{ fontSize: 20, color: '#E2F8FF', fontWeight: 600 }}> |
|
|
|
温度:</div> |
|
|
@ -224,7 +253,7 @@ const Capacity = ({ actions, dispatch, siteList, capacity, waterLevelSix, curren |
|
|
|
backgroundImage: 'url(/assets/images/monitor/oblique.png)', |
|
|
|
backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat', |
|
|
|
color: '#4CA1FF', fontSize: 20, width: 160, height: 60, textAlign: 'center', |
|
|
|
position: 'absolute', top: '35%', left: -60, |
|
|
|
position: 'absolute', top: '45%', left: -60, |
|
|
|
}}> |
|
|
|
<div style={{ fontSize: 18, color: '#E2F8FF', fontWeight: 600 }}> |
|
|
|
今年用电:</div> |
|
|
@ -234,7 +263,7 @@ const Capacity = ({ actions, dispatch, siteList, capacity, waterLevelSix, curren |
|
|
|
backgroundImage: 'url(/assets/images/monitor/oblique.png)', |
|
|
|
backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat', |
|
|
|
color: '#4CA1FF', fontSize: 20, width: 160, height: 60, textAlign: 'center', |
|
|
|
position: 'absolute', top: '54%', left: 0, |
|
|
|
position: 'absolute', top: '64%', left: 0, |
|
|
|
}}> |
|
|
|
<div style={{ fontSize: 18, color: '#E2F8FF', fontWeight: 600 }}> |
|
|
|
当月用电:</div> |
|
|
@ -244,7 +273,7 @@ const Capacity = ({ actions, dispatch, siteList, capacity, waterLevelSix, curren |
|
|
|
backgroundImage: 'url(/assets/images/monitor/oblique.png)', |
|
|
|
backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat', |
|
|
|
color: '#4CA1FF', fontSize: 20, width: 160, height: 60, textAlign: 'center', |
|
|
|
position: 'absolute', top: '67%', left: 'calc(50% - 80px)', |
|
|
|
position: 'absolute', top: '77%', left: 'calc(50% - 80px)', |
|
|
|
}}> |
|
|
|
<div style={{ fontSize: 18, color: '#E2F8FF', fontWeight: 600 }}> |
|
|
|
当日用电:</div> |
|
|
@ -254,7 +283,7 @@ const Capacity = ({ actions, dispatch, siteList, capacity, waterLevelSix, curren |
|
|
|
<div style={{ |
|
|
|
backgroundImage: 'url(/assets/images/monitor/oblique.png)', |
|
|
|
backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat', |
|
|
|
height: 130, width: 180, position: 'absolute', top: '37%', right: 0, |
|
|
|
height: 130, width: 180, position: 'absolute', top: '47%', right: 0, |
|
|
|
display: 'flex', flexDirection: 'column', alignItems: 'center' |
|
|
|
}}> |
|
|
|
<div style={{ width: "100%", height: "100%", position: "relative" }}> |
|
|
@ -327,32 +356,8 @@ const Capacity = ({ actions, dispatch, siteList, capacity, waterLevelSix, curren |
|
|
|
theme={'ReactEChart'} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div className='site' style={{ |
|
|
|
display: 'flex', justifyContent: 'center', alignItems: 'center', |
|
|
|
width: '100%', tpo: '80%', position: 'absolute', top: '80%' |
|
|
|
}}> |
|
|
|
<img style={{ width: 67, height: 68, marginLeft: 94 }} src='/assets/images/monitor/site.png' /> |
|
|
|
<div style={{ |
|
|
|
width: 180, height: 41, backgroundImage: 'url(/assets/images/monitor/title.png)', |
|
|
|
backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat', |
|
|
|
textAlign: 'center', lineHeight: '41px', fontSize: 20, color: '#FFF', fontStyle: "italic" |
|
|
|
}}>{siteList?.filter(v => v.value == strucId)[0]?.label}</div> |
|
|
|
{changeable && <Select |
|
|
|
showSearch |
|
|
|
placeholder="请选择站点" |
|
|
|
value={strucId} |
|
|
|
style={{ width: 155 }} |
|
|
|
optionFilterProp="children" |
|
|
|
onSelect={v => { |
|
|
|
setStrucId(v) |
|
|
|
}} |
|
|
|
options={siteList} |
|
|
|
/>} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
{/* 进线柜 */} |
|
|
|
<div style={{ width: '30%', height: '100%', display: 'flex', justifyContent: 'center', }}> |
|
|
@ -682,7 +687,7 @@ const Capacity = ({ actions, dispatch, siteList, capacity, waterLevelSix, curren |
|
|
|
</div > |
|
|
|
} |
|
|
|
|
|
|
|
function mapStateToProps (state) { |
|
|
|
function mapStateToProps(state) { |
|
|
|
const { auth, global, capacity, waterLevelSix, currentSix } = state; |
|
|
|
|
|
|
|
|
|
|
|