修改弹窗层级

src/components/Banner/ModeChange/index.jsx

@@ -0,0 +1,30 @@
+import React, { Component } from "react";
+import style from "./index.less";
+import ReactDom from "react-dom";
+import close from '../../../common/images/icon_close.png';
+import ok from '../../../common/images/confirm.png'
+
+class ModeChange extends Component {
+
+
+    render(){
+        const {closeConfigModal, changeType, confirmType, mode} = this.props
+        const domNode = document.getElementById('root');
+        return ReactDom.createPortal(<React.Fragment>
+            <div className={style['modal']}>
+            <div className={style['shade']} onClick={closeConfigModal}></div>
+            <div className={style['content']}>
+            <div className={style['close']}>设置<img src={close} onClick={closeConfigModal} /></div>
+            <p className={style['title']}>模式切换<i>（模式说明：切换模式会清空当前所有的数据）</i></p>
+            <ul>
+                <li className={+mode===0?style['selected']:''} onClick={() => changeType(0)}><img src={ok} />智能推送模式</li>
+                <li className={+mode===1?style['selected']:''} onClick={() => changeType(1)}><img src={ok} />纯文本模式</li>
+            </ul>
+            <div className={style['btn']} onClick={confirmType}>确认</div>
+            </div>
+        </div>
+      </React.Fragment>,domNode)
+    }
+}
+
+export default ModeChange;

src/components/Banner/ModeChange/index.less

@@ -0,0 +1,82 @@
+@import "~@less/variables.less";
+.modal {
+    .shade {
+      .maskZIndex;
+      position: fixed;
+      top: 0;
+      left:0;
+      right: 0;
+      bottom: 0;
+      background: #000;
+      opacity: 0.6;
+      filter:alpha(opacity=60);
+      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=60);";
+    }
+    .content {
+      position: fixed;
+      z-index: 2001;
+      top: 100px;
+      width: 820px;
+      left:50%;
+      margin-left: -410px;
+      height: 283px;
+      background: #fff;
+      .close{
+        line-height: 24px;
+        padding: 3px 3px 5px 10px;
+        border-bottom: 1px solid #EAEDF1;
+        img{
+          float: right;
+          margin: 0px;
+          cursor: pointer;
+        }
+      }
+      h1{
+        font-size: 16px;
+        letter-spacing: 0;
+        margin: 20px 0px 20px 10px;
+      }
+      ul {
+        margin: 0px 0px 0px 10px;
+        li {
+          width: 190px;
+          height: 44px;
+          line-height: 44px;
+          margin: 0px 0px 2px 0px;
+          padding: 0px 0px 0px 10px;
+          cursor: pointer;
+          &.selected{
+            background: rgba(59,158,208,0.1);
+            img{
+              visibility: visible;
+            }
+          }
+          img{
+            margin: -1px 4px 0 0;
+            visibility: hidden;
+          }
+        }
+      }
+      .btn {
+        .btnCom;
+        width: 80px;
+        height: 34px;
+        background:#3B9ED0;
+        color:#fff;
+        font-size: 14px;
+        line-height: 34px;
+        position: relative;
+        left: 50%;
+        margin-left: -40px;
+        top: 30px;
+      }
+    }
+  }
+  .title{
+    font-size: 16px;
+    text-indent: 10px;
+    margin: 22px 0px 21px 0;
+    i{
+      color: red;
+    }
+  }

src/components/Banner/index.jsx

@@ -13,6 +13,7 @@ import {getAllHis} from '@store/async-actions/fetchModules.js';
 import {timestampToTime,getCurrentDate} from '@utils/tools.js';
 import {dragBox} from '@utils/drag';
 import {CLEAR_COMSYMPTOMS} from '@store/types/mainSuit';
+import ModeChange from './ModeChange'
 
 class Banner extends Component {
   constructor(props){
@@ -113,7 +114,14 @@ class Banner extends Component {
             设置
           </div>
         </div>
-        {visible?<div className={style['modal']}>
+        {visible&& <ModeChange
+          mode = {mode}
+          closeConfigModal = {closeConfigModal}
+          changeType = {changeType}
+          confirmType = {confirmType}
+        >
+          </ModeChange>}
+        {/* {visible?<div className={style['modal']}>
           <div className={style['shade']} onClick={closeConfigModal}></div>
           <div className={style['content']}>
             <div className={style['close']}>设置<img src={close} onClick={closeConfigModal} /></div>
@@ -124,7 +132,7 @@ class Banner extends Component {
             </ul>
             <div className={style['btn']} onClick={confirmType}>确认</div>
           </div>
-        </div>:''}
+        </div>:''} */}
         {emergencyBox?<div className={style['modal']}>
             <div className={style['shade']} onClick={this.handleHisClose}></div>
             <Emergency show={emergencyBox} close={this.handleHisClose}/>

src/components/EmergencyProcedure/EmergencyModal/index.less

@@ -2,6 +2,7 @@
 @import "~@less/variables.less";
 
 .emergencyProdure {
+  .contentZIndex2;
   position: fixed;
   top: 50px;
   bottom: 10px;

src/components/Preview/index.jsx

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import {getAllDataList,getAllDataStringList} from '@utils/tools';
 import {dragBox} from '@utils/drag';
+import ReactDom from 'react-dom';
 import PreviewBody from '../PreviewBody';
 import store from '@store';
 import style from "./index.less";
@@ -18,20 +19,23 @@ class Preview extends Component {
     let baseList = store.getState();
     const dataJson = getAllDataList(baseList);
     const dataStr = getAllDataStringList(baseList);
-    return <div className={style['container']}>
-      <div className={style['shade']} onClick={onClose}></div>
-      <div className={style['modal']} id="previewWrapper">
-        <div id="previewStatic" className={`${style['close']} drag-title`}>预览</div>
-        <img src={close} onClick={onClose} />
-        <PreviewBody
-            preInfo={preInfo}
-            dataJson={dataJson}
-            dataStr={dataStr}
-            show={false}
-            come={'preview'}
-        ></PreviewBody>
+    const domNode = document.getElementById('root');
+    return ReactDom.createPortal(<React.Fragment>
+      <div className={style['container']}>
+        <div className={style['shade']} onClick={onClose}></div>
+        <div className={style['modal']} id="previewWrapper">
+          <div id="previewStatic" className={`${style['close']} drag-title`}>预览</div>
+          <img src={close} onClick={onClose} />
+          <PreviewBody
+              preInfo={preInfo}
+              dataJson={dataJson}
+              dataStr={dataStr}
+              show={false}
+              come={'preview'}
+          ></PreviewBody>
+        </div>
       </div>
-    </div>
+      </React.Fragment>,domNode)
   }
 }
 

src/components/Preview/index.less

@@ -1,6 +1,7 @@
+@import "~@less/variables.less";
 .container {
+  .maskZIndex;
   position: relative;
-  z-index: 2000;
   .shade {
     position: fixed;
     left: 0;

src/components/PrintPreview/index.jsx

@@ -1,4 +1,5 @@
 import React, { Component } from "react";
+import ReactDom from 'react-dom';
 import { getAllDataList, getAllDataStringList } from '@utils/tools';
 import { dragBox } from '@utils/drag';
 import style from "./index.less";
@@ -20,23 +21,25 @@ class PrintPreview extends Component {
         let baseList = store.getState();
         const dataJson = getAllDataList(baseList);
         const dataStr = getAllDataStringList(baseList);
-
-        return <div className={style['container']}>
-            <div className={style['shade']} onClick={onClose}></div>
-            <div className={style['modal']} id="previewPrintWrapper">
-                <div id="previewPrintStatic" className={`${style['close']} drag-title`}>打印</div>
-                <img src={close} onClick={onClose} />
-                  <PreviewBody
-                      preInfo={preInfo}
-                      dataJson={dataJson}
-                      dataStr={dataStr}
-                      show={true}
-                      onClose={onClose}
-                      save={save}
-                      come={'preview'}
-                  ></PreviewBody>
+        const domNode = document.getElementById('root');
+        return ReactDom.createPortal(<React.Fragment>
+            <div className={style['container']}>
+                <div className={style['shade']} onClick={onClose}></div>
+                <div className={style['modal']} id="previewPrintWrapper">
+                    <div id="previewPrintStatic" className={`${style['close']} drag-title`}>打印</div>
+                    <img src={close} onClick={onClose} />
+                    <PreviewBody
+                        preInfo={preInfo}
+                        dataJson={dataJson}
+                        dataStr={dataStr}
+                        show={true}
+                        onClose={onClose}
+                        save={save}
+                        come={'preview'}
+                    ></PreviewBody>
+                </div>
             </div>
-        </div>
+        </React.Fragment>,domNode)
     }
 }
 

src/components/PrintPreview/index.less

@@ -1,6 +1,7 @@
+@import "~@less/variables.less";
 .container {
+    .maskZIndex;
     position: relative;
-    z-index: 2000;
     .shade {
       position: fixed;
       left: 0;