125 lines
3.6 KiB
JavaScript
125 lines
3.6 KiB
JavaScript
import React, { useState, useEffect, useRef } from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { connect } from 'dva'
|
|
import { Icon, Badge } 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 [msg, setMsg] = useState({
|
|
AlarmId: null,
|
|
TotalCount: 0,
|
|
Message: ''
|
|
})
|
|
useEffect(() => {
|
|
let timer = -1
|
|
if (msg && !msg.TotalCount && !msg.Message && visible) {
|
|
timer = setTimeout(() => {
|
|
setVisible(false)
|
|
}, 5000)
|
|
}
|
|
|
|
return () => { clearTimeout(timer) }
|
|
}, [msg, visible])
|
|
|
|
const refOfMsg = useRef(msg)
|
|
useEffect(() => {
|
|
refOfMsg.current = msg
|
|
})
|
|
|
|
const socket = useRef()
|
|
useEffect(() => {
|
|
const { userId: UserId, OrgId } = props.login
|
|
if (UserId && OrgId) {
|
|
const socketIns = new Socket({
|
|
url: props.webSocketHost,
|
|
onopen: handleSocketOpened,
|
|
onmessage: handleSocketOnMsg
|
|
})
|
|
socket.current = socketIns
|
|
}
|
|
|
|
return () => {
|
|
socket.current && socket.current.close()
|
|
}
|
|
}, [props.login.userId, props.login.OrgId, props.login.Tenant])
|
|
|
|
const handleSocketOpened = (socketIns) => {
|
|
const { user, userId: UserId, OrgId, Tenant } = props.login
|
|
const openedPayload = {
|
|
TypeCode: 'P0001',
|
|
Tenant,
|
|
Data: JSON.stringify({
|
|
UserId,
|
|
UserName: user.NAME,
|
|
OrgId,
|
|
ClientType: 0
|
|
})
|
|
}
|
|
socketIns.send(JSON.stringify(openedPayload))
|
|
handleSocketSendMsg({}, socketIns)
|
|
}
|
|
|
|
const handleSocketOnMsg = (data) => {
|
|
if (data) {
|
|
const { TypeCode, Data } = JSON.parse(data)
|
|
if (TypeCode === 'M0003' && Data) {
|
|
Data.Message && !isEqual(Data.Message, refOfMsg.current.Message) && !visible && setVisible(true)
|
|
setMsg(Data)
|
|
}
|
|
}
|
|
}
|
|
|
|
const handleSocketSendMsg = (Data, socketIns) => {
|
|
const { userId: UserId, OrgId, Tenant } = props.login
|
|
// 这里 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 handleNext = () => {
|
|
if (!msg.TotalCount) return
|
|
handleSocketSendMsg({ AlarmId: msg.AlarmId })
|
|
}
|
|
|
|
const handleItemClick = (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'>
|
|
<Badge count={msg.TotalCount} />
|
|
</div>
|
|
</div>
|
|
<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='下一条'
|
|
onClick={handleNext}
|
|
className={`alarm-notice__content-next ${!msg.TotalCount ? 'disabled' : ''}`}
|
|
>
|
|
<Icon type='arrow-right' />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
AlarmNotice.propTypes = {
|
|
webSocketHost: PropTypes.string.isRequired,
|
|
onItemClick: PropTypes.func
|
|
}
|
|
|
|
export default connect(({ login }) => ({ login }))(AlarmNotice)
|