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="chart-top">
<div class="flex">
<div class="date-zone flex-start">
<input type="date" name="" id="" :max="visitListSearch.endDate" v-model="visitListSearch.startDate" />
<span>~</span>
<input type="date" name="" id="" :min="visitListSearch.startDate" :max="oneMonthLater"
v-model="visitListSearch.endDate" />
<button class="blue-btn">조회</button>
</div>
<div class="date-check flex-end">
<div>
<input type="radio" name="dayCategory" id="day" style="display:none" value="day"
v-model="visitListSearch.type">
<label for="day">일별</label>
</div>
<div>
<input type="radio" name="dayCategory" id="month" style="display:none" value="month"
v-model="visitListSearch.type">
<label for="month">월별</label>
</div>
<div>
<input type="radio" name="dayCategory" id="year" style="display:none" value="year"
v-model="visitListSearch.type">
<label for="year">년도별</label>
</div>
</div>
</div>
</div>
<LineChart :chartData="visitList" :keyMapping="keyMap" columnX="날짜" columnY="기업회원 방문자수" />
<div class="table-zone">
<div class="btn-wrap">
<button class="blue-border-bnt">Excel 다운로드</button>
</div>
<table>
<thead>
<tr>
<th rowspan="2">일자</th>
<th colspan="4">방문자수</th>
</tr>
<tr>
<th>전체</th>
<th>기업회원</th>
<th>일반회원</th>
<th>비회원</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in visitList" :key="index">
<td>{{ item.stats_date }}</td>
<td>{{ item.total_cnt }}</td>
<td>{{ item.cpn_vst_cnt }}</td>
<td>{{ item.cmmn_vst_cnt }}</td>
<td>{{ item.non_vst_cnt }}</td>
</tr>
</tbody>
</table>
</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 {
visitListSearch: {
currentPage: 1,
perPage: 7,
startDate: COMMON_UTIL.oneMonthAgo(COMMON_UTIL.yesterday()),
endDate: COMMON_UTIL.yesterday(),
type: 'day'
},
oneMonthLater: COMMON_UTIL.yesterday(),
visitList: [],
keyMap : {
cmmn_vst_cnt: '일반회원 방문자수',
cpn_vst_cnt: '기업회원 방문자수',
non_vst_cnt: '비회원 방문자수',
stats_date: '날짜',
total_cnt: '총 방문자수',
}
};
},
methods: {
/** 방문자 수 날짜 별 통계 */
visitSelectList: function () {
const vm = this;
axios({
url: '/statistics/visitSelectList.json',
method: 'post',
hearder: {
'Content-Type': "application/json; charset=UTF-8",
},
data: vm.visitListSearch
}).then(function (response) {
vm.visitList = response.data
}).catch(function (error) {
console.log("error - ", error)
alert("방문자 수 조회 오류, 관리자에게 문의하세요.");
})
},
},
watch: {
'visitListSearch.startDate': function(newValue) {
let date = COMMON_UTIL.oneMonthLater(newValue);
this.visitListSearch.endDate = null;
if(date > COMMON_UTIL.today()) {
this.oneMonthLater = COMMON_UTIL.yesterday();
} else {
this.oneMonthLater = date;
}
},
},
computed: {
},
components: {
'LineChart': LineChart,
PaginationButton: PaginationButton,
},
created() {
},
mounted() {
this.visitSelectList();
}
}
export default App;
</script>