sanguu(박상현)
2 years ago
4 changed files with 260 additions and 226 deletions
@ -0,0 +1,215 @@ |
|||||||
|
import { |
||||||
|
TodayWeather, |
||||||
|
TomorrowWeahter, |
||||||
|
AfterTomorrowWeahter, |
||||||
|
LastwWeahter |
||||||
|
} from "../../../../components/basis/flight/plan/TodayWeather" |
||||||
|
import React, { useEffect, useState } from 'react'; |
||||||
|
import { useDispatch, useSelector } from 'react-redux'; |
||||||
|
import dfsxyconv from '../../../../utility/dfsxyconv'; |
||||||
|
import moment from 'moment'; |
||||||
|
import { |
||||||
|
Compass |
||||||
|
} from 'react-feather'; |
||||||
|
import { FlightweatherAction } from '../../../../modules/basis/flight/actions/basisFlightAction'; |
||||||
|
|
||||||
|
export function WeatherContainer({ mapAreaCoordList }) { |
||||||
|
|
||||||
|
const [dayData, setdayData] = useState({}); |
||||||
|
|
||||||
|
const dispatch = useDispatch(); |
||||||
|
const { weather } = useSelector(state => state.flightState); |
||||||
|
let now = moment(); |
||||||
|
let date = moment().format('YYYYMMDD'); |
||||||
|
let time = moment().format('HHmm'); |
||||||
|
let plus_day1 = moment().add(1, 'day').format('YYYYMMDD'); |
||||||
|
let plus_day2 = moment().add(2, 'day').format('YYYYMMDD'); |
||||||
|
useEffect(() => { |
||||||
|
if (weather?.response.body.items) { |
||||||
|
let wheatherobj = {}; |
||||||
|
const weatherData = weather.response.body.items?.item; |
||||||
|
//오늘 날씨 필터링
|
||||||
|
const todayres = weatherData.filter( |
||||||
|
weatherData => weatherData.fcstDate == date |
||||||
|
); |
||||||
|
const todayData = todayres.filter(todayres => { |
||||||
|
switch (todayres.category) { |
||||||
|
case 'TMP': |
||||||
|
case 'SKY': |
||||||
|
case 'VEC': |
||||||
|
case 'WSD': |
||||||
|
case 'PTY': |
||||||
|
return { ...todayres }; |
||||||
|
} |
||||||
|
}); |
||||||
|
//내일 날씨 필터링todayres.category == ("TMP" || "SKY" || "VEC" || "WSD" || "PTY")
|
||||||
|
const tomorrowres = weatherData.filter( |
||||||
|
weatherData => weatherData.fcstDate == plus_day1 |
||||||
|
); |
||||||
|
const tomorrowData = tomorrowres.filter(tomorrowres => { |
||||||
|
switch (tomorrowres.category) { |
||||||
|
case 'TMP': |
||||||
|
case 'SKY': |
||||||
|
case 'VEC': |
||||||
|
case 'WSD': |
||||||
|
case 'PTY': |
||||||
|
return { ...todayres }; |
||||||
|
} |
||||||
|
}); |
||||||
|
//모레 날씨 필터링
|
||||||
|
const afterres = weatherData.filter( |
||||||
|
weatherData => weatherData.fcstDate == plus_day2 |
||||||
|
); |
||||||
|
const afterData = afterres.filter(afterres => { |
||||||
|
switch (afterres.category) { |
||||||
|
case 'TMP': |
||||||
|
case 'SKY': |
||||||
|
case 'VEC': |
||||||
|
case 'WSD': |
||||||
|
case 'PTY': |
||||||
|
return { ...todayres }; |
||||||
|
} |
||||||
|
}); |
||||||
|
wheatherobj = { |
||||||
|
todayData, |
||||||
|
tomorrowData, |
||||||
|
afterData |
||||||
|
}; |
||||||
|
setdayData({ ...wheatherobj }); |
||||||
|
} |
||||||
|
}, [weather]); |
||||||
|
useEffect(() => { |
||||||
|
if (mapAreaCoordList[0]?.coordList[0].lat != 0 || mapAreaCoordList[0]?.coordList[0].lon != 0) { |
||||||
|
let nx = mapAreaCoordList[0]?.coordList[0].lat; |
||||||
|
let ny = mapAreaCoordList[0]?.coordList[0].lon; |
||||||
|
const rs = dfsxyconv('toXY', nx, ny); |
||||||
|
|
||||||
|
let now = new Date(); |
||||||
|
let hours = now.getHours(); |
||||||
|
let minutes = now.getMinutes(); |
||||||
|
let basetime = '2300'; |
||||||
|
|
||||||
|
if (hours >= 2 && minutes > 9 && hours <= 5) { |
||||||
|
basetime = '0200'; |
||||||
|
} else if (hours >= 5 && minutes > 9 && hours < 8) { |
||||||
|
basetime = '0500'; |
||||||
|
} else if (hours <= 8 && minutes < 10) { |
||||||
|
basetime = '0500'; |
||||||
|
} else if (hours >= 8 && minutes > 9 && hours < 11) { |
||||||
|
basetime = '0800'; |
||||||
|
} else if (hours <= 11 && minutes < 10) { |
||||||
|
basetime = '0800'; |
||||||
|
} else if (hours >= 11 && minutes > 9 && hours < 14) { |
||||||
|
basetime = '1100'; |
||||||
|
} else if (hours <= 14 && minutes < 10) { |
||||||
|
basetime = '1100'; |
||||||
|
} else if (hours >= 14 && minutes > 9 && hours < 17) { |
||||||
|
basetime = '1400'; |
||||||
|
} else if (hours <= 17 && minutes < 10) { |
||||||
|
basetime = '1400'; |
||||||
|
} else if (hours >= 17 && minutes > 9 && hours < 20) { |
||||||
|
basetime = '1700'; |
||||||
|
} else if (hours <= 20 && minutes < 10) { |
||||||
|
basetime = '1700'; |
||||||
|
} else if (hours >= 20 && minutes > 9 && hours < 23) { |
||||||
|
basetime = '2000'; |
||||||
|
} else if (hours <= 23 && minutes < 10) { |
||||||
|
basetime = '2000'; |
||||||
|
} else basetime = '2300'; |
||||||
|
|
||||||
|
const apidata = { |
||||||
|
serviceKey: |
||||||
|
'r6RMUsk3Vtama7D6uq7MiWV9dTC9MwfIIr4%2F45y0uVNw6BaYbgpKmL%2BLUDFVTfIYUmEe4K%2FaniEjdV9mg5t82Q%3D%3D', |
||||||
|
numOfRows: 1000, |
||||||
|
pageNo: 1, |
||||||
|
dataType: 'JSON', |
||||||
|
base_date: date, |
||||||
|
base_time: basetime, |
||||||
|
nx: rs.x, |
||||||
|
ny: rs.y, |
||||||
|
nx2: nx, |
||||||
|
ny2: ny |
||||||
|
}; |
||||||
|
dispatch(FlightweatherAction.request(apidata)); |
||||||
|
} |
||||||
|
}, [mapAreaCoordList]); |
||||||
|
|
||||||
|
|
||||||
|
const [active, setActive] = useState('active'); |
||||||
|
const [activeTab, setActiveTab] = useState('1'); |
||||||
|
const toggle = tab => { |
||||||
|
return setActiveTab(tab); |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
|
||||||
|
|
||||||
|
<div className='layer-content'> |
||||||
|
{Object.keys(dayData).length != 0 && |
||||||
|
mapAreaCoordList[0]?.coordList[0].lat != 0 ? ( |
||||||
|
<div className='layer-weather-box'> |
||||||
|
<div className='layer-weather-info'> |
||||||
|
<div className='layer-weather-table'> |
||||||
|
<div className='layer-weather-address'> |
||||||
|
검색하신 지역의 날씨 정보입니다. |
||||||
|
<span> |
||||||
|
<Compass size={20} /> {weather.area1 != undefined ? |
||||||
|
`${weather.area1} ${weather.area2} ${weather.area3} ${weather.landNum}` : `선택하신 좌표는 없는 주소입니다.`} |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div className='tab-menu'> |
||||||
|
<ul> |
||||||
|
<li |
||||||
|
className={activeTab == 1 ? `active` : ''} |
||||||
|
onClick={() => toggle('1')} |
||||||
|
> |
||||||
|
오늘 |
||||||
|
</li> |
||||||
|
<li |
||||||
|
className={activeTab == 2 ? `active` : ''} |
||||||
|
onClick={() => toggle('2')} |
||||||
|
> |
||||||
|
내일 |
||||||
|
</li> |
||||||
|
<li |
||||||
|
className={activeTab == 3 ? `active` : ''} |
||||||
|
onClick={() => toggle('3')} |
||||||
|
> |
||||||
|
모레 |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
{activeTab == 1 ? ( |
||||||
|
<div className='tab-content active'> |
||||||
|
<TodayWeather todayData={dayData.todayData} /> |
||||||
|
</div> |
||||||
|
) : ( |
||||||
|
<></> |
||||||
|
)} |
||||||
|
{activeTab == 2 ? ( |
||||||
|
<div className='tab-content active'> |
||||||
|
<TomorrowWeahter |
||||||
|
tomorrowData={dayData.tomorrowData} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
) : ( |
||||||
|
<></> |
||||||
|
)} |
||||||
|
{activeTab == 3 ? ( |
||||||
|
<div className='tab-content active'> |
||||||
|
<AfterTomorrowWeahter |
||||||
|
afterData={dayData.afterData} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
) : ( |
||||||
|
<></> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) : null} |
||||||
|
</div> |
||||||
|
|
||||||
|
) |
||||||
|
} |
||||||
|
export default WeatherContainer; |
||||||
Loading…
Reference in new issue