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">
<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" style="height: 100%">
<VueDatePicker
v-model="search.startDt"
:enable-time-picker="false"
placeholder="시작일"
locale="ko"
inputFormat="yyyy-mm-dd"
/>
</div>
<div>-</div>
<div class="gd-4" style="height: 100%">
<VueDatePicker
v-model="search.endDt"
:enable-time-picker="false"
placeholder="종료일"
locale="ko"
inputFormat="yyyy-mm-dd"
/>
</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.fileDwnldAuthrtYn == 'Y'"
@click="fnDownload"
>
다운로드
</button>
</div>
</div>
<div class="chart-zone">
<div class="mb30" style="height: 40rem;">
<div class="chart-wrap" ref="chartdiv">
<ClusteredBarChart :chartData="chartData" columnX="menu" />
</div>
</div>
</div>
</div>
</template>
<script>
import VueDatePicker from "@vuepic/vue-datepicker";
import ClusteredBarChart from "../../../component/chart/ClusteredBarChart.vue";
// API
import { selectMenuCntnStatsProc } from "../../../../resources/api/cntnStats";
export default {
components: {
VueDatePicker,
ClusteredBarChart,
},
data() {
return {
// 페이지 권한 객체
pageAuth: JSON.parse(localStorage.getItem("vuex")).pageAuth,
search: {
startDt: null,
endDt: null,
},
// 차트 데이터
chartData: [],
// 전체 수
totalCnt: 0,
// 차트 높이 스타일
heightStyle: {},
};
},
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: {
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_000000000000003";
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;
this.heightStyle = {
height: 100 * datas.length + "px",
};
} catch (error) {
alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
}
},
// 다운로드
fnDownload() {
console.log("fnDownload 실행");
},
},
};
</script> -->