浏览代码

气胸流程

luolei 5 年之前
父节点
当前提交
5ca3205f81
共有 3 个文件被更改,包括 387 次插入32 次删除
  1. 111 6
      src/css/emergency.less
  2. 154 3
      src/html/emergency.html
  3. 122 23
      src/js/emergency.js

+ 111 - 6
src/css/emergency.less

@@ -1,23 +1,80 @@
 @import './common.less';
 
 .emergencyLis {
-  padding-bottom: 30px;
+  padding: 20px 15px;
   .disName{
     height: 60px;
     line-height: 60px;
     position: relative;
+    padding: 0 14px;
     .name {
       display: inline-block;
       font-size: 16px;
-      padding: 0 5px;
-      max-width: 265px;
+      max-width: 500px;
+      padding-right: 80px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+      float: left;
+      span {
+        font-size: 16px;
+      }
+      img {
+        position: relative;
+        top: 7px;
+        left: 3px;
+      }
     }
+    .disNameLis {
+      float: right;
+      color: #2a9bd5;
+      font-weight: 700;
+      cursor: pointer;
+    }
+    .disLis {
+      display: none;
+      position: absolute;
+      width: 95%;
+      top: 46px;
+      padding: 10px;
+      box-sizing: border-box;
+      background-color: #fff;
+      box-shadow: 0 10px 20px 0 #989da3;
+      border: 1px solid #dedede;
+      z-index: 1;
+      li {
+        line-height: 18px;
+        float: left;
+        padding: 10px;
+        cursor: pointer;
+      }
+      i {
+        width: 0;
+        height: 0;
+        border-width: 10px;
+        border-style: solid;
+        border-color: transparent transparent #fff transparent;
+        position: absolute;
+        top: -20px;
+        right: 10px;
+      }
+    }
+  }
+  .disFst {
+    border: 1px solid #cfd4dc;
+    border-radius: 5px;
+    overflow: auto;
+    display: none;
+  }
+  .disSec {
+    display: none;
+  }
+  .disTrd {
+    display: block;
   }
   .step {
-    padding: 10px 14px 0 14px;
+    padding: 10px 14px;
+    border-bottom: 1px solid #cfd4dc;
     p {
       color: #606060;
     }
@@ -109,18 +166,22 @@
       display: none;
     }
   }
-  .disBtnRed {
+  .disBtnRed,.disBtnTrdRed,.disBtnTreRed {
     background-color: #f76601;
   }
-  .disBtnBlue {
+  .disBtnBlue,.disBtnTrdBlue,.disBtnTreBlue {
     background-color: #2599ff;
   }
+  .disBtnTrdRed,.disBtnTrdBlue,.disMainRed9,.disMainRed10 {
+    display: none;
+  }
   .disFst {
     .stepFst {
       border-bottom: 1px solid #cfd4dc;
     }
   }
   .disMainRed,.disMainBlue {
+    overflow: hidden;
     display: none;
   }
   .disMainRed h5,.disMainBlue h5 {
@@ -130,4 +191,48 @@
     font-weight: 700;
     line-height: 20px;
   }
+  .stepTrd{
+    overflow: hidden;
+    display: none;
+    border-bottom: none;
+    .disBtn img {
+      display: block;
+    }
+    .inHeart {
+      float: none;
+      display: inline-block;
+      margin-bottom: 5px;
+    }
+    p {
+      color: #000;
+    }
+  }
+  .stepTrdWrong {
+    display: none;
+  }
+  .btnBgWhite {
+    height: 46px;
+    line-height: 46px;
+    border: 1px solid #adadad;
+    padding: 0 10px;
+    border-radius: 4px;
+    margin-bottom: 10px;
+    color: #606060;
+  }
+  .lineSpace {
+    border-bottom: 1px solid #cfd4dc;
+    margin: 10px 0;
+  }
+  .spaceBetween {
+    height: 60px;
+    line-height: 60px;
+    border-top: 1px solid #cfd4dc;
+    span,i {
+      display: inline-block;
+    }
+    i {
+      float: right;
+      margin-right: 15px;
+    }
+  }
 }

+ 154 - 3
src/html/emergency.html

@@ -7,7 +7,18 @@
 </head>
 <body>
   <div class="emergencyLis">
-    <div class="disName">心包积液救治流程</div>
+    <div class="disName">
+      <p class="name"><span id="disName">心包积液</span>救治流程<img src="./images/pic.png" alt=""></p>
+      <div class="disNameLis">其他危重症状</div>
+      <ul class="disLis">
+        <i></i>
+        <li>心包积液</li>
+        <li>气胸</li>
+        <li>肺栓塞</li>
+        <li>急性冠脉综合征</li>
+        <li>主动脉夹层</li>
+      </ul>
+    </div>
     <div class="disFst">
       <div class="step stepFst">
         <p>步骤1</p>
@@ -15,12 +26,12 @@
       </div>
       <div class="step stepSec">
         <p>步骤2</p>
-        <div class="disBtn disBtnRed" id="disBtnRed">
+        <div class="disBtn disBtnRed">
           <span>心包积液</span>
           <i id="sureBtn1">确定</i>
           <img id="backBtn1" src="./images/back.png" alt="">
         </div>
-        <div class="disBtn disBtnBlue" id="disBtnBlue">
+        <div class="disBtn disBtnBlue">
           <span>非心包积液</span>
           <i id="sureBtn2">确定</i>
           <img id="backBtn2" src="./images/back.png" alt="">
@@ -54,6 +65,146 @@
         </div>
       </div>
     </div>
+    <div class="disFst disSec">
+      <div class="step stepFst">
+        <p>步骤1</p>
+        <h4>听诊呼吸音是否减弱或消失</h4>
+      </div>
+      <div class="step stepSec">
+        <p>步骤2</p>
+        <h4>进行全血细胞计数+血型鉴定、术前免疫、凝血功能、肺部B超、胸部X线或者胸部CT检查</h4>
+        <div class="disBtn disBtnRed">
+          <span>气胸患者</span>
+          <i id="sureBtn3">确定</i>
+          <img id="backBtn3" src="./images/back.png" alt="">
+        </div>
+        <div class="disBtn disBtnBlue">
+          <span>非气胸患者</span>
+          <i id="sureBtn4">确定</i>
+          <img id="backBtn4" src="./images/back.png" alt="">
+        </div>
+        <div class="disMainRed">
+          <h5>结合症状体征是否危机生命是否濒死休克</h5>
+          <div class="inHeart">胸外科会诊</div>
+        </div>
+        <div class="disBtn disBtnTrdRed disBtnTrd">
+          <span>是</span>
+          <i id="sureBtn5">确定</i>
+        </div>
+        <div class="disBtn disBtnTrdBlue disBtnTrd">
+          <span>否</span>
+          <i id="sureBtn6">确定</i>
+        </div>
+        <div class="disMainBlue">
+            <h4>查找其他原因</h4>
+        </div>
+      </div>
+      <div class="step stepTrd stepTrdRight">
+        <p>步骤3</p>
+        <div class="disBtn disBtnTreRed">
+          <span>是</span>
+          <img id="backBtn7" src="./images/back.png" alt="">
+        </div>
+        <div class="inHeart">急诊胸腔闭式引流</div>
+        <p>抢救室待救</p>
+      </div>
+      <div class="step stepTrd stepTrdWrong">
+        <p>步骤3</p>
+        <div class="disBtn disBtnTreBlue">
+          <span>否</span>
+          <img id="backBtn8" src="./images/back.png" alt="">
+        </div>
+        <h4>判断肺压缩大于25%或小于25%</h4>
+        <div class="btnBgWhite">肺压缩大于25%</div>
+        <h4>建议保守对症治疗止咳、祛痰、急诊留观</h4>
+        <div class="inHeart">择期胸穿</div>
+        <div class="lineSpace"></div>
+        <div class="btnBgWhite">肺压缩小于25%</div>
+        <h4>建议保守对症治疗止咳、祛痰</h4>
+        <br>
+        <div class="spaceBetween">
+          <span>病情未控制继续恶化</span>
+          <i>择期胸穿</i>
+        </div>
+        <div class="spaceBetween">
+          <span>病情好转</span>
+          <i>胸外科随诊</i>
+        </div>
+      </div>
+    </div>
+    <div class="disFst disTrd">
+      <div class="step stepFst">
+        <p>步骤1</p>
+        <h4>立即进行全血细胞计数+血型鉴定、术前免疫、凝血功能、D-二聚体、床旁超声心动图检查</h4>
+      </div>
+      <div class="step stepSec">
+        <p>步骤2</p>
+        <h4>判断血压是否正常或休克</h4>
+        <div class="disBtn disBtnRed">
+          <span>伴低血压休克</span>
+          <i id="sureBtn9">确定</i>
+          <img id="backBtn9" src="./images/back.png" alt="">
+        </div>
+        <div class="disBtn disBtnBlue">
+          <span>不伴低血压休克</span>
+          <i id="sureBtn10">确定</i>
+          <img id="backBtn10" src="./images/back.png" alt="">
+        </div>
+        <h4 class="disMainRed9">判断右心负荷是否增加</h4>
+        <div class="disBtn disBtnTrdRed disBtnTrd9">
+          <span>右心负荷增加(DDI阳性)</span>
+          <i id="sureBtn11">确定</i>
+        </div>
+        <div class="disBtn disBtnTrdBlue disBtnTrd9">
+          <span>右心负荷不增加(DDI阴性)</span>
+          <i id="sureBtn12">确定</i>
+        </div>
+        <h4 class="disMainRed10">根据临床经验或者PE评分规则评估PE可能性</h4>
+        <div class="disBtn disBtnTrdRed disBtnTrd10">
+          <span>评分高或DDI阳性</span>
+          <i id="sureBtn11">确定</i>
+        </div>
+        <div class="disBtn disBtnTrdBlue disBtnTrd10">
+          <span>评分低且DDI阴性</span>
+          <i id="sureBtn12">确定</i>
+        </div>
+        <div class="disMainBlue">
+            <h4>查找其他原因</h4>
+        </div>
+      </div>
+      <div class="step stepTrd stepTrdRight9">
+        <p>步骤3</p>
+        <div class="disBtn disBtnTreRed">
+          <span>是</span>
+          <img id="backBtn7" src="./images/back.png" alt="">
+        </div>
+        <div class="inHeart">急诊胸腔闭式引流</div>
+        <p>抢救室待救</p>
+      </div>
+      <div class="step stepTrd stepTrdWrong">
+        <p>步骤3</p>
+        <div class="disBtn disBtnTreBlue">
+          <span>否</span>
+          <img id="backBtn8" src="./images/back.png" alt="">
+        </div>
+        <h4>判断肺压缩大于25%或小于25%</h4>
+        <div class="btnBgWhite">肺压缩大于25%</div>
+        <h4>建议保守对症治疗止咳、祛痰、急诊留观</h4>
+        <div class="inHeart">择期胸穿</div>
+        <div class="lineSpace"></div>
+        <div class="btnBgWhite">肺压缩小于25%</div>
+        <h4>建议保守对症治疗止咳、祛痰</h4>
+        <br>
+        <div class="spaceBetween">
+          <span>病情未控制继续恶化</span>
+          <i>择期胸穿</i>
+        </div>
+        <div class="spaceBetween">
+          <span>病情好转</span>
+          <i>胸外科随诊</i>
+        </div>
+      </div>
+    </div>
   </div>
 </body>
 </html>

+ 122 - 23
src/js/emergency.js

@@ -1,29 +1,128 @@
 require("./../css/emergency.less")
 require("../images/back.png")
 require("../images/down2.png")
+require("../images/pic.png")
 const $ = require("jquery");
+$(function(){
+  $(".disFst").height(window.innerHeight-105+'px')
+  $("#sureBtn1").click(function(){
+    sure(1)
+  })
+  $("#backBtn1").click(function(){
+    back(1)
+  })
+  $("#sureBtn2").click(function(){
+    backSure(2)
+  })
+  $("#backBtn2").click(function(){
+    backRe(2)
+  })
+  $(".disNameLis").click(function(e){
+    e.stopPropagation()
+    if($(".disLis").css("display")=="block"){
+      $(".disLis").css("display","none")
+    }else{
+      $(".disLis").css("display","block")
+    }
+  })
+  $(document).click(function(){
+    $(".disLis").css("display","none")
+  })
 
-$("#sureBtn1").click(function(){
-  $(this).css({display:"none"})
-  $("#disBtnBlue").css({display:"none"})
-  $("#backBtn1").css({display:"block"})
-  $(".disMainRed").css({display:"block"})
-})
-$("#backBtn1").click(function(){
-  $(this).css({display:"none"})
-  $("#disBtnBlue").css({display:"block"})
-  $("#sureBtn1").css({display:"block"})
-  $(".disMainRed").css({display:"none"})
-})
-$("#sureBtn2").click(function(){
-  $(this).css({display:"none"})
-  $("#disBtnRed").css({display:"none"})
-  $("#backBtn2").css({display:"block"})
-  $(".disMainBlue").css({display:"block"})
-})
-$("#backBtn2").click(function(){
-  $(this).css({display:"none"})
-  $("#disBtnRed").css({display:"block"})
-  $("#sureBtn2").css({display:"block"})
-  $(".disMainBlue").css({display:"none"})
+  
+  $("#sureBtn3").click(function(){
+    sure(3)
+  })
+  $("#backBtn3").click(function(){
+    back(3)
+  })
+  $("#sureBtn4").click(function(){
+    backSure(4)
+  })
+  $("#backBtn4").click(function(){
+    backRe(4)
+  })
+  $("#sureBtn5").click(function(){
+    $(".disBtnTrd").css("display","none")
+    $(".stepTrdRight").css("display","block")
+  })
+  $("#sureBtn6").click(function(){
+    $(".disBtnTrd").css("display","none")
+    $(".stepTrdWrong").css("display","block")
+  })
+  $("#backBtn7").click(function(){
+    $(".disBtnTrd").css("display","block")
+    $(".stepTrdRight").css("display","none")
+  })
+  $("#backBtn8").click(function(){
+    $(".disBtnTrd").css("display","block")
+    $(".stepTrdWrong").css("display","none")
+  })
+
+  $("#sureBtn9").click(function(){
+    $(".disBtnBlue").css("display","none")
+    $("#sureBtn9").css("display","none")
+    $("#backBtn9").css("display","block")
+    $(".disBtnTrd9").css("display","block")
+    $(".disMainRed9").css("display","block")
+  })
+  $("#sureBtn10").click(function(){
+    $(".disBtnRed").css("display","none")
+    $("#sureBtn10").css("display","none")
+    $("#backBtn10").css("display","block")
+    $(".disBtnTrd10").css("display","block")
+    $(".disMainRed10").css("display","block")
+  })
+  $("#backBtn9").click(function(){
+    $(".disBtnBlue").css("display","block")
+    $("#sureBtn9").css("display","block")
+    $("#backBtn9").css("display","none")
+    $(".disBtnTrd9").css("display","none")
+    $(".disMainRed9").css("display","none")
+  })
+  $("#backBtn10").click(function(){
+    $(".disBtnRed").css("display","block")
+    $("#sureBtn10").css("display","block")
+    $("#backBtn10").css("display","none")
+    $(".disBtnTrd10").css("display","none")
+    $(".disMainRed10").css("display","none")
+  })
+  function sure(num){//红色确定
+    $("#sureBtn"+num).css({display:"none"})
+    $(".disBtnBlue").css({display:"none"})
+    $("#backBtn"+num).css({display:"block"})
+    $(".disMainRed").css({display:"block"})
+    if(num == 3){
+      $(".disBtnTrdRed,.disBtnTrdBlue").css("display","block")
+      $(".stepTrdRight").css("display","none")
+      $(".stepTrdWrong").css("display","none")
+    }else{
+      $(".disBtnTrdRed,.disBtnTrdBlue").css("display","none")
+    }
+  }
+  function back(num){//红色取消
+    $("#backBtn"+num).css({display:"none"})
+    $(".disBtnBlue").css({display:"block"})
+    $("#sureBtn"+num).css({display:"block"})
+    $(".disMainRed").css({display:"none"})
+    if(num == 3){
+      $(".disBtnTrdRed,.disBtnTrdBlue").css("display","none")
+      $(".stepTrdRight").css("display","none")
+      $(".stepTrdWrong").css("display","none")
+    }else{
+      $(".disBtnTrdRed,.disBtnTrdBlue").css("display","none")
+    }
+  }
+  function backSure(num){
+    $(".disBtnRed").css({display:"none"})
+    $("#sureBtn"+num).css({display:"none"})
+    $("#backBtn"+num).css({display:"block"})
+    $(".disMainBlue").css({display:"block"})
+  }
+  function backRe(num){
+    $(".disBtnRed").css({display:"block"})
+    $("#backBtn"+num).css({display:"none"})
+    $("#sureBtn"+num).css({display:"block"})
+    $(".disMainBlue").css({display:"none"})
+  }
 })