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 admin-style 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-6 flex justify-start align-center">
<div class="gd-4 pl0">
<input
type="date"
class="full-input"
v-model="searchDate.startDt"
@change="validateDate($event, 'startDt')"
/>
</div>
<div>-</div>
<div class="gd-4">
<input
type="date"
class="full-input"
v-model="searchDate.endDt"
@change="validateDate($event, 'endDt')"
/>
</div>
<div class="gd-2">
<button class="large-btn blue-border-btn" @click="axiosSelectList">
조회
</button>
</div>
</div>
<div class="gd-1">
<button
class="large-btn green-border-btn"
v-if="pageAuth.fileDwnldAuthrt == 'Y'"
@click="fnDownload"
>
다운로드
</button>
</div>
</div>
<div class="chart-zone mb30" v-show="menuCnt > 0">
<div class="chart-info">
<p class="detail-text">
방문자 총
<span class="detail-bold blue">{{ totalCnt }}</span>
명
</p>
</div>
<div class="chart-wrap" ref="chartdiv" :style="heightStyle">
<ClusteredBarChart :chartData="chartData" columnX="menu" />
</div>
</div>
<div class="table-zone">
<table class="list-table admin-list complex-table">
<colgroup>
<col width="25%" />
<col width="25%" />
<col width="25%" />
<col width="25%" />
</colgroup>
<thead>
<tr>
<th rowspan="2">구분</th>
<th colspan="3">사용자 구분</th>
</tr>
<tr>
<th class="text-ct">관리자</th>
<th class="text-ct">사용자</th>
<th class="text-ct">비로그인 사용자</th>
</tr>
</thead>
<tbody>
<template v-if="menuCnt > 0">
<tr v-for="(tr, index) of chartData" :key="index">
<td class="text-ct">{{ tr.menu }}</td>
<td class="text-rg">{{ tr["관리자"] }}</td>
<td class="text-rg">{{ tr["사용자"] }}</td>
<td class="text-rg">{{ tr["비로그인 사용자"] }}</td>
</tr>
</template>
<template v-else>
<tr>
<td colspan="4" class="text-ct">
등록된 정보가 존재하지 않습니다.
</td>
</tr>
</template>
</tbody>
</table>
</div>
</div>
</template>
<script>
import defaultAxios from "../../../../resources/js/defaultAxios";
import html2canvas from "html2canvas";
import ClusteredBarChart from "../../../component/chart/ClusteredBarChart.vue";
import statisticsDate from "../../../../resources/js/defaultDateParams";
// API
import { selectMenuCntnStatsProc } from "../../../../resources/api/cntnStats";
export default {
mixins: [statisticsDate],
components: {
ClusteredBarChart: ClusteredBarChart,
},
data() {
return {
// 페이지 권한 객체
pageAuth: JSON.parse(localStorage.getItem("vuex")).pageAuth,
// 차트 데이터
chartData: [],
// 전체 수
totalCnt: 0,
// 메뉴 수
menuCnt: 0,
// 차트 높이 스타일
heightStyle: {},
};
},
created() {
this.axiosSelectList();
},
methods: {
// 메뉴별 접속 통계
async axiosSelectList() {
// 유효성 검사
if (this.searchDate.startDt == null || this.searchDate.startDt == "") {
alert("시작일을 선택하세요.");
this.searchDate.startDt = null;
return;
}
if (this.searchDate.endDt == null || this.searchDate.endDt == "") {
alert("종료일을 선택하세요.");
this.searchDate.endDt = null;
return;
}
// 데이터 세팅
let data = this.searchDate;
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["menu_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;
this.heightStyle = {
height: 100 + 100 * datas.length + "px",
};
this.menuCnt = response.data.data.menuCnt;
} catch (error) {
alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
}
},
// 다운로드
fnDownload() {
const vm = this;
const chartdiv = vm.$refs.chartdiv;
html2canvas(chartdiv).then(function (canvas) {
// 데이터 세팅
let cntnStats = [];
for (let item of vm.chartData) {
cntnStats.push({
date: item.menu,
admin: item["관리자"],
user: item["사용자"],
none: item["비로그인 사용자"],
});
}
// 폼데이터
var formData = new FormData();
const cntnStatsToBlob = new Blob([JSON.stringify(cntnStats)], {
type: "application/json; charset=UTF-8",
});
formData.append("cntnStats", cntnStatsToBlob);
let imageData = canvas.toDataURL("image/png");
imageData.replace("data:image/png; base64, ", "");
const chartToBlob = new Blob([imageData], {
type: "application/json; charset=UTF-8",
});
formData.append("chart", chartToBlob);
// 실행
defaultAxios({
url: "/sys/cntnStats/excelDownload.file",
method: "post",
headers: {
"Content-Type": "multipart/form-data; charset=UTF-8",
Authorization: vm.$store.state.authorization,
},
data: formData,
responseType: "blob",
})
.then((response) => {
const url = window.URL.createObjectURL(
new Blob([response.data], {
type: response.headers["content-type"],
})
);
let today = new Date().toISOString().substring(2, 10);
today = today.replace(/[^0-9]/g, "");
const link = document.createElement("a");
link.href = url;
link.setAttribute(
"download",
`[${today}]메뉴별접속통계(기업용)_${vm.searchDate.startDt}_${vm.searchDate.endDt}.xlsx`
);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(url);
})
.catch((error) => {
alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
});
});
},
},
};
</script>
<style scoped>
.chart-wrap {
height: 1000px;
}
</style>