실시간 환자 체온 대시보드 (TEAM_PROJECT_2)

프로젝트 소개

실시간 환자 체온 대시보드는 라즈베리파이를 통해 환자의 체온 정보를 실시간으로 수집하고, 이를 리액트의 차트와 캘린더 컴포넌트를 사용하여 시각적으로 표현하는 대시보드입니다. 사용자는 데이터 조회 범위를 조절할 수 있으며, 평균 체온 정보와 과거 데이터를 확인할 수 있는 다양한 기능을 제공합니다.

개발 기간

• 2024.09.09 ~ 2024.09.27

사용 기술

• 프론트엔드: React, chart.js, FullCalendar
• 백엔드: Node.js, Java
• 데이터베이스: MairaDB
• 하드웨어: Raspberry Pi

설치 및 실행 방법

1. 레포지토리 클론:

   
   git clone https://github.com/Comleamae/TeamProject2.git

2. 설치할 npm

   • 1)axios 등 기본 설치

     • 페이지 이동 관련(Route, Routes, Link, navigate)

     -npm install react-router-dom

     • 서버와 데이터 통신(Axios)

     -npm install axios

   • 2)캘린더 라이브러리
     • npm i react-calendar
   • 3)차트 라이브러리
     • npm install chart.js react-chartjs-2
   • 4)리액트 쿼리 라이브러리
     • npm install react-query
     • npm install @tanstack/react-query

개발자 소개

• 박주원 (leamae): 팀장, 대시보드 차트 구현, 캘린더로 이전 날짜 데이터를 받아와 차트를 다시 그리는 기능, 발주 요청 처리 페이지 기능 담당
• 김탁현: 라즈베리파이를 통한 데이터 수집, 경고음 코드 작성
• 최윤형: 페이지 CSS 스타일링
• 김세훈: (역할을 입력해주세요)

주요 기능

1. 라즈베리파이를 통한 데이터 측정

라즈베리파이로 실시간 체온 데이터를 수집하는 코드입니다.

2. 실시간 데이터 시각화

데이터베이스에 저장된 데이터를 chart.js를 활용하여 실시간 라인 그래프로 시각화하며, 특정 온도 이상일 경우 빨간색 점으로 표시합니다.

3. 기준 날짜를 포함한 일주일 간의 평균 체온

기준 날짜를 포함하여 일주일간의 평균 체온을 확인할 수 있으며, 데이터가 없을 경우 버튼이 나타나지 않습니다.

4. 하루 동안의 데이터를 시간별로 조절하는 기능

기준 날짜의 데이터를 30분 또는 1시간 간격으로 조절하여 확인할 수 있습니다. 왼쪽 테이블에는 해당 데이터를 텍스트로 출력합니다.

5. 마지막 30분/1시간 동안의 데이터 조회

마지막 30분 또는 1시간 동안의 데이터를 확인할 수 있으며, 바 차트로 시각화합니다.

6. 데이터 바 차트 시각화

최근 10개의 데이터를 바 차트 형식으로 보여주며, 특정 온도 이상일 경우 해당 바의 색이 붉은색으로 표시됩니다. 어제와 오늘의 데이터를 비교하여 텍스트로 출력해줍니다.

7. 상세정보 페이지

환자의 입원 기간 동안의 데이터를 차트로 시각화하고, 평균 및 이전 날짜의 데이터를 조회할 수 있습니다.

8. 캘린더에서 선택한 차트 정보 이동

캘린더를 통해 선택한 차트 정보를 화면 아래로 이동시킬 수 있습니다.