File name
Commit message
Commit date
File name
Commit message
Commit date
2022-11-06
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="wrap">
<div class="board-wrap">
<div>
<h2 class="page-title">데이터 수집로그</h2>
</div>
<hr class="margin">
<div class="search-wrap clear-fix">
<div class="float-left">
<select v-model="pagenation.option1" @change="search">
<option value="false">전체</option>
<option value="true"> 오류목록 </option>
</select>
</div>
<div class="float-right flex gap">
<div class="flex gap m-b">
<label>등록일자</label>
<input type="date" value-format="yyyy-MM-dd" v-model="pagenation.startDate"/>
<span> ~ </span>
<input type="date" value-format="yyyy-MM-dd" v-model="pagenation.endDate"/>
</div>
<div class="flex gap">
<select v-model="pagenation.searchType">
<option value="null" disabled>검색조건</option>
<option value="user_nm">업체명</option>
<option value="api_key">API_KEY</option>
</select>
<input type="search" placeholder="검색어를 입력 해주세요." v-model="pagenation.searchValue" @keyup.enter="search"/>
<button type="button" class="green-btn" @click="search">검색</button>
</div>
</div>
</div>
<div style="min-height: 500px;background: #f7f6f6;">
<table class="pc">
<colgroup>
<col style="width: 5%;">
<col style="width: 20%;">
<col style="width: 10%;">
<col style="width: 10%;">
<col style="width: 15%;">
<col style="width: 20%;">
<col style="width: 20%;">
</colgroup>
<thead>
<tr>
<th>No</th>
<th>노드ID(방향)</th>
<th>업체명</th>
<th>오류발생여부</th>
<th>호출시간</th>
<th>메세지</th>
<th>접속IP</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, idx) in apiLogList" :key="idx" @click="selectApiLog = item" v-bind:class="{'select_row' : (item.call_dt == selectApiLog.call_dt) }">
<td data-title="NO">{{ pagenation.totalRow - ((pagenation.currentPage ) * pagenation.perPage) + ( pagenation.perPage - idx) }}</td>
<td data-title="ID">{{ item.node_id }}({{change_code(item.crslk_az)}})</td>
<td data-title="이름">{{ item.user_nm }}</td>
<td data-title="오류발생여부">{{ item.err_yn }}</td>
<td data-titel="호출시간">{{ item.call_dt}}</td>
<td data-title="메세지">{{ item.msg }}</td>
<td data-title="접속IP">{{ item.cntn_ip }}</td>
</tr>
<tr v-if="apiLogList.length == 0">
<td data-title="NO" colspan="6">조회된 데이터가 없습니다.</td>
</tr>
</tbody>
</table>
</div>
<div class="bottom-wrap">
<PaginationButton
v-model:currentPage="pagenation.currentPage"
:per-page="pagenation.perPage" :total-count="pagenation.totalRow" :max-range="5"
:click="search" />
</div>
<div>
<div class="sub-title-wrap" style="margin-bottom: 30px;">
<h3 class="sub-title">로그 상세정보 </h3>
</div>
<div >
<table>
<colgroup>
<col style="width: 25%;">
<col style="width: 25%;">
<col style="width: 25%;">
<col style="width: 25%;">
</colgroup>
<tbody><div class=""></div>
<tr>
<th >노드</th>
<td>{{ selectApiLog.node_id }}({{change_code(selectApiLog.crslk_az)}})</td>
<th>업체명</th>
<td>{{ selectApiLog.user_nm }}</td>
</tr>
<tr>
<th>오류발생여부</th>
<td>{{ selectApiLog.err_yn }}</td>
<th>호출시간</th>
<td>{{ selectApiLog.call_dt}}</td>
</tr>
<tr>
<th>메세지</th>
<td>{{ selectApiLog.msg }}</td>
<th>수신내용</th>
<td>{{ selectApiLog.contents }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
import PaginationButton from '../../component/pagination/PaginationButton.vue';
import COMMON_UTIL from '../../../resources/js/commonUtil.ts';
export default {
data: () => {
return {
pagenation: {
currentPage: 1,
perPage: 10,
searchType: null,
searchValue: null,
startDate : null,
endDate : null,
option1 : false,
totalRow : 0,
api_key : '',
node_id : '',
call_dt : null,
reg_dt : '',
err_yn : false,
msg : '',
},
apiLogList: [],
selectApiLog : {},
userIdx: 0
};
},
methods: {
//사용자 목록 조회
search: function () {
const vm = this;
axios({
url: '/getApiRequestLog.json',
method: 'post',
headers:{
'Content-Type': "application/json; charset=UTF-8",
},
data: vm.pagenation
}).then(function(response) {
console.log("userSelectList - response : ", response.data);
vm.apiLogList = response.data.apiLogList;
vm.pagenation = response.data.pagenation;
}).catch(function (error) {
console.log("userSelectList - error : ", error);
alert('사용자 목록 조회 오류, 관리자에게 문의해주세요.');
})
},
// 전화번호 '-' 추가 후 출력
HyphenMinus: function (telno) {
return COMMON_UTIL.HyphenMinus(telno);
},
//날짜 시,분,초 자르기
yyyymmdd: function (date) {
return COMMON_UTIL.yyyymmdd(date);
},
change_code : function(v)
{
let result_val = '전체';
if(v==null) v = 0;
if(v == 10){
result_val = '북';
}else if( v == 20){
result_val = '동';
}else if( v == 30){
result_val = '남';
}else if( v == 40){
result_val = '서';
}else if( v == 50){
result_val = '북동';
}else if( v == 60){
result_val = '남동';
}else if( v == 70){
result_val = '남서';
}else if( v == 80){
result_val = '북서';
}
return result_val;
}
},
watch: {},
filters : {
crlsk : function(v){
console.log(value);
let result_val = '전체';
if(v == 10){
result_val = '북';
}else if( v == 20){
result_val = '동';
}else if( v == 30){
result_val = '남';
}else if( v == 40){
result_val = '서';
}else if( v == 50){
result_val = '북동';
}else if( v == 60){
result_val = '남동';
}else if( v == 70){
result_val = '남서';
}else if( v == 80){
result_val = '북서';
}
return result_val;
}
},
computed: {},
components: {
'PaginationButton':PaginationButton,
},
mounted() {
this.search();
},
};
</script>
<style scoped>
@media all and (max-width: 479px) {
.board-wrap{padding: 0 1rem;}
.float-right{display: flow-root; margin: 2rem 0 1rem 0}
.tab-wrap ul{justify-content: center}
.tab{width: 16rem !important;}
.wrap{width: -webkit-fill-available !important; margin: 20px auto !important;}
.mobile{display: block !important;}
.pc{display: none;}
}
.mobile{display: none;}
.wrap {
width: 155rem;
margin: 100px auto;
}
.tab-wrap {
margin-bottom: 30px;
}
.tab-wrap ul {
display: flex;
gap: 2rem;
}
.tab {
display: inline-block;
width: 20rem;
height: 3rem;
line-height: 3rem;
text-align: center;
border-radius: 5px;
background: #fff;
color: #949292;
border: 1px solid #949292;
}
.tab.active {
background: #13833b;
color: #fff;
border-color: #13833b;
}
.search-wrap {
margin-bottom: 15px;
}
.search-wrap input,
.search-wrap select {
height: 30.5px;
padding: 5px;
border-radius: 3px;
border: 1px solid #949292;
}
.float-left {
float: left;
align-items: flex-start;
}
.float-right {
float: right;
align-items: flex-start;
}
.clear-fix::after {
content: "";
display: block;
clear: both;
}
.search-wrap .float-right form>*:not(:last-child) {
margin-right: 1rem;
}
h2.page-title {
font-size: 24px;
}
hr.margin {
margin: 30px 0;
}
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: 15px 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;
}
.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-2 {
display: inline-block;
padding: 0.3rem 2rem;
font-size: 13.333px;
}
.green-btn {
background: #13833b;
border: 0;
border-radius: 5px;
color: #fff;
height: 30.5px;
padding: 5px;
width: 75px;
}
.btn-wrap {
position: absolute;
right: 0;
top: 1.5em;
z-index: 10;
}
.select_row{
background: #ffbe5f !important;
color: white;
}
</style>