File name
Commit message
Commit date
File name
Commit message
Commit date
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="chart-page">
<div class="title-wrap">
<div class="flex-start">
<h2 class="main-title">로그인 통계</h2>
</div>
</div>
<div class="top-wrap">
<div class="chart-top">
<div class="flex">
<div class="date-zone flex-start" v-if="type == 'day'">
<!-- <input type="date" name="" id="" min="2023-11-24" :max="loginListSearch.endDate" v-model="loginListSearch.startDate"> -->
<input type="date" name="" id="" :max="loginListSearch.endDate" v-model="loginListSearch.startDate">
<span>~</span>
<!-- <input type="date" name="" id="" :min="loginListSearch.startDate" :max="oneMonthLater" v-model="loginListSearch.endDate"> -->
<input type="date" name="" id="" :min="loginListSearch.startDate" :max="yesterDay" v-model="loginListSearch.endDate">
<button class="blue-btn" @click="loginLogList()">조회</button>
</div>
<div class="month-zone flex-start" v-else-if="type == 'month'">
<!-- <input type="date" name="" id="" min="2023-11-24" :max="visitListSearch.endDate" v-model="visitListSearch.startDate" /> -->
<input type="month" name="" id="" :max="loginListSearchMonth.endDate" v-model="loginListSearchMonth.startDate" />
<span>~</span>
<!-- <input type="date" name="" id="" :min="visitListSearch.startDate" :max="oneMonthLater" v-model="visitListSearch.endDate" /> -->
<input type="month" name="" id="" :min="loginListSearchMonth.startDate" :max="month" v-model="loginListSearchMonth.endDate" />
<button class="blue-btn" @click="loginLogList()">조회</button>
</div>
<div class="year-zone flex-start" v-else-if="type == 'year'"></div>
<div class="date-check flex-end">
<div>
<input type="radio" name="dayCategory" id="day" style="display:none" value="day" @click="valueChange($event)" v-model="type">
<label for="day">일별</label>
</div>
<div>
<input type="radio" name="dayCategory" id="month" style="display:none" value="month" @click="valueChange($event)">
<label for="month">월별</label>
</div>
<div>
<input type="radio" name="dayCategory" id="year" style="display:none" value="year" @click="valueChange($event)">
<label for="year">년도별</label>
</div>
</div>
</div>
</div>
<LineChart :chartData="loginLogListByDate" :keyMapping="keyMap" columnX="날짜" columnY="기업회원"/>
</div>
<div class="table-zone">
<div class="btn-wrap">
<button class="blue-border-bnt" @click="loginLogExcel()">Excel 다운로드</button>
</div>
<table class="statistics-table">
<colgroup>
<col style="width: 25%;"/>
<col style="width: 25%;"/>
<col style="width: 25%;"/>
<col style="width: 25%;"/>
</colgroup>
<thead>
<tr>
<th rowspan="2">일자</th>
<th colspan="3">회원수</th>
</tr>
<tr>
<th>전체</th>
<th>기업회원</th>
<th>일반회원</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in loginLogListByDate" :key="index">
<td>{{ item.stats_date }}</td>
<td>{{ item.total }}</td>
<td>{{ item.cpn_login_cnt }}</td>
<td>{{ item.cmmn_login_cnt }}</td>
</tr>
<tr v-if="loginLogListByDateCount == 0">
<td style="font-size: 20px;" colspan="4">검색조건에 해당하는 데이터가 없습니다.</td>
</tr>
</tbody>
</table>
<table class="sum-table">
<colgroup>
<col style="width: 25%;"/>
<col style="width: 25%;"/>
<col style="width: 25%;"/>
<col style="width: 25%;"/>
</colgroup>
<tbody>
<tr>
<th>합계</th>
<td>{{ loginSelectTotal.total }}</td>
<td>{{ loginSelectTotal.cpn_login_cnt }}</td>
<td>{{ loginSelectTotal.cmmn_login_cnt }}</td>
</tr>
</tbody>
</table>
</div>
<div class="bottom-wrap">
<PaginationButton v-model:currentPage="loginListSearch.currentPage" :perPage="loginListSearch.perPage"
:totalCount="loginLogListByDateCount" :maxRange="5" :click="loginLogList" />
</div>
</div>
</template>
<script>
import axios from 'axios';
import LineChart from '../../../component/chart/LineChart.vue'
import COMMON_UTIL from '../../../../resources/js/commonUtil.js';
import PaginationButton from '../../../component/pagination/PaginationButton.vue';
const App = {
data() {
return {
loginListSearch: {
currentPage: 1,
perPage: 7,
startDate: null,
endDate: null,
},
loginListSearchMonth: {
currentPage: 1,
perPage: 7,
startDate: null,
endDate: null,
},
type: 'day',
// oneMonthLater: COMMON_UTIL.yesterday(),
yesterDay: COMMON_UTIL.yesterday(),
month: null,
loginLogListByDate: [],
loginLogListByDateCount: 0,
loginSelectTotal:{},
keyMap : {
stats_date: '날짜',
total: '전체',
cpn_login_cnt: '기업회원',
cmmn_login_cnt: '비회원',
}
};
},
methods: {
valueChange: function(event) {
this.type = event.target.value;
this.loginLogList();
},
/** 권한 별 로그인 수 날짜 별 통계 */
loginLogList: function () {
const vm = this;
let data = null;
if(vm.type == 'day') {
data = vm.loginListSearch;
data.type = vm.type;
} else {
data = vm.loginListSearchMonth;
data.type = vm.type;
}
axios({
url: '/statistics/loginLogListByDate.json',
method: 'post',
hearder: {
'Content-Type': "application/json; charset=UTF-8",
},
data: data
}).then(function (response) {
vm.loginLogListByDate = response.data.loginLogListByDate;
vm.loginLogListByDateCount = response.data.loginLogListByDateCount;
vm.loginSelectTotal = response.data.loginSelectTotal;
}).catch(function (error) {
console.log("error - ", error)
alert("권한별 로그인 수 조회 오류, 관리자에게 문의하세요.");
})
},
/** 로그인 수 엑셀 다운로드 */
loginLogExcel: function() {
const vm = this;
if(vm.loginLogListByDateCount === 0) {
alert("데이터가 없어 EXCEL 다운로드를 실행할 수 없습니다.")
return
}
axios({
url: "/statistics/loginLogExcel.json",
method: "post",
herders: {
"Content-Type": "application/json; charset=UTF-8",
},
responseType: 'arraybuffer',
data: vm.loginListSearch,
})
.then(function (response) {
// console.log("userAccessLogExcel - 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("userAccessLogExcel - error : ", error);
alert("로그인 수 Excel 다운로드 오류, 관리자에게 문의해주세요.");
});
},
// /**날짜선택 유효성 검사 */
// loginLogListCheck: function() {
// if(COMMON_UTIL.isEmpty(this.loginListSearch.endDate) === false) {
// alert("날짜를 선택해주세요.");
// } else {
// this.loginLogList();
// }
// },
},
watch: {
// 'loginListSearch.startDate': function(newValue) {
// let date = COMMON_UTIL.oneMonthLater(newValue);
// this.loginListSearch.endDate = null;
// if(date > COMMON_UTIL.today()) {
// this.oneMonthLater = COMMON_UTIL.yesterday();
// } else {
// this.oneMonthLater = date;
// }
// },
},
computed: {
},
components: {
'LineChart': LineChart,
PaginationButton: PaginationButton,
},
mounted() {
this.loginLogList();
let today = COMMON_UTIL.today();
this.month = today.substring(0,7);
}
}
export default App;
</script>