feat: notice

src/components/GlobalHeader/NoticeIconView.js

@@ -34,80 +34,19 @@ class NoticeIconView extends Component {
     })
   };
 
-  /* eslint-disable no-unused-vars */
-  changeReadState = clickedItem => {};
-
-  /* eslint-disable no-unused-vars */
-  handleNoticeClear = (title, key) => {};
-
-  getNoticeData = () => {
-    const { notices = [] } = this.props;
-
-    if (!notices || notices.length === 0 || !Array.isArray(notices)) {
-      return {};
-    }
-
-    const newNotices = notices.map(notice => {
-      const newNotice = { ...notice };
-
-      if (newNotice.datetime) {
-        newNotice.datetime = moment(notice.datetime).fromNow();
-      }
-
-      if (newNotice.id) {
-        newNotice.key = newNotice.id;
-      }
-
-      if (newNotice.extra && newNotice.status) {
-        const color = {
-          todo: '',
-          processing: 'blue',
-          urgent: 'red',
-          doing: 'gold',
-        }[newNotice.status];
-        newNotice.extra = (
-          <Tag
-            color={color}
-            style={{
-              marginRight: 0,
-            }}
-          >
-            {newNotice.extra}
-          </Tag>
-        );
-      }
-
-      return newNotice;
-    });
-  };
 
   render() {
-    const { currentUser, fetchingNotices, onNoticeVisibleChange } = this.props;
-    const noticeData = [];
-    //this.getNoticeData();
-    const unreadMsg = [];
-    //this.getUnreadData(noticeData);
     return (
       <NoticeIcon
         className={styles.action}
         count={this.state.count}
-        onItemClick={item => {
-          this.changeReadState(item);
-        }}
-        loading={fetchingNotices}
-        confirmRead={this.notifier.confirmRead.bind(this.notifier)}
-        onClear={this.handleNoticeClear}
-        onPopupVisibleChange={onNoticeVisibleChange}
-        onViewMore={() => message.info('Click on view more')}
-        clearClose
+        confirmRead={this.notifier.confirmRead}
       >
         <NoticeIcon.Tab
-          tabKey="notification"
           list={this.state.noticeData}
           title="通知"
           emptyText="你已查看所有通知"
-          showViewMore
-          confirmRead={this.notifier.confirmRead.bind(this.notifier)}
+          confirmRead={this.notifier.confirmRead}
         />
       </NoticeIcon>
     );

src/components/GlobalHeader/RightContent.js

@@ -140,7 +140,7 @@ const GlobalHeaderRight = props => {
         <HomeIcon onClick={goHome}/>
         <OrderIcon onClick={handleOrder}/>
       </div>
-      <NoticeIconView notices={[]} />
+      <NoticeIconView />
       <Avatar menu global={props.global}/>
       {/* <SelectLang className={styles.action} /> */}
     </div>

src/components/NoticeIcon/NoticeList.js

@@ -18,12 +18,12 @@ const Empty = ({ emptyText }) => (
   </div>
 );
 
-const NoticeList = ({ data = [], onGoToWidget, emptyText, confirmRead }) => {
+const NoticeList = ({ data = [], emptyText, confirmRead }) => {
   if (!data || data.length === 0) {
     return <Empty emptyText={emptyText} />;
   }
   return (
-    <div>
+    <div className={styles.container}>
       <List
         className={styles.list}
         dataSource={data}

src/components/NoticeIcon/NoticeList.less

 @import '~antd/es/style/themes/default.less';
 
-.list {
+.container {
   max-height: 400px;
   overflow: auto;
   &::-webkit-scrollbar {
     display: none;
   }
-  .item {
-    overflow: hidden;
-    cursor: pointer;
-    .meta {
-      width: 100%;
+  .list {
+    .item {
+      overflow: hidden;
+      cursor: pointer;
+      .meta {
+        width: 100%;
+      }
+      &:hover {
+        background-color: @primary-1;
+      }
+      &:last-child {
+        border-bottom: 0;
+      }
     }
-    &:hover {
-      background-color: @primary-1;      
-    }
-    &:last-child {
-      border-bottom: 0;
-    }
-
-    
   }
-}
 
-.notFound {
-  padding: 73px 0 88px;
-  color: @text-color-secondary;
-  text-align: center;
-  border-radius: 0!important;
-  img {
-    display: inline-block;
-    height: 76px;
-    margin-bottom: 16px;
+  .notFound {
+    padding: 73px 0 88px;
+    color: @text-color-secondary;
+    text-align: center;
+    border-radius: 0 !important;
+    img {
+      display: inline-block;
+      height: 76px;
+      margin-bottom: 16px;
+    }
   }
-}
 
-.bottomBar {
-  height: 46px;
-  color: @text-color;
-  line-height: 46px;
-  text-align: center;
-  border-top: 1px solid @border-color-split;
-  border-radius: 0 0 @border-radius-base @border-radius-base;
-  transition: all 0.3s;
-  div {
-    display: inline-block;
-    width: 50%;
-    cursor: pointer;
+  .bottomBar {
+    height: 46px;
+    color: @text-color;
+    line-height: 46px;
+    text-align: center;
     transition: all 0.3s;
-    user-select: none;
-
-    &:only-child {
-      width: 100%;
-    }
-    &:not(:only-child):last-child {
-      border-left: 1px solid @border-color-split;
-    }
   }
-}
\ No newline at end of file
+}

src/components/NoticeIcon/index.js

@@ -10,9 +10,8 @@ import Icon from '@ant-design/icons';
 import HeaderDropdown from '../HeaderDropdown';
 import styles from './index.less';
 import NoticeList from './NoticeList';
-import http from '../../api';
 
-const { TabPane } = Tabs;
+
 const messageSvg = () => (
   <svg
     version="1.1"
@@ -48,12 +47,7 @@ const NoticeIcon = props => {
   const getNotificationBox = () => {
     const {
       children,
-      loading,
       confirmRead,
-      onClear,
-      onTabChange,
-      onItemClick,
-      onViewMore,
     } = props;
     if (!children) {
       return null;
@@ -67,24 +61,12 @@ const NoticeIcon = props => {
       const {
         list,
         title,
-        count,
-        tabKey,
-        showClear,
-        showViewMore,
       } = child.props;
-      const len = list && list.length ? list.length : 0;
-      const msgCount = count || count === 0 ? count : len;
-      const tabTitle = msgCount > 0 ? `${title} (${msgCount})` : title;
       panes.push(
         <NoticeList
           {...child.props}
           data={list}
           key={child}
-          onClear={() => onClear && onClear(title, tabKey)}
-          onClick={item => onItemClick && onItemClick(item, child.props)}
-          onViewMore={event => onViewMore && onViewMore(child.props, event)}
-          showClear={showClear}
-          showViewMore={showViewMore}
           title={title}
         />,
       );
@@ -100,7 +82,7 @@ const NoticeIcon = props => {
     );
   };
 
-  const { className, count, bell } = props;
+  const { className,  bell } = props;
 
   const [visible, setVisible] = useMergeValue(false, {
     value: props.popupVisible,

src/components/Notifier/index.js

@@ -53,6 +53,13 @@ class Notifier {
     this.MQTTClient = null;
     this.MQTTOptions = {};
     this.IsNeedReconnect = true;
+
+    // 对外接口处理this指向问题
+    this.start=this.start.bind(this);
+    this.stop=this.stop.bind(this);
+    this.subscribe=this.subscribe.bind(this);
+    this.unsubscribe=this.unsubscribe.bind(this);
+    this.confirmRead=this.confirmRead.bind(this);
   }
 
   // 对外接口