feat: 添加查看全部历史消息

package.json

@@ -110,9 +110,9 @@
         "@wisdom-map/arcgismap": "1.4.0-6",
         "@wisdom-map/basemap": "1.1.0-2",
         "@wisdom-map/util": "^1.0.27-0",
-        "@wisdom-utils/components": "0.1.235",
+        "@wisdom-utils/components": "0.1.239",
         "@wisdom-utils/runtime": "0.0.32",
-        "@wisdom-utils/utils": "0.1.275",
+        "@wisdom-utils/utils": "0.1.279",
         "animate.css": "^4.1.1",
         "antd": "^4.20.7",
         "compression": "1.7.4",
@@ -145,6 +145,7 @@
         "react-helmet": "6.0.0-beta",
         "react-helmet-async": "^1.0.4",
         "react-iframe": "^1.8.0",
+        "react-infinite-scroll-component": "^6.1.0",
         "react-intl": "^3.12.1",
         "react-redux": "7.0.2",
         "react-router-config": "^5.1.1",

src/api/service/notification.js

@@ -5,13 +5,23 @@ const API = {
     '/CityInterface/rest/services/CountyProduct.svc/SCADAOper/GetInformationInfo',
   GET_MQTT_SITE_CODE:
     '/CityInterface/rest/services/CountyProduct.svc/SCADAOper/getMqttSitecode',
+  GET_ALL_INFORMATION_INFO:
+    '/PandaWater/CityWater/Notification/GetAllInformationInfo',
   POST_INFORMATION_STATUS:
-    '/CityInterface/rest/services/CountyProduct.svc/SCADAOper/PostInformationStatus',
+    '/PandaWater/CityWater/Notification/PostInformationStatus',
   POST_ADD_OPTIONS:
     '/CityInterface/rest/services/WisdomUnion.svc/CustomerManage/AddOption',
+  GET_CURRENT_INFO_TYPE:
+    'PandaWater/CityWater/Notification/GetCurrentInfoType',
 };
 
 const notificationService = {
+  // 获取通知类型列表
+  getCurrentInfoType: {
+    url: API.GET_CURRENT_INFO_TYPE,
+    method: constants.REQUEST_METHOD_GET,
+    type: constants.REQUEST_HTTP,
+  },
   getInformationInfo: {
     url: API.GET_INFORMATION,
     method: constants.REQUEST_METHOD_GET,
@@ -22,9 +32,14 @@ const notificationService = {
     method: constants.REQUEST_METHOD_GET,
     type: constants.REQUEST_HTTP,
   },
+  getAllInformationInfo: {
+    url: API.GET_ALL_INFORMATION_INFO,
+    method: constants.REQUEST_METHOD_GET,
+    type: constants.REQUEST_HTTP,
+  },
   postInformationStatus: {
     url: API.POST_INFORMATION_STATUS,
-    method: constants.REQUEST_METHOD_POST,
+    method: constants.REQUEST_METHOD_GET,
     type: constants.REQUEST_HTTP,
   },
   postAddOptions: {
@@ -34,12 +49,5 @@ const notificationService = {
   },
 };
 
-export const postInformationStatus = param =>
-  request({
-    url: API.POST_INFORMATION_STATUS,
-    method: constants.REQUEST_METHOD_POST,
-    data: param.data,
-    params: param.query,
-});
 
 export default notificationService;

src/components/GlobalHeader/NoticeIconView.js

@@ -10,6 +10,7 @@ import { actionCreators } from '../../containers/App/store';
 import isProd from '../../utils/env';
 // import NoticeIcon from '../NoticeIcon';
 import styles from './index.less';
+import { history } from '@wisdom-utils/runtime';
 
 const { TextArea } = Input;
 /* eslint-disable */
@@ -158,6 +159,19 @@ class NoticeIconView extends Component {
     });
   };
 
+  // 消息弹窗Footer
+  renderNotifierFooter = () => {
+    const toNotifications = e => {
+      e.stopPropagation();
+      history.push && history.push('/system/notifications')
+    }
+    return (
+      <div className={styles.notificationFoter}>
+        <a onClick={toNotifications}>查看全部历史消息</a>
+      </div>
+    )
+  }
+
   handlerOptions = value => {
     // eslint-disable-next-line no-undef
     service
@@ -235,6 +249,7 @@ class NoticeIconView extends Component {
           confirmRead={this.notifier.confirmRead}
           config={this.props.global}
           bell={this.props.bell}
+          renderFooter={this.renderNotifierFooter}
         >
           <NoticeIcon.Tab
             list={this.state.noticeData}

src/components/GlobalHeader/index.less

@@ -672,3 +672,19 @@
     padding: 12px 16px 0 16px!important;
   }
 }
+
+.notificationFoter {
+  background-color: #f6f6f6;
+  border-top: 1px solid #e3e3e3;
+  & > a {
+    color: #44acb6;
+    display: block;
+    font-size: 14px;
+    line-height: 20px;
+    padding: 12px 16px;
+    text-align: center;
+    &:hover {
+      color: #51c6cf;
+    }
+  }
+}
\ No newline at end of file

src/pages/system/notifications/index.less

+@import "~antd/es/style/themes/default.less";
+@imgSrc: '@/assets/images/system/notifications';
+
+.contentPage {
+  width: 100%;
+  height: 100%;
+  background: url('@{imgSrc}/messageBg.png') no-repeat;
+  // padding: 20px 300px 0 300px;
+
+  .messageBox {
+    width: 931px;
+    height: 100%;
+    background: #FFFFFF;
+    border-radius: 5px;
+    margin-left: 50%;
+    transform: translateX(-50%);
+
+    .headerTop {
+      width: 100%;
+      height: 50px;
+      line-height: 50px;
+      text-align: center;
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #000000;
+      opacity: 0.85;
+    }
+
+    .headerContent {
+      display: flex;
+      height: 32px;
+      line-height: 32px;
+      margin-bottom: 10px;
+
+      .selectForm {
+        display: flex;
+        flex-grow: 1;
+        margin-left: 44px;
+
+        .form {
+          // width: 85px;
+          // // width: 200px;
+        }
+      }
+
+      .sortForm {
+        display: flex;
+        flex-grow: 10;
+
+        .form {
+          .sortBox {
+            display: flex;
+            width: 226px;
+            background: #FFFFFF;
+            border: 1px solid #E4E6EA;
+            border-radius: 5px;
+            cursor: pointer;
+
+            .tab {
+              width: 100%;
+              text-align: center;
+              color: #a6a6a6;
+            }
+
+            .tab:nth-of-type(1) {
+              border-right: 1px solid #E4E6EA;
+            }
+
+            .tabActive {
+              color: #262626;
+              // font-weight: 700;
+            }
+          }
+
+        }
+      }
+
+      .haveRead {
+        flex-grow: 1;
+        color: #8D8D90;
+        font-size: 14px;
+        cursor: pointer;
+      }
+
+      .haveRead:hover {
+        color: #1890ff;
+      }
+    }
+
+    .msgContent {
+      height: 100%;
+      width: 878px;
+      margin-left: 50%;
+      transform: translateX(-50%);
+      overflow-y: scroll;
+      padding-bottom: 100px;
+
+      .loaderTip {
+        width: 200px;
+        height: 36px;
+        line-height: 36px;
+        background-color: #f6f6f6;
+        border-radius: 5px;
+        text-align: center;
+        margin-top: 5px;
+        margin-left: 50%;
+        transform: translateX(-50%);
+        color: #5a5a5f;
+      }
+
+      .msgItem {
+        position: relative;
+        display: flex;
+        height: 85px;
+        border-bottom: 1px solid #EDEEF1;
+        cursor: pointer;
+
+
+        .left {
+          width: 36px;
+          height: 100%;
+          line-height: 85px;
+          margin-left: 17px;
+
+          img {
+            width: 36px;
+            height: 36px;
+          }
+        }
+
+        .msgCenter {
+
+          flex: 1;
+          width: 0;
+          margin-left: 30px;
+          margin-right: 10px;
+          // white-space: nowrap;
+          // // overflow: hidden;
+          // text-overflow: ellipsis;
+
+
+          .msgBox {
+            position: relative;
+            top: 50%;
+            transform: translateY(-50%);
+
+            .title {
+              color: #000000;
+              font-weight: 700;
+              font-size: 14px;
+              height: 22px;
+            }
+
+            .msgDesc {
+              color: #000000;
+              font-size: 14px;
+              height: 22px;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+            }
+          }
+
+        }
+
+        .right {
+          line-height: 85px;
+          margin-right: 10px;
+        }
+      }
+
+      .msgItem:hover {
+        background-color: #F4F4F5;
+      }
+
+      .msgHasRead {
+        opacity: 0.5;
+      }
+    }
+  }
+  :global {
+    .@{ant-prefix}-tabs-ink-bar.@{ant-prefix}-tabs-ink-bar-animated {
+      transform: translateZ(0) !important;
+    }
+  }
+}
\ No newline at end of file

src/pages/system/notifications/utils.js

+export const formatDate = (date, fmt) => {
+    if (date === void 0) date = new Date();
+    if (fmt === void 0) fmt = 'yyyy-MM-dd HH:mm:ss';
+    if (typeof date === 'string') {
+      date = new Date(formatTimeByPattern(date));
+    } else if (typeof date === 'number') {
+      date = new Date(date);
+    }
+    const o = {
+      'M+': date.getMonth() + 1, // 月份
+      'd+': date.getDate(), // 日
+      'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12, // 小时
+      'H+': date.getHours(), // 小时
+      'm+': date.getMinutes(), // 分
+      's+': date.getSeconds(), // 秒
+      'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
+      S: date.getMilliseconds(), // 毫秒
+    };
+    const week = {
+      '0': '\u65e5',
+      '1': '\u4e00',
+      '2': '\u4e8c',
+      '3': '\u4e09',
+      '4': '\u56db',
+      '5': '\u4e94',
+      '6': '\u516d',
+    };
+    if (/(y+)/.test(fmt)) {
+      fmt = fmt.replace(RegExp.$1, `${date.getFullYear()}`.substr(4 - RegExp.$1.length));
+    }
+    if (/(E+)/.test(fmt)) {
+      fmt = fmt.replace(
+        RegExp.$1,
+        (RegExp.$1.length > 1 ? (RegExp.$1.length > 2 ? '\u661f\u671f' : '\u5468') : '') +
+          week[`${date.getDay()}`],
+      );
+    }
+    for (let k in o) {
+      if (new RegExp(`(${k})`).test(fmt)) {
+        fmt = fmt.replace(
+          RegExp.$1,
+          RegExp.$1.length === 1 ? o[k] : `00${o[k]}`.substr(`${o[k]}`.length),
+        );
+      }
+    }
+    return fmt;
+  };
\ No newline at end of file

src/routes/config.js

@@ -9,6 +9,7 @@ import CommonMenu from '../pages/commonMenu';
 import Iframe from '../pages/iframe';
 import Login from '../pages/user/login';
 import NoSecret from '../pages/user/login/noSecret';
+import Notifications from '../pages/system/notifications';
 
 export const dyRoutes = (routes, layout, theme) => {
   // eslint-disable-next-line no-shadow
@@ -58,6 +59,11 @@ export const dyRoutes = (routes, layout, theme) => {
             component: CommonMenu,
             // name: '菜单收藏'
           },
+          { 
+            // 历史消息箱
+            path: '/system/notifications',
+            component: Notifications,
+          },
           {
             path: '/iframe',
             component: Iframe,