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="wrap">
<h2 style="color: #10833b" class="flex gap">
<img src="../../../resources/images/bar.png" alt="" />상황발생 정보 조회
</h2>
<div style="margin-left: 2rem; font-size: 13px" class="m-b3">
현황관제 > <em class="green2 lined">상황발생 정보 조회</em>
</div>
<div class="board-wrap ">
<!-- 검색 -->
<div class="de_Search">
<table class="troubleTable">
<tbody>
<tr>
<th>검색일자</th>
<td colspan="3" style="width:30%;">
<input type="date" value-format="yyyyMMdd" style="width: 45%;" :max="today" v-model="eventListSearch.startDate"/>
<span style="margin: 0px 2%;"> ~ </span>
<input type="date" value-format="yyyyMMdd" style="width: 45%;" :min="eventListSearch.startDate" :max="today" v-model="eventListSearch.endDate"/>
</td>
<th>행정구역</th>
<td colspan="3" class="flex gap">
<dongSelectList @setDongCd="setDongCd"
:user_sigungu_cd="eventListSearch.sigungu_cd"
:user_dong_cd="eventListSearch.dong_dong_cd"
:user_node_id="eventListSearch.node_id"
:user_crslk_az="eventListSearch.crslk_az"></dongSelectList>
</td>
</tr>
<tr>
<th>상황명</th>
<td colspan="7" >
<select v-model="eventListSearch.eventType">
<option :value=null>전체</option>
<option value="무단횡단">무단횡단</option>
<option value="신호연장">신호연장</option>
<option value="우회전신호위반">우회전신호위반</option>
</select>
<button type="button" class="green-btn" style="margin-left: 5px;padding: 5px;width: 10rem; float: right;" @click="eventSelectList">검색</button>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<table class="pc">
<!-- <colgroup>
<col style="width: 10%;">
<col style="width: 20%;">
<col style="width: 20%;">
<col style="width: 30%;">
<col style="width: 20%;">
</colgroup> -->
<thead>
<tr>
<th>No</th>
<th>발생일시</th>
<th>시/도</th>
<th>시/군/구</th>
<th>행정동</th>
<th>노드/횡단보도명</th>
<th>상황명</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, idx) in eventList"
:key="idx"
@click="eventSelectOne(item)"
>
<td data-title="NO">{{ eventIdx - idx }}</td>
<td data-title="발생일시"> {{ item.ocrn_dt }}</td>
<td data-title="시/도">{{ item.sido_nm }}</td>
<td data-title="시/군/구">{{ item.sigungu_nm }}</td>
<td data-title="행정동">{{ item.dong_nm }}</td>
<td date-title="노드/횡단보도명">{{ item.crslk_nm }}</td>
<td data-title="상황명">{{ item.type }}</td>
</tr>
<tr v-if="eventListCount == 0">
<td style="font-size: 20px;" colspan="7">검색조건에 해당하는 데이터가 없습니다.</td>
</tr>
</tbody>
</table>
<table class="mobile">
<colgroup>
<col style="width: 10%" />
<col style="width: 20%" />
</colgroup>
<tbody>
<tr>
<th>No</th>
<td></td>
</tr>
<tr>
<th>발생일시</th>
<td></td>
</tr>
<tr>
<th>시/도</th>
<td></td>
</tr>
<tr>
<th>시/군/구</th>
<td></td>
</tr>
<tr>
<th>행정동</th>
<td></td>
</tr>
<tr>
<th>상황명</th>
<td></td>
</tr>
</tbody>
</table>
<div class="modal-wrap" v-if="modal_jaywalk == true">
<div class="modal-bg"></div>
<div class="modal_base" style="width:100rem;">
<h2 class="flex-between">
<span>상황발생 상세정보</span>
<button type="button" class="gray-btn modal_base_close" @click="modal_jaywalk = false">
<img src="../../../resources/images/close.png" alt="" />
</button>
</h2>
<div class="modal_base_body">
<h3 class="modal_base_title" v-if="eventJaywalk.sigungu_nm === null">{{ eventJaywalk.sido_nm }} - {{ eventJaywalk.crslk_nm }}</h3>
<h3 class="modal_base_title" v-else-if="eventJaywalk.dong_nm === null">{{ eventJaywalk.sido_nm + " " + eventJaywalk.sigungu_nm }} - {{ eventJaywalk.crslk_nm }}</h3>
<h3 class="modal_base_title" v-else>{{ eventJaywalk.sido_nm + " " + eventJaywalk.sigungu_nm + " " + eventJaywalk.dong_nm }} - {{ eventJaywalk.crslk_nm }}</h3>
<div class="de_Search">
<table class="troubleTable mrg_b_0" >
<tbody>
<tr>
<th colspan="2">발생일시</th>
<td >{{ eventJaywalk.ocrn_dt }}</td>
</tr>
<tr>
<th colspan="2">상황명</th>
<td >무단횡단</td>
</tr>
<tr>
<th colspan="2"> 무단횡단 시도 인원 수</th>
<td >{{ eventJaywalk.wtrms_crosng_try_nope }}명</td>
</tr>
<tr>
<th colspan="2">잔여보행 상황발생 여부</th>
<td v-if="eventJaywalk.rm_walking_situ_ocrn_yn === '1'" > 발생 </td>
<td v-else > 미발생 </td>
</tr>
<tr>
<th colspan="2">잔여보행 인원 수</th>
<td >{{ eventJaywalk.rm_pdstrn_cnt }}명</td>
</tr>
<tr>
<th colspan="2">횡단완료 인원 수</th>
<td >{{ eventJaywalk.crosng_cmptn_nope }}명</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="modal-wrap" v-if="modal_signal == true">
<div class="modal-bg"></div>
<div class="modal_base" style="width:100rem;">
<h2 class="flex-between">
<span>상황발생 상세정보</span>
<button type="button" class="gray-btn modal_base_close" @click="modal_signal = false">
<img src="../../../resources/images/close.png" alt="" />
</button>
</h2>
<div class="modal_base_body">
<h3 class="modal_base_title" v-if="eventSignal.sigungu_nm === null">{{ eventSignal.sido_nm }} - {{ eventSignal.crslk_nm }}</h3>
<h3 class="modal_base_title" v-else-if="eventSignal.dong_nm === null">{{ eventSignal.sido_nm + " " + eventSignal.sigungu_nm }} - {{ eventSignal.crslk_nm }}</h3>
<h3 class="modal_base_title" v-else>{{ eventSignal.sido_nm + " " + eventSignal.sigungu_nm + " " + eventSignal.dong_nm }} - {{ eventSignal.crslk_nm }}</h3>
<div class="de_Search">
<table class="troubleTable mrg_b_0" >
<tbody>
<tr>
<th colspan="2">발생일시</th>
<td >{{ eventSignal.ocrn_dt }}</td>
</tr>
<tr>
<th colspan="2">상황명</th>
<td >신호연장</td>
</tr>
<tr>
<th colspan="2">신호연장 시 보행자 수</th>
<td >{{ eventSignal.signl_extn_pdstrn_cnt }}명</td>
</tr>
<tr>
<th colspan="2">횡단 완료자 수</th>
<td >{{ eventSignal.crosng_cmptn_cnt }}명</td>
</tr>
<tr>
<th colspan="2">신호연장 시간</th>
<td >{{ eventSignal.signl_extn_hr }}초</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="modal-wrap" v-if="modal_rightTurn == true">
<div class="modal-bg"></div>
<div class="modal_base" style="width:100rem;">
<h2 class="flex-between">
<span>상황발생 상세정보</span>
<button type="button" class="gray-btn modal_base_close" @click="modal_rightTurn = false">
<img src="../../../resources/images/close.png" alt="" />
</button>
</h2>
<div class="modal_base_body">
<h3 class="modal_base_title" v-if="eventRightTurn.sigungu_nm === null">{{ eventRightTurn.sido_nm }} - {{ eventRightTurn.crslk_nm }} </h3>
<h3 class="modal_base_title" v-else-if="eventRightTurn.dong_nm === null">{{ eventRightTurn.sido_nm + " " + eventRightTurn.sigungu_nm }} - {{ eventRightTurn.crslk_nm }}</h3>
<h3 class="modal_base_title" v-else>{{ eventRightTurn.sido_nm + " " + eventRightTurn.sigungu_nm + " " + eventRightTurn.dong_nm }} - {{ eventRightTurn.crslk_nm }}</h3>
<div class="de_Search">
<table class="troubleTable mrg_b_0" >
<tbody>
<tr>
<th colspan="2">발생일시</th>
<td >{{ eventRightTurn.ocrn_dt }}</td>
</tr>
<tr>
<th colspan="2">상황명</th>
<td >우회전차량 신호위반</td>
</tr>
<tr>
<th colspan="2">보행대기자 수</th>
<td >{{ eventRightTurn.awiter_cnt }}명</td>
</tr>
<tr>
<th colspan="2">보행자 수</th>
<td >{{ eventRightTurn.pdstrn_cnt }}명</td>
</tr>
<tr>
<th colspan="2">보행자신호 상태</th>
<td v-if="eventRightTurn.walking_signl_stts === 'G'" >녹색불</td>
<td v-else-if="eventRightTurn.walking_signl_stts === 'GF'" >점멸 녹색불</td>
<td v-else >적색불</td>
</tr>
<tr>
<th colspan="2">보행신호 표출시간</th>
<td >{{ eventRightTurn.walking_signl_expr_hr }}초</td>
</tr>
<tr>
<th colspan="2">보행신호 잔여시간</th>
<td >{{ eventRightTurn.walking_signl_rm_hr }}초</td>
</tr>
<tr>
<th colspan="2">우회전 차량 대수</th>
<td >{{ eventRightTurn.rittrn_vltn_cnt }}대</td>
</tr>
<tr>
<th colspan="2">우회전 신호위반 차량 대수</th>
<td >{{ eventRightTurn.rittrn_law_vltn_cnt }}대</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="bottom-wrap">
<PaginationButton
v-model:currentPage="eventListSearch.currentPage"
:per-page="eventListSearch.perPage" :total-count="eventListCount" :max-range="5"
:click="eventSelectList" />
<div class="btn-wrap">
<button type="button" class="green-btn" @click="eventExcel">Excel로 저장</button>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from "axios";
import PaginationButton from "../../component/pagination/PaginationButton.vue";
import dongSelectList from '../../component/dongSelectListSimple.vue';
import COMMON_UTIL from "../../../resources/js/commonUtil.ts";
export default {
data() {
return {
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
},
eventJaywalk: {
sido_nm: null,
sigungu_nm: null,
dong_nm: null,
crslk_nm: null,
rm_walking_situ_ocrn_yn: null,
frst_sense_dt: null,
wtrms_crosng_try_nope: null,
rm_pdstrn_cnt: null,
crosng_cmptn_nope: null
},
eventSignal: {
sido_nm: null,
sigungu_nm: null,
dong_nm: null,
crslk_nm: null,
signl_extn_pdstrn_cnt: null,
crosng_cmptn_cnt: null,
signl_extn_hr: null,
},
eventRightTurn: {
sido_nm: null,
sigungu_nm: null,
dong_nm: null,
crslk_nm: null,
awiter_cnt: null,
pdstrn_cnt: null,
walking_signl_stts: null,
walking_signl_expr_hr: null,
walking_signl_rm_hr: null,
rittrn_law_vltn_cnt: null,
rittrn_vltn_cnt: null,
},
eventListCount: 0,
eventList: [],
eventIdx: 0,
address: {},
modal_jaywalk: false,
modal_signal: false,
modal_rightTurn: false,
//오늘 날짜
today: COMMON_UTIL.today(),
};
},
methods: {
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) {
// console.log("errorSelectList - response : ", response.data);
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("상황발생 목록 조회 오류, 관리자에게 문의해주세요.");
});
},
eventSelectOne: function (eventOne) {
const vm = this;
axios({
url: "/statusControl/eventSelectOne.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: eventOne,
})
.then(function (response) {
// console.log("errorSelectList - response : ", response.data);
if(response.data.type === "jaywalk") {
vm.eventJaywalk = response.data
vm.modal_jaywalk = true;
} else if (response.data.type === "signal") {
vm.eventSignal = response.data
vm.modal_signal = true;
} else {
vm.eventRightTurn = response.data
vm.modal_rightTurn = true;
}
})
.catch(function (error) {
console.log("errorSelectList - error : ", error);
alert("장애발생 상세정보 조회 오류, 관리자에게 문의해주세요.");
});
},
//상황발생 엑셀 저장
eventExcel: function() {
const vm = this;
axios({
url: "/statusControl/eventExcel.json",
method: "post",
herders: {
"Content-Type": "application/json; charset=UTF-8",
},
responseType: 'arraybuffer',
data: vm.eventListSearch,
})
.then(function (response) {
// console.log("eventExcel - response : ", response.data);
const url = window.URL.createObjectURL(new Blob([response.data], { type: response.headers["content-type"] }));
const link = document.createElement("a");
link.href = url;
let today = COMMON_UTIL.today();
link.download = '[' + today + ']' + '상황발생목록조회';
link.click();
window.URL.revokeObjectURL(url);
})
.catch(function (error) {
console.log("eventExcel - error : ", error);
alert("상황발생 Excel 저장 오류, 관리자에게 문의해주세요.");
});
},
//dongSelectList 컴포넌트에서 선택된 dong_cd 셋팅
setDongCd(value) {
// console.log("value : ", value);
this.address = value;
},
},
watch: {
'address.dong_cd': function (newValue) {
this.eventListSearch.dong_cd = newValue;
},
'address.node_id': function (newValue) {
this.eventListSearch.node_id = newValue;
},
'address.crslk_az': function (newValue) {
this.eventListSearch.crslk_az = newValue;
},
},
computed: {},
components: {
PaginationButton: PaginationButton,
dongSelectList: dongSelectList
},
created(){
if(this.$route.query.sigungu_cd != null) {
// console.log("SituationSearch created");
this.eventListSearch.sigungu_cd = this.$route.query.sigungu_cd;
this.eventListSearch.dong_dong_cd = this.$route.query.dong_cd;
this.eventListSearch.node_id = this.$route.query.node_id;
this.eventListSearch.crslk_az = this.$route.query.crslk_az;
this.eventListSearch.startDate = COMMON_UTIL.today();
this.eventListSearch.endDate = COMMON_UTIL.today();
} else {
this.eventListSearch.endDate = COMMON_UTIL.today();
this.eventListSearch.startDate = COMMON_UTIL.oneMonthAgo();
}
},
mounted() {
console.log("SituationSearch mounted");
this.eventSelectList();
},
};
</script>
<style scoped>
@media all and (max-width: 479px) {
.situ input {
width: 13rem;
}
.date input {
width: 10rem;
}
}
.mobile {
display: none;
}
.modal {
width: max-content;
}
.modalmain {
padding: 1rem;
}
.modalmain table tbody tr:nth-child(odd) {
background: #f7f6f6;
}
.modalmain table tbody tr:nth-child(even) {
background: #ffffff;
}
.modalmain table td {
border: 1px solid #eee;
}
.modal h2 {
background: #e5e5dd;
font-size: 2rem;
padding: 1rem;
}
.modal h3 {
font-size: 1.8rem;
border-bottom: 1px solid #eee;
padding: 1rem 0 0.2rem 0;
}
.modal h4 {
font-size: 1.6rem;
font-weight: 100;
padding: 0.2rem 0 1rem 0;
}
.modal button {
border: 0;
background: none;
height: 30px;
padding: 0 0 0 50rem;
cursor: pointer;
}
.modal button img {
width: 25px;
}
.txt-point {
color: #333;
}
.wrap {
width: 80%;
margin: 25px auto;
}
.wrap h2 {
font-size: 2.5rem;
}
.float-right {
float: right;
}
.clear-fix::after {
content: "";
display: block;
clear: both;
}
.search-wrap .float-right form > *:not(:last-child) {
margin-right: 1rem;
}
table {
width: 100%;
text-align: center;
border-collapse: collapse;
}
th,
td {
border-left: none;
border-right: none;
}
table th {
padding: 15px;
color: #fff;
background-color: #13833b;
}
table td {
padding: 10px;
border-bottom: 1px solid #e5e5dd;
}
table tr:nth-child(odd) {
background-color: #f7f6f6;
}
table tr:nth-child(even) {
background-color: #fdfdf2;
}
.bottom-wrap {
position: relative;
padding: 1rem 0;
}
.btn-2 {
display: inline-block;
padding: 0.5rem 2rem;
font-size: 13.333px;
height: 3rem;
}
.pg-wrap {
text-align: center;
}
.pg-item {
display: inline-block;
padding: 10px;
color: #949292;
}
.search-wrap label {
width: 25%;
}
.pg-item.prev,
.pg-item.next,
.pg-item.active {
color: #13833b;
}
.btn-wrap {
position: absolute;
right: 0;
top: 1.5em;
z-index: 10;
}
.btn-wrap button {
cursor: pointer;
}
</style>