Merge remote-tracking branch 'origin/pouUpLevel' into settingDev

src/common/components/Calendar/index.less

@@ -1,6 +1,7 @@
 @import "~@less/mixin.less";
-
+@import "~@less/variables.less";
 .wrapper{
+  .contentZIndex1;
   width: 294px;
   padding: 5px;
   font-size: 0;
@@ -10,7 +11,6 @@
   position: absolute;
   top: 10px;
   right: 0;
-  z-index: 100;
   border: 1px solid #ccc;
   box-sizing: border-box;
   .top{

src/common/components/ComplexModal/index.less

@@ -1,8 +1,9 @@
 @import "~@less/mixin.less";
+@import "~@less/variables.less";
 .container {
   // position: relative;
   // padding-top: 40px;  //改为绝对定位，拖拽元素不在监听document，改为这个
-  z-index: 2000;
+ .maskZIndex;
   position: absolute;
   width: 100%;
   height: 100%;
@@ -56,11 +57,11 @@
     }
   }  
   .closeIcon{
+    .contentZIndex1;
     cursor: pointer;
     position: absolute;
     top: 14px;
     right: 10px;
-    z-index: 100;
     vertical-align: text-top;
   }
 }

src/common/components/ConfirmModal/index.less

@@ -1,5 +1,7 @@
 @import "~@less/mixin.less";
+@import "~@less/variables.less";
 .modal {
+    .maskContentZIndex1;
     position: fixed;
     top: 50%;
     left: 50%;
@@ -7,7 +9,6 @@
     border-radius: 5px;
     background: #fff;
     overflow: hidden;
-    z-index: 1999;
 }
 
 .modal-title {
@@ -74,6 +75,7 @@
 }
 
 .mask {
+    .maskZIndex;
     position: fixed;
     top: 0;
     left: 0;
@@ -83,5 +85,4 @@
     opacity: .6;
     filter:alpha(opacity=60);
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=60);";
-    z-index: 1998;
 }

src/common/components/DelToast/index.less

@@ -1,11 +1,11 @@
-// @import "~@less/mixin.less";
+@import "~@less/variables.less";
 .del-box{
+  .contentZIndex1;
   position: absolute;
   width: 206px;
   height: 106px;
   box-shadow: 2px 2px 5px rgba(0,0,0,.4);
   background: #fff;
-  z-index: 66;
   text-align: center;
   padding: 20px;
   right: -30px;

src/common/components/InspectCommon/index.less

@@ -1,8 +1,8 @@
 @import "~@less/variables.less";
 .wrapper {
+    .contentZIndex1;
     position: absolute;
     top: 40px;
-    z-index: 99;
     background-color: #fff;
     padding:28px 8px 8px 8px;
     min-width: 300px;

src/common/components/Loading/index.jsx

@@ -10,6 +10,7 @@ import React, {Component} from 'react';
 import style from './index.less';
 // import icon from './img/loading.gif';
 import icon from '@common/images/loading.gif';
+import ReactDom from 'react-dom';
 
 /*const propTypes = {
     text: PropTypes.string,
@@ -37,7 +38,8 @@ const defaultProps = {
 class Loading extends React.Component{
     render(){
         const {text,show} = this.props;
-        return (
+        const domNode = document.getElementById('root');
+        return ReactDom.createPortal(<React.Fragment>
             <div className={style['loading']} style={{display: show ? 'block' : 'none'}}>
                 {/*{this.props.shadeIsShow?<div className={style['cover']}/>:null}*/}
                 <div className={style['cover']}/>
@@ -46,6 +48,7 @@ class Loading extends React.Component{
                     <p>{text}</p>
                 </div>
             </div>
+        </React.Fragment>,domNode
         )
     }
 }

src/common/components/Loading/index.less

@@ -1,10 +1,11 @@
+@import "~@less/variables.less";
 .loading{
+  .maskZIndex;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 999;
   .cover{
     width: 100%;
     height: 100%;

src/common/components/MiniToast/index.less

@@ -1,9 +1,10 @@
+@import "~@less/variables.less";
 .infoBox{
+  .contentZIndex1;
   position: absolute;
   top:27px;
   width: 388px;
   background: #fff;
-  z-index: 40;
   border: 1px solid #EAEDF1;
   /*box-shadow: 0 5px 10px 0 rgba(0,0,0,0.10);*/
   box-shadow: 0 10px 20px 0 #989DA3;

src/common/components/Notify/index.less

@@ -2,7 +2,7 @@
   position: fixed;
   left: 0;
   top: 0;
-  z-index: 10000;
+  z-index: 200;
 }
 .notify-bg {
   position: fixed;

src/common/components/SearchOption/index.less

@@ -1,12 +1,12 @@
 @import "~@less/variables.less";
 
 .search {
+    .contentZIndex1;
     width: 316px;
     padding: 8px;
     box-sizing: border-box;
     position: absolute;
     top: 30px;
-    z-index: 99;
     background-color: #fff;
     // margin-bottom: 80px;
     .llStyle;
@@ -39,7 +39,6 @@
     .clearVal{
         cursor: pointer;
         right: 18px;
-        z-index: 200;
     }
 }
 .show {

src/common/components/WrapModalContainer/index.less

@@ -1,6 +1,7 @@
+@import "~@less/variables.less";
 .container {
+  .maskZIndex;
   position: fixed;
-  z-index: 2000;
   width: 100%;
   height: 100%;
   .shade {

src/common/less/variables.less

@@ -73,7 +73,7 @@
   box-shadow: 0 10px 20px 0 #989DA3;
   // filter:progid:DXImageTransform.Microsoft.Shadow(color='#989DA3',Direction=125,Strength=6);
   border: 1px solid #dedede;
-  z-index: 203;
+  z-index: 20;
   padding: 20px;
   white-space: nowrap;
 }
@@ -269,3 +269,21 @@
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=60);";
   z-index: 999;
 }
+.maskZIndex {
+  z-index: 100;
+}
+.maskContentZIndex1 {
+  z-index: 110;
+}
+.maskContentZIndex2 {
+  z-index: 120;
+}
+.contentZIndex1 {
+  z-index: 10;
+}
+.contentZIndex2 {
+  z-index: 20;
+}
+.contentZIndex3 {
+  z-index: 30;
+}

src/components/AddAssistCheck/Textarea/index.less

@@ -11,7 +11,7 @@
   resize: none;
   font-family: inherit;
   position: relative;
-  z-index: 10;
+  // z-index: 10;
   word-break: break-all;
   word-wrap:break-word;
 }

src/components/AssistCheck/index.less

@@ -55,7 +55,7 @@
   width: 120%;
   top: 29px;
   left: 0;
-  z-index: 99;
+  z-index: 10;
   font-size: 12px;
   box-shadow: 0 10px 20px 0 #989DA3;
   border: 1px solid #dedede;

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 {
+      .maskContentZIndex1;
+      position: fixed;
+      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

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import { connect } from "react-redux";
 import style from "./index.less";
+import ReactDom from "react-dom";
 import logo from "../../common/images/logoa.png";
 import setup from "../../common/images/setup.png";
 import close from '../../common/images/icon_close.png';
@@ -13,6 +14,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){
@@ -98,9 +100,9 @@ class Banner extends Component {
     const {visible,disVisible,copyVisible,ifShow,deptName} = this.props;
     const {mode,zIndex,emergencyBox} = this.state;
     const {showConfigModal, closeConfigModal, changeType, confirmType} = this;
-
+    const domNode = document.getElementById('root');
     return (
-      <div className={style["logo"]} style={{zIndex:disVisible||copyVisible?40:zIndex}}>
+      <div className={style["logo"]} >
         <img src={logo} />
         <span className={style["logo-name"]}>|&nbsp;&nbsp;智能辅助临床决策系统</span>
         <div className={style["buon"]}>
@@ -113,22 +115,20 @@ class Banner extends Component {
             设置
           </div>
         </div>
-        {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>
-            <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>:''}
-        {emergencyBox?<div className={style['modal']}>
-            <div className={style['shade']} onClick={this.handleHisClose}></div>
-            <Emergency show={emergencyBox} close={this.handleHisClose}/>
-          </div>:''}
+        {visible&& <ModeChange
+          mode = {mode}
+          closeConfigModal = {closeConfigModal}
+          changeType = {changeType}
+          confirmType = {confirmType}
+        >
+          </ModeChange>}
+        {emergencyBox? ReactDom.createPortal(<React.Fragment> 
+            <div className={style['modal']}>
+              <div className={style['shade']} onClick={this.handleHisClose}></div>
+              <Emergency show={emergencyBox} close={this.handleHisClose}/>
+            </div>
+          </React.Fragment>
+          , domNode):''}
         
       </div>
     );

src/components/Banner/index.less

@@ -1,6 +1,7 @@
 @import "~@less/variables.less";
 
 .logo{
+    .contentZIndex3;
     background: linear-gradient(-90deg, #93CEE3 7%,#3B9ED0 98%);
     background-image: url("../../common/images/bar.png");
     height: 50px;
@@ -44,79 +45,6 @@
       width: 20px;
       height: 20px;
     }
-    .modal {
-      .shade {
-        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);";
-        z-index: 2000;
-      }
-      .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;
@@ -125,4 +53,16 @@
   i{
     color: red;
   }
+}
+.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);";
 }

src/components/CopyRight/CopyModalSon/index.less

@@ -1,5 +1,6 @@
-
+@import "~@less/variables.less";
       .copyContent{
+        .maskContentZIndex1;
         position: fixed;
         width: 820px;
         left: 50%;
@@ -7,7 +8,6 @@
         margin-left: -410px;
         background: #fff;
         height: 60%;
-        z-index: 1000;
         padding: 80px 0 40px;
         img{
           cursor: pointer;
@@ -52,6 +52,7 @@
         }
       }
       .shade {
+        .maskZIndex;
         position: fixed;
         left: 0;
         top: 0;
@@ -59,7 +60,6 @@
         bottom:0;
         background: #000;
         opacity: 0.6;
-        z-index: 999;
         filter:alpha(opacity=60);
         -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=60);";
       }

src/components/CopyRight/DiscontentSon/index.less

@@ -1,13 +1,13 @@
 @import "~@less/mixin.less";
-
+@import "~@less/variables.less";
       .disContent{
+        .maskContentZIndex1;
         position: fixed;  
         width: 50%;
         height: 60%;
         left: 25%;
         background: #fff;
         top: 20%;
-        z-index: 1000;
         padding: 40px 0 60px 0;
         img{
           cursor: pointer;
@@ -76,12 +76,12 @@
       }
       
     .shade {
+      .maskZIndex;
       position: fixed;
       left: 0;
       top: 0;
       right: 0;
       bottom:0;
-      z-index: 999;
       background: #000;
       opacity: 0.6;
       filter:alpha(opacity=60);

src/components/CopyRight/index.less

@@ -2,7 +2,6 @@
 .container {
   position: absolute;
   bottom: 0px;      //页面布局
-  z-index: 40;
   width: 450px;
   .disTips{
     padding: 10px 20px 0px 20px;
@@ -37,18 +36,7 @@
       float: right;
       cursor: pointer;
     }
-    .shade {
-      position: fixed;
-      left: 0;
-      top: 0;
-      right: 0;
-      bottom:0;
-      background: #000;
-      opacity: 0.6;
-      z-index: 9999;
-      filter:alpha(opacity=60);
-      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=60);";
-    }
+    
     .copyModal {
       .copyContent{
         position: fixed;

src/components/DiagResultSearch/index.less

@@ -1,11 +1,11 @@
 @import "~@less/variables.less";
 .search-box {
+    .contentZIndex1;
     position: absolute;
     top: 20px;
     width: 316px;
     // box-shadow: 0 6px 20px 0 #989DA3;
     background: #fff;
-    z-index: 99;
     margin-bottom: 80px;
     
 }

src/components/Emergency/index.less

@@ -1,8 +1,10 @@
 @import "~@less/mixin.less";
+@import "~@less/variables.less";
 .mask-box{
   .mask;
 }
 .emer-box{
+  .maskZIndex;
   // width: 1060px;
   width: 1024px;
   // height: 700px;
@@ -11,7 +13,6 @@
   top:20px; //搜索结果展示-6-26
   left:50%;
   margin-left: -530px;
-  z-index: 2002;
   background: #fff;
   // overflow: hidden;
   .emer-content{
@@ -19,11 +20,11 @@
     height: 100%;
   }
   .closeModal {
+    .contentZIndex1;
     width: 100%;
     position: absolute;
     height: 45px;
     top: 0px;
-    z-index: 800;
   }
   .img{
     width: 40px;
@@ -32,7 +33,6 @@
     top: 5px;
     right: 3px;
     cursor: pointer;
-    z-index: 888;
   }
   .emer-left{
     // width: 360px;

src/components/EmergencyProcedure/EmergencyModal/index.less

@@ -1,12 +1,13 @@
 @import "~@less/mixin.less";
+@import "~@less/variables.less";
 
 .emergencyProdure {
+  .contentZIndex2;
   position: fixed;
   top: 50px;
   bottom: 10px;
   width: 450px;
   right: 10px;
-  z-index: 202;
   padding: 15px;
   background-color: #fff;
   .modalTop {
@@ -45,7 +46,6 @@
     left: 10px;
     padding: 10px;
     box-sizing: border-box;
-    z-index: 20;
     background-color: #fff;
     box-shadow: 0 10px 20px 0 #989DA3;
     border: 1px solid #dedede;
@@ -69,23 +69,11 @@
   .selectColor{
     color: #2A9BD5;
   }
-  .imageModalWrap {
-    position: fixed;
-    left: 0;
-    top: 0;
-    z-index: 300;
-    width: 100%;
-    height: 100%;
-    background-color: #000;
-    opacity: 0.6;
-    filter: alpha(opacity=60);
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=60);";
-  }
   .imageModal {
+    .maskContentZIndex1;
     position: fixed;
     background-color: #fff;
     overflow: hidden;
-    z-index: 500;
     width: 900px;
     padding-top: 30px;
     box-sizing: border-box;
@@ -107,11 +95,11 @@
     }
   }
   .dragImgWrap {
+    .contentZIndex1;
     width: 100%;
     height: 30px;
     line-height: 36px;
     text-indent: 1em;
-    z-index: 502;
     background-color: transparent;
     position: absolute;
     top: 0;
@@ -122,14 +110,13 @@
     position: absolute;
     top: 6px;
     right: 10px;
-    z-index: 800;
   }
 }
 .imageModalWrap {
+  .maskZIndex;
   position: fixed;
   left: 0;
   top: 0;
-  z-index: 300;
   width: 100%;
   height: 100%;
   background-color: #000;
@@ -137,11 +124,12 @@
   filter: alpha(opacity=60);
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=60);";
 }
+
 .imageModal {
+  .maskContentZIndex1;
   position: fixed;
   background-color: #fff;
   overflow: hidden;
-  z-index: 500;
   width: 900px;
   padding-top: 20px;
   box-sizing: border-box;
@@ -168,16 +156,16 @@
   height: 30px;
   line-height: 36px;
   text-indent: 1em;
-  z-index: 502;
+  .maskContentZIndex1;
   background-color: transparent;
   position: absolute;
   top: 0;
   left: 0;
 }
 img.img{
+  .maskContentZIndex2;
   cursor: pointer;
   position: absolute;
   top: 6px;
   right: 10px;
-  z-index: 800;
 }

src/components/EmergencyProcedure/index.less

@@ -1,5 +1,7 @@
+@import "~@less/variables.less";
 .emergencyProdureWrap {
   .emergencyWrap {
+    .contentZIndex1;
     moz-user-select: -moz-none;
     -moz-user-select: none;
     -o-user-select: none;
@@ -8,7 +10,6 @@
     -ms-user-select: none;
     user-select: none;
     position: fixed;
-    z-index: 202;
     top: 55px;
     right: 20px;
     width: auto;
@@ -44,11 +45,9 @@
     line-height: 40px;
     position: absolute;
     left: 0;
-    z-index: 101;
     text-align: center;
     border-radius: 50%;
     color: #fff;
-    z-index: 100;
     background-color: #F93333;
   }
 }

src/components/HistoryCaseContainer/HistoryList/index.less

@@ -1,5 +1,7 @@
 @import "~@less/mixin.less";
+@import "~@less/variables.less";
 .mainHistory {
+    .maskZIndex;
     position: fixed;
     margin-left: -500px;
     left: 50%;
@@ -8,14 +10,13 @@
     bottom: 7%;
     height: 86%;
     background-color: #fff;
-    z-index: 242;
     overflow: hidden;
     .close {
         position: absolute;
         top: 0;
         right: 0;
         cursor: pointer;
-        z-index: 9999;
+        .contentZIndex1
     }
     .mainHistoryLeft {
         width: 300px;
@@ -23,6 +24,7 @@
         background: #d2d1d1;
         position: relative;
         float: left;
+        padding-top: 80px;
         .title {
             height: 80px;
             line-height: 80px;
@@ -46,7 +48,6 @@
             }
         }
         .lists {
-            padding-top: 80px;
             box-sizing: border-box;
             overflow-y: auto;
             height: 100%;
@@ -113,7 +114,7 @@
       height: 40px;
       margin-left: 300px;
       position: absolute;
-      z-index: 9998;
+      .contentZIndex1;
       // border-bottom: 1px solid #EAEDF1;
     }
 }

src/components/HistoryCaseContainer/index.less

@@ -3,7 +3,7 @@
      position: fixed;
     left: 0;
     top: 0;
-    z-index: 241;
+    z-index: 100;
     width: 100%;
     height: 100%;
     background-color: #000;

src/components/InfoTitle/index.jsx

@@ -52,7 +52,7 @@ class InfoTitle extends Component {
     render() {
         const {disVisible,copyVisible,winWidth,loading} = this.props;
         const {le} = this.state;
-        return <div className={style['title-wrapper']} style={{zIndex:disVisible||copyVisible?40:204,left:le}}>
+        return <div className={style['title-wrapper']} >
             <PatInfoContainer sizeFlag={winWidth <= 1065?true:false}/>
             <div className={style["operations"]} onClick={this.showHistoryBox}>
                 <span><img src={historyCase} />&nbsp;历史病历</span>

src/components/InfoTitle/index.less

@@ -1,5 +1,6 @@
 @import "~@less/variables.less";
 .title-wrapper{
+  .contentZIndex2;
   overflow: hidden;
   /*padding: 12px 20px 8px 20px;*/
   margin-bottom: 40px;
@@ -9,7 +10,6 @@
   left: 10px;
   top: 50px;
   right: 470px;
-  z-index: 204;
   min-width: 548px;
 }
 .operations, .health{

src/components/Inspect/index.less

@@ -14,7 +14,7 @@
         line-height: 30px;
         text-align: center;
         position: relative;
-        z-index: 8;
+        z-index: 10;
     }
     .button {
         float: right;
@@ -23,7 +23,7 @@
         // overflow: hidden;
         margin-top: -3px;
         position: relative;
-        z-index: 99;
+        z-index: 10;
     }
     .disabledBtn{
         float: right;
@@ -87,7 +87,7 @@
   width: 120%;
   top: 29px;
   left: 0;
-  z-index: 99;
+  z-index: 10;
   font-size: 12px;
   box-shadow: 0 10px 20px 0 #989DA3;
   border: 1px solid #dedede;

src/components/Operation/index.jsx

@@ -325,7 +325,7 @@ class Operation extends Component {
     const { visible, preVisible,diagShow } = this.props.print;
     const {winWidth} = this.props;
     const {zIndex,type,le} = this.state;
-    return <div className={style['container']} style={{zIndex:zIndex,left:le}}>
+    return <div className={style['container']} style={{left:le}}>
       <span className={style['button']} onClick={showPrint}><img src={printImg} /> 打印病历</span>
       <span className={style['preButton']} onClick={showPreview}><img src={preview} /> 预览</span>
       <span className={style['preButton']} onClick={() => { this.saveHis(3) }}><img src={saveHistory} /> 保存病历模板</span>

src/components/Operation/index.less

@@ -1,5 +1,6 @@
 @import "~@less/variables.less";
 .container {
+    .contentZIndex2;
     padding-left: 80px;
     padding-top: 10px;
     position: fixed;

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;

src/components/PushContainer/index.less

@@ -5,7 +5,7 @@
   width: @push-width;
   float: right;
   padding-top: 20px;
-  z-index: 200;
+  // z-index: 200;
   position: relative;
   // position: fixed;     
   // top: 50px;

src/components/PushItems/DetailsModal/index.less

@@ -1,10 +1,12 @@
+@import "~@less/variables.less";
 .details-wrapper {
+    .maskZIndex;
     position: fixed;
     width: 100%;
     height: 100%;
     left: 0;
     top: 0;
-    z-index: 205;
+  
     img {
         max-width: 100%;
     }

src/components/PushItems/index.less

@@ -66,33 +66,6 @@
       }
     }
   }
-  .show {
-    float: right;
-    color:  #58ACD7;;
-    font-size: 14px;
-    cursor: pointer;
-    img {
-      width: 12px;
-      height: 12px;
-    }
-  }
-  .close{
-    float: right;
-    text-align: right;
-    color: #58ACD7;
-    font-size: 14px;
-    cursor: pointer;
-    clear: both;
-    img {
-      width: 12px;
-      height: 12px;
-    }
-    .close-modal {
-      width: 40px;
-      height: 40px;
-      margin-right: -10px;
-    }
-  }
   .recommend {
     border:1px solid #EAEDF1;
     margin-bottom: 15px;
@@ -126,230 +99,6 @@
       padding:6px 0px 6px 15px;
     }
   }
-  .tips{
-    border:1px solid #EAEDF1;
-    .tips-title,h1{
-      font-size: 14px;
-      color: #000;
-      padding: 8px 15px;
-      background: #EAF7FA;
-      font-weight: bold;
-      img {
-        float:left;
-        margin-top: 0px;
-        margin-right: 5px;
-      }
-    }
-    .tips-title{
-      .tips-name{
-        width: 255px;
-        display: inline-block;
-      }
-      h2{
-        display: inline-block;
-      }
-      .tips-btn{
-        display: inline-block;
-        float: right;
-      }
-      .redTips{
-        display: inline-block;
-        font-size: 12px;
-        -webkit-transform:scale(0.9);
-        color: red;
-        font-weight: normal;
-        white-space: nowrap;
-      }
-      .tipsDetails {
-        .btnCom;
-        display: inline-block;
-        font-weight: normal;
-        width: 42px;
-        height: 20px;
-        border: 1px solid #262626;
-        font-size: 12px;
-        // color: #3B9ED0;
-        color: #262626;
-        line-height: 18px;
-        margin: 0 0 -2px 10px;
-      }
-    }
-    .chronic{
-      background: rgba(242,150,91,0.1);
-    }
-    .content{
-      font-size: 14px;
-      padding:6px 15px;
-      .title {
-        font-size: 14px;
-        line-height: 18px;
-        margin-bottom:10px;
-        a{
-          .btnCom;
-          display: inline-block;
-          font-size: 14px;
-          color: #3B9ED0;
-          width: 42px;
-          border: 1px solid #3B9ED0;
-          margin-left: 10px;
-          text-decoration: none;
-        }
-        .tips-details {
-          .btnCom;
-          display: inline-block;
-          width: 42px;
-          height: 20px;
-          border: 1px solid #3B9ED0;
-          font-size: 14px;
-          color: #3B9ED0;
-          line-height: 18px;
-          margin: 0 10px -2px;
-        }
-      }
-      .warn{
-        padding: 10px 0px 0px 0px;
-        font-size: 10px;
-        color: #979797;
-        text-align: center;
-      }
-      .list{
-        border-bottom: 1px solid #EAEDF1;
-        padding-bottom: 10px;
-        position: relative;
-        .infoPic{
-          vertical-align: middle;
-          margin: 0 5px;
-        }
-        >p{
-          margin-top: 10px;
-        }
-        .listName{
-          color:#3B9ED0;
-        }
-        .listResult{
-          float: right;
-          color: #000012;
-          i{
-            color: #F98F24;
-          }
-          img{
-            vertical-align: middle;
-          }
-        }
-      }
-      
-      .list:last-child{
-        border-bottom:none;
-      }
-    }
-  }
-  .modal {
-    .shade {
-      position: fixed;
-      left: 0;
-      top:0;
-      right: 0;
-      bottom: 0;
-      background: #000;
-      opacity: 0.3;
-      filter:alpha(opacity=30);
-      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=30);";
-      z-index: 3000;
-    }
-    .content {
-      position: fixed;
-      left: 50%;
-      top: 50%;
-      margin: -150px 0px 0px -95px;
-      width: 300px;
-      height: 190px;
-      border-radius: 5px;
-      background: #fff;
-      z-index: 3001;
-      padding: 0px 10px;
-      .close {
-        height: 50px;
-        img{
-          float: right;
-          cursor: pointer;
-        }
-      }
-      
-      .message {
-        height: 70px;
-        padding:10px 30px;
-        text-align: center;
-        font-size: 16px;
-      }
-      .btn {
-        .initial {
-          width: 90px;
-          height: 30px;
-          border: 1px solid #3B9ED0;
-          float: left;
-          border-radius: 4px;
-          text-align: center;
-          line-height: 30px;
-          color: #3B9ED0;
-          font-size: 14px;
-          cursor: pointer;
-          margin-left: 20px;
-        }
-        .repetition {
-          width: 90px;
-          height: 30px;
-          border: 1px solid #3B9ED0;
-          float: right;
-          border-radius: 4px;
-          text-align: center;
-          line-height: 30px;
-          color: #3B9ED0;
-          font-size: 14px;
-          cursor: pointer;
-          margin-right: 20px;
-        }
-      }
-    }
-  }
-  .tipsModal {
-    .shade {
-      position: fixed;
-      left: 0;
-      top:0;
-      right:0;
-      bottom: 0;
-      background: #000;
-      opacity: 0.6;
-      filter:alpha(opacity=60);
-      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=60);";
-      z-index: 2000;
-    }
-    .message{
-      padding: 10px 20px;
-      overflow: auto;
-    }
-    .content {
-      position: fixed;
-      left: 50%;
-      top:65px;
-      right:0;
-      bottom: 65px;
-      margin-left: -410px;
-      width: 820px;
-      z-index: 2001;
-      background: #fff;
-      padding: 0px;
-      .close {
-        padding: 10px 20px;
-        border-bottom: 1px solid #EAEDF1;
-        img{
-          float: right;
-          margin: -5px -14px 0px 0px;
-          cursor: pointer;
-        }
-      }
-    }
-  }
 }
 .diag-item {
   display: inline-block;
@@ -366,60 +115,3 @@
   text-align: center;
 }
 
-.toast-title{
-  position: absolute;
-  top: 17px;
-  font-size: 16px;
-  // border-bottom: 1px solid #666;
-  width: 87%;
-  height: 25px;
-}
-.toast-cont{
-  line-height: 24px;
-  font-size: 14px;
-  // margin-top: 15px;
-  height: 222px;
-  overflow-y: auto;
-  padding: 10px 0 0 10px;
-  li{
-    margin-top: 10px;
-    cursor: pointer;
-  }
-}
-.footer{
-  .print{
-    .btnCom;
-    width: 111px;
-    height: 34px;
-    line-height: 34px;
-    // outline: none;
-    // border-radius: 4px;
-    /*color: #3B9ED0;*/
-    border: 0 none;
-    // cursor: pointer;
-    background: #fff;
-    margin-right: 20px;
-    img{
-      width: 20px;
-      vertical-align: middle;
-      margin-right: 4px;
-    }
-  }
-  .okBtn{
-    .btnCom;
-    width: 80px;
-    height: 34px;
-    line-height: 32px;
-    // text-align: center;
-    // outline: none;
-    // border-radius: 4px;
-    // cursor: pointer;
-    border: 1px solid #3B9ED0;
-    box-sizing: border-box;
-    margin-left: 20px;
-    background: #3B9ED0;
-    color: #fff;
-    float: right;
-    margin-right: 20px;
-  }
-}

src/components/Treat/index.jsx

@@ -58,8 +58,8 @@ class Treat extends Component {
     }
    
     setTreatBox(){
-      $('#dragModalWrap').css({'z-index': 302});
-      $('#drugWrapper').css({'z-index': 301});
+      $('#dragModalWrap').css({'z-index': 120});
+      $('#drugWrapper').css({'z-index': 110});
     }
     render(){
         const {setDrugInfoMore,treatIndex,treatIndexSet, generalTreat, treatment, treatItem, surgeryTreat, drugHistory, 

src/components/Treat/index.less

@@ -1,32 +1,34 @@
 @import "~@less/mixin.less";
+@import "~@less/variables.less";
 .treat-wrapper{
+    .maskZIndex;
     position: fixed;
     width: 100%;
     height: 100%;
     left: 0;
     top: 0;
-    z-index: 300;
 }
 .close {
+  .contentZIndex1;
   position: absolute;
-  z-index:9999;
   top: 0;
   right: 0;
   cursor: pointer;
 }
 .treat-mask {
+    .maskZIndex;
     position: fixed;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
-    z-index: 300;
     background: #000;
     opacity: 0.6;
     filter:alpha(opacity=60);
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=60);";
 }
 .treat-box {
+    .maskContentZIndex1;
     position: fixed;
     background: #fff;
     width: 680px;
@@ -34,7 +36,6 @@
     top: 10%;
     height: 80%;
     margin-left: -340px;
-    z-index: 301;
     padding-top: 40px;
     padding-bottom: 80px;
     box-shadow: 0px 0px 5px -2px #7d7c7c;

src/components/TreatDesc/DrugInfo/index.jsx

@@ -48,8 +48,8 @@ class DrugInfo extends Component {
         }
     }
     setDragBox(){
-      $('#dragModalWrap').css({'z-index': 301});
-      $('#drugWrapper').css({'z-index': 302});
+      $('#dragModalWrap').css({'z-index': 110});
+      $('#drugWrapper').css({'z-index': 120});
     }
     render() {
         const { drugInfo, hideDrugInfo, drugInfoList,hideDrugInfoMore } = this.props

src/components/TreatDesc/DrugInfo/index.less

@@ -1,4 +1,6 @@
+@import "~@less/variables.less";
 .drug-info-wrapper {
+    .maskContentZIndex2;
     position: fixed;
     overflow: hidden;
     width: 950px;
@@ -7,7 +9,6 @@
     top: 10%;
     margin-left: -475px;
     background: #fff;
-    z-index: 303;
     padding: 40px 0 60px;
     box-shadow: 0px 0px 5px -2px #7d7c7c;
     word-break: break-all;
@@ -36,10 +37,10 @@
     user-select:none;
 }
 .close-drug-desc {
+    .contentZIndex1;
     position: absolute;
     right: 0;
     top: 0;
-    z-index: 9999;
     width: 40px;
     cursor: pointer;
 }

src/modules/HomePage/index.less

@@ -8,7 +8,7 @@
     opacity: .4;
     filter:alpha(opacity=40);
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40);";
-    z-index: 9998;
+    z-index: 100;
 }
 .load{
     width: 40px;