반가워요 ~ 미세먼지 마지막 부분인 C 파트 프론트 부분을 설명드리는 날이네요.
포스팅만 하면 좋겠지만 ,, 취업 준비를 하는 과정 중에서 현재 다른 공부도 병행하고 아르바이트지만 일도 하느라 이리저리 치이네요 〆(´ω`●)ゞ
프론트 부분 설명드리고 시리즈 포스팅 마무리하겠습니다 ~! (^人^)
+ 스크롤이 매우 깁니다 .. +
monitoring_main.jsp 메인 화면에서는 충전기 / 날씨 / 미세먼지를 보여주는데요, 미세먼지 부분을 보시면 됩니다.
<%@page import="java.time.format.DateTimeFormatter"%>
<%@page import="java.time.LocalDateTime"%>
<%@page import="com.project.airquality.AirqualityDTO"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@page import="java.time.LocalDate"%>
<%@page import="com.project.weather.WeatherUtil"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
...
<div class="card info-card sales-card">
<div class="card-header">
<h5 class="card-title">미세먼지 정보</h5>
</div>
<div class="card-body">
<div class="cmp-cmn-para odam-updated" style="padding: 10px; ">
<a href="/evweb/airquality/getDataDust.do?stationId=${stationId}" class="updated-at">
<%AirqualityDTO airqualityInfo =(AirqualityDTO)request.getAttribute("airqualityInfo");
LocalDate airdate = LocalDate.parse(airqualityInfo.getDatatime().substring(0,10), DateTimeFormatter.ISO_DATE);
String airtime = airqualityInfo.getDatatime().substring(5,7)+"."+airqualityInfo.getDatatime().substring(8,10)
+".("+util.getDayOfWeek(airdate)+")"+airqualityInfo.getDatatime().substring(11);
%>
<span><%=airtime%></span></a>
</div>
<div class="cmp-cur-weather cmp-cur-weather-air">
<h3 class="hid">대기질정보</h3>
<ul id = "wrap-3" class="wrap-2 air-wrap no-underline">
<li><span class="lbl">초미세먼지<small>(PM2.5)</small></span>
<strong class="air-level val">
<c:choose>
<c:when test="${airqualityInfo.pm25value<=15}"><span class="air-lvv-wrap air-lvv-1"></c:when>
<c:when test="${airqualityInfo.pm25value<=35}"><span class="air-lvv-wrap air-lvv-2"></c:when>
<c:when test="${airqualityInfo.pm25value<=75}"><span class="air-lvv-wrap air-lvv-3"></c:when>
<c:when test="${airqualityInfo.pm25value>=76}"><span class="air-lvv-wrap air-lvv-4"></c:when>
<c:otherwise><span class="air-lvv-wrap air-lvv-0"></c:otherwise>
</c:choose>
<span class="air-lvv">${airqualityInfo.pm25value}</span><small class="unit">㎍/m³</small></span>
<span class="air-lvt" style="color: #000;">
<c:choose>
<c:when test="${airqualityInfo.pm25value<=15}">좋음</c:when>
<c:when test="${airqualityInfo.pm25value<=35}">보통</c:when>
<c:when test="${airqualityInfo.pm25value<=75}">나쁨</c:when>
<c:when test="${airqualityInfo.pm25value>=76}">매우나쁨</c:when>
<c:otherwise>통신장애</c:otherwise>
</c:choose>
<a href="#legend" data-air-type="pm25">범례보기</a></span>
</strong>
</li>
<div class="cmp-cur-weather cmp-cur-weather-air">
<h3 class="hid">대기질정보</h3>
<ul class="wrap-2 air-wrap no-underline">
<li><span class="lbl">초미세먼지<small>(PM2.5)</small></span>
<strong class="air-level val"><span class="air-lvv-wrap air-lvv-2"><span class="air-lvv">27</span>
<small class="unit">㎍/m³</small></span>
<span class="air-lvt" style="color: #000;">보통<a href="#legend" data-air-type="pm25">범례보기</a></span></strong></li>
<li><span class="lbl">미세먼지<small>(PM10)</small></span>
<strong class="air-level val"><span class="air-lvv-wrap air-lvv-2"><span class="air-lvv">68</span>
<small class="unit">㎍/m³</small></span>
<span class="air-lvt" style="color: #000;">보통<a href="#legend" data-air-type="pm10">범례보기</a></span></strong></li>
</ul>
<div class="cmp-air-legend">
<div class="shadow-box" data-air-type="pm25">
<div class="inner">
<a href="#close" class="close-box">닫기</a>
<h5>초미세먼지(㎛)</h5>
<p>입자의 크기가 2.5㎛ 이하인 먼지</p>
<ul class="air-legend">
<li class="air-legend-1"><span>좋음<br>(0~15)
</span></li>
<li class="air-legend-2"><span>보통<br>(16~35)
</span></li>
<li class="air-legend-3"><span>나쁨<br>(36~75)
</span></li>
<li class="air-legend-4"><span>매우나쁨<br>(76~)
</span></li>
</ul>
</div>
</div>
<div class="shadow-box" data-air-type="pm10">
<div class="inner">
<a href="#close" class="close-box">닫기</a>
<h5>미세먼지(㎛)</h5>
<p>입자의 크기가 10㎛ 이하인 먼지</p>
<ul class="air-legend">
<li class="air-legend-1"><span>좋음<br>(0~30)
</span></li>
<li class="air-legend-2"><span>보통<br>(31~80)
</span></li>
<li class="air-legend-3"><span>나쁨<br>(81~150)
</span></li>
<li class="air-legend-4"><span>매우나쁨<br>(151~)
</span></li>
</ul>
</div>
</div>
<li><span class="lbl">미세먼지<small>(PM10)</small></span>
<strong class="air-level val">
<c:choose>
<c:when test="${airqualityInfo.pm25value<=30}"><span class="air-lvv-wrap air-lvv-1"></c:when>
<c:when test="${airqualityInfo.pm25value<=80}"><span class="air-lvv-wrap air-lvv-2"></c:when>
<c:when test="${airqualityInfo.pm25value<=150}"><span class="air-lvv-wrap air-lvv-3"></c:when>
<c:when test="${airqualityInfo.pm25value>=151}"><span class="air-lvv-wrap air-lvv-4"></c:when>
<c:otherwise><span class="air-lvv-wrap air-lvv-0"></c:otherwise>
</c:choose>
<span class="air-lvv">${airqualityInfo.pm25value}</span><small class="unit">㎍/m³</small></span>
<span class="air-lvt" style="color: #000;">
<c:choose>
<c:when test="${airqualityInfo.pm25value<=30}">좋음</c:when>
<c:when test="${airqualityInfo.pm25value<=80}">보통</c:when>
<c:when test="${airqualityInfo.pm25value<=150}">나쁨</c:when>
<c:when test="${airqualityInfo.pm25value>=151}">매우나쁨</c:when>
<c:otherwise>통신장애</c:otherwise>
</c:choose>
<a href="#legend" data-air-type="pm10">범례보기</a></span>
</strong>
</li>
</ul>
<div class="cmp-air-legend">
<div class="shadow-box" data-air-type="pm25">
<div class="inner">
<a href="#close" class="close-box">닫기</a>
<h5>초미세먼지(㎛)</h5>
<p>입자의 크기가 2.5㎛ 이하인 먼지</p>
<ul class="air-legend">
<li class="air-legend-1"><span>좋음<br>(0~15)
</span></li>
<li class="air-legend-2"><span>보통<br>(16~35)
</span></li>
<li class="air-legend-3"><span>나쁨<br>(36~75)
</span></li>
<li class="air-legend-4"><span>매우나쁨<br>(76~)
</span></li>
</ul>
<li><span class="lbl">미세먼지<small>(PM10)</small></span>
<strong class="air-level val">
<c:choose>
<c:when test="${airqualityInfo.pm25value<=30}"><span class="air-lvv-wrap air-lvv-1"></c:when>
<c:when test="${airqualityInfo.pm25value<=80}"><span class="air-lvv-wrap air-lvv-2"></c:when>
<c:when test="${airqualityInfo.pm25value<=150}"><span class="air-lvv-wrap air-lvv-3"></c:when>
<c:when test="${airqualityInfo.pm25value>=151}"><span class="air-lvv-wrap air-lvv-4"></c:when>
<c:otherwise><span class="air-lvv-wrap air-lvv-0"></c:otherwise>
</c:choose>
<span class="air-lvv">${airqualityInfo.pm25value}</span><small class="unit">㎍/m³</small></span>
<span class="air-lvt" style="color: #000;">
<c:choose>
<c:when test="${airqualityInfo.pm25value<=30}">좋음</c:when>
<c:when test="${airqualityInfo.pm25value<=80}">보통</c:when>
<c:when test="${airqualityInfo.pm25value<=150}">나쁨</c:when>
<c:when test="${airqualityInfo.pm25value>=151}">매우나쁨</c:when>
<c:otherwise>통신장애</c:otherwise>
</c:choose>
<a href="#legend" data-air-type="pm10">범례보기</a></span>
</strong>
</li>
</ul>
<div class="cmp-air-legend">
<div class="shadow-box" data-air-type="pm25">
<div class="inner">
<a href="#close" class="close-box">닫기</a>
<h5>초미세먼지(㎛)</h5>
<p>입자의 크기가 2.5㎛ 이하인 먼지</p>
<ul class="air-legend">
<li class="air-legend-1"><span>좋음<br>(0~15)
</span></li>
<li class="air-legend-2"><span>보통<br>(16~35)
</span></li>
<li class="air-legend-3"><span>나쁨<br>(36~75)
</span></li>
<li class="air-legend-4"><span>매우나쁨<br>(76~)
</span></li>
</ul>
</div>
</div>
<div class="shadow-box" data-air-type="pm10">
<div class="inner">
<a href="#close" class="close-box">닫기</a>
<h5>미세먼지(㎛)</h5>
<p>입자의 크기가 10㎛ 이하인 먼지</p>
<ul class="air-legend">
<li class="air-legend-1"><span>좋음<br>(0~30)
</span></li>
<li class="air-legend-2"><span>보통<br>(31~80)
</span></li>
<li class="air-legend-3"><span>나쁨<br>(81~150)
</span></li>
<li class="air-legend-4"><span>매우나쁨<br>(151~)
</span></li>
</ul>
</div>
</div>
</div>
</div>
<div class="cmp-cmn-para cmp-cur-weather-air">
<p class="right spon">
정보출처: <a href="http://m.airkorea.or.kr" target="_blank"
title="새창열림">대기질정보(한국환경공단)</a>
</p>
</div>
</div>
</div>
</div>
<!-- 충전량 -->
<div class="col-md-8 pr-0">
<div class="card info-card sales-card " style="z-index : 1;">
<div class="card-header">
<h5 class="card-title">일간 충전량 <span style="float: right">${chargeAmount}kWh</span></h5>
</div>
<div class="card-body">
<figure class="highcharts-figure">
<div id="chargeday"></div>
</figure>
</div>
</div>
<div class="card info-card sales-card" style="z-index : 0;">
<div class="card-header">
<h5 class="card-title">주간 충전량 <span style="float: right">${weekamount}kWh</span></h5>
</div>
<div class="card-body">
<figure class="highcharts-figure">
<div id="chargeweek"></div>
</figure>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
weather.jsp 입니다. 날씨와 미세먼지가 함께 있는데요.
도저히 .. 길어서 편집했습니다. 모든 내용이 궁금하시다면 1편에 있는 깃허브 주소에 들어가주세요 ~ ❤
<%@page import="com.project.weather.WeatherUtil"%>
<%@page import="java.time.format.DateTimeFormatter"%>
<%@page import="java.time.LocalDate"%>
<%@page import="java.time.DayOfWeek"%>
<%@page import="java.util.ArrayList"%>
<%@page import="com.project.airquality.AirqualityDTO"%>
<%@page import="com.project.weather.WeatherDTO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%>
<!DOCTYPE html>
<html>
<head>
<title>단기예보 - 기상청 날씨누리</title>
...
<!-- 미세먼지 시작 -->
<div class="card-body">
<div class="cmp-cmn-para odam-updated" style="padding: 10px;">
<a href="/evweb/airquality/getDataDust.do?stationId=${stationId}"
class="updated-at">
</a>
</div>
<div style="display: flex; justify-content: center;">
<div class="forecast-body" style="font-family: & amp;">
<%-- ${airqualityInfo.datatime} --%>
<div class="forecast-body" style="font-family: & amp;">
<div class="forecast-body-summary">
<table>
<tr class="wf-row-pm25">
<tr>
<td>지역</td>
<c:forEach items="${airqualityInfo}" var="dust">
<!-- 구름 -->
<td style="padding: px 1px 0px 0px;">
<div style="display: inline-block; width: 80px;">
<svg width="80px" height="80px" version="1.1"
viewBox="0 0 64 52"
style="filter: transform-origin: 50% 50% 0px;">
<g>
<c:choose>
<c:when test="${dust.pm25value<=15}"><path fill="#099d6e"
d="M47.165,51.322H16.834c-7.142,0-12.952-5.81-12.952-12.952c0-6.042,4.264-11.29,10.076-12.615 c-0.025-0.298-0.036-0.584-0.036-0.861c0-6.736,5.479-12.216,12.215-12.216c4.756,0,8.986,2.697,11.01,6.941 c5.152-0.822,9.957,1.677,12.398,6.033c6.063,1.131,10.571,6.503,10.571,12.718C60.117,45.513,54.308,51.322,47.165,51.322z"></path>
</c:when>
<c:when test="${dust.pm25value<=35}"><path fill="#fbde3d"
d="M47.165,51.322H16.834c-7.142,0-12.952-5.81-12.952-12.952c0-6.042,4.264-11.29,10.076-12.615 c-0.025-0.298-0.036-0.584-0.036-0.861c0-6.736,5.479-12.216,12.215-12.216c4.756,0,8.986,2.697,11.01,6.941 c5.152-0.822,9.957,1.677,12.398,6.033c6.063,1.131,10.571,6.503,10.571,12.718C60.117,45.513,54.308,51.322,47.165,51.322z"></path>
</c:when>
<c:when test="${dust.pm25value<=75}"><path fill="#fb9c3d"
d="M47.165,51.322H16.834c-7.142,0-12.952-5.81-12.952-12.952c0-6.042,4.264-11.29,10.076-12.615 c-0.025-0.298-0.036-0.584-0.036-0.861c0-6.736,5.479-12.216,12.215-12.216c4.756,0,8.986,2.697,11.01,6.941 c5.152-0.822,9.957,1.677,12.398,6.033c6.063,1.131,10.571,6.503,10.571,12.718C60.117,45.513,54.308,51.322,47.165,51.322z"></path>
</c:when>
<c:when test="${dust.pm25value>=76}"><path fill="#cb0b3d"
d="M47.165,51.322H16.834c-7.142,0-12.952-5.81-12.952-12.952c0-6.042,4.264-11.29,10.076-12.615 c-0.025-0.298-0.036-0.584-0.036-0.861c0-6.736,5.479-12.216,12.215-12.216c4.756,0,8.986,2.697,11.01,6.941 c5.152-0.822,9.957,1.677,12.398,6.033c6.063,1.131,10.571,6.503,10.571,12.718C60.117,45.513,54.308,51.322,47.165,51.322z"></path>
</c:when>
<%-- </c:choose> --%>
</c:choose>
<text text-anchor="middle" font-family="serif"
font-size="12" y="42" x="32" fill="#ffffff">${dust.stationname}</hr5>
</g>
</svg>
</div>
</td>
</c:forEach>
<tr>
<td>PM<sub>2.5</sub></td>
<c:forEach items="${airqualityInfo}" var="dust"><td>
<pm10box style="">${dust.pm25value}</pm10box>
</td></c:forEach>
</tr>
<tr>
<td>PM<sub>10</sub></td>
<c:forEach items="${airqualityInfo}" var="dust"><td>
<c:choose>
<c:when test="${dust.pm10value<=30}"><pm10box style="background-color:#099d6e;">${dust.pm10value}</pm10box></c:when>
<c:when test="${dust.pm10value<=80}"><pm10box style="background-color:#fbde3d;">${dust.pm10value}</pm10box></c:when>
<c:when test="${dust.pm10value<=150}"><pm10box style="background-color:#fb9c3d;">${dust.pm10value}</pm10box></c:when>
<c:when test="${dust.pm10value>=151}"><pm10box style="background-color:#cb0b3d;">${dust.pm10value}</pm10box></c:when>
<%-- </c:choose> --%>
</c:choose>
</td></c:forEach>
</tr>
<c:forEach items="${airqualityInfo}" var="dust">
</c:forEach>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 미세먼지 끝 -->
</body>
</html>한 화면에서 모든 측정소의 데이터를 보여줄 수 있도록 하였고요 ~
미세먼지 수치에 따라서 구름의 색이 변하도록 하였습니다.
포스팅 후기나 프로젝트 후기는 1편에서 확인 가능합니다. 감사합니다 ~ (✿◠‿◠)
'coding > Java' 카테고리의 다른 글
| [JAVA/자바] 자바 설치 및 환경 변수 설정 / 환경변수란 ? (0) | 2024.08.01 |
|---|---|
| [JAVA/자바] 백준 2557번 Hello World (0) | 2024.05.11 |
| 웹서비스 백엔드 개발자 과정 수료 후기 - 7 (API/미세먼지B) (0) | 2023.02.09 |
| 웹서비스 백엔드 개발자 과정 수료 후기 - 6 (API/미세먼지A) (0) | 2023.02.06 |
| 웹서비스 백엔드 개발자 과정 수료 후기 - 5 (게시판/FAQ B) (0) | 2023.02.05 |
