mirror of
http://git.mhez-qa.uplus.co.kr/hubez/hubez-admin.git
synced 2026-01-28 05:32:15 +09:00
서비스관리 / 알림톡 템플릿관리 추가
This commit is contained in:
kimre
@@ -1,433 +1,433 @@
|
||||
<template>
|
||||
<article id="content" class="content">
|
||||
<ul class="breadcrumb">
|
||||
<li class="home">
|
||||
<a href="javascript:void(0);">홈</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:void(0);">발송통계</a>
|
||||
</li>
|
||||
<li>
|
||||
<span>상품별통계</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="title_area">
|
||||
<h2>상품별통계</h2>
|
||||
</div>
|
||||
<div class="tab_wrap">
|
||||
<ul class="tab_nav">
|
||||
<li class="active">
|
||||
<a href="javascript:void(0);" :style="isAdmin ? '' : 'cursor:default'">상품별통계</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="javascript:void(0);"
|
||||
@click="isAdmin ? toMove('tmpltStatics') : ''"
|
||||
:style="isAdmin ? '' : 'cursor:default'"
|
||||
>포맷ID별통계</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:void(0);" @click="toMove('userStatics')">사용자별통계</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:void(0);" @click="toMove('campaignStatics')">캠페인ID별통계</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="box_search_area">
|
||||
<div class="filter_bundle_wrap">
|
||||
<div class="filter_bundle">
|
||||
<strong class="tit_bundle">발송일</strong>
|
||||
<div class="cont_bundle center">
|
||||
<div class="box_select_period">
|
||||
<div class="period_wrap">
|
||||
<span class="custom_input icon_date">
|
||||
<vuejs-datepicker
|
||||
:language="ko"
|
||||
:format="customFormatter"
|
||||
:disabled-dates="disabledSDate"
|
||||
:minimumView="sDateDiv"
|
||||
:maximumView="sDateDiv"
|
||||
v-model="startDate"
|
||||
@selected="selectedStartDate(0)"
|
||||
@closed="closeDate('start')"
|
||||
></vuejs-datepicker>
|
||||
</span>
|
||||
<span class="hypen">~</span>
|
||||
<span class="custom_input icon_date">
|
||||
<vuejs-datepicker
|
||||
:language="ko"
|
||||
:format="customFormatter"
|
||||
:disabled-dates="disabledEDate"
|
||||
:minimumView="sDateDiv"
|
||||
:maximumView="sDateDiv"
|
||||
v-model="endDate"
|
||||
@selected="selectedEndDate(0)"
|
||||
@closed="closeDate('end')"
|
||||
></vuejs-datepicker>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="radio_wrap">
|
||||
<span class="custom_radio">
|
||||
<input
|
||||
type="radio"
|
||||
name="radioDate"
|
||||
id="day"
|
||||
v-model="sDateDiv"
|
||||
value="day"
|
||||
checked
|
||||
>
|
||||
<label for="day">일별</label>
|
||||
</span>
|
||||
<span class="custom_radio">
|
||||
<input type="radio" name="radioDate" id="month" v-model="sDateDiv" value="month">
|
||||
<label for="month">월별</label>
|
||||
</span>
|
||||
<span class="custom_radio">
|
||||
<input type="radio" name="radioDate" id="year" v-model="sDateDiv" value="year">
|
||||
<label for="year">년별</label>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end of filter_bundle_wrap -->
|
||||
<div class="btn_wrap center">
|
||||
<a href="javascript:void(0);" class="btn mid point" @click="searchSummary">
|
||||
<span>조회</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end of box_search_area -->
|
||||
|
||||
<div class="cont_flex_bundle bottom mar_b20">
|
||||
<div class="result_date left col_6">
|
||||
<span>
|
||||
<em class="date">{{ customFormatter(startDate) }}</em> 부터
|
||||
<em class="date">{{ customFormatter(endDate) }}</em>까지의 전송/성공/성공률 입니다.
|
||||
</span>
|
||||
</div>
|
||||
<div class="btn_wrap right col_6">
|
||||
<a href="javascript:void(0)" class="btn sml bd_gray icon_down_doc" @click="excelDown()">
|
||||
<span>엑셀 다운로드</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<custom-grid
|
||||
ref="table"
|
||||
:url="grid.url"
|
||||
:perPage="grid.perPage"
|
||||
:pagination="grid.pagination"
|
||||
:header="grid.header"
|
||||
:columns="grid.columns"
|
||||
:noDataStr="grid.noDataStr"
|
||||
:initialRequest="grid.initialRequest"
|
||||
:addBodyAlign="grid.addAlign"
|
||||
:addBodyTmplt="grid.summary"
|
||||
></custom-grid>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment';
|
||||
import customGrid from '@/components/CustomGrid';
|
||||
import api from '../service/api';
|
||||
import xlsx from '@/common/excel';
|
||||
|
||||
export default {
|
||||
name: 'staticsList',
|
||||
data() {
|
||||
return {
|
||||
ko: vdp_translation_ko.js,
|
||||
bbsCategoryType: 'PROD',
|
||||
|
||||
sDateDiv: 'day',
|
||||
startDate: new Date(),
|
||||
endDate: new Date(),
|
||||
|
||||
disabledSDate: { from: new Date() },
|
||||
disabledEDate: { from: new Date() },
|
||||
|
||||
isAdmin: true,
|
||||
|
||||
grid: {
|
||||
url: '/api/statics/list',
|
||||
|
||||
initialRequest: false,
|
||||
pagination: true,
|
||||
perPage: 10,
|
||||
|
||||
header: [
|
||||
[
|
||||
{ header: 'NO', childNames: [] },
|
||||
{ header: '날짜', childNames: [] },
|
||||
{ header: '스타일 템플릿', childNames: ['cellTmpltTot', 'cellTmpltRateStr'] },
|
||||
{ header: '서술 템플릿', childNames: ['descTmpltTot', 'descTmpltRateStr'] },
|
||||
{ header: '기본 템플릿', childNames: ['freeTmpltTot', 'freeTmpltRateStr'] },
|
||||
{ header: '템플릿 소계', childNames: ['subSumTmpltTot', 'subSumTmpltRateStr'] },
|
||||
{ header: 'RCS SMS', childNames: ['smsTot', 'smsRateStr'] },
|
||||
{ header: 'RCS LMS', childNames: ['lmsTot', 'lmsRateStr'] },
|
||||
{ header: 'RCS MMS', childNames: ['mmsTot', 'mmsRateStr'] },
|
||||
{ header: '포맷 소계', childNames: ['formatTot', 'formatRateStr'] },
|
||||
{ header: 'Fallback SMS', childNames: ['fbSmsTot', 'fbSmsRateStr'] },
|
||||
{ header: 'Fallback LMS', childNames: ['fbLmsTot', 'fbLmsRateStr'] }
|
||||
]
|
||||
],
|
||||
|
||||
columns: [
|
||||
{ name: 'seq', header: 'NO', width: 100 },
|
||||
{ name: 'ymd', header: '날짜', width: 100 },
|
||||
{ name: 'cellTmpltTot', header: '발송', width: 90, cls: 'td_line' },
|
||||
{ name: 'cellTmpltRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
|
||||
{ name: 'descTmpltTot', header: '발송', width: 90, cls: 'td_line' },
|
||||
{ name: 'descTmpltRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
|
||||
{ name: 'freeTmpltTot', header: '발송', width: 90, cls: 'td_line' },
|
||||
{ name: 'freeTmpltRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
|
||||
{ name: 'subSumTmpltTot', header: '발송', width: 90, cls: 'td_line' },
|
||||
{ name: 'subSumTmpltRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
|
||||
|
||||
{ name: 'smsTot', header: '발송', width: 90, cls: 'td_line' },
|
||||
{ name: 'smsRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
|
||||
{ name: 'lmsTot', header: '발송', width: 90, cls: 'td_line' },
|
||||
{ name: 'lmsRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
|
||||
{ name: 'mmsTot', header: '발송', width: 90, cls: 'td_line' },
|
||||
{ name: 'mmsRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
|
||||
{ name: 'formatTot', header: '발송', width: 90, cls: 'td_line' },
|
||||
{ name: 'formatRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
|
||||
|
||||
{ name: 'fbSmsTot', header: '발송', width: 90, cls: 'td_line' },
|
||||
{ name: 'fbSmsRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
|
||||
{ name: 'fbLmsTot', header: '발송', width: 90, cls: 'td_line' },
|
||||
{ name: 'fbLmsRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' }
|
||||
],
|
||||
|
||||
summary: '',
|
||||
addAlign: '',
|
||||
|
||||
noDataStr: '검색 결과가 없습니다.',
|
||||
params: {},
|
||||
excelHeader: []
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
api.selectUserRoleInfo().then(response => {
|
||||
const respList = response.data.data;
|
||||
if (response.data.success && respList != null && respList.length > 0) {
|
||||
let adminStr = respList[0].selIsAdmin;
|
||||
if (typeof adminStr != undefined && adminStr != null && adminStr == 'false') {
|
||||
this.isAdmin = false;
|
||||
}
|
||||
} else {
|
||||
this.isAdmin = true;
|
||||
}
|
||||
});
|
||||
|
||||
this.getExcelHeader();
|
||||
},
|
||||
mounted() {
|
||||
// 합계 조회
|
||||
this.searchSummary();
|
||||
},
|
||||
|
||||
components: {
|
||||
'vuejs-datepicker': vuejsDatepicker,
|
||||
customGrid: customGrid
|
||||
},
|
||||
methods: {
|
||||
getExcelHeader() {
|
||||
// 헤더를 mockup으로 관리한다.
|
||||
api.getExcelHeader(this.bbsCategoryType).then(res => {
|
||||
this.excelHeader = res;
|
||||
});
|
||||
},
|
||||
customFormatter: function(date) {
|
||||
if (this.sDateDiv == 'month') {
|
||||
return moment(date).format('YYYY-MM');
|
||||
} else if (this.sDateDiv == 'year') {
|
||||
return moment(date).format('YYYY');
|
||||
} else {
|
||||
return moment(date).format('YYYY-MM-DD');
|
||||
}
|
||||
},
|
||||
toPage(lifeCycle) {
|
||||
const page = this.isNull(this.$route.params.page) ? 1 : this.$route.params.page;
|
||||
try {
|
||||
this.$refs.table.readData(page, this.grid.params);
|
||||
} catch (error) {
|
||||
console.log(lifeCycle, error);
|
||||
}
|
||||
},
|
||||
|
||||
toMove(routeName) {
|
||||
this.$router.push({ name: routeName, params: { page: 1, searchText: '' } });
|
||||
},
|
||||
|
||||
search: function(data) {
|
||||
this.grid.params = {
|
||||
sDate: moment(this.startDate).format('YYYYMMDD'),
|
||||
eDate: moment(this.endDate).format('YYYYMMDD'),
|
||||
dateDiv: this.sDateDiv
|
||||
};
|
||||
|
||||
this.$refs.table.search(this.grid.params);
|
||||
},
|
||||
|
||||
searchSummary: function(data) {
|
||||
let summaryList = {};
|
||||
|
||||
this.grid.params = {
|
||||
sDate: moment(this.startDate).format('YYYYMMDD'),
|
||||
eDate: moment(this.endDate).format('YYYYMMDD'),
|
||||
dateDiv: this.sDateDiv
|
||||
};
|
||||
|
||||
api
|
||||
.selectStaticsSummary(this.grid.params)
|
||||
.then(response => {
|
||||
const respList = response.data.data;
|
||||
if (response.data.success && respList != null && respList.length > 0) {
|
||||
summaryList = respList[0];
|
||||
|
||||
this.grid.addAlign = 'TOP';
|
||||
let addBody = '';
|
||||
addBody += '<tr>';
|
||||
addBody += '<td colspan="2">합계</td>';
|
||||
addBody += '<td>' + summaryList.cellTmpltTot + '</td>';
|
||||
addBody += '<td>' + summaryList.cellTmpltSucc + '<br>(' + summaryList.cellTmpltRate + '%)</td>';
|
||||
|
||||
addBody += '<td>' + summaryList.descTmpltTot + '</td>';
|
||||
addBody += '<td>' + summaryList.descTmpltSucc + '<br>(' + summaryList.descTmpltRate + '%)</td>';
|
||||
|
||||
addBody += '<td>' + summaryList.freeTmpltTot + '</td>';
|
||||
addBody += '<td>' + summaryList.freeTmpltSucc + '<br>(' + summaryList.freeTmpltRate + '%)</td>';
|
||||
|
||||
addBody += '<td>' + summaryList.subSumTmpltTot + '</td>';
|
||||
addBody += '<td>' + summaryList.subSumTmpltSucc + '<br>(' + summaryList.subSumTmpltRate + '%)</td>';
|
||||
|
||||
addBody += '<td>' + summaryList.smsTot + '</td>';
|
||||
addBody += '<td>' + summaryList.smsSucc + '<br>(' + summaryList.smsRate + '%)</td>';
|
||||
|
||||
addBody += '<td>' + summaryList.lmsTot + '</td>';
|
||||
addBody += '<td>' + summaryList.lmsSucc + '<br>(' + summaryList.lmsRate + '%)</td>';
|
||||
|
||||
addBody += '<td>' + summaryList.mmsTot + '</td>';
|
||||
addBody += '<td>' + summaryList.mmsSucc + '<br>(' + summaryList.mmsRate + '%)</td>';
|
||||
|
||||
addBody += '<td>' + summaryList.formatTot + '</td>';
|
||||
addBody += '<td>' + summaryList.formatSucc + '<br>(' + summaryList.formatRate + '%)</td>';
|
||||
|
||||
addBody += '<td>' + summaryList.fbSmsTot + '</td>';
|
||||
addBody += '<td>' + summaryList.fbSmsSucc + '<br>(' + summaryList.fbSmsRate + '%)</td>';
|
||||
|
||||
addBody += '<td>' + summaryList.fbLmsTot + '</td>';
|
||||
addBody += '<td>' + summaryList.fbLmsSucc + '<br>(' + summaryList.fbLmsRate + '%)</td>';
|
||||
addBody += '</tr>';
|
||||
|
||||
this.grid.summary = addBody;
|
||||
} else {
|
||||
this.grid.addAlign = '';
|
||||
this.grid.summary = '';
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.search();
|
||||
});
|
||||
},
|
||||
|
||||
selectedStartDate(day) {
|
||||
if (this.startDate > this.endDate) {
|
||||
this.startDate = this.endDate;
|
||||
}
|
||||
},
|
||||
selectedEndDate(day) {
|
||||
if (day != undefined && day != null) {
|
||||
this.periodDay = day;
|
||||
}
|
||||
},
|
||||
closeDate(type) {
|
||||
if (type != undefined && type != null) {
|
||||
if (type == 'start') {
|
||||
this.disabledSDate = { from: this.endDate };
|
||||
this.disabledEDate = { to: this.startDate, from: this.endDate };
|
||||
} else if (type == 'end') {
|
||||
this.disabledSDate = { from: this.endDate };
|
||||
this.disabledEDate = { to: this.startDate, from: new Date() };
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
async getExcelDataDown() {
|
||||
try {
|
||||
let response;
|
||||
const params = {
|
||||
startDtXls: moment(this.startDate).format('YYYYMMDD'),
|
||||
endDtXls: moment(this.endDate).format('YYYYMMDD'),
|
||||
sDate: this.startDate,
|
||||
eDate: this.endDate,
|
||||
dateDiv: this.sDateDiv
|
||||
};
|
||||
|
||||
response = await api.selectStaticsXls(params);
|
||||
|
||||
const result = response.data;
|
||||
if (result != null && result.success) {
|
||||
if (!this.isNull(result.data)) {
|
||||
return result.data;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
} catch (err) {
|
||||
return false;
|
||||
}
|
||||
}, // end of getExcelDataDown
|
||||
|
||||
async getExcelSumData() {
|
||||
// let sumBody = '';
|
||||
try {
|
||||
let response = await api.selectStaticsSummary(this.grid.params);
|
||||
const result = response.data;
|
||||
|
||||
if (result != null && result.success) {
|
||||
if (!this.isNull(result.data)) {
|
||||
return result.data;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
} catch (err) {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
async excelDown() {
|
||||
if (this.$refs.table.getData().length <= 0) {
|
||||
alert('조회된 데이터가 없습니다.');
|
||||
return false;
|
||||
}
|
||||
|
||||
let today = moment().format('YYYYMMDDHHmmss');
|
||||
const saveFileName = `상품별통계_${today}.xlsx`;
|
||||
|
||||
const data = await this.getExcelDataDown();
|
||||
const sumData = await this.getExcelSumData();
|
||||
|
||||
let options = {
|
||||
header: this.excelHeader,
|
||||
summary: {
|
||||
isUse: true,
|
||||
position: 'first',
|
||||
data: sumData,
|
||||
title: { replaceKeys: ['seq', 'ymd'], name: '합계' }
|
||||
},
|
||||
dataOrder: 'header' // header, data, ['no', 'sendnum', 'errorDesc']
|
||||
};
|
||||
|
||||
xlsx.export(data, saveFileName, options).then(() => {});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<article id="content" class="content">
|
||||
<ul class="breadcrumb">
|
||||
<li class="home">
|
||||
<a href="javascript:void(0);">홈</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:void(0);">발송통계</a>
|
||||
</li>
|
||||
<li>
|
||||
<span>상품별통계</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="title_area">
|
||||
<h2>상품별통계</h2>
|
||||
</div>
|
||||
<div class="tab_wrap">
|
||||
<ul class="tab_nav">
|
||||
<li class="active">
|
||||
<a href="javascript:void(0);" :style="isAdmin ? '' : 'cursor:default'">상품별통계</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="javascript:void(0);"
|
||||
@click="isAdmin ? toMove('tmpltStatics') : ''"
|
||||
:style="isAdmin ? '' : 'cursor:default'"
|
||||
>포맷ID별통계</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:void(0);" @click="toMove('userStatics')">사용자별통계</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:void(0);" @click="toMove('campaignStatics')">캠페인ID별통계</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="box_search_area">
|
||||
<div class="filter_bundle_wrap">
|
||||
<div class="filter_bundle">
|
||||
<strong class="tit_bundle">발송일</strong>
|
||||
<div class="cont_bundle center">
|
||||
<div class="box_select_period">
|
||||
<div class="period_wrap">
|
||||
<span class="custom_input icon_date">
|
||||
<vuejs-datepicker
|
||||
:language="ko"
|
||||
:format="customFormatter"
|
||||
:disabled-dates="disabledSDate"
|
||||
:minimumView="sDateDiv"
|
||||
:maximumView="sDateDiv"
|
||||
v-model="startDate"
|
||||
@selected="selectedStartDate(0)"
|
||||
@closed="closeDate('start')"
|
||||
></vuejs-datepicker>
|
||||
</span>
|
||||
<span class="hypen">~</span>
|
||||
<span class="custom_input icon_date">
|
||||
<vuejs-datepicker
|
||||
:language="ko"
|
||||
:format="customFormatter"
|
||||
:disabled-dates="disabledEDate"
|
||||
:minimumView="sDateDiv"
|
||||
:maximumView="sDateDiv"
|
||||
v-model="endDate"
|
||||
@selected="selectedEndDate(0)"
|
||||
@closed="closeDate('end')"
|
||||
></vuejs-datepicker>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="radio_wrap">
|
||||
<span class="custom_radio">
|
||||
<input
|
||||
type="radio"
|
||||
name="radioDate"
|
||||
id="day"
|
||||
v-model="sDateDiv"
|
||||
value="day"
|
||||
checked
|
||||
>
|
||||
<label for="day">일별</label>
|
||||
</span>
|
||||
<span class="custom_radio">
|
||||
<input type="radio" name="radioDate" id="month" v-model="sDateDiv" value="month">
|
||||
<label for="month">월별</label>
|
||||
</span>
|
||||
<span class="custom_radio">
|
||||
<input type="radio" name="radioDate" id="year" v-model="sDateDiv" value="year">
|
||||
<label for="year">년별</label>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end of filter_bundle_wrap -->
|
||||
<div class="btn_wrap center">
|
||||
<a href="javascript:void(0);" class="btn mid point" @click="searchSummary">
|
||||
<span>조회</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end of box_search_area -->
|
||||
|
||||
<div class="cont_flex_bundle bottom mar_b20">
|
||||
<div class="result_date left col_6">
|
||||
<span>
|
||||
<em class="date">{{ customFormatter(startDate) }}</em> 부터
|
||||
<em class="date">{{ customFormatter(endDate) }}</em>까지의 전송/성공/성공률 입니다.
|
||||
</span>
|
||||
</div>
|
||||
<div class="btn_wrap right col_6">
|
||||
<a href="javascript:void(0)" class="btn sml bd_gray icon_down_doc" @click="excelDown()">
|
||||
<span>엑셀 다운로드</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<custom-grid
|
||||
ref="table"
|
||||
:url="grid.url"
|
||||
:perPage="grid.perPage"
|
||||
:pagination="grid.pagination"
|
||||
:header="grid.header"
|
||||
:columns="grid.columns"
|
||||
:noDataStr="grid.noDataStr"
|
||||
:initialRequest="grid.initialRequest"
|
||||
:addBodyAlign="grid.addAlign"
|
||||
:addBodyTmplt="grid.summary"
|
||||
></custom-grid>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment';
|
||||
import customGrid from '@/components/CustomGrid';
|
||||
import api from '../service/api';
|
||||
import xlsx from '@/common/excel';
|
||||
|
||||
export default {
|
||||
name: 'staticsList',
|
||||
data() {
|
||||
return {
|
||||
ko: vdp_translation_ko.js,
|
||||
bbsCategoryType: 'PROD',
|
||||
|
||||
sDateDiv: 'day',
|
||||
startDate: new Date(),
|
||||
endDate: new Date(),
|
||||
|
||||
disabledSDate: { from: new Date() },
|
||||
disabledEDate: { from: new Date() },
|
||||
|
||||
isAdmin: true,
|
||||
|
||||
grid: {
|
||||
url: '/api/statics/list',
|
||||
|
||||
initialRequest: false,
|
||||
pagination: true,
|
||||
perPage: 10,
|
||||
|
||||
header: [
|
||||
[
|
||||
{ header: 'NO', childNames: [] },
|
||||
{ header: '날짜', childNames: [] },
|
||||
{ header: '스타일 템플릿', childNames: ['cellTmpltTot', 'cellTmpltRateStr'] },
|
||||
{ header: '서술 템플릿', childNames: ['descTmpltTot', 'descTmpltRateStr'] },
|
||||
{ header: '기본 템플릿', childNames: ['freeTmpltTot', 'freeTmpltRateStr'] },
|
||||
{ header: '템플릿 소계', childNames: ['subSumTmpltTot', 'subSumTmpltRateStr'] },
|
||||
{ header: 'RCS SMS', childNames: ['smsTot', 'smsRateStr'] },
|
||||
{ header: 'RCS LMS', childNames: ['lmsTot', 'lmsRateStr'] },
|
||||
{ header: 'RCS MMS', childNames: ['mmsTot', 'mmsRateStr'] },
|
||||
{ header: '포맷 소계', childNames: ['formatTot', 'formatRateStr'] },
|
||||
{ header: 'Fallback SMS', childNames: ['fbSmsTot', 'fbSmsRateStr'] },
|
||||
{ header: 'Fallback LMS', childNames: ['fbLmsTot', 'fbLmsRateStr'] }
|
||||
]
|
||||
],
|
||||
|
||||
columns: [
|
||||
{ name: 'seq', header: 'NO', width: 100 },
|
||||
{ name: 'ymd', header: '날짜', width: 100 },
|
||||
{ name: 'cellTmpltTot', header: '발송', width: 90, cls: 'td_line' },
|
||||
{ name: 'cellTmpltRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
|
||||
{ name: 'descTmpltTot', header: '발송', width: 90, cls: 'td_line' },
|
||||
{ name: 'descTmpltRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
|
||||
{ name: 'freeTmpltTot', header: '발송', width: 90, cls: 'td_line' },
|
||||
{ name: 'freeTmpltRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
|
||||
{ name: 'subSumTmpltTot', header: '발송', width: 90, cls: 'td_line' },
|
||||
{ name: 'subSumTmpltRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
|
||||
|
||||
{ name: 'smsTot', header: '발송', width: 90, cls: 'td_line' },
|
||||
{ name: 'smsRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
|
||||
{ name: 'lmsTot', header: '발송', width: 90, cls: 'td_line' },
|
||||
{ name: 'lmsRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
|
||||
{ name: 'mmsTot', header: '발송', width: 90, cls: 'td_line' },
|
||||
{ name: 'mmsRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
|
||||
{ name: 'formatTot', header: '발송', width: 90, cls: 'td_line' },
|
||||
{ name: 'formatRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
|
||||
|
||||
{ name: 'fbSmsTot', header: '발송', width: 90, cls: 'td_line' },
|
||||
{ name: 'fbSmsRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
|
||||
{ name: 'fbLmsTot', header: '발송', width: 90, cls: 'td_line' },
|
||||
{ name: 'fbLmsRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' }
|
||||
],
|
||||
|
||||
summary: '',
|
||||
addAlign: '',
|
||||
|
||||
noDataStr: '검색 결과가 없습니다.',
|
||||
params: {},
|
||||
excelHeader: []
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
api.selectUserRoleInfo().then(response => {
|
||||
const respList = response.data.data;
|
||||
if (response.data.success && respList != null && respList.length > 0) {
|
||||
let adminStr = respList[0].selIsAdmin;
|
||||
if (typeof adminStr != undefined && adminStr != null && adminStr == 'false') {
|
||||
this.isAdmin = false;
|
||||
}
|
||||
} else {
|
||||
this.isAdmin = true;
|
||||
}
|
||||
});
|
||||
|
||||
this.getExcelHeader();
|
||||
},
|
||||
mounted() {
|
||||
// 합계 조회
|
||||
this.searchSummary();
|
||||
},
|
||||
|
||||
components: {
|
||||
'vuejs-datepicker': vuejsDatepicker,
|
||||
customGrid: customGrid
|
||||
},
|
||||
methods: {
|
||||
getExcelHeader() {
|
||||
// 헤더를 mockup으로 관리한다.
|
||||
api.getExcelHeader(this.bbsCategoryType).then(res => {
|
||||
this.excelHeader = res;
|
||||
});
|
||||
},
|
||||
customFormatter: function(date) {
|
||||
if (this.sDateDiv == 'month') {
|
||||
return moment(date).format('YYYY-MM');
|
||||
} else if (this.sDateDiv == 'year') {
|
||||
return moment(date).format('YYYY');
|
||||
} else {
|
||||
return moment(date).format('YYYY-MM-DD');
|
||||
}
|
||||
},
|
||||
toPage(lifeCycle) {
|
||||
const page = this.isNull(this.$route.params.page) ? 1 : this.$route.params.page;
|
||||
try {
|
||||
this.$refs.table.readData(page, this.grid.params);
|
||||
} catch (error) {
|
||||
console.log(lifeCycle, error);
|
||||
}
|
||||
},
|
||||
|
||||
toMove(routeName) {
|
||||
this.$router.push({ name: routeName, params: { page: 1, searchText: '' } });
|
||||
},
|
||||
|
||||
search: function(data) {
|
||||
this.grid.params = {
|
||||
sDate: moment(this.startDate).format('YYYYMMDD'),
|
||||
eDate: moment(this.endDate).format('YYYYMMDD'),
|
||||
dateDiv: this.sDateDiv
|
||||
};
|
||||
|
||||
this.$refs.table.search(this.grid.params);
|
||||
},
|
||||
|
||||
searchSummary: function(data) {
|
||||
let summaryList = {};
|
||||
|
||||
this.grid.params = {
|
||||
sDate: moment(this.startDate).format('YYYYMMDD'),
|
||||
eDate: moment(this.endDate).format('YYYYMMDD'),
|
||||
dateDiv: this.sDateDiv
|
||||
};
|
||||
|
||||
api
|
||||
.selectStaticsSummary(this.grid.params)
|
||||
.then(response => {
|
||||
const respList = response.data.data;
|
||||
if (response.data.success && respList != null && respList.length > 0) {
|
||||
summaryList = respList[0];
|
||||
|
||||
this.grid.addAlign = 'TOP';
|
||||
let addBody = '';
|
||||
addBody += '<tr>';
|
||||
addBody += '<td colspan="2">합계</td>';
|
||||
addBody += '<td>' + summaryList.cellTmpltTot + '</td>';
|
||||
addBody += '<td>' + summaryList.cellTmpltSucc + '<br>(' + summaryList.cellTmpltRate + '%)</td>';
|
||||
|
||||
addBody += '<td>' + summaryList.descTmpltTot + '</td>';
|
||||
addBody += '<td>' + summaryList.descTmpltSucc + '<br>(' + summaryList.descTmpltRate + '%)</td>';
|
||||
|
||||
addBody += '<td>' + summaryList.freeTmpltTot + '</td>';
|
||||
addBody += '<td>' + summaryList.freeTmpltSucc + '<br>(' + summaryList.freeTmpltRate + '%)</td>';
|
||||
|
||||
addBody += '<td>' + summaryList.subSumTmpltTot + '</td>';
|
||||
addBody += '<td>' + summaryList.subSumTmpltSucc + '<br>(' + summaryList.subSumTmpltRate + '%)</td>';
|
||||
|
||||
addBody += '<td>' + summaryList.smsTot + '</td>';
|
||||
addBody += '<td>' + summaryList.smsSucc + '<br>(' + summaryList.smsRate + '%)</td>';
|
||||
|
||||
addBody += '<td>' + summaryList.lmsTot + '</td>';
|
||||
addBody += '<td>' + summaryList.lmsSucc + '<br>(' + summaryList.lmsRate + '%)</td>';
|
||||
|
||||
addBody += '<td>' + summaryList.mmsTot + '</td>';
|
||||
addBody += '<td>' + summaryList.mmsSucc + '<br>(' + summaryList.mmsRate + '%)</td>';
|
||||
|
||||
addBody += '<td>' + summaryList.formatTot + '</td>';
|
||||
addBody += '<td>' + summaryList.formatSucc + '<br>(' + summaryList.formatRate + '%)</td>';
|
||||
|
||||
addBody += '<td>' + summaryList.fbSmsTot + '</td>';
|
||||
addBody += '<td>' + summaryList.fbSmsSucc + '<br>(' + summaryList.fbSmsRate + '%)</td>';
|
||||
|
||||
addBody += '<td>' + summaryList.fbLmsTot + '</td>';
|
||||
addBody += '<td>' + summaryList.fbLmsSucc + '<br>(' + summaryList.fbLmsRate + '%)</td>';
|
||||
addBody += '</tr>';
|
||||
|
||||
this.grid.summary = addBody;
|
||||
} else {
|
||||
this.grid.addAlign = '';
|
||||
this.grid.summary = '';
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.search();
|
||||
});
|
||||
},
|
||||
|
||||
selectedStartDate(day) {
|
||||
if (this.startDate > this.endDate) {
|
||||
this.startDate = this.endDate;
|
||||
}
|
||||
},
|
||||
selectedEndDate(day) {
|
||||
if (day != undefined && day != null) {
|
||||
this.periodDay = day;
|
||||
}
|
||||
},
|
||||
closeDate(type) {
|
||||
if (type != undefined && type != null) {
|
||||
if (type == 'start') {
|
||||
this.disabledSDate = { from: this.endDate };
|
||||
this.disabledEDate = { to: this.startDate, from: this.endDate };
|
||||
} else if (type == 'end') {
|
||||
this.disabledSDate = { from: this.endDate };
|
||||
this.disabledEDate = { to: this.startDate, from: new Date() };
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
async getExcelDataDown() {
|
||||
try {
|
||||
let response;
|
||||
const params = {
|
||||
startDtXls: moment(this.startDate).format('YYYYMMDD'),
|
||||
endDtXls: moment(this.endDate).format('YYYYMMDD'),
|
||||
sDate: this.startDate,
|
||||
eDate: this.endDate,
|
||||
dateDiv: this.sDateDiv
|
||||
};
|
||||
|
||||
response = await api.selectStaticsXls(params);
|
||||
|
||||
const result = response.data;
|
||||
if (result != null && result.success) {
|
||||
if (!this.isNull(result.data)) {
|
||||
return result.data;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
} catch (err) {
|
||||
return false;
|
||||
}
|
||||
}, // end of getExcelDataDown
|
||||
|
||||
async getExcelSumData() {
|
||||
// let sumBody = '';
|
||||
try {
|
||||
let response = await api.selectStaticsSummary(this.grid.params);
|
||||
const result = response.data;
|
||||
|
||||
if (result != null && result.success) {
|
||||
if (!this.isNull(result.data)) {
|
||||
return result.data;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
} catch (err) {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
async excelDown() {
|
||||
if (this.$refs.table.getData().length <= 0) {
|
||||
alert('조회된 데이터가 없습니다.');
|
||||
return false;
|
||||
}
|
||||
|
||||
let today = moment().format('YYYYMMDDHHmmss');
|
||||
const saveFileName = `상품별통계_${today}.xlsx`;
|
||||
|
||||
const data = await this.getExcelDataDown();
|
||||
const sumData = await this.getExcelSumData();
|
||||
|
||||
let options = {
|
||||
header: this.excelHeader,
|
||||
summary: {
|
||||
isUse: true,
|
||||
position: 'first',
|
||||
data: sumData,
|
||||
title: { replaceKeys: ['seq', 'ymd'], name: '합계' }
|
||||
},
|
||||
dataOrder: 'header' // header, data, ['no', 'sendnum', 'errorDesc']
|
||||
};
|
||||
|
||||
xlsx.export(data, saveFileName, options).then(() => {});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user