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.
422 lines
24 KiB
422 lines
24 KiB
"use strict";
|
|
import React, { useEffect, useState } from 'react'
|
|
import { connect, createStore } from "react-redux";
|
|
import Immutable from 'immutable';
|
|
import { pepProject } from '../../actions/global';
|
|
import { SplitButtonGroup, Dropdown, Button, Nav, Avatar, Input, Tooltip, Tabs, TabPane, Space, Popconfirm, Modal } from '@douyinfe/semi-ui';
|
|
import { IconTreeTriangleDown, IconSearch, IconEdit, IconDelete } from '@douyinfe/semi-icons';
|
|
import CustomProjGroupModal from './components/customProjGroupModal'
|
|
import PerfectScrollbar from "perfect-scrollbar";
|
|
import "./index.less";
|
|
import layout from '../../containers/layout';
|
|
|
|
let newScrollbar;
|
|
const Header = (props) => {
|
|
const { dispatch, history, user, actions, socket, headerItems, tochange, projectGroup } = props;
|
|
const { install, projectGroup: projectGroupAC, layout,problem } = actions
|
|
const [pomsList, setPomsList] = useState([])
|
|
const [pomsName, setPomsName] = useState('全局')
|
|
const [pepProjectId, setPepProjectId] = useState()
|
|
const [keyword, setKeyword] = useState('')
|
|
const [Scrollbar, setScrollbar] = useState(false)
|
|
const [prjDropdownVis, setPrjDropdownVis] = useState(false)
|
|
const [prjDropDownTabKey, setPrjDropDownTabKey] = useState('项目')
|
|
const [customProjGroupModalVis, setCustomProjGroupModalVis] = useState(false)
|
|
const [customProjGroupDelPopVis, setCustomProjGroupDelPopVis] = useState(false)
|
|
const [customProjGroupEditData, setCustomProjGroupEditData] = useState(null)
|
|
const [count, setCount] = useState(0)//待办工单数量
|
|
// console.log('actions1',actions)
|
|
let userRole = user?.pomsUserInfo?.role
|
|
let modalRole = []
|
|
if (userRole) {
|
|
let modal = []
|
|
userRole?.map(v => {
|
|
if (v == 'data_analyst') ['analysis', 'data', 'workOrder', 'means'].map(u => modal.push(u))
|
|
if (v == 'after_sale') ['problem', 'facility', 'workOrder', 'means'].map(u => modal.push(u))
|
|
if (v == 'resource_manage') ['facility', 'workOrder', 'means'].map(u => modal.push(u))
|
|
if (v == 'customer_service') ['service', 'workOrder', 'means'].map(u => modal.push(u))
|
|
if (v == 'firmware_upgrade') modal.push('device')
|
|
})
|
|
modal.push('control')
|
|
modal = [...new Set(modal)]
|
|
// console.log('headerItems',headerItems)
|
|
|
|
modalRole = headerItems?.filter(v => modal.includes(v.itemKey))
|
|
if (userRole?.includes('SuperAdmin') || userRole?.includes('admin')) modalRole = headerItems
|
|
}
|
|
|
|
const getProjGroup = () => {
|
|
dispatch(projectGroupAC.getProjectGroup())
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (JSON.parse(sessionStorage.getItem('pomsUser'))?.token) {
|
|
dispatch(install.getProjectPoms({ global: 1 })).then((res) => { //获取已绑定项目
|
|
if (res.success) {
|
|
let data = res.payload.data?.rows?.filter(v => v.pepProjectIsDelete !== 1)?.map(v => ({ pepProjectId: v.id, pepProjectName: v.pepProjectName || v.name }))
|
|
setPomsList(data)
|
|
}
|
|
})
|
|
getProjGroup()
|
|
dispatch(layout.getWorkOrders()).then((res) => {
|
|
if (res.success) {
|
|
setCount(res.payload.data?.count)
|
|
}
|
|
})
|
|
dispatch(problem.getAlarmDataGroup())
|
|
}
|
|
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
const domProject = document.getElementById("overall");
|
|
if (domProject) {
|
|
newScrollbar = new PerfectScrollbar("#overall", {
|
|
suppressScrollX: true,
|
|
});
|
|
if (domProject && newScrollbar) {
|
|
newScrollbar.update();
|
|
}
|
|
}
|
|
}, [Scrollbar])
|
|
|
|
useEffect(() => {
|
|
dispatch(pepProject(pepProjectId))
|
|
}, [pepProjectId])
|
|
|
|
const semiPortalZindex = () => {
|
|
const semiPortal = document.getElementsByClassName('semi-portal')
|
|
for (let sp of semiPortal) {
|
|
if (sp.style.zIndex == 1060) {
|
|
sp.style.zIndex = 990
|
|
break
|
|
}
|
|
}
|
|
}
|
|
return (
|
|
<>
|
|
<div id="top-slider">
|
|
<Nav
|
|
mode={"horizontal"}
|
|
onClick={({ itemKey }) => {
|
|
if (itemKey == "logout") {
|
|
dispatch(actions.auth.logout(user));
|
|
if (socket) {
|
|
socket.disconnect();
|
|
}
|
|
history.push(`/signin`);
|
|
}
|
|
}}
|
|
style={{
|
|
height: 48,
|
|
minWidth: 520,
|
|
background: '#1D2343',
|
|
backgroundSize: "100% 100%",
|
|
color: "white",
|
|
}}
|
|
header={{
|
|
logo: (
|
|
<img
|
|
src="/assets/images/install/long_logo.png"
|
|
style={{ display: "inline-block", width: 200, height: 40, marginLeft: -24, cursor: 'pointer' }}
|
|
onClick={() => {
|
|
let projectGroup = JSON.parse(localStorage.getItem('project_group'))
|
|
let curPG = projectGroup && projectGroup?.find(v => v.userId == user?.id)
|
|
if (curPG) {
|
|
window.open(`/projectGroup/bigscreen?pomsPG=${curPG.projectGroupId}&pomsU=${user?.pomsUserInfo?.id}`, '_blank')
|
|
} else {
|
|
window.open(`/projectGroup/statistic?pomsU=${user?.pomsUserInfo?.id}`, '_blank')
|
|
}
|
|
}}
|
|
/>
|
|
),
|
|
text: (
|
|
<>
|
|
<SplitButtonGroup style={{ marginLeft: 10 }} aria-label="项目操作按钮组">
|
|
<Dropdown
|
|
onVisibleChange={(v) => {
|
|
setScrollbar(!Scrollbar)
|
|
setKeyword('')
|
|
}}
|
|
// trigger="click"
|
|
// clickToHide={true}
|
|
trigger={'custom'}
|
|
visible={prjDropdownVis}
|
|
onClickOutSide={(e) => {
|
|
if (customProjGroupModalVis || customProjGroupDelPopVis) {
|
|
return
|
|
}
|
|
setPrjDropdownVis(false)
|
|
}}
|
|
position="rightBottom"
|
|
stopPropagation={true}
|
|
render={
|
|
<Dropdown.Menu style={{ minWidth: 270, maxWidth: 714, padding: 20, fontSize: 12, position: 'relative', }}>
|
|
<Tabs type="button"
|
|
activeKey={prjDropDownTabKey}
|
|
onChange={
|
|
(v) => setPrjDropDownTabKey(v)
|
|
}
|
|
>
|
|
<TabPane tab="项目" itemKey="项目">
|
|
<div style={{ width: '100%', height: 1, background: "#d5cfcf8c", margin: "10px 0" }}></div>
|
|
<Input suffix={<IconSearch />} onChange={(v) => setKeyword(v)} showClear onClick={(e) => e.stopPropagation()}></Input>
|
|
<div id='overall' style={{ width: '100%', height: 260, position: "relative", marginTop: 10 }}>
|
|
{pomsList?.length > 0 ?
|
|
pomsList.filter(u => u.pepProjectName?.includes(keyword))?.map(v => {
|
|
return <Dropdown.Item
|
|
key={'pomsList' + v.pepProjectId}
|
|
style={{ width: 224, overflow: 'hidden', borderBottom: '', display: "inline-block", whiteSpace: 'nowrap', color: 'rgb(0, 90, 189)' }}>
|
|
{
|
|
v.pepProjectName?.length > 15 ? <Tooltip content={<div>{v.pepProjectName}</div>}>
|
|
<div style={{}} >
|
|
<div onClick={() => {
|
|
setPomsName(v.pepProjectName)
|
|
setPepProjectId(v.pepProjectId)
|
|
setPrjDropdownVis(false)
|
|
}}>
|
|
{v.pepProjectName?.length > 15 ? `${v.pepProjectName?.substr(0, 15)}` : v.pepProjectName}
|
|
</div>
|
|
</div>
|
|
</Tooltip>
|
|
: <div onClick={() => {
|
|
setPomsName(v.pepProjectName)
|
|
setPepProjectId(v.pepProjectId)
|
|
setPrjDropdownVis(false)
|
|
}}>{v.pepProjectName}</div>
|
|
}
|
|
</Dropdown.Item>
|
|
}) : ""
|
|
}
|
|
</div>
|
|
</TabPane>
|
|
<TabPane tab={<div onClick={() => {
|
|
setPomsName('全局')
|
|
setPepProjectId('')
|
|
setPrjDropdownVis(false)
|
|
}}>全局</div>} itemKey="全局">
|
|
</TabPane>
|
|
<TabPane tab={<div onClick={() => {
|
|
// setPepProjectId('')
|
|
}}>自定义分组</div>} itemKey="自定义分组">
|
|
<div style={{ width: '100%', height: 1, background: "#d5cfcf8c", margin: "10px 0" }} />
|
|
<div style={{ display: 'flex' }}>
|
|
<Button type="primary" onClick={() => {
|
|
semiPortalZindex()
|
|
setCustomProjGroupModalVis(true)
|
|
}}>设置新分组</Button>
|
|
<Input style={{
|
|
flex: 1, marginLeft: 14
|
|
}} suffix={<IconSearch />} onChange={(v) => setKeyword(v)} showClear onClick={(e) => e.stopPropagation()}></Input>
|
|
</div>
|
|
<div id='overall' className='customGroupPop' style={{ width: '100%', height: 260, position: "relative", marginTop: 10 }}>
|
|
{
|
|
projectGroup.filter(u => u.name?.includes(keyword))?.map(v => {
|
|
return (
|
|
<Dropdown.Item
|
|
className='customGroupItem'
|
|
key={'projectGroup' + v.id}
|
|
style={{
|
|
width: 224, overflow: 'hidden', borderBottom: '', display: "inline-block", whiteSpace: 'nowrap', color: 'rgb(0, 90, 189)'
|
|
}}
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
setPomsName(v.name)
|
|
setPepProjectId(v.pomsProjectIds.join(','))
|
|
setPrjDropdownVis(false)
|
|
}}
|
|
>
|
|
{
|
|
v.name?.length > 10 ?
|
|
<Tooltip content={<div>{v.name}</div>}>
|
|
<span >
|
|
{v.name?.substr(0, 10)}...
|
|
</span>
|
|
</Tooltip>
|
|
:
|
|
<span >
|
|
{v.name}
|
|
</span>
|
|
}
|
|
<Space style={{ float: 'right', position: 'relative', top: 3, }}>
|
|
<IconEdit className="edit-icon" onClick={(e) => {
|
|
e.stopPropagation()
|
|
semiPortalZindex()
|
|
setCustomProjGroupEditData(v)
|
|
setCustomProjGroupModalVis(true)
|
|
}} />
|
|
<IconDelete className="del-icon" onClick={(e) => {
|
|
e.stopPropagation()
|
|
semiPortalZindex()
|
|
setCustomProjGroupDelPopVis(v.id)
|
|
Modal.warning({
|
|
title: '确定删除该自定义分组？', content: '此修改将不可逆',
|
|
onCancel: () => {
|
|
setCustomProjGroupDelPopVis(null)
|
|
},
|
|
onOk: () => {
|
|
dispatch(projectGroupAC.delProjectGroup(v.id)).then((res) => {
|
|
if (res.success) {
|
|
setCustomProjGroupDelPopVis(null)
|
|
|
|
getProjGroup()
|
|
}
|
|
})
|
|
},
|
|
style: { zIndex: 1090 }
|
|
});
|
|
}} />
|
|
</Space>
|
|
</Dropdown.Item>
|
|
|
|
)
|
|
})
|
|
}
|
|
</div>
|
|
</TabPane>
|
|
</Tabs>
|
|
</Dropdown.Menu>
|
|
}
|
|
>
|
|
<Button theme="solid" type="primary" style={{ height: 24, background: '#005ABD' }}>{
|
|
pomsName.length > 15 ? <Tooltip content={<div>{pomsName}</div>}>
|
|
<div style={{}}>
|
|
{pomsName.length > 15 ? `${pomsName.substr(0, 15)}...` : pomsName}
|
|
</div>
|
|
</Tooltip> : pomsName
|
|
}</Button>
|
|
<Button style={{ width: 16, height: 24, background: '#005ABD' }} theme="solid" type="primary" icon={<IconTreeTriangleDown />} onClick={() => { setPrjDropdownVis(!prjDropdownVis) }}></Button>
|
|
</Dropdown>
|
|
</SplitButtonGroup>
|
|
</>
|
|
),
|
|
}}
|
|
footer={
|
|
<>
|
|
{modalRole.length > 0 ? modalRole.map((item, index) => {
|
|
// console.log('item1',modalRole.find(k=>k.text==='工单'))
|
|
if (item.hasOwnProperty('items')) {
|
|
return (
|
|
<Nav.Sub
|
|
key={index + 'a'}
|
|
itemKey={item.itemKey}
|
|
text={item.text === '工单' ? `${item.text}（${count}）` : item.text}
|
|
dropdownStyle={{ color: '#F2F3F5' }}
|
|
>
|
|
{item.hasOwnProperty('items') && item.items.map((ite, idx) => (
|
|
<Nav.Item key={idx + 'd'} itemKey={ite.itemKey} text={ite.text} onClick={() => { tochange(ite); }} />
|
|
))}
|
|
</Nav.Sub>
|
|
)
|
|
}
|
|
else {
|
|
return (
|
|
<div key='console' style={{ display: 'inline-flex' }}>
|
|
<img src="/assets/images/background/console.png" style={{ width: 24, marginRight: -10 }} />
|
|
<Nav.Item key={index + 'a'} itemKey={item.itemKey} text={item.text} onClick={() => { tochange(item) }} />
|
|
</div>
|
|
)
|
|
}
|
|
}) : ""}
|
|
<Nav.Sub
|
|
itemKey={"user"}
|
|
text={
|
|
<div
|
|
style={{
|
|
marginLeft: -8,
|
|
display: "inline-block",
|
|
color: "white",
|
|
}}
|
|
>
|
|
<Avatar size="extra-small" color="light-blue" style={{ marginRight: 4 }}>
|
|
{user?.name?.substr(0, 1)}
|
|
</Avatar>
|
|
<div style={{
|
|
display: "inline-block", position: "relative",
|
|
top: 10,
|
|
left: 4,
|
|
marginRight: 4,
|
|
}}
|
|
>
|
|
</div>
|
|
</div>
|
|
}
|
|
>
|
|
<div style={{ width: 133, }}>
|
|
<div style={{ display: "flex", alignItems: 'center', background: '#F0F5FF', padding: '8px 0px 8px 12px' }}>
|
|
<Avatar size="extra-small" color="light-blue" style={{ marginRight: 4 }}>
|
|
{user?.name?.substr(0, 1)}
|
|
</Avatar>
|
|
<div style={{ fontSize: 12, color: '#4A4A4A' }}>
|
|
{user.name}
|
|
<div title={user?.department?.map(v => v.name + '、')} style={{ width: 60, overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', color: '#969799', fontSize: 12 }}>{user?.department?.map(v => v.name + '、')}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', alignItems: 'center', height: 30, borderBottom: '1px solid #F2F3F5', cursor: "pointer" }}
|
|
onClick={() => {
|
|
history.push(`/userCenter`);
|
|
}}>
|
|
<div style={{ width: 15, height: 15, marginLeft: 20 }}>
|
|
<img src="/assets/images/console/yonghu.png" alt="" style={{ width: '100%', height: '100%' }} />
|
|
</div>
|
|
<div style={{ color: '#646566', fontSize: 12, marginLeft: 9 }}>
|
|
用户中心
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', alignItems: 'center', height: 30, borderBottom: '1px solid #F2F3F5', cursor: "pointer" }}>
|
|
<div style={{ width: 15, height: 15, marginLeft: 20 }}>
|
|
<img src="/assets/images/console/suo.png" alt="" style={{ width: '100%', height: '100%' }} />
|
|
</div>
|
|
<div style={{ color: '#646566', fontSize: 12, marginLeft: 9 }}>
|
|
安全认证
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: 27, color: '#646566', fontSize: 12, cursor: "pointer" }}
|
|
onClick={() => {
|
|
dispatch(actions.auth.logout(user));
|
|
if (socket) {
|
|
socket.disconnect();
|
|
}
|
|
history.push(`/signin`);
|
|
}}>
|
|
退出
|
|
{/* <Nav.Item itemKey={"logout"} text={"退出"} style={{ textAlign: "center" }} /> */}
|
|
</div>
|
|
|
|
{/* collapseButton collapseText */}
|
|
|
|
</Nav.Sub>
|
|
</>
|
|
}
|
|
/>
|
|
{
|
|
<CustomProjGroupModal
|
|
visible={customProjGroupModalVis}
|
|
pomsList={pomsList}
|
|
editData={customProjGroupEditData}
|
|
cancel={({ refresh } = {}) => {
|
|
setCustomProjGroupModalVis(false)
|
|
setCustomProjGroupEditData(null)
|
|
if (refresh) {
|
|
getProjGroup()
|
|
}
|
|
}}
|
|
/>
|
|
}
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
function mapStateToProps (state) {
|
|
const { global, auth, webSocket, projectGroup } = state;
|
|
return {
|
|
actions: global.actions,
|
|
user: auth.user,
|
|
socket: webSocket.socket,
|
|
projectGroup: projectGroup.data || []
|
|
};
|
|
}
|
|
|
|
export default connect(mapStateToProps)(Header);
|
|
|