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">
<!-- <input type="text" id="" class="noWriteBox inputFull" placeholder="" value="용평리조트">-->
<input type="date" value-format="yyyyMMdd" style="width: 45%;" :max="today" v-model="errorListSearch.startDate"/>
<span style="margin: 0px 2%;"> ~ </span>
<input type="date" value-format="yyyyMMdd" style="width: 45%;" :min="errorListSearch.startDate" :max="today" v-model="errorListSearch.endDate"/>
</td>
<th>행정구역</th>
<td colspan="3">
<dongSelectList @setDongCd="setDongCd"
:user_sigungu_cd="errorListSearch.sigungu_cd"
:user_dong_cd="errorListSearch.dong_dong_cd"
:user_node_id="errorListSearch.node_id"
:user_crslk_az="errorListSearch.crslk_az"></dongSelectList>
</td>
</tr>
<tr>
<th>장애타입</th>
<td >
<select v-model="errorListSearch.errorType" style="width: 100%">
<option :value=null> 전체 </option>
<option value="waring"> 제어기장애 </option>
<option value="equipment operation"> 장비장애 </option>
<option value="connection"> 통신장애 </option>
</select>
</td>
<th>장비타입</th>
<td>
<select v-model="errorListSearch.equipmentType" style="width: 100%">
<option value="null"> 전체 </option>
<option value="controller"> 신호제어기 </option>
<option value="camera"> 카메라 </option>
<option value="vpm"> 보드 </option>
<option value="speaker"> 스피커 </option>
<option value="indicator"> 잔여시간표시기 </option>
</select>
</td>
<th>복구여부</th>
<td colspan="3">
<select v-model="errorListSearch.recoveryType" style="width: 19rem">
<option :value=null> 전체 </option>
<option value="Y"> 복구 </option>
<option value="N"> 미복구 </option>
</select>
<button type="button" class="green-btn" style="margin-left: 5px;padding: 5px;width: 10rem; float: right;" @click="errorSelectList">조회</button>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<table class="pc">
<colgroup>
<col style="width: 5%" />
<col style="width: 10%" />
<col style="width: 5%" />
<col style="width: 5%" />
<col style="width: 5%" />
<col style="width: 10%" />
<col style="width: 15%" />
<col style="width: 10%" />
<col style="width: 15%" />
<col style="width: 5%" />
<col style="width: 10%" />
</colgroup>
<thead>
<tr>
<th>No</th>
<th>장애 발생일시</th>
<th>시/도</th>
<th>시/군/구</th>
<th>행정동</th>
<th>교차로</th>
<th>횡단보도명</th>
<th>장비명</th>
<th>장애명</th>
<th>복구여부</th>
<th>복구일시</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, idx) in errorList"
:key="idx"
@click="errorSelectOne(item)"
>
<td data-title="NO">{{ errorIdx - 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 data-title="노드명">{{ item.node_name }}</td>
<td data-title="횡단보도명">{{ item.crslk_nm }}</td>
<td data-title="장비명">{{ item.eqpmn_nm }}</td>
<td data-title="장애명">{{ item.trobl_nm }}</td>
<td v-if="item.recovery_yn == 'Y'" data-title="복구여부">
복구완료
</td>
<td v-else data-title="복구여부">미복구</td>
<td v-if="item.recovery_dt === null" data-title="복구일시"> - </td>
<td v-else data-title="복구일시"> {{ item.recovery_dt }} </td>
</tr>
<tr v-if="errorListCount == 0">
<td style="font-size: 20px;" colspan="11">검색조건에 해당하는 데이터가 없습니다.</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>
<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_errorOne == 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_errorOne = false"
>
<img src="../../../resources/images/close.png" alt="" />
</button>
</h2>
<div class="modal_base_body">
<h3 class="modal_base_title" v-if="error.sigungu_nm === null">{{ error.sido_nm }} - {{ error.crslk_nm }}</h3>
<h3 class="modal_base_title" v-else-if="error.dong_nm === null">{{ error.sido_nm + " " + error.sigungu_nm }} - {{ error.crslk_nm }}</h3>
<h3 class="modal_base_title" v-else>{{ error.sido_nm + " " + error.sigungu_nm + " " + error.dong_nm }} - {{ error.crslk_nm }}</h3>
<div class="de_Search">
<table class="troubleTable mrg_b_0" >
<tbody>
<tr>
<th colspan="2">발생일시</th>
<td>{{ error.ocrn_dt }}</td>
</tr>
<tr>
<th colspan="2">장비명</th>
<td>{{ error.eqpmn_nm }}</td>
</tr>
<tr>
<th colspan="2">장애명</th>
<td>{{ error.trobl_nm }}</td>
</tr>
<tr>
<th colspan="2">복구여부</th>
<td v-if="error.recovery_yn === 'Y'"> 복구완료 </td>
<td v-else> 미복구 </td>
</tr>
<tr>
<th colspan="2">복구시간</th>
<td v-if="error.recovery_dt === null"> - </td>
<td v-else> {{ error.recovery_dt }} </td>
</tr>
</tbody>
</table>
</div>
<br><br>
<h3 class="modal_base_title" >횡단보도 유지보수 담당자 정보</h3>
<div class="de_Search">
<table class="troubleTable mrg_b_0" >
<tbody>
<tr>
<th colspan="2">이름</th>
<td>{{ manager.mngr_nm }}</td>
</tr>
<tr>
<th colspan="2">연락처</th>
<td>{{ manager.mngr_telno }}</td>
</tr>
<tr>
<th colspan="2">이메일</th>
<td>{{ manager.mngr_eml }}</td>
</tr>
<tr>
<th colspan="2">소속정보</th>
<td>{{ manager.mngr_ogdp_info }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="bottom-wrap">
<PaginationButton
v-model:currentPage="errorListSearch.currentPage"
:per-page="errorListSearch.perPage" :total-count="errorListCount" :max-range="5"
:click="errorSelectList" />
<div class="btn-wrap">
<button type="button" class="green-btn" @click="errorExcel">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 {
errorListSearch: {
currentPage: 1,
perPage: 10,
startDate: null,
endDate: null,
searchDongCode: null,
errorType: null,
equipmentType: null,
recoveryType: null,
sigungu_cd:null,
dong_cd: null,
dong_dong_cd: null,
node_id: null,
crslk_az: null
},
error: {
ocrn_dt: null,
recovery_yn: null,
recovery_dt: null,
eqpmn_nm: null,
trobl_nm: null,
sido_nm: null,
sigungu_nm: null,
dong_nm: null,
node_name: null,
crslk_nm: null
},
manager: {
mngr_nm: null,
mngr_telno: null,
mngr_eml: null,
mngr_ogdp_info: null
},
errorListCount: 0,
errorList: [],
errorIdx: 0,
address: {},
modal_errorOne: false,
//오늘 날짜
today: COMMON_UTIL.today(),
};
},
methods: {
errorSelectList: function () {
const vm = this;
axios({
url: "/statusControl/errorSelectList.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: vm.errorListSearch,
})
.then(function (response) {
// console.log("errorSelectList - response : ", response.data);
vm.errorListCount = response.data.errorListCount;
vm.errorList = response.data.errorList;
vm.errorIdx =
vm.errorListCount -
(vm.errorListSearch.currentPage - 1) *
vm.errorListSearch.perPage;
})
.catch(function (error) {
console.log("errorSelectList - error : ", error);
alert("장애발생 목록 조회 오류, 관리자에게 문의해주세요.");
});
},
errorSelectOne: function (errorOne) {
const vm = this;
axios({
url: "/statusControl/errorSelectOne.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: errorOne,
})
.then(function (response) {
// console.log("errorSelectList - response : ", response.data);
vm.error = response.data.errorOne;
vm.manager = response.data.crosswalkManager;
vm.modal_errorOne = true;
})
.catch(function (error) {
console.log("errorSelectList - error : ", error);
alert("장애발생 상세정보 조회 오류, 관리자에게 문의해주세요.");
});
},
//장애발생 엑셀 저장
errorExcel: function() {
const vm = this;
axios({
url: "/statusControl/errorExcel.json",
method: "post",
herders: {
"Content-Type": "application/json; charset=UTF-8",
},
responseType: 'arraybuffer',
data: vm.errorListSearch,
})
.then(function (response) {
// console.log("errorExcel - 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("errorExcel - error : ", error);
alert("장애발생 Excel 저장 오류, 관리자에게 문의해주세요.");
});
},
//dongSelectList 컴포넌트에서 선택된 dong_cd 셋팅
setDongCd(value) {
// console.log("value : ", value);
this.address = value;
},
},
watch: {
'address.dong_cd': function (newValue) {
this.errorListSearch.dong_cd = newValue;
},
'address.node_id': function (newValue) {
this.errorListSearch.node_id = newValue;
},
'address.crslk_az': function (newValue) {
this.errorListSearch.crslk_az = newValue;
},
},
computed: {},
components: {
PaginationButton: PaginationButton,
dongSelectList: dongSelectList,
},
created(){
if(this.$route.query.sigungu_cd != null) {
// console.log("ErrorSearch created")
this.errorListSearch.sigungu_cd = this.$route.query.sigungu_cd;
this.errorListSearch.dong_dong_cd = this.$route.query.dong_cd;
this.errorListSearch.node_id = this.$route.query.node_id;
this.errorListSearch.crslk_az = this.$route.query.crslk_az;
this.errorListSearch.startDate = COMMON_UTIL.today();
this.errorListSearch.endDate = COMMON_UTIL.today();
} else {
this.errorListSearch.endDate = COMMON_UTIL.today();
this.errorListSearch.startDate = COMMON_UTIL.oneMonthAgo();
}
},
mounted() {
console.log("ErrorSearch mounted");
this.errorSelectList();
},
};
</script>
<style scoped>
@media all and (max-width: 479px) {
.local select {
width: 8.7rem;
}
.date {
margin: 0 0 1rem 0;
margin-right: 0rem !important;
}
}
.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 label {
width: 30rem !important;
}
.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;
}
.search-wrap label {
width: -webkit-fill-available;
}
.search-wrap label {
height: 5rem;
}
.search-wrap select {
width: 100%;
}
.btn-2 {
display: inline-block;
padding: 0.3rem 2rem;
font-size: 13.333px;
}
.pg-wrap {
text-align: center;
}
.pg-item {
display: inline-block;
padding: 10px;
color: #949292;
}
.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>