|
|
|
@ -1,6 +1,11 @@
|
|
|
|
|
import React, { useEffect, useState } from 'react'; |
|
|
|
|
import { TodayWeather, TomorrowWeahter, AfterTomorrowWeahter, LastwWeahter } from '../../../basis/flight/plan/TodayWeather' |
|
|
|
|
import { FlightweatherAction } from '../../../../modules/basis/flight/actions/basisFlightAction' |
|
|
|
|
import { |
|
|
|
|
TodayWeather, |
|
|
|
|
TomorrowWeahter, |
|
|
|
|
AfterTomorrowWeahter, |
|
|
|
|
LastwWeahter |
|
|
|
|
} from '../../../basis/flight/plan/TodayWeather'; |
|
|
|
|
import { FlightweatherAction } from '../../../../modules/basis/flight/actions/basisFlightAction'; |
|
|
|
|
import { |
|
|
|
|
Card, |
|
|
|
|
CardBody, |
|
|
|
@ -40,135 +45,126 @@ const FlightPlanAreaDetailForm = ({
|
|
|
|
|
isDone, |
|
|
|
|
isDisabled |
|
|
|
|
}) => { |
|
|
|
|
|
|
|
|
|
const [dayData, setdayData] = useState({}); |
|
|
|
|
|
|
|
|
|
const coordList = data ? data[0].coordList : null; |
|
|
|
|
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'); |
|
|
|
|
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) { |
|
|
|
|
let wheatherobj = {}; |
|
|
|
|
const weatherData = weather?.item; |
|
|
|
|
//오늘 날씨 필터링
|
|
|
|
|
const todayres = weatherData.filter(weatherData => weatherData.fcstDate == date); |
|
|
|
|
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 } |
|
|
|
|
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 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 } |
|
|
|
|
case 'TMP': |
|
|
|
|
case 'SKY': |
|
|
|
|
case 'VEC': |
|
|
|
|
case 'WSD': |
|
|
|
|
case 'PTY': |
|
|
|
|
return { ...todayres }; |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
//모레 날씨 필터링
|
|
|
|
|
const afterres = weatherData.filter(weatherData => weatherData.fcstDate == plus_day2); |
|
|
|
|
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 } |
|
|
|
|
case 'TMP': |
|
|
|
|
case 'SKY': |
|
|
|
|
case 'VEC': |
|
|
|
|
case 'WSD': |
|
|
|
|
case 'PTY': |
|
|
|
|
return { ...todayres }; |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
wheatherobj = { |
|
|
|
|
todayData, |
|
|
|
|
tomorrowData, |
|
|
|
|
afterData, |
|
|
|
|
} |
|
|
|
|
afterData |
|
|
|
|
}; |
|
|
|
|
setdayData({ ...wheatherobj }); |
|
|
|
|
} |
|
|
|
|
}, [weather]) |
|
|
|
|
}, [weather]); |
|
|
|
|
useEffect(() => { |
|
|
|
|
|
|
|
|
|
if (data[0]?.coordList[0].lat != 0 || data[0]?.coordList[0].lon != 0) { |
|
|
|
|
let nx = data[0]?.coordList[0].lat; |
|
|
|
|
let ny = data[0]?.coordList[0].lon; |
|
|
|
|
const rs = dfsxyconv("toXY", nx, ny); |
|
|
|
|
const rs = dfsxyconv('toXY', nx, ny); |
|
|
|
|
|
|
|
|
|
let now = new Date(); |
|
|
|
|
let hours = now.getHours(); |
|
|
|
|
let minutes = now.getMinutes(); |
|
|
|
|
let basetime = "2300"; |
|
|
|
|
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"; |
|
|
|
|
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", |
|
|
|
|
serviceKey: |
|
|
|
|
'r6RMUsk3Vtama7D6uq7MiWV9dTC9MwfIIr4%2F45y0uVNw6BaYbgpKmL%2BLUDFVTfIYUmEe4K%2FaniEjdV9mg5t82Q%3D%3D', |
|
|
|
|
numOfRows: 1000, |
|
|
|
|
pageNo: 1, |
|
|
|
|
dataType: "JSON", |
|
|
|
|
dataType: 'JSON', |
|
|
|
|
base_date: date, |
|
|
|
|
base_time: basetime, |
|
|
|
|
nx: rs.x, |
|
|
|
|
ny: rs.y, |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
nx2: nx, |
|
|
|
|
ny2: ny |
|
|
|
|
}; |
|
|
|
|
dispatch(FlightweatherAction.request(apidata)); |
|
|
|
|
} |
|
|
|
|
}, [data]) |
|
|
|
|
|
|
|
|
|
}, [data]); |
|
|
|
|
|
|
|
|
|
const [active, setActive] = useState('active'); |
|
|
|
|
const [activeTab, setActiveTab] = useState('1'); |
|
|
|
@ -402,8 +398,8 @@ const FlightPlanAreaDetailForm = ({
|
|
|
|
|
</Button.Ripple> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
{Object.keys(dayData).length != 0 && data[0]?.coordList[0].lat != 0 ? ( |
|
|
|
|
|
|
|
|
|
{Object.keys(dayData).length != 0 && |
|
|
|
|
data[0]?.coordList[0].lat != 0 ? ( |
|
|
|
|
<div className='layer-content'> |
|
|
|
|
<div className='layer-weather-box'> |
|
|
|
|
<div className='layer-weather-info'> |
|
|
|
@ -416,39 +412,56 @@ const FlightPlanAreaDetailForm = ({
|
|
|
|
|
</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> |
|
|
|
|
<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 ? |
|
|
|
|
{activeTab == 1 ? ( |
|
|
|
|
<div className='tab-content active'> |
|
|
|
|
<TodayWeather todayData={dayData.todayData} /> |
|
|
|
|
</div> |
|
|
|
|
: |
|
|
|
|
) : ( |
|
|
|
|
<></> |
|
|
|
|
} |
|
|
|
|
{activeTab == 2 ? |
|
|
|
|
)} |
|
|
|
|
{activeTab == 2 ? ( |
|
|
|
|
<div className='tab-content active'> |
|
|
|
|
<TomorrowWeahter tomorrowData={dayData.tomorrowData} /> |
|
|
|
|
<TomorrowWeahter |
|
|
|
|
tomorrowData={dayData.tomorrowData} |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
: |
|
|
|
|
) : ( |
|
|
|
|
<></> |
|
|
|
|
} |
|
|
|
|
{activeTab == 3 ? |
|
|
|
|
)} |
|
|
|
|
{activeTab == 3 ? ( |
|
|
|
|
<div className='tab-content active'> |
|
|
|
|
<AfterTomorrowWeahter afterData={dayData.afterData} /> |
|
|
|
|
<AfterTomorrowWeahter |
|
|
|
|
afterData={dayData.afterData} |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
: |
|
|
|
|
) : ( |
|
|
|
|
<></> |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
)} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
) : |
|
|
|
|
null} |
|
|
|
|
) : null} |
|
|
|
|
</CardBody> |
|
|
|
|
</Card> |
|
|
|
|
</Col> |
|
|
|
|