diff --git a/src/components/analysis/simulation/AnalysisSimulatorSlider.js b/src/components/analysis/simulation/AnalysisSimulatorSlider.js
index b26f7964..79b157a9 100644
--- a/src/components/analysis/simulation/AnalysisSimulatorSlider.js
+++ b/src/components/analysis/simulation/AnalysisSimulatorSlider.js
@@ -8,21 +8,22 @@ const AnalysisSimulatorSlider = ({
setSliderCount,
countArray
}) => {
- // hh:mm 형식으로 바꿔주는 코드
- function convertToTimeFormat(number) {
- // 시간과 분 계산
- const hours = Math.floor(number / 60);
- const minutes = Math.floor(number % 60);
+ const convertToTimeFormat = number => {
+ // 시간, 분, 초 계산
+ const hours = Math.floor(number / 3600);
+ const minutes = Math.floor((number % 3600) / 60);
+ const seconds = Math.floor(number % 60);
// 2자리 숫자로 포맷팅
const formattedHours = String(hours).padStart(2, '0');
const formattedMinutes = String(minutes).padStart(2, '0');
+ const formattedSeconds = String(seconds).padStart(2, '0');
// 시간 문자열 생성
- const timeString = `${formattedHours}:${formattedMinutes}`;
+ const timeString = `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
return timeString;
- }
+ };
// 슬라이더 값이 바뀔 때마다 실행되는 함수
const colorOptions = {
@@ -55,9 +56,10 @@ const AnalysisSimulatorSlider = ({
},
onChange: e => {
function timeStringToMinutes(timeString) {
- const [hours, minutes] = timeString.split(':').map(Number);
- const totalMinutes = hours * 60 + minutes;
- return totalMinutes.toString();
+ const [hours, minutes, seconds] = timeString.split(':').map(Number);
+ const totalSeconds = hours * 3600 + minutes * 60 + seconds;
+
+ return totalSeconds.toString();
}
setSliderCount(e.map(timeStringToMinutes));
diff --git a/src/containers/analysis/simulator/AnalysisSimulationContainer.js b/src/containers/analysis/simulator/AnalysisSimulationContainer.js
index 8befd73e..0160766a 100644
--- a/src/containers/analysis/simulator/AnalysisSimulationContainer.js
+++ b/src/containers/analysis/simulator/AnalysisSimulationContainer.js
@@ -1,5 +1,5 @@
import moment from 'moment';
-import { useEffect, useState, useCallback } from 'react';
+import { useEffect, useState, useCallback, useRef } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { AnalysisSimulationDetail } from '../../../components/analysis/simulation/AnalysisSimulationDetail';
import { AnalysisSimulationMenu } from '../../../components/analysis/simulation/AnalysisSimulationMenu';
@@ -61,6 +61,14 @@ export const AnalysisSimulationContainer = props => {
minVal: 0
});
+ // 재생 속도 배속
+ const [speed, setSpeed] = useState(1000);
+
+ const [currentSpeed, setCurrentSpeed] = useState(1000);
+
+ // 타이머 Ref 전역
+ const timerRef = useRef(null);
+
const dispatch = useDispatch();
// 드론 갯수
@@ -82,38 +90,49 @@ export const AnalysisSimulationContainer = props => {
);
setCountArray(countCheck);
- 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'));
- }
+ timer(isPlay, log);
+
+ if (speed !== currentSpeed) {
+ clearInterval(timerRef.currnet);
+ setCurrentSpeed(speed);
+ }
+ return () => clearInterval(timerRef.current);
+ }
+ }, [isPlay, log, speed]);
+
+ // 타이머 로직 함수
+ const timer = (isPlay, log) => {
+ timerRef.current = setInterval(() => {
+ if (playCount == log.length) {
+ playCount = 0;
+ clearInterval(timerRef.current);
+ 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'
+ );
- playCounts = moment(log[playCount]?.srvrRcvDt).diff(
+ setDronLength(
+ moment(log[log.length - 1]?.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);
- }
- }, [isPlay, log]);
+ )
+ );
+ playCount++;
+ }, speed);
+ };
- //
+ // 새 리스트 선택시 초기화
useEffect(() => {
if (isPlay) {
+ setSpeed(1000);
+ setCurrentSpeed(1000);
setInfo({ ...log[playCount], playCount, playCounts });
setIsPlay(false);
}
@@ -165,23 +184,6 @@ export const AnalysisSimulationContainer = props => {
if (log) {
setInfo({ ...log[playCount], playCount: 0 });
}
-
- // let arrDate = log?.map(date => {
- // const dateval = date.srvrRcvDt;
- // if (dateval) {
- // return Number(moment(dateval).format('DDHHmmss'));
- // } else {
- // return 0;
- // }
- // });
- // setSliderVal({
- // minVal: Math.min.apply(null, arrDate),
- // maxVal: Math.max.apply(null, arrDate)
- // });
- // let maxDate = log.map(date => {
- // return Math.max(date.srvrRcvDt);
- // });
- // let maxDate;
}, [log]);
// 검색 헨들러
@@ -305,6 +307,8 @@ export const AnalysisSimulationContainer = props => {
setOpenReportList={handlerOpenReportList}
dronLength={dronLength}
countArray={countArray}
+ setSpeed={setSpeed}
+ speed={speed}
/>