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="flex mb30">
<div class="gd-6 pl0">
<div class="admin-sec-title point-font2">
<p class="mb10">팝업관리</p>
</div>
<ListTable
:colgroup="colgroup"
:thead="thead"
:tbody="tbody"
:className="'admin-list cmmn-table'"
@listClick="fnPopupViewDetail"
/>
</div>
<div class="gd-6 pr0">
<div class="admin-sec-title point-font2">
<p class="mb10">최근 등록 글</p>
</div>
<ListTable
:colgroup="colgroup2"
:thead="thead2"
:tbody="tbody2"
:className="'admin-list cmmn-table'"
@listClick="fnBbsCnViewDetail"
/>
</div>
</div>
<div class="flex mb15">
<div class="gd-4 pl0">
<div class="box">
<p class="box-title point-font2 mb10">오늘 방문자 수</p>
<p class="box-content text-rg">
{{ cntnStats.dayCnt.toLocaleString("ko-KR") }}
</p>
</div>
</div>
<div class="gd-4">
<div class="box">
<p class="box-title point-font2 mb10">이번달 방문자 수</p>
<p class="box-content text-rg">
{{ cntnStats.mmCnt.toLocaleString("ko-KR") }}
</p>
</div>
</div>
<div class="gd-4 pr0">
<div class="box">
<p class="box-title point-font2 2mb10">총 방문자 수</p>
<p class="box-content text-rg">
{{ cntnStats.totalCnt.toLocaleString("ko-KR") }}
</p>
</div>
</div>
</div>
<div class="chart-zone">
<div class="admin-sec-title point-font2">
<p class="mb10">방문자 접속 통계</p>
</div>
<div class="box" style="height: 320px">
<div class="chart-wrap" ref="chartdiv" style="height: 100%">
<ClusteredColumnChart :chartData="chartData" columnX="date" />
</div>
</div>
</div>
</div>
</template>
<script>
import ListTable from "../../../component/table/ListTable.vue";
import ClusteredColumnChart from "../../../component/chart/ClusteredColumnChart.vue";
import { defaultSearchParams } from "../../../../resources/js/defaultSearchParams";
import queryParams from "../../../../resources/js/queryParams";
import cntnStatsSave from "../../../../resources/js/cntnStatsSave";
// API
import {
adminMainProc
} from "../../../../resources/api/main";
import { findBySysMenu } from "../../../../resources/api/menu";
const App = {
mixins: [queryParams, cntnStatsSave],
components: {
ListTable: ListTable,
ClusteredColumnChart: ClusteredColumnChart,
},
data: () => {
return {
menuList: [],
resetSearch: { ...defaultSearchParams },
// 팝업관리
colgroup: ["10%", "20%", "15%", "20%", "20%", "15%"],
thead: ["NO", "제목", "사용여부", "시작일", "종료일", "작성자"],
tbody: [],
popupList: [],
// 게시판
colgroup2: ["10%", "50%", "10%", "20%"],
thead2: ["NO", "제목", "작성자", "작성일"],
tbody2: [],
bbsCnList: [],
// 통계
cntnStats: {
dayCnt: 0, // 오늘 방문자 수
mmCnt: 0, // 이번달 방문자 수
totalCnt: 0, // 총 방문자 수
},
chartData: [],
};
},
created() {
this.reSetMenu();
this.fnMenuList();
this.fnAdminMain();
},
methods: {
// 메뉴 초기화
reSetMenu() {
this.$store.commit("setMenu", null);
},
// 전체 조회
async fnAdminMain() {
try {
const response = await adminMainProc();
this.popupList = response.data.data.popupMng;
this.bbsCnList = response.data.data.bbsCnNew;
this.cntnStats.dayCnt = response.data.data.cntnDayCnt;
this.cntnStats.mmCnt = response.data.data.cntnMmCnt;
this.cntnStats.totalCnt = response.data.data.cntnTotalCnt;
// 팝업관리
if (response.data.data.popupMng.length > 0) {
this.tbody = [];
this.tbody = this.popupList.map((popup, idx) => ({
id: 5 - idx,
popupTtl: popup.popupTtl,
useYn:
popup.popupUseYn == "Y"
? "사용"
: popup.popupUseYn == "N"
? "미사용"
: null,
bgngDt: popup.bgngDt,
endDt: popup.endDt,
mbrNm: popup.mbrNm,
}));
}
// 최근등록글
if (response.data.data.bbsCnNew.length > 0) {
this.tbody2 = [];
this.tbody2 = this.bbsCnList.map((bbs, idx) => ({
id: 5 - idx,
ttl:
bbs.type == "faq"
? this.fnFindBbsTitle(bbs)
: "[" + bbs.nm + "] " + bbs.ttl,
writer: bbs.writer,
dt: bbs.dt,
}));
}
// 차트 데이터
let datas = [];
for (let data of response.data.data.monthCntnStats) {
let newData = {};
newData["date"] = data["dates"];
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;
} catch (error) {
alert("에러가 발생했습니다.\n시스템관리자에게 문의하세요.");
}
},
// 게시판 제목 출력
fnFindBbsTitle(data) {
let cn = data.cn.replace(/<[^>]*>?/g, "");
let isAnser = data.ans != null ? "응답" : "미응답";
return "[" + data.nm + "] " + "[" + isAnser + "] " + cn;
},
// 메뉴 조회
async fnMenuList() {
try {
const params = {
roles: this.$store.state.roles.map((auth) => auth.authority),
menuType: this.$store.state.userType,
};
const response = await findBySysMenu(params);
if (response.status == 200) {
this.menuList = response.data.data.menuList;
}
} catch (error) {
alert("에러가 발생했습니다.\n시스템관리자에게 문의하세요.");
}
},
// 팝업 최신글 상세 보기
async fnPopupViewDetail(idx) {
this.saveQueryParams("queryParams", this.resetSearch);
this.$store.commit(
"setMenu",
this.findMenu(this.menuList, "MENU_000000000000012")
);
await this.cntnStatsSave("MENU_000000000000034");
this.$router.push({
name: "admPopupManagementSelectOne",
query: {
pageId: this.popupList[idx]["popupId"],
},
});
},
// 게시판 최신글 상세 보기
async fnBbsCnViewDetail(idx) {
this.saveQueryParams("queryParams", this.resetSearch);
let depth1 = this.findMenu(this.menuList, "MENU_000000000000011");
this.$store.commit("setMenu", depth1);
for (let menu of depth1.childList) {
if (menu.menuTypeCtgry == this.bbsCnList[idx]["id"]) {
await this.cntnStatsSave(menu.menuId);
}
}
if (this.bbsCnList[idx].type == "faq") {
this.$router.push({
path: "/adm/" + this.bbsCnList[idx]["mng_id"] + "/list.page",
});
} else {
this.$router.push({
path: "/adm/" + this.bbsCnList[idx]["mng_id"] + "/view.page",
query: {
pageId: this.bbsCnList[idx]["id"],
},
});
}
},
// 메뉴 정보 찾기
findMenu(menuList, menuId) {
for (let menu of menuList) {
if (menu.menuId == menuId) {
return menu;
}
}
},
},
};
export default App;
</script>