File name
Commit message
Commit date
2023-07-26
File name
Commit message
Commit date
File name
Commit message
Commit date
2023-07-27
File name
Commit message
Commit date
2023-07-26
2023-07-27
2023-07-27
File name
Commit message
Commit date
2023-07-27
2023-07-27
<template>
<div class="wrap">
<div class="board-wrap">
<div class="search-wrap">
<div class="flex-between mb-block">
<div class="flex gap m-b date">
<label>날짜를 선택해주세요.</label>
<input type="date" name="" id="" />
<span>~</span>
<input type="date" name="" id="" />
</div>
<div class="flex gap m-b">
<label>시/도</label>
<select name="" id="">
<option value="">대구광역시</option>
</select>
<label>시/군/구</label>
<select name="" id="">
<option value="">서구</option>
</select>
<label>행정동</label>
<select name="" id="">
<option value="">전체</option>
</select>
</div>
<div class="flex gap m-b situ">
<button type="button" class="btn-2 green-btn">조회</button>
</div>
</div>
</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>
<th>장애발생여부</th>
</tr>
</thead>
<tbody>
<tr
v-for="(item, idx) in dataLogList"
:key="idx"
>
<td data-title="NO">{{ dataLogIdx - idx }}</td>
<td data-title="발생일시"> {{ item.clct_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 v-if="item.eqpmn_trobl_yn == 'y'" data-title="장애발생여부">발생</td>
<td v-else data-title="장애발생여부">미발생</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>
</tbody>
</table>
</div>
<div class="bottom-wrap">
<PaginationButton
v-model:currentPage="dataLogListSearch.currentPage"
:per-page="dataLogListSearch.perPage" :total-count="dataLogListCount" :max-range="5"
:click="dataLogSelectList" />
<div class="btn-wrap">
<router-link to="/UserManagement.page">
<span class="btn-2 green-btn">Excel로 저장</span>
</router-link>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from "axios";
import PaginationButton from "../../component/pagination/PaginationButton.vue";
import dongSelectList from '../../component/dongSelectList.vue';
import COMMON_UTIL from "../../../resources/js/commonUtil.ts";
export default {
data() {
return {
dataLogListSearch: {
currentPage: 1,
perPage: 10,
// startDate: null,
// endDate: null,
// searchDongCode: null,
},
dataLogListCount: 0,
dataLogList: [],
dataLogIdx: 0,
address: {},
};
},
methods: {
dataLogSelectList: function() {
const vm = this;
axios({
url: "/dataLog/dataLogSelectList.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: vm.dataLogListSearch,
})
.then(function(response) {
console.log("dataLogSelectList - response : ", response.data);
vm.dataLogListCount = response.data.dataLogListCount;
vm.dataLogList = response.data.dataLogList;
vm.dataLogIdx = response.data.dataLogListCount - (vm.dataLogListSearch.currentPage - 1) * response.data.dataLogList.length;
})
.catch(function(error) {
console.log("errorSelectList - error : ", error);
alert("장애발생 목록 조회 오류, 관리자에게 문의해주세요.");
});
},
//날짜에 '-' 넣기
yyyymmdd(date) {
return COMMON_UTIL.yyyymmdd(date);
},
},
watch: {},
computed: {},
components: {
PaginationButton: PaginationButton,
dongSelectList: dongSelectList
},
mounted() {
console.log("Main4 mounted");
this.dataLogSelectList();
},
};
</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: 155rem;
margin: 100px auto;
}
.search-wrap {
margin-bottom: 30px;
}
.search-wrap input,
.search-wrap select {
height: 22.5px;
border-radius: 3px;
border: 1px solid #949292;
}
.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 0;
color: #fff;
background-color: #13833b;
}
table td {
padding: 10px 0;
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.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>