ReactJS React 보고서 뷰어를 사용하여 혈액 검사 결과를 표시하는 방법
페이지 정보
작성자 GrapeCity
작성일 2023-07-11 15:22 조회 300회
댓글 0건
본문
관련링크
환자의 장기 기능, 혈당치, 콜레스테롤 수치 등 전반적인 건강에 대한 중요한 정보를 제공합니다. 혈액 검사는 또한 질병을 진단하고, 진행 중인 치료를 모니터링하고, 환자의 경과를 추적하는 데도 사용됩니다.
혈액 검사 결과를 온라인으로 확인할 수 있게 되면 환자와 의사가 필요한 의료 정보를 손쉽게 효율적으로 이용할 수 있습니다. 환자는 자신의 결과를 건강 관리 서비스 제공자와 공유할 수 있으며 자신의 건강을 지속적으로 관리하고 이를 바탕으로 건강과 관련한 결정을 내릴 수 있습니다.
ActiveReportsJS를 사용하면 사용자 정의 가능한 보고서를 통해 혈액 검사 결과를 온라인으로 쉽게 표시할 수 있습니다. ActiveReportsJS는 차트와 그래프를 포함하여, 의사와 환자가 제공되는 정보를 더 효과적으로 이해하는 데 도움이 되는 광범위한 데이터 시각화 옵션을 제공합니다.
ActiveReportsJS를 사용하면 보고서를 데이터 소스에 쉽게 연결하면서 권한과 보안을 관리하고 HIPAA를 준수할 수 있습니다.
ActiveReportsJS는 웹 기반 플랫폼으로 사용자가 인터넷 연결을 통해 어디서나 쉽게 데이터에 액세스할 수 있기 때문에, 건강 관리 전문가와 환자 모두가 편리하게 사용할 수 있는 다목적 도구입니다.
이 문서에서는 ActiveReportsJS의 보고서 디자이너를 사용하여 혈액 검사 결과를 표시하기 위한 보고서를 작성하는 방법 및 ActiveReportsJS의 React 보고서 뷰어를 구현하여 사용자가 보고서를 통해 데이터에 액세스할 수 있도록 허용하는 방법을 설명합니다.
완료된 보고서와 응용 프로그램을 확인하려면 에서 레포지토리를 다운로드 받아 보세요!
ActiveReportsJS 독립 실행형 디자이너 설치
보고서 작성을 시작하기 위해 ActiveReportsJS React 보고서 디자이너, 구체적으로는 독립 실행형 디자이너를 사용해 보겠습니다. ActiveReportsJS React 보고서 디자이너는 보고서를 작성하는 데 사용할 수 있는 데스크톱 응용 프로그램입니다. ActiveReportsJS는 웹 기반 디자이너도 제공하지만, 여기서는 독립 실행형 디자이너를 사용합니다.
페이지로 이동하여 사용 중인 운영 체제에 해당하는 파일을 다운로드하십시오.
다운로드한 파일을 열고, designer 폴더에 있는 ActiveReportsJS-Designer 설치 프로그램을 실행합니다. 완료되면, ActiveReportsJS 독립 실행형 디자이너가 실행됩니다.
보고서에 데이터 소스 및 데이터 집합 추가
보고서에 데이터를 추가해야 합니다. ActiveReportsJS 디자이너를 사용하면 데이터 소스(보고서가 데이터를 가져오기 위해 찾는 위치) 및 데이터 집합(데이터 소스에서 가져온 데이터)을 설정할 수 있습니다.
새 데이터 소스를 추가하려면, 데이터 패널 버튼을 클릭한 다음 데이터 소스 아래 추가 버튼을 클릭합니다.
이렇게 하면 데이터 소스 창이 열립니다. 이 보고서의 경우, 로컬 JSON 파일을 사용하여 보고서를 채웁니다.
patientInfo.json과 patientTestResults.json, 두 개의 파일을 가져왔습니다. 각 파일을 위한 데이터 소스와 집합을 만들어야 합니다. 완료되면 다음과 같은 데이터 소스가 생성됩니다.
상단의 소스를 사용하여 데이터 집합을 만들어야 합니다. 데이터 소스에서 데이터 집합을 만들려면, 데이터 소스 옆의 더하기 버튼을 클릭하여 데이터 집합 창을 열면 됩니다.
완료되면 다음과 같은 데이터 집합이 생성됩니다.
생성된 PTR_Set에 Nested DataSets라는 새 필드가 표시됩니다. 중첩된 데이터 집합을 사용하면 이미 생성된 모든 데이터 집합 내의 중첩된 데이터에 쉽게 액세스할 수 있습니다.
이 중첩된 데이터를 사용하여 혈액 검사 보고서를 위한 데이터를 가져옵니다.
이제 보고서에 대한 데이터 연결을 설정했으므로, 보고서 작성을 시작할 수 있습니다.
페이지 헤더 및 푸터 추가
보고서에 헤더와 푸터를 추가합니다. 도구 모음에서 섹션 탭을 클릭하고 헤더 추가 및 푸터 추가 버튼을 클릭합니다. 이렇게 하면 보고서 페이지에 헤더 및 푸터 섹션이 추가됩니다.
페이지 헤더의 제어판에서 텍스트 상자 컨트롤 및 이미지 컨트롤을 드래그하여 놓습니다. 헤더의 왼쪽에 텍스트 상자, 반대쪽에 이미지를 놓습니다. 텍스트 상자의 경우, 텍스트를 "Blood Test Results"로 설정합니다. 또한 속성 창을 통해 다음과 같은 속성을 설정합니다.
로고를 업로드하고 이미지 크기 조정 속성을 이미지에 맞추기로 설정합니다.
마지막으로, 헤더를 클릭하고 배경색을 #e6e6e6로 설정합니다. 완료되면 다음과 같은 페이지 헤더가 표시됩니다.
이제 푸터를 추가하겠습니다. 푸터의 경우, 현재 연도를 표시하고 연락하는 데 사용할 수 있는 연락처 번호를 표시합니다. 계속해서 텍스트 상자 세 개와 이미지 컨트롤 두 개를 푸터에 끌어 놓습니다. 텍스트 상자의 경우, 텍스트 상자 내에 다음과 같은 텍스트를 추가합니다.
© {Year(Now())} GrapeCity, Inc. All Rights Reserved.
1800.858.2739
Pittsburgh, PA:412.681.4343
첫 번째 텍스트 상자의 {Year(Now())}는 무엇인지 알아보겠습니다. ActiveReportsJS를 사용하면 값을 평가하는 식을 컨트롤에 포함할 수 있습니다. Year(Now())는 단순히 현재 년도를 반환하는 식이며, 이 식을 중괄호로 둘러싸면 ActiveReportsJS에서 내부의 텍스트를 식으로 평가합니다.
다음으로, 전화번호가 포함된 텍스트 상자의 왼쪽에 이미지 컨트롤 두 개를 추가합니다.
이러한 이미지 컨트롤에 전화 아이콘을 포함합니다. 완료되면 다음과 같은 푸터가 표시됩니다.
상단 도구 모음의 미리 보기를 클릭하면 새로 만든 헤더 및 푸터를 사용하는 보고서가 표시됩니다.
환자 및 검체 정보 목록 만들기
다음으로, 환자에 관한 정보가 포함될 목록과 환자로부터 수집된 검체(검사 대상물)에 관한 정보가 포함될 목록, 두 개의 목록을 만듭니다.
먼저, 제어판의 목록 컨트롤을 보고서로 드래그하여 끌어옵니다.
속성 패널에서 데이터 집합을 PI_Set로 설정합니다.
데이터 집합의 속성을 목록 컨트롤 내에 추가하는 컨트롤에 간단히 연결할 수 있습니다.
다음으로, 목록의 상단에 "환자 정보" 및 "검체 정보", 두 개의 텍스트 상자를 추가합니다.
방금 추가한 각 텍스트 상자 밑에 각 행에 텍스트 상자 두 개씩, 다섯 개의 텍스트 상자 행을 추가합니다. 이러한 텍스트 상자 내에 다음 항목을 추가합니다.
환자 정보 목록:
레이블 텍스트 상자 |
값 텍스트 상자 |
ID: |
{PatientID} |
NAME: |
{PatientFName} {PatientLName} |
GENDER: |
{IIF(PatientSex = "M", "Male", "Female")} |
AGE: |
{Year(DateTime.Now()) - Year(DateTime.Parse(DOB))} |
DOCTOR: |
Dr. {PatientDoctor} |
검체 정보 목록:
레이블 텍스트 상자 |
값 텍스트 상자 |
SPECIMEN: |
{SpecimanNo} |
LAB ID: |
{ControlNo} |
COLLECTED: |
{DateTime.Parse(DateReported).AddYears(Year(Now()) - 1 - Year(DateTime.Parse(DateReported))).ToString("MM/dd/yyyy")} |
RECEIVED |
{DateTime.Parse(DateCollected).AddYears(Year(Now()) - 1 - Year(DateTime.Parse(DateCollected))).ToString("MM/dd/yyyy")} |
COMPLETED: |
{DateTime.Parse(DateReported).AddYears(Year(Now()) - 1 - Year(DateTime.Parse(DateReported))).AddDays(Day(DateTime.Parse(DateReported))).ToString("MM/dd/yyyy")} |
텍스트 상자에 몇 가지 스타일 변경 사항을 적용합니다. 완료되면 다음과 같이 표시됩니다.
보고서를 미리 보면 다음과 같이 표시됩니다.
검사 표 목록 만들기
검사 이름과 검사의 결과를 표시할 표를 추가합니다. 다른 목록 컨트롤을 보고서에 드래그하여 놓고 데이터 집합을 BloodReport_Result로 설정합니다.
방금 추가한 목록 내에 표 컨트롤을 드래그하여 놓습니다. 속성 패널에서 표의 데이터 집합을 BloodReport_Result로 설정합니다.
다음으로, 표에 형식을 일부분 지정해야 합니다. 푸터 행을 삭제하고, 현재 헤더 행 밑에 다른 헤더 행을 추가합니다. 두 번째 헤더 행에서 단일 행이 전체 행을 구성하도록 모든 셀을 병합합니다. 이제 셀에 값을 추가할 수 있습니다.
행 |
셀 값 |
헤더 행 #1 |
검사 셀 2: 결과 셀 3:** 셀 4:** 참고 범위 셀 5: |
헤더 행 #2 |
{First(TestGroup)} |
세부 정보 행 |
셀 1: {Test} 셀 2: {Result} 셀 3: 이미지 컨트롤 셀 4: {ReferenceInterval} 셀 5: {Units} |
세부 정보 행의 세 번째 셀에 이미지 컨트롤을 추가합니다. 간단히 이미지를 드래그하여 해당 셀에 놓을 수 있으며, 표는 이미지 컨트롤로 이 셀을 채웁니다.
셀을 클릭하여 속성 패널에 이미지 속성을 표시합니다. 여기에는 설정할 수 있는 여러 속성 값이 표시됩니다. 다음 두 속성만 수정하면 됩니다. 소스 및 값. 소스 속성을 데이터베이스로 변경하고, 값 속성을 다음으로 설정합니다.
{IconSet("GrayArrows", IIF(Convert.ToDouble(Result) >= Convert.ToDouble(ReferenceInterval.Substring(ReferenceInterval.IndexOf("-") + 2)) AND Convert.ToDouble(ReferenceInterval.Substring(ReferenceInterval.IndexOf("-") + 2)) <> 59, "True", "False"), false, false, false, IIF(Convert.ToDouble(Result) <= Convert.ToDouble(ReferenceInterval.Substring(0, ReferenceInterval.IndexOf(" - "))), "True", "False"))}소스를 데이터베이스로 설정하면 ActiveReportsJS의 일부 기본 제공 아이콘을 사용할 수 있습니다. 이 경우 결과에 대해 참고 범위를 평가하며, 이 값을 기반으로 위를 가리키는 화살표 또는 아래를 가리키는 화살표를 표시하거나 아무 이미지도 표시하지 않습니다.
완료되면 다음과 같은 목록 및 표가 표시됩니다.
미리 보기를 누르면 보고서에 다음과 같은 항목이 표시됩니다.
의사 메모 표시
마지막으로 보고서의 페이지 하단에 의사가 작성한 메모 및 작은 오류 메시지를 추가합니다.
텍스트 상자를 드래그하여 보고서의 표 목록 밑에 놓은 후 {Lookup(PatientID, PatientID, Comments, "PI_Set")} 값을 추가합니다. 이렇게 하면 PatientID를 사용하여 환자 파일의 메모를 조회하게 됩니다.
그 밑에 다른 텍스트 상자를 추가합니다. 다음과 같은 텍스트 상자 및 내용이 표시됩니다.
보고서를 미리 보면 다음과 같이 표시됩니다.
보고서 전체는 다음과 같이 표시됩니다.
React 응용 프로그램에 ActiveReportsJS 추가
이제 혈액 검사 보고서를 만들고 저장했으므로, ActiveReportsJS React 보고서 뷰어를 응용 프로그램에 추가하여 사용자가 보고서를 볼 수 있도록 해야 합니다.
새 React 프로젝트 내에서 다음 명령을 실행합니다.
npm install @grapecity/activereports-react
ActiveReportsJS React 모듈의 최신 버전이 설치됩니다.
다음으로, ActiveReportsJS의 CSS 파일을 포함해야 합니다. src 폴더의 App.css 파일을 열고 다음 가져오기를 추가합니다.
@import "@grapecity/activereports/styles/ar-js-ui.css"; @import "@grapecity/activereports/styles/ar-js-viewer.css";
이렇게 하면 ActiveReportsJS의 핵심 CSS 파일 및 뷰어의 CSS 파일을 가져오게 됩니다.
이제 ActiveReportsJS의 React 파일을 위한 가져오기를 포함해야 합니다.
App.js 파일의 상단에서 다음을 추가합니다.
import { Viewer } from "@grapecity/activereports-react";
import "@grapecity/activereports/pdfexport";
import "@grapecity/activereports/htmlexport";
import "@grapecity/activereports/tabulardataexport";ActiveReportsJS 뷰어 및 PDFExport, HTMLExport, TabularDataExport 모듈을 가져오게 됩니다. 사용자는 이러한 모듈을 사용하여 PDF, HTML, CSV 형식으로 보고서를 내보낼 수 있습니다.
React 보고서 뷰어에 보고서 로드
React 응용 프로그램이 설정되었으므로, 응용 프로그램에 뷰어를 추가하고 작성한 보고서를 로드하도록 해야 합니다.
App.js return 문 내의 코드를 다음 코드로 바꿉니다.
<div id="viewer-host">
<Viewer report={{ Uri: 'BloodTestReport.rdlx-json' }} />
</div>기본적으로 ActiveReportsJS는 React 응용 프로그램의 public 폴더를 들여다보고 public 폴더 내에 BloodTestReport.rdlx-json이라는 보고서를 추가합니다.
마지막으로 사용자 정의 CSS를 추가하여 컨테이너 div의 스타일을 지정해야 합니다. App.js 파일 내에서 다음을 추가합니다.
#viewer-host {
width: 100%;
height: 100vh;
}모든 배치가 끝났습니다. 다음 명령을 실행하여 React 응용 프로그램을 시작하세요.
npm start
브라우저가 열리고, 혈액 검사 보고서가 뷰어에 로드됩니다.
결론
완성되었습니다! ActiveReportsJS 독립 실행형 보고서 디자이너와 React 보고서 뷰어를 사용하면 복잡한 보고서를 쉽게 작성할 수 있을 뿐만 아니라 이 보고서를 React 응용 프로그램에 표시할 수 있습니다.
이 프로젝트 전체를 보려면
지금 바로 ActiveReportsJS를 다운로드하여 직접 테스트해 보세요!
댓글목록
등록된 댓글이 없습니다.
