Merge branch 'optimize-ll' into optimize

src/components/EmergencyProcedure/EmergencyModal/index.jsx

@@ -0,0 +1,88 @@
+import styles from './index.less'
+import small from '../img/small.png'
+import EmergencyPart from '../EmergencyPart'
+import pic from '../img/pic.png'
+import pic1 from '../img/pic1.jpg'
+import pic2 from '../img/pic2.jpg'
+import pic3 from '../img/pic3.jpg'
+import pic4 from '../img/pic4.png'
+import pic5 from '../img/pic5.jpg'
+import $ from 'jquery'
+
+class EmergencyModal extends React.Component{
+  constructor(props){
+    super(props)
+    this.state={
+      show:false,
+      imgShow:false,
+      diseaseName:[
+        '胸痛','心包积液','气胸','肺栓塞','急性冠脉综合征','主动脉夹层'
+      ]
+    }
+    this.handleImgShow=this.handleImgShow.bind(this)
+  }
+  componentDidMount() {
+    $(document).click((event) => {
+      let modalTopR = document.getElementById("modalTopR")
+      let nameLis = document.getElementById("nameLis")
+      if (nameLis) {
+        if (modalTopR != event.target && !nameLis.contains(event.target)) {
+          this.setState({ show: false });
+        }
+      }
+    });
+  }
+  handleSlideShow(){
+    let flg = this.state.show
+    this.setState({show:!flg})
+  }
+  setDataIdx(num,flg){
+    this.setState({show:flg})
+    this.props.setDataIdx(num)
+  }
+  handleImgShow(flg){
+    this.setState({imgShow:flg})
+  }
+  render(){
+    const {data,handleShow,setDataIdx,idx} = this.props;
+    return <div className={styles.emergencyProdure}>
+      <div className={`${styles.modalTop} clearfix`}>
+          <div className={styles.modalTopL}>
+            <img onClick={()=>handleShow(false)} src={small} alt=""/>
+            <p className="ellipsOver">{data.emergencyname}</p>
+            {
+              idx == 0?null:<img src={pic} onClick={()=>{this.handleImgShow(true)}} alt=""/>
+            }
+            {
+              this.state.imgShow?<React.Fragment>
+                <div className={styles.imageModalWrap} onClick={()=>{this.handleImgShow(false)}}></div>
+                <div className={styles.imageModal}>
+                  <img src={idx==1?pic1:idx==2?pic2:idx==3?pic3:idx==4?pic4:idx==5?pic5:null} alt=""/>
+                </div>
+              </React.Fragment>:null
+            }
+          </div>
+          <div className={styles.modalTopR} onClick={()=>{this.handleSlideShow()}} id="modalTopR">其他危重症状</div>
+          {
+            this.state.show?<ul className={styles.nameLis} id="nameLis">
+              <i></i>
+              {
+                this.state.diseaseName.map((item,index)=>{
+                  return <li className={idx == index?styles.selectColor:null} onClick={()=>{this.setDataIdx(index,false)}}>
+                    {item}
+                  </li>
+                })
+              }
+            </ul>:null
+          }
+      </div>
+      <div className={styles.modalMain}>
+        <div className={styles.part}>
+          <EmergencyPart idx={idx} setDataIdx={setDataIdx} data={data}></EmergencyPart>
+        </div>
+      </div>
+    </div>
+  }
+}
+
+export default EmergencyModal;

src/components/EmergencyProcedure/EmergencyModal/index.less

@@ -0,0 +1,105 @@
+@import "~@less/mixin.less";
+
+.emergencyProdure {
+  position: fixed;
+  top: 50px;
+  bottom: 10px;
+  width: 450px;
+  right: 10px;
+  z-index: 205;
+  padding: 15px;
+  background-color: #fff;
+  .modalTop {
+    height: 60px;
+    line-height: 60px;
+    position: relative;
+  }
+  .modalTopL {
+    float: left;
+    height: 60px;
+    p {
+      display: inline-block;
+      font-size: 16px;
+      padding: 0 5px;
+      max-width: 265px;
+      
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    img {
+      position: relative;
+      top: -17px;
+    }
+  }
+  .modalTopR {
+    float: right;
+    color: #2A9BD5;
+    font-weight: bold;
+    cursor: pointer;
+  }
+  .nameLis {
+    position: absolute;
+    width: 400px;
+    top: 46px;
+    left: 10px;
+    padding: 10px;
+    box-sizing: border-box;
+    background-color: #fff;
+    box-shadow: 0 10px 20px 0 #989DA3;
+    border: 1px solid #dedede;
+    i {
+      width: 0;
+      height: 0;
+      border-width: 10px;
+      border-style: solid;
+      border-color: transparent transparent #fff transparent;
+      position: absolute;
+      top: -20px;
+      right: 10px;
+    }
+    li {
+      line-height: 18px;
+      float: left;
+      padding: 10px;
+      cursor: pointer;
+    }
+  }
+  .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 {
+    position: fixed;
+    // top: 7%;
+    // bottom: 7%;
+    // height: 86%;
+    background-color: #fff;
+    overflow: hidden;
+    z-index: 500;
+    width: 1000px;
+    margin-left: -500px;
+    transform: translateY(-50%);
+
+    // margin-top: -420px;
+    // height: 840px;
+    // transform: translateX(-50%);
+    left: 50%;
+    top: 50%;
+    img{
+      width: 100%;
+      height: 100%;
+    }
+  }
+}

src/components/EmergencyProcedure/EmergencyPart/PartSec/index.jsx

@@ -0,0 +1,261 @@
+import styles from '../index.less'
+import back from '../../img/back.png'
+import down from '../../img/down.png'
+
+class PartSec extends React.Component{
+  constructor(props){
+    super(props);
+    this.state={
+      partCom:true,//通用第二步
+      num:'-1',
+      partClick:false,
+    }
+  }
+  componentWillReceiveProps(nextState){
+    if(nextState.idx != this.props.idx){
+      this.setState({partCom:true})
+    }
+  }
+  makeSureCom(link,num){
+    const {idx,makeSureCom,makeSureWar} = this.props
+    if(idx == 0){
+      if(link){
+        makeSureCom(link,false,0)
+      }
+    }else if(idx == 3){
+      makeSureWar(num)
+    }else if(idx == 5){
+      if(num == 0){
+        makeSureCom(link,true,0)
+      }
+    }else if(idx == 4){
+      makeSureCom(link,true,0)
+      makeSureWar(num)
+    }
+    this.setState({
+      partCom:false,
+      num:num
+    })
+  }
+  backSec(){
+    const {makeSureCom} = this.props
+    this.setState({
+      partCom:true
+    })
+    makeSureCom('',false,0)    
+  }
+  handleStepSecCom(){
+    const {data} = this.props
+    return data.items.map((item,idx)=>{
+      return <div className={`${idx == 0?styles.nextWar:styles.nextCom} ${styles.next}`}><span>{item.actionname}</span> <i onClick={()=>{this.makeSureCom(item.link,idx)}}>{item.text?item.text:'确定'}</i></div>
+    })
+  }
+  handleStepSecClick(){
+    const {idx,makeSureCom} = this.props
+    if(idx == 0){
+      return <React.Fragment>
+        <div className={`${styles.nextCom} ${styles.next}`}>
+          <span>无异常</span> 
+          <img onClick={()=>{this.backSec()}} src={back} alt=""/>
+        </div>
+        <h4>{'判断危机生命的胸痛（心率>110次/分，血压<90/60mmHg晕厥或呼吸次数>25次，全身湿冷）'}</h4>
+        <div className={`${styles.nextWar} ${styles.next}`}>
+          <span>是</span> 
+          <i onClick={()=>{makeSureCom('',true,1)}}>确定</i>
+        </div>
+        <div className={`${styles.nextCom} ${styles.next}`}>
+          <span>否</span> 
+          <i onClick={()=>{makeSureCom('',true,0)}}>确定</i>
+        </div>
+      </React.Fragment>
+    }else if(idx == 1){
+      if(this.state.num == 0){
+        return <React.Fragment>
+          <div className={`${styles.nextWar} ${styles.next}`}>
+            <span>心包积液</span> 
+            <img onClick={()=>{this.backSec()}} src={back} alt=""/>
+          </div>
+          <h4>{'判断是否心包填塞'}</h4>
+          <div className={`${styles.goDownPub} ${styles.goDownY}`}>
+            <span>是</span> 
+          </div>
+          <div className={`${styles.goDownPub} ${styles.goDownImg}`}>
+            <img src={down} alt=""/>
+          </div>
+          <div className={`${styles.goDownPub} ${styles.goDownB}`}>
+            <span>心包穿刺</span>
+          </div>
+          <div className={`${styles.goDownPub} ${styles.goDownImg}`}>
+            <img src={down} alt=""/>
+          </div>
+          <div className={`${styles.goDownPub} ${styles.goDownB}`}>
+            <span>穿刺夜分析对症治疗</span>
+          </div>
+          <div className={`${styles.goDownPub} ${styles.goDownImg}`}>
+            <img src={down} alt=""/>
+          </div>
+          <div className={`${styles.goDownPub} ${styles.goDownB}`}>
+            <span>抢救室待床！</span>
+          </div>
+          <div className={`${styles.goDownPub} ${styles.goDownN}`}>
+            <span>否</span> 
+          </div>
+          <div className={`${styles.goDownPub} ${styles.goDownImg}`}>
+            <img src={down} alt=""/>
+          </div>
+          <div className={`${styles.goDownPub} ${styles.goDownB}`}>
+            <span>积液量少查找病因对症治疗</span>
+          </div>
+          <div className={`${styles.goDownPub} ${styles.goDownImg}`}>
+            <img src={down} alt=""/>
+          </div>
+          <div className={`${styles.goDownPub} ${styles.goDownB}`}>
+            <span>病情未控制病情恶化</span>
+          </div>
+          <div className={`${styles.goDownPub} ${styles.goDownImg}`}>
+            <img src={down} alt=""/>
+          </div>
+          <div className={`${styles.goDownPub} ${styles.goDownB}`}>
+            <span>心包穿刺</span>
+          </div>
+          <div className={`${styles.goDownPub} ${styles.goDownImg}`}>
+            <img src={down} alt=""/>
+          </div>
+          <div className={`${styles.goDownPub} ${styles.goDownB}`}>
+            <span>穿刺夜分析对症治疗</span>
+          </div>
+          <div className={`${styles.goDownPub} ${styles.goDownImg}`}>
+            <img src={down} alt=""/>
+          </div>
+          <div className={`${styles.goDownPub} ${styles.goDownB}`}>
+            <span>抢救室待床！</span>
+          </div>
+        </React.Fragment>
+      }else{
+        return <React.Fragment>
+        <div className={`${styles.nextWar} ${styles.next}`}>
+          <span>非心包积液</span> 
+          <img onClick={()=>{this.backSec()}} src={back} alt=""/>
+        </div>
+        <h4>{'查找其他原因'}</h4>
+      </React.Fragment>
+      }
+    }else if(idx == 2){
+      if(this.state.num == 0){
+        return <React.Fragment>
+          <div className={`${styles.nextWar} ${styles.next}`}>
+            <span>气胸患者</span> 
+            <img onClick={()=>{this.backSec()}} src={back} alt=""/>
+          </div>
+          <h4>{'结合症状体征是否危机生命是否濒死休克'}</h4>
+          <div className={`${styles.nextWar} ${styles.next}`}>
+            <span>是</span> 
+            <i onClick={()=>{makeSureCom('',true,1)}}>确定</i>
+          </div>
+          <div className={`${styles.nextCom} ${styles.next}`}>
+            <span>否</span> 
+            <i onClick={()=>{makeSureCom('',true,0)}}>确定</i>
+          </div>
+        </React.Fragment>
+      }else{
+        return <React.Fragment>
+        <div className={`${styles.nextWar} ${styles.next}`}>
+          <span>非气胸患者</span> 
+          <img onClick={()=>{this.backSec()}} src={back} alt=""/>
+        </div>
+        <h4>{'查找其他原因'}</h4>
+      </React.Fragment>
+      }
+    }else if(idx == 3){
+      if(this.state.num == 0){
+        return <React.Fragment>
+          <div className={`${styles.nextWar} ${styles.next}`}>
+            <span>伴低血压休克</span> 
+            <img onClick={()=>{this.backSec()}} src={back} alt=""/>
+          </div>
+          <h4>判断右心负荷是否增加</h4>
+          <div className={`${styles.nextWar} ${styles.next}`}>
+            <span>右心负荷增加（DDI阳性）</span> 
+            <i onClick={()=>{makeSureCom('',true,1)}}>确定</i>
+          </div>
+          <div className={`${styles.nextCom} ${styles.next}`}>
+            <span>右心负荷不增加（DDI阴性）</span> 
+            <i onClick={()=>{makeSureCom('',true,0)}}>确定</i>
+          </div>
+        </React.Fragment>
+      }else{
+        return <React.Fragment>
+          <div className={`${styles.nextCom} ${styles.next}`}>
+            <span>不伴低血压休克</span> 
+            <img onClick={()=>{this.backSec()}} src={back} alt=""/>
+          </div>
+          <h4>根据临床经验或者PE评分规则评估PE可能性</h4>
+          <div className={`${styles.nextWar} ${styles.next}`}>
+            <span>评分高或DDI阳性</span> 
+            <i onClick={()=>{makeSureCom('',true,1)}}>确定</i>
+          </div>
+          <div className={`${styles.nextCom} ${styles.next}`}>
+            <span>评分低且DDI阴性</span> 
+            <i onClick={()=>{makeSureCom('',true,0)}}>确定</i>
+          </div>
+        </React.Fragment>
+      }
+    }else if(idx == 5){
+      if(this.state.num == 0){
+        return <React.Fragment>
+          <div className={`${styles.nextWar} ${styles.next}`}>
+            <span>DDI阳性或TTE阳性</span> 
+            <img onClick={()=>{this.backSec()}} src={back} alt=""/>
+          </div>
+        </React.Fragment>
+      }else{
+        return <React.Fragment>
+          <div className={`${styles.nextCom} ${styles.next}`}>
+            <span>DDI阴性或TTE阴性</span> 
+            <img onClick={()=>{this.backSec()}} src={back} alt=""/>
+          </div>
+          <span className={styles.emergencyBtnS}>排除AD</span>
+          <h4>请相关科室会诊寻找病因</h4>
+        </React.Fragment>
+      }
+    }else if(idx == 4){
+      if(this.state.num == 0){
+        return <React.Fragment>
+          <div className={`${styles.nextWar} ${styles.next}`}>
+            <span>ST段抬高或新发LBBB</span> 
+            <img onClick={()=>{this.backSec()}} src={back} alt=""/>
+          </div>
+        </React.Fragment>
+      }else{
+        return <React.Fragment>
+          <div className={`${styles.nextCom} ${styles.next}`}>
+            <span>ST段压低或无特征性改变</span> 
+            <img onClick={()=>{this.backSec()}} src={back} alt=""/>
+          </div>
+        </React.Fragment>
+      }
+    }
+  }
+  render(){
+    const {data,idx} = this.props
+    return <div className={`${styles.partSec} ${styles.partPub} clearfix`} style={{borderBottom:idx==1?'0':null}}>
+      {
+        data.select.map((item,idx)=>{
+          return <div className={`${idx == 0?styles.commonBtn:styles.emergencyBtn} ${styles.btn}`}>{item}</div>
+        })
+      }
+      <p>步骤2</p>
+      {
+        data.waring?<h4>{data.waring}</h4>:null
+      }
+      {
+        data.tips?<p style={{marginTop:0}}>{data.tips}</p>:null
+      }
+      {
+        this.state.partCom?this.handleStepSecCom():this.handleStepSecClick()
+      }
+    </div>
+  }
+}
+
+export default PartSec;

src/components/EmergencyProcedure/EmergencyPart/PartTrd/index.jsx

@@ -0,0 +1,575 @@
+import styles from '../index.less'
+import $ from 'jquery'
+import back from '../../img/back.png'
+import down from '../../img/down.png'
+
+class PartTrd extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      link0: [
+        {
+          message: '高血压伴休克体征、撕裂样胸痛，两上肢体血压相差20mmHg以上或者下肢血压较上肢血压低10mmHg',
+          text: '主动脉夹层救治流程',
+          link: 5
+        },
+        {
+          message: '呼吸困难、顽固性低氧血症，低血压、颈静脉怒张，四肢水肿、晕厥',
+          text: '肺栓塞救治流程',
+          link: 3
+        },
+        {
+          message: '呼吸困难、一侧肺呼吸音减弱或消失',
+          text: '气胸救治流程',
+          link: 2
+        },
+        {
+          message: '症状体征提示心包积液',
+          text: '心包积液救治流程',
+          link: 1
+        },
+      ],
+      prevAction: [
+        { name: '告病重，立即送抢救室，停止活动，绝对卧床' },
+        { name: '监测生命体征，持续心电监护，建立静脉通道（左侧肢体，1-2路）' },
+        { name: '必要时给氧，保持血氧饱和度95%以上' },
+        { name: '取血化验', list: ['血常规', '急诊生化', '心肌酶谱', 'Troponinl', '凝血功能', '术前免疫'] },
+        { name: '床边心超检查' },
+        { name: '询问相关病史和体格检查' }
+      ],
+      selects: [
+        {
+          basis: [
+            '血流动力学不稳定或心源性休克',
+            '再发性或药物治疗难以缓解的持续性胸痛',
+            '危及生命的心律失常或心跳骤停',
+            '心肌梗死的机械性并发症',
+            '急性心衰',
+            'ST-T动态改变，特别是间歇性ST段抬高',
+            '以上依据都不符合'
+          ],
+        },
+        {
+          basis: [
+            '肌钙蛋白水平升高或降低与心梗一致',
+            '动态ST或T波改变（有或无症状）',
+            'GRACE评分>140',
+            '以上依据都不符合'
+          ]
+        },
+        {
+          basis: [
+            '糖尿病',
+            '肾功能不全（eGFR<60ml/min/1.73m2）',
+            'LVEF<40%或充血性心力衰竭',
+            '梗死后早起心绞痛',
+            '近期PCI史',
+            '之前CABG史',
+            'GRACE评分>109且<140',
+            '以上依据都不符合'
+          ]
+        },
+        {
+          basis: []
+        },
+      ],
+      select3: ['呼吸科会诊'],
+      select5: ['心外会诊', '血管外科内会诊'],
+      trdShow: true,
+      trdFlg: '',
+      currentIdx: 0,
+      show0: false,
+      show1: false,
+      show2: false,
+      show3: false,
+      show0Lis: [],
+      show1lis: [],
+      show2lis: [],
+      show3lis: [],
+    }
+    this.handleTrdPart = this.handleTrdPart.bind(this)
+  }
+  backSec() {
+    const { makeSureCom } = this.props
+    makeSureCom('', false, 0)
+  }
+  changeTrdShow(flg, num) {
+    this.setState({
+      trdShow: flg,
+      trdFlg: num,
+      currentIdx:0,
+      show0: false,
+      show1: false,
+      show2: false,
+      show3: false,
+      show0Lis: [],
+      show1Lis: [],
+      show2Lis: [],
+      show3Lis: [],
+    })
+  }
+  changeCurrentIdx() {
+    let num = this.state.currentIdx
+    this.setState({
+      currentIdx: ++num
+    })
+  }
+  handleShowDetail(idx,name) {
+    switch (idx) {
+      case 0:
+        let show0Lis = JSON.parse(JSON.stringify(this.state.show0Lis))
+        if(show0Lis.indexOf(name) == -1){
+          show0Lis.push(name)
+        }else{
+          show0Lis.splice(show0Lis.findIndex(item => item == name), 1)
+        }
+        this.setState({
+          show0Lis:show0Lis
+        })
+        this.setState({
+          show0: show0Lis.length>0,
+          show1: false,
+          show2: false,
+          show3: false
+        })
+        break;
+      case 1:
+        let show1Lis = JSON.parse(JSON.stringify(this.state.show1Lis))
+        if(show1Lis.indexOf(name) == -1){
+          show1Lis.push(name)
+        }else{
+          show1Lis.splice(show1Lis.findIndex(item => item == name), 1)
+        }
+        this.setState({
+          show1Lis:show1Lis
+        })
+        this.setState({
+          show0: false,
+          show1: show1Lis.length>0,
+          show2: false,
+          show3: false
+        })
+        break;
+      case 2:
+          let show2Lis = JSON.parse(JSON.stringify(this.state.show2Lis))
+          if(show2Lis.indexOf(name) == -1){
+            show2Lis.push(name)
+          }else{
+            show2Lis.splice(show2Lis.findIndex(item => item == name), 1)
+          }
+          this.setState({
+            show2Lis:show2Lis
+          })
+        this.setState({
+          show0: false,
+          show1: false,
+          show2: show2Lis.length>0,
+          show3: false
+        })
+        break;
+      case 3:
+        this.setState({
+          show0: false,
+          show1: false,
+          show2: false,
+          show3: true
+        })
+        break;
+    }
+  }
+  handleTrdPart() {
+    const { idx, num, trdNum, makeSureCom } = this.props;
+    const { link0, trdShow, trdFlg, prevAction, selects, currentIdx, show0,show1,show2,show3 } = this.state;
+    if (idx == 0) {
+      return <React.Fragment>
+        <div className={`${num ? styles.nextWar : styles.nextCom} ${styles.next}`}>
+          <span>{num ? '是' : '否'}</span>
+          <img onClick={() => { this.backSec() }} src={back} alt="" />
+        </div>
+        {
+          num ? link0.map((item, idx) => {
+            return <div className={`${styles.partLis} clearfix`} style={{ borderBottom: idx == 3 ? '0' : null }}>
+              <p>{item.message}</p>
+              <span onClick={() => makeSureCom(item.link, false, '')}>{item.text}</span>
+            </div>
+          }) : <h4>建议胸痛中心观察6-8h</h4>
+        }
+      </React.Fragment>
+    } else if (idx == 2) {
+      return <React.Fragment>
+        <div className={`${num ? styles.nextWar : styles.nextCom} ${styles.next}`}>
+          <span>{num ? '是' : '否'}</span>
+          <img onClick={() => { this.backSec() }} src={back} alt="" />
+        </div>
+        {
+          num ? <React.Fragment>
+            <span className={styles.emergencyBtnS}>急诊胸穿</span>
+            <p className={styles.warMessage}>抢救室待救</p>
+          </React.Fragment> : <React.Fragment>
+              <h4>判断肺压缩大于25%或小于25%</h4>
+              <p className={styles.warTips}>肺压缩大于25%</p>
+              <h4>建议保守对症治疗止咳、祛痰、急诊留观</h4>
+              <span className={styles.emergencyBtnS}>择期胸穿</span>
+              <div className={styles.line}></div>
+              <p className={styles.warTips}>肺压缩小于25%</p>
+              <h4>建议保守对症治疗止咳、祛痰</h4><br />
+              <div className={styles.hold}>
+                <span className={styles.holdLeft}>病情未控制继续恶化</span>
+                <span className={styles.holdRight}>择期胸穿</span>
+              </div>
+              <div className={`${styles.hold}`}>
+                <span className={styles.holdLeft}>病情好转</span>
+                <span className={styles.holdRight}>门诊随访</span>
+              </div>
+            </React.Fragment>
+        }
+      </React.Fragment>
+    } else if (idx == 3) {
+      if (trdNum == 0) {
+        return <React.Fragment>
+          <div className={`${num ? styles.nextWar : styles.nextCom} ${styles.next}`}>
+            <span>{num ? '右心负荷增加（DDI阳性）' : '右心负荷不增加（DDI阴性）'}</span>
+            <img onClick={() => { this.backSec() }} src={back} alt="" />
+          </div>
+          {
+            num ? <React.Fragment>
+              <h4>生命体征不稳定</h4>
+              <div className={`${styles.goDownPub} ${styles.goDownB}`}>
+                <span>根据病史、体征、PE评分判断病情</span>
+              </div>
+              <div className={`${styles.goDownPub} ${styles.goDownImg}`}>
+                <img src={down} alt="" />
+              </div>
+              <div className={`${styles.goDownPub} ${styles.goDownB}`}>
+                <span>考虑溶栓或者血栓切除</span>
+              </div>
+              <div className={`${styles.goDownPub} ${styles.goDownImg}`}>
+                <img src={down} alt="" />
+              </div>
+              <div className={`${styles.goDownPub} ${styles.goDownB}`}>
+                <span>ACLS（高级心脏生命支持）</span>
+              </div>
+              <div className={`${styles.goDownPub} ${styles.goDownImg}`}>
+                <img src={down} alt="" />
+              </div>
+              <div className={`${styles.goDownPub} ${styles.goDownB}`}>
+                <span>收入ICU</span>
+              </div>
+              <h4>生命体征稳定建议检查CTAP（肺动脉造影）</h4>
+              <h4>建议检查肺动脉增强CT</h4>
+              <div className={`${styles.hold}`}>
+                <span className={styles.holdLeft}>阳性</span>
+                <span className={styles.holdRight}>按肺栓塞治疗</span>
+              </div>
+              <div className={`${styles.hold}`}>
+                <span className={styles.holdLeft}>阴性</span>
+                <span className={styles.holdRight}>请相关科室会寻找病因</span>
+              </div>
+            </React.Fragment> : <React.Fragment>
+                <h4>建议ACLS（高级心脏生命支持）</h4>
+                <h4>请相关科室会寻找病因</h4>
+              </React.Fragment>
+          }
+        </React.Fragment>
+      } else {
+        return <React.Fragment>
+          <div className={`${num ? styles.nextWar : styles.nextCom} ${styles.next}`}>
+            <span>{num ? '评分高或DDI阳性' : '评分低且DDI阴性'}</span>
+            <img onClick={() => { this.backSec() }} src={back} alt="" />
+          </div>
+          {
+            num ? <React.Fragment>
+              <h4>建议检查CTPA（肺动脉造影）</h4>
+              <div className={`${styles.hold}`}>
+                <span className={styles.holdLeft}>阳性</span>
+                <span className={styles.holdRight}>按肺栓塞治疗</span>
+              </div>
+              <div className={`${styles.hold}`}>
+                <span className={styles.holdLeft}>阴性</span>
+                <span className={styles.holdRight}>请相关科室会寻找病因</span>
+              </div>
+            </React.Fragment> : <React.Fragment>
+                <span className={styles.emergencyBtnS}>排除肺栓塞</span>
+                <h4>请相关科室会寻找病因</h4>
+              </React.Fragment>
+          }
+        </React.Fragment>
+      }
+    } else if (idx == 5) {
+      return <React.Fragment>
+        <div className={`${styles.nextWar} ${styles.next}`}>
+          <span>立即检查CTA（血管造影）</span>
+        </div>
+        <h4>判断检查结果数据</h4>
+        {
+          trdShow ? <React.Fragment>
+            <div className={`${styles.nextWar} ${styles.next}`}>
+              <span>确诊AD（A型或B型）</span>
+              <i onClick={() => { this.changeTrdShow(false, 1) }}>确定</i>
+            </div>
+            <div className={`${styles.nextCom} ${styles.next}`}>
+              <span>排除AD</span>
+              <i onClick={() => { this.changeTrdShow(false, 0) }}>确定</i>
+            </div>
+          </React.Fragment> : <React.Fragment>
+              <div className={`${trdFlg ? styles.nextWar : styles.nextCom} ${styles.next}`}>
+                <span>{trdFlg ? '确诊AD（A型或B型）' : '排除AD'}</span>
+                <img onClick={() => { this.changeTrdShow(true, '') }} src={back} alt="" />
+              </div>
+              <h4>{trdFlg ? '抢救室待床' : '请相关科室会诊寻找病因'}</h4>
+            </React.Fragment>
+        }
+      </React.Fragment>
+    } else if (idx == 4) {
+      if (trdNum == 0) {
+        return <React.Fragment>
+          <h4>进一步诊疗</h4>
+          <p>{'（STEMI处置时间<10min）'}</p>
+          <ul className={styles.doList}>
+            {
+              prevAction.map((item, idx) => {
+                return <li>
+                  {idx + 1}、{item.name}{item.list ? ' : ' : ' ;'}
+                  {
+                    item.list ? item.list.map((part) => {
+                      return <span>{part}</span>
+                    }) : null
+                  }
+                </li>
+              })
+            }
+          </ul>
+          <h4>询问并立即服用负荷剂量的双抗药物（若未服用）</h4>
+          <p style={{ color: '#000', textIndent: '2em', lineHeight: '20px' }}>阿司匹林0.3g+氯吡格雷300mg/600mg（需急诊手术时）或 阿司匹林0.3g+替格瑞洛180mg（ "心拯救"一包药）</p>
+          <h4>患者发病时间！</h4>
+          {
+            trdShow ? <React.Fragment>
+              <div className={`${styles.nextWar} ${styles.next}`}>
+                <span>发病大于12小时</span>
+                <i onClick={() => { this.changeTrdShow(false, 1) }}>确定</i>
+              </div>
+              <div className={`${styles.nextCom} ${styles.next}`}>
+                <span>发病小于12小时</span>
+                <i onClick={() => { this.changeTrdShow(false, 0) }}>确定</i>
+              </div>
+            </React.Fragment> : <React.Fragment>
+                <div className={`${trdFlg ? styles.nextWar : styles.nextCom} ${styles.next}`}>
+                  <span>{trdFlg ? '发病大于12小时' : '发病小于12小时'}</span>
+                  <img onClick={() => { this.changeTrdShow(true, 1) }} src={back} alt="" />
+                </div>
+                <h4>{trdFlg ? '判断患者是否有急诊PCI指证' : '启动导管室、获取知情同意联系床位'}</h4>
+                {
+                  trdFlg ? <React.Fragment>
+                    <div className={`${styles.goDownPub} ${styles.goDownY}`}>
+                      <span>是</span>
+                    </div>
+                    <div className={`${styles.goDownPub} ${styles.goDownImg}`}>
+                      <img src={down} alt="" />
+                    </div>
+                    <div className={`${styles.goDownPub} ${styles.goDownB}`}>
+                      <span>启动导管室、获取知情同意联系床位</span>
+                    </div>
+                    <div className={`${styles.goDownPub} ${styles.goDownImg}`}>
+                      <img src={down} alt="" />
+                    </div>
+                    <div className={`${styles.goDownPub} ${styles.goDownB}`}>
+                      <span>{'家属不同意或者导管室到达>60min'}</span>
+                    </div>
+                    <div className={`${styles.goDownPub} ${styles.goDownImg}`}>
+                      <img src={down} alt="" />
+                    </div>
+                    <div className={`${styles.goDownPub} ${styles.goDownB}`}>
+                      <span>{'排除禁忌后考虑立即溶栓（D-D <30min）'}</span>
+                    </div>
+                    <br />
+                    <div className={styles.line}></div>
+                    <div className={`${styles.goDownPub} ${styles.goDownB}`} style={{ color: '#2599ff', border: '1px solid #2599ff' }}>
+                      <span>{'家属同意-导管室直接运转'}</span>
+                    </div>
+                    <div className={`${styles.goDownPub} ${styles.goDownB}`} style={{ border: '0' }}>
+                      <span>{'控制D-B时间<90min'}</span>
+                    </div>
+                    <div className={styles.line} style={{ marginBottom: "-8px" }}></div>
+                    <div className={`${styles.goDownPub} ${styles.goDownN}`}>
+                      <span>否</span>
+                    </div>
+                    <div className={`${styles.goDownPub} ${styles.goDownImg}`}>
+                      <img src={down} alt="" />
+                    </div>
+                    <div className={`${styles.goDownPub} ${styles.goDownB}`}>
+                      <span>收住ICU/CCU</span>
+                    </div>
+                  </React.Fragment> : <React.Fragment>
+                      <div className={`${styles.goDownPub} ${styles.goDownB}`}>
+                        <span>{'家属不同意或者导管室到达>60min'}</span>
+                      </div>
+                      <div className={`${styles.goDownPub} ${styles.goDownImg}`}>
+                        <img src={down} alt="" />
+                      </div>
+                      <div className={`${styles.goDownPub} ${styles.goDownB}`}>
+                        <span>{'排除禁忌后考虑立即溶栓（D-D <30min）'}</span>
+                      </div>
+                      <br />
+                      <div className={styles.line}></div>
+                      <div className={`${styles.goDownPub} ${styles.goDownB}`} style={{ color: '#2599ff', border: '1px solid #2599ff' }}>
+                        <span>{'家属同意-导管室直接运转'}</span>
+                      </div>
+                      <div className={`${styles.goDownPub} ${styles.goDownB}`} style={{ border: '0' }}>
+                        <span>{'控制D-B时间<90min'}</span>
+                      </div>
+                    </React.Fragment>
+                }
+              </React.Fragment>
+          }
+        </React.Fragment>
+      } else {
+        return <React.Fragment>
+          <h4>进一步诊疗</h4>
+          <p>{'（STEMI处置时间<10min）'}</p>
+          <h4>查血：检查心肌酶谱+Troponinl</h4>
+          <p style={{ color: "#000", lineHeight: "18px" }}>必要时可 Q1-4h 复查</p>
+          <p style={{ color: "#000", lineHeight: "18px" }}>判读结果同时结果回馈心内科会诊</p>
+          <h4>判断检查结果是否异常</h4>
+          {
+            trdShow ? <React.Fragment>
+              <div className={`${styles.nextWar} ${styles.next}`}>
+                <span>诊断NSTEMI-ACS</span>
+                <i onClick={() => { this.changeTrdShow(false, 1) }}>确定</i>
+              </div>
+              <div className={`${styles.nextCom} ${styles.next}`}>
+                <span>排除NSTEMI-ACS</span>
+                <i onClick={() => { this.changeTrdShow(false, 0) }}>确定</i>
+              </div>
+            </React.Fragment> : <React.Fragment>
+                <div className={`${trdFlg ? styles.nextWar : styles.nextCom} ${styles.next}`}>
+                  <span>{trdFlg ? '诊断NSTEMI-ACS' : '排除NSTEMI-ACS'}</span>
+                  <img onClick={() => { this.changeTrdShow(true, 1) }} src={back} alt="" />
+                </div>
+                <h4>{trdFlg ? '立即服用负荷剂量的双抗药物（若未服用）' : '已排除NSTEMI-ACS ，请其他诊室会诊！'}</h4>
+                {
+                  trdFlg ? <React.Fragment>
+                    <h4>询问并立即服用负荷剂量的双抗药物（若未服用）</h4>
+                    <p style={{ color: '#000', textIndent: '2em', lineHeight: '20px' }}>阿司匹林0.3g+氯吡格雷300mg/600mg（需急诊手术时）或 阿司匹林0.3g+替格瑞洛180mg（"心拯救"一包药）</p>
+                    <h4>判断患者危重程度</h4>
+                    <ul className={`${styles.illDeep} clearfix`}>
+                      <li className={currentIdx==0? styles.selectOn:''}>极高危患者</li>
+                      <li className={currentIdx==1? styles.selectOn:''}>高危患者</li>
+                      <li className={currentIdx==2? styles.selectOn:''}>中危患者</li>
+                      <li className={currentIdx==3? styles.selectOn:''}>低危患者</li>
+                    </ul>
+                    <h4>判断依据</h4>
+                    {selects[currentIdx].basis.length>0?<ul className={styles.doList} id="doList">
+                      {
+                        selects[currentIdx].basis.map((item, idx) => {
+                          return <li key={item+idx}>
+                            {
+                              idx == (selects[currentIdx].basis.length - 1) ? <input type="checkbox" onClick={() => { this.changeCurrentIdx() }} /> : <input type="checkbox" onClick={() => { this.handleShowDetail(currentIdx,item) }} />
+                            }
+                            <i> {idx + 1}、{item}</i>
+                          </li>
+                        })
+                      }
+                    </ul>:null}
+                    {
+                      (show0 && currentIdx==0) ? <React.Fragment>
+                        <div className={`${styles.goDownPub} ${styles.goDownD}`}>
+                          <span>患者危机程度：极高危患者</span>
+                        </div>
+                        <h4>治疗方案</h4>
+                        <div className={`${styles.goDownPub} ${styles.goDownB}`}>
+                          <span>启动导管室、获取知情同意联系床位</span>
+                        </div>
+                        <div className={`${styles.goDownPub} ${styles.goDownImg}`}>
+                          <img src={down} alt="" />
+                        </div>
+                        <div className={`${styles.goDownPub} ${styles.goDownB}`}>
+                          <span>{'家属不同意或者导管室到达>60min'}</span>
+                        </div>
+                        <div className={`${styles.goDownPub} ${styles.goDownImg}`}>
+                          <img src={down} alt="" />
+                        </div>
+                        <div className={`${styles.goDownPub} ${styles.goDownB}`}>
+                          <span>{'排除禁忌后考虑立即溶栓（D-D <30min）'}</span>
+                        </div>
+                        <br />
+                        <div className={styles.line}></div>
+                        <div className={`${styles.goDownPub} ${styles.goDownB}`} style={{ color: '#2599ff', border: '1px solid #2599ff' }}>
+                          <span>{'家属同意-导管室直接运转'}</span>
+                        </div>
+                        <div className={`${styles.goDownPub} ${styles.goDownB}`} style={{ border: '0' }}>
+                          <span>{'控制D-B时间<90min'}</span>
+                        </div>
+                      </React.Fragment> : (show1 && currentIdx==1) ? <React.Fragment>
+                        <div className={`${styles.goDownPub} ${styles.goDownD}`}>
+                          <span>患者危机程度：高危患者</span>
+                        </div>
+                        <h4>治疗方案</h4>
+                        <div className={`${styles.goDownPub} ${styles.goDownB}`}>
+                          <span>{'推荐早期浸入治疗（<24h）'}</span>
+                        </div>
+                        <div className={`${styles.goDownPub} ${styles.goDownImg}`}>
+                          <img src={down} alt="" />
+                        </div>
+                        <div className={`${styles.goDownPub} ${styles.goDownB}`}>
+                          <span>{'收住ICU/CCU'}</span>
+                        </div>
+                        <div className={`${styles.goDownPub} ${styles.goDownImg}`}>
+                          <img src={down} alt="" />
+                        </div>
+                        <div className={`${styles.goDownPub} ${styles.goDownB}`} style={{height:"80px"}}>
+                          <span>{'限期冠脉造影、继续监测生命体征、心电图（q6h）、心肌酶谱变化（q6h）、若有变化随时心内科会诊'}</span>
+                        </div>
+                      </React.Fragment>: (show2&& currentIdx==2) ? <React.Fragment>
+                        <div className={`${styles.goDownPub} ${styles.goDownD}`}>
+                          <span>患者危机程度：中危患者</span>
+                        </div>
+                        <h4>治疗方案</h4>
+                        <div className={`${styles.goDownPub} ${styles.goDownB}`}>
+                          <span>{'推荐浸入治疗（<72h）'}</span>
+                        </div>
+                        <div className={`${styles.goDownPub} ${styles.goDownImg}`}>
+                          <img src={down} alt="" />
+                        </div>
+                        <div className={`${styles.goDownPub} ${styles.goDownB}`}>
+                          <span>{'收住ICU/CCU'}</span>
+                        </div>
+                        <div className={`${styles.goDownPub} ${styles.goDownImg}`}>
+                          <img src={down} alt="" />
+                        </div>
+                        <div className={`${styles.goDownPub} ${styles.goDownB}`} style={{height:"80px"}}>
+                          <span>{'限期冠脉造影、继续监测生命体征、心电图（q6h）、心肌酶谱变化（q6h）、若有变化随时心内科会诊'}</span>
+                        </div>
+                      </React.Fragment> :(currentIdx==3) ? <React.Fragment>
+                        <div className={`${styles.goDownPub} ${styles.goDownD}`}>
+                          <span>患者危机程度：低危患者</span>
+                        </div>
+                        <h4>留观或收住心内科</h4>
+                      </React.Fragment>:null
+                    }
+                  </React.Fragment> : null
+                }
+              </React.Fragment>
+          }
+        </React.Fragment>
+      }
+    }
+  }
+  render() {
+    const { idx, num } = this.props
+    return <div className={`${styles.partTrd} ${styles.partPub}`}>
+      {
+        idx == 3 && num == 1 ? <React.Fragment><div className={`${styles.emergencyBtn} ${styles.btn}`}>{this.state.select3[0]}</div><br /></React.Fragment>
+          : idx == 5 ? <React.Fragment>
+            <div className={`${styles.emergencyBtn} ${styles.btn}`}>{this.state.select5[0]}</div>
+            <div className={`${styles.emergencyBtn} ${styles.btn}`}>{this.state.select5[1]}</div>
+            <br />
+          </React.Fragment> : null
+      }
+      <p>步骤3</p>
+      {
+        this.handleTrdPart()
+      }
+    </div>
+  }
+}
+export default PartTrd;

src/components/EmergencyProcedure/EmergencyPart/index.jsx

@@ -0,0 +1,91 @@
+import styles from './index.less';
+import PartSec from './PartSec';
+import PartTrd from './PartTrd';
+import {windowEventHandler,getWindowInnerHeight} from '@utils/tools'
+
+class EmergencyProcedure extends React.Component {
+  constructor(props){
+    super(props);
+    this.$cont = React.createRef();
+    this.state = {
+      secShow:true,
+      trdShow:false,
+      trdNum:'',
+      num:'',
+    }
+    this.makeSureWar = this.makeSureWar.bind(this)
+    this.makeSureCom = this.makeSureCom.bind(this)
+  }
+  componentDidMount(){
+    const height = getWindowInnerHeight()-144;
+    this.$cont.current.style.height = height+"px";
+    if(this.$cont.current){
+      windowEventHandler('resize', ()=>{
+        const height = getWindowInnerHeight()-144;
+        this.$cont.current.style.height = height+"px";
+      });
+    }
+  }
+  componentWillReceiveProps(nextState){
+    if(nextState.idx != this.props.idx){
+      this.setState({trdShow:false})
+    }
+  }
+  makeSureWar(num){
+    this.setState({
+      trdNum:num
+    })
+  }
+  makeSureCom(link,flg,num){
+    const {setDataIdx,idx} = this.props
+    if(idx == 0){
+      if(link){
+        setDataIdx(link)
+        this.setState({
+          trdShow:false
+        })
+      }else{
+        this.setState({
+          trdShow:flg,
+          num:num
+        })
+      }
+    }else if(idx == 2){
+      this.setState({
+        trdShow:flg,
+        num:num
+      })
+    }else if(idx == 3){
+      this.setState({
+        trdShow:flg,
+        num:num
+      })
+    }else if(idx == 5){
+      this.setState({
+        trdShow:flg,
+        num:num
+      })
+    }else if(idx == 4){
+      this.setState({
+        trdShow:flg,
+        num:num
+      })
+    }
+    
+  }
+  render(){
+    const {data,idx} = this.props
+    const {makeSureCom,makeSureWar} = this
+    const {secShow,trdShow,num,trdNum} = this.state
+    return <div className={styles.emergencyParts} ref={this.$cont}>
+      <div className={`${styles.partFst} ${styles.partPub}`}>
+        <p>步骤1</p>
+        <h4>{data.step1.checks}</h4>
+      </div>
+      {secShow?<PartSec idx={idx} data={data.step2} makeSureCom={makeSureCom} makeSureWar={makeSureWar}></PartSec>:null}
+      {trdShow?<PartTrd idx={idx} num={num} trdNum={trdNum} makeSureCom={this.makeSureCom}></PartTrd>:null}
+    </div>
+  }
+}
+
+export default EmergencyProcedure;

src/components/EmergencyProcedure/EmergencyPart/index.less

@@ -0,0 +1,260 @@
+.emergencyParts {
+  border: 1px solid #CFD4DC;
+  border-radius: 5px;
+  overflow: auto;
+  .partPub {
+    padding: 10px 14px;
+    border-bottom: 1px solid #CFD4DC;
+    p{
+      color: #606060;
+    }
+    h4 {
+      color: #FF1D1D;
+      font-size: 16px;
+      padding: 10px 0  5px 0;
+      font-weight: bold;
+      line-height: 20px;
+    }
+  }
+  
+  .partSec {
+    .btn {
+      padding: 7px 10px;
+      float: right;
+      border-radius: 4px;
+    }
+    .emergencyBtn {
+      border: 1px solid #F76601;
+      color: #F76601;
+      margin-right: 10px;
+    }
+    .commonBtn {
+      border: 1px solid #2599FF;
+      color: #2599FF;
+    }
+    p {
+      margin-top: 20px;
+    }
+    .next {
+      height: 48px;
+      line-height: 48px;
+      background: #F76601;
+      border-radius: 4px;
+      padding: 0 20px;
+      color: #fff;
+      font-size: 14px;
+      margin: 10px 0;
+      position: relative;
+      i{
+        float: right;
+        height: 32px;
+        line-height: 32px;
+        padding: 0 10px;
+        text-align: center;
+        border: 1px solid #fff;
+        margin-top: 8px;
+        border-radius: 4px;
+        cursor: pointer;
+      }
+      img {
+        float: right;
+        cursor: pointer;
+        margin-top: 6px;
+        position: absolute;
+        right: 5px;
+      }
+    }
+    .nextCom {
+      background-color: #2599FF;
+    }
+  }
+  
+  .goDownPub {
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+  }
+  .goDownY{
+    background-color: #feefe5;
+    color: #F76601;
+  }
+  .goDownD{
+    margin-top: 20px;
+    background-color: #fff0f0;
+    color: #FF1D1D;
+    border-radius: 20px;
+    font-size: 16px;
+    font-weight: bold;
+  }
+  .goDownN{
+    background-color: #e9f5ff;
+    color: #2599FF;
+    margin-top: 20px;
+  }
+  .goDownImg{
+    background-color: #fff;
+    height: 20px;
+    line-height: 20px;
+  }
+  .goDownB{
+    border: 1px solid #e9e9e9;
+    border-radius: 4px;
+  }
+  .emergencyBtnS {
+    border: 1px solid #F76601;
+    border-radius: 4px;
+    color: #F76601;
+    height: 36px;
+    line-height: 36px;
+    padding: 0 18px;
+    display: inline-block;
+    margin: 10px 0;
+  }
+  .selectOn {
+    background-color: #F76601;    
+    border: 1px solid #F76601;
+    color: #fff;
+  }
+  .partTrd {
+    border-bottom: 0;
+    .btn {
+      padding: 7px 10px;
+      float: right;
+      border-radius: 4px;
+    }
+    .emergencyBtn {
+      border: 1px solid #F76601;
+      color: #F76601;
+      margin-right: 10px;
+    }
+    .commonBtn {
+      border: 1px solid #2599FF;
+      color: #2599FF;
+    }
+    .next {
+      height: 48px;
+      line-height: 48px;
+      background: #F76601;
+      border-radius: 4px;
+      padding: 0 20px;
+      color: #fff;
+      font-size: 14px;
+      margin: 10px 0;
+      position: relative;
+      i{
+        float: right;
+        height: 32px;
+        line-height: 32px;
+        padding: 0 10px;
+        text-align: center;
+        border: 1px solid #fff;
+        margin-top: 8px;
+        border-radius: 4px;
+        cursor: pointer;
+      }
+      img {
+        float: right;
+        cursor: pointer;
+        margin-top: 6px;
+        position: absolute;
+        right: 5px;
+      }
+    }
+    .nextCom {
+      background-color: #2599FF;
+    }
+    .partLis {
+      padding: 15px 0;
+      border-bottom: 1px solid #CFD4DC;
+      position: relative;
+      p {
+        width: 204px;
+        float: left;
+        line-height: 18px;
+        color: #000;
+      }
+      span {
+        position: absolute;
+        top: 50%;
+        right: 0;
+        margin-top: -18px;
+        width: 162px;
+        height: 36px;
+        line-height: 36px;
+        border: 1px solid #818181;
+        border-radius: 4px;
+        text-align: center;
+        cursor: pointer;
+      }
+    }
+    .warMessage {
+      color: #000;
+      font-size: 16px;
+    }
+    .warTips {
+      height: 46px;
+      line-height: 46px;
+      border: 1px solid #adadad;
+      padding: 0 10px;
+      border-radius: 4px;
+      margin-bottom: 10px;
+    }
+    .line {
+      height: 1px;
+      background-color: #CFD4DC;
+      margin-bottom: 10px ;
+    }
+  }
+  .hold {
+    height: 60px;
+    line-height: 60px;
+    border-top: 1px solid #CFD4DC;
+    .holdRight {
+      height: 36px;
+      line-height: 36px;
+      padding: 0 18px;
+      float: right;
+      border: 1px solid #818181;
+      border-radius: 4px;
+      margin-top: 12px;
+    }
+  }
+  .doList {
+    padding: 7px 15px;
+    background: #ECEFF3;
+    border-radius: 4px;
+    margin-top: 15px;
+    li {
+      margin: 8px 0;
+      line-height: 20px;
+      span {
+        height: 26px;
+        line-height: 26px;
+        padding: 0 10px;
+        background-color: #fff;
+        margin-right: 5px;
+        margin-bottom: 5px;
+        display: inline-block;
+      }
+      input {
+        height: 16px;
+        width: 16px;
+        position: relative;
+        top: 3px;
+      }
+    }
+  }
+  .illDeep {
+    li {
+      float: left;
+      height: 26px;
+      line-height: 26px;
+      padding: 0 10px;
+      margin-right: 10px;
+      border: 1px solid #D7D7D7;
+      border-radius: 4px;
+      cursor: default;
+    }
+  }
+}

src/components/EmergencyProcedure/emergency.js

@@ -0,0 +1,451 @@
+/**
+ * 步骤一
+ * emergencyname   急诊病情
+ * waring  警告  
+ * tips   警告说明
+ * 步骤二
+ * actionname    病情情况（程度）
+ * text   病情情况（程度）右侧按钮文字
+ * link   按钮点击是否跳转，跳转到那个病情下
+ * description    病情情况（程度）描述
+ * choose  步骤三相关内容
+ * next   是否显示第三步
+ */
+let data = [
+    {
+      emergencyname:'胸痛危机重症排除与救治流程',
+      step1:{//步骤1
+        checks:'吸氧、建立12导联心电图、血压监护、抽血测心肌损伤标志物、血气分析、血常规、肾功能、凝血功能'
+      },
+      step2:{//步骤2
+        waring:'判断心电图ST段是否有异常！',
+        tips:'（如果不能明确5-10min重复一次）',
+        select:[],//按钮
+        items:[
+          {actionname:'异常',text:'ACS救治流程（急性冠脉综合征）',link:'4',description:''},
+          {
+            actionname:'无异常',
+            text:'排除ACS胸痛',
+            link:'',
+            description:'判断危机生命的胸痛（心率>110次/分，血压<90/60mmHg晕厥或呼吸次数>25次，全身湿冷）',
+            next:false,
+            choose:[//步骤3
+              {
+                actionname:'是',
+                links:[
+                  {
+                    message:'高血压伴休克体征、撕裂样胸痛，两上肢体血压相差20mmHg以上或者下肢血压较上肢血压低10mmHg',
+                    text:'主动脉夹层救治流程',
+                    link:6
+                  },
+                  {
+                    message:'呼吸困难、顽固性低氧血症，低血压、颈静脉怒张，四肢水肿、晕厥',
+                    text:'肺栓塞救治流程',
+                    link:4
+                  },
+                  {
+                    message:'呼吸困难、一侧肺呼吸音减弱或消失',
+                    text:'气胸救治流程',
+                    link:3
+                  },
+                  {
+                    message:'症状体征提示心包积液',
+                    text:'心包积液救治流程',
+                    link:2
+                  },
+                ]
+              },
+              {
+                actionname:'否',
+                links:[],
+                message:'建议胸痛中心观察6-8h'
+              },
+            ]
+          },
+        ]
+      }
+    },
+    {
+      emergencyname:'心包积液救治流程',
+      step1:{//步骤1
+        checks:'检查超声心动图',
+      },
+      step2:{//步骤2
+        waring:'',
+        tips:'',
+        select:['心外会诊','心内会诊'],//按钮
+        items:[
+          {
+            actionname:'心包积液',
+            text:'确定',
+            link:'',
+            description:'判断是否心包填塞',
+            next:false,
+            choose:[//步骤2
+              {
+                actionname:'是',
+                links:[
+                  {
+                    message:'心包穿刺',
+                    text:'主动脉夹层救治流程',
+                    link:''
+                  },
+                  {
+                    message:'穿刺夜分析对症治疗',
+                    text:'肺栓塞救治流程',
+                    link:''
+                  },
+                  {
+                    message:'抢救室待床！',
+                    text:'',
+                    link:''
+                  }
+                ]
+              },
+              {
+                actionname:'否',
+                links:[
+                  {
+                    message:'积液量少查找病因对症治疗',
+                    text:'',
+                    link:''
+                  },
+                  {
+                    message:'病情未控制病情恶化',
+                    text:'',
+                    link:''
+                  },
+                  {
+                    message:'心包穿刺',
+                    text:'',
+                    link:''
+                  },
+                  {
+                    message:'穿刺夜分析对症治疗',
+                    text:'',
+                    link:''
+                  },
+                  {
+                    message:'抢救室待床！',
+                    text:'',
+                    link:''
+                  }
+                ]
+              },
+            ]
+          },
+          {
+            actionname:'非心包积液',
+            text:'确定',
+            link:'',
+            description:'查找其他原因',
+            next:false,
+            choose:[]
+          },
+        ]
+      }
+    },
+    {
+      emergencyname:'气胸救治流程',
+      step1:{//步骤1
+        checks:'听诊呼吸音是否减弱或消失',
+      },
+      step2:{//步骤2
+        waring:'检查X线或者CT检查',
+        tips:'',
+        select:['普通心内会诊','紧急心内会诊'],//按钮
+        items:[
+          {
+            actionname:'气胸患者',
+            text:'确定',
+            link:'',
+            description:'结合症状体征是否危机生命是否濒死休克',
+            next:true,
+            choose:[
+              {
+                actionname:'是',
+                links:[//步骤3
+                  {
+                    message:'急诊胸穿',
+                    text:'抢救室待救',
+                    link:''
+                  }
+                ]
+              },
+              {
+                actionname:'否',
+                description:'判断肺压缩大于25%或小于25%',
+                links:[
+                  {
+                    message:'建议保守对症治疗止咳、祛痰、急诊留观',
+                    text:'',
+                    diagnose:'择期胸穿',
+                    result:'肺压缩大于25%',
+                    link:''
+                  },
+                  {
+                    message:'建议保守对症治疗止咳、祛痰',
+                    text:'',
+                    diagnose:'',
+                    result:'肺压缩小于25%',
+                    link:''
+                  },
+                  {
+                    message:'病情未控制继续恶化',
+                    result:'择期胸穿',
+                    text:'',
+                    link:''
+                  },
+                  {
+                    message:'病情好转',
+                    result:'门诊随访',
+                    text:'',
+                    link:''
+                  }
+                ]
+              },
+            ]
+          },
+          {
+            actionname:'非气胸患者',
+            text:'',
+            link:'',
+            description:'查找其他原因',
+            next:false,
+            choose:[]
+          },
+        ]
+      }
+    },
+    {
+      emergencyname:'肺栓塞救治流程',
+      step1:{//步骤1
+        checks:'立即检查D-二聚体+床旁超声心动图',
+      },
+      step2:{//步骤2
+        waring:'判断血压是否正常或休克',
+        tips:'',
+        select:[],//按钮
+        items:[
+          {
+            actionname:'伴低血压休克',
+            text:'确定',
+            link:'',
+            description:'判断右心负荷是否增加',
+            next:true,
+            choose:[
+              {
+                actionname:'右心负荷增加（DDI阳性）',
+                select:['呼吸科会诊'],
+                links:[//步骤3
+                  {
+                    message:'生命体征不稳定',
+                    text:['根据病史、体征、PE评分判断病情','考虑溶栓或者血栓切除','ACLS（高级心脏生命支持）','收入ICU'],
+                    link:''
+                  },
+                  {
+                    message:'生命体征稳定建议检查CTAP（肺动脉造影）',
+                    text:'建议检查肺动脉增强CT',
+                    link:''
+                  },
+                  {
+                    message:'阳性',
+                    result:'按肺栓塞治疗',
+                    text:'',
+                    link:''
+                  },
+                  {
+                    message:'阴性',
+                    result:'请相关科室会寻找病因',
+                    text:'',
+                    link:''
+                  }
+                ]
+              },
+              {
+                actionname:'右心负荷不增加（DDI阴性）',
+                links:[
+                  {
+                    message:'建议ACLS（高级心脏生命支持）',
+                    text:'请相关科室会寻找病因',
+                    diagnose:'',
+                    result:'',
+                    link:''
+                  }
+                ]
+              },
+            ]
+          },
+          {
+            actionname:'不伴低血压休克',
+            text:'',
+            link:'',
+            description:'根据临床经验或者PE评分规则评估PE可能性',
+            next:true,
+            choose:[
+              {
+                actionname:'评分高或DDI阳性',
+                description:'建议检查CTPA（肺动脉造影）',
+                links:[
+                  {
+                    message:'阳性',
+                    result:'按肺栓塞治疗',
+                    text:'',
+                    link:''
+                  },
+                  {
+                    message:'阴性',
+                    result:'请相关科室会寻找病因',
+                    text:'',
+                    link:''
+                  }
+                ]
+              },
+              {
+                actionname:'评分低且DDI阴性',
+                links:[
+                  {
+                    message:'排除肺栓塞',
+                    text:'请相关科室会寻找病因'
+                  }
+                ]
+              },
+            ]
+          },
+        ]
+      }
+    },
+    {
+      emergencyname:'急性冠脉综合征救治流程',
+      step1:{//步骤1
+        checks:'立即检查18导联心电图',
+      },
+      step2:{//步骤2
+        waring:'判断心电图ST段是否有异常！',
+        tips:'（如果不能明确5-10min重复一次）',
+        select:['普通心内会诊','紧急心内会诊'],//按钮
+        items:[
+              {
+                actionname:'ST段抬高或新发LBBB',
+                waring:'进一步治疗',
+                tips:'（STEMI处置时间<10min）',
+                prevAction:[
+                  {name:'告病重，立即送抢救室，停止活动，绝对卧床'},
+                  {name:'监测生命体征，持续心电监护，建立静脉通道（左侧肢体，1-2路）'},
+                  {name:'必要时给氧，保持血氧饱和度95%以上'},
+                  {name:'取血化验',list:['血常规','急诊生化','心肌酶谱','Troponinl','凝血功能','术前免疫']},
+                  {name:'床边心超检查'},
+                  {name:'询问相关病史和体格检查'}
+                ],
+                parts:{
+                    text:'询问并立即服用负荷剂量的双抗药物（若未服用）',
+                    description:'阿司匹林0.3g+氯吡格雷300mg/600mg（需急诊手术时）或2、阿司匹林0.3g+替格瑞洛180mg（"心拯救"一包药）',
+                },
+                links:{
+                  title:'患者发病时间！',
+                  timeList:[
+                    {
+                      message:'发病大于12小时',
+                      description:'判断患者是否有急诊PCI指证',
+                      textYes:['启动导管室、获取知情同意联系床位','家属不同意或者导管室到达>60min','排除禁忌后考虑立即溶栓（D-D <30min）','家属同意-导管室直接运转','控制D-B时间<90min'],
+                      textNo:['收住ICU/CCU']
+                    },
+                    {
+                      message:'发病小于12小时',
+                      description:'启动导管室、获取知情同意联系床位',
+                      textYes:['导管室直接运转','控制D-B时间<90min'],
+                      textNo:['家属不同意或者导管室到达>60min','排除禁忌后考虑立即溶栓（D-D <30min）']
+                    },
+                  ]
+                }
+              },
+              {
+                actionname:'ST段压低或无特征性改变',
+                waring:'进一步治疗',
+                tips:'（STEMI处置时间<10min）',
+                parts:{
+                    text:'查血：检查心肌酶谱+Troponinl',
+                    description:['必要时可 Q1-4h  复查','判读结果同时结果回馈心内科会诊'],
+                },
+                links:{
+                  title:'判断检查结果是否异常',
+                  timeList:[
+                    {
+                      message:'诊断NSTEMI-ACS',
+                      description:'询问并立即服用负荷剂量的双抗药物（若未服用）',
+                      text:'阿司匹林0.3g+氯吡格雷300mg/600mg（需急诊手术时）或2、阿司匹林0.3g+替格瑞洛180mg（"心拯救"一包药）',
+                      selects:[{
+                          name:'极高危患者',
+                          basis:[
+                            '血流动力学不稳定或心源性休克',
+                            '再发性或药物治疗难以缓解的持续性胸痛',
+                            '危及生命的心律失常或心跳骤停',
+                            '心肌梗死的机械性并发症',
+                            '急性心衰',
+                            'ST-T动态改变，特别是间歇性ST段抬高',
+                            '以上依据都不符合'
+                          ],
+                        },
+                        {
+                          name:'高危患者',
+                          basis:[
+                            '肌钙蛋白水平升高或降低与心梗一致',
+                            '动态ST或T波改变（有或无症状）',
+                            'GRACE评分>140',
+                            '以上依据都不符合'
+                          ]
+                        },
+                        {
+                          name:'中危患者',
+                          basis:[
+                            '糖尿病',
+                            '肾功能不全（eGFR<60ml/min/1.73m2）',
+                            'LVEF<40%或充血性心力衰竭',
+                            '梗死后早起心绞痛',
+                            '近期PCI史',
+                            '之前CABG史',
+                            'GRACE评分>109且<140',
+                            '以上依据都不符合'                            
+                          ]
+                        },
+                        {
+                          name:'低危患者',
+                          basis:[]
+                        },
+                      ]
+                    },
+                    {
+                      message:'排除NSTEMI-ACS',
+                      description:'已排除NSTEMI-ACS ，请其他诊室会诊！'
+                    },
+                  ]
+                }
+              },
+            ]
+      }
+
+    },
+    {
+      emergencyname:'主动脉夹层救治流程',
+      step1:{//步骤1
+        checks:'立即检查D-二聚体+床旁超声心动图',
+      },
+      step2:{//步骤2
+        waring:'判断DDI和TTE阴性或阳性！',
+        tips:'',
+        select:[],//按钮
+        items:[
+          {
+            actionname:'DDI阳性或TTE阳性(疑似AD)'
+          },
+          {
+            actionname:'DDI阴性或TTE阴性',
+          },
+        ]
+      }
+
+    },
+  ]
+
+
+  export default data;

src/components/EmergencyProcedure/index.jsx

@@ -0,0 +1,51 @@
+import styles from './index.less';
+import right from './img/right.png';
+import EmergencyModal from './EmergencyModal';
+import $ from 'jquery';
+
+class EmergencyProcedure extends React.Component {
+  constructor(props){
+    super(props);
+    this.state = {
+      show:false,
+      data:{}
+    }
+  }
+  
+  slideToggle(type){
+    if(type){
+      $("#emergencyName").css({"display":"block","paddingLeft":"50px","paddingRight":"30px"})
+      $("#emergencyPic").css("display","block")
+      $("#emergencys").css("display","none")
+      $("#emergency").css("display","block")
+      $("#emergencyWrap").css({"width":"auto","height":"44px"})
+    }else{
+      $("#emergencyName").css({"display":"none","padding":"0"})
+      $("#emergencyPic").css("display","none")
+      $("#emergencyWrap").css({"width":"44px","height":"44px"})
+      $("#emergencys").css("display","block")
+      $("#emergency").css("display","none")
+    }
+  }
+  handleShow(type){
+    this.setState({
+      show:type
+    })
+  }
+  render(){
+    const {data,setDataIdx,idx} = this.props;
+    return <div className={styles.emergencyProdureWrap}>
+      <div id="emergencyWrap" className={styles.emergencyWrap}>
+        <span id="emergency" className={`${styles.emergency}`} onClick={()=>this.slideToggle(0)}>急</span>
+        <span id="emergencys" onClick={()=>this.slideToggle(1)} className={styles.emergency}>急</span>
+        <div id="emergencyName" className={styles.emergencyName} onClick={()=>this.handleShow(true)}>{data.emergencyname}</div>
+        <i  onClick={()=>this.slideToggle(0)} id="emergencyPic"><img src={right} alt=""/></i>
+      </div>
+      {
+        this.state.show?<EmergencyModal idx={idx} handleShow={()=>this.handleShow()} setDataIdx={setDataIdx} data={data}></EmergencyModal>:null
+      }
+    </div>
+  }
+}
+
+export default EmergencyProcedure;

src/components/EmergencyProcedure/index.less

@@ -0,0 +1,54 @@
+.emergencyProdureWrap {
+  .emergencyWrap {
+    moz-user-select: -moz-none;
+    -moz-user-select: none;
+    -o-user-select: none;
+    -khtml-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    position: fixed;
+    z-index: 205;
+    top: 55px;
+    right: 20px;
+    width: 44px;
+    height: 44px;
+    line-height: 44px;
+    border-radius: 22px;
+    border: 2px solid #F93333;
+    background-color: #fff;
+    cursor: pointer;
+
+    .emergencyName {
+      overflow: hidden;
+      display: none;
+    }
+
+    i {
+      position: absolute;
+      top: 0px;
+      right: 10px;
+      width: 22px;
+      height: 40px;
+
+      img {
+        position: relative;
+        top: 6px;
+      }
+    }
+  }
+
+  .emergency {
+    width: 40px;
+    height: 40px;
+    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/WrapModalBody/WrapModalTableSon/index.jsx

@@ -33,13 +33,13 @@ class WrapModalTableSon extends React.Component {
       <div className={`${style.SonTable}`}>
         <table>
           <tr className={style.head}>
-            <td className={`${style.fst} ellipsOver`} onClick={allCheckImport}><img className={style.check} src={allCheck?check_right:check_circle} alt="" />全选</td>
-            <td className={`${style.sec} ellipsOver`}>编号</td>
-            <td className={`${style.trd} ellipsOver`}>项目名称</td>
-            <td className={`${style.four} ellipsOver`}>结果</td>
-            <td className={`${style.fif} ellipsOver`}>单位</td>
-            <td className={`${style.six} ellipsOver`}>参考值</td>
-            <td className={`${style.sev} ellipsOver`} style={{display:(hospitalSonInspect && hospitalSonInspect.lisExcelWrapper && hospitalSonInspect.lisExcelWrapper.length)>5?'':'none'}}></td>
+            <td className={`${style.fst}`} onClick={allCheckImport}><img className={style.check} src={allCheck?check_right:check_circle} alt="" />全选</td>
+            <td className={`${style.sec}`}>编号</td>
+            <td className={`${style.trd}`}>项目名称</td>
+            <td className={`${style.four}`}>结果</td>
+            <td className={`${style.fif}`}>单位</td>
+            <td className={`${style.six}`}>参考值</td>
+            <td className={`${style.sev}`} style={{display:(hospitalSonInspect && hospitalSonInspect.lisExcelWrapper && hospitalSonInspect.lisExcelWrapper.length)>5?'':'none'}}></td>
           </tr>
         </table>
       </div>
@@ -49,20 +49,20 @@ class WrapModalTableSon extends React.Component {
           {
             hospitalSonInspect && hospitalSonInspect.lisExcelWrapper && hospitalSonInspect.lisExcelWrapper.map((item, idx) => {
               return <tr>
-                <td className={`${style.fst} ellipsOver`}>
+                <td className={`${style.fst}`}>
                   {
                     this.getImgPath(item.itemName,hospitalSonInspect.groupName,item)
                   }
                 </td>
-                <td className={`${style.sec} ellipsOver`}>{idx+1}</td>
-                <td title={item.itemName} className={`${style.trd} ellipsOver`}>{item.itemName}</td>
-                <td title={item.value} className={`${style.four} ellipsOver`}>
+                <td className={`${style.sec}`}>{idx+1}</td>
+                <td title={item.itemName} className={`${style.trd}`}>{item.itemName}</td>
+                <td title={item.value} className={`${style.four}`}>
                   {
                     getStatusImg(item.type,item.value,0)
                   }
                 </td>
-                <td title={item.unit} className={`${style.fif} ellipsOver`}>{item.unit}</td>
-                <td title={`${item.min}-${item.max}`} className={`${style.six} ellipsOver`}>{item.min}-{item.max}</td>
+                <td title={item.unit} className={`${style.fif}`}>{item.unit}</td>
+                <td title={`${item.min}-${item.max}`} className={`${style.six}`}>{item.min}-{item.max}</td>
               </tr>
             })
           }

src/components/WrapModalBodyPac/WrapModalTableSon/index.jsx

@@ -32,11 +32,11 @@ class WrapModalTableSon extends React.Component {
       <div className={`${style.SonTable}`}>
         <table>
           <tr className={style.head}>
-            <td className={`${style.fst} ellipsOver`} onClick={allCheckImport}><img className={style.check} src={allCheck?check_right:check_circle} alt="" />全选</td>
-            <td className={`${style.sec} ellipsOver`}>检查项目</td>
-            <td className={`${style.trd} ellipsOver`}>影像所见</td>
-            <td className={`${style.four} ellipsOver`}>影像诊断</td>
-            <td className={`${style.sev} ellipsOver`} style={{display:(hospitalSonInspect && hospitalSonInspect.pacsResultDTO && hospitalSonInspect.pacsResultDTO.length)>5?'':'none'}}></td>
+            <td className={`${style.fst}`} onClick={allCheckImport}><img className={style.check} src={allCheck?check_right:check_circle} alt="" />全选</td>
+            <td className={`${style.sec}`}>检查项目</td>
+            <td className={`${style.trd}`}>影像所见</td>
+            <td className={`${style.four}`}>影像诊断</td>
+            <td className={`${style.sev}`} style={{display:(hospitalSonInspect && hospitalSonInspect.pacsResultDTO && hospitalSonInspect.pacsResultDTO.length)>5?'':'none'}}></td>
           </tr>
         </table>
       </div>
@@ -46,14 +46,14 @@ class WrapModalTableSon extends React.Component {
           {
             hospitalSonInspect && hospitalSonInspect.pacsResultDTO && hospitalSonInspect.pacsResultDTO.map((item, idx) => {
               return <tr>
-                <td className={`${style.fst} ellipsOver`}>
+                <td className={`${style.fst}`}>
                   {
                     this.getImgPath(item.checkItem,hospitalSonInspect.checkItem,item)
                   }
                 </td>
-                <td title={item.checkItem} className={`${style.sec} ellipsOver`}>{item.checkItem}</td>
-                <td title={item.imagingDiagnose} className={`${style.trd} ellipsOver`}>{item.imagingDiagnose}</td>
-                <td title={item.imagingResults} className={`${style.four} ellipsOver`}>{item.imagingResults}</td>
+                <td title={item.checkItem} className={`${style.sec}`}>{item.checkItem}</td>
+                <td title={item.imagingDiagnose} className={`${style.trd}`}>{item.imagingDiagnose}</td>
+                <td title={item.imagingResults} className={`${style.four}`}>{item.imagingResults}</td>
               </tr>
             })
           }

src/modules/HomePage/index.jsx

@@ -3,21 +3,24 @@ import { connect } from "react-redux";
 import BannerContainer from '@containers/TypeConfigContainer';
 //  引入组件
 import BodyContainer from "@components/BodyContainer";
+import EmergencyProcedure from '@components/EmergencyProcedure';
 
 import {HIDEDROP,SETMINSCREEN} from '@store/types/homePage.js';
 import style from './index.less';
 import {getInitModules,getChronic} from '@store/async-actions/homePage.js';
 import { getUrlArgObject } from "@utils/tools";
 import $ from 'jquery';
+import data from '@components/EmergencyProcedure/emergency';
 import loading from '@common/images/loading.gif';
 class HomePage extends Component {
     constructor() {
         super();
         this.state={
-            timer:null
+            timer:null,
+            idx:getUrlArgObject('emergency')+''
         }
+        this.setDataIdx = this.setDataIdx.bind(this)
     }
-    
     componentDidMount(){
         const {setWindow,getChronicList} = this.props;
         getChronicList&&getChronicList();//获取慢病列表
@@ -51,13 +54,20 @@ class HomePage extends Component {
             } 
         })
     }
-
+    setDataIdx(index){
+      this.setState({
+        idx:index+''
+      })
+    }
     render() {
         const {flag} = this.props;
         return <div className={style['home-page']} onClick={this.props.hideAllDrop}>
             <BannerContainer />
             {/* <InfoTitle /> */}
             <BodyContainer></BodyContainer>
+            {
+              this.state.idx&&data[this.state.idx]?<EmergencyProcedure data={data[this.state.idx]} idx={this.state.idx} setDataIdx={this.setDataIdx}></EmergencyProcedure>:null
+            }
             <div className={style['mask']} style={{display:flag?"block":"none"}}>
                 <img src={loading} className={style['load']}/>
             </div>

src/utils/drag.js

@@ -64,7 +64,8 @@ function handleMove(event) {
       left: dragX + 'px',
       marginLeft: 0 + 'px',
       marginTop: 0 + 'px',
-      top: dragY + 'px'
+      top: dragY + 'px',
+      right:'inherit',
     })
   }
 }