|
|
@@ -1,21 +1,63 @@
|
|
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
|
|
|
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
|
|
|
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
|
|
|
-<%@ page language="java" contentType="text/html; charset=UTF-8"
|
|
|
- pageEncoding="UTF-8"%>
|
|
|
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
|
|
<jsp:include page="${data._INCLUDE}/header.jsp"></jsp:include>
|
|
|
<script src="/resources/bower_components/jquery-bootpag-master/lib/jquery.bootpag.min.js"></script>
|
|
|
<script>
|
|
|
+
|
|
|
+var totalList = ${total}; // 저장된 데이터 항목 수
|
|
|
+var viewEntry = 30; // 한 화면에 표시되는 갯수
|
|
|
+var totalPage = totalList / viewEntry;
|
|
|
+var reloadIntervalTime = 30; //
|
|
|
+var reloadTimer = null;
|
|
|
+
|
|
|
+function changeReloadInterval() {
|
|
|
+ reloadIntervalTime = $("#reloadIntervalSelect option:selected").val();
|
|
|
+ alert(reloadIntervalTime + "초마다 반복 조회 합니다.");
|
|
|
+}
|
|
|
+
|
|
|
+function activeReloadTimer() {
|
|
|
+ if (reloadIntervalTime) {
|
|
|
+ if (reloadTimer) {
|
|
|
+ alert("이미 반복 조회가 활성화되어 있어 반복 조회를 비활성화 합니다.");
|
|
|
+ deactiveReloadTimer();
|
|
|
+ }
|
|
|
+
|
|
|
+ reloadTimer = setInterval(function() {
|
|
|
+ nextPage();
|
|
|
+ }, reloadIntervalTime * 1000);
|
|
|
+ alert("반복 조회가 활성화 되었습니다.");
|
|
|
+
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ alert("반복 조회 주기를 설정해 주세요.");
|
|
|
+
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function deactiveReloadTimer() {
|
|
|
+ if (reloadTimer) {
|
|
|
+ clearInterval(reloadTimer);
|
|
|
+ reloadTimer = null;
|
|
|
+ alert("반복 조회가 비활성화 되었습니다.");
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ alert("활성화된 반복 조회가 없습니다.");
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
function searchPatients() {
|
|
|
- const keyword = $("#searchKeyword").val();
|
|
|
+ var keyword = $("#searchKeyword").val();
|
|
|
|
|
|
location.href = "./state?searchText="+keyword;
|
|
|
}
|
|
|
|
|
|
function retrieveStateData(page) {
|
|
|
|
|
|
- const searchText = $("#searchKeyword").val();
|
|
|
-
|
|
|
+ var searchText = '<c:out value="${searchText}" />';
|
|
|
var params = {page: page, searchText: searchText};
|
|
|
|
|
|
$.ajax({
|
|
|
@@ -51,8 +93,8 @@ function retrieveStateData(page) {
|
|
|
html += ' <div class="stats '+danger+'">';
|
|
|
html += ' <ul>';
|
|
|
html += ' <li class="fever '+temperature_step_one+'">'+temperature+'</li>';
|
|
|
- html += ' <li class="fever '+systolicBloodPressure_step_one+'">'+bloodPressure+'</li>';
|
|
|
- html += ' <li class="fever '+oxygenSaturation_step_one+'">'+oxygenSaturation+'</li>';
|
|
|
+ html += ' <li class="bloodPressure '+systolicBloodPressure_step_one+'">'+bloodPressure+'</li>';
|
|
|
+ html += ' <li class="oxygen '+oxygenSaturation_step_one+'">'+oxygenSaturation+'</li>';
|
|
|
html += ' </ul>';
|
|
|
html += ' </div>';
|
|
|
html += ' </div>';
|
|
|
@@ -72,224 +114,193 @@ function retrieveStateData(page) {
|
|
|
});
|
|
|
}
|
|
|
|
|
|
+function nextPage() {
|
|
|
+
|
|
|
+ if (totalPage === 1) {
|
|
|
+ retrieveStateData(1);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ var next = $("#pagination .active").next();
|
|
|
+ console.log(next);
|
|
|
+ if (!next.is(':visible')) {
|
|
|
+ $("#pagination .first").click();
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ next.click();
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//윈도우 폭에 따른 반응형 목록 수 분기 함수
|
|
|
+function responsiblePagination() {
|
|
|
+ var window_width = $(window).width();
|
|
|
+
|
|
|
+ if(window_width >= 1200) {
|
|
|
+ $('#pagination').bootpag({
|
|
|
+ maxVisible: 10, // 한번에 보여지는 페이지수
|
|
|
+ firstLastUse: true
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if(window_width < 1200 && window_width >= 600) {
|
|
|
+ $('#pagination').bootpag({
|
|
|
+ maxVisible: 5, // 한번에 보여지는 페이지수
|
|
|
+ firstLastUse: true
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if(window_width < 600){
|
|
|
+ $('#pagination').bootpag({
|
|
|
+ maxVisible: 3, // 한번에 보여지는 페이지수
|
|
|
+ firstLastUse: false
|
|
|
+ });
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
$(document).ready(function() {
|
|
|
|
|
|
// 반복 start/stop 클릭
|
|
|
$('#playButton').click(function () {
|
|
|
- $('#playButton').addClass('disabled');
|
|
|
- $('#pauseButton').removeClass('disabled');
|
|
|
- nextPage();
|
|
|
+ if (activeReloadTimer()) {
|
|
|
+ $('#playButton').addClass('disabled');
|
|
|
+ $('#pauseButton').removeClass('disabled');
|
|
|
+ }
|
|
|
});
|
|
|
$('#pauseButton').click(function () {
|
|
|
+ deactiveReloadTimer();
|
|
|
$('#playButton').removeClass('disabled');
|
|
|
$('#pauseButton').addClass('disabled');
|
|
|
- nextPage();
|
|
|
});
|
|
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
|
//// Pagination
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
|
-
|
|
|
- function nextPage() {
|
|
|
- var next = $("#pagination .active").next();
|
|
|
- console.log(next);
|
|
|
- if (!next.is(':visible')) {
|
|
|
- $("#pagination .first").click();
|
|
|
- }
|
|
|
- else {
|
|
|
- next.click();
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 윈도우 폭에 따른 반응형 목록 수 분기 함수
|
|
|
- function responsiblePagination() {
|
|
|
- var window_width = $(window).width();
|
|
|
-
|
|
|
- if(window_width >= 1200) {
|
|
|
- $('#pagination').bootpag({
|
|
|
- maxVisible: 10, // 한번에 보여지는 페이지수
|
|
|
- firstLastUse: true
|
|
|
- });
|
|
|
- }
|
|
|
- if(window_width < 1200 && window_width >= 600) {
|
|
|
- $('#pagination').bootpag({
|
|
|
- maxVisible: 5, // 한번에 보여지는 페이지수
|
|
|
- firstLastUse: true
|
|
|
- });
|
|
|
- }
|
|
|
- if(window_width < 600){
|
|
|
- $('#pagination').bootpag({
|
|
|
- maxVisible: 3, // 한번에 보여지는 페이지수
|
|
|
- firstLastUse: false
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 페이지 네이션 함수(샘플)
|
|
|
- function pagination(){
|
|
|
- // Pagination API -> http://botmonster.com/jquery-bootpag/#.XD2VElwzaUk
|
|
|
- $('#pagination').bootpag({
|
|
|
- // maxVisible: 10, // 한번에 보여지는 페이지수
|
|
|
- // firstLastUse: true,
|
|
|
- // href: 'URL',// template for pagination links (default javascript:void(0);)
|
|
|
- // hrefVariable: false,// variable name in href template for page number (default {{number}})
|
|
|
- total: totalPage, // 페이지 수
|
|
|
- page: 1, // 초기 페이지
|
|
|
- leaps: true,
|
|
|
- first: '<i class="mdi mdi-chevron-double-left"></i>',
|
|
|
- prev: '<i class="mdi mdi-chevron-left"></i>',
|
|
|
- next: '<i class="mdi mdi-chevron-right"></i>',
|
|
|
- last: '<i class="mdi mdi-chevron-double-right"></i>',
|
|
|
- wrapClass: 'pagination',
|
|
|
- activeClass: 'active',
|
|
|
- disabledClass: 'disabled',
|
|
|
- nextClass: 'next',
|
|
|
- prevClass: 'prev',
|
|
|
- lastClass: 'last',
|
|
|
- firstClass: 'first'
|
|
|
- }).on("page", function(event, num){
|
|
|
- retrieveStateData(num);
|
|
|
- });
|
|
|
- responsiblePagination();
|
|
|
- }
|
|
|
|
|
|
- var totalList = ${total}; // 저장된 데이터 항목 수
|
|
|
- var viewEntry; // 선택된 목록 보기 수
|
|
|
- var totalPage; // 표시할 페이지 수
|
|
|
-
|
|
|
- // 목록 수 초기값
|
|
|
- viewEntry = 36;
|
|
|
- // 초기 표시될 페이지 수 계산
|
|
|
- totalPage = totalList / viewEntry;
|
|
|
// 페이지 네이션 실행
|
|
|
- pagination();
|
|
|
-
|
|
|
- // 목록 수 변경 시
|
|
|
- $(document).on('change','#viewEntry',function(){
|
|
|
- viewEntry = $(this).find('option:selected').val();
|
|
|
- // 표시될 페이지 수 계산
|
|
|
- totalPage = totalList / viewEntry;
|
|
|
- // 페이지 네이션 실행
|
|
|
- pagination();
|
|
|
+ // Pagination API -> http://botmonster.com/jquery-bootpag/#.XD2VElwzaUk
|
|
|
+ $('#pagination').bootpag({
|
|
|
+ // maxVisible: 10, // 한번에 보여지는 페이지수
|
|
|
+ // firstLastUse: true,
|
|
|
+ // href: 'URL',// template for pagination links (default javascript:void(0);)
|
|
|
+ // hrefVariable: false,// variable name in href template for page number (default {{number}})
|
|
|
+ total: totalPage, // 페이지 수
|
|
|
+ page: 1, // 초기 페이지
|
|
|
+ leaps: true,
|
|
|
+ first: '<i class="mdi mdi-chevron-double-left"></i>',
|
|
|
+ prev: '<i class="mdi mdi-chevron-left"></i>',
|
|
|
+ next: '<i class="mdi mdi-chevron-right"></i>',
|
|
|
+ last: '<i class="mdi mdi-chevron-double-right"></i>',
|
|
|
+ wrapClass: 'pagination',
|
|
|
+ activeClass: 'active',
|
|
|
+ disabledClass: 'disabled',
|
|
|
+ nextClass: 'next',
|
|
|
+ prevClass: 'prev',
|
|
|
+ lastClass: 'last',
|
|
|
+ firstClass: 'first'
|
|
|
+ }).on("page", function(event, num){
|
|
|
+ retrieveStateData(num);
|
|
|
});
|
|
|
+ responsiblePagination();
|
|
|
|
|
|
// 윈도우 폭 변경에 따른 반응형 목록 수 적용
|
|
|
$(window).resize(function(){
|
|
|
responsiblePagination();
|
|
|
});
|
|
|
-
|
|
|
-
|
|
|
});
|
|
|
</script>
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
- <div class="wrapper">
|
|
|
- <jsp:include page="${data._INCLUDE}/sidebar.jsp"></jsp:include>
|
|
|
+ <div class="wrapper">
|
|
|
+ <jsp:include page="${data._INCLUDE}/sidebar.jsp"></jsp:include>
|
|
|
|
|
|
- <div class="main">
|
|
|
- <jsp:include page="${data._INCLUDE}/top.jsp"></jsp:include>
|
|
|
+ <div class="main">
|
|
|
+ <jsp:include page="${data._INCLUDE}/top.jsp"></jsp:include>
|
|
|
|
|
|
- <main class="content">
|
|
|
- <div class="container-fluid p-0">
|
|
|
- <!-- 환자관리 : 신규환자 등록 START -->
|
|
|
- <div class="row">
|
|
|
- <div class="col-12 col-lg-6">
|
|
|
- <h1 class="h3 mb-3">
|
|
|
- 진료관리
|
|
|
- </h1>
|
|
|
- </div>
|
|
|
- <div class="col-12 col-lg-6 text-right">
|
|
|
- <nav aria-label="breadcrumb">
|
|
|
- <ol class="breadcrumb">
|
|
|
- <li class="breadcrumb-item"><a href="javscript:;">Home</a></li>
|
|
|
- <li class="breadcrumb-item active">진료관리</li>
|
|
|
- </ol>
|
|
|
- </nav>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="row">
|
|
|
- <div class="col-12">
|
|
|
- <div class="card">
|
|
|
- <div class="card-header">
|
|
|
- <div class="row">
|
|
|
- <div class="col-lg-6">
|
|
|
- <h1 class="h4">- 상태현황</h1>
|
|
|
- </div>
|
|
|
- <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>
|
|
|
- </select>
|
|
|
- </label>
|
|
|
- <label>
|
|
|
- <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 disabled">
|
|
|
- <i class="fas fa-pause"></i>
|
|
|
- </button>
|
|
|
- </label>
|
|
|
- <input type="text" class="form-control w150" id="searchKeyword" placeholder="호실 or 환자명" onkeypress="searchPatients()">
|
|
|
- <button class="btn btn-primary" onclick="searchPatients()">검색</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="card-body">
|
|
|
- <div class="row patients-list">
|
|
|
- <jsp:useBean id="now" class="java.util.Date" />
|
|
|
- <fmt:formatDate value="${now}" pattern="yyyyMMdd" var="nowDateString" />
|
|
|
- <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 ${patient.temperature > 37 ? 'danger' : '' }">
|
|
|
- <ul>
|
|
|
- <fmt:formatDate value="${patient.temperatureCreateDate}" pattern="yyyyMMdd" var="temperatureDateString" />
|
|
|
- <li class="fever ${temperatureDateString == nowDateString ? 'step_one' : ''}">
|
|
|
- <c:out value="${patient.temperature != null ? patient.temperature : '--'} ℃" />
|
|
|
- </li>
|
|
|
- <fmt:formatDate value="${patient.systolicBloodPressureCreateDate}" pattern="yyyyMMdd" var="systolicBloodPressureDateString" />
|
|
|
- <li class="bloodPressure ${systolicBloodPressureDateString == nowDateString ? 'step_one' : ''}">
|
|
|
- <c:out value="${patient.systolicBloodPressure != null ? patient.systolicBloodPressure+' / '+patient.systolicBloodPressure : '-- / --'}" />
|
|
|
- </li>
|
|
|
- <fmt:formatDate value="${patient.oxygenSaturationCreateDate}" pattern="yyyyMMdd" var="oxygenSaturationDateString" />
|
|
|
- <li class="oxygen ${oxygenSaturationDateString == nowDateString ? 'step_one' : ''}">
|
|
|
- <c:out value="${patient.oxygenSaturation != null ? patient.oxygenSaturation : '--'} %" />
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </c:forEach>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="card-footer">
|
|
|
- <div id="pagination" class="paginationContainer"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <main class="content">
|
|
|
+ <div class="container-fluid p-0">
|
|
|
+ <!-- 환자관리 : 신규환자 등록 START -->
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-12 col-lg-6">
|
|
|
+ <h1 class="h3 mb-3">진료관리</h1>
|
|
|
+ </div>
|
|
|
+ <div class="col-12 col-lg-6 text-right">
|
|
|
+ <nav aria-label="breadcrumb">
|
|
|
+ <ol class="breadcrumb">
|
|
|
+ <li class="breadcrumb-item"><a href="javscript:;">Home</a></li>
|
|
|
+ <li class="breadcrumb-item active">진료관리</li>
|
|
|
+ </ol>
|
|
|
+ </nav>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-12">
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-header">
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-lg-6">
|
|
|
+ <h1 class="h4">- 상태현황</h1>
|
|
|
+ </div>
|
|
|
+ <div class="col-lg-6 search text-right">
|
|
|
+ <label> <select id="reloadIntervalSelect" class="custom-select" onchange="changeReloadInterval()">
|
|
|
+ <option value="10">10초</option>
|
|
|
+ <option value="30" selected>30초</option>
|
|
|
+ <option value="60">60초</option>
|
|
|
+ </select>
|
|
|
+ </label> <label>
|
|
|
+ <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 disabled">
|
|
|
+ <i class="fas fa-pause"></i>
|
|
|
+ </button>
|
|
|
+ </label> <input type="text" class="form-control w150" id="searchKeyword" placeholder="호실 or 환자명" onkeypress="searchPatients()">
|
|
|
+ <button class="btn btn-primary" onclick="searchPatients()">검색</button>
|
|
|
</div>
|
|
|
- <!-- 환자관리 : 신규환자 등록 END -->
|
|
|
- </div>
|
|
|
- </main>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card-body">
|
|
|
+ <div class="row patients-list">
|
|
|
+ <jsp:useBean id="now" class="java.util.Date" />
|
|
|
+ <fmt:formatDate value="${now}" pattern="yyyyMMdd" var="nowDateString" />
|
|
|
+ <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 ${patient.temperature > 37 ? 'danger' : '' }">
|
|
|
+ <ul>
|
|
|
+ <fmt:formatDate value="${patient.temperatureCreateDate}" pattern="yyyyMMdd" var="temperatureDateString" />
|
|
|
+ <li class="fever ${temperatureDateString == nowDateString ? 'step_one' : ''}"><c:out value="${patient.temperature != null ? patient.temperature : '--'} ℃" /></li>
|
|
|
+ <fmt:formatDate value="${patient.systolicBloodPressureCreateDate}" pattern="yyyyMMdd" var="systolicBloodPressureDateString" />
|
|
|
+ <li class="bloodPressure ${systolicBloodPressureDateString == nowDateString ? 'step_one' : ''}"><c:out value="${patient.systolicBloodPressure != null ? patient.systolicBloodPressure+' / '+patient.systolicBloodPressure : '-- / --'}" /></li>
|
|
|
+ <fmt:formatDate value="${patient.oxygenSaturationCreateDate}" pattern="yyyyMMdd" var="oxygenSaturationDateString" />
|
|
|
+ <li class="oxygen ${oxygenSaturationDateString == nowDateString ? 'step_one' : ''}"><c:out value="${patient.oxygenSaturation != null ? patient.oxygenSaturation : '--'} %" />
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </c:forEach>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card-footer">
|
|
|
+ <div id="pagination" class="paginationContainer"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 환자관리 : 신규환자 등록 END -->
|
|
|
+ </div>
|
|
|
+ </main>
|
|
|
|
|
|
- <jsp:include page="${data._INCLUDE}/footer.jsp"></jsp:include>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <jsp:include page="${data._INCLUDE}/footer.jsp"></jsp:include>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</body>
|
|
|
</html>
|
sjpark