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