드론관제 날씨 기능 추가

src/modules/control/gp/actions/controlGpAction.ts

@@ -16,7 +16,6 @@ import {
   ControlGpArcrftWarnList,
   ControlGpWarnLogList,
   ControlweatherData,
-  ControlGpWeatherState,
   rescontrolweatherData,
   ControlGpArcrftWarnRq
 } from '../models/controlGpModel';

src/modules/control/gp/apis/controlGpApi.ts

@@ -58,7 +58,6 @@ export const controlGpApi = {
         ...rq
       }
     });
-
     return data;
   },
   checkPlanContains: async (rq: ControlGpPlanContainsRQ) => {

src/modules/control/gp/models/controlGpModel.ts

@@ -5,9 +5,9 @@ export interface ControlGpState {
   controlGroupAuthInfo: ControlGroupAuthData[] | undefined;
 }
 
-export interface ControlGpWeatherState {
+// export interface ControlGpWeatherState {
-  controlWheather: rescontrolweatherData | undefined;
+//   controlWheather: rescontrolweatherData | undefined;
-}
+// }
 
 export interface ControlGpFlightPlanState {
   controlGpFltPlanList: ControlGpFlightPlanDataList | undefined;
@@ -26,6 +26,7 @@ export interface ControlGpHisState {
 export interface ControlGpDtlState {
   controlGpDetail: ControlGpDtlData | undefined;
   controlDetail: ControlDetailData | undefined;
+  controlWheather: rescontrolweatherData | undefined;
 }
 
 // export interface ControlGroupAuthState {
@@ -195,20 +196,7 @@ export interface ControlGpArcrftWarnData {
 }
 
 export interface rescontrolweatherData {
-  resultCode: string;
+  items: [];
-  resultMsg: string;
-  numOfRows: string;
-  pageNo: string;
-  totalCount: string;
-  dataType: string;
-  baseDate: string;
-  baseTime: string;
-  fcstDate: string;
-  fcstTime: string;
-  category: string;
-  fcstValue: string;
-  nx: string;
-  ny: string;
 }
 export interface ControlGpArcrftWarnList
   extends Array<ControlGpArcrftWarnData> {}

src/modules/control/gp/reducers/controlGpReducer.ts

@@ -17,14 +17,14 @@ import {
 import {
   ControlGpWarnLogData,
   ControlDetailData,
+  rescontrolweatherData,
   ControlGpDtlState,
   ControlGpFlightPlanState,
   ControlGpLogState,
   ControlGpHisState,
   ControlGpState,
   // ControlGroupAuthState,
-  initiaResponseControlGpData,
+  initiaResponseControlGpData
-  ControlGpWeatherState
 } from '../models/controlGpModel';
 
 export const controlGpReducer = createReducer<ControlGpState, ControlGpAction>(
@@ -36,17 +36,6 @@ export const controlGpReducer = createReducer<ControlGpState, ControlGpAction>(
     draft.controlGroupAuthInfo = controlGroupAuthInfo;
   })
 );
-export const controlGpweatherReducer = createReducer<
-  ControlGpWeatherState,
-  ControlGpAction
->(initiaResponseControlGpData).handleAction(
-  controlweatherAction.success,
-  (state, action) =>
-    produce(state, draft => {
-      const data = action.payload;
-      draft.controlWheather = data;
-    })
-);
 
 export const controlGpFltPlanReducer = createReducer<
   ControlGpFlightPlanState,
@@ -115,8 +104,13 @@ export const controlGpDtlReducer = createReducer<
       const data: ControlDetailData = action.payload;
       draft.controlDetail = data;
     })
+  )
+  .handleAction(controlweatherAction.success, (state, action) =>
+    produce(state, draft => {
+      const data: rescontrolweatherData = action.payload;
+      draft.controlWheather = data;
+    })
   );
-
 // export const controlGroupAuthReducer = createReducer<
 //   ControlGroupAuthState,
 //   ControlGpAction

src/modules/control/gp/sagas/controlGpSaga.ts

@@ -119,6 +119,7 @@ function* controlGpRtDtlSaga(
     // console.log(controlGpDetail);
     yield put(
       Actions.controlGpRtDtlAction.success({
+        controlWheather: undefined,
         controlDetail: undefined,
         controlGpDetail: controlGpDetail
       })
@@ -140,12 +141,11 @@ function* controlDtlSaga(
     const lng = adress[0].lng;
 
     const rq = {
-      nx: lat,
+      nx: lat, // 위도
       ny: lng
     };
     //날씨 api 호출
     const res = yield call(controlGpApi.apiweather, rq);
-
     const { data } = yield call(controlGpApi.getDetail, controlId);
     yield put(
       Actions.controlGpDtlAction.success({
@@ -209,8 +209,12 @@ function* ControlWeatherSaga(
 ) {
   try {
     const rq = action.payload;
-    const data = yield call(controlGpApi.apiweather, rq);
+    const res = yield call(controlGpApi.apiweather, rq);
-    yield put(Actions.controlweatherAction.success(data.response.body.items));
+    yield put(
+      Actions.controlweatherAction.success({
+        items: res.response.body.items
+      })
+    );
   } catch (error) {
     yield put(Actions.controlweatherAction.failure(error));
   }

src/views/control/main/ControlMain.js

@@ -3,13 +3,14 @@ import React, { useEffect, useState } from 'react';
 import '../../../assets/css/custom.css';
 import logo from '../../../assets/images/pal_logo.png';
 
-import { Sun, Map, Bell } from 'react-feather';
+import { Sun, Map, Bell, Navigation2 } from 'react-feather';
 
 import { AiOutlinePoweroff, AiOutlineExclamation } from 'react-icons/ai';
 import { IoAlertOutline } from 'react-icons/io5';
-
 import { ReactComponent as DroneMenuIcon } from '../../../assets/images/drone_menu_icon.svg';
-
+import {
+  Card
+} from 'reactstrap';
 import ControlAlarmNotice from '../alarm/ControlAlarmNotice';
 import ControlReportList from '../report/ControlReportList';
 import ControlReportDetail from '../report/ControlReportDetail';
@@ -18,7 +19,7 @@ import ControlAlarmList from '../alarm/ControlAlarmList';
 import ControlSetting from '../setting/ControlSetting';
 import WebsocketClient from '../../../components/websocket/WebsocketClient';
 import { useDispatch, useSelector } from 'react-redux';
-
+import { controlweatherAction } from '../../../modules/control/gp/actions/controlGpAction'
 import * as Actions from '../../../modules/account/login/actions/authAction';
 import { objectUnClickAction } from '../../../modules/control/map/actions/controlMapActions';
 
@@ -26,10 +27,12 @@ const ControlMain = () => {
   const dispatch = useDispatch();
 
   const { isClickObject } = useSelector(state => state.controlMapReducer);
-  const { controlGpList } = useSelector(state => state.controlGpState);
+  const { controlGpList, controlGroupAuthInfo } = useSelector(state => state.controlGpState);
-
+  const { controlDetail, controlWheather } = useSelector(
+    state => state.controlGpDtlState
+  );
   const [alarm, setAlarm] = useState(false);
-
+  const { user } = useSelector(state => state.authState);
   const [oepnReportList, setOpenReportList] = useState(false);
   // const [openReportDetail, setOpenReportDetail] = useState(false);
   // const [openWeatherList, setOpenWeatherList] = useState(false);
@@ -92,7 +95,27 @@ const ControlMain = () => {
     setOpenReportList(true);
     dispatch(objectUnClickAction());
   };
-
+  //날씨 API 
+  const rq = {
+    nx: 37.4562557,
+    ny: 126.7052062
+  }
+  useEffect(() => {
+    dispatch(controlweatherAction.request(rq));
+  }, [])
+  function weathericon() {
+    if (controlWheather) {
+      let wheatherDetail = controlWheather.items.item;
+      let skyDetail = wheatherDetail[6].fcstValue;
+      if (skyDetail == 1 || skyDetail == 2 || skyDetail == 4) {
+        return <CloudRain size={20} />;
+      } else if (skyDetail == 4) {
+        return <CloudSnow size={20} />;
+      } else if (skyDetail == 0 || wheatherDetail[5].fcstValue == 1) {
+        return <Sun size={20} />;
+      } else return <Cloud size={20} />;
+    }
+  }
   return (
     <>
       <ControlAlarmNotice />
@@ -140,7 +163,49 @@ const ControlMain = () => {
           {/* socket_off = 클래스명 변경시 빨간색! 접속이 원할하지않을때 */}
         </ul>
       </div>
-
+      <div className={(!oepnReportList && !openAlarmList && !isClickObject) ? "main-data" : "main-data main-data-test"}>
+        <div className='main-data-box wather-data'>
+          <Card>
+            <div className='data-box-header'>
+              <span className='box-ti'>{!isClickObject ? "인천광역시" : controlDetail?.stAreaNm}</span>
+              <span className=''>{weathericon()}</span>
+            </div>
+            <div className='data-list-box'>
+              <div className='data-list'>
+                <span>기온</span>
+                <span>{!isClickObject ? controlWheather?.items.item[12].fcstValue : controlDetail?.items.item[12].fcstValue}℃</span>
+              </div>
+              <div className='data-list'>
+                <span>풍향</span>
+                <span><Navigation2 className="navigation-icon" style={{
+                  transform: !isClickObject ? `rotate(${controlWheather?.items.item[3].fcstValue}deg)` : `rotate(${controlDetail?.items.item[3].fcstValue}deg)`
+                }} /></span>
+              </div>
+              <div className='data-list'>
+                <span>풍속</span>
+                <span>{!isClickObject ? controlWheather?.items.item[4].fcstValue : controlDetail?.items.item[4].fcstValue} m/s</span>
+              </div>
+            </div>
+          </Card>
+        </div>
+        <div className='main-data-box flight-data'>
+          <Card>
+            <div className='data-box-header'>
+              <span className='box-ti'>비행중인 기체</span>
+            </div>
+            <div className='data-list-box'>
+              <div className='data-list'>
+                <span>드론</span>
+                <span>{controlGpList ? controlGpList.length : 0}</span>
+              </div>
+              <div className='data-list'>
+                <span>항공기</span>
+                <span>2147대</span>
+              </div>
+            </div>
+          </Card>
+        </div>
+      </div>
       {oepnReportList ? (
         <ControlReportList
           // openReportDetailParam={openReportDetailParam}