feat: notice

src/components/GlobalHeader/NoticeIconView.js

 import React, { Component } from 'react';
-
-import { message, Tag, notification } from 'antd';
-import moment from 'moment';
 import { connect } from 'react-redux';
-
 import NoticeIcon from '../NoticeIcon';
 import styles from './index.less';
 import Notifier, {NEW_MESSAGE} from '../Notifier';
@@ -34,7 +30,6 @@ class NoticeIconView extends Component {
     })
   };
 
-
   render() {
     return (
       <NoticeIcon
@@ -47,6 +42,7 @@ class NoticeIconView extends Component {
           title="通知"
           emptyText="你已查看所有通知"
           confirmRead={this.notifier.confirmRead}
+          loadMore={this.notifier.loadMore}
         />
       </NoticeIcon>
     );
@@ -58,6 +54,7 @@ const mapStateToProps = state => {
     global: state.getIn(['global', 'globalConfig']),
   };
 };
+
 export default connect(
   mapStateToProps,
   null,

src/components/NoticeIcon/NoticeList.js

 import React from 'react';
 
-import { Avatar, List } from 'antd';
+import { List, Spin } from 'antd';
 import classNames from 'classnames';
 import styles from './NoticeList.less';
 import Alarm from './Templates/Alarm';
@@ -18,52 +18,125 @@ const Empty = ({ emptyText }) => (
   </div>
 );
 
-const NoticeList = ({ data = [], emptyText, confirmRead }) => {
-  if (!data || data.length === 0) {
-    return <Empty emptyText={emptyText} />;
+class NoticeList extends React.Component {
+  constructor(props) {
+    super(props);
+    this.data = props.data;
+    this.emptyText = props.emptyText;
+    this.confirmRead = props.confirmRead;
+    this.loadMore = props.loadMore;
+    this.container = React.createRef();
+    this.state = {
+      isLoading: false,
+    };
   }
-  return (
-    <div className={styles.container}>
-      <List
-        className={styles.list}
-        dataSource={data}
-        renderItem={(item, i) => {
-          const itemCls = classNames(styles.item, {
-            [styles.read]: item.read,
+
+  componentDidMount() {
+    if (this.container.current) {
+      this.container.current.addEventListener(
+        'scroll',
+        this.throttle(this.handleScroll.bind(this), 30),
+      );
+    }
+  }
+
+  throttle(fn, wait) {
+    var pre = Date.now();
+    return function() {
+      var context = this;
+      var args = arguments;
+      var now = Date.now();
+      if (now - pre >= wait) {
+        fn.apply(context, args);
+        pre = Date.now();
+      }
+    };
+  }
+
+  handleScroll(e) {
+    e.stopPropagation();
+    if (!this.container.current) return;
+    let current = this.container.current;
+    if (
+      current.scrollHeight - current.scrollTop - current.offsetHeight <=
+      100
+    ) {
+      this.handleLoadMore();
+    }
+  }
+
+  handleLoadMore() {
+    if (this.state.isLoading) return;
+    this.setState(
+      {
+        isLoading: true,
+      },
+      () => {
+        if (!this.loadMore) return;
+        this.loadMore().then(data => {
+          this.setState({
+            isLoading: false,
           });
-          let messageTemplate = <></>;
-          switch (item.infoType) {
-            case 'scadaType':
-              messageTemplate = (
-                <Alarm message={item} confirmRead={confirmRead} />
-              );
-              break;
-            case 'caseType':
-              messageTemplate = (
-                <Case message={item} confirmRead={confirmRead} />
-              );
-              break;
-            case 'sysType':
-              messageTemplate = (
-                <Notice message={item} confirmRead={confirmRead} />
-              );
-              break;
-            default:
-              messageTemplate = (
-                <Unknown message={item} confirmRead={confirmRead} />
-              );
-              break;
-          }
-          return (
-            <List.Item className={itemCls} key={item.id || i}>
-              {messageTemplate}
-            </List.Item>
-          );
-        }}
-      />
-      <div className={styles.bottomBar}>下拉加载更多</div>
-    </div>
-  );
-};
+        });
+      },
+    );
+  }
+
+  render() {
+    if (!this.data || this.data.length === 0) {
+      return <Empty emptyText={this.emptyText} />;
+    }
+    return (
+      <div className={styles.container} ref={this.container}>
+        <List
+          className={styles.list}
+          dataSource={this.data}
+          renderItem={(item, i) => {
+            const itemCls = classNames(styles.item, {
+              [styles.read]: item.read,
+            });
+            let messageTemplate = <></>;
+            switch (item.infoType) {
+              case 'scadaType':
+                messageTemplate = (
+                  <Alarm message={item} confirmRead={this.confirmRead} />
+                );
+                break;
+              case 'caseType':
+                messageTemplate = (
+                  <Case message={item} confirmRead={this.confirmRead} />
+                );
+                break;
+              case 'sysType':
+                messageTemplate = (
+                  <Notice message={item} confirmRead={this.confirmRead} />
+                );
+                break;
+              default:
+                messageTemplate = (
+                  <Unknown message={item} confirmRead={this.confirmRead} />
+                );
+                break;
+            }
+            return (
+              <List.Item className={itemCls} key={item.id || i}>
+                {messageTemplate}
+              </List.Item>
+            );
+          }}
+        />
+        <div className={styles.bottomBar}>
+          {this.state.isLoading ? (
+            <>
+              <Spin /> 加载中...
+            </>
+          ) : (
+            <span>下拉加载更多</span>
+          )}
+        </div>
+      </div>
+    );
+  }
+}
 
 export default NoticeList;

src/components/NoticeIcon/Templates/Alarm/index.js

@@ -27,20 +27,27 @@ export class AlarmContent {
 const Alarm = ({ message, confirmRead }) => {
   let alarmContent = message.infoContent;
   const history = useHistory();
-  const goPath = (item) => {
-    confirmRead(false,[message.id]);
-    let path= item.webPath ? `/civweb4/${item.webPath}` : `/civweb4/product/scada/AlertMonitoring/AlertMonitoring`
+  const goPath = item => {
+    confirmRead(false, [message.id]);
+    let path = item.webPath
+      ? `/civweb4/${item.webPath}`
+      : `/civweb4/product/scada/AlertMonitoring/AlertMonitoring`;
     history.push(path);
-  }
+  };
   return (
-    <div  className={classNames(styles.scada,commonStyles.messageContainer) } title="点击查看详情" onClick={()=> goPath(message)}>
+    <div
+      className={classNames(styles.scada, commonStyles.messageContainer)}
+      title="点击查看详情"
+      onClick={() => goPath(message)}
+    >
       <div className={commonStyles.title}>
         <span>消息</span>
         <img
           className={commonStyles.confirm}
           title="点击标为已读"
-          onClick={() => {
-             confirmRead(false,[message.id]);
+          onClick={e => {
+            e.stopPropagation();
+            confirmRead(false, [message.id]);
           }}
           src="https://panda-water.cn/Web4/assets/images/message/%E5%8B%BE%E6%B5%85.png"
         />

src/components/Notifier/index.js

@@ -53,6 +53,8 @@ class Notifier {
     this.MQTTClient = null;
     this.MQTTOptions = {};
     this.IsNeedReconnect = true;
+    this.pageIndex=1;
+    this.pageSize=10;
 
     // 对外接口处理this指向问题
     this.start=this.start.bind(this);
@@ -60,6 +62,7 @@ class Notifier {
     this.subscribe=this.subscribe.bind(this);
     this.unsubscribe=this.unsubscribe.bind(this);
     this.confirmRead=this.confirmRead.bind(this);
+    this.loadMore=this.loadHisMessages.bind(this);
   }
 
   // 对外接口
@@ -72,7 +75,6 @@ class Notifier {
   stop() {
     this.disconnectMQTTServer();
   }
-
   subscribe(type, handler) {
     if (!(type in this._subscribers)) {
       this._subscribers[type] = [];
@@ -108,7 +110,6 @@ class Notifier {
       }
     });
   }
-
   confirmRead(isAll = false, hisIDs = []) {
     let list = [];
     if (
@@ -279,7 +280,8 @@ class Notifier {
   }
 
   // 工具类
-  async loadHisMessages({ userID, pageIndex = 1, pageSize = 10 }) {
+  async loadHisMessages({ userID, pageIndex = this.pageIndex, pageSize = this.pageSize }) {
+    debugger;
     let me = this;
     return Http.getInformationInfo({
       userID,