fix: 报警恢复修改

src/components/GlobalHeader/NoticeIconView.js

@@ -27,19 +27,25 @@ const jessibucaObj = {
   loadingText: '视频加载中',
   decoder: '/JessibucaVideo/decoder.js',
 };
-const PlatformModal = ({ platformVisible, handleClosePlatform, handlerMointer, messages = [] }) => {
+const PlatformModal = ({ platformVisible, handleClosePlatform, handlerMointer, messages = [], type }) => {
   const [pageIndex, setPageIndex] = useState(1);
   const message = useMemo(() => messages[pageIndex - 1], [messages, pageIndex]);
   const isAlarm = message.infoClasses === MESSAGE_TYPE.ALARM_TYPE;
-  const defaultIcon = isAlarm
+  const isRecover = type === 'recover';
+  const defaultIcon =
+    isAlarm && !isRecover
       ? 'https://panda-water.com/web4/assets/images/message/报警图标.svg'
       : getMessageTypeIcon(message);
-  const icon = message.webIcon ? `${window.location.origin}/${message.webIcon}` : defaultIcon;
+  const icon = message.webIcon && !isRecover ? `${window.location.origin}/${message.webIcon}` : defaultIcon;
   return (
     <Modal
       title={
         isAlarm ? (
+          isRecover ? (
+            '报警恢复'
+          ) : (
             <FormattedMessage id="component.noticeIcon.modal.alarm.title" />
+          )
         ) : (
           <FormattedMessage id="component.noticeIcon.model.system.title" />
         )
@@ -50,7 +56,11 @@ const PlatformModal = ({ platformVisible, handleClosePlatform, handlerMointer, m
       visible={platformVisible}
       zIndex={5000}
       wrapClassName={styles.platformModalWrap}
-      className={classNames(styles.platformModal, !isAlarm && styles.platformModalDefault)}
+      className={classNames(
+        styles.platformModal,
+        !isAlarm && styles.platformModalDefault,
+        isRecover && styles.platformModalRecover,
+      )}
       footer={
         <Pagination
           simple
@@ -82,16 +92,24 @@ const PlatformModal = ({ platformVisible, handleClosePlatform, handlerMointer, m
           {isAlarm ? (
             <>
               <div className={styles['content-mid']}>
-                <b>{message && message.infoContent && message.infoContent.alarmType}</b>
+                <b className={classNames(isRecover && styles['content-mid-recover'])}>
+                  {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>
+                  <b className={classNames(isRecover && styles['content-bottom-recover'])}>
+                    {message && message.infoContent && message.infoContent.alarmValue}
+                  </b>
+                  {!isRecover && (
+                    <>
                       {' / '}
                       预设值：
                       {message && message.infoContent && message.infoContent.alarmThreshold}
+                    </>
+                  )}
                 </p>
               </div>
             </>
@@ -115,6 +133,7 @@ class NoticeIconView extends Component {
       count: 0,
       noticeData: [],
       platformVisible: false,
+      platformRecoverVisible: false,
       videoVisible: false,
       // eslint-disable-next-line react/no-unused-state
       noticeVisible: false,
@@ -143,7 +162,11 @@ class NoticeIconView extends Component {
   }
 
   get platformMessages() {
-    return this.state.noticeData.filter(item => item.infoLevel === '4');
+    return this.state.noticeData.filter(item => item.infoLevel === '4' && !item?.infoContent?.alarmState);
+  }
+
+  get platformRecoverMessages() {
+    return this.state.noticeData.filter(item => item.infoLevel === '4' && item?.infoContent?.alarmState === 1 );
   }
 
   async componentDidMount() {
@@ -186,6 +209,7 @@ class NoticeIconView extends Component {
         this.setState({
           popupVisible: value,
           platformVisible: this.platformMessages.length > 0 ? true : this.state.platformVisible,
+          platformRecoverVisible: this.platformRecoverMessages.length > 0 ? true : this.state.platformRecoverVisible,
           sysTopVisible: false,
           videoVisible: false,
         });
@@ -194,6 +218,7 @@ class NoticeIconView extends Component {
       this.setState({
         popupVisible: value,
         platformVisible: this.platformMessages.length > 0 ? true : this.state.platformVisible,
+        platformRecoverVisible: this.platformRecoverMessages.length > 0 ? true : this.state.platformRecoverVisible,
         sysTopVisible: false,
         videoVisible: false,
       });
@@ -219,14 +244,22 @@ class NoticeIconView extends Component {
   };
 
   handleClosePlatform = event => {
-    this.setState({ platformVisible: false });
+    this.setState({ platformVisible: false, platformRecoverVisible: false, });
   };
 
   // 显示报警弹窗
   renderPlatform = message => {
-    if (!this.state.platformVisible) {
+    const { infoContent = {} } = message;
+    const { alarmState = 0 } = infoContent;
+    if (!alarmState && !this.state.platformVisible) {
       this.setState({
         platformVisible: true,
+        platformRecoverVisible: false
+      })
+    } else if (alarmState && !this.state.platformRecoverVisible) {
+      this.setState({
+        platformVisible: false,
+        platformRecoverVisible: true,
       })
     }
   };
@@ -318,6 +351,7 @@ class NoticeIconView extends Component {
     this.setState({
       sysTopVisible: true,
       platformVisible: false,
+      platformRecoverVisible: false,
       videoVisible: false,
       sysMessage: {
         message,
@@ -347,6 +381,7 @@ class NoticeIconView extends Component {
     }
     this.setState({
       platformVisible: false,
+      platformRecoverVisible: false,
     });
   };
 
@@ -428,6 +463,18 @@ class NoticeIconView extends Component {
           )
         }
 
+        {
+          this.state.platformRecoverVisible && this.platformRecoverMessages.length > 0 && (
+            <PlatformModal
+              platformVisible={this.state.platformRecoverVisible}
+              handleClosePlatform={this.handleClosePlatform}
+              messages={this.platformRecoverMessages}
+              handlerMointer={this.handlerMointer}
+              type={'recover'}
+            />
+          )
+        }
+
         {this.state.videoVisible && this.state.videoMessage?.list?.length && (
           <VideoSliderModal
             modalInfo={{

src/components/GlobalHeader/index.less

@@ -460,6 +460,9 @@
         b {
           color: rgba(255, 36, 36, 1);
         }
+        &-recover {
+          color: #00b809 !important;
+        }
       }
       &-bottom {
         display: flex;
@@ -471,6 +474,9 @@
             color: #ff2929;
           }
         }
+        &-recover {
+          color: #00b809 !important;
+        }
         span {
           font-size: 16px;
           font-family: Source Han Sans CN;
@@ -488,6 +494,13 @@
     }
   }
 }
+.platformModalRecover {
+  :global {
+    .@{ant-prefix}-modal-header {
+      background: #00b809;
+    }
+  }
+}
 .videoPopup {
   :global(.@{ant-prefix}-modal-content) {
     height: 520px;

src/layouts/AppLayout/notifier/utils/index.js

@@ -9,19 +9,25 @@ import taskIcon from '../images/types/task.png';
 import workIcon from '../images/types/work.png';
 import writeIcon from '../images/types/write.png';
 import otherIcon from '../images/types/other.png';
+import recoverIcon from '../images/types/recover.png';
 
 export const getMessageTypeIcon = message => {
-  const { webIcon } = message;
-  if (webIcon) return `${window.location.origin}/${webIcon}`;
-  const { messageType, infoType } = message;
+  const { messageType, infoType, infoContent = {} } = message;
+  const { alarmState = 0 } = infoContent;
   let icon = otherIcon;
   if (infoType === '通用报警') {
     icon = alarmIcon;
+    if (alarmState === 1) {
+      icon = recoverIcon;
+      return icon;
+    }
   } else if (infoType === '系统通知') {
     icon = noticeIcon;
   } else if (infoType === '工单提醒') {
     icon = workIcon;
   }
+  const { webIcon } = message;
+  if (webIcon) return `${window.location.origin}/${webIcon}`;
   if (!messageType) return icon;
   if (messageType === '工时填报') {
     icon = writeIcon;