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="search-bar mb30">
<div class="form-control sm cal">
<VueDatePicker
InlineOptions
placeholder="시작일"
locale="ko"
:enable-time-picker="false"
:format="formatDate"
v-model="searchDate.startDt"
@update:model-value="validateDate($event, 'startDt')"
/>
</div>
<!-- <input
type="date"
class="form-control sm datepicker"
v-model="searchDate.startDt"
@change="validateDate($event, 'startDt')"
/> -->
<div class="mark">-</div>
<div class="form-control sm cal">
<VueDatePicker
InlineOptions
placeholder="종료일"
locale="ko"
:enable-time-picker="false"
:format="formatDate"
v-model="searchDate.endDt"
@update:model-value="validateDate($event, 'endDt')"
/>
</div>
<!-- <input
type="date"
class="form-control sm datepicker"
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' && bbsCnt > 0"
@click="fnDownload"
>
다운로드
</button>
</div>
<div class="chart-zone mb30" v-show="bbsCnt > 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="bbsCnt > 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 { selectBbsCntnStatsProc } from "../../../../resources/api/cntnStats";
export default {
mixins: [statisticsDate],
components: {
ClusteredBarChart: ClusteredBarChart,
},
data() {
return {
// 페이지 권한 객체
pageAuth: JSON.parse(localStorage.getItem("vuex")).pageAuth,
// 차트 데이터
chartData: [],
// 전체 수
totalCnt: 0,
// 게시판 수
bbsCnt: 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["startDt"] = this.dateFormat(new Date(data["startDt"]));
data["endDt"] = this.dateFormat(new Date(data["endDt"]));
// 실행
try {
const response = await selectBbsCntnStatsProc(data);
if (response.data.data.bbsCnt > 0) {
let datas = [];
for (let data of response.data.data.list) {
let newData = {};
newData["menu"] = data["bbs_nm"];
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.bbsCnt = response.data.data.bbsCnt;
}
} 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관리자에게 문의해주세요.");
});
});
},
// 날짜포맷
formatDate(date) {
const year = date.getFullYear();
const month = ('00' + (date.getMonth() + 1)).slice(-2);
const day = ('00' + date.getDate()).slice(-2);
return `${year}-${month}-${day}`;
}
},
};
</script>