fix: message bug

src/components/GlobalHeader/NoticeIconView.js

 import React, { Component } from 'react';
 
-import { Modal } from 'antd';
 import { connect } from 'react-redux';
-import { Form, Input, Button } from 'antd';
+import { Form, Input, Button, Modal } from 'antd';
 import isProd from '../../utils/env';
 import NoticeIcon from '../NoticeIcon';
 import Notifier from '../Notifier';
@@ -26,6 +25,9 @@ class NoticeIconView extends Component {
       // eslint-disable-next-line react/no-unused-state
       initVisible: false,
       sysTopVisible: false,
+      sysMessage: {},
+      alarmMessage: {},
+      videoMessage: {},
     };
     // this.renderPlatform
     this.notifier = new Notifier(
@@ -81,52 +83,14 @@ class NoticeIconView extends Component {
       isJSON(message.infoContent)
         ? JSON.parse(message.infoContent)
         : message.infoContent;
+
     this.setState({
       platformVisible: true,
+      alarmMessage: {
+        message,
+        messageContent,
+      },
     });
-    return (
-      <Modal
-        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={() => this.handlerMointer(message, true)}>
-                {messageContent.title}
-
-              </a>
-              <span
-                title="点击标为已读"
-                onClick={() => this.handlerMointer(message, false)}
-              />
-            </div>
-
-            <div className={styles['content-mid']}>
-              <b>{messageContent.alarmType}</b>
-              {`|${messageContent.alarmContent}`}
-            </div>
-            <div className={styles['content-bottom']}>
-              <p>
-                <b>{messageContent.alarmValue}/</b>
-                {messageContent.alarmThreshold}
-              </p>
-              <span>{message.time}</span>
-            </div>
-          </div>
-        </div>
-      </Modal>
-    );
   };
 
   renderVideo = message => {
@@ -158,98 +122,63 @@ class NoticeIconView extends Component {
     const url = `${baseURI}/civweb4/video/indexAll.html?ID=${id}&name=${name}&site=${
       props.global.userInfo.site
     }`;
-    /* eslint-disable */
-    return (
-      <Modal
-        visible={this.state.videoVisible}
-        title={name}
-        footer={null}
-        centered
-        width="50%"
-        zIndex={1500}
-        ref={videoRef => (this.videoRef = videoRef)}
-        className={styles.videoPopup}
-        onCancel={() => this.handleCloseVideo()}
-      >
-        <div className="web4_console_component">
-          {/* eslint-disable-next-line jsx-a11y/iframe-has-title */}
-          <iframe
-            id="videoIframe"
-            style={{ width: '100%', height: '100%' }}
-            frameBorder="0"
-            src={url}
-          />
-        </div>
-      </Modal>
-    );
+
+    this.setState({
+      // eslint-disable-next-line react/no-unused-state
+      videoMessage: {
+        name,
+        url,
+      },
+    });
   };
-  handlerOptions = (value) => {
+
+  handlerOptions = value => {
+    // eslint-disable-next-line no-undef
     Http.postAddOptions({
       UserName: this.props.global.userInfo.fullName,
-      Type: "其他问题",
-      System: "熊猫智联",
+      Type: '其他问题',
+      System: '熊猫智联',
       Content: value.content,
       Phone: value.phone,
       UserID: this.props.global.userInfo.OID,
-      Picture: ''
+      Picture: '',
     }).then(res => {
-      if(res.statusCode === ERR_OK) {
+      if (res.statusCode === ERR_OK) {
         this.setState({
-          sysTopVisible: false
-        })
-      }
-    })
+          sysTopVisible: false,
+        });
       }
+    });
+  };
+
   renderSysPlatform = message => {
-    console.log("renderSysPlatform", message);
     const noticeContent =
-      this.props.global.mqtt_mess.MessageLevel === '2.0' && isJSON(message.infoContent)
+      this.props.global.mqtt_mess.MessageLevel === '2.0' &&
+      isJSON(message.infoContent)
         ? JSON.parse(message.infoContent)
         : message.infoContent;
     this.setState({
       sysTopVisible: true,
       platformVisible: false,
-      videoVisible: false
-
+      videoVisible: false,
+      sysMessage: {
+        message,
+        noticeContent,
+      },
     });
-    return (
-      <Modal
-        title="系统通知"
-        visible={this.state.sysTopVisible}
-        zIndex={8000}
-        className={styles.noticeModal}
-        onCancel={() => this.setState({sysTopVisible: false})}
-        footer={null}
-        centered
-      >
-        <div className={styles.alarmContent}>
-          <div className={styles.title}>{noticeContent.noticeTitle}</div>
-          <div className={styles.content} dangerouslySetInnerHTML={{ __html: noticeContent.noticeContent }}/>
-          <div className={styles.time}>{message.time}</div>
-          <Form formLayout="vertical" onFinish={this.handlerOptions}>
-            <div>1、您还有其他建议和反馈吗?</div>
-            <Form.Item name="content" rules={[{ required: true, message: '请填写反馈内容' }]}>
-                <Input/>
-            </Form.Item>
-            <div>2、怎么联系您（您填写了建议和反馈，也请帮忙填写下您的联系方式，以便我们有不清楚的问题时，能与您联系沟通）</div>
-            <Form.Item name="phone">
-              <Input />
-            </Form.Item>
-            <Form.Item>
-              <Button htmlType="submit" type="primary">提交</Button>
-            </Form.Item>
-          </Form>
-        </div>
-      </Modal>
-    )
-  }
+  };
 
   handlerMointer = (item, detail) => {
     this.notifier.confirmRead(false, [item.id]);
     if (detail) {
       const widgetID = 'widget_city_综合运营_管网监控_实时监控_报警监控';
       const webPath = 'product/scada/AlertMonitoring/AlertMonitoring';
-      let widget = findPathByWidget("productex/water/IOTMonitor/RealTimeAlarm/RealTimeAlarm", this.props.global.widgets, "", "url");
+      const widget = findPathByWidget(
+        'productex/water/IOTMonitor/RealTimeAlarm/RealTimeAlarm',
+        this.props.global.widgets,
+        '',
+        'url',
+      );
       window.share.event.emit('listenerMointer', {
         widgetId: widgetID,
         label: '实时报警',
@@ -261,11 +190,11 @@ class NoticeIconView extends Component {
     });
   };
 
-  handlePopupVisibleChange = bool => {
+  handlerSysDetail = message => {
     this.setState({
-      // eslint-disable-next-line react/no-unused-state
-      noticeVisible: bool,
+      sysTopVisible: true,
     });
+    this.renderSysPlatform(message);
   };
 
   render() {
@@ -281,20 +210,148 @@ class NoticeIconView extends Component {
             title="通知"
             emptyText="你已查看所有通知"
             confirmRead={this.notifier.confirmRead}
+            handlerSysDetail={this.handlerSysDetail}
             loadMore={this.notifier.loadMore}
             hasMore={this.notifier.hasMore}
           />
         </NoticeIcon>
-        {this.state.platformVisible
-          ? this.notifier.renderPlatformElement
-          : null
+        {this.state.platformVisible && this.state.alarmMessage && (
+          <Modal
+            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={() =>
+                      this.handlerMointer(this.state.alarmMessage.message, true)
+                    }
+                  >
+                    {this.state.alarmMessage &&
+                      this.state.alarmMessage.messageContent &&
+                      this.state.alarmMessage.messageContent.title}
+                  </a>
+                  <span
+                    title="点击标为已读"
+                    onClick={() =>
+                      this.handlerMointer(
+                        this.state.alarmMessage.message,
+                        false,
+                      )
                     }
+                  />
+                </div>
 
-        {this.state.videoVisible ? this.notifier.renderVideoElement : null}
+                <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.sysTopVisible ? this.notifier.renderSysElement: null
-        }
+        {this.state.videoVisible && (
+          <Modal
+            visible={this.state.videoVisible}
+            title={this.state.videoMessage.name}
+            footer={null}
+            centered
+            width="50%"
+            zIndex={1500}
+            ref={videoRef => (this.videoRef = videoRef)}
+            className={styles.videoPopup}
+            onCancel={() => this.handleCloseVideo()}
+          >
+            <div className="web4_console_component">
+              {/* eslint-disable-next-line jsx-a11y/iframe-has-title */}
+              <iframe
+                id="videoIframe"
+                style={{ width: '100%', height: '100%' }}
+                frameBorder="0"
+                src={this.state.videoMessage.url}
+              />
+            </div>
+          </Modal>
+        )}
+
+        {this.state.sysTopVisible && this.state.sysMessage && (
+          <Modal
+            title="系统通知"
+            visible
+            zIndex={8000}
+            className={styles.noticeModal}
+            onCancel={() => this.setState({ sysTopVisible: false })}
+            footer={null}
+            centered
+          >
+            <div className={styles.alarmContent}>
+              <div className={styles.title}>
+                {this.state.sysMessage.noticeContent.noticeTitle}
+              </div>
+              <div
+                className={styles.content}
+                dangerouslySetInnerHTML={{
+                  __html: this.state.sysMessage.noticeContent.noticeContent,
+                }}
+              />
+              <div className={styles.time}>
+                {this.state.sysMessage.message.time}
+              </div>
+              <Form formLayout="vertical" onFinish={this.handlerOptions}>
+                <div>1、您还有其他建议和反馈吗?</div>
+                <Form.Item
+                  name="content"
+                  rules={[{ required: true, message: '请填写反馈内容' }]}
+                >
+                  <Input />
+                </Form.Item>
+                <div>
+                  2、怎么联系您（您填写了建议和反馈，也请帮忙填写下您的联系方式，以便我们有不清楚的问题时，能与您联系沟通）
+                </div>
+                <Form.Item name="phone">
+                  <Input />
+                </Form.Item>
+                <Form.Item>
+                  <Button htmlType="submit" type="primary">
+                    提交
+                  </Button>
+                </Form.Item>
+              </Form>
+            </div>
+          </Modal>
+        )}
       </>
     );
   }
@@ -304,13 +361,11 @@ const mapStateToProps = state => ({
   global: state.getIn(['global', 'globalConfig']),
 });
 
-const mapDispatchToProps = dispatch => {
-  return {
+const mapDispatchToProps = dispatch => ({
   updateConfig(config) {
     dispatch(actionCreators.getConfig(config));
   },
-  }
-}
+});
 
 export default connect(
   mapStateToProps,

src/components/NoticeIcon/NoticeList.js

@@ -23,6 +23,7 @@ class NoticeList extends React.Component {
     super(props);
     this.emptyText = props.emptyText;
     this.confirmRead = props.confirmRead;
+    this.handlerSysDetail = props.handlerSysDetail
     this.loadMore = props.loadMore;
     this.hasMore = props.hasMore;
     this.container = React.createRef();
@@ -124,7 +125,7 @@ class NoticeList extends React.Component {
                 break;
               case 'sysType':
                 messageTemplate = (
-                  <Notice message={item} confirmRead={this.confirmRead} config={this.props.config}/>
+                  <Notice message={item} confirmRead={this.confirmRead} config={this.props.config} handlerSysDetail={this.handlerSysDetail}/>
                 );
                 break;
               default:

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

@@ -28,7 +28,6 @@ export class AlarmContent {
 const Alarm = ({ message, confirmRead, config }) => {
   const alarmContent = (config.mqtt_mess.MessageLevel === "2.0" && isJSON(message.infoContent)) ? JSON.parse(message.infoContent): message.infoContent;
   const goPath = item => {
-    debugger
     confirmRead(false, [message.id]);
     const widgetID = 'widget_city_综合运营_管网监控_实时监控_报警监控';
     const webPath = 'product/scada/AlertMonitoring/AlertMonitoring';
@@ -41,6 +40,8 @@ const Alarm = ({ message, confirmRead, config }) => {
     });
   };
   const alarmValue = alarmContent && alarmContent.alarmValue && alarmContent.alarmValue.split(' ');
+  let alarmTitle = alarmContent && alarmContent.alarmValue && alarmContent.title.split(' ');
+  alarmTitle = alarmTitle[1];
   return (
     <div
       className={classNames(styles.scada, commonStyles.messageContainer)}
@@ -63,7 +64,7 @@ const Alarm = ({ message, confirmRead, config }) => {
       <div className={commonStyles.content}>
         <p>
           <i>{alarmContent.alarmType}</i>
-          {alarmContent.alarmDevice}
+          {alarmTitle}
         </p>
         <p>{alarmContent.alarmContent}</p>
         <p>

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

@@ -16,15 +16,19 @@ export class NoticeContent {
   }
 }
 
-const Notice = ({ message, confirmRead, config }) => {
+const Notice = ({ message, confirmRead, config, handlerSysDetail }) => {
+
   // eslint-disable-next-line no-debugger
   const noticeContent =
     config.mqtt_mess.MessageLevel === '2.0' && isJSON(message.infoContent)
       ? JSON.parse(message.infoContent)
       : message.infoContent;
   const goPath = item => {
+    // eslint-disable-next-line no-debugger
+    debugger
     // eslint-disable-next-line no-debugger
     confirmRead(false, [message.id]);
+    handlerSysDetail && handlerSysDetail(message);
   };
   return (
     <div
@@ -49,7 +53,8 @@ const Notice = ({ message, confirmRead, config }) => {
           <i>{noticeContent.noticeType}</i>
           {noticeContent.noticeTitle}
         </p>
-        <p dangerouslySetInnerHTML={{ __html: noticeContent.noticeContent }}></p>
+        {/* eslint-disable-next-line react/no-danger */}
+        <p dangerouslySetInnerHTML={{ __html: noticeContent.noticeContent }} />
         <p className={commonStyles.messageTime}>{message.time}</p>
       </div>
     </div>

src/components/Notifier/index.js

@@ -283,7 +283,7 @@ class Notifier {
       const userInfo = this.getUserInfo();
       const infoType = this.getMessageType(parseMessage.infoType);
       let state = null;
-
+      debugger
       if (
         _.isEmpty(parseMessage.tousers) ||
         userInfo.OID == parseMessage.tousers ||
@@ -375,6 +375,7 @@ class Notifier {
         } else if (message.infoLevel === PLATFORM_LEVEL) {
           console.log(messString);
         } else if(message.infoLevel === SYS_LEVEL) {
+          debugger
           this.renderSysNoticePlatform(Object.assign(message, { messContent }))
         } else {
           state.lang = 'zh';
@@ -489,6 +490,8 @@ class Notifier {
   }
 
   renderSysNoticePlatform(message) {
+    debugger
+    this.renderSysElement = null;
     this.renderSysElement = this.renderSysPlatform && this.renderSysPlatform(message)
   }