issue-sample/waste/wastewater.md

환경시설 통합 운영 관리 시스템 (wastewater.html)

이 시스템은 폐수배출시설 및 대기배출시설의 운영 일지를 디지털화하여 관리하고, 데이터를 자동으로 집계하며 PDF 문서로 보관할 수 있는 통합 관리 도구입니다.

1. 주요 기능

📑 운영일지 작성 및 관리

• 폐수배출시설 운영일지 (별지 제18호 서식): 가동 시간대, 용수 사용량, 폐수 배출량, 슬러지 발생량 등을 기록합니다.
• 대기배출시설 운영기록부: 배출구별 가동 시간, 방지시설 운영 사항, 자가측정 사항 등을 기록합니다.
• 결재 시스템: 담당, 팀장, 공장장 등 단계별 결재인(스탬프) 이미지를 업로드하고 관리할 수 있습니다.

📊 데이터 자동 집계 및 계산

• 용수/폐수 자동 계산: 전일 지침과 금일 지침을 입력하면 사용량 및 배출량이 자동으로 계산됩니다.
• 일별/월별 통계: 기록된 데이터를 바탕으로 날짜별, 월별 사용량 및 발생량 합계와 평균을 집계 화면에서 확인할 수 있습니다.
• 데이터 이월: 전날 저장된 데이터가 있을 경우, 금일의 '전일 지침' 칸으로 데이터가 자동으로 이월되어 입력 편의성을 제공합니다.

💾 문서 보관 및 백업

• PDF 저장: 작성된 일지를 실제 서식과 동일한 형태의 PDF 파일로 생성하여 브라우저 내 IndexedDB에 보관합니다.
• 문서 달력: 달력 형태의 UI를 통해 날짜별 문서 저장 현황을 한눈에 파악하고 즉시 열람할 수 있습니다.
• 데이터 내보내기/불러오기: 전체 데이터(일지 및 설정)를 JSON 파일로 백업하거나 복구할 수 있습니다.

2. 상세 탭 구성

1. 폐수배출시설 (메인 양식): 수질 관련 운영 데이터 입력 및 출력 양식.
2. 대기배출시설 (메인 양식): 대기 관련 운영 데이터 입력 및 출력 양식.
3. 데이터 (집계 화면): 입력된 수치 데이터를 기반으로 한 통계 테이블 (일별/월별).
4. 데이터 (pdf): 저장된 PDF 문서 목록 관리 및 미리보기.

3. 기술 스택 및 라이브러리

• Frontend: HTML5, Vanilla JavaScript, Tailwind CSS (Styling)
• Libraries:
  • html2canvas: HTML 화면을 캔버스로 변환
  • jspdf: 변환된 이미지를 바탕으로 PDF 파일 생성
  • html2pdf.js: HTML 컨텐츠의 PDF 변환 보조
• Storage:
  • LocalStorage: 폼 입력 데이터 및 메타데이터 저장
  • IndexedDB: 생성된 PDF 블롭(Blob) 데이터 저장 (대용량 저장소)

4. 사용 방법

1. 상단 제어 바에서 작성일을 선택합니다.
2. 해당하는 탭(폐수/대기)에서 내용을 입력합니다. (자동 계산 항목 확인)
3. 저장/수정 버튼을 눌러 데이터를 확정하고 PDF로 저장합니다.
4. 집계 화면 탭에서 누적된 데이터를 확인하거나, 문서 보관 탭에서 과거 저장된 PDF를 관리합니다.