diff --git a/src/components/account/login/AccountLogin.js b/src/components/account/login/AccountLogin.js index dc633d4..4a5a801 100644 --- a/src/components/account/login/AccountLogin.js +++ b/src/components/account/login/AccountLogin.js @@ -86,6 +86,9 @@ export const AccountLogin = ({ props }) => { useEffect(() => { if (isLogin) { props.history.push('/'); + + // LANCC 화면으로 이동 + // props.history.push('/control'); } }, [isLogin]); return ( diff --git a/src/components/analysis/simulation/AnalysisSimulationDetail.js b/src/components/analysis/simulation/AnalysisSimulationDetail.js index e7685fd..35aa6e8 100644 --- a/src/components/analysis/simulation/AnalysisSimulationDetail.js +++ b/src/components/analysis/simulation/AnalysisSimulationDetail.js @@ -184,9 +184,10 @@ export const AnalysisSimulationDetail = props => {
diff --git a/src/components/analysis/simulation/AnalysisSimulatorSlider.js b/src/components/analysis/simulation/AnalysisSimulatorSlider.js index f7f8ef3..87b643a 100644 --- a/src/components/analysis/simulation/AnalysisSimulatorSlider.js +++ b/src/components/analysis/simulation/AnalysisSimulatorSlider.js @@ -5,7 +5,8 @@ const AnalysisSimulatorSlider = ({ direction, count, playCount, - setSliderCount + setSliderCount, + countArray }) => { // hh:mm 형식으로 바꿔주는 코드 function convertToTimeFormat(number) { @@ -48,7 +49,8 @@ const AnalysisSimulatorSlider = ({ pips: { mode: 'range', // stepped: true, - density: 3 + density: 3, + values: countArray }, onChange: e => { function timeStringToMinutes(timeString) { diff --git a/src/components/map/nhn/NMapMarker.js b/src/components/map/nhn/NMapMarker.js index 36b0593..5cc6c3c 100644 --- a/src/components/map/nhn/NMapMarker.js +++ b/src/components/map/nhn/NMapMarker.js @@ -35,24 +35,23 @@ export const NMapMarker = props => { }, [props.data]); useEffect(() => { - if (props.selMarker && props.selMarker) { - // props.selMarker?.setPosition(position); - if (props.isPlay) { - if (props.marker) { - // 기존 마커 삭제 - props.marker.remove(); - } - // 매 초마다 드론 위치 변경 - const movemarker = new mapboxgl.Marker(el) - .setLngLat([ - props.data[props.info.playCount]?.lon, - props.data[props.info.playCount]?.lat - ]) - .addTo(props.map); - props.setMarker(movemarker); + // props.selMarker?.setPosition(position); + + if (props.isPlay) { + if (props.marker) { + // 기존 마커 삭제 + props.marker.remove(); } - // moveMarkers(props.selMarker, position); + // 매 초마다 드론 위치 변경 + const movemarker = new mapboxgl.Marker(el) + .setLngLat([ + props.data[props.info.playCount]?.lon, + props.data[props.info.playCount]?.lat + ]) + .addTo(props.map); + props.setMarker(movemarker); } + // moveMarkers(props.selMarker, position); }, [props.info]); useEffect(() => {}, [props.isPlay]); diff --git a/src/components/map/nhn/NMapPolyline.js b/src/components/map/nhn/NMapPolyline.js index f02e309..4192c8f 100644 --- a/src/components/map/nhn/NMapPolyline.js +++ b/src/components/map/nhn/NMapPolyline.js @@ -13,27 +13,23 @@ export const NMapPolyline = props => { if (props.selPolyline && props.selPolyline.setMap) { props.selPolyline.setMap(null); } - if (props.info && props.data) { - setCurrent(props.info.cntrlId); - setCheck(true); - if (props.info.cntrlId) { - if (props.map.getLayer('route')) { - props.map.removeLayer('route'); - props.map.removeSource('route'); + if (props.data) { + if (props.map.getLayer('route')) { + props.map.removeLayer('route'); + props.map.removeSource('route'); + + // props.map.remove(); + } // - // props.map.remove(); - } - setCheck(false); - } addPolyline(); } }, [props.data]); const addPolyline = () => { - if (check) { - return; - } + // if (check) { + // return; + // } if (props.data && props.map) { props.data.forEach(item => { diff --git a/src/containers/analysis/simulator/AnalysisSimulationContainer.js b/src/containers/analysis/simulator/AnalysisSimulationContainer.js index 781cdd5..3e6408c 100644 --- a/src/containers/analysis/simulator/AnalysisSimulationContainer.js +++ b/src/containers/analysis/simulator/AnalysisSimulationContainer.js @@ -11,7 +11,9 @@ 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'; import MapBoxMap from '../../../components/map/mapbox/MapBoxMap'; + let playCount = 0; +let playCounts = 0; export const AnalysisSimulationContainer = props => { const { list, count, detail, searchParams, log, stcsList, stcsCount, page } = @@ -48,6 +50,9 @@ export const AnalysisSimulationContainer = props => { const dispatch = useDispatch(); + const [dronLength, setDronLength] = useState(0); + + const [countArray, setCountArray] = useState([]); const [params, setParams] = useState({ stDate: moment().subtract(1, 'day').format('YYYY-MM-DD'), endDate: moment().subtract(-1, 'day').format('YYYY-MM-DD'), @@ -57,18 +62,34 @@ export const AnalysisSimulationContainer = props => { // 시뮬레이션 타이머 useEffect(() => { if (isPlay) { - const timer = setInterval(() => { - setInfo({ ...log[playCount], playCount: playCount }); - if (log[playCount]?.srvrRcvDt) { - setTimeCd(moment(log[playCount]?.srvrRcvDt).format('HH:mm')); - } + const countCheck = log.map(item => + moment(item?.srvrRcvDt).diff(moment(log[0]?.srvrRcvDt), 'seconds') + ); + setCountArray(countCheck); - playCount++; + const timer = setInterval(() => { if (playCount == log.length) { playCount = 0; clearInterval(timer); setIsPlay(false); } + setInfo({ ...log[playCount], playCount, playCounts }); + if (log[playCount]?.srvrRcvDt) { + setTimeCd(moment(log[playCount]?.srvrRcvDt).format('HH:mm')); + } + + playCounts = moment(log[playCount]?.srvrRcvDt).diff( + moment(log[0]?.srvrRcvDt), + 'seconds' + ); + + setDronLength( + moment(log[log.length - 1]?.srvrRcvDt).diff( + moment(log[0]?.srvrRcvDt), + 'seconds' + ) + ); + playCount++; }, 1000); return () => clearInterval(timer); @@ -77,7 +98,7 @@ export const AnalysisSimulationContainer = props => { useEffect(() => { if (isPlay) { - setInfo({ ...log[playCount], playCount: playCount }); + setInfo({ ...log[playCount], playCount, playCounts }); setIsPlay(false); } }, [stcsList]); @@ -95,8 +116,23 @@ export const AnalysisSimulationContainer = props => { }, [oepnReportList]); useEffect(() => { if (sliderCount && sliderCount > 0) { - playCount = sliderCount; - setInfo({ ...log[playCount], playCount: playCount }); + let benear = countArray[0]; + let minimum = Math.abs(sliderCount - benear); + let index = 0; + + for (let i = 1; i < countArray.length; i++) { + const currentValue = countArray[i]; + const value = Math.abs(sliderCount - currentValue); + + if (value < minimum) { + benear = currentValue; + minimum = value; + index = i; + } + } + + playCount = index; + setInfo({ ...log[playCount], playCount, playCounts }); if (log[playCount]?.srvrRcvDt) { setTimeCd(moment(log[playCount]?.srvrRcvDt).format('HH:mm')); } @@ -105,6 +141,7 @@ export const AnalysisSimulationContainer = props => { useEffect(() => { playCount = 0; + playCounts = 0; if (log) { setInfo({ ...log[playCount], playCount: 0 }); } @@ -238,6 +275,8 @@ export const AnalysisSimulationContainer = props => { setSliderCount={setSliderCount} handlerDetailClose={handlerDetailClose} setOpenReportList={handlerOpenReportList} + dronLength={dronLength} + countArray={countArray} /> ) { try { const id = action.payload; const res = yield call(Apis.analysisSimulator.detail, id); - yield put(Actions.log.request(id)); + // yield put(Actions.log.request(id)); const { data } = res; yield put( Actions.detail.success({ @@ -45,7 +45,7 @@ function* stcsSaga(action: ActionType) { try { const id = action.payload; const res = yield call(Apis.analysisSimulator.stcsList, id); - yield put(Actions.log.request(id)); + // yield put(Actions.log.request(id)); const { data, count } = res; yield put( Actions.stcs.success({