Merge remote-tracking branch 'origin/simplatform' into databank

src/main/webapp/WEB-INF/jsp/clinic/info.jsp

@@ -888,6 +888,44 @@ $(document).ready(function() {
     }
   });
 
+  // 환자정보 플로팅 레이어 삽입
+  const roomNumber = '<c:out value="${info.roomNumber}" />';
+  const patientName = '<c:out value="${info.patientName}" />';
+  const patientGender = '<c:out value="${info.gender=='M'?'남':'여'}" />';
+  <c:set var="now" value="<%=new java.util.Date()%>" />
+  <fmt:formatDate value="${now}" pattern="yyyy" var="sysYear"/>
+  <fmt:parseDate value="${info.jumin}" pattern="yyyy년 MM월 dd일" var="birthDate"/>
+  <fmt:formatDate value="${birthDate}" pattern="yyyy" var="birthYear"/>
+  <c:set var="age" value="${sysYear-birthYear}" />
+  const patientYearsOld = '<c:out value="${age}" />';
+  const patientInfoContent = ''+roomNumber+'호 '+patientName+' ('+patientGender+'/'+patientYearsOld+') 환자';
+  const patientInfoFloatHTML = '<div class="patientInfoFloat" style="display: none">'+patientInfoContent+' <button id="showInfo" type="button" class="btn btn-primary ml-2"><i class="mdi mdi-information-outline"></i> 기본 정보</button></div>';
+  $('.main').prepend(patientInfoFloatHTML);
+
+
+  // 스크롤 시 환자정보 플로팅 레이어 처리
+  $('.main').scroll(function () {
+    var heightY = $(this).scrollTop();
+    if(heightY > 200){
+      // 환자정보 플로팅 레이어 보기
+      $('.patientInfoFloat').slideDown('fast');
+    }
+    else{
+      // 환자정보 플로팅 레이어 숨기기
+      $('.patientInfoFloat').slideUp('fast');
+    }
+  });
+
+  // 환자정보 플로팅 레이어 기본 정보 버튼 클릭
+  $(document).on('click','#showInfo',function(event){
+    $('.main').animate({
+      scrollTop: $('#home').position().top
+    }, 300);
+    $('.toggleBtn').addClass('active');
+    $('.user-info').slideDown('fast');
+  });
+
+
   // 건강정보 엑셀 다운로드 사유 팝업 닫힐 때 처리
   $('#excelDownMemo').on('hidden.bs.modal', function () {
     $("#downMemo").val("");

src/main/webapp/resources/css/common/classic.css

@@ -144,6 +144,28 @@ label.error {
   padding-bottom: 20px;
 }
 
+.patientInfoFloat {
+  position: fixed;
+  top: 62px;
+  left: 0;
+  margin-left: 256px;
+  width: 100%;
+  z-index: 50;
+  background-color: #FAFAFA;
+  border-bottom: 1px solid #d1d1d1;
+  font-size: 18px;
+  font-weight: 500;
+  padding: 20px 50px;
+  box-shadow: 0 0 25px rgba(0,0,0,0.2);
+  transition: margin-left 0.35s ease-in-out;
+  -webkit-transition: margin-left 0.35s ease-in-out;
+  -moz-transition: margin-left 0.35s ease-in-out;
+  -ms-transition: margin-left 0.35s ease-in-out;
+  -o-transition: margin-left 0.35s ease-in-out;
+}
+.sidebar.toggled + .main .patientInfoFloat {
+  margin-left: 0;
+}
 .search {
   font-size: 20px;
   line-height: 40px;
@@ -866,7 +888,7 @@ table.symptomDataTable tbody th {
   background-repeat: no-repeat;
   background-position: 10px 18px;
   background-size: 20px;
-  border-bottom: 1px solid #f5f5f5;
+  border-top: 1px solid #f5f5f5;
 }
 
 .legend li > div {
@@ -1038,6 +1060,15 @@ table.symptomDataTable tbody th {
   margin-right: 5px;
   cursor: pointer;
 }
+@media screen and (max-width:992px) {
+  .patientInfoFloat {
+    margin-left: 0px;
+    top: 60px
+  }
+  .sidebar.toggled + .main .patientInfoFloat {
+    margin-left: 256px;
+  }
+}
 @media screen and (min-width: 992px) {
   .mobile-table th,
   .mobile-table td {