隐藏报警框

src/feui/alarm-notice/index.js

@@ -1,61 +1,63 @@
-import React, { useState, useEffect, useRef } from 'react'
+import React, { useState, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types'
+import PropTypes from 'prop-types';
-import { connect } from 'dva'
+import { connect } from 'dva';
-import { Icon, Badge, Modal } from 'antd'
+import { Icon, Badge, Modal } from 'antd';
-import { Scrollbars } from 'react-custom-scrollbars'
+import { Scrollbars } from 'react-custom-scrollbars';
-import IFComponent from '../common/IFComponent'
+import IFComponent from '../common/IFComponent';
-import Socket from '../utils/socket'
+import Socket from '../utils/socket';
-import { isEqual } from 'lodash'
+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
+    loginRef.current = props.login;
-  }, [props.login])
+  }, [props.login]);
 
   useEffect(() => {
-    let timer = -1
+    let timer = -1;
     if (msg && !msg.TotalCount && !msg.Message && visible) {
       timer = setTimeout(() => {
-        setVisible(false)
+        setVisible(false);
-      }, 5000)
+      }, 5000);
     }
 
-    return () => { clearTimeout(timer) }
+    return () => {
-  }, [msg, visible])
+      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
+        onmessage: handleSocketOnMsg,
-      })
+      });
-      socket.current = socketIns
+      socket.current = socketIns;
     }
 
     return () => {
-      socket.current && socket.current.close()
+      socket.current && socket.current.close();
-    }
+    };
-  }, [props.login.userId, props.login.OrgId, props.login.Tenant])
+  }, [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
+        ClientType: 0,
-      })
+      }),
-    }
+    };
-    socketIns.send(JSON.stringify(openedPayload))
+    socketIns.send(JSON.stringify(openedPayload));
-    handleSocketSendMsg({}, socketIns)
+    handleSocketSendMsg({}, socketIns);
-  }
+  };
 
   const handleSocketOnMsg = (data) => {
     if (data) {
-      console.log('收到消息', data)
+      console.log('收到消息', data);
-      const { TypeCode, Data } = JSON.parse(data)
+      const { TypeCode, Data } = JSON.parse(data);
       if (TypeCode === 'M0003' && Data) {
-        Data.Message && !isEqual(Data.Message, refOfMsg.current.Message) && !visible && setVisible(true)
+        Data.Message && !isEqual(Data.Message, refOfMsg.current.Message) && !visible && setVisible(true);
-        setMsg(Data)
+        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 }) }
+    const payload = { TypeCode: 'M0003', Tenant, Data: JSON.stringify({ UserId, OrgId, ...Data }) };
-    socketIns = socketIns || socket.current
+    socketIns = socketIns || socket.current;
-    socketIns && socketIns.send(JSON.stringify(payload))
+    socketIns && socketIns.send(JSON.stringify(payload));
-  }
+  };
 
   const handleNext = () => {
-    if (!msg.TotalCount) return
+    if (!msg.TotalCount) return;
-    handleSocketSendMsg({ AlarmId: msg.AlarmId })
+    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 className={`alarm-notice ${visible ? 'visible' : ''}`} style={{ display: 'none' }}>
-      <div onClick={() => { setVisible(!visible) }} className='alarm-notice__toogle'>
+      <div
-        <Icon type='caret-up' />
+        onClick={() => {
-        <div className='alarm-notice__toogle-badge'>
+          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);