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>
<button @click="toggleSlide" class="toggle">{{ slideText }}</button>
<div class="grid2_8">
<div :class="['slide-content left', { active: showSlide }]">
<div class="wrap flex-between">
<div class="search">
<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">
<input
class="m-r cbox_1"
type="checkbox"
v-model="condition['wtrms']"
/><label for="">무단횡단</label>
<input
class="m-r cbox_1"
type="checkbox"
v-model="condition['signExtn']"
/><label for="">신호연장</label>
<input
class="m-r cbox_1"
type="checkbox"
v-model="condition['rittrnVhcle']"
/><label for="">신호위반</label>
<input
class="m-r cbox_1"
type="checkbox"
v-model="condition['eqpmnTrobl']"
/><label for="">장애발생</label>
</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>
<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 class="right">
<div class="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">
<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="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 {
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();
},
},
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>
@media all and (max-width: 479px) {
.top h3 {
font-size: 15px !important;
}
.top p {
padding-right: 1rem;
}
.chart {
width: -webkit-fill-available !important;
}
.top {
overflow: scroll;
}
.top ul {
width: 137rem;
overflow: hidden;
justify-content: space-between !important;
padding: 2rem 1rem !important;
}
.top li {
display: flex;
align-items: center;
}
.search {
width: inherit;
}
.toggle {
color: #fff;
font-weight: bold;
background: #13833b;
display: block !important;
position: absolute;
z-index: 150;
top: 7.2rem;
right: 1rem;
}
.wrap {
height: auto !important;
width: inherit;
margin: 0 !important;
}
.slide-content {
position: absolute;
z-index: 97;
top: 6rem;
/* left: -31rem; */
width: -webkit-fill-available;
height: 100vh;
background-color: #f0f0f0;
transition: transform 0.3s ease;
transform: translateX(100%);
}
.slide-content.active {
transform: translateX(0);
}
}
.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;
}
.toggle {
display: none;
}
.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;
/* width: -webkit-fill-available; */
height: 86px !important;
}
.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;
}
.wrap {
z-index: 100;
top: 0;
height: inherit;
}
.left {
background: #fff;
height: 100%;
}
.right {
width: -webkit-fill-available;
position: relative;
height: 100%;
}
.map {
width: 100%;
height: calc(100% - 86px);
}
</style>