You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
86 lines
3.0 KiB
86 lines
3.0 KiB
import React, { useState, useEffect } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import Weather from './public/weather';
|
|
|
|
const Header = ({ dispatch, actions, user, module, setModule, history }) => {
|
|
|
|
const [tabs, setTabs] = useState([
|
|
{ title: '视频监控', key: 'video' },
|
|
{ title: '基础信息', key: 'basis' },
|
|
{ title: '能耗监测', key: 'capacity' },
|
|
{ title: '电排远控', key: 'electrical' },
|
|
{ title: '实时监测', key: 'realTime' },
|
|
])
|
|
|
|
useEffect(() => {
|
|
const tabKey = sessionStorage.getItem('tabKey');
|
|
if (tabKey) {
|
|
setTabs([
|
|
{ title: '视频监控', key: 'video' },
|
|
{ title: '能耗监测', key: 'capacity' },
|
|
{ title: '电排远控', key: 'electrical' },
|
|
{ title: '实时监测', key: 'realTime' },
|
|
])
|
|
};
|
|
}, [])
|
|
|
|
return <div style={{ width: '100%', height: 160 }}>
|
|
<div style={{
|
|
width: '100%', height: 130,
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center'
|
|
}}>
|
|
<Weather />
|
|
<div style={{ width: 200, color: 'white', display: 'flex', alignItems: 'center' }}>
|
|
<div style={{
|
|
width: 130, height: 52,
|
|
backgroundImage: 'url(/assets/images/monitor/user.png)',
|
|
backgroundSize: '100% 100%',
|
|
backgroundPosition: 'center',
|
|
textIndent: 45, lineHeight: '52px'
|
|
}}>
|
|
{user?.name}
|
|
</div>
|
|
<div style={{ cursor: "pointer" }} onClick={() => {
|
|
dispatch(actions.auth.logout(user));
|
|
history.push(`/signin`);
|
|
}}>退出</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div style={{ display: 'flex', justifyContent: 'center' }}>
|
|
<div style={{
|
|
width: '45%', height: 30, textAlign: 'center',
|
|
backgroundImage: 'url(/assets/images/monitor/strip.png)',
|
|
backgroundSize: '100% 50%',
|
|
backgroundPosition: 'center',
|
|
backgroundRepeat: 'no-repeat',
|
|
display: 'flex',
|
|
alignItems: 'flex-end', justifyContent: 'space-around',
|
|
}}>
|
|
{tabs.map(v => {
|
|
return <div key={v.key} style={{
|
|
width: 100, height: 30, lineHeight: '30px',
|
|
backgroundImage: `url(/assets/images/monitor/${module == v.key ? 'pitch-on' : 'choseNone'}.png)`,
|
|
backgroundSize: '100% 100%',
|
|
backgroundPosition: '100% 100%',
|
|
backgroundRepeat: 'no-repeat',
|
|
color: 'white', cursor: "pointer"
|
|
}} onClick={() => setModule(v.key)}>{v.title}</div>
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div >
|
|
}
|
|
|
|
function mapStateToProps(state) {
|
|
const { auth, global } = state;
|
|
return {
|
|
user: auth.user,
|
|
actions: global.actions,
|
|
clientHeight: global.clientHeight,
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps)(Header);
|