fix: message bug

7be1624e · 邓晓峰 · c2a85c3f · 7be1624e · 7be1624e · 7be1624e
Commit 7be1624e authored Jan 04, 2021 by 邓晓峰
5 changed files
--- a/src/components/GlobalHeader/NoticeIconView.js
+++ b/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>
+
+                <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.videoVisible ? this.notifier.renderVideoElement : 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.notifier.renderSysElement: null
-        }
+        {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 {
-    updateConfig(config) {
-      dispatch(actionCreators.getConfig(config));
-    },
-  }
-}
+const mapDispatchToProps = dispatch => ({
+  updateConfig(config) {
+    dispatch(actionCreators.getConfig(config));
+  },
+});

 export default connect(
  mapStateToProps,

--- a/src/components/NoticeIcon/NoticeList.js
+++ b/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:

--- a/src/components/NoticeIcon/Templates/Alarm/index.js
+++ b/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>

--- a/src/components/NoticeIcon/Templates/Notice/index.js
+++ b/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>

--- a/src/components/Notifier/index.js
+++ b/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)
  }