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

src/main/java/com/lemon/lifecenter/controller/ClinicController.java

@@ -16,6 +16,7 @@ import com.lemon.lifecenter.common.LifeCenterController;
 import com.lemon.lifecenter.common.LifeCenterSessionController;
 import com.lemon.lifecenter.dto.PatientPHRHistoryDTO;
 import com.lemon.lifecenter.dto.PatientPHRLatestDTO;
+import com.lemon.lifecenter.dto.PatientSymptomSimDTO;
 import com.lemon.lifecenter.service.ClinicService;
 import com.lemon.lifecenter.service.PHRService;
 import com.lemon.lifecenter.service.PatientService;
@@ -42,7 +43,7 @@ public class ClinicController extends LifeCenterController {
     	
     	System.err.println( "page : " + page );
     	
-    	final int pageSize = 18;
+    	final int pageSize = 30;
     	String centerCode = "0000";//LifeCenterSessionController.getSession( request, "sesCenterCode" );
         
     	PatientPHRLatestDTO dto = new PatientPHRLatestDTO();
@@ -61,7 +62,7 @@ public class ClinicController extends LifeCenterController {
 
         ModelAndView mv = setMV("clinic/state");
         
-        mv.addObject("total", 18);
+        mv.addObject("total", total);
         mv.addObject("items", result);
         
         return mv;
@@ -108,4 +109,15 @@ public class ClinicController extends LifeCenterController {
     	return phrService.selectPHRHistoryList(dto);
     	
     }
+    
+    @RequestMapping("/api/symptomDatas")
+    public @ResponseBody List<PatientSymptomSimDTO> symptomDatas(
+    		@RequestParam(value="patientIdx", required=true, defaultValue="") int patientIdx) {
+    	
+    	PatientSymptomSimDTO dto = new PatientSymptomSimDTO();
+    	dto.setPatientIdx(patientIdx);
+        
+    	return phrService.selectSymptomList(dto);
+    	
+    }
 }

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

@@ -3,8 +3,18 @@
 <%@ page language="java" contentType="text/html; charset=UTF-8"
     pageEncoding="UTF-8"%>
 <jsp:include page="${data._INCLUDE}/header.jsp"></jsp:include>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
 <script>
 
+$(document).ready(function() {
+	var datas = [];
+	<c:forEach var="phr" items="${phrItems}" varStatus="status">
+	datas.push({createDate: "${phr.createDate}", phrValue: "${phr.phrValue}"});
+	</c:forEach>
+	
+	drawPhrChart(datas, "체온");
+});
+
 function changeButtonSelected(buttonId) {
 	var buttonIds = ["buttonPhr", "buttonSymptom", "buttonMemo"];
 
@@ -34,17 +44,19 @@ function changeTabSelected(tabId) {
 }
 
 function showUntactTab() {
-/* 	alert("비대면 진료를 실행합니다!"); */
+ 	alert("비대면 진료를 실행합니다!");
 }
 
 function showPhrTab() {
 	changeButtonSelected("buttonPhr");
 	changeTabSelected("tabPhr");
+	retrievePhrData();
 }
 
 function showSymptomTab() {
 	changeButtonSelected("buttonSymptom");
 	changeTabSelected("tabSymptom");
+	retrieveSymptomData();
 }
 
 function showMemoTab() {
@@ -65,6 +77,8 @@ function retrievePhrData() {
         success  : function( datas ){
             console.log(datas);
 
+            drawPhrChart(datas, phrName);
+
            	var html = "<thead><tr>";
 			html += "<th>진료일시</th>";
 			html += "<th>"+phrName+"</th>";
@@ -86,33 +100,83 @@ function retrievePhrData() {
 			html += "</tbody>";
 
 			$("#phrDataTable").html(html);
+        },
+        error : function(){
+            console.error('error!');
+        }
+    }).done( function(){
+        console.log('done!');
+    });
+}
+function retrieveSymptomData() {
+	var params = {patientIdx: ${patientIdx}};
+
+	$.ajax({
+        url      : "./api/symptomDatas",
+        data     : params,
+        method   : "GET",
+        dataType : "json",
+        success  : function( datas ){
+            console.log(datas);
+
+           	var html = "";
+			var contents = "<tr><td colspan=10>데이터가 없습니다.</td></tr>" ;
+			if (datas.length > 0) {
+				contents = datas.map(d => {
+					var h = "<tr>";
+					h += "<th>" + d.createDate + "</th>";
+					h += "<td>" + d.coughCheck + "</td>";
+					h += "<td>" + d.dyspneaCheck + "</td>";
+					h += "<td>" + d.dolcFitCheck + "</td>";
+					h += "<td>" + d.musclePainCheck + "</td>";
+					h += "<td>" + d.headacheCheck + "</td>";
+					h += "<td>" + d.soreThroatCheck + "</td>";
+					h += "<td>" + d.smellPalateCheck + "</td>";
+					h += "<td>" + d.fatigueCheck + "</td>";
+					h += "<td>" + d.coughCheck + "</td>";
+					h += "</tr>";
+					return h;
+				});
+			};
+			html += contents;
 
-            
-/*             var resultCode = data.code;
-            var resultMsg  = data.message;
-            
-            if( data.code == "00" ) {
-                location.href="/patient/list";
-            } else {
-                $( "#password" ).after( "<label id='msg' class='error'>" + resultMsg + "</label>" );
-                $( "#submitLoading" ).toggleClass( "d-none", true );
-                $( "#submitBtn" ).toggleClass( "d-none", false );
-            }; */
+			$("#symptomDataTable > tbody").html(html);
         },
         error : function(){
             console.error('error!');
-/*             $( "#submitLoading" ).toggleClass( "d-none", true );
-            $( "#submitBtn" ).toggleClass( "d-none", false ); */
         }
     }).done( function(){
         console.log('done!');
-/*         if( $( "#saveId" ).is( ":checked" ) ) {
-            setCookie( "userInputId", $( "#id" ).val(), 365 );
-        } else {
-            deleteCookie( "userInputId" );
-        } */
     });
 }
+
+function drawPhrChart(data, dataName) {
+
+	console.log("chart!" + data);
+	var xDatas = [];
+	var yDatas = [];
+	data.forEach(d=> {
+		xDatas.push(d.createDate);
+		yDatas.push(d.phrValue);
+	});
+	var ctx = document.getElementById("phrChart").getContext('2d');
+	var myChart = new Chart(ctx, {
+	    type: 'line',
+	    data: {
+	        labels: xDatas,
+	        datasets: [{
+	            label: dataName,
+	            data: yDatas,
+	            fill: false,
+ 	            backgroundColor: 'rgb(255, 99, 132)',
+	            borderColor: 'rgb(255, 99, 132)',
+	        }]
+	    },
+	    options: {
+
+	    }
+	});
+}
 </script>
 </head>
 
@@ -143,12 +207,13 @@ function retrievePhrData() {
 				</div>
 				<div class="row">
 					<div class="col-12">
-						<div class="card">
+						<div class="card toggle">
 							<div class="card-header">
 								<h1 class="h4">- 환자 기본정보</h1>
+								<a href="#" class="toggleBtn">메</a>
 							</div>
 							<div class="card-body">
-								<table class="table mobile-table">
+								<table class="table mobile-table user-info">
 									<colgroup>
 										<col style="width: 15%">
 										<col style="width: 35%">
@@ -363,7 +428,7 @@ function retrievePhrData() {
 								<h1 class="h4">
 									- 건강정보 조회
 									<label>
-										<select class="custom-select ml-1 form-control" id=phrTypeSelect name="inputState" onchange="retrievePhrData">
+										<select class="custom-select ml-1 form-control" id=phrTypeSelect name="inputState" onchange="retrievePhrData()">
 									        <option value="temperature" selected>체온</option>
 									        <option value="oxygenSaturation">산소포화도</option>
 									        <option value=pulseRate>혈압</option>
@@ -414,7 +479,8 @@ function retrievePhrData() {
 							</div>
 							<div class="card-body">
 								<div class="graph-area mb-4">
-									<div style="height:400px;background-color:#dddddd;">그래프영역</div>
+									<!-- <div style="height:400px;background-color:#dddddd;">그래프영역</div> -->
+									<canvas id="phrChart" width="400" height="100"></canvas>
 								</div>
 								<div class="table-responsive">
 									<table id="phrDataTable" class="table data-table text-center">
@@ -558,7 +624,7 @@ function retrievePhrData() {
 								</div>
 								<div class="card-body">
 									<div class="table-responsive">
-										<table class="table data-table text-center">
+										<table id="symptomDataTable" class="table data-table text-center">
 											<thead>
 												<tr>
 													<th>증상정보</th>
@@ -575,52 +641,16 @@ function retrievePhrData() {
 											</thead>
 											<tbody>
 												<tr>
-													<th>2020-11-05 09:23:526</th>
-													<td>V</td>
-													<td>V</td>
-													<td>V</td>
-													<td>V</td>
-													<td>-</td>
-													<td>-</td>
-													<td>-</td>
-													<td><span class="text-danger">설사</span></td>
-													<td>김레몬</td>
-												</tr>
-												<tr>
-													<th>2020-11-05 09:23:526</th>
-													<td>V</td>
-													<td>V</td>
-													<td>V</td>
-													<td>V</td>
-													<td>-</td>
-													<td>-</td>
-													<td>-</td>
-													<td><span class="text-danger">설사</span></td>
-													<td>김레몬</td>
-												</tr>
-												<tr>
-													<th>2020-11-05 09:23:526</th>
-													<td>V</td>
-													<td>V</td>
-													<td>V</td>
-													<td>V</td>
-													<td>-</td>
-													<td>-</td>
-													<td>-</td>
-													<td><span class="text-danger">설사</span></td>
-													<td>김레몬</td>
-												</tr>
-												<tr>
-													<th>2020-11-05 09:23:526</th>
-													<td>V</td>
-													<td>V</td>
-													<td>V</td>
-													<td>V</td>
-													<td>-</td>
-													<td>-</td>
-													<td>-</td>
-													<td><span class="text-danger">설사</span></td>
-													<td>김레몬</td>
+													<th></th>
+													<td></td>
+													<td></td>
+													<td></td>
+													<td></td>
+													<td></td>
+													<td></td>
+													<td></td>
+													<td><span class="text-danger"></span></td>
+													<td></td>
 												</tr>
 											</tbody>
 										</table>

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

@@ -41,174 +41,67 @@
                                         <div class="col-lg-6 search text-right">
                                             <label>
                                                 <select class="custom-select">
-                                                <option selected>화면주기를 선택하세요.</option>
-													<option>10초</option>
-                                                    <option>30초</option>
-                                                    <option>60초</option>
+																									<option selected>화면주기</option>
+																									<option>10초</option>
+                                                	<option>30초</option>
+                                                  <option>60초</option>
                                                 </select>
                                             </label>
                                             <label>
-                                                <button type="button" id="playButton" class="btn btn-primary disabled">
+                                                <button type="button" id="playButton" class="btn btn-primary">
                                                     <i class="fas fa-play"></i>
                                                 </button>
-                                                <button type="button" id="pauseButton" class="btn btn-primary">
+                                                <button type="button" id="pauseButton" class="btn btn-primary disabled">
                                                     <i class="fas fa-pause"></i>
                                                 </button>
                                             </label>
-                                            <input type="text" class="form-control w100" id="inputPassword4" placeholder="환자명">
+                                            <input type="text" class="form-control w150" id="inputPassword4" placeholder="호실 or 환자명">
                                             <button class="btn btn-primary">검색</button>
                                         </div>
                                     </div>
                                 </div>
                                 <div class="card-body">
-									<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="20000">
-									  <ol class="carousel-indicators">
-									    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
-									    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
-									    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
-									  </ol>
-									  <div class="carousel-inner">
-									    <div class="carousel-item active">
-									    	<div class="row">
-									    	  <c:forEach var="patient" items="${items}" varStatus="status">
-									    	  <c:set var="viewLink" value="./info?patientIdx=${patient.patientIdx}" />
-												<div class="col-lg-2 col-md-6 mb-4">
-													<div class="patients-stats">
-														<div class="name">
-															<a href="${viewLink}"><c:out value="${patient.roomNumber}(${patient.patientName})" /></a>
-															<div class="check">
-																<ul>
-																	<li>
-																		<a href="javscript:;" class="memo">
-																			<i class="align-middle mr-2 fas fa-fw fa-edit"></i>
-																		</a>
-																	</li>
-																	<li>
-																		<a href="javscript:;" class="symptom">
-																			<i class="align-middle mr-2 fas fa-fw fa-user-plus"></i>
-																		</a>
-																	</li>
-																</ul>
-															</div>
-														</div>
-														<div class="stats ${status.index % 4 == 0 ? 'danger' : '' }">
-															<ul>
-																<li class="temperature step_two">
-																	<c:out value="${patient.temperature} ℃" />
-																</li>
-																<li class="blood">
-																	- % / - bpm
-																</li>
-																<li class="pulse step_two">
-																	80 bpm
-																</li>
-																<li class="oxygen step_one">
-																	150 mmHg
-																</li>
-																<li class="sugar step_one">
-																	30 kg
-																</li>
-															</ul>
-														</div>
-													</div>
+																	<div class="row patients-list">
+									    	  				<c:forEach var="patient" items="${items}" varStatus="status">
+									    	  				<c:set var="viewLink" value="./info?patientIdx=${patient.patientIdx}" />
+																		<div class="col-lg-2 col-md-6 mb-4">
+																			<div class="patients-stats">
+																				<div class="name">
+																					<a href="${viewLink}"><c:out value="${patient.roomNumber}(${patient.patientName})" /></a>
+																					<div class="check">
+																						<ul>
+																							<li>
+																								<a href="javscript:;" class="symptom">
+																									<i class="align-middle mr-2 fas fa-fw fa-user-plus"></i>
+																								</a>
+																							</li>
+																						</ul>
+																					</div>
+																				</div>
+																				<div class="stats ${status.index % 4 == 0 ? 'danger' : '' }">
+																					<ul>
+																						<li class="fever step_two">
+																							<c:out value="${patient.temperature} ℃" />
+																						</li>
+																						<li class="bloodPressure step_two">
+																							80 bpm
+																						</li>
+																						<li class="oxygen step_one">
+																							150 mmHg
+																						</li>
+																					</ul>
+																				</div>
+																			</div>
+																		</div>
+											  					</c:forEach>
+																	</div>
+									    					</div>
+									    					<div class="card-footer">
+																	<div id="pagination" class="paginationContainer"></div>
+									    					</div>
+									  				</div>
 												</div>
-											  </c:forEach>
-											</div>
-									    </div>
-									    <div class="carousel-item">
-									      <div class="row">
-												<div class="col-lg-2 col-md-6 mb-4">
-													<div class="patients-stats">
-														<div class="name">
-															1501(김레몬)
-															<div class="check">
-																<ul>
-																	<li>
-																		<a href="javscript:;" class="memo">
-																			<i class="align-middle mr-2 fas fa-fw fa-edit"></i>
-																		</a>
-																	</li>
-																	<li>
-																		<a href="javscript:;" class="symptom">
-																			<i class="align-middle mr-2 fas fa-fw fa-user-plus"></i>
-																		</a>
-																	</li>
-																</ul>
-															</div>
-														</div>
-														<div class="stats danger">
-															<ul>
-																<li class="temperature step_two">
-																	39.3 ℃
-																</li>
-																<li class="blood">
-																	- % / - bpm
-																</li>
-																<li class="pulse step_two">
-																	80 bpm
-																</li>
-																<li class="oxygen step_one">
-																	150 mmHg
-																</li>
-																<li class="sugar step_one">
-																	30 kg
-																</li>
-															</ul>
-														</div>
-													</div>
-												</div>
-										  </div>
-									    </div>
-									    <div class="carousel-item">
-									      <div class="row">
-												<div class="col-lg-2 col-md-6 mb-4">
-													<div class="patients-stats">
-														<div class="name">
-															1501(김레몬)
-															<div class="check">
-																<ul>
-																	<li>
-																		<a href="javscript:;" class="memo">
-																			<i class="align-middle mr-2 fas fa-fw fa-edit"></i>
-																		</a>
-																	</li>
-																	<li>
-																		<a href="javscript:;" class="symptom">
-																			<i class="align-middle mr-2 fas fa-fw fa-user-plus"></i>
-																		</a>
-																	</li>
-																</ul>
-															</div>
-														</div>
-														<div class="stats danger">
-															<ul>
-																<li class="temperature step_two">
-																	39.3 ℃
-																</li>
-																<li class="blood">
-																	- % / - bpm
-																</li>
-																<li class="pulse step_two">
-																	80 bpm
-																</li>
-																<li class="oxygen step_one">
-																	150 mmHg
-																</li>
-																<li class="sugar step_one">
-																	30 kg
-																</li>
-															</ul>
-														</div>
-													</div>
-												</div>
-										  </div>
-									    </div>
-									  </div>
-									</div>
-								</div>
-							</div>
-                        </div>
-                    </div>
+										</div>
                     <!-- 환자관리 : 신규환자 등록 END -->
                 </div>
             </main>