|
|
@@ -51,15 +51,20 @@
|
|
|
<div>
|
|
|
<div>지역</div>
|
|
|
<select id="region">
|
|
|
- <option value="all" selected>전체</option>
|
|
|
+ <option value="ALL" selected>전체</option>
|
|
|
+ <c:if test="${fn:length(center) != 0}">
|
|
|
+ <c:forEach var="item" items="${center}">
|
|
|
+ <option value="${item.centerId}">${item.centerNm}</option>
|
|
|
+ </c:forEach>
|
|
|
+ </c:if>
|
|
|
</select>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <div>검색시작일</div>
|
|
|
+ <div>검색시작</div>
|
|
|
<input type="date" id="start" autocomplete="false"/><input type="time" id="start_time">
|
|
|
</div>
|
|
|
<div>
|
|
|
- <div>검색종료일</div>
|
|
|
+ <div>검색종료</div>
|
|
|
<input type="date" id="end" autocomplete="false" /><input type="time" id="end_time">
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -82,7 +87,14 @@
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
- <div></div>
|
|
|
+ <div class="play-box">
|
|
|
+ <div>
|
|
|
+ <div>시뮬레이션 재생/멈춤</div>
|
|
|
+ <img id="play" onclick="playSimulation()" src="/images/play.png" alt="시뮬레이션 재생버튼" width="24px">
|
|
|
+ <img id="pause" onclick="pauseSimulation()" src="/images/pause.png" alt="시뮬레이션 멈춤버튼" width="24px">
|
|
|
+ <img id="stop" onclick="stopSimulation()" src="/images/stop.png" alt="시뮬레이션 초기화버튼" width="24px">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div class="treeLoading"><img src="/css/themes/classic/throbber.gif"/></div>
|
|
|
</div>
|
|
|
<script type="text/javascript" src="${contextRoot }/js/common/moment.js"></script>
|
|
|
@@ -116,6 +128,10 @@
|
|
|
const $startTime = $('#start_time');
|
|
|
const $end = $('#end');
|
|
|
const $endTime = $('#end_time');
|
|
|
+ var _historyMap = new Map();
|
|
|
+
|
|
|
+ var interval = null;
|
|
|
+ var cnt = 0;
|
|
|
|
|
|
$start.val(getDateToStr(new Date()));
|
|
|
$end.val(getDateToStr(new Date()));
|
|
|
@@ -668,19 +684,29 @@
|
|
|
$('.searchBox').css('display', 'flex');
|
|
|
$('.historyBox').css('display', 'none');
|
|
|
$('.leftMenu .evp-cur').hide();
|
|
|
+ $('.evp_legend', parent.document).hide();
|
|
|
+ unsetEvpCurr();
|
|
|
+
|
|
|
+ if (_historyMap && _historyMap.size) {
|
|
|
+ _historyMap.forEach((obj)=> {if (obj.get('draw')) obj.get('draw').clear()});
|
|
|
+ _historyMap.clear();
|
|
|
+ $('.history-table tr.on').removeClass('on');
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function unsetEvpCurr() {
|
|
|
if (window.parent._EmergencyMap && window.parent._EmergencyMap.size) {
|
|
|
window.parent._EmergencyMap.forEach((obj)=> obj.clear());
|
|
|
window.parent._EmergencyMap.clear();
|
|
|
$('.evp-table tr.on').removeClass('on');
|
|
|
window.parent._isClick = null;
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
|
|
|
function goEvpMenu() {
|
|
|
$('.tabs > li').eq(1).addClass('on');
|
|
|
$('.tabs > li').eq(0).removeClass('on');
|
|
|
-
|
|
|
+ $('.evp_legend', parent.document).show();
|
|
|
// $('.treeLoading').show();
|
|
|
$('#historyList').show();
|
|
|
$('#intTree').hide();
|
|
|
@@ -690,7 +716,230 @@
|
|
|
}
|
|
|
|
|
|
function searchHistoryData() {
|
|
|
+ const $region = $('#region');
|
|
|
+ const regionVal = $region.val();
|
|
|
+ const startVal = $start.val();
|
|
|
+ const endVal = $end.val();
|
|
|
+ const startTimeVal = $startTime.val();
|
|
|
+ const endTimeVal = $endTime.val();
|
|
|
+ if (!startVal) {
|
|
|
+ alert('검색시작 년월일을 입력해주세요');
|
|
|
+ return $start.focus();
|
|
|
+ }
|
|
|
+ if (!startTimeVal) {
|
|
|
+ alert('검색시작 시간을 입력해주세요');
|
|
|
+ return $startTime.focus();
|
|
|
+ }
|
|
|
+ if (!endVal) {
|
|
|
+ alert('검색종료 년월일을 입력해주세요');
|
|
|
+ return $end.focus();
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!endTimeVal) {
|
|
|
+ alert('검색종료 시간을 입력해주세요');
|
|
|
+ return $endTime.focus();
|
|
|
+ }
|
|
|
+
|
|
|
+ const param = {
|
|
|
+ start : startVal + ' ' + startTimeVal + ':00',
|
|
|
+ end : endVal + ' ' + endTimeVal + ':59',
|
|
|
+ region : regionVal
|
|
|
+ }
|
|
|
+ if (param.start > param.end) {
|
|
|
+ alert('검색시작 일시가 종료 일시 보다 큽니다.');
|
|
|
+ return $end.focus();
|
|
|
+ }
|
|
|
+ window.parent.requestService('getEvpHistory.do', param, (rec)=>{
|
|
|
+ const $historyTable = $('.history-table');
|
|
|
+ let str = '<tr><td colspan="3" class="empty-history">조회된 내용이 없습니다.</td></tr>'
|
|
|
+ _historyMap.clear();
|
|
|
+ if (rec && rec.length) {
|
|
|
+ str = '';
|
|
|
+ for (let history of rec) {
|
|
|
+ _historyMap.set(history.service_id, new Map());
|
|
|
+ const {event_list, phase_list} = history;
|
|
|
+
|
|
|
+ const dateMap = new Map();
|
|
|
+ if (event_list.length && phase_list.length) {
|
|
|
+ event_list.forEach((eventObj)=>{
|
|
|
+ dateMap.set(eventObj.clct_dt, new Map());
|
|
|
+ dateMap.get(eventObj.clct_dt).set('event', eventObj);
|
|
|
+ dateMap.get(eventObj.clct_dt).set('sig', []);
|
|
|
+ });
|
|
|
+
|
|
|
+ phase_list.forEach((obj)=>{
|
|
|
+ if (!dateMap.get(obj.clct_dt)) {
|
|
|
+ dateMap.set(obj.clct_dt, new Map());
|
|
|
+ dateMap.get(obj.clct_dt).set('event', null);
|
|
|
+ dateMap.get(obj.clct_dt).set('sig', []);
|
|
|
+ }
|
|
|
+ dateMap.get(obj.clct_dt).get('sig').push(obj);
|
|
|
+ });
|
|
|
+
|
|
|
+ if (dateMap.size) {
|
|
|
+ history.event_list = [];
|
|
|
+ history.phase_list = [];
|
|
|
+ const dateArr = Array.from(dateMap.keys()).sort();
|
|
|
+ let beforeSig;
|
|
|
+ let beforeEvent;
|
|
|
+
|
|
|
+ for (let date of dateArr) {
|
|
|
+ const objMap = dateMap.get(date);
|
|
|
+ if (objMap.get('event') === null && beforeEvent === undefined) {
|
|
|
+ beforeEvent = event_list[0];
|
|
|
+ }
|
|
|
+ else if (objMap.get('event')){
|
|
|
+ beforeEvent = objMap.get('event');
|
|
|
+ }
|
|
|
+ beforeEvent.clct_dt = date;
|
|
|
+
|
|
|
+ if (objMap.get('sig').length === 0 && beforeSig === undefined) {
|
|
|
+ beforeSig = dateMap.get(phase_list[0].clct_dt).get('sig');
|
|
|
+ }
|
|
|
+ else if (objMap.get('sig').length) {
|
|
|
+ beforeSig = objMap.get('sig');
|
|
|
+ }
|
|
|
+
|
|
|
+ beforeSig.forEach((obj)=>{
|
|
|
+ obj.clct_dt = date;
|
|
|
+ })
|
|
|
+
|
|
|
+ history.event_list.push(beforeEvent);
|
|
|
+ history.phase_list.push(beforeSig);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ _historyMap.get(history.service_id).set('obj', history);
|
|
|
+ _historyMap.get(history.service_id).set('draw', null);
|
|
|
+ str += `<tr class="hs_\${history.service_id}" onclick="drawHistory('\${history.service_id}')"><td>\${history.clct_dt}</td><td>\${history.service_id}</td><td>\${history.service_nm}</td></tr>`;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ $historyTable.html(str);
|
|
|
+ }, true);
|
|
|
+ }
|
|
|
+
|
|
|
+ function drawHistory(serviceId) {
|
|
|
+ unsetEvpCurr();
|
|
|
+ if (_historyMap.size) {
|
|
|
+ _historyMap.forEach((obj, key)=>{
|
|
|
+ const beforeDraw = obj.get('draw');
|
|
|
+ if (beforeDraw && serviceId !== key) {
|
|
|
+ beforeDraw.clear();
|
|
|
+ obj.set('draw', null);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (_historyMap.get(serviceId).get('draw')) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ if (interval) {
|
|
|
+ clearInterval(interval);
|
|
|
+ interval = null;
|
|
|
+ cnt = 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const obj = _historyMap.get(serviceId).get('obj');
|
|
|
+ $('#historyList tr.on').removeClass('on');
|
|
|
+ $('.hs_' + serviceId).addClass('on');
|
|
|
+ const drawObj = {...obj};
|
|
|
+ const {event_list, phase_list} = obj;
|
|
|
+
|
|
|
+ if (event_list && event_list.length) drawObj.event_list = [drawObj.event_list[0]];
|
|
|
+ if (phase_list && phase_list.length) drawObj.phase_list = phase_list[0];
|
|
|
+
|
|
|
+ const draw = window.parent.drawHistory(drawObj);
|
|
|
+ _historyMap.get(serviceId).set('draw', draw);
|
|
|
+ imageOnOff('play', true);
|
|
|
+ imageOnOff('stop', false);
|
|
|
+ imageOnOff('pause', false);
|
|
|
+ }
|
|
|
+
|
|
|
+ function imageOnOff(name, isOn) {
|
|
|
+ const el = $('#' + name);
|
|
|
+ const eventName = isOn ? 'addClass' : 'removeClass';
|
|
|
+ el[eventName]('on');
|
|
|
+
|
|
|
+ if (el.attr('src') === getImageName(name, !isOn)) {
|
|
|
+ el.attr('src', getImageName(name, isOn));
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function getImageName(name, isOn) {
|
|
|
+ let imgName = '/images/' + name;
|
|
|
+ const onName = '_on';
|
|
|
+ const extName = '.png';
|
|
|
+ if (isOn) {
|
|
|
+ imgName += onName;
|
|
|
+ }
|
|
|
+ return imgName + extName;
|
|
|
+ }
|
|
|
+
|
|
|
+ function playSimulation() {
|
|
|
+ if (!$('#play').hasClass('on')) return;
|
|
|
+
|
|
|
+ const serviceId = $('.history-table tr.on').attr('class').replace(/hs_| on/gi, '');
|
|
|
+ let evp = _historyMap.get(serviceId);
|
|
|
+ let obj = evp.get('obj');
|
|
|
+ let draw = evp.get('draw');
|
|
|
+ if (!draw) {
|
|
|
+ drawHistory(serviceId);
|
|
|
+ draw = evp.get('draw');
|
|
|
+ }
|
|
|
+
|
|
|
+ const { event_list, phase_list } = obj;
|
|
|
+ imageOnOff('stop', true);
|
|
|
+ imageOnOff('pause', true);
|
|
|
+ imageOnOff('play', false);
|
|
|
+ interval = setInterval(()=>{
|
|
|
+ const position = window.parent.getKakaoPosition(event_list[cnt].cur_lat, event_list[cnt].cur_lng);
|
|
|
+ draw.car.moveMarker(position);
|
|
|
+ phase_list[cnt].forEach((sigObj)=>{
|
|
|
+ const evpSig = draw.sig.get(sigObj.service_id + '_' + sigObj.seq_no);
|
|
|
+ if (evpSig === undefined) {
|
|
|
+ draw.sig.set(sigObj.service_id + '_' + sigObj.seq_no, window.parent.createSig(sigObj));
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ if (!evpSig.a_ring && !evpSig.b_ring) {
|
|
|
+ evpSig.createRing(sigObj);
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ const {a_head_lat, a_head_lng, a_mid_lat, a_mid_lng, a_end_lat, a_end_lng,
|
|
|
+ b_head_lat, b_head_lng, b_mid_lat, b_mid_lng, b_end_lat, b_end_lng} = sigObj;
|
|
|
+ const aPosition = [
|
|
|
+ window.parent.getKakaoPosition(a_head_lat, a_head_lng),
|
|
|
+ window.parent.getKakaoPosition(a_mid_lat, a_mid_lng),
|
|
|
+ window.parent.getKakaoPosition(a_end_lat, a_end_lng),
|
|
|
+ ]
|
|
|
+ const bPosition = [
|
|
|
+ window.parent.getKakaoPosition(b_head_lat, b_head_lng),
|
|
|
+ window.parent.getKakaoPosition(b_mid_lat, b_mid_lng),
|
|
|
+ window.parent.getKakaoPosition(b_end_lat, b_end_lng),
|
|
|
+ ]
|
|
|
+
|
|
|
+ // console.log(aPosition, bPosition);
|
|
|
+ evpSig.a_ring.setPath(aPosition);
|
|
|
+ evpSig.b_ring.setPath(bPosition);
|
|
|
+ }
|
|
|
+ evpSig.setState(sigObj.state);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ cnt++;
|
|
|
+ }, 500);
|
|
|
+ }
|
|
|
+
|
|
|
+ function pauseSimulation() {
|
|
|
+ clearInterval(interval);
|
|
|
+ imageOnOff('pause', false);
|
|
|
+ imageOnOff('play', true);
|
|
|
+ }
|
|
|
|
|
|
+ function stopSimulation() {
|
|
|
+ clearInterval(interval);
|
|
|
+ imageOnOff('stop', false);
|
|
|
+ imageOnOff('pause', false);
|
|
|
+ cnt = 0;
|
|
|
}
|
|
|
</script>
|
|
|
</body>
|
