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