File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="grid2_8">
<div :class="['slide-content left', { active: showSlide }]">
<div class="wrap flex-between">
<div class="search">
<div class="search-mobile" v-if="currentSection === 'search-mobile'">
<h2>조건검색</h2>
<div class="box grid gap05 bg-gray">
<div class="titleBar">
<h3>지역설정</h3>
<hr />
</div>
<DongSelectList @setDongCd="setDongCd" :crslk_azHiddenCk="true" :open_layers="this.$refs.open_layers"
@siDoGunGuSelectF="dongSelectF" @dongSelectF="dongSelectF" @nodeSelectF="dongSelectF" ref="dongSelecter">
</DongSelectList>
</div>
<div class="box">
<div class="titleBar">
<h3>조건 설정</h3>
<hr />
</div>
<div class="flex-between m-b">
<div><input class="m-r cbox_1" type="checkbox" v-model="condition['wtrms']" /><label for="">무단횡단</label>
</div>
<div><input class="m-r cbox_1" type="checkbox" v-model="condition['signExtn']" /><label
for="">신호연장</label></div>
<div><input class="m-r cbox_1" type="checkbox" v-model="condition['rittrnVhcle']" /><label
for="">신호위반</label></div>
<div><input class="m-r cbox_1" type="checkbox" v-model="condition['eqpmnTrobl']" /><label
for="">장애발생</label></div>
</div>
<!--
<div class="grid3_7 m-b">
<label for="date-input">일자</label>
<input class="date-input" id="date-input" type="date" v-model="condition['date']" />
</div>
<div class="grid3_7 m-b3">
<label for="time-input">시간대</label>
<div class="flex-between gap">
<input
class="time-input"
id="time-input"
type="time"
v-model="condition['start_time']"
/>~<input
class="time-input"
id="time-input"
type="time"
v-model="condition['end_time']"
/>
</div>
</div> -->
<button class="btn-l gr-btn search-btn" @click="statusSearch()" style="padding: 0.5rem 0">
검색하기
</button>
</div>
</div>
<div class="live-mobile" v-if="currentSection === 'live-mobile'">
<h2>실시간 발생 현황</h2>
<div class="box bg-white tab-buttons" style="height: calc(100% - 50rem)">
<div class="btn_set flex-center gap">
<button class="m-r flex-between gray-btn" v-for="tab in tabs" :key="tab.id"
:class="{ active: activeTab === tab.id }" @click="changeTab(tab.id)">
{{ tab.title }}
<img v-if="tab.id === 2 && troubleOccurrenceStatusList.length > 0"
src="../../../resources/images/warning.png" alt="" />
</button>
</div>
<div class="ulbox">
<div class="tab-content" v-for="tab in tabs" :key="tab.id" v-show="activeTab === tab.id">
<ul v-show="tab.content1">
<li v-for="(item, idx) in situationOccurrenceStatusList" :key="idx">
<p class="" style="color: #9bbb8d; ">상황명: {{ item.sn }}</p>
<p class="" style="color: #474747; font-size: 14px;"><img
src="../../../resources/images/icon/map.png" alt=""> {{ item.node_name }} {{ item.crslk_az
}}쪽횡단보도
</p>
<p class="m-b" style="color: #767677; font-size: 13px;">발생일시: {{ item.ocrn_dt }}</p>
</li>
</ul>
<ul v-show="tab.content2">
<li v-for="(item, idx) in troubleOccurrenceStatusList" :key=idx @click="troblCcrnLocation(item)">
<p class="m-b" style="color: #9bbb8d; ">장애명: {{ item.trobl_nm }}</p>
<p class="m-b" style="color: #474747; font-size: 14px;"><img
src="../../../resources/images/icon/map.png" alt=""> {{ item.node_name }} {{ item.crslk_az
}}쪽횡단보도 </p>
<p class="m-b">발생일시: {{ item.ocrn_dt }}</p>
<p class="m-b">담당자: {{ item.mngr_nm }}</p>
<p class="m-b">연락처: {{ item.mngr_telno }}</p>
<p class="">복구여부: {{ item.recovery_yn }}</p>
</li>
</ul>
</div>
</div>
<div v-for="tab in tabs" :key="tab.id" v-show="activeTab === tab.id">
<PaginationButton v-show="tab.content1" v-if="situationOccurrenceStatusListCount > 0"
v-model:currentPage="situationOccurrenceStatusListSearch.currentPage"
:per-page="situationOccurrenceStatusListSearch.perPage"
:total-count="situationOccurrenceStatusListCount" :max-range="5"
:click="situationOccurrenceStatusSearch" />
<PaginationButton v-show="tab.content2" v-if="troubleOccurrenceStatusListCount > 0"
v-model:currentPage="troubleOccurrenceStatusListSearch.currentPage"
:per-page="troubleOccurrenceStatusListSearch.perPage" :total-count="troubleOccurrenceStatusListCount"
:max-range="5" :click="troubleOccurrenceStatusSearch" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="right">
<div class="top" v-if="currentSection === 'top'">
<ul class="flex-end">
<li>
<p class="flex-center gap">
<img class="m-r" src="../../../resources/images/icon/scumulativenumberofpedestrians.png" alt />금일 보행자
</p>
<h3>
<em class="green2 m-r">{{ comma(statusControlCountList.pdstrnCount) }}</em>명
</h3>
</li>
<li class="br"></li>
<li>
<p class="flex-center gap">
<img class="m-r" src="../../../resources/images/icon/scumulativenumberofpedestrians.png" alt />금일 무단횡단 발생
</p>
<h3>
<em class="green2 m-r">{{ comma(statusControlCountList.wtrmsCount) }}</em>회
</h3>
</li>
<li class="br"></li>
<li>
<p class="flex-center gap">
<img class="m-r" src="../../../resources/images/icon/Numberofsignalextensionstoday.png" alt />금일 신호연장 발생
</p>
<h3>
<em class="green2 m-r">{{ comma(statusControlCountList.signExtnCount) }}</em>회
</h3>
</li>
<li class="br"></li>
<li>
<p class="flex-center gap">
<img class="m-r" src="../../../resources/images/icon/Numberofsignalextensionstoday.png" alt />금일 신호연장 시간
</p>
<h3>
<em class="green2 m-r">{{ comma(statusControlCountList.signExtnTime) }}</em>초
</h3>
</li>
<li class="br"></li>
<li>
<p class="flex-center gap">
<img class="m-r" src="../../../resources/images/icon/Numberofsignalviolationstoday.png" alt />금일 차량 신호위반 발생
</p>
<h3>
<em class="green2 m-r">{{ comma(statusControlCountList.rittrnVioltVhcleCount) }}</em>회
</h3>
</li>
<li class="br"></li>
<li>
<p class="flex-center gap">
<img class="m-r" src="../../../resources/images/icon/Numberofsignalviolationstoday.png" alt />금일 장애 발생
</p>
<h3>
<em class="green2 m-r">{{ comma(statusControlCountList.troblOcrnCount) }}</em>회
</h3>
</li>
</ul>
</div>
<OpenLayers ref="open_layers" />
<!-- Popup container -->
<div v-if="isPopupVisible" class="popup-container">
<!-- Popup content -->
<div class="popup-content">
<!-- Add your popup content here -->
<h2>{{ popupStatus.type }} 발생</h2>
<ul>
<li>
<p class="m-b">발생일시: {{ popupStatus.ocrn_dt }}</p>
<p class="">발생장소: {{ popupStatus.crslk_nm }} 횡단보도</p>
</li>
</ul>
<button @click="hidePopup(popupStatus.node_id)" class="s-btn gr-btn">확인</button>
</div>
</div>
</div>
<div class="chart grid gap" v-if="currentSection === 'chart'">
<div class="bg-white2 b-r b-shadow">
<h2 style="font-size: 1.3rem">
금일 횡단보도 별 무단횡단 발생 건수 (상위10개소)
</h2>
<div class="box">
<div style="width: 100%; height: 100%" id="chartdivWrap1">
<div ref="chartdiv1" id="chartdiv1" style="width: 100%; height: 90%"></div>
</div>
</div>
</div>
<div class="bg-white2 b-r b-shadow">
<h2 style="font-size: 1.3rem">
금일 횡단보도 별 신호연장 발생 건수 (상위10개소)
</h2>
<div class="box">
<div style="width: 100%; height: 100%" id="chartdivWrap2">
<div ref="chartdiv2" id="chartdiv2" style="width: 100%; height: 90%"></div>
</div>
</div>
</div>
<div class="bg-white2 b-r b-shadow">
<h2 style="font-size: 1.3rem">
금일 횡단보도 별 우회전 위반 발생 건수 (상위5개소)
</h2>
<div class="box">
<div style="width: 100%; height: 100%" id="chartdivWrap3">
<div ref="chartdiv3" id="chartdiv3" style="width: 100%; height: 90%"></div>
</div>
</div>
</div>
<div class="bg-white2 b-r b-shadow">
<h2 style="font-size: 1.3rem">
금일 횡단보도 별 장비장애 발생 건수 (상위5개소)
</h2>
<div class="box">
<div style="width: 100%; height: 100%" id="chartdivWrap4">
<div ref="chartdiv4" id="chartdiv4" style="width: 100%; height: 90%"></div>
</div>
</div>
</div>
</div>
<div class="mobile-nav">
<ul>
<li><a href="javascript:void(0);" class="search-btn" @click="toggleSection('search-mobile')"><i
class="fa-solid fa-magnifying-glass"></i>조회하기</a></li>
<li><a href="javascript:void(0);" class="live-btn" @click="toggleSection('live-mobile')"><i
class="fa-solid fa-location-dot"></i>발생현황</a></li>
<li><a href="javascript:void(0);" class="top-btn" @click="toggleSection('top')"><i
class="fa-solid fa-calendar"></i>금일현황 발생수</a></li>
<li><a href="javascript:void(0);" class="chart-btn" @click="toggleSection('chart')"><i
class="fa-solid fa-chart-simple"></i>상황발생별 순위</a></li>
</ul>
</div>
<!-- 팝업 -->
<div class="modal-wrap" v-if="modal_event_detail_list == true">
<div class="modal-bg"></div>
<div class="modal_base">
<h2>
<span>{{ eventListSearch.eventType }} 발생 정보</span>
<button type="button" class="gray-btn modal_base_close" @click="modal_event_detail_list = false">
<img src="../../../resources/images/close.png" alt="" />
</button>
</h2>
<div class="modal_base_body">
<div class="de_Search">
<!--<table class="troubleTable">
<tbody>
<tr>
<th>검색</th>
<td colspan="7" >
<select name="" id="">
<option value="">검색조건</option>
<option value="">이름</option>
<option value="">소속정보</option>
</select>
<input type="text" placeholder="검색어를 입력 해주세요." style="width: 76%;" />
<button type="button" class="green-btn" style="margin-left: 5px;padding: 5px;width: 10rem; float: right;" >검색</button>
</td>
</tr>
</tbody>
</table>-->
</div>
<table>
<thead>
<tr>
<td>동이름</td>
<td>횡단보도명</td>
<td>상황명</td>
<td>발생시간</td>
</tr>
</thead>
<tbody>
<tr v-for="(item, idx) in eventList" :key="idx">
<td data-title="교차로명">{{ item.dong_nm }}</td>
<td data-title="횡단보도명"> {{ item.crslk_nm }} 쪽횡단보도</td>
<td data-title="상황명">{{ item.type }}</td>
<td data-title="발생시간">{{ item.ocrn_dt }}</td>
</tr>
<tr>
<td class="exception" colspan="4" v-if="eventList.length < 1">조회된 데이터가 없습니다</td>
</tr>
</tbody>
</table>
<PaginationButton v-model:currentPage="eventListSearch.currentPage" :per-page="eventListSearch.perPage"
:total-count="eventListCount" :max-range="5" :click="eventSelectList" />
</div>
<div class="modal_base_bottom gap">
<button type="button" class="btn-2 gray-btn wrem_10 mrg_5p" @click="modal_event_detail_list = false">닫기</button>
</div>
</div>
</div>
</div>
</template>
<script>
import OpenLayers from "../../component/OpenLayers_dev.vue";
import {
vworldBaseLayer,
vworldGrayLayer,
vworldMidnightLayer,
vworldHybridLayer,
vworldSatelliteLayer,
} from "../../component/OpenLayersMap.vue";
import COMMON_CHART from "../../common/common.js";
import Overlay from "ol/Overlay"
import { baseStyles } from "../../component/OpenLayersStyle.vue";
import axios from "axios";
import DongSelectList from "../../component/dongSelectList.vue";
import PaginationButton from "../../component/pagination/PaginationButton.vue";
import COMMON_UTIL from '../../../resources/js/commonUtil.ts';
export default {
data() {
return {
currentSection: 'null',
address: {
},
troubleOccurrenceStatusListSearch: {
currentPage: 1,
perPage: 10,
orderByType: 'DESC',
},
situationOccurrenceStatusListSearch: {
currentPage: 1,
perPage: 10,
orderByType: 'DESC',
},
eventListSearch: {
currentPage: 1,
perPage: 10,
startDate: null,
endDate: null,
eventType: null,
sigungu_cd: null,
dong_cd: null,
dong_dong_cd: null,
node_id: null,
crslk_az: null
},
situationOccurrenceStatusList: [],
situationOccurrenceStatusListCount: 0,
troubleOccurrenceStatusList: [],
troubleOccurrenceStatusListCount: 0,
eventListCount: 0,
eventList: [],
eventIdx: 0,
isPopupVisible: false,
showSlide: false,
slideText: "검색하기",
address: {},
//조건설정
condition: {
//체크박스
signExtn: true,
wtrms: true,
rittrnVhcle: true,
eqpmnTrobl: true,
//일자
date: null,
start_date: null,
end_date: null,
//시간대
start_time: null,
end_time: null,
// 신규데이터 비교 시간대
currentTimestamp: null,
popuptitle: "무단횡단 발생목록"
},
ck: true,
tabs: [
{
id: 1,
title: "상황발생현황",
content1: "This is the content for Tab 1",
},
{
id: 2,
title: "장애발생현황",
content2: "This is the content for Tab 2",
},
],
activeTab: 1,
activeTab2: 1,
chart1: {},
chart2: {},
chart3: {},
chart4: {},
chartData: {
wtrms: [],
signExtn: [],
rittrnVioltVhcle: [],
troblOcrn: [],
},
data1: [],
statusControlCountList: {
pdstrnCount: 0,
wtrmsCount: 0,
signExtnCount: 0,
signExtnTime: 0,
rittrnVioltVhcleCount: 0,
troblOcrnCount: 0,
},
// 실시간 발생 이벤트
popupStatus: {
node_id: '',
crslk_az: '',
ocrn_dt: '',
type: ''
},
// 실시간 발생 이벤트 리스트
realTimeEventList: [],
// 이벤트 발생 체크
eventFlage: false,
// 이벤트 상세보기 팝업
modal_event_detail_list: false,
// 타이머 관리
timer: {}
};
},
components: {
PaginationButton: PaginationButton,
OpenLayers: OpenLayers,
DongSelectList: DongSelectList,
},
methods: {
// 휠 이벤트
childWheel(coordinate) {
},
//DongSelectList에서 dong_cd 받아오기
setDongCd(value) {
this.address = value;
},
childMoveEnd(zoom) {
// console.log("zoom zoomzoom: ", zoom);
if (this.now_zoom >= 18.6 && zoom < 18.6) {
this.address.node_id = null;
this.statusSearch(false);
}
this.now_zoom = zoom;
},
// 실시간 발생 토클?
toggleSlide() {
if (this.showSlide) {
this.slideText = "검색하기";
} else {
this.slideText = "창닫기";
}
this.showSlide = !this.showSlide;
},
dongSelectF: function (event) {
},
//지역 및 조건 설정 안에 있는 횡단보도의 위치와 횟수의 합
changeTab(tabId) {
this.activeTab = tabId;
},
showPopup() {
this.isPopupVisible = true;
},
hidePopup(node_id) {
this.isPopupVisible = false;
},
// 팝업 상세
openDetailPopup(type) {
let vm = this;
vm.eventListSearch.currentPage = 1;
vm.eventListSearch.startDate = vm.condition.date + ' ' + vm.condition.start_time;
vm.eventListSearch.endDate = vm.condition.date + ' ' + vm.condition.end_time;
// 무단횡단
if (type == 'c1') {
vm.eventListSearch.eventType = '무단횡단';
// 신호연장
} else if (type == 'c2') {
vm.eventListSearch.eventType = '신호연장';
// 차량위반
} else if (type == 'c3') {
vm.eventListSearch.eventType = '우회전신호위반';
// 장비발생
} else if (type == 'c4') {
vm.eventListSearch.eventType = '장비장애';
}
if (type != 'c4') {
const vm = this;
axios({
url: "/statusControl/eventSelectList.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: vm.eventListSearch,
})
.then(function (response) {
vm.eventListCount = response.data.eventListCount;
vm.eventList = response.data.eventList;
vm.eventIdx = response.data.eventListCount - (vm.eventListSearch.currentPage - 1) * vm.eventListSearch.perPage;
vm.modal_event_detail_list = true;
})
.catch(function (error) {
alert("상황발생 목록 조회 오류, 관리자에게 문의해주세요.");
});
}
},
// 마우스 클릭
childClick: function (prop, coordinate, layerCk, map) {
var vm = this;
if (layerCk == true) {
if (prop[0] != null && prop[0].layerName != 'multiPolygonLayer') {
if (prop[0].layerName === 'dong') {
//this.address.dong_dong_cd = prop[0].id_;
//this.address.dong_cd =prop[0].id_;
vm.eventListSearch.dong_cd = prop[0].id_;
} else if (prop[0].layerName === 'node') {
//this.address.node_id = prop[0].id_;
vm.eventListSearch.node_id = prop[0].id_;
}
this.createPopup(coordinate, prop[0]);
}
}
},
// 장애 팝업
createErrorPopup: function (item) {
var vm = this;
vm.$refs.open_layers.map.removeOverlay(vm.$refs.open_layers.map.getOverlayById('multiPopup'));
let element = document.createElement("div");
element.classList.add('ol-popup');
// 검색창 떠있는 동안은 자동 리프레쉬 멈춤
var html = "";
html = "<div style='transform: translate(0%, 0%) translate(-150px,-230px);'>"
+ " <table class='map_multi_popup' >"
+ " <thead>"
+ " <td colspan='4' class='fon'> <span > " + item.node_name + "_" + item.crslk_az + "측 획단보도 장애정보 <a id='popup-closer' class='ol-popup-closer' style='float: right;'>X </a> </span></td>"
+ " </thead>"
+ " <tbody>"
+ " <tr>"
+ " <th colspan='3'>장애명</th>"
+ " <td >" + item.trobl_nm + "</td>"
+ " </tr>"
+ " <tr>"
+ " <th colspan='3'>담당자</th>"
+ " <td >" + item.mngr_nm + "</td>"
+ " </tr>"
+ " <tr>"
+ " <th colspan='3'>연락처</th>"
+ " <td >" + item.mngr_telno + "</td>"
+ " </tr>"
+ " <tr>"
+ " <th colspan='3'>이메일</th>"
+ " <td >" + item.mngr_eml + "</td>"
+ " </tr>"
+ " <tr>"
+ " <th colspan='3'>소속정보</th>"
+ " <td >" + item.mngr_ogdp_info + "</td>"
+ " </tr>"
+ "<tr>"
+ " <th colspan='5'><button class='map_multi_popup_move_button' id='close'>닫기</button></th>"
+ " </tr>"
+ " </tbody>"
+ " </table>"
+ " </div>";
+ " </tbody>"
+ " </table>"
+ " </div>";
element.innerHTML = html;
element.style.display = 'block';
// OverLay 생성
let overlay = new Overlay({
id: 'multiPopup',
element: element, // 생성한 DIV
autoPan: true,
className: "multiPopup",
autoPanMargin: 100,
autoPanAnimation: {
duration: 400
}
});
//오버레이의 위치 저장
var geom = JSON.parse(item.geom.value);
// console.log(geom);
overlay.setPosition(geom.coordinates);
//지도에 추가
this.$refs.open_layers.map.addOverlay(overlay);
// 해당 DIV 다켓방법
let oElem = overlay.getElement();
oElem.addEventListener('click', function (e) {
var target = e.target;
if (target.className == "ol-popup-closer" || target.className == 'map_multi_popup_move_button') {
//선택한 OverLayer 삭제
vm.$refs.open_layers.map.removeOverlay(vm.$refs.open_layers.map.getOverlayById('multiPopup'));
vm.timer = setInterval(() => {
vm.statusSearch(false);
}, 5000)
}
});
},
// 정보 팝업
createPopup: function (coordinate, prop) {
var vm = this;
vm.$refs.open_layers.map.removeOverlay(vm.$refs.open_layers.map.getOverlayById('multiPopup'));
let element = document.createElement("div");
element.classList.add('ol-popup');
// 검색창 떠있는 동안은 자동 리프레쉬 멈춤
clearInterval(this.timer);
var html = "";
html = "<div style='transform: translate(0%, 0%) translate(-150px,-190px);'>"
+ " <table class='map_multi_popup' >"
+ " <thead>"
+ " <td colspan='5' class='fon'> <span > " + prop.values_.name + " <a id='popup-closer' class='ol-popup-closer' style='float: right;'>X </a> </span></td>"
+ " </thead>"
+ " <tbody>"
+ " <tr>"
+ " <th colspan='3'>무단횡단 발생</th>"
+ " <td >" + prop.values_.crosng_cnt + "</td>"
+ " <td ><button class='map_multi_popup_button' id='c1' >상세</button></td>"
+ " </tr>"
+ " <tr>"
+ " <th colspan='3'>신호연장 발생</th>"
+ " <td >" + prop.values_.extn_cnt + "</td>"
+ " <td ><button class='map_multi_popup_button' id='c2' >상세</button></td>"
+ " </tr>"
+ " <tr>"
+ " <th colspan='3'>차량위반 발생</th>"
+ " <td >" + prop.values_.law_vltn_cnt + "</td>"
+ " <td ><button class='map_multi_popup_button' id='c3' >상세</button></td>"
+ " </tr>"
+ " <tr>"
+ " <th colspan='3'>장비장애 발생</th>"
+ " <td >" + prop.values_.error_cnt + "</td>"
+ " <td ><button class='map_multi_popup_button' id='c1' >상세</button></td>"
+ " </tr>";
if (prop.layerName != 'crslk') {
html += "<tr>"
+ " <th colspan='5'><button class='map_multi_popup_move_button' id='move'>이동</button></th>"
+ " </tr>"
+ " </tbody>"
+ " </table>"
+ " </div>";
} else {
html += " </tbody>"
+ " </table>"
+ " </div>";
}
element.innerHTML = html;
element.style.display = 'block';
// OverLay 생성
let overlay = new Overlay({
id: 'multiPopup',
element: element, // 생성한 DIV
autoPan: true,
className: "multiPopup",
autoPanMargin: 100,
autoPanAnimation: {
duration: 400
}
});
//오버레이의 위치 저장
overlay.setPosition(prop.values_.geometry.flatCoordinates);
//지도에 추가
this.$refs.open_layers.map.addOverlay(overlay);
// 해당 DIV 다켓방법
let oElem = overlay.getElement();
oElem.addEventListener('click', function (e) {
var target = e.target;
if (target.className == "ol-popup-closer") {
//선택한 OverLayer 삭제
vm.$refs.open_layers.map.removeOverlay(vm.$refs.open_layers.map.getOverlayById('multiPopup'));
element = '';
vm.timer = setInterval(() => {
vm.statusSearch(false);
}, 5000)
} else if (target.className == "map_multi_popup_button") {
vm.openDetailPopup(target.id)
} else if (target.className == "map_multi_popup_move_button") {
if (prop != null && prop.layerName != 'multiPolygonLayer') {
if (prop.layerName === 'dong') {
vm.address.dong_dong_cd = prop.id_;
vm.address.dong_cd = prop.id_;
} else if (prop.layerName === 'node') {
vm.address.node_id = prop.id_;
}
vm.statusSearch(true);
}
vm.timer = setInterval(() => {
vm.statusSearch(false);
}, 5000)
}
});
},
// 장애 발생 현황 클릭
troblCcrnLocation: function (item) {
// console.log('troblCcrnLocation', item);
clearInterval(this.timer);
this.address.node_id = item.node_id;
this.statusSearch(true);
this.eventFlage = true;
this.createErrorPopup(item);
},
// 셀렉트 선택시 반영 데이터
getStatusData: function (pointAnim) {
const vm = this;
var layer = 'dong'
var epsg = "EPSG:5181";
if (vm.address.guGun_dong_cd == null) {
layer = 'sigungu';
} else if (vm.address.node_id != null) {
layer = 'crslk';
} else if (vm.address.dong_dong_cd != null) {
layer = 'node';
epsg = "EPSG:4326";
}
axios({
url: "/common/getStatusDataGeoJson.json",
method: 'post',
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
data: {
"dong_cd": vm.address.dong_cd
, "start_dt": vm.condition.date + ' ' + vm.condition.start_time
, "end_dt": vm.condition.date + ' ' + vm.condition.end_time
, "layer": layer
, "signExtn": vm.condition.signExtn
, "wtrms": vm.condition.wtrms
, "rittrnVhcle": vm.condition.rittrnVhcle
, "eqpmnTrobl": vm.condition.eqpmnTrobl
, "currentTimestamp": vm.condition.currentTimestamp
},
}).then(function (response) {
vm.statusControlCountList = response.data.totalCount;
vm.$refs.open_layers.removeAddLayerAll();
vm.$refs.open_layers.addLayerByGeojson(response.data.geojson, layer, epsg, baseStyles["labelStyle"], "label");
// 마지막 시간 데이터 생성
vm.condition.currentTimestamp = response.data.realTimeEvent.currentTimestamp;
// 이벤트 리스트 등록
vm.realTimeEventList = response.data.realTimeEvent.RealTimeEventList;
// console.log( ' vm.realTimeEventList',vm.realTimeEventList)
// 실시간 이벤트 발생여부 체크
if (vm.realTimeEventList.length > 0) {
vm.popupStatus = Object.assign({}, vm.realTimeEventList[0]);
vm.address.node_id = vm.popupStatus.node_id;
vm.statusSearch(true);
vm.eventFlage = true;
vm.showPopup();
}
// 차트 데이터 생성
vm.drawChars(response.data.countList);
}).catch(function (error) {
console.log("error : ", error);
}).finally(function () {
// 항상 실행되는 영역
if (vm.address.guGun_dong_cd == null) {
layer = 'sigungu';
vm.$refs.open_layers.addVectorLayerByUrl("/common/getDongsGeoJson.json", "multiPolygonLayer", "EPSG:5181", baseStyles["MultiPolygon"], "MultiPolygon", pointAnim, vm.address.dong_cd);
} else if (vm.address.node_id != null) {
layer = 'crslk';
// epsg = "EPSG:4326";
vm.$refs.open_layers.addVectorLayerByUrl("/common/getNodeGeoJson.json", "multiPolygonLayer", "EPSG:4326", baseStyles["MultiPolygon"], "MultiPolygon", pointAnim, vm.address.dong_cd, vm.address.node_id);
} else if (vm.address.dong_dong_cd != null) {
layer = 'node';
epsg = "EPSG:4326";
vm.$refs.open_layers.addVectorLayerByUrl("/common/getDongGeoJson.json", "multiPolygonLayer", "EPSG:5181", baseStyles["MultiPolygon"], "MultiPolygon", pointAnim, vm.address.dong_cd);
} else {
vm.$refs.open_layers.addVectorLayerByUrl("/common/getDongsGeoJson.json", "multiPolygonLayer", "EPSG:5181", baseStyles["MultiPolygon"], "MultiPolygon", pointAnim, vm.address.dong_cd);
}
});;
},
// 서치 버튼 클릭
statusSearch: function (pointAnim) {
var vm = this;
// 검색 버튼 클릭
if (pointAnim == true) {
if (this.$refs.open_layers.map.getOverlayById('multiPopup') != null) {
this.$refs.open_layers.map.removeOverlay(this.$refs.open_layers.map.getOverlayById('multiPopup'));
vm.timer = setInterval(() => {
vm.statusSearch(false);
}, 5000)
}
// 자동 처리
} else {
if (this.$refs.open_layers.map.getOverlayById('multiPopup') != null) {
return false;
}
}
// 이벤트 발생시 다시 제자리로
if (this.eventFlage == true) {
this.isPopupVisible = false;
this.eventFlage = false;
this.address.node_id = null;
pointAnim = true;
}
if (pointAnim == null) {
pointAnim = true;
}
//지도 영역 수정
this.getStatusData(pointAnim);
this.situationOccurrenceStatusSearch();
this.troubleOccurrenceStatusSearch();
},
// 차트 그리기
drawChars: function (data) {
// 횡단보도별 무단횡단 차트 정보
var wtrmsCount = data.sort(function (a, b) {
return b.wtrmsCount - a.wtrmsCount;
});
wtrmsCount = wtrmsCount.slice(0, 10);
// 신호연장 차트 정보
var signExtnCount = data.sort(function (a, b) {
return b.signExtnCount - a.signExtnCount;
});
signExtnCount = signExtnCount.slice(0, 10);
// 우회전 위반 차트 정보
var rittrnVioltVhcleCount = data.sort(function (a, b) {
return b.rittrnVioltVhcleCount - a.rittrnVioltVhcleCount;
});
rittrnVioltVhcleCount = rittrnVioltVhcleCount.slice(0, 5);
// 장애발생 차트 정보
var troblOcrnCount = data.sort(function (a, b) {
return b.troblOcrnCount - a.troblOcrnCount;
});
troblOcrnCount = troblOcrnCount.slice(0, 5);
// 차트 생성
if (this.chart1.xAxis == null) {
this.chart1 = COMMON_CHART.createChartByIds("chartdiv1", this.chart1, wtrmsCount, "wtrmsCount", "crslk_nm");
this.chart2 = COMMON_CHART.createChartByIds("chartdiv2", this.chart2, signExtnCount, "signExtnCount", "crslk_nm");
this.chart3 = COMMON_CHART.createChartByIds("chartdiv3", this.chart3, rittrnVioltVhcleCount, "rittrnVioltVhcleCount", "crslk_nm");
this.chart4 = COMMON_CHART.createChartByIds("chartdiv4", this.chart4, troblOcrnCount, "troblOcrnCount", "crslk_nm");
} else {
// 데이터 변경
this.chart1.xAxis.data.setAll(wtrmsCount);
this.chart1.series.data.setAll(wtrmsCount);
this.chart2.xAxis.data.setAll(signExtnCount);
this.chart2.series.data.setAll(signExtnCount);
this.chart3.xAxis.data.setAll(rittrnVioltVhcleCount);
this.chart3.series.data.setAll(rittrnVioltVhcleCount);
this.chart4.xAxis.data.setAll(troblOcrnCount);
this.chart4.series.data.setAll(troblOcrnCount);
}
},
//상황 발행 현황 검색
statusControlCount: function () {
//검색 데이터
const vm = this;
axios({
url: "/statusControl/statusControlCount.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: { "dong_cd": vm.address.dong_cd, "start_dt": vm.condition.date + ' ' + vm.condition.start_time, "end_dt": vm.condition.date + ' ' + vm.condition.end_time, "layer": layer },
// data: vm.address ,
})
.then(function (response) {
vm.statusControlCountList = response.data;
})
.catch(function (error) {
});
},
//상황 발행 현황 검색
eventSelectByRegion: function () {
//검색 데이터
const vm = this;
axios({
url: "/statusControl/eventSelectByRegion.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: vm.address,
})
.then(function (response) {
vm.chartData.wtrms = response.data.wtrms;
vm.chartData.signExtn = response.data.signExtn;
vm.chartData.rittrnVioltVhcle = response.data.rittrnVioltVhcle;
vm.chartData.troblOcrn = response.data.troblOcrn;
})
.catch(function (error) {
console.log("eventSelectByRegion - error : ", error);
});
},
//실시간 발생 현황 - 상황 발행 현황 검색
situationOccurrenceStatusSearch: function () {
//검색 데이터
const vm = this;
vm.situationOccurrenceStatusListSearch.condition = vm.condition;
vm.situationOccurrenceStatusListSearch.address = vm.address;
axios({
url: "/statusControl/situationOccurrenceStatusSearch.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: vm.situationOccurrenceStatusListSearch,
})
.then(function (response) {
vm.situationOccurrenceStatusList = response.data.situationOccurrenceStatusList;
vm.situationOccurrenceStatusListCount = response.data.situationOccurrenceStatusListCount;
})
.catch(function (error) {
console.log("statusSearch - error : ", error);
});
},
//실시간 발생 현황 - 장애발생현황
troubleOccurrenceStatusSearch: function () {
//검색 데이터
const vm = this;
axios({
url: "/statusControl/troubleOccurrenceStatusSearch.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: vm.troubleOccurrenceStatusListSearch,
})
.then(function (response) {
vm.troubleOccurrenceStatusList = response.data.troubleOccurrenceStatusList;
vm.troubleOccurrenceStatusListCount = response.data.troubleOccurrenceStatusListCount;
})
.catch(function (error) {
console.log("statusSearch - error : ", error);
});
},
// 이벤트 발생 상세정보 조회(클릭 이벤트)
eventSelectList: function () {
const vm = this;
axios({
url: "/statusControl/eventSelectList.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: vm.eventListSearch,
})
.then(function (response) {
vm.eventListCount = response.data.eventListCount;
vm.eventList = response.data.eventList;
vm.eventIdx = response.data.eventListCount - (vm.eventListSearch.currentPage - 1) * vm.eventListSearch.perPage;
})
.catch(function (error) {
console.log("errorSelectList - error : ", error);
alert("상황발생 목록 조회 오류, 관리자에게 문의해주세요.");
});
},
// 날짜 초기화
initialDate() {
this.condition.date = COMMON_UTIL.today();
this.condition.start_time = "00:00";
this.condition.end_time = "23:59";
this.eventListSearch.sigungu_cd = this.address.guGun_dong_cd;
this.eventListSearch.dong_cd = this.address.dong_cd;
this.eventListSearch.dong_dong_cd = this.address.node_id;
this.eventListSearch.node_id = this.address.node_id;
},
init() {
this.statusControlCount();
this.eventSelectByRegion();
const clusterLayerExists = this.$refs.open_layers.map.getLayers().getArray().some(layer => {
return layer.get('name') === "clusterLayer";
});
if (clusterLayerExists) {
this.$refs.open_layers.addClusterLayerByUrl("/common/getNodeGeoJsonForWtrmsCrosngStatusControl.json", "clusterLayer", "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address.dong_cd);
}
this.$refs.open_layers.addVectorLayerByUrl('/common/getCrslksGeoJson.json', 'crslkLayer', 'EPSG:5181', baseStyles['labelStyle'], 'label', this.address.dong_cd, this.address.node_id);
this.situationOccurrenceStatusSearch();
this.troubleOccurrenceStatusSearch();
},
toggleSection(section) {
this.currentSection = section;
},
},
watch: {
"condition.date": function (newValue, oldValue) {
},
"condition.start_time": function (newValue, oldValue) {
},
"condition.end_time": function (newValue, oldValue) {
},
"now_zoom": function (newValue, oldValue) {
},
"chartData.wtrms": function (newValue, oldValue) {
COMMON_CHART.createChartById("chartdiv1", this.chart1, newValue);
},
"chartData.signExtn": function (newValue, oldValue) {
COMMON_CHART.createChartById("chartdiv2", this.chart2, newValue);
},
"chartData.rittrnVioltVhcle": function (newValue, oldValue) {
COMMON_CHART.createChartById("chartdiv3", this.chart3, newValue);
},
"chartData.troblOcrn": function (newValue, oldValue) {
COMMON_CHART.createChartById("chartdiv4", this.chart4, newValue);
},
},
computed: {},
computed: {
comma() {
return (v) => {
return v.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};
},
},
mounted() {
var vm = this;
this.initialDate();
this.$refs.open_layers.setBaseMap(vworldBaseLayer);
this.$refs.dongSelecter.default_select(false, true, '22', '22030');
this.statusSearch();
this.timer = setInterval(() => {
this.statusSearch(false);
}, 5000)
},
};
</script>
<style scoped>
.search label {
line-height: 3rem;
}
.tab-buttons .ulbox {
height: calc(100% - 11rem);
overflow: scroll;
overflow-x: hidden;
}
.ulbox ul {
height: 30rem;
}
.ulbox ul li p {
font-size: 13px;
}
.popup-btn {
position: absolute;
bottom: 3rem;
right: 28%;
}
.popup-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
/* background-color: rgba(0, 0, 0, 0.7); */
z-index: 9999;
}
.popup-content {
background-color: #000000a3;
width: 17%;
text-align: center;
color: #ffffff;
/* height: 20%; */
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.popup-content ul {
padding: 2rem 0;
}
.popup-content ul li {
font-size: 16px;
}
.popup-content h2 {
margin-top: 0;
font-size: 2.5rem;
color: #bf1a21;
}
.chart>div {
height: 100%;
}
.chart .box {
height: 85%;
}
.chart {
width: 20%;
height: 85%;
position: absolute;
right: 2rem;
top: 10rem;
}
.chart h2 {
border-radius: 10px 10px 0 0;
}
.search .box ul li {
text-align: left;
}
.search .box button {
font-size: 1.3rem;
padding: 0.5rem 1.3rem;
}
.search .box button.gray-btn.active {
/* Your CSS styles for the button when it's active (clicked) */
background-color: #13833b;
color: #fff;
/* Add any other styles you want to apply when the button is active */
}
.search .box button img {
width: 20px;
}
.btn_set {
position: relative;
border-bottom: 1px solid #e5e3e3;
padding: 0 0 1rem 0;
}
.btn_set div {
position: absolute;
top: 40px;
width: 313px;
height: 380px;
background: #fff;
padding: 1rem;
}
.bg-white::-webkit-scrollbar-thumb {
background-color: #fff;
}
.left h2,
.chart h2 {
background: #50ba8a;
text-align: center;
color: #fff;
padding: 1.6rem 0;
}
.left h2 {
padding: 1rem 0;
font-size: 1.3rem;
}
.top {
z-index: 100;
background: #fdfdf2;
top: 0;
}
.top p {
font-size: 15px;
}
.top ul {
height: inherit;
justify-content: space-evenly;
}
.top li {
text-align: center;
}
.top li img {
width: 20px;
}
.top h3 {
font-size: 20px;
text-align: end;
}
.map {
width: 100%;
}
@media all and (max-width:479px) {
.search,
.top {
z-index: 1;
}
.search-mobile {
background-color: #fff;
width: 60%;
}
.m-b{
flex-direction: column;
}
.top{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.flex-end{
flex-direction: column;
align-items: flex-end;
}
.chart{
width: 100%;
top: 43%;
transform: translateY(-50%);
right: 0;
}
.chart h2{
font-size: 1.4rem;
}
.grid2_8 {
grid-template-columns: 1fr;
grid-template-rows: 0 1fr;
}
.mobile-nav{
z-index: 1;
}
.mobile-nav ul {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
background: #fff;
box-shadow: 0 4px 4px 4px #aaa;
}
a {
display: block;
width: 100%;
height: 100%;
color: #13833b;
font-size: 1.3rem;
padding: 10px;
text-align: center;
}
i {
font-size: 3rem;
color: #13833b;
display: block;
margin-bottom: 5px;
}
}</style>