fix: 添加历史消息报警弹窗

src/components/GlobalHeader/NoticeIconView.js

-import React, { Component } from 'react';
+import React, { Component, useMemo, useState } from 'react';
 
-import { Button, Form, Input, Modal, notification } from 'antd';
+import { Button, Form, Input, Modal, notification, Pagination } from 'antd';
 import { connect } from 'react-redux';
 import { Notifier, NoticeIcon, FormattedMessage } from '@wisdom-utils/components';
 import { ERR_OK, MESSAGE_TYPE, NEW_MESSAGE } from '@wisdom-utils/components/lib/AppLayout/notifier/constants';
@@ -13,6 +13,79 @@ import styles from './index.less';
 import { history } from '@wisdom-utils/runtime';
 
 const { TextArea } = Input;
+
+const PlatformModal = ({ platformVisible, handleClosePlatform, handlerMointer, messages = [] }) => {
+  const [pageIndex, setPageIndex] = useState(1);
+  const message = useMemo(() => {
+    return messages[pageIndex-1];
+  }, [messages, pageIndex]);
+
+  return (
+    <Modal
+      title={<FormattedMessage id='component.noticeIcon.modal.alarm.title'/>}
+      maskClosable={false}
+      visible={platformVisible}
+      zIndex={5000}
+      className={styles.platformModal}
+      footer={<Pagination 
+        simple
+        total={messages.length}
+        pageSize={1}
+        pageIndex={pageIndex}
+        showSizeChanger={false}
+        onChange={(page, pageSize) => setPageIndex(page)}
+      />}
+      onCancel={() => handleClosePlatform()}
+      centered
+    >
+      <div className={styles.alarmContent}>
+        {/* eslint-disable-next-line jsx-a11y/alt-text */}
+        <img
+          src="https://panda-water.com/web4/assets/images/message/报警图标.svg"
+          alt=""
+        />
+        <div className={styles.content}>
+          <div className={styles['content-top']}>
+            <a
+              onClick={event =>
+                handlerMointer(event, message, true,)
+              }
+            >
+              {message && message.infoContent && message.infoContent.title}
+            </a>
+            <span
+              title={<FormattedMessage id='component.noticeIcon.messsage.statused'/>}
+              onClick={event =>
+                handlerMointer(event, message, false,)
+              }
+            />
+          </div>
+
+          <div className={styles['content-mid']}>
+            <b>
+              {message && message.infoContent && message.infoContent.alarmType}
+            </b>
+            {`|${message && message.infoContent && message.infoContent.alarmContent}`}
+          </div>
+          <div className={styles['content-bottom']}>
+            <p>
+              <b>
+                {message && message.infoContent && message.infoContent.alarmValue}
+                /
+              </b>
+              {message && message.infoContent && message.infoContent.alarmThreshold}
+            </p>
+            <span>
+              {message && message.time}
+            </span>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  )
+}
+
+
 /* eslint-disable */
 class NoticeIconView extends Component {
   constructor(props) {
@@ -32,6 +105,7 @@ class NoticeIconView extends Component {
       sysMessage: {},
       alarmMessage: {},
       videoMessage: {},
+      popupVisible: false,
     };
     // this.renderPlatform
     try {
@@ -47,6 +121,10 @@ class NoticeIconView extends Component {
     );
   }
 
+  get platformMessages() {
+    return this.state.noticeData.filter(item => item.infoLevel === '4');
+  }
+
   async componentDidMount() {
     this.notifier.subscribe(NEW_MESSAGE, this.onNewMessage.bind(this));
     this.notifier.start();
@@ -81,6 +159,15 @@ class NoticeIconView extends Component {
     }
   }
 
+  onPopupVisibleChange = value => {
+    this.setState({
+      popupVisible: value,
+      platformVisible: this.platformMessages.length > 0 ? true : this.state.platformVisible,
+      sysTopVisible: false,
+      videoVisible: false,
+    });
+  };
+
   onNewMessage = messages => {
     this.setState({
       count: messages.totalCount,
@@ -105,19 +192,24 @@ class NoticeIconView extends Component {
   };
 
   renderPlatform = message => {
-    const messageContent =
-      this.props.global.mqtt_mess.MessageLevel === '2.0' &&
-      isJSON(message.infoContent)
-        ? JSON.parse(message.infoContent)
-        : message.infoContent;
+    if (!this.state.platformVisible) {
+      this.setState({
+        platformVisible: true,
+      })
+    }
+    // const messageContent =
+    //   this.props.global.mqtt_mess.MessageLevel === '2.0' &&
+    //   isJSON(message.infoContent)
+    //     ? JSON.parse(message.infoContent)
+    //     : message.infoContent;
 
-    this.setState({
-      platformVisible: true,
-      alarmMessage: {
-        message,
-        messageContent,
-      },
-    });
+    // this.setState({
+    //   platformVisible: true,
+    //   alarmMessage: {
+    //     message,
+    //     messageContent,
+    //   },
+    // });
   };
 
   renderVideo = message => {
@@ -283,6 +375,8 @@ class NoticeIconView extends Component {
           config={this.props.global}
           bell={this.props.bell}
           renderFooter={this.renderNotifierFooter}
+          popupVisible={this.state.popupVisible}
+          onPopupVisibleChange={this.onPopupVisibleChange}
         >
           <NoticeIcon.Tab
             list={this.state.noticeData}
@@ -295,81 +389,16 @@ class NoticeIconView extends Component {
             hasMore={this.notifier.hasMore}
           />
         </NoticeIcon>
-        {this.state.platformVisible && this.state.alarmMessage && (
-          <Modal
-            title={<FormattedMessage id='component.noticeIcon.modal.alarm.title'/>}
-            visible={this.state.platformVisible}
-            zIndex={5000}
-            className={styles.platformModal}
-            footer={null}
-            onCancel={() => this.handleClosePlatform()}
-            centered
-          >
-            <div className={styles.alarmContent}>
-              {/* eslint-disable-next-line jsx-a11y/alt-text */}
-              <img
-                src="https://panda-water.com/web4/assets/images/message/报警图标.svg"
-                alt=""
-              />
-              <div className={styles.content}>
-                <div className={styles['content-top']}>
-                  <a
-                    onClick={event =>
-                      this.handlerMointer(
-                        event,
-                        this.state.alarmMessage.message,
-                        true,
-                      )
-                    }
-                  >
-                    {this.state.alarmMessage &&
-                      this.state.alarmMessage.messageContent &&
-                      this.state.alarmMessage.messageContent.title}
-                  </a>
-                  <span
-                    title={<FormattedMessage id='component.noticeIcon.messsage.statused'/>}
-                    onClick={event =>
-                      this.handlerMointer(
-                        event,
-                        this.state.alarmMessage.message,
-                        false,
-                      )
-                    }
-                  />
-                </div>
-
-                <div className={styles['content-mid']}>
-                  <b>
-                    {this.state.alarmMessage &&
-                      this.state.alarmMessage.messageContent &&
-                      this.state.alarmMessage.messageContent.alarmType}
-                  </b>
-                  {`|${this.state.alarmMessage &&
-                    this.state.alarmMessage.messageContent &&
-                    this.state.alarmMessage.messageContent.alarmContent}`}
-                </div>
-                <div className={styles['content-bottom']}>
-                  <p>
-                    <b>
-                      {this.state.alarmMessage &&
-                        this.state.alarmMessage.messageContent &&
-                        this.state.alarmMessage.messageContent.alarmValue}
-                      /
-                    </b>
-                    {this.state.alarmMessage &&
-                      this.state.alarmMessage.messageContent &&
-                      this.state.alarmMessage.messageContent.alarmThreshold}
-                  </p>
-                  <span>
-                    {this.state.alarmMessage &&
-                      this.state.alarmMessage.message &&
-                      this.state.alarmMessage.message.time}
-                  </span>
-                </div>
-              </div>
-            </div>
-          </Modal>
-        )}
+        {
+          this.state.platformVisible && (
+            <PlatformModal
+              platformVisible={this.state.platformVisible}
+              handleClosePlatform={this.handleClosePlatform}
+              messages={this.platformMessages}
+              handlerMointer={this.handlerMointer}
+            />
+          )
+        }
 
         {this.state.videoVisible && this.state.videoMessage && (
           <Modal

src/components/GlobalHeader/index.less

@@ -250,9 +250,9 @@
     .@{ant-prefix}-modal-close {
       color: #fff;
       .@{ant-prefix}-modal-close-x {
-        width: 30px;
-        height: 30px;
-        line-height: 30px;
+        width: 40px;
+        height: 40px;
+        line-height: 40px;
         font-size: 14px;
       }
     }
@@ -314,6 +314,7 @@
       display: flex;
       flex-direction: column;
       flex: 1;
+      overflow: hidden;
       &-top {
         font-size: 20px;
         font-family: Source Han Sans CN;
@@ -329,7 +330,7 @@
           text-overflow: ellipsis;
           overflow: hidden;
           white-space: nowrap;
-          width: 60%;
+          margin-right: 30px;
         }
         span {
           width: 18px;