[phr] 진료관리 화면 수정.

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

@@ -1,8 +1,10 @@
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
+<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
 <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
 <jsp:include page="${data._INCLUDE}/header.jsp"></jsp:include>
 <link rel="stylesheet" href="/resources/bower_components/mdi/css/materialdesignicons.min.css">
+<script src="/resources/bower_components/moment/moment.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
 <script>
 
@@ -16,7 +18,6 @@ function handlePhrData() {
 	if (phrType === "bloodPressure") {
 		phrValueSystolic = $("#phrValueSystolic").val();
 		phrValueDiastolic = $("#phrValueDiastolic").val();
-		phrValuePulse = $("#phrValuePulse").val();
 
 		if (!phrValueSystolic || phrValueSystolic.length === 0) {
 			alert("수축기 혈압을 입력해 주세요.");
@@ -26,17 +27,11 @@ function handlePhrData() {
 			alert("이완기 혈압을 입력해 주세요.");
 			return;
 		}
-		if (!phrValuePulse || phrValuePulse.length === 0) {
-			alert("맥박을 입력해 주세요.");
-			return;
-		}
 
-		createPhrData(${patientIdx}, "bloodPressure", phrValueSystolic, phrValueDiastolic, false);
-		createPhrData(${patientIdx}, "pulseRate", phrValuePulse);
+		createPhrData(${patientIdx}, "bloodPressure", phrValueSystolic, phrValueDiastolic);
 
 		$("#phrValueSystolic").val("");
 		$("#phrValueDiastolic").val("");
-		$("#phrValuePulse").val("");
 	}
 	else {
 		phrValue = $("#phrValue").val();
@@ -62,7 +57,6 @@ function createPhrData(patientIdx, phrType, phrValue, phrValue2, needRetrieveDat
         method   : "POST",
         dataType : "json",
         success  : function( datas ){
-            console.log(datas);
 
             if (needRetrieveData) {
                 retrievePhrData();
@@ -72,7 +66,6 @@ function createPhrData(patientIdx, phrType, phrValue, phrValue2, needRetrieveDat
             alert(error.message);
         }
     }).done( function(){
-        console.log('done!');
     });
 }
 
@@ -87,9 +80,13 @@ function retrievePhrData() {
         method   : "GET",
         dataType : "json",
         success  : function( datas ){
-            console.log(datas);
 
-            drawPhrChart(datas, phrName);
+						if (phrType==="bloodPressure") {
+							drawBPChart(datas);
+						}
+						else {
+            	drawPhrChart(datas, phrName);
+						}
 
            	var html = "<thead><tr>";
 			html += "<th>기록일시</th>";
@@ -101,19 +98,22 @@ function retrievePhrData() {
 			if (datas.length > 0) {
 				contents = "";
 				datas.forEach(d => {
-					contents += "<tr>";
-					contents += "<td>" + d.createDate + "</td>";
+					var row = "";
+					row += "<tr>";
+					row += "<td>" + d.createDate + "</td>";
 					if (phrType==="bloodPressure") {
-					contents += "<td><span class='text-danger'>" + parseInt(d.phrValue) + " / " + (isNaN(parseInt(d.phrValue2)) ? "--" : parseInt(d.phrValue2)) + "</span></td>";
+					row += "<td><span class='text-danger'>" + parseInt(d.phrValue) + " / " + (isNaN(parseInt(d.phrValue2)) ? "--" : parseInt(d.phrValue2)) + "</span></td>";
 					}
 					else if (phrType==="temperature") {
-					contents += "<td><span class='text-danger'>" + d.phrValue + "</span></td>";
+					row += "<td><span class='text-danger'>" + d.phrValue + "</span></td>";
 					}
 					else {
-					contents += "<td><span class='text-danger'>" + parseInt(d.phrValue) + "</span></td>";
+					row += "<td><span class='text-danger'>" + parseInt(d.phrValue) + "</span></td>";
 					}
-					contents += "<td>" + d.recordedByName + "</td>";
-					contents += "</tr>";
+					row += "<td>" + d.recordedByName + "</td>";
+					row += "</tr>";
+
+					contents = row + contents;
 				});
 			};
 			html += contents;
@@ -125,17 +125,16 @@ function retrievePhrData() {
         	alert(error.message);
         }
     }).done( function(){
-        console.log('done!');
     });
 }
 
 function drawPhrChart(data, dataName) {
 
-	console.log("chart!" + data);
 	var xDatas = [];
 	var yDatas = [];
 	data.forEach(d=> {
-		xDatas.push(d.createDate);
+		var t = moment(d.createDate).format("MM-DD HH:mm:ss");
+		xDatas.push(t);
 		yDatas.push(d.phrValue);
 	});
 	var ctx = document.getElementById("phrChart").getContext('2d');
@@ -157,6 +156,42 @@ function drawPhrChart(data, dataName) {
 	});
 }
 
+function drawBPChart(data) {
+
+	var xDatas = [];
+	var y1Datas = [];
+	var y2Datas = [];
+	data.forEach(d=> {
+		var t = moment(d.createDate).format("MM-DD HH:mm:ss");
+		xDatas.push(t);
+		y1Datas.push(d.phrValue);
+		y2Datas.push(d.phrValue2);
+	});
+	var ctx = document.getElementById("phrChart").getContext('2d');
+	var myChart = new Chart(ctx, {
+	    type: 'line',
+	    data: {
+	        labels: xDatas,
+	        datasets: [{
+	            label: "수축기 혈압",
+	            data: y1Datas,
+	            fill: false,
+ 	            backgroundColor: 'rgb(255, 99, 132)',
+	            borderColor: 'rgb(255, 99, 132)',
+	       			 },{
+	            label: "이완기 혈압",
+	            data: y2Datas,
+	            fill: false,
+ 	            backgroundColor: 'rgb(255, 99, 132)',
+	            borderColor: 'rgb(255, 99, 132)',
+	        }]
+	    },
+	    options: {
+
+	    }
+	});
+}
+
 /*
  * 임상증상 탭 처리
  */
@@ -217,7 +252,6 @@ function createSymptomData(symptomObject) {
         method   : "POST",
         dataType : "json",
         success  : function( datas ){
-            console.log(datas);
 
             retrieveSymptomData();
         },
@@ -225,7 +259,6 @@ function createSymptomData(symptomObject) {
         	alert(error.message);
         }
     }).done( function(){
-        console.log('done!');
     });
 }
 
@@ -238,7 +271,6 @@ function retrieveSymptomData() {
         method   : "GET",
         dataType : "json",
         success  : function( datas ){
-            console.log(datas);
 
 			var html = "<tr><td colspan=18>데이터가 없습니다.</td></tr>" ;
 			var checkSymbol = '<i class="mdi mdi-check-bold"></i>';
@@ -277,12 +309,11 @@ function retrieveSymptomData() {
         	alert(error.message);
         }
     }).done( function(){
-        console.log('done!');
     });
 }
 
 /*
- * 임상증상 탭 처리
+ * 메모 탭 처리
  */
 
  function handleMemoData() {
@@ -310,7 +341,6 @@ function createMemoData(memoContent) {
         method   : "POST",
         dataType : "json",
         success  : function( datas ){
-            console.log(datas);
 
             retrieveMemoData();
         },
@@ -318,7 +348,6 @@ function createMemoData(memoContent) {
         	alert(error.message);
         }
     }).done( function(){
-        console.log('done!');
     });
 }
 
@@ -331,7 +360,6 @@ function retrieveMemoData() {
         method   : "GET",
         dataType : "json",
         success  : function( datas ){
-            console.log(datas);
 
 			var html = "<tr><td colspan=3>데이터가 없습니다.</td></tr>" ;
 			if (datas.length > 0) {
@@ -351,7 +379,7 @@ function retrieveMemoData() {
         	alert(error.message);
         }
     }).done( function(){
-        console.log('done!');
+
     });
 }
 
@@ -392,9 +420,7 @@ $(document).ready(function() {
 
 	// phrData 기록 추가 클릭 이벤트
 	$(document).on('click','[data-target="#defaultModalPrimary_1"]',function(){
-		console.log("click!");
 		var selectData = $('#phrTypeSelect').find('option:selected').val();
-		console.log(selectData);
 		var healthInfoHTML = '';
 		if(selectData == 'temperature'){
 			healthInfoHTML += '<th>체온</th>';
@@ -404,17 +430,24 @@ $(document).ready(function() {
 			healthInfoHTML += '	</div>';
 			healthInfoHTML += '</td>';
 		}
-		if(selectData == 'bloodPressure'){
-			healthInfoHTML += '<th>혈압/맥박</th>';
+		else if(selectData == 'bloodPressure'){
+			healthInfoHTML += '<th>혈압</th>';
 			healthInfoHTML += '<td>';
 			healthInfoHTML += '	<div class="form-group mb-xl-0">';
 			healthInfoHTML += '		<input id="phrValueSystolic" class="form-control mb-2" type="number" placeholder="수축기 혈압 입력">';
 			healthInfoHTML += '		<input id="phrValueDiastolic" class="form-control mb-2" type="number" placeholder="이완기 혈압 입력">';
-			healthInfoHTML += '		<input id="phrValuePulse" class="form-control" type="number" placeholder="맥박 입력">';
 			healthInfoHTML += '	</div>';
 			healthInfoHTML += '</td>';
 		}
-		if(selectData == 'oxygenSaturation'){
+		else if(selectData == 'pulseRate'){
+			healthInfoHTML += '<th>맥박</th>';
+			healthInfoHTML += '<td>';
+			healthInfoHTML += '	<div class="form-group mb-xl-0">';
+			healthInfoHTML += '		<input id="phrValue" class="form-control" type="number" placeholder="맥박 입력">';
+			healthInfoHTML += '	</div>';
+			healthInfoHTML += '</td>';
+		}
+		else if(selectData == 'oxygenSaturation'){
 			healthInfoHTML += '<th>산소포화도</th>';
 			healthInfoHTML += '<td>';
 			healthInfoHTML += '	<div class="form-group mb-xl-0">';
@@ -422,7 +455,7 @@ $(document).ready(function() {
 			healthInfoHTML += '	</div>';
 			healthInfoHTML += '</td>';
 		}
-		if(selectData == 'sugar'){
+		else if(selectData == 'bloodSugar'){
 			healthInfoHTML += '<th>혈당</th>';
 			healthInfoHTML += '<td>';
 			healthInfoHTML += '	<div class="form-group mb-xl-0">';
@@ -681,7 +714,7 @@ $(document).ready(function() {
 						<div class="col-12">
 							<div class="card toggle">
 								<div class="card-header">
-									<h1 class="h4">- 환자 기본정보</h1>
+									<h1 class="h4">김환자 환자 기본정보</h1>
 									<a href="#" class="toggleBtn">메뉴</a>
 								</div>
 								<div class="card-body">
@@ -847,7 +880,9 @@ $(document).ready(function() {
 											- 건강정보 조회 <label> <select class="custom-select ml-1 form-control" id=phrTypeSelect name="inputState" onchange="retrievePhrData()">
 													<option value="temperature" selected>체온</option>
 													<option value="bloodPressure">혈압</option>
+													<option value="pulseRate">맥박</option>
 													<option value="oxygenSaturation">산소포화도</option>
+													<option value="bloodSugar">혈당</option>
 											</select>
 											</label> <label class="ml-1">
 												<button type="button" class="btn btn-primary ml-2" data-toggle="modal" data-target="#defaultModalPrimary_1">기록추가</button>
@@ -870,11 +905,11 @@ $(document).ready(function() {
 												<tbody>
 													<c:choose>
 														<c:when test="${phrTotal > 0}">
-															<c:forEach var="phr" items="${phrItems}">
+															<c:forEach var="i" begin="1" end="${phrTotal}">
 																<tr>
-																	<td><c:out value="${phr.createDate}" /></td>
-																	<td><span class="text-danger"><c:out value="${phr.phrValue} ℃" /></span></td>
-																	<td><c:out value="${phr.recordedByName}" /></td>
+																	<td><c:out value="${phrItems[phrTotal-i].createDate}" /></td>
+																	<td><span class="text-danger"><c:out value="${phrItems[phrTotal-i].phrValue} ℃" /></span></td>
+																	<td><c:out value="${phrItems[phrTotal-i].recordedByName}" /></td>
 																</tr>
 															</c:forEach>
 														</c:when>

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

@@ -58,72 +58,70 @@ function retrieveStateData(page) {
         method   : "GET",
         dataType : "json",
         success  : function( datas ){
-            console.log(datas);
             
            	var html = '<div class="blankItem">표시할 데이터가 없습니다.</div>';
-			if (datas.length > 0) {
-				html = "";
-				datas.forEach(d => {
-					var danger = (d.isTemperatureWarning || d.isBloodPressureWarning || d.isOxygenSaturationeWarning) ? "danger" : "";
-					var temperatureStep = d.isTemperatureWarning ? "step_two" : "step_one";
-					var bloodPressureStep = d.isBloodPressureWarning ? "step_two" : "step_one";
-					var oxygenSaturationStep = d.isOxygenSaturationeWarning ? "step_two" : "step_one";
-					var temperatureCheck = d.needTemperatureCheck ? "timeover" : "";
-					var bloodPressureCheck = d.needBloodPressCheck ? "timeover" : "";
-					var oxygenSaturationCheck = d.needOxygenSaturationCheck ? "timeover" : "";
-					
-					var temperature = (d.temperature || "--") + ' ℃ ';
-					var bloodPressure = (d.bloodPressureDisplay) + " ";
-					var oxygenSaturation = (d.oxygenSaturation || "--") + " % ";
-					html += '<div class="col-lg-2 col-md-6 mb-4">';
-					html += '	<div class="patients-stats">';
-					html += '		<div class="name">';
-					html += '			<a href="./info?patientIdx='+d.patientIdx+'">'+d.roomNumber+'('+d.patientName+')</a>';
-					html += '			<div class="check">';
-					html += '				<ul>';
-					if (d.memoCount > 0) {
-					html += '					<li><a href="javscript:;" class="memo"><i class="align-middle ml-2 fas fa-fw fa-edit"></i></a></li>';
-					}
-					if (d.hasTodaySymptom) {
-					html += '					<li><a href="javscript:;" class="symptom"><i class="align-middle ml-2 fas fa-fw fa-user-plus"></i></a></li>';
-					}
-					html += '				</ul>';
-					html += '			</div>';
-					html += '		</div>';
-					html += '      <div class="stats '+danger+'">';
-					html += '			<ul>';
-					html += '				<li class="fever '+temperatureStep+' '+temperatureCheck+'">'+temperature+'</li>';
-					html += '				<li class="bloodPressure '+bloodPressureStep+' '+bloodPressureCheck+'">'+bloodPressure+'</li>';
-					html += '				<li class="oxygen '+oxygenSaturationStep+' '+oxygenSaturationCheck+'">'+oxygenSaturation+'</li>';
-					html += '			</ul>';
-					html += '		</div>';
-					html += '	</div>';
-					html += '</div>';
-				});
-			};
+						if (datas.length > 0) {
+							html = "";
+							datas.forEach(d => {
+								var danger = (d.isTemperatureWarning || d.isBloodPressureWarning || d.isOxygenSaturationeWarning) ? "danger" : "";
+								var temperatureStep = d.isTemperatureWarning ? "step_two" : "step_one";
+								var bloodPressureStep = d.isBloodPressureWarning ? "step_two" : "step_one";
+								var oxygenSaturationStep = d.isOxygenSaturationeWarning ? "step_two" : "step_one";
+								var temperatureCheck = d.needTemperatureCheck ? "timeover" : "";
+								var bloodPressureCheck = d.needBloodPressCheck ? "timeover" : "";
+								var oxygenSaturationCheck = d.needOxygenSaturationCheck ? "timeover" : "";
+								
+								var temperature = (d.temperature || "--") + ' ℃ ';
+								var bloodPressure = (d.bloodPressureDisplay) + " ";
+								var oxygenSaturation = (d.oxygenSaturation || "--") + " % ";
+								html += '<div class="col-lg-2 col-md-6 mb-4">';
+								html += '	<div class="patients-stats" data-url="./info?patientIdx='+d.patientIdx+'">';
+								html += '		<div class="name">';
+								html += '			'+d.roomNumber+'('+d.patientName+')';
+								html += '			<div class="check">';
+								html += '				<ul>';
+								if (d.memoCount > 0) {
+								html += '					<li><a href="javscript:;" class="memo"><i class="align-middle ml-2 fas fa-fw fa-edit"></i></a></li>';
+								}
+								if (d.hasTodaySymptom) {
+								html += '					<li><a href="javscript:;" class="symptom"><i class="align-middle ml-2 fas fa-fw fa-user-plus"></i></a></li>';
+								}
+								html += '				</ul>';
+								html += '			</div>';
+								html += '		</div>';
+								html += '      <div class="stats '+danger+'">';
+								html += '			<ul>';
+								html += '				<li class="fever '+temperatureStep+' '+temperatureCheck+'">'+temperature+'</li>';
+								html += '				<li class="bloodPressure '+bloodPressureStep+' '+bloodPressureCheck+'">'+bloodPressure+'</li>';
+								html += '				<li class="oxygen '+oxygenSaturationStep+' '+oxygenSaturationCheck+'">'+oxygenSaturation+'</li>';
+								html += '			</ul>';
+								html += '		</div>';
+								html += '	</div>';
+								html += '</div>';
+							});
+						};
 
-			$(".patients-list").fadeOut('fast',function(){
-				$(".patients-list").html(html).fadeIn('fast');
-			});
+						$(".patients-list").fadeOut('fast',function(){
+							$(".patients-list").html(html).fadeIn('fast');
+						});
         },
-        error : function(){
-            console.error('error!');
+        error : function(error){
+            alert(error.message);
         }
     }).done( function(){
-        console.log('done!');
+
     });
 }
 
 function nextPage() {
 
-	console.log("totalPage=" + totalPage);
 	if (totalPage === 1) {
 		retrieveStateData(1);
 		return;
 	}
 	
 	var next = $("#pagination .active").next();
-	console.log(next);
+
 	if (!next.is(':visible')) {
 		$("#pagination .first").click();
 	}
@@ -158,17 +156,23 @@ function responsiblePagination() {
 
 $(document).ready(function() {
 
+	$(document).on("click", ".patients-stats", function() {
+		location.href = $(this).attr("data-url");
+	});
+
 	// 반복 start/stop 클릭
 	$('#playButton').click(function () {
 		if (activeReloadTimer()) {	
 			$('#playButton').addClass('disabled');
 			$('#pauseButton').removeClass('disabled');
+			$("#reloadIntervalSelect").prop("disabled", true);
 		}
 	});
 	$('#pauseButton').click(function () {
 		deactiveReloadTimer();
 		$('#playButton').removeClass('disabled');
 		$('#pauseButton').addClass('disabled');
+		$("#reloadIntervalSelect").prop("disabled", false);
 	});
 
 	////////////////////////////////////////////////////////////////////////////////
@@ -275,9 +279,9 @@ $(document).ready(function() {
 											<c:set var="bloodPressureCheck" value="${patient.needBloodPressCheck ? 'timeover' : ''}" />
 											<c:set var="oxygenSaturationCheck" value="${patient.needOxygenSaturationCheck ? 'timeover' : ''}" />
 											<div class="col-lg-2 col-md-6 mb-4">
-												<div class="patients-stats">
+												<div class="patients-stats" data-url="${viewLink}">
 													<div class="name">
-														<a href="${viewLink}"><c:out value="${title}" /></a>
+														<c:out value="${title}" />
 														<div class="check">
 															<ul>
 																<c:if test="${patient.memoCount > 0}">

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

@@ -85,6 +85,7 @@
 .tab.in { visibility: visible; height: unset; overflow: auto; opacity: 1 }
 .tab .card-header .h4 { padding-top: 10px; }
 .tab i.mdi { color: #0063dc; }
+.tab table pre { margin: 0; font-family: inherit; font-size: inherit; color: inherit; }
 @media screen and (min-width:992px) { 
   .mobile-table th, .mobile-table td { float: inherit; width: inherit; } 
   .sidebar + .main .footer { position: fixed; width: calc(100% - 256px); bottom: 0; transition: width 0.35s ease-in-out; -webkit-transition: width 0.35s ease-in-out; -moz-transition: width 0.35s ease-in-out; -ms-transition: width 0.35s ease-in-out; -o-transition: width 0.35s ease-in-out; }