File name
Commit message
Commit date
05-22
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">
<div class="content">
<div class="scroll">
<div class="top-zone">
<div class="popup-table">
<div class="section-title">
<p>팝업관리</p>
</div>
<div class="tbl-wrap">
<ListTable
:colgroup="colgroup"
:thead="thead"
:tbody="tbody"
:className="'data cursor'"
@listClick="fnPopupViewDetail"
/>
</div>
</div>
<div class="new-table">
<div class="section-title">
<p>최근 등록 글</p>
</div>
<div class="tbl-wrap">
<ListTable
:colgroup="colgroup2"
:thead="thead2"
:tbody="tbody2"
:className="'data cursor'"
@listClick="fnBbsCnViewDetail"
/>
</div>
</div>
</div>
<div class="middle-zone">
<div class="first-box">
<div class="box">
<div class="between">
<div>
<p class="box-title">오늘 방문자 수</p>
<span></span>
</div>
<p class="box-content">
{{ cntnStats.dayCnt.toLocaleString("ko-KR") }}
</p>
</div>
</div>
</div>
<div class="two-box">
<div class="box">
<div class="between">
<div>
<p class="box-title">이번달 방문자 수</p>
<span></span>
</div>
<p class="box-content">
{{ cntnStats.mmCnt.toLocaleString("ko-KR") }}
</p>
</div>
</div>
</div>
<div class="three-box">
<div class="box">
<div class="between">
<div>
<p class="box-title">총 방문자 수</p>
<span></span>
</div>
<p class="box-content">
{{ cntnStats.totalCnt.toLocaleString("ko-KR") }}
</p>
</div>
</div>
</div>
</div>
<div class="chart-zone">
<div class="section-title">
<p >방문자 접속 통계</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>
</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";
import { sysListByPageProc } from "../../../../resources/api/popup";
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() {
// 쿠키 초기화
const today = new Date();
let tomorrow = new Date(today.setDate(today.getDate() + 1));
tomorrow.setHours(0, 0, 0, 0);
tomorrow = new Date(tomorrow);
if (this.$cookies.get("popup") == null) {
this.$cookies.set("popup", [], tomorrow);
}
this.fnPopupList();
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: idx + (this.popupList.length - (2 * 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: idx + (this.bbsCnList.length - (2 * 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["acsr_cnt"][i];
}
datas.push(newData);
}
this.chartData = datas;
} catch (error) {
const errorData = error.response.data;
if (errorData.message != null && errorData.message != "") {
alert(error.response.data.message);
} else {
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) {
const errorData = error.response.data;
if (errorData.message != null && errorData.message != "") {
alert(error.response.data.message);
} else {
alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
}
}
},
// 팝업 최신글 상세 보기
async fnPopupViewDetail(idx) {
this.saveQueryParams("queryParams", this.resetSearch);
this.$store.commit(
"setMenu",
this.findMenu(this.menuList, "MENU_000000000000011")
);
await this.cntnStatsSave("MENU_000000000000029");
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_000000000000010");
this.$store.commit("setMenu", depth1);
for (let menu of depth1.childList) {
if (menu.menuTypeArtcl == this.bbsCnList[idx]["id"]) {
await this.cntnStatsSave(menu.menuId);
}
}
if (this.bbsCnList[idx].type == "faq") {
this.$router.push({
path: this.$filters.ctxPath("/adm/") + this.bbsCnList[idx]["mng_id"] + "/list.page",
});
} else {
this.$router.push({
path: this.$filters.ctxPath("/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;
}
}
},
// 팝업조회(상세)
async fnPopupList() {
let data = {
pageType: this.$store.state.userType,
};
try {
const response = await sysListByPageProc(data);
let popupList = response.data.data;
if (popupList != null && popupList.length > 0) {
this.fnShowPopup(popupList);
}
} catch (error) {
const errorData = error.response.data;
if (errorData.message != null && errorData.message != "") {
alert(error.response.data.message);
} else {
alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
}
}
},
// 팝업 표시
fnShowPopup(popupList) {
for (let popup of popupList) {
let count = false;
const popupCookies = this.$cookies.get("popup");
if (popupCookies.length > 0) {
for (let cookie of popupCookies) {
if (popup.popupId == cookie) {
count = true;
}
}
}
if (!count) {
const width = popup.wdthLen;
const height = popup.vrtcLen;
const screenX = window.screenX ?? window.screenLeft;
const screenY = window.screenY ?? window.screenTop;
const outerWidth = window.outerWidth ?? document.documentElement.clientWidth;
const outerHeight = window.outerHeight ?? document.documentElement.clientHeight;
const left = screenX + (outerWidth - width) / 2;
const top = screenY + (outerHeight - height) / 2;
const specs = `width=${width},height=${height},left=${left},top=${top},scrollbars=no,resizable=no,toolbars=no,menubar=no`;
let size = "width=" + popup.wdthLen + ", height=" + popup.vrtcLen;
window.open(
"/cmmn/popup.page?popupId=" + popup.popupId,
"_blank",
specs
// size + ", scrollbars=no, resizable=no, toolbars=no, menubar=no"
);
}
}
},
},
};
export default App;
</script>