mplusDemo/mplus-fatima/WebContent/WEB-INF/view/mobile_poc/transfusion/inquiry.jsp

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<div id="wrapper">
	<div class="bg"></div>
	<header id="header" class="fixed-top">
		<div class="page-header">
		  <div class="pull-left back_btn"><a href="#" id="all_menu"><span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span></a></div>
		  <h2 class="text-center">수혈정보</h2>
		</div>
	</header>
	<div class="container">
		<div class="s_box">
			<div class="panel info_box">
				<div class="panel-heading">
					<div class="row">
					  <div class="col-xs-5">
						<input class="form-control" type="text" id="name" placeholder="환자번호" value="19886701">
					  </div>
					  <div class="col-xs-7">
						<h2>김길동
						<button type="button" class="btn btn-blood">B+</button></h2>
					  </div>
					</div>
				</div>
				 <div class="panel-body">
					<p class="align-middle">M/50 1969-12-15 
					<span class="glyphicon ico ico_m align-middle" aria-hidden="true"></span>
					<span class="glyphicon ico ico_a align-middle" aria-hidden="true"></span>
					</p>
					<p><strong>실시부서</strong> : 중환자실(ICU) <span class="text-muted px-1">|</span>  실시자명 (사번)</p>
				 </div>
			</div>
			<div>
			  <button type="button" class="btn btn-primary btn-block btn-lg">조회</button>
			</div>
		</div>
	</div>	
	<div class="line"></div>
	<div id="con">
		<div class="sub_title pt-3">
		  <span class="pl-2 pr-2">혈액내역</span>
		</div>
		<div class="pre-scrollable" id="trans">
			<ul class="list-group">
			  <li class="list-group-item active">
				<div class="row">
				  <div class="col-xs-2 text-center select_ico">
					<input type="checkbox" checked autocomplete="off" id="a">
					<div class="group ">
					  <label class="btn btn-check icon" for="a">
						<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
					  </label>
					  <label class="btn btn-outline-check icon" for="a">
						 <span class="glyphicon " aria-hidden="true"></span>
					  </label>
					</div>
				  </div>
				  <div class="col-xs-6">
						<p class="title">활력징후 (수혈종료후)</p>
						<p class="blood">2019902704
							<span class="btn btn-blood">B+</span></p>
						<p>Filterd RBC [수혈용 혈액]</p>
				  </div>
				  <div class="col-xs-3 text-center align-middle blood">
						수혈시작 <br />
						10-22 13:00
				  </div>
				  <div class="col-xs-1 text-muted text-right">
					<h3><a href="#"  data-toggle="modal" data-target="#Modal01"><span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span></a></h3>
				  </div>
				</div></li>
			   <li class="list-group-item active">
				<div class="row">
				  <div class="col-xs-2 text-center select_ico">
					<input type="checkbox" checked autocomplete="off" id="b">
					<div class="group ">
					  <label class="btn btn-check icon" for="b">
						<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
					  </label>
					  <label class="btn btn-outline-check icon" for="b">
						 <span class="glyphicon " aria-hidden="true"></span>
					  </label>
					</div>
				  </div>
				  <div class="col-xs-6">
						<p class="title">활력징후 (15분) <span class="text-danger">[10분경과]</span></p>
						<p class="blood">2019902704
							<span class="btn btn-blood">B+</span></p>
						<p>Filterd RBC [수혈용 혈액]</p>
				  </div>
				  <div class="col-xs-3 text-center align-middle blood">
						수혈시작  <br />
						10-22 13:00
				  </div>
				  <div class="col-xs-1 text-right text-muted">
					<h3><span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span></h3>
				  </div>
				</div></li>
			   <li class="list-group-item">
				<div class="row">
				  <div class="col-xs-2 text-center select_ico">
					<input type="checkbox" autocomplete="off" id="c">
					<div class="group ">
					  <label class="btn btn-check icon" for="c">
						<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
					  </label>
					  <label class="btn btn-outline-check icon" for="c">
						 <span class="glyphicon " aria-hidden="true"></span>
					  </label>
					</div>
				  </div>
				  <div class="col-xs-6">
						<p class="title">활력징후 (수혈전)</p>
						<p class="blood">2019902704
							<span class="btn btn-blood">B+</span></p>
						<p>Filterd RBC Filterd RBC [수혈용 혈액]</p>
				  </div>
				  <div class="col-xs-3 text-center align-middle blood">
						불출일시  <br />
						10-22 13:00
				  </div>
				  <div class="col-xs-1 text-right text-muted">
					<h3><span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span></h3>
				  </div>
				</div></li>
				 <li class="list-group-item">
					<div class="row">
					  <div class="col-xs-2 text-center select_ico">
						<input type="checkbox" autocomplete="off" id="d">
						<div class="group ">
						  <label class="btn btn-check icon" for="d">
							<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
						  </label>
						  <label class="btn btn-outline-check icon" for="d">
							 <span class="glyphicon " aria-hidden="true"></span>
						  </label>
						</div>
					  </div>
				  <div class="col-xs-6">
						<p class="title">수술안내동의</p>
						<p class="blood">2019902707
							<span class="btn btn-blood">B+</span></p>
						<p>Filterd RBC [수혈용 혈액]</p>
				  </div>
				  <div class="col-xs-3 text-center align-middle blood">
						불출일시 <br /> 
						10-22 13:00
				  </div>
				  <div class="col-xs-1 text-right text-muted">
					<h3><span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span></h3>
				  </div>
				</div></li>
			<li class="list-group-item">
				<div class="row">
				  <div class="col-xs-2 text-center select_ico">
					<input type="checkbox" autocomplete="off" id="e">
					<div class="group ">
					  <label class="btn btn-check icon" for="e">
						<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
					  </label>
					  <label class="btn btn-outline-check icon" for="e">
						 <span class="glyphicon " aria-hidden="true"></span>
					  </label>
					</div>
				  </div>
				  <div class="col-xs-6">
						<p class="title">혈애확인</p>
						<p class="blood">2019902704
							<span class="btn btn-blood">B+</span></p>
						<p>Filterd RBC [수혈용 혈액]</p>
				  </div>
				  <div class="col-xs-3 text-center align-middle blood">
						불출일시  <br />
						10-22 13:00
				  </div>
				  <div class="col-xs-1 text-right text-muted">
					<h3><span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span></h3>
				  </div>
				</div></li>
			</ul>
		</div>
	</div>
</div>


<!--모달창--->
<div class="modal basic" tabindex="-1" role="dialog" id="Modal01">
  <div class="modal-dialog" role="document">
    <div class="modal-content">      
	  <div class="modal-header">
		<h3 class="modal-title text-center">혈액내역 상세정보</h3>
        <div class="btn_close float-right"><button type="button" class="p-0 btn-lg" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button></div>
      </div>
      <div class="modal-body info">
        <table class="table">
		  <tbody>
			<tr>
			  <th scope="row">혈액번호</th>
			  <td><strong>2019902704</strong></td>
			</tr>
			<tr>
			  <th scope="row">성분제제</th>
			  <td>Filterd RBC [수혈용 혈액]</td>
			</tr>
			<tr>
			  <th scope="row">ABO</th>
			  <td class="blood"><strong>B+</strong></td>
			</tr>
			<tr>
			  <th scope="row">IRD</th>
			  <td>Y</td>
			</tr>
			<tr>
			  <th scope="row">항번</th>
			  <td>1</td>
			</tr>
			<tr>
			  <th scope="row">불출일시</th>
			  <td>2020-01-14 10:10:00</td>
			</tr>
			<tr>
			  <th scope="row" rowspan="2">혈액확인</th>
			  <td>정준원</td>
			</tr>
			<tr>
			  <td>박영선</td>
			</tr>
			<tr>
			  <th scope="row">확인일시</th>
			  <td>2020-01-14 10:10:00</td>
			</tr>
			<tr>
			  <th scope="row">인수자</th>
			  <td>박현주</td>
			</tr>
			<tr>
			  <th scope="row">혈액제제</th>
			  <td>04064</td>
			</tr>
			<tr>
			  <th scope="row">수혈시작</th>
			  <td>2020-01-14 10:10:00</td>
			</tr>
			<tr>
			  <th scope="row">수혈전</th>
			  <td>
				<p>맥박 : 86회, 호흡 : 18회	</p>
				<p>체온 : 36.4, 혈압 : 127 / 71</p>
			  </td>
			</tr>
			<tr>
			  <th scope="row">15분
				<!--업데이트 발생시 --><button type="button" class="p-0 pl-2 pr-2 btn btn-councel">
				  <span aria-hidden="true">N</span>
				</button>  <!--업데이트 발생시 -->
			  </th>
			  <td>
				<p>맥박 : 86회, 호흡 : 18회	</p>
				<p>체온 : 36.4, 혈압 : 127 / 71</p>
			  </td>
			</tr>
		  </tbody>
		</table>
      </div>
    </div>
  </div>
</div>


<div class="modal basic" tabindex="-1" role="dialog" id="Modal02">
  <div class="modal-dialog" role="document">
    <div class="modal-content">      
      <div class="modal-body text-center align-middle">
         <h4>같은 단계의 혈액팩이 아닙니다.</h4>
		<p>일괄처리를 할 수 없습니다.</p>
      </div>
      <div class="modal-footer text-center">
        <button type="button" class="btn btn-ok btn-block btn-lg" data-dismiss="modal" aria-label="Close">확인</button>
      </div>
    </div>
  </div>
</div>

<jsp:include page="process.jsp" flush="false" />
<jsp:include page="process2.jsp" flush="false" />
<jsp:include page="process3.jsp" flush="false" />
<jsp:include page="process4.jsp" flush="false" />
<jsp:include page="process5.jsp" flush="false" />

<script type="text/javascript">
$(document).ready(function () {

	$('head').append('<style type="text/css">#trans {max-height: ' + ($('#trans').height() * .8) + 'px;overflow-y: auto;}</style>'); 
	
	$('.list-group .list-group-item').on('click', function () {
		$(this).toggleClass('active');
	});


	$(".list-group-item.active").click(function(){
		$("#step1").modal();
    });

	$("#save, #save2, #save3, #save4").click(function(){
		var modalID = $(this).attr("data-role");
		$(".modal").hide();
		$(".modal-backdrop").hide();
		$("#"+modalID).modal();
    });

	$(".sideEffect").click(function(){
		$("#sideEffect_pop").modal();
    });

});

</script>