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">
<!-- <input type="date" name="" id="" min="2023-11-24" :max="postListSearch.endDate" v-model="postListSearch.startDate"> -->
<input type="date" name="" id="" :max="postListSearch.endDate" v-model="postListSearch.startDate">
<span>~</span>
<!-- <input type="date" name="" id="" :min="postListSearch.startDate" :max="oneMonthLater" v-model="postListSearch.endDate"> -->
<input type="date" name="" id="" :min="postListSearch.startDate" :max="yesterDay" v-model="postListSearch.endDate">
<button class="blue-btn" @click="typeCheck()">조회</button>
</div>
<div class="date-check flex-end">
<div>
<input type="radio" name="dayCategory" value="view" id="check" style="display:none" @change="typeCheck()" v-model="selectType">
<label for="check">조회수</label>
</div>
<div>
<input type="radio" name="dayCategory" value="dwld" id="download" style="display:none" @change="typeCheck()" v-model="selectType">
<label for="download">다운로드수</label>
</div>
</div>
</div>
</div>
<BarChart :chartData="logListByDate" :mapping="keyMapping" columnX="post_title"/>
</div>
<div class="table-zone">
<div class="btn-wrap">
<button class="blue-border-bnt" @click="logExcel()">Excel 다운로드</button>
</div>
<table class="statistics-view-table" v-if="selectType == 'view'">
<colgroup>
<col style="width: 20%;"/>
<col style="width: 20%;"/>
<col style="width: 20%;"/>
<col style="width: 20%;"/>
<col style="width: 20%;"/>
</colgroup>
<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 logListByDate" :key="index">
<td>{{ item.post_title }}</td>
<td>{{ item.total }}</td>
<td>{{ item.company }}</td>
<td>{{ item.common }}</td>
<td>{{ item.non }}</td>
</tr>
<tr v-if="logListByDateCount == 0">
<td style="font-size: 20px; text-align: center;" colspan="5">검색조건에 해당하는 데이터가 없습니다.</td>
</tr>
</tbody>
</table>
<table class="statistics-down-table" v-else>
<colgroup>
<col style="width: 20%;"/>
<col style="width: 20%;"/>
<col style="width: 15%;"/>
<col style="width: 15%;"/>
<col style="width: 15%;"/>
<col style="width: 15%;"/>
</colgroup>
<thead>
<tr>
<th rowspan="2">게시글명</th>
<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 logListByDate" :key="index">
<td>{{ item.title }}</td>
<td>{{ item.real_file_nm }}</td>
<td>{{ item.total }}</td>
<td>{{ item.company }}</td>
<td>{{ item.common }}</td>
<td>{{ item.non }}</td>
</tr>
<tr v-if="logListByDateCount == 0">
<td style="font-size: 20px; text-align: center;" colspan="6">검색조건에 해당하는 데이터가 없습니다.</td>
</tr>
</tbody>
</table>
<table class="sum-table" v-if="selectType == 'view'">
<colgroup>
<col style="width: 20%;"/>
<col style="width: 20%;"/>
<col style="width: 20%;"/>
<col style="width: 20%;"/>
<col style="width: 20%;"/>
</colgroup>
<tbody>
<tr>
<th>합계</th>
<td>전체합계</td>
<td>기업회원합계</td>
<td>일반회원합계</td>
<td>비회원합계</td>
</tr>
</tbody>
</table>
<table class="sum-table" v-else>
<colgroup>
<col style="width: 40%;"/>
<col style="width: 15%;"/>
<col style="width: 15%;"/>
<col style="width: 15%;"/>
<col style="width: 15%;"/>
</colgroup>
<tbody>
<tr>
<th>합계</th>
<td>전체합계</td>
<td>기업회원합계</td>
<td>일반회원합계</td>
<td>비회원합계</td>
</tr>
</tbody>
</table>
</div>
<div class="bottom-wrap">
<PaginationButton v-model:currentPage="postListSearch.currentPage" :perPage="postListSearch.perPage"
:totalCount="logListByDateCount" :maxRange="5" :click="typeCheck" />
</div>
</div>
</template>
<script>
import axios from 'axios';
import BarChart from '../../../component/chart/BarChart.vue';
import COMMON_UTIL from '../../../../resources/js/commonUtil.js';
import PaginationButton from '../../../component/pagination/PaginationButton.vue';
const App = {
data() {
return {
keyMapping: {
post_title: "제목",
total: "전체",
company: "기업회원",
common: "일반회원",
non: "비회원"
},
postListSearch: {
currentPage: 1,
perPage: 7,
startDate: null,
endDate: null,
bbs_id: '1'
},
yesterDay: COMMON_UTIL.yesterday(),
logListByDate: [],
logListByDateCount: 0,
logTotalCount: {},
selectType: 'view'
};
},
methods: {
/** 권한 별 로그인 수 날짜 별 통계 */
postLogList: function () {
const vm = this;
axios({
url: '/statistics/postLogListByDate.json',
method: 'post',
hearder: {
'Content-Type': "application/json; charset=UTF-8",
},
data: vm.postListSearch
}).then(function (response) {
vm.logListByDate = response.data.postLogListByDate;
vm.logListByDateCount = response.data.postLogListByDateCount;
vm.logTotalCount = response.data.postLogTotal;
}).catch(function (error) {
console.log("error - ", error)
alert("게시글 별 조회수 조회 오류, 관리자에게 문의하세요.");
})
},
/** 권한 별 파일 다운로드 수 날짜 별 통계 */
dwldLogList: function () {
const vm = this;
axios({
url: '/statistics/postDwldLogListByDate.json',
method: 'post',
hearder: {
'Content-Type': "application/json; charset=UTF-8",
},
data: vm.postListSearch
}).then(function (response) {
vm.logListByDate = response.data.postDwldLogListByDate;
vm.logListByDateCount = response.data.postDwldLogListByDateCount;
vm.logTotalCount = response.data.postDwldLogTotal;
}).catch(function (error) {
console.log("error - ", error)
alert("게시글 별 조회수 조회 오류, 관리자에게 문의하세요.");
})
},
/** 권한 별 게시글 조회수 엑셀 다운로드 */
logExcel: function() {
const vm = this;
if(vm.logListByDateCount === 0) {
alert("데이터가 없어 EXCEL 다운로드를 실행할 수 없습니다.");
return
}
if(vm.selectType == 'view') {
axios({
url: "/statistics/postLogExcel.json",
method: "post",
herders: {
"Content-Type": "application/json; charset=UTF-8",
},
responseType: 'arraybuffer',
data: vm.postListSearch,
})
.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 다운로드 오류, 관리자에게 문의해주세요.");
});
} else {
axios({
url: "/statistics/postDwldLogExcel.json",
method: "post",
herders: {
"Content-Type": "application/json; charset=UTF-8",
},
responseType: 'arraybuffer',
data: vm.postListSearch,
})
.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 다운로드 오류, 관리자에게 문의해주세요.");
});
}
},
typeCheck: function() {
if(this.selectType == 'view') {
this.postLogList();
} else {
this.dwldLogList();
}
},
/**날짜선택 유효성 검사 */
dateCheck: function() {
if(COMMON_UTIL.isEmpty(this.postListSearch.endDate) === false) {
alert("날짜를 선택해주세요.");
} else {
if(this.selectType == 'view') {
this.postLogList();
} else {
this.dwldLogList();
}
}
},
},
watch: {
// 'postListSearch.startDate': function(newValue) {
// let date = COMMON_UTIL.oneMonthLater(newValue);
// this.postListSearch.endDate = null;
// if(date > COMMON_UTIL.today()) {
// this.oneMonthLater = COMMON_UTIL.yesterday();
// } else {
// this.oneMonthLater = date;
// }
// },
},
computed: {
},
components: {
'BarChart': BarChart,
PaginationButton: PaginationButton,
},
mounted() {
this.postLogList();
}
}
export default App;
</script>