wenlele
2 years ago
12 changed files with 439 additions and 18 deletions
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 12 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 73 KiB |
@ -0,0 +1,83 @@ |
|||
import React from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { Select } from 'antd'; |
|||
import ReactECharts from 'echarts-for-react'; |
|||
import moment from 'moment' |
|||
|
|||
const { Option } = Select; |
|||
|
|||
const General = ({ user, setInterval, interval, }) => { |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
return <div style={{ |
|||
backgroundImage: 'url(/assets/images/monitor/headerTitle.png)', |
|||
backgroundSize: '100% 36px', |
|||
backgroundPosition: '0 0', |
|||
backgroundRepeat: 'no-repeat', zIndex: 2, |
|||
width: '26%', height: '30%', minWidth: 360, position: "absolute", left: 10, top: 0 |
|||
}}> |
|||
<div className='site' style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}> |
|||
<div style={{ lineHeight: "36px", color: '#E2F8FF', fontSize: 20., textIndent: 20, fontFamily: 'YouSheBiaoTiHei', fontSizeL: '1rem' }}>用电概况</div> |
|||
<div style={{ display: "flex", justifyContent: 'space-between', width: 200 }}> |
|||
{['本日', "本月", '本年'].map(v => <div style={{ |
|||
width: 60, height: 20, color: interval == v ? "#24DCF7" : '#00A9FF', border: '1px solid', |
|||
background: interval == v ? "#5bc1ff33" : "#236cfe4d", textAlign: "center", cursor: 'pointer' |
|||
}} onClick={() => { |
|||
setInterval(v) |
|||
}}>{v}</div>)} |
|||
</div> |
|||
</div> |
|||
<div style={{ |
|||
width: '100%', height: 'calc(100% - 36px)', backgroundImage: "linear-gradient(180deg, #000e28e6 1%, #021f48cc 100%)", |
|||
display: "flex", justifyContent: 'center', alignItems: "center" |
|||
}}> |
|||
<div> |
|||
<div style={{ width: 150, height: 56, display: "flex" }}> |
|||
<img style={{ width: 40, height: 45 }} src="/assets/images/realTime/notebook.png" /> |
|||
<div style={{ marginLeft: 10 }}> |
|||
<div>{interval == '本日' ? |
|||
"当日用电" : interval == '本月' ? |
|||
"当月用电" : interval == '本年' ? |
|||
"当年用电" : ""}</div> |
|||
<div>{ } kwh</div> |
|||
</div> |
|||
</div> |
|||
<div style={{ width: 150, height: 56, display: "flex" }}> |
|||
<img style={{ width: 40, height: 45 }} src="/assets/images/realTime/notebook.png" /> |
|||
<div style={{ marginLeft: 10 }}> |
|||
<div>{interval == '本日' ? |
|||
"昨日用电" : interval == '本月' ? |
|||
"上月用电" : interval == '本年' ? |
|||
"上年用电" : ""}</div> |
|||
<div>{ } kwh</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div style={{ display: 'flex' }}> |
|||
<img style={{ width: 10, height: 100 }} src="/assets/images/realTime/left.png" /> |
|||
<div style={{ |
|||
backgroundImage: 'url(/assets/images/realTime/specific.png)', |
|||
backgroundSize: '100% 100%', backgroundPosition: '0 0', backgroundRepeat: 'no-repeat', |
|||
width: 170, height: 50, height: 100 |
|||
}}> |
|||
<div></div> |
|||
</div> |
|||
<img style={{ width: 10, height: 100 }} src="/assets/images/realTime/right.png" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
} |
|||
|
|||
function mapStateToProps (state) { |
|||
const { auth, global } = state; |
|||
return { |
|||
user: auth.user, |
|||
clientHeight: global.clientHeight, |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(General); |
@ -0,0 +1,45 @@ |
|||
import React from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { Select } from 'antd'; |
|||
import ReactECharts from 'echarts-for-react'; |
|||
import moment from 'moment' |
|||
|
|||
const { Option } = Select; |
|||
|
|||
const SoftStart = ({ user, setInterval, interval }) => { |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
return <div style={{ |
|||
backgroundImage: 'url(/assets/images/monitor/headerTitle.png)', |
|||
backgroundSize: '100% 36px', |
|||
backgroundPosition: '0 0', |
|||
backgroundRepeat: 'no-repeat', zIndex: 2, |
|||
width: '26%', height: '30%', minWidth: 360, position: "absolute", left: 10, top: "30%" |
|||
}}> |
|||
<div className='site' style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}> |
|||
<div style={{ lineHeight: "36px", color: '#E2F8FF', fontSize: 20., textIndent: 20, fontFamily: 'YouSheBiaoTiHei', fontSizeL: '1rem' }}>软启动总用电量</div> |
|||
</div> |
|||
<div style={{ width: '100%', height: 'calc(100% - 36px)', backgroundImage: "linear-gradient(180deg, #000e28e6 1%, #021f48cc 100%)" }}> |
|||
<div style={{ margin: "20px 20px" }}>单位:kwh</div> |
|||
<div style={{}}> |
|||
<img style={{ width: 40, height: 45 }} src="/assets/images/realTime/notebook.png" /> |
|||
|
|||
<img style={{ width: 40, height: 45 }} src="/assets/images/realTime/notebook.png" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
} |
|||
|
|||
function mapStateToProps (state) { |
|||
const { auth, global } = state; |
|||
return { |
|||
user: auth.user, |
|||
clientHeight: global.clientHeight, |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(SoftStart); |
Loading…
Reference in new issue