비행 Simulation(검색 수정)

src/components/analysis/simulation/AnalysimuationInfo.js

@@ -0,0 +1,64 @@
+import moment from 'moment';
+import { useEffect } from 'react';
+
+
+export const AnalysimuationInfo = props => {
+    useEffect(()=>{
+    //console.log(props.data);
+    },[props.data])
+    return(
+    <div className='layer-content drone-list'>
+        {props.count === 0 ? (
+            <div className='no-dataTable'>표시할 데이터가 없습니다.</div>
+        ) : (
+            props.data?.map(item => {
+                // console.log(
+                //   item.idntfNum,
+                //   ':::',
+                //   item.idntfNum.indexOf(props.filterId)
+                // );
+                // console.log(item.idntfNum.indexOf(props.filterId));
+                if (item.idntfNum && item.idntfNum.indexOf(props.searchText) != -1) {
+                    return (
+                        <div
+                            className='layer-content-list'
+                            onClick={() => props.handlerDetail(item.cntrlId)}
+                            key={Math.random()}
+                        >
+                            <dl>
+                                <dt>
+                                    <div className='list-left-txt'>식별번호</div>
+                                    <div className='list-right-txt'>{item.idntfNum}</div>
+                                </dt>
+                                <dt>
+                                    <div className='list-left-txt'>일자</div>
+                                    <div className='list-right-txt'>
+                                        {moment(item.cntrlStDt).format('YYYY년MM월DD일')}
+                                    </div>
+                                </dt>
+                                <dt>
+                                    <div className='list-left-txt'>시작 위치</div>
+                                    <div className='list-right-txt'>{item.stArea}</div>
+                                </dt>
+                                <dt>
+                                    <div className='list-left-txt'>시작/종료 시간</div>
+                                    <div className='list-right-txt'>
+                                        {moment(item.cntrlStDt).format('HH:mm')}
+                                        {'  '}/{'  '}
+                                        {moment(item.cntrlEndDt).format('HH:mm')}
+                                    </div>
+                                </dt>
+                                {/* <dt>
+                    <div className='list-left-txt'>총 비행거리/시간</div>
+                    <div className='list-right-txt'>ddd</div>
+                  </dt> */}
+                            </dl>
+                        </div>
+                    );
+                }
+            })
+        )}
+    </div>
+    )
+}
+

src/components/analysis/simulation/AnalysisSimulationReport.js

@@ -1,13 +1,17 @@
 import moment from 'moment';
-import React from 'react';
+import { useState } from 'react';
 import { Calendar, X } from 'react-feather';
 import Flatpickr from 'react-flatpickr';
 import { Button, Input, InputGroup } from 'reactstrap';
 
 export const AnalysisSimulationReport = props => {
   // console.log(props.params);
+  const [filterId, setFilterId] = useState('');
+
+
+
   return (
-    <div className='left-layer'>
+    
       <div className='layer-content'>
         <div className='layer-ti'>
           <h4>비행 Simulation</h4>
@@ -26,6 +30,7 @@ export const AnalysisSimulationReport = props => {
           <div>
             <div className='d-flex align-items-center calendar-flat'>
               <Flatpickr
+              placeholder='날짜를 선택해주세요'
                 options={{
                   mode: 'range',
                   defaultDate: [props.params.stDate, props.params.endDate]
@@ -41,71 +46,18 @@ export const AnalysisSimulationReport = props => {
               <Input
                 type='text'
                 placeholder='식별번호를 입력하세요'
-                value={props.filterId}
+                value={filterId}
-                onChange={e => props.setFilterId(`${e.target.value}`)}
+                onChange={e => setFilterId(`${e.target.value}`)}
               />
             </InputGroup>
           </div>
           <div>
-            <Button color='primary' onClick={props.handlerSearch} size='sm'>
+            <Button color='primary' onClick={()=>props.handlerSearch(filterId)} size='sm'>
               검색
             </Button>
           </div>
         </div>
       </div>
-      <div className='layer-content drone-list'>
+
-        {props.count === 0 ? (
-          <div className='no-dataTable'>표시할 데이터가 없습니다.</div>
-        ) : (
-          props.data?.map(item => {
-            // console.log(item);
-            // console.log(
-            //   item.idntfNum,
-            //   ':::',
-            //   item.idntfNum.indexOf(props.filterId)
-            // );
-            // console.log(item.idntfNum.indexOf(props.filterId));
-            if (item.idntfNum && item.idntfNum.indexOf(props.filterId) != -1) {
-              return (
-                <div
-                  className='layer-content-list'
-                  onClick={() => props.handlerDetail(item.cntrlId)}
-                  key={Math.random()}
-                >
-                  <dl>
-                    <dt>
-                      <div className='list-left-txt'>식별번호</div>
-                      <div className='list-right-txt'>{item.idntfNum}</div>
-                    </dt>
-                    <dt>
-                      <div className='list-left-txt'>일자</div>
-                      <div className='list-right-txt'>
-                        {moment(item.cntrlStDt).format('YYYY년MM월DD일')}
-                      </div>
-                    </dt>
-                    <dt>
-                      <div className='list-left-txt'>시작 위치</div>
-                      <div className='list-right-txt'>{item.stArea}</div>
-                    </dt>
-                    <dt>
-                      <div className='list-left-txt'>시작/종료 시간</div>
-                      <div className='list-right-txt'>
-                        {moment(item.cntrlStDt).format('HH:mm')}
-                        {'  '}/{'  '}
-                        {moment(item.cntrlEndDt).format('HH:mm')}
-                      </div>
-                    </dt>
-                    {/* <dt>
-                    <div className='list-left-txt'>총 비행거리/시간</div>
-                    <div className='list-right-txt'>ddd</div>
-                  </dt> */}
-                  </dl>
-                </div>
-              );
-            }
-          })
-        )}
-      </div>
-    </div>
   );
 };

src/containers/analysis/simulator/AnalysisSimulationContainer.js

@@ -4,12 +4,12 @@ import { useDispatch, useSelector } from 'react-redux';
 import { AnalysisSimulationDetail } from '../../../components/analysis/simulation/AnalysisSimulationDetail';
 import { AnalysisSimulationMenu } from '../../../components/analysis/simulation/AnalysisSimulationMenu';
 import { AnalysisSimulationReport } from '../../../components/analysis/simulation/AnalysisSimulationReport';
+import { AnalysimuationInfo } from '../../../components/analysis/simulation/AnalysimuationInfo'
 import { NMap } from '../../../components/map/nhn/NMap';
 import { NMapMarker } from '../../../components/map/nhn/NMapMarker';
 import { NMapPolyline } from '../../../components/map/nhn/NMapPolyline';
 import * as Actions from '../../../modules/analysis/simulation/actions/analysisSimulatorAction';
 import * as Action from '../../../modules/account/login/actions/authAction';
-
 export const AnalysisSimulationContainer = props => {
   const { list, count, detail, searchParams, log, stcsList, stcsCount } =
     useSelector(state => state.analysisSimulatorState);
@@ -32,6 +32,8 @@ export const AnalysisSimulationContainer = props => {
 
   const [sliderCount, setSliderCount] = useState(0);
 
+  const [searchText, setSearchText] = useState('');
+
   let playCount = 0;
 
   const [sliderVal, setSliderVal] = useState({
@@ -41,7 +43,6 @@ export const AnalysisSimulationContainer = props => {
 
   const dispatch = useDispatch();
 
-  const [filterId, setFilterId] = useState('');
 
   const [params, setParams] = useState({
     stDate: moment().subtract(1, 'day').format('YYYY-MM-DD'),
@@ -80,11 +81,11 @@ export const AnalysisSimulationContainer = props => {
         setParams({
           stDate: searchParams.stDate,
           endDate: searchParams.endDate,
-          search1: searchParams.search1
+          search1: filterId
         });
       }
 
-      handlerSearch();
+//handlerSearch();
     }
   }, [oepnReportList]);
 
@@ -96,7 +97,7 @@ export const AnalysisSimulationContainer = props => {
         setTimeCd(moment(log[playCount]?.srvrRcvDt).format('HH:mm'));
       }
 
-     // console.log('sliderCount>>>>', sliderCount);
+      // console.log('sliderCount>>>>', sliderCount);
     }
   }, [sliderCount]);
 
@@ -123,8 +124,10 @@ export const AnalysisSimulationContainer = props => {
     // console.log('minDate :::', minDate, 'maxDate :: ', maxDate);
   }, [log]);
 
-  const handlerSearch = () => {
+  const handlerSearch = (search1) => {
-    dispatch(Actions.list.request({ searchParams: params }));
+    setSearchText(search1)
+
+    dispatch(Actions.list.request({ searchParams: {...params, search1} }));
   };
 
   const handlerDetailSearch = id => {
@@ -175,22 +178,25 @@ export const AnalysisSimulationContainer = props => {
         <NMap setMapObject={setMapObject} />
       </div>
 
-      <AnalysisSimulationMenu 
+      <AnalysisSimulationMenu
-      setOpenReportList={setOpenReportList}
+        setOpenReportList={setOpenReportList}
-      handlerLogout = {handlerLogout} />
+        handlerLogout={handlerLogout} />
 
       {oepnReportList ? (
-        <AnalysisSimulationReport
+         <div className='left-layer'>
-          data={list}
+          <AnalysisSimulationReport
-          count={count}
+            params={params}
-          params={params}
+            handlerInput={handlerInput}
-          filterId={filterId}
+            handlerSearch={handlerSearch}
-          handlerInput={handlerInput}
+            setOpenReportList={setOpenReportList}
-          handlerSearch={handlerSearch}
+          />
-          setOpenReportList={setOpenReportList}
+          <AnalysimuationInfo
-          handlerDetail={handlerDetail}
+            data={list}
-          setFilterId={setFilterId}
+            count={count}
-        />
+            handlerDetail={handlerDetail}
+            searchText={searchText}
+          />
+        </div>
       ) : (
         <div />
       )}