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: 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 logListByDate" :key="index">
<td>{{ item.post_title }}</td>
<td>{{ item.total }}</td>
<td>{{ item.company }}</td>
<td>{{ item.common }}</td>
</tr>
<tr v-if="logListByDateCount == 0">
<td style="font-size: 20px; text-align: center;" colspan="4">검색조건에 해당하는 데이터가 없습니다.</td>
</tr>
</tbody>
</table>
<table class="statistics-down-table" v-else>
<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 rowspan="2">파일명</th>
<th colspan="3">전문가협의체</th>
</tr>
<tr>
<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>
</tr>
<tr v-if="logListByDateCount == 0">
<td style="font-size: 20px; text-align: center;" colspan="5">검색조건에 해당하는 데이터가 없습니다.</td>
</tr>
</tbody>
</table>
<table class="sum-table" v-if="selectType == 'view'">
<colgroup>
<col style="width: 25%;"/>
<col style="width: 25%;"/>
<col style="width: 25%;"/>
<col style="width: 25%;"/>
</colgroup>
<tbody>
<tr>
<th>합계</th>
<td>{{ logTotalCount.total }}</td>
<td>{{ logTotalCount.company }}</td>
<td>{{ logTotalCount.common }}</td>
</tr>
</tbody>
</table>
<table class="sum-table" v-else>
<colgroup>
<col style="width: 40%;"/>
<col style="width: 20%;"/>
<col style="width: 20%;"/>
<col style="width: 20%;"/>
</colgroup>
<tbody>
<tr>
<th>합계</th>
<td>{{ logTotalCount.total }}</td>
<td>{{ logTotalCount.company }}</td>
<td>{{ logTotalCount.common }}</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: "일반회원",
},
postListSearch: {
currentPage: 1,
perPage: 7,
startDate: null,
endDate: null,
bbs_id: '4'
},
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>