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.
368 lines
17 KiB
368 lines
17 KiB
'use strict'
|
|
import React, { useState, useEffect, useMemo } from 'react'
|
|
import { Menu } from 'antd'
|
|
import { Link } from 'react-router-dom'
|
|
import { connect } from 'react-redux'
|
|
import styles from './style.css'
|
|
import { setCurrentTab } from '$utils/someStores'
|
|
import { WEATHERMARGIN, ICONSMAP } from '../../constants/weather'
|
|
import { RouteRequest } from '@peace/utils'
|
|
import moment from 'moment'
|
|
import ShowTime from './showTime'
|
|
import { MenuFoldOutlined, MenuUnfoldOutlined, UserOutlined, LogoutOutlined } from '@ant-design/icons'
|
|
|
|
const Header = props => {
|
|
const { dispatch, history, user, pathname, actions, clientWidth=100, toggleCollapsed, globalTab, tabChange } = props
|
|
const [tabs, setTabs] = useState({
|
|
patrolManage: [
|
|
{ name: '巡检管理', value: 'manage' },
|
|
{ name: '巡检项', value: 'item' },
|
|
{ name: '巡检日历', value: 'calendar' },
|
|
{ name: '巡检报告', value: 'report' },
|
|
],
|
|
deviceManageTabs: [
|
|
{ name: '设备统计', value: 'statistics' },
|
|
{ name: '设备台账', value: 'list' },
|
|
],
|
|
})
|
|
const [patrolManageVisible, setPatrolManageVisible] = useState(false)
|
|
const [deviceManageTabsVisible, setDeviceManageTabsVisible] = useState(false)
|
|
const [currentSubMenuTab, setCurrentSubMenuTab] = useState('')
|
|
const [tab, setTab] = useState('leader')
|
|
const [projectName, setProjectName ]= useState('')
|
|
const [weather, setWeather] = useState([])
|
|
let headerTitleStyle = {
|
|
position: 'absolute',
|
|
left: '3.125rem',
|
|
top: '.125rem',
|
|
fontSize: '1.875rem',
|
|
color: ' #FFFFFF',
|
|
fontWeight: 600,
|
|
fontFamily: 'PangMenZhengDao',
|
|
letterSpacing: '.5231rem',
|
|
width:'39rem'
|
|
}
|
|
let headerTabStyle = {
|
|
width: '4.375rem',
|
|
height: '1.125rem',
|
|
fontFamily: 'PangMenZhengDao',
|
|
fontSize: '1.125rem',
|
|
color: '#CCE6FF',
|
|
letterSpacing: '.0231rem'
|
|
}
|
|
|
|
|
|
useEffect(() => {
|
|
queryWeather()
|
|
const projectName = JSON.parse(sessionStorage.getItem('user')).projectName
|
|
setProjectName(projectName)
|
|
const timeUpdate = setInterval(() => {
|
|
queryWeather()
|
|
}, WEATHERMARGIN)
|
|
return () => {
|
|
clearInterval(timeUpdate)
|
|
}
|
|
|
|
}, [])
|
|
|
|
const queryWeather = () => {
|
|
RouteRequest.get(`/query/weather/3d?location=101240101`).then(res => {
|
|
if (res?.daily?.length === 3) {
|
|
setWeather(res.daily)
|
|
}
|
|
})
|
|
}
|
|
|
|
const iconSrc = useMemo(() => {
|
|
if (weather.length === 3) {
|
|
const icon = [ICONSMAP[weather[0].textDay], ICONSMAP[weather[1].textDay], ICONSMAP[weather[2].textDay]]
|
|
return icon
|
|
}
|
|
return []
|
|
}, [weather])
|
|
const handelClick = item => {
|
|
if (item.key == 'logout') {
|
|
dispatch(actions.auth.logout(user))
|
|
dispatch({ type: 'CLEAR_GLOBAL_SITE_LIST' }) //清空用户关注工地列表
|
|
history.push(`/signin?pcode=${user.pcode}`)
|
|
}
|
|
}
|
|
const onClick1 = tab => {
|
|
setTab(tab)
|
|
if (tab == 'inspection') {
|
|
setPatrolManageVisible(true)
|
|
setDeviceManageTabsVisible(false)
|
|
} else if (tab == 'device') {
|
|
setDeviceManageTabsVisible(true)
|
|
setPatrolManageVisible(false)
|
|
} else {
|
|
setPatrolManageVisible(false)
|
|
setDeviceManageTabsVisible(false)
|
|
setCurrentSubMenuTab('')
|
|
// dispatch({ type: 'TAB-CHANGE', data: tab })
|
|
}
|
|
tabChange(tab)
|
|
}
|
|
|
|
|
|
return (
|
|
<div className={styles.header} >
|
|
<div className={styles['header-fold']}>
|
|
{/* <img src='/assets/images/logo.svg' style={{ margin: '-14px 12px 0 0', height: 24 }} /> */}
|
|
<div className={styles['header-title']} style={{}}>
|
|
<span style={headerTitleStyle}>{projectName}</span>
|
|
</div>
|
|
</div>
|
|
<div
|
|
style={{
|
|
color: '#FFFFFF',
|
|
fontSize: '1rem',
|
|
fontWeight: 400,
|
|
position: 'absolute',
|
|
left: '47.25rem',
|
|
top: '.4375rem',
|
|
}}>
|
|
<a
|
|
onClick={() => {
|
|
onClick1('leader')
|
|
}}
|
|
style={{
|
|
...headerTabStyle,
|
|
// color: tab == 'leader' ? '#E9CF14' : '#FFFFFF',
|
|
// fontWeight: tab == 'leader' ? 500 : 400,
|
|
position: 'relative',
|
|
marginRight: '1.375rem',
|
|
}}>
|
|
{/* <img style={{ marginRight: 4, display: tab == 'leader' ? 'inline-block' : 'none' }} src="/assets/bigScreen/left.png" /> */}
|
|
领导驾驶舱
|
|
{/* <img style={{ marginLeft: 4, display: tab == 'leader' ? 'inline-block' : 'none' }} src="/assets/bigScreen/right.png" /> */}
|
|
<img
|
|
style={{width:'8.3125rem',height:'5.625rem', position: 'absolute', left: '-1.1875rem', top: '-1.5625rem', display: tab == 'leader' ? 'inline-block' : 'none' }}
|
|
src='/assets/bigScreen/selected-btn.png'
|
|
/>
|
|
</a>
|
|
<a
|
|
onClick={() => {
|
|
onClick1('run')
|
|
}}
|
|
style={{
|
|
...headerTabStyle,
|
|
// color: tab == 'run' ? '#E9CF14' : '#FFFFFF',
|
|
position: 'relative', marginRight: '1.375rem'
|
|
}}>
|
|
{/* <img style={{ marginRight: 4, display: tab == 'run' ? 'inline-block' : 'none' }} src="/assets/bigscreen/left.png" /> */}
|
|
运行监控
|
|
{/* <img style={{ marginLeft: 4, display: tab == 'run' ? 'inline-block' : 'none' }} src="/assets/bigscreen/right.png" /> */}
|
|
<img
|
|
style={{width:'8.3125rem',height:'5.625rem', position: 'absolute', left: '-1.75rem', top: '-1.5625rem', display: tab == 'run' ? 'inline-block' : 'none' }}
|
|
src='/assets/bigScreen/selected-btn.png'
|
|
/>
|
|
</a>
|
|
<a
|
|
onClick={() => {
|
|
onClick1('error')
|
|
}}
|
|
style={{
|
|
...headerTabStyle,
|
|
// color: tab == 'error' ? '#E9CF14' : '#FFFFFF',
|
|
position: 'relative', marginRight: '1.375rem'
|
|
}}>
|
|
{/* <img style={{ marginRight: 4, display: tab == 'error' ? 'inline-block' : 'none' }} src="/assets/bigscreen/left.png" /> */}
|
|
故障管理
|
|
{/* <img style={{ marginLeft: 4, display: tab == 'error' ? 'inline-block' : 'none' }} src="/assets/bigscreen/right.png" /> */}
|
|
<img
|
|
|
|
style={{ width:'8.3125rem',height:'5.625rem',position: 'absolute', left: '-1.75rem', top: '-1.5625rem', display: tab == 'error' ? 'inline-block' : 'none' }}
|
|
src='/assets/bigScreen/selected-btn.png'
|
|
/>
|
|
</a>
|
|
<a
|
|
onClick={() => {
|
|
onClick1('inspection')
|
|
}}
|
|
style={{
|
|
...headerTabStyle,
|
|
// color: tab == 'inspection' ? '#E9CF14' : '#FFFFFF',
|
|
position: 'relative', marginRight: '1.375rem' }}>
|
|
{/* <img style={{ marginRight: 4, display: tab == 'inspection' ? 'inline-block' : 'none' }} src="/assets/bigscreen/left.png" /> */}
|
|
巡检管理
|
|
{/* <img style={{ marginLeft: 4, display: tab == 'inspection' ? 'inline-block' : 'none' }} src="/assets/bigscreen/right.png" /> */}
|
|
<img
|
|
style={{
|
|
width:'8.3125rem',height:'5.625rem',
|
|
position: 'absolute',
|
|
left: '-1.75rem', top: '-1.5625rem',
|
|
display: tab == 'inspection' ? 'inline-block' : 'none',
|
|
}}
|
|
src='/assets/bigScreen/selected-btn.png'
|
|
/>
|
|
</a>
|
|
<a
|
|
onClick={() => {
|
|
onClick1('aiot')
|
|
}}
|
|
style={{
|
|
...headerTabStyle,
|
|
|
|
// color: tab == 'aiot' ? '#E9CF14' : '#FFFFFF',
|
|
position: 'relative',marginRight: '1.375rem' }}>
|
|
{/* <img style={{ marginRight: 4, display: tab == 'aiot' ? 'inline-block' : 'none' }} src="/assets/bigscreen/left.png" /> */}
|
|
AIOT运维
|
|
{/* <img style={{ marginLeft: 4, display: tab == 'aiot' ? 'inline-block' : 'none' }} src="/assets/bigscreen/right.png" /> */}
|
|
<img
|
|
style={{width:'8.3125rem',height:'5.625rem', position: 'absolute', left: '-1.75rem', top: '-1.5625rem', display: tab == 'aiot' ? 'inline-block' : 'none' }}
|
|
src='/assets/bigScreen/selected-btn.png'
|
|
/>
|
|
</a>
|
|
<a
|
|
onClick={() => {
|
|
onClick1('device')
|
|
}}
|
|
style={{
|
|
...headerTabStyle,
|
|
// color: tab == 'device' ? '#E9CF14' : '#FFFFFF',
|
|
position: 'relative', marginRight: '1.375rem' }}>
|
|
{/* <img style={{ marginRight: 4, display: tab == 'device' ? 'inline-block' : 'none' }} src="/assets/bigscreen/left.png" /> */}
|
|
设备管理
|
|
{/* <img style={{ marginLeft: 4, display: tab == 'device' ? 'inline-block' : 'none' }} src="/assets/bigscreen/right.png" /> */}
|
|
<img
|
|
style={{width:'8.3125rem',height:'5.625rem', position: 'absolute',left: '-1.75rem', top: '-1.5625rem', display: tab == 'device' ? 'inline-block' : 'none' }}
|
|
src='/assets/bigScreen/selected-btn.png'
|
|
/>
|
|
</a>
|
|
<a
|
|
onClick={() => {
|
|
onClick1('expert')
|
|
}}
|
|
style={{
|
|
// color: tab == 'expert' ? '#E9CF14' : '#FFFFFF',
|
|
...headerTabStyle,
|
|
position: 'relative', marginRight: '1.375rem' }}>
|
|
{/* <img style={{ marginRight: 4, display: tab == 'expert' ? 'inline-block' : 'none' }} src="/assets/bigscreen/left.png" /> */}
|
|
运维专家
|
|
{/* <img style={{ marginLeft: 4, display: tab == 'expert' ? 'inline-block' : 'none' }} src="/assets/bigscreen/right.png" /> */}
|
|
<img
|
|
style={{width:'8.3125rem',height:'5.625rem', position: 'absolute', left: '-1.75rem', top: '-1.5625rem', display: tab == 'expert' ? 'inline-block' : 'none' }}
|
|
src='/assets/bigScreen/selected-btn.png'
|
|
/>
|
|
</a>
|
|
<a
|
|
onClick={() => {
|
|
onClick1('info')
|
|
}}
|
|
style={{
|
|
...headerTabStyle,
|
|
// color: tab == 'info' ? '#E9CF14' : '#FFFFFF',
|
|
position: 'relative', marginRight: '1.375rem' }}>
|
|
{/* <img style={{ marginRight: 4, display: tab == 'info' ? 'inline-block' : 'none' }} src="/assets/bigscreen/left.png" /> */}
|
|
知识库
|
|
{/* <img style={{ marginLeft: 4, display: tab == 'info' ? 'inline-block' : 'none' }} src="/assets/bigscreen/right.png" /> */}
|
|
<img
|
|
style={{width:'8.3125rem',height:'5.625rem', position: 'absolute', left: '-1.75rem', top: '-1.5625rem', display: tab == 'info' ? 'inline-block' : 'none' }}
|
|
src='/assets/bigScreen/selected-btn.png'
|
|
/>
|
|
</a>
|
|
<a
|
|
onClick={() => {
|
|
onClick1('task')
|
|
}}
|
|
style={{
|
|
...headerTabStyle,
|
|
// color: tab == 'task' ? '#E9CF14' : '#FFFFFF',
|
|
position: 'relative', marginRight:'2.1875rem' }}>
|
|
{/* <img style={{ marginRight: 4, display: tab == 'task' ? 'inline-block' : 'none' }} src="/assets/bigscreen/left.png" /> */}
|
|
任务统计
|
|
{/* <img style={{ marginLeft: 4, display: tab == 'task' ? 'inline-block' : 'none' }} src="/assets/bigscreen/right.png" /> */}
|
|
<img
|
|
style={{width:'8.3125rem',height:'5.625rem', position: 'absolute', left: '-1.75rem', top: '-1.5625rem', display: tab == 'task' ? 'inline-block' : 'none' }}
|
|
src='/assets/bigScreen/selected-btn.png'
|
|
/>
|
|
</a>
|
|
<ShowTime marginRight={'0.075rem'} />
|
|
<div style={{ float: 'right', lineHeight: '.1875rem', marginTop: '.5rem' , marginRight: '.875rem' }}>
|
|
<div style={{ display: 'flex', alignItems: 'center' }}>
|
|
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
|
|
<div style={{ color: '#FFF' }}>{weather[0]?.textDay}</div>
|
|
{/* <div style={{ color: '#24DCF7' }}>{weather[0]?.tempMin}-{weather[0]?.tempMax}℃</div> */}
|
|
</div>
|
|
<img src={iconSrc[0] || ICONSMAP.未知} alt='icon' style={{ width: '2.6875rem', height: '2.375rem', margin: '.29rem .3125rem' }} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{patrolManageVisible || deviceManageTabsVisible ? (
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
// width: '29%',
|
|
height: '3.125rem',
|
|
top: tab == 'oprations' ? '4.125rem' : '4.8125rem',
|
|
left: patrolManageVisible ? '28%' : '36%',
|
|
display: 'flex',
|
|
// justifyContent: 'space-between',
|
|
justifyContent: 'center',
|
|
padding: '.75rem',
|
|
}}>
|
|
{(patrolManageVisible ? tabs.patrolManage : tabs.deviceManageTabs).map((tab, index) => (
|
|
<div>
|
|
<a
|
|
onClick={() => this.clickSubMenuTab(tab.value)}
|
|
style={{
|
|
color: currentSubMenuTab == tab.value ? '#E9CF14' : 'white',
|
|
fontSize: '1rem',
|
|
margin: '0 .625rem',
|
|
}}>
|
|
{tab.name}
|
|
</a>
|
|
<span
|
|
style={{
|
|
display:
|
|
index < (patrolManageVisible ? tabs.patrolManage : tabs.deviceManageTabs).length - 1
|
|
? 'inline-block'
|
|
: 'none',
|
|
}}>
|
|
{/* <img src={`/assets/images/bigscreen/boring_${currentSubMenuTab == tab.value ? 1 : 0}.png`} /> */}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
''
|
|
)}
|
|
|
|
<div id='nav' className={styles['header-nav']}>
|
|
<Menu
|
|
mode='horizontal'
|
|
style={{ border: 0 }}
|
|
onClick={handelClick}
|
|
theme={'light'}
|
|
items={[
|
|
{
|
|
label: <span style={{ color: 'aliceblue' }}>{user.displayName}</span>,
|
|
key: 'user',
|
|
icon: <img className={styles['header-nav-user-img']} src={`/assets/images/avatar/5.png`} />,
|
|
children: [
|
|
{
|
|
label: '退出',
|
|
key: 'logout',
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function mapStateToProps(state) {
|
|
const { global, auth, globalTab } = state
|
|
return {
|
|
actions: global.actions,
|
|
user: auth.user,
|
|
clientWidth: global.clientWidth,
|
|
clientHeight:global.clientHeight,
|
|
globalTab: globalTab.tab,
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps)(Header)
|
|
|