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="content overflow-y">
<div class="admin-page-title point-font2 mb30">
<p>게시판 접속 통계</p>
</div>
<div class="flex justify-between aling-center no-gutters mb30">
<div class="gd-7 flex justify-start align-center">
<div class="gd-4 pl0" style="height: 100%">
<select class="full-select">
<option>공지사항</option>
</select>
</div>
<div class="gd-4 pl0" style="height: 100%">
<input type="date" class="full-input" />
</div>
<div>-</div>
<div class="gd-4" style="height: 100%">
<input type="date" class="full-input" />
</div>
<div class="gd-2">
<button class="large-btn blue-border-btn" @click="axiosSelectList">
조회
</button>
</div>
</div>
<div class="gd-5">
<ul class="flex justify-end align-center ">
<li v-for="(content,idx) in tabObject" :key="idx" :class="{ 'tab-toggle pd10 detail-text':true,active: viewTab === content.id }" @click="showTab(content.id)" >{{content.tabName}}</li>
</ul>
</div>
</div>
<div class="tab-content">
<div v-show="viewTab === 'tab1'">
<div class="chart-zone">
<div class="mb30" style="height: 40rem;">
<div class="chart-wrap" ref="chartdiv">
<ClusteredBarChart :chartData="chartData" columnX="menu" />
</div>
</div>
<div class="table-zone">
<div class="flex justify-end align-center mb10">
<div class="gd-2 pd0">
<button
class="large-btn green-border-btn"
v-if="pageAuth.fileDwnldAuthrtYn == 'Y'"
@click="fnDownload"
>
EXCEL 다운로드
</button>
</div>
</div>
<table class="list-table admin-list complex-table">
<colgroup>
<col width="20%" />
<col width="15%" />
<col width="13%" />
<col width="13%" />
<col width="13%" />
<col width="13%" />
<col width="13%" />
</colgroup>
<thead>
<tr>
<th rowspan="2">일자</th>
<th colspan="6">메뉴별 접속자 수</th>
</tr>
<tr>
<th>전체</th>
<th>기술문서</th>
<th>공지사항</th>
<th>콘텐츠/뉴스룸</th>
<th>FAQ</th>
<th>연구자료/기타자료</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-ct"><p class="pl5 pr5">2024-05-15</p></td>
<td class="text-rg"><p class="pl5 pr5">666</p></td>
<td class="text-rg"><p class="pl5 pr5">666</p></td>
<td class="text-rg"><p class="pl5 pr5">666</p></td>
<td class="text-rg"><p class="pl5 pr5">666</p></td>
<td class="text-rg"><p class="pl5 pr5">666</p></td>
<td class="text-rg"><p class="pl5 pr5">666</p></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div v-show="viewTab === 'tab2'">
<div class="chart-zone">
<div class="chart-info">
<p class="detail-text">
다운로드 총 <span class="detail-bold blue">{{ totalCnt }}</span
>건
</p>
</div>
<div class="chart-wrap mb30" ref="chartdiv">
<ClusteredBarChart :chartData="chartData" columnX="menu" />
</div>
<div class="table-zone">
<div class="flex justify-end align-center mb10">
<div class="gd-2 pd0">
<button
class="large-btn green-border-btn"
v-if="pageAuth.fileDwnldAuthrtYn == 'Y'"
@click="fnDownload"
>
EXCEL 다운로드
</button>
</div>
</div>
<table class="list-table admin-list complex-table">
<colgroup>
<col width="20%" />
<col width="15%" />
<col width="13%" />
<col width="13%" />
<col width="13%" />
<col width="13%" />
<col width="13%" />
</colgroup>
<thead>
<tr>
<th rowspan="2">일자</th>
<th colspan="6">메뉴별 파일 다운로드 수</th>
</tr>
<tr>
<th>전체</th>
<th>기술문서</th>
<th>공지사항</th>
<th>콘텐츠/뉴스룸</th>
<th>FAQ</th>
<th>연구자료/기타자료</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-ct"><p class="pl5 pr5">2024-05-15</p></td>
<td class="text-rg"><p class="pl5 pr5">666</p></td>
<td class="text-rg"><p class="pl5 pr5">666</p></td>
<td class="text-rg"><p class="pl5 pr5">666</p></td>
<td class="text-rg"><p class="pl5 pr5">666</p></td>
<td class="text-rg"><p class="pl5 pr5">666</p></td>
<td class="text-rg"><p class="pl5 pr5">666</p></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import ClusteredBarChart from "../../../component/chart/ClusteredBarChart.vue";
// API
import { selectMenuCntnStatsProc } from "../../../../resources/api/cntnStats";
import { keyBy } from "lodash";
export default {
components: {
ClusteredBarChart,
},
data() {
return {
tabObject:[{id:'tab1',tabName:"조회수"},{id:'tab2',tabName:"다운로드수"}],
viewTab:'tab1',
// 페이지 권한 객체
pageAuth: JSON.parse(localStorage.getItem("vuex")).pageAuth,
search: {
startDt: null,
endDt: null,
},
// 차트 데이터
chartData: [],
// 전체 수
totalCnt: 0,
};
},
created() {
let today = new Date();
let date = new Date(today);
date.setDate(today.getDate() - 10);
this.search["startDt"] = this.dateFormat(date);
this.search["endDt"] = this.dateFormat(today);
this.axiosSelectList();
},
methods: {
showTab(tabId){
this.viewTab = tabId
},
dateFormat(date) {
return (
date.getFullYear() +
"-" +
(date.getMonth() + 1 < 9
? "0" + (date.getMonth() + 1)
: date.getMonth() + 1) +
"-" +
(date.getDate() < 9 ? "0" + date.getDate() : date.getDate())
);
},
// 메뉴별 접속 통계
async axiosSelectList() {
let data = this.search;
data["menuMainDepth"] = "MENU_000000000000002"
data["startDt"] = this.dateFormat(new Date(data["startDt"]));
data["endDt"] = this.dateFormat(new Date(data["endDt"]));
try {
const response = await selectMenuCntnStatsProc(data);
let datas = [];
for (let data of response.data.data.list) {
let newData = {};
newData["menu"] = data["name"];
for (let i = 0; i < data["authrt_nm"].length; i++) {
newData[data["authrt_nm"][i]] = data["cntn_nope"][i];
}
datas.push(newData);
}
this.chartData = datas;
this.totalCnt = response.data.data.totalCnt;
} catch (error) {
alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
}
},
// 다운로드
fnDownload() {
console.log("fnDownload 실행");
},
},
};
</script> -->