File name
Commit message
Commit date
File name
Commit message
Commit date
04-04
File name
Commit message
Commit date
04-04
04-04
File name
Commit message
Commit date
04-04
04-04
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="search-bar">
<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"
v-model="searchDate.startDt"
@change="validateDate($event, 'startDt')"
/> -->
<div>-</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"
v-model="searchDate.endDt"
@change="validateDate($event, 'endDt')"
/> -->
<button class="btn sm main" @click="axiosSelectList">
조회
</button>
<button
class="large-btn green-border-btn"
v-if="pageAuth.fileDwnldAuthrt == 'Y'"
@click="fnDownload"
>
다운로드
</button>
</div>
<div class="content-zone sch-full">
<div class="content">
<div class="scroll">
<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">
<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: vm.$filters.ctxPath("/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>