|
|
|
@ -1,17 +1,19 @@
|
|
|
|
|
import moment from 'moment'; |
|
|
|
|
import { useEffect, useState, useRef, useCallback } from 'react'; |
|
|
|
|
import { useSelector } from 'react-redux'; |
|
|
|
|
import { Spinner } from 'reactstrap'; |
|
|
|
|
|
|
|
|
|
export const AnalysimuationInfo = props => { |
|
|
|
|
const [target, setTarget] = useState(null); |
|
|
|
|
const [isLoading, setIsLoding] = useState(false); |
|
|
|
|
const bottomObserver = useRef(null); |
|
|
|
|
|
|
|
|
|
const { loading } = useSelector(state => state.loadingReducer); |
|
|
|
|
|
|
|
|
|
const onIntersect = useCallback( |
|
|
|
|
([entry], observer) => { |
|
|
|
|
if (entry.isIntersecting) { |
|
|
|
|
props.handlerPageList(); |
|
|
|
|
// 데이터를 가져오는 부분
|
|
|
|
|
if (props.data?.filter(i => i === undefined).length <= 0) { |
|
|
|
|
props.handlerPageList(); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
[props.handlerPageList] |
|
|
|
@ -20,11 +22,10 @@ export const AnalysimuationInfo = props => {
|
|
|
|
|
useEffect(() => { |
|
|
|
|
let observer; |
|
|
|
|
if (target) { |
|
|
|
|
// callback 함수, option
|
|
|
|
|
observer = new IntersectionObserver(onIntersect, { |
|
|
|
|
threshold: 0.4 |
|
|
|
|
}); |
|
|
|
|
observer.observe(target); // 타겟 엘리먼트 지정
|
|
|
|
|
observer.observe(target); |
|
|
|
|
} |
|
|
|
|
return () => observer && observer.disconnect(); |
|
|
|
|
}, [target, props.handlerPageList]); |
|
|
|
@ -35,51 +36,66 @@ export const AnalysimuationInfo = props => {
|
|
|
|
|
<div className='no-dataTable'>표시할 데이터가 없습니다.</div> |
|
|
|
|
) : ( |
|
|
|
|
<> |
|
|
|
|
{props.data?.map(item => { |
|
|
|
|
// item.idntfNum,
|
|
|
|
|
// ':::',
|
|
|
|
|
// item.idntfNum.indexOf(props.filterId)
|
|
|
|
|
// );
|
|
|
|
|
{props.data |
|
|
|
|
?.filter(i => i !== undefined) |
|
|
|
|
.map(item => { |
|
|
|
|
// item.idntfNum,
|
|
|
|
|
// ':::',
|
|
|
|
|
// item.idntfNum.indexOf(props.filterId)
|
|
|
|
|
// );
|
|
|
|
|
|
|
|
|
|
if (item.idntfNum) { |
|
|
|
|
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> |
|
|
|
|
if (item.idntfNum) { |
|
|
|
|
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> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
})} |
|
|
|
|
</dl> |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
})} |
|
|
|
|
{loading && ( |
|
|
|
|
<div |
|
|
|
|
style={{ |
|
|
|
|
display: 'flex', |
|
|
|
|
justifyContent: 'center', |
|
|
|
|
flexDirection: 'column', |
|
|
|
|
alignItems: 'center' |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<Spinner color='primary' /> |
|
|
|
|
<span>Loading...</span> |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
<div ref={setTarget} /> |
|
|
|
|
</> |
|
|
|
|
)} |
|
|
|
|