반응형
1. 탄소지도 메뉴
시도, 시군구, 범례를 선택할 수 있는 셀렉트박스가 있음.
3개를 모두 선택해야지만 버튼이 작동함.
시도를 선택했을 때의 지도 화면
다른 시도를 선택하면 기존의 시도 레이어가 지워지고 선택한 시도의 레이어만 보인다.
시도 + 시군구까지 선택한 화면.
시군구도 시도와 마찬가지로, 선택한 시군구의 레이어만 보임.
범례까지 선택했을 때의 화면
범례는 2가지가 있음. 등간격과 네추럴 브레이크가 있어서 2가지를 선택하면 선택한 시군구를 기준으로 동으로 나뉘어져서 보여짐. 현재 지도에 출력된 내용은 전기 사용량임.
색상에 따른 범례는 이미지로 넣어서 출력했음.
시도와 범례만 선택하고 시군구를 선택하지 않았을 때의 alert
모두 선택해야지만 검색이 되도록 함.
2. 데이터 업로드
postgreSQL과 연동해놓았기 때문에, 여기에서 파일을 업로드하면 내 테이블로 데이터가 업로드 됨.
sweetalert 사용
파일이 업로드 되고, db에 제대로 데이터가 저장된 경우에는 업로드 성공 alert이 뜸.
progress-bar
업로드 진행중을 bar형식으로 표현함.
만약 데이터가 올바르지 못하거나, db에 제대로 저장되지 않았을 경우에는 업로드 실패 alert창이 뜸.
반응형
'개발 공부 Today I Learned' 카테고리의 다른 글
[국비 94일차 TIL] 차트를 사이드바에서 모달로 띄우기 (0) | 2024.04.13 |
---|---|
[국비 93일차 TIL] vue (0) | 2024.04.06 |
[국비 91일차 TIL] vue 글쓰기 페이지 만들기 (0) | 2024.04.03 |
[국비 90일차 TIL] vue, Axios 설치 (0) | 2024.04.02 |
[국비 89일차 TIL] Vue 뷰 mp3 오디오 플레이, 게시판 추가 (0) | 2024.04.01 |
댓글