隐藏报警框
This commit is contained in:
parent
d9a45e9038
commit
1e4509285b
@ -1,61 +1,63 @@
|
||||
import React, { useState, useEffect, useRef } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { connect } from 'dva'
|
||||
import { Icon, Badge, Modal } from 'antd'
|
||||
import { Scrollbars } from 'react-custom-scrollbars'
|
||||
import IFComponent from '../common/IFComponent'
|
||||
import Socket from '../utils/socket'
|
||||
import { isEqual } from 'lodash'
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'dva';
|
||||
import { Icon, Badge, Modal } from 'antd';
|
||||
import { Scrollbars } from 'react-custom-scrollbars';
|
||||
import IFComponent from '../common/IFComponent';
|
||||
import Socket from '../utils/socket';
|
||||
import { isEqual } from 'lodash';
|
||||
|
||||
function AlarmNotice(props) {
|
||||
const [visible, setVisible] = useState(false)
|
||||
const [visible, setVisible] = useState(false);
|
||||
const [msg, setMsg] = useState({
|
||||
AlarmId: null,
|
||||
TotalCount: 0,
|
||||
Message: ''
|
||||
})
|
||||
Message: '',
|
||||
});
|
||||
|
||||
const loginRef = useRef(props.login)
|
||||
const loginRef = useRef(props.login);
|
||||
useEffect(() => {
|
||||
loginRef.current = props.login
|
||||
}, [props.login])
|
||||
loginRef.current = props.login;
|
||||
}, [props.login]);
|
||||
|
||||
useEffect(() => {
|
||||
let timer = -1
|
||||
let timer = -1;
|
||||
if (msg && !msg.TotalCount && !msg.Message && visible) {
|
||||
timer = setTimeout(() => {
|
||||
setVisible(false)
|
||||
}, 5000)
|
||||
setVisible(false);
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
return () => { clearTimeout(timer) }
|
||||
}, [msg, visible])
|
||||
return () => {
|
||||
clearTimeout(timer);
|
||||
};
|
||||
}, [msg, visible]);
|
||||
|
||||
const refOfMsg = useRef(msg)
|
||||
const refOfMsg = useRef(msg);
|
||||
useEffect(() => {
|
||||
refOfMsg.current = msg
|
||||
})
|
||||
refOfMsg.current = msg;
|
||||
});
|
||||
|
||||
const socket = useRef()
|
||||
const socket = useRef();
|
||||
useEffect(() => {
|
||||
const { userId: UserId, OrgId } = props.login
|
||||
const { userId: UserId, OrgId } = props.login;
|
||||
if (UserId && OrgId) {
|
||||
const socketIns = new Socket({
|
||||
url: props.webSocketHost,
|
||||
autoReconnect: true,
|
||||
onopen: handleSocketOpened,
|
||||
onmessage: handleSocketOnMsg
|
||||
})
|
||||
socket.current = socketIns
|
||||
onmessage: handleSocketOnMsg,
|
||||
});
|
||||
socket.current = socketIns;
|
||||
}
|
||||
|
||||
return () => {
|
||||
socket.current && socket.current.close()
|
||||
}
|
||||
}, [props.login.userId, props.login.OrgId, props.login.Tenant])
|
||||
socket.current && socket.current.close();
|
||||
};
|
||||
}, [props.login.userId, props.login.OrgId, props.login.Tenant]);
|
||||
|
||||
const handleSocketOpened = (socketIns) => {
|
||||
const { user, userId: UserId, OrgId, Tenant } = loginRef.current
|
||||
const { user, userId: UserId, OrgId, Tenant } = loginRef.current;
|
||||
const openedPayload = {
|
||||
TypeCode: 'P0001',
|
||||
Tenant,
|
||||
@ -64,28 +66,28 @@ function AlarmNotice(props) {
|
||||
UserName: user.NAME,
|
||||
OrgId,
|
||||
Tenant,
|
||||
ClientType: 0
|
||||
})
|
||||
}
|
||||
socketIns.send(JSON.stringify(openedPayload))
|
||||
handleSocketSendMsg({}, socketIns)
|
||||
}
|
||||
ClientType: 0,
|
||||
}),
|
||||
};
|
||||
socketIns.send(JSON.stringify(openedPayload));
|
||||
handleSocketSendMsg({}, socketIns);
|
||||
};
|
||||
|
||||
const handleSocketOnMsg = (data) => {
|
||||
if (data) {
|
||||
console.log('收到消息', data)
|
||||
const { TypeCode, Data } = JSON.parse(data)
|
||||
console.log('收到消息', data);
|
||||
const { TypeCode, Data } = JSON.parse(data);
|
||||
if (TypeCode === 'M0003' && Data) {
|
||||
Data.Message && !isEqual(Data.Message, refOfMsg.current.Message) && !visible && setVisible(true)
|
||||
setMsg(Data)
|
||||
Data.Message && !isEqual(Data.Message, refOfMsg.current.Message) && !visible && setVisible(true);
|
||||
setMsg(Data);
|
||||
} else if (TypeCode === 'MQ02') {
|
||||
console.log('触发权限变更通知', data)
|
||||
console.log('触发权限变更通知', data);
|
||||
Modal.warning({
|
||||
title: '权限变更通知',
|
||||
content: '当前用户权限已变更!',
|
||||
okText: '确认',
|
||||
onOk: () => {
|
||||
const { userId, OrgId, Tenant } = loginRef.current
|
||||
const { userId, OrgId, Tenant } = loginRef.current;
|
||||
props.dispatch({
|
||||
type: 'login/getLoginInfo',
|
||||
payload: {
|
||||
@ -93,61 +95,66 @@ function AlarmNotice(props) {
|
||||
OrgId,
|
||||
Tenant,
|
||||
onlyData: false,
|
||||
noReload: true
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
noReload: true,
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleSocketSendMsg = (Data, socketIns) => {
|
||||
const { userId: UserId, OrgId, Tenant } = loginRef.current
|
||||
const { userId: UserId, OrgId, Tenant } = loginRef.current;
|
||||
// 这里 Data 需要 JSON.stringify(Data) 是因为后端限制
|
||||
const payload = { TypeCode: 'M0003', Tenant, Data: JSON.stringify({ UserId, OrgId, ...Data }) }
|
||||
socketIns = socketIns || socket.current
|
||||
socketIns && socketIns.send(JSON.stringify(payload))
|
||||
}
|
||||
const payload = { TypeCode: 'M0003', Tenant, Data: JSON.stringify({ UserId, OrgId, ...Data }) };
|
||||
socketIns = socketIns || socket.current;
|
||||
socketIns && socketIns.send(JSON.stringify(payload));
|
||||
};
|
||||
|
||||
const handleNext = () => {
|
||||
if (!msg.TotalCount) return
|
||||
handleSocketSendMsg({ AlarmId: msg.AlarmId })
|
||||
}
|
||||
if (!msg.TotalCount) return;
|
||||
handleSocketSendMsg({ AlarmId: msg.AlarmId });
|
||||
};
|
||||
|
||||
const handleItemClick = (id) => {
|
||||
props.onItemClick instanceof Function && props.onItemClick(id)
|
||||
}
|
||||
props.onItemClick instanceof Function && props.onItemClick(id);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`alarm-notice ${visible ? 'visible' : ''}`}>
|
||||
<div onClick={() => { setVisible(!visible) }} className='alarm-notice__toogle'>
|
||||
<Icon type='caret-up' />
|
||||
<div className='alarm-notice__toogle-badge'>
|
||||
<div className={`alarm-notice ${visible ? 'visible' : ''}`} style={{ display: 'none' }}>
|
||||
<div
|
||||
onClick={() => {
|
||||
setVisible(!visible);
|
||||
}}
|
||||
className="alarm-notice__toogle"
|
||||
>
|
||||
<Icon type="caret-up" />
|
||||
<div className="alarm-notice__toogle-badge">
|
||||
<Badge count={msg.TotalCount} />
|
||||
</div>
|
||||
</div>
|
||||
<div className='alarm-notice__content'>
|
||||
<div className="alarm-notice__content">
|
||||
<Scrollbars autoHide autoHideTimeout={1000} autoHideDuration={200}>
|
||||
<IFComponent IF={!!msg.Message} ELSE={<span>暂无报警信息</span>}>
|
||||
<p onClick={() => handleItemClick(msg.AlarmId)}>{msg.Message}</p>
|
||||
</IFComponent>
|
||||
</Scrollbars>
|
||||
<div
|
||||
title='下一条'
|
||||
title="下一条"
|
||||
onClick={handleNext}
|
||||
className={`alarm-notice__content-next ${!msg.TotalCount ? 'disabled' : ''}`}
|
||||
>
|
||||
<Icon type='arrow-right' />
|
||||
<Icon type="arrow-right" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
AlarmNotice.propTypes = {
|
||||
webSocketHost: PropTypes.string.isRequired,
|
||||
onItemClick: PropTypes.func
|
||||
}
|
||||
onItemClick: PropTypes.func,
|
||||
};
|
||||
|
||||
export default connect(({ login }) => ({ login }))(AlarmNotice)
|
||||
export default connect(({ login }) => ({ login }))(AlarmNotice);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user