feat: add systemMessage push

src/api/notificationService.js

@@ -7,6 +7,8 @@ const API = {
     '/CityInterface/rest/services/CountyProduct.svc/SCADAOper/getMqttSitecode',
   POST_INFORMATION_STATUS:
     '/CityInterface/rest/services/CountyProduct.svc/SCADAOper/PostInformationStatus',
+  POST_ADD_OPTIONS:
+    '/CityInterface/rest/services/WisdomUnion.svc/CustomerManage/AddOption',
 };
 /* eslint-disable */
 export default vm => {
@@ -22,4 +24,8 @@ export default vm => {
       .post(`${API.POST_INFORMATION_STATUS}?${paramsStr}`)
       .then(res => Promise.resolve(res));
   };
+
+  vm.postAddOptions = (params = {}) => {
+    return vm.post(API.POST_ADD_OPTIONS, params).then(res => Promise.resolve(res))
+  }
 };

src/components/GlobalHeader/NoticeIconView.js

@@ -2,11 +2,11 @@ import React, { Component } from 'react';
 
 import { Modal } from 'antd';
 import { connect } from 'react-redux';
-
+import { Form, Input, Button } from 'antd';
 import isProd from '../../utils/env';
 import NoticeIcon from '../NoticeIcon';
 import Notifier from '../Notifier';
-import { MESSAGE_TYPE, NEW_MESSAGE } from '../Notifier/constants';
+import { ERR_OK, MESSAGE_TYPE, NEW_MESSAGE } from '../Notifier/constants';
 import styles from './index.less';
 import { findPathByWidget, isJSON } from '../../utils/utils';
 import { actionCreators } from '../../containers/App/store';
@@ -25,12 +25,14 @@ class NoticeIconView extends Component {
       renderVideo: null,
       // eslint-disable-next-line react/no-unused-state
       initVisible: false,
+      sysTopVisible: false,
     };
     // this.renderPlatform
     this.notifier = new Notifier(
       this.props.global.userInfo,
       this.renderVideo,
       this.renderPlatform,
+      this.renderSysPlatform,
       this.props,
     );
   }
@@ -74,7 +76,11 @@ 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;
+    const messageContent =
+      this.props.global.mqtt_mess.MessageLevel === '2.0' &&
+      isJSON(message.infoContent)
+        ? JSON.parse(message.infoContent)
+        : message.infoContent;
     this.setState({
       platformVisible: true,
     });
@@ -177,6 +183,66 @@ class NoticeIconView extends Component {
       </Modal>
     );
   };
+  handlerOptions = (value) => {
+    Http.postAddOptions({
+      UserName: this.props.global.userInfo.fullName,
+      Type: "其他问题",
+      System: "熊猫智联",
+      Content: value.content,
+      Phone: value.phone,
+      UserID: this.props.global.userInfo.OID,
+      Picture: ''
+    }).then(res => {
+      if(res.statusCode === ERR_OK) {
+        this.setState({
+          sysTopVisible: false
+        })
+      }
+    })
+  }
+  renderSysPlatform = message => {
+    console.log("renderSysPlatform", message);
+    const noticeContent =
+      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
+
+    });
+    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]);
@@ -225,6 +291,10 @@ class NoticeIconView extends Component {
         }
 
         {this.state.videoVisible ? this.notifier.renderVideoElement : null}
+
+        {
+          this.state.sysTopVisible ? this.notifier.renderSysElement: null
+        }
       </>
     );
   }

src/components/GlobalHeader/index.less

@@ -265,7 +265,7 @@
           text-overflow: ellipsis;
           overflow: hidden;
           white-space: nowrap;
-          width: 80%;
+          width: 60%;
         }
         span {
           width: 18px;
@@ -385,3 +385,51 @@
     height: 28px;
   }
 }
+
+.noticeModal {
+  :global {
+    .@{ant-prefix}-modal-body {
+      padding: 10px 24px;
+      b {
+        float: right;
+        text-align: right;
+        display: block;
+        &:last-child {
+          float: inherit;
+        }
+      }
+      .@{ant-prefix}-form-item {
+        margin-bottom: 20px;
+        padding-top: 4px;
+      }
+      .@{ant-prefix}-form-item {
+        &:last-child {
+          text-align: center;
+        }
+      }
+    }
+  }
+  :global(.@{ant-prefix}-modal-header) {
+    padding: 10px 24px !important;
+  }
+  :global(.@{ant-prefix}-modal-close .@{ant-prefix}-modal-close-x) {
+    width: 45px;
+    height: 45px;
+    font-size: 12px;
+    line-height: 35px;
+  }
+  .title {
+    font-size: 20px;
+    font-weight: bold;
+  }
+  .content {
+    text-indent: 24px;
+    padding-top: 4px;
+  }
+  .time {
+    display: block;
+    font-weight: 500;
+    font-size: 16px;
+    text-align: right;
+  }
+}

src/components/NoticeIcon/NoticeList.js

@@ -124,7 +124,7 @@ class NoticeList extends React.Component {
                 break;
               case 'sysType':
                 messageTemplate = (
-                  <Notice message={item} confirmRead={this.confirmRead} />
+                  <Notice message={item} confirmRead={this.confirmRead} config={this.props.config}/>
                 );
                 break;
               default:

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

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 
 import commonStyles from '../common.less';
 import styles from './index.less';
+import { isJSON } from '../../../../utils/utils';
 
 export class NoticeContent {
   // eslint-disable-next-line no-undef
@@ -15,22 +16,15 @@ export class NoticeContent {
   }
 }
 
-const Notice = ({ message, confirmRead }) => {
+const Notice = ({ message, confirmRead, config }) => {
   // eslint-disable-next-line no-debugger
-  debugger
-  const noticeContent = message.infoContent;
+  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
     confirmRead(false, [message.id]);
-    const webPath =
-      item.webPath || 'product/notification/HistoryNotice/HistoryNotice';
-    window.share.event.emit('listenerMointer', {
-      // eslint-disable-next-line no-undef
-      widgetId: widgetID,
-      label: '系统公告',
-      url: webPath,
-    });
   };
   return (
     <div
@@ -55,7 +49,7 @@ const Notice = ({ message, confirmRead }) => {
           <i>{noticeContent.noticeType}</i>
           {noticeContent.noticeTitle}
         </p>
-        <p>{noticeContent.noticeContent}</p>
+        <p dangerouslySetInnerHTML={{ __html: noticeContent.noticeContent }}></p>
         <p className={commonStyles.messageTime}>{message.time}</p>
       </div>
     </div>

src/components/Notifier/constants.js

@@ -33,6 +33,7 @@ export const USERNAME = 'mao2080';
 export const PASSWORD = '123';
 export const PLATFORM_LEVEL = '4';
 export const VIDEO_LEVEL = '5';
+export const SYS_LEVEL = '6';
 export const ERR_OK = '0000';
 export const DEFAULT_TCP_PORT = 443;
 export const DEFAULT_TCP_IP = 'emqttd.panda-water.cn';

src/components/Notifier/index.js

@@ -16,7 +16,7 @@ import {
   NEW_MESSAGE,
   PASSWORD,
   PLATFORM_LEVEL,
-  REQUEST_SERVICE,
+  REQUEST_SERVICE, SYS_LEVEL,
   USERNAME,
   VIDEO_LEVEL,
 } from './constants';
@@ -25,7 +25,7 @@ import createMessage from './message';
 // eslint-disable-next-line no-undef
 const Logger = logger('mqtt');
 class Notifier {
-  constructor(userInfo, renderVideo, renderPlatform, props) {
+  constructor(userInfo, renderVideo, renderPlatform, renderSysPlatform, props) {
     this.userInfo = userInfo;
     this.messageCache = {
       totalCount: 0,
@@ -70,6 +70,8 @@ class Notifier {
     this.renderVideoElement = null;
     this.renderPlatform = renderPlatform;
     this.renderPlatformElement = null;
+    this.renderSysPlatform = renderSysPlatform;
+    this.renderSysElement = null;
     this.props = props;
   }
 
@@ -276,6 +278,7 @@ class Notifier {
 
   onMessageArrived(buffer) {
     try {
+
       const parseMessage = JSON.parse(buffer.payloadString);
       const userInfo = this.getUserInfo();
       const infoType = this.getMessageType(parseMessage.infoType);
@@ -351,7 +354,12 @@ class Notifier {
         }
         const message = createMessage(messString);
         this.messageCache.totalCount += 1;
-        this.messageCache.messages.push(message);
+        if(message.infoLevel === SYS_LEVEL) {
+          this.messageCache.messages.unshift(message)
+        } else {
+          this.messageCache.messages.push(message);
+        }
+
         this.publish(NEW_MESSAGE, this.messageCache);
         if (
           messString.infoLevel === PLATFORM_LEVEL &&
@@ -366,6 +374,8 @@ class Notifier {
           window.speechSynthesis.speak(state);
         } else if (message.infoLevel === PLATFORM_LEVEL) {
           console.log(messString);
+        } else if(message.infoLevel === SYS_LEVEL) {
+          this.renderSysNoticePlatform(Object.assign(message, { messContent }))
         } else {
           state.lang = 'zh';
           state.rate = 1;
@@ -417,17 +427,21 @@ class Notifier {
     const self = this;
     function notifyMessage(message) {
       const parseMessage = JSON.parse(message.payloadString);
-
       let content = '';
-      if(self.getMessageLevel() === "2.0") {
-        const messageContent = JSON.parse(parseMessage.content);
-        content += `${messageContent.alarmType} ${messageContent.alarmDevice} ${messageContent.alarmContent} ${messageContent.alarmValue} / ${messageContent.alarmThreshold}`
-      } else {
-        for (let i = 0; i < parseMessage.content.split('\\n').length; i++) {
-          content += `${parseMessage.content.split('\\n')[i]} `;
+      if(message.level !== SYS_LEVEL) {
+        if(self.getMessageLevel() === "2.0") {
+          if(message.level === "4") {
+            const messageContent = JSON.parse(parseMessage.content);
+            content += `${messageContent.alarmType} ${messageContent.alarmDevice} ${messageContent.alarmContent} ${messageContent.alarmValue} / ${messageContent.alarmThreshold}`
+          }
+        } else {
+          for (let i = 0; i < parseMessage.content.split('\\n').length; i++) {
+            content += `${parseMessage.content.split('\\n')[i]} `;
+          }
         }
       }
 
+
       const messageBody = {
         title: '',
         content,
@@ -438,31 +452,33 @@ class Notifier {
       } else {
         messageBody.title = '新通知：';
       }
-
-      if (!('Notification' in window)) {
-        message.warn('This browser does not support desktop notification');
-      } else if (Notification.permission === 'granted') {
-        const notification = new Notification(messageBody.title, {
-          body: `${messageBody.content}`,
-          icon: 'https://panda-water.com/web4/assets/images/icon/熊猫新1.png',
-        });
-        notification.onclick = () => {
-          notification.close();
-        };
-      } else if (Notification.permission !== 'denied') {
-        Notification.requestPermission(permission => {
-          if (permission === 'granted') {
-            const notification = new Notification(messageBody.title, {
-              body: `${messageBody.content}`,
-              icon:
-                'https://panda-water.com/web4/assets/images/icon/熊猫新1.png',
-            });
-            notification.onclick = () => {
-              notification.close();
-            };
-          }
-        });
+      if(content !== "") {
+        if (!('Notification' in window)) {
+          message.warn('This browser does not support desktop notification');
+        } else if (Notification.permission === 'granted') {
+          const notification = new Notification(messageBody.title, {
+            body: `${messageBody.content}`,
+            icon: 'https://panda-water.com/web4/assets/images/icon/熊猫新1.png',
+          });
+          notification.onclick = () => {
+            notification.close();
+          };
+        } else if (Notification.permission !== 'denied') {
+          Notification.requestPermission(permission => {
+            if (permission === 'granted') {
+              const notification = new Notification(messageBody.title, {
+                body: `${messageBody.content}`,
+                icon:
+                  'https://panda-water.com/web4/assets/images/icon/熊猫新1.png',
+              });
+              notification.onclick = () => {
+                notification.close();
+              };
+            }
+          });
+        }
       }
+
     }
     notifyMessage(message);
   }
@@ -472,6 +488,10 @@ class Notifier {
       this.renderPlatform && this.renderPlatform(message);
   }
 
+  renderSysNoticePlatform(message) {
+    this.renderSysElement = this.renderSysPlatform && this.renderSysPlatform(message)
+  }
+
   renderPopVideo(message) {
     this.renderVideoElement = this.renderVideo && this.renderVideo(message);
   }