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-zone full-page">
<div class="content">
<div class="scroll">
<div class="title-zone">
<div class="page-title">
<p>메뉴별 접속 통계</p>
</div>
</div>
<div class="input-group mb30">
<input
type="date"
class="form-control sm"
v-model="searchDate.startDt"
@change="validateDate($event, 'startDt')"
/>
<div>-</div>
<input
type="date"
class="form-control sm"
v-model="searchDate.endDt"
@change="validateDate($event, 'endDt')"
/>
<button class="btn sm primary" @click="axiosSelectList">
조회
</button>
<button
class="large-btn green-border-btn"
v-if="pageAuth.fileDwnldAuthrt == 'Y'"
@click="fnDownload"
>
다운로드
</button>
</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="tbl-wrap">
<table class="tbl data mixing">
<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>
</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>