발송통계 조회기간을 8-10월로 조회 했다가 다시 9월부터 11월까지 하려고 하면 달력에서 11월이 block 되는 현상 수정

This commit is contained in:
kimjhjjang
2022-11-29 10:44:15 +09:00
parent c201b27afb
commit 67e078707e
4 changed files with 633 additions and 452 deletions

View File

@@ -1,5 +1,4 @@
<template>
<div class="contents">
<div class="contents_wrap">
<div class="top_wrap">
@@ -13,70 +12,76 @@
<div class="search_wrap">
<div class="input_box cal">
<label for="right" class="label txt">조회기간</label>
<p> 최대 1개월까지 조회 가능합니다.</p>
<p>최대 1개월까지 조회 가능합니다.</p>
<div class="term">
<!--
<input class="date" type="text" id="" placeholder="2022-10-12"/>
~
<input class="" type="text" id="" placeholder="2022-10-12"/>
-->
<div class="group" style="width:500px;">
<span class="custom_input icon_date">
<vuejs-datepicker
:language="ko"
:format="customFormatter"
:disabled-dates="disabledSDate"
v-model="startDate"
@selected="selectedStartDate(0)"
@closed="closeDate('start')"
></vuejs-datepicker>
</span>~
<div class="group" style="width: 500px">
<span class="custom_input icon_date">
<vuejs-datepicker
:language="ko"
:format="customFormatter"
:disabled-dates="disabledEDate"
v-model="endDate"
@selected="selectedEndDate(0)"
@closed="closeDate('end')"
></vuejs-datepicker>
</span>
<vuejs-datepicker
:language="ko"
:format="customFormatter"
:disabled-dates="disabledSDate"
v-model="startDate"
@selected="selectedStartDate"
@closed="closeDate('start')"
></vuejs-datepicker> </span
>~
<span class="custom_input icon_date">
<vuejs-datepicker
:language="ko"
:format="customFormatter"
:disabled-dates="disabledEDate"
v-model="endDate"
@selected="selectedEndDate(0)"
@closed="closeDate('end')"
></vuejs-datepicker>
</span>
</div>
</div>
</div>
<div class="input_box id">
<label for="name" class="label">고객사명</label>
<input class="search-box" type="text" id="name" placeholder="검색어 입력" v-model.trim="grid.params.custNm">
<input class="search-box" type="text" id="name" placeholder="검색어 입력" v-model.trim="grid.params.custNm" />
</div>
<div class="input_box">
<label for="name" class="label">사업자번호</label>
<input class="search-box" type="text" id="name" placeholder="검색어 입력" v-model.trim="grid.params.bizrno" @keypress="onlyNum"
@input="onlyNum" maxlength="10">
<input
class="search-box"
type="text"
id="name"
placeholder="검색어 입력"
v-model.trim="grid.params.bizrno"
@keypress="onlyNum"
@input="onlyNum"
maxlength="10"
/>
</div>
<button type="button" class="button grey" @click="search">조회</button>
</div>
<div class="info">
<div class="count">집계결과</div>
<div class="button_group">
<button type="button" class="button blue download" @click="excelDown();">엑셀 다운로드</button>
<button type="button" class="button blue download" @click="excelDown()">엑셀 다운로드</button>
</div>
</div>
<div class="table calculate scroll">
<custom-grid
ref="table"
:totalItems="'totalItems'"
:url="grid.url"
:pagePerRows="grid.pagePerRows"
:initialRequest="grid.initialRequest"
:pagination="grid.pagination"
:isCheckbox="grid.isCheckbox"
:columns="grid.columns"
:noDataStr="grid.noDataStr"
:addCls="grid.addCls"
:header="grid.header"
ref="table"
:totalItems="'totalItems'"
:url="grid.url"
:pagePerRows="grid.pagePerRows"
:initialRequest="grid.initialRequest"
:pagination="grid.pagination"
:isCheckbox="grid.isCheckbox"
:columns="grid.columns"
:noDataStr="grid.noDataStr"
:addCls="grid.addCls"
:header="grid.header"
></custom-grid>
</div>
<common-modal ref="commmonModal"></common-modal>
@@ -86,11 +91,11 @@
<script>
import moment from 'moment';
import statsApi from "../service/statsApi.js";
import statsApi from '../service/statsApi.js';
import customGrid from '@/components/CustomGrid';
import xlsx from '@/common/excel';
import commonModal from "@/components/modal/commonModal";
import {utils_mixin, chkPattern2} from '../service/mixins';
import commonModal from '@/components/modal/commonModal';
import { utils_mixin, chkPattern2 } from '../service/mixins';
export default {
name: 'bsnmDayList',
@@ -119,126 +124,169 @@ export default {
// 테이블 리스트 데이터
perPageCnt: 50,
options: [
{text: '20', value: 20},
{text: '50', value: 50},
{text: '100', value: 100}
{ text: '20', value: 20 },
{ text: '50', value: 50 },
{ text: '100', value: 100 },
],
totalItems: 0,
grid: {
url: '/api/v1/bo/stats/bsnmDayList',
pagePerRows: 20,
pagination: true,
isCheckbox: false, // true:첫번째 컬럼 앞에 체크박스 생성 / false:체크박스 제거
isCheckbox: false, // true:첫번째 컬럼 앞에 체크박스 생성 / false:체크박스 제거
initialRequest: false,
addCls: 'box_OFvis',
header: [
[
{header: '날짜', childNames: []},
{header: '고객사명', childNames: []},
{header: '사업자번호', childNames: []},
{header: '전체', childNames: ['sndCnt', 'succCntRt']},
{header: 'SMS', childNames: ['sndCntS', 'succCntRtS']},
{header: 'LMS', childNames: ['sndCntL', 'succCntRtL']},
{header: 'MMS', childNames: ['sndCntM', 'succCntRtM']},
{header: '알림톡', childNames: ['sndCntR', 'succCntRtR']},
]
{ header: '날짜', childNames: [] },
{ header: '고객사명', childNames: [] },
{ header: '사업자번호', childNames: [] },
{ header: '전체', childNames: ['sndCnt', 'succCntRt'] },
{ header: 'SMS', childNames: ['sndCntS', 'succCntRtS'] },
{ header: 'LMS', childNames: ['sndCntL', 'succCntRtL'] },
{ header: 'MMS', childNames: ['sndCntM', 'succCntRtM'] },
{ header: '알림톡', childNames: ['sndCntR', 'succCntRtR'] },
],
],
columns: [
{name: 'sumYmd', header: '날짜', align: 'center'},
{name: 'custNm', header: '고객사명', align: 'center'},
{name: 'bizrno', header: '사업자번호', align: 'center'},
{ name: 'sumYmd', header: '날짜', align: 'center' },
{ name: 'custNm', header: '고객사명', align: 'center' },
{ name: 'bizrno', header: '사업자번호', align: 'center' },
{
name: 'sndCnt', header: '발송건수', align: 'center', cls: 'td_line',
formatter: props => {
name: 'sndCnt',
header: '발송건수',
align: 'center',
cls: 'td_line',
formatter: (props) => {
let result = props.sndCnt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
return result;
}
},
},
{
name: 'succCntRt',
header: '성공건수/(%)',
align: 'center',
cls: 'td_line',
formatter: props => {
return "<p>" + props.succCnt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + "</p>\n<p>(" + props.succRt + "%)</p>";
}
formatter: (props) => {
return (
'<p>' +
props.succCnt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +
'</p>\n<p>(' +
props.succRt +
'%)</p>'
);
},
},
{
name: 'sndCntS', header: '발송건수', align: 'center', cls: 'td_line',
formatter: props => {
name: 'sndCntS',
header: '발송건수',
align: 'center',
cls: 'td_line',
formatter: (props) => {
let result = props.sndCntS.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
return result;
}
},
},
{
name: 'succCntRtS',
header: '성공건수/(%)',
align: 'center',
cls: 'td_line',
formatter: props => {
return "<p>" + props.succCntS.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + "</p>\n<p>(" + props.succRtS + "%)</p>";
}
formatter: (props) => {
return (
'<p>' +
props.succCntS.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +
'</p>\n<p>(' +
props.succRtS +
'%)</p>'
);
},
},
{
name: 'sndCntL', header: '발송건수', align: 'center', cls: 'td_line',
formatter: props => {
name: 'sndCntL',
header: '발송건수',
align: 'center',
cls: 'td_line',
formatter: (props) => {
let result = props.sndCntL.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
return result;
}
},
},
{
name: 'succCntRtL',
header: '성공건수/(%)',
align: 'center',
cls: 'td_line',
formatter: props => {
return "<p>" + props.succCntL.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + "</p>\n<p>(" + props.succRtL + "%)</p>";
}
formatter: (props) => {
return (
'<p>' +
props.succCntL.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +
'</p>\n<p>(' +
props.succRtL +
'%)</p>'
);
},
},
{
name: 'sndCntM', header: '발송건수', align: 'center', cls: 'td_line',
formatter: props => {
name: 'sndCntM',
header: '발송건수',
align: 'center',
cls: 'td_line',
formatter: (props) => {
let result = props.sndCntM.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
return result;
}
},
},
{
name: 'succCntRtM',
header: '성공건수/(%)',
align: 'center',
cls: 'td_line',
formatter: props => {
return "<p>" + props.succCntM.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + "</p>\n<p>(" + props.succRtM + "%)</p>";
}
formatter: (props) => {
return (
'<p>' +
props.succCntM.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +
'</p>\n<p>(' +
props.succRtM +
'%)</p>'
);
},
},
{
name: 'sndCntR', header: '발송건수', align: 'center', cls: 'td_line',
formatter: props => {
name: 'sndCntR',
header: '발송건수',
align: 'center',
cls: 'td_line',
formatter: (props) => {
let result = props.sndCntR.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
return result;
}
},
},
{
name: 'succCntRtR',
header: '성공건수/(%)',
align: 'center',
cls: 'td_line',
formatter: props => {
return "<p>" + props.succCntR.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + "</p>\n<p>(" + props.succRtR + ")</p>";
}
formatter: (props) => {
return (
'<p>' +
props.succCntR.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +
'</p>\n<p>(' +
props.succRtR +
')</p>'
);
},
},
],
noDataStr: '검색 결과가 없습니다.',
params: {
startDay: '',
endDay: ''
endDay: '',
},
excelHeader: []
}
excelHeader: [],
},
};
},
components: {
@@ -253,7 +301,6 @@ export default {
destroyed() {
this.grid.params.custNm = '';
this.grid.params.bizrno = '';
},
mounted() {
let page = 1;
@@ -271,12 +318,11 @@ export default {
this.search(isKeep);
},
beforeRouteLeave(to, from, next) {
const getP = this.$refs.table.getPagination();
this.$store.commit('searchcondition/updateSearchCondition', {
page: getP._currentPage,
perPage: this.perPageCnt,
params: this.grid.params
params: this.grid.params,
});
// 라우트 하기전 실행
next();
@@ -287,21 +333,25 @@ export default {
startDay: moment(this.startDate).format('YYYYMMDD'),
endDay: moment(this.endDate).format('YYYYMMDD'),
custNm: this.grid.params.custNm,
bizrno: this.grid.params.bizrno
bizrno: this.grid.params.bizrno,
};
if (moment(this.grid.params.startDay).isBefore(moment(this.grid.params.endDay).subtract(1, 'months').format('YYYYMMDD'))) {
if (
moment(this.grid.params.startDay).isBefore(
moment(this.grid.params.endDay).subtract(1, 'months').format('YYYYMMDD')
)
) {
this.row.title = '발송통계';
this.row.msg1 = '검색 기간은 최대 1개월까지 선택 가능 합니다.';
this.$refs.commmonModal.alertModalOpen(this.row);
return false
return false;
}
this.$refs.table.search(this.grid.params, isKeep);
this.sendStoreData();
},
toMove(routeName) {
this.$router.push({name: routeName, params: {page: 1, searchText: ''}});
this.$router.push({ name: routeName, params: { page: 1, searchText: '' } });
},
setPeriodDay(day) {
this.periodDay = day;
@@ -318,7 +368,14 @@ export default {
if (this.startDate > this.endDate) {
this.startDate = this.endDate;
}
const todayDate = new Date();
let selectDay = new Date(day);
let after30Day = new Date(selectDay.setDate(selectDay.getDate() + 30));
if (after30Day > todayDate) {
this.endDate = new Date();
} else {
this.endDate = after30Day;
}
},
selectedEndDate(day) {
if (day != undefined && day != null) {
@@ -328,11 +385,22 @@ export default {
closeDate(type) {
if (type != undefined && type != null) {
if (type == 'start') {
this.disabledSDate = {from: this.endDate};
this.disabledEDate = {to: this.startDate, from: this.endDate};
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()};
let stDate = new Date(this.startDate);
let fromDate = new Date(stDate.setMonth(stDate.getDay() + 30));
let endDate = this.endDate;
const nowDate = new Date();
let selectedEndDate = endDate.getDay() + 30;
if (Number(selectedEndDate) > Number(nowDate.getMonth())) {
this.disabledSDate = { from: new Date() };
this.disabledEDate = { to: this.startDate, from: new Date() };
} else {
this.disabledSDate = { from: new Date() };
this.disabledEDate = { to: this.startDate, from: fromDate };
}
}
}
},
@@ -345,7 +413,8 @@ export default {
return moment(date).format('YYYY-MM-DD');
}
},
changePerPage: function () { // 페이지당 조회할 개수
changePerPage: function () {
// 페이지당 조회할 개수
this.grid.pagePerRows = this.perPageCnt;
this.search(true);
},
@@ -354,7 +423,7 @@ export default {
this.$store.commit('searchcondition/updateSearchCondition', {
page: getP._currentPage,
perPage: this.perPageCnt,
params: this.grid.params
params: this.grid.params,
});
const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
@@ -375,10 +444,10 @@ export default {
result.data.list = result.data.list.map((item) => {
return {
...item,
custNm: this.fromHtmlEntities(item.custNm)
}
custNm: this.fromHtmlEntities(item.custNm),
};
});
if (result != null && result.retCode == "0000") {
if (result != null && result.retCode == '0000') {
return result.data;
} else {
return false;
@@ -401,14 +470,13 @@ export default {
const data = await this.getExcelDataDown();
let options = {
header: this.excelHeader,
dataOrder: 'header'
dataOrder: 'header',
};
xlsx.export(data.list, saveFileName, options).then(() => {
});
xlsx.export(data.list, saveFileName, options).then(() => {});
},
getExcelHeader() {
// 헤더를 mockup으로 관리한다.
statsApi.getExcelHeader(this.pageType).then(res => {
statsApi.getExcelHeader(this.pageType).then((res) => {
this.excelHeader = res;
});
},
@@ -417,6 +485,6 @@ export default {
return String.fromCharCode(s.match(/\d+/gm)[0]);
});
},
}
},
};
</script>
</script>

View File

@@ -1,5 +1,4 @@
<template>
<div class="contents">
<div class="contents_wrap">
<div class="top_wrap">
@@ -13,68 +12,82 @@
<div class="search_wrap">
<div class="input_box cal">
<label for="right" class="label txt">조회기간</label>
<p> 최대 3개월까지 조회 가능합니다.</p>
<p>최대 3개월까지 조회 가능합니다.</p>
<div class="term">
<div class="group" style="width:500px;">
<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>~
<div class="group" style="width: 500px">
<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>
<vuejs-datepicker
:language="ko"
:format="customFormatter"
:disabled-dates="disabledSDate"
:minimumView="sDateDiv"
:maximumView="sDateDiv"
v-model="startDate"
@selected="selectedStartDate"
@closed="closeDate('start')"
></vuejs-datepicker> </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>
</div>
<div class="input_box id">
<label for="name" class="label">고객사명</label>
<input class="search-box" type="text" id="name" placeholder="검색어 입력" v-model.trim="grid.params.custNm" maxlength="100">
<input
class="search-box"
type="text"
id="name"
placeholder="검색어 입력"
v-model.trim="grid.params.custNm"
maxlength="100"
/>
</div>
<div class="input_box">
<label for="name" class="label">사업자번호</label>
<input class="search-box" type="text" id="name" placeholder="검색어 입력" v-model.trim="grid.params.bizrno" @keypress="onlyNum"
@input="onlyNum" minlength="10" maxlength="10">
<input
class="search-box"
type="text"
id="name"
placeholder="검색어 입력"
v-model.trim="grid.params.bizrno"
@keypress="onlyNum"
@input="onlyNum"
minlength="10"
maxlength="10"
/>
</div>
<button type="button" class="button grey" @click="search">조회</button>
</div>
<div class="info">
<div class="count">집계결과</div>
<div class="button_group">
<button type="button" class="button blue download" @click="monthExcelDown();">엑셀 다운로드</button>
<button type="button" class="button blue download" @click="monthExcelDown()">엑셀 다운로드</button>
</div>
</div>
<div class="table calculate scroll">
<custom-grid
ref="table"
:totalItems="'totalItems'"
:url="grid.url"
:pagePerRows="grid.pagePerRows"
:initialRequest="grid.initialRequest"
:pagination="grid.pagination"
:isCheckbox="grid.isCheckbox"
:columns="grid.columns"
:noDataStr="grid.noDataStr"
:addCls="grid.addCls"
:header="grid.header"
ref="table"
:totalItems="'totalItems'"
:url="grid.url"
:pagePerRows="grid.pagePerRows"
:initialRequest="grid.initialRequest"
:pagination="grid.pagination"
:isCheckbox="grid.isCheckbox"
:columns="grid.columns"
:noDataStr="grid.noDataStr"
:addCls="grid.addCls"
:header="grid.header"
></custom-grid>
</div>
<common-modal ref="commmonModal"></common-modal>
@@ -84,11 +97,11 @@
<script>
import moment from 'moment';
import statsApi from "../service/statsApi.js";
import statsApi from '../service/statsApi.js';
import customGrid from '@/components/CustomGrid';
import xlsx from '@/common/excel';
import commonModal from "@/components/modal/commonModal";
import {utils_mixin, chkPattern2} from '../service/mixins';
import commonModal from '@/components/modal/commonModal';
import { utils_mixin, chkPattern2 } from '../service/mixins';
export default {
name: 'bsnmMonthList',
@@ -117,132 +130,177 @@ export default {
// 테이블 리스트 데이터
perPageCnt: 50,
options: [
{text: '20', value: 20},
{text: '50', value: 50},
{text: '100', value: 100}
{ text: '20', value: 20 },
{ text: '50', value: 50 },
{ text: '100', value: 100 },
],
totalItems: 0,
grid: {
url: '/api/v1/bo/stats/bsnmMonthList',
pagePerRows: 20,
pagination: true,
isCheckbox: false, // true:첫번째 컬럼 앞에 체크박스 생성 / false:체크박스 제거
isCheckbox: false, // true:첫번째 컬럼 앞에 체크박스 생성 / false:체크박스 제거
initialRequest: false,
addCls: 'box_OFvis',
header: [
[
{header: '날짜', childNames: []},
{header: '고객사명', childNames: []},
{header: '사업자번호', childNames: []},
{header: '전체', childNames: ['sndCnt', 'succCntRt']},
{header: 'SMS', childNames: ['sndCntS', 'succCntRtS']},
{header: 'LMS', childNames: ['sndCntL', 'succCntRtL']},
{header: 'MMS', childNames: ['sndCntM', 'succCntRtM']},
{header: '알림톡', childNames: ['sndCntR', 'succCntRtR']},
]
{ header: '날짜', childNames: [] },
{ header: '고객사명', childNames: [] },
{ header: '사업자번호', childNames: [] },
{ header: '전체', childNames: ['sndCnt', 'succCntRt'] },
{ header: 'SMS', childNames: ['sndCntS', 'succCntRtS'] },
{ header: 'LMS', childNames: ['sndCntL', 'succCntRtL'] },
{ header: 'MMS', childNames: ['sndCntM', 'succCntRtM'] },
{ header: '알림톡', childNames: ['sndCntR', 'succCntRtR'] },
],
],
columns: [
{name: 'sumYm', header: '날짜', align: 'center'},
{name: 'custNm', header: '고객사명', align: 'center'},
{ name: 'sumYm', header: '날짜', align: 'center' },
{ name: 'custNm', header: '고객사명', align: 'center' },
{
name: 'bizrno', header: '사업자번호', align: 'center'
name: 'bizrno',
header: '사업자번호',
align: 'center',
// , formatter: props => {
// let result = props.bizrno.substring(0, 3) + '-' + props.bizrno.substring(3, 5) + '-' + props.bizrno.substring(5, 10)
// return result;
// }
},
{
name: 'sndCnt', header: '발송건수', align: 'center', cls: 'td_line',
formatter: props => {
name: 'sndCnt',
header: '발송건수',
align: 'center',
cls: 'td_line',
formatter: (props) => {
let result = props.sndCnt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
return result;
}
},
},
{
name: 'succCntRt',
header: '성공건수/(%)',
align: 'center',
cls: 'td_line',
formatter: props => {
return "<p>" + props.succCnt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + "</p>\n<p>(" + props.succRt + "%)</p>";
}
formatter: (props) => {
return (
'<p>' +
props.succCnt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +
'</p>\n<p>(' +
props.succRt +
'%)</p>'
);
},
},
{
name: 'sndCntS', header: '발송건수', align: 'center', cls: 'td_line',
formatter: props => {
name: 'sndCntS',
header: '발송건수',
align: 'center',
cls: 'td_line',
formatter: (props) => {
let result = props.sndCntS.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
return result;
}
},
},
{
name: 'succCntRtS',
header: '성공건수/(%)',
align: 'center',
cls: 'td_line',
formatter: props => {
return "<p>" + props.succCntS.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + "</p>\n<p>(" + props.succRtS + "%)</p>";
}
formatter: (props) => {
return (
'<p>' +
props.succCntS.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +
'</p>\n<p>(' +
props.succRtS +
'%)</p>'
);
},
},
{
name: 'sndCntL', header: '발송건수', align: 'center', cls: 'td_line',
formatter: props => {
name: 'sndCntL',
header: '발송건수',
align: 'center',
cls: 'td_line',
formatter: (props) => {
let result = props.sndCntL.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
return result;
}
},
},
{
name: 'succCntRtL',
header: '성공건수/(%)',
align: 'center',
cls: 'td_line',
formatter: props => {
return "<p>" + props.succCntL.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + "</p>\n<p>(" + props.succRtL + "%)</p>";
}
formatter: (props) => {
return (
'<p>' +
props.succCntL.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +
'</p>\n<p>(' +
props.succRtL +
'%)</p>'
);
},
},
{
name: 'sndCntM', header: '발송건수', align: 'center', cls: 'td_line',
formatter: props => {
name: 'sndCntM',
header: '발송건수',
align: 'center',
cls: 'td_line',
formatter: (props) => {
let result = props.sndCntM.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
return result;
}
},
},
{
name: 'succCntRtM',
header: '성공건수/(%)',
align: 'center',
cls: 'td_line',
formatter: props => {
return "<p>" + props.succCntM.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + "</p>\n<p>(" + props.succRtM + "%)</p>";
}
formatter: (props) => {
return (
'<p>' +
props.succCntM.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +
'</p>\n<p>(' +
props.succRtM +
'%)</p>'
);
},
},
{
name: 'sndCntR', header: '발송건수', align: 'center', cls: 'td_line',
formatter: props => {
name: 'sndCntR',
header: '발송건수',
align: 'center',
cls: 'td_line',
formatter: (props) => {
let result = props.sndCntR.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
return result;
}
},
},
{
name: 'succCntRtR',
header: '성공건수/(%)',
align: 'center',
cls: 'td_line',
formatter: props => {
return "<p>" + props.succCntR.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + "</p>\n<p>(" + props.succRtR + ")</p>";
}
formatter: (props) => {
return (
'<p>' +
props.succCntR.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +
'</p>\n<p>(' +
props.succRtR +
')</p>'
);
},
},
],
noDataStr: '검색 결과가 없습니다.',
params: {
startMon: '',
endMon: ''
endMon: '',
},
excelHeader: []
}
excelHeader: [],
},
};
},
components: {
@@ -253,12 +311,10 @@ export default {
created() {
this.setPeriodDay(0);
this.getExcelHeader();
},
destroyed() {
this.grid.params.custNm = '';
this.grid.params.bizrno = '';
},
mounted() {
let page = 1;
@@ -276,12 +332,11 @@ export default {
this.search(isKeep);
},
beforeRouteLeave(to, from, next) {
const getP = this.$refs.table.getPagination();
this.$store.commit('searchcondition/updateSearchCondition', {
page: getP._currentPage,
perPage: this.perPageCnt,
params: this.grid.params
params: this.grid.params,
});
// 라우트 하기전 실행
next();
@@ -292,21 +347,25 @@ export default {
startMon: moment(this.startDate).format('YYYYMM'),
endMon: moment(this.endDate).format('YYYYMM'),
custNm: this.grid.params.custNm,
bizrno: this.grid.params.bizrno
bizrno: this.grid.params.bizrno,
};
if (moment(this.grid.params.startMon).isBefore(moment(this.grid.params.endMon).subtract(2, 'months').format('YYYYMM'))) {
if (
moment(this.grid.params.startMon).isBefore(
moment(this.grid.params.endMon).subtract(2, 'months').format('YYYYMM')
)
) {
this.row.title = '발송통계';
this.row.msg1 = '검색 기간은 최대 3개월까지 선택 가능 합니다.';
this.$refs.commmonModal.alertModalOpen(this.row);
return false
return false;
}
this.$refs.table.search(this.grid.params, isKeep);
this.sendStoreData();
},
toMove(routeName) {
this.$router.push({name: routeName, params: {page: 1, searchText: ''}});
this.$router.push({ name: routeName, params: { page: 1, searchText: '' } });
},
setPeriodDay(day) {
this.periodDay = day;
@@ -324,7 +383,14 @@ export default {
if (this.startDate > this.endDate) {
this.startDate = this.endDate;
}
const todayDate = new Date();
let selectDay = new Date(day);
let after3Month = new Date(selectDay.setMonth(selectDay.getMonth() + 2));
if (after3Month > todayDate) {
this.endDate = new Date();
} else {
this.endDate = after3Month;
}
},
selectedEndDate(day) {
if (day != undefined && day != null) {
@@ -334,11 +400,22 @@ export default {
closeDate(type) {
if (type != undefined && type != null) {
if (type == 'start') {
this.disabledSDate = {from: this.endDate};
this.disabledEDate = {to: this.startDate, from: this.endDate};
this.disabledSDate = { from: new Date() };
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()};
let stDate = new Date(this.startDate);
let fromDate = new Date(stDate.setMonth(stDate.getMonth() + 2));
let endDate = this.endDate;
const nowDate = new Date();
let selectedEndDate = endDate.getMonth() + 2;
if (Number(selectedEndDate) > Number(nowDate.getMonth())) {
this.disabledSDate = { from: new Date() };
this.disabledEDate = { to: this.startDate, from: new Date() };
} else {
this.disabledSDate = { from: new Date() };
this.disabledEDate = { to: this.startDate, from: fromDate };
}
}
}
},
@@ -351,7 +428,8 @@ export default {
return moment(date).format('YYYY-MM-DD');
}
},
changePerPage: function () { // 페이지당 조회할 개수
changePerPage: function () {
// 페이지당 조회할 개수
this.grid.pagePerRows = this.perPageCnt;
this.search(true);
},
@@ -360,7 +438,7 @@ export default {
this.$store.commit('searchcondition/updateSearchCondition', {
page: getP._currentPage,
perPage: this.perPageCnt,
params: this.grid.params
params: this.grid.params,
});
const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
@@ -372,7 +450,7 @@ export default {
},
getExcelHeader() {
// 헤더를 mockup으로 관리한다.
statsApi.getExcelHeader(this.pageType).then(res => {
statsApi.getExcelHeader(this.pageType).then((res) => {
this.excelHeader = res;
});
},
@@ -387,10 +465,10 @@ export default {
result.data.list = result.data.list.map((item) => {
return {
...item,
custNm: this.fromHtmlEntities(item.custNm)
}
custNm: this.fromHtmlEntities(item.custNm),
};
});
if (result != null && result.retCode == "0000") {
if (result != null && result.retCode == '0000') {
return result.data;
} else {
return false;
@@ -413,17 +491,15 @@ export default {
const data = await this.getExcelDataDown();
let options = {
header: this.excelHeader,
dataOrder: 'header'
dataOrder: 'header',
};
xlsx.export(data.list, saveFileName, options).then(() => {
});
xlsx.export(data.list, saveFileName, options).then(() => {});
},
fromHtmlEntities(str) {
return (str + '').replace(/&#\d+;/gm, function (s) {
return String.fromCharCode(s.match(/\d+/gm)[0]);
});
},
}
},
};
</script>
</script>

View File

@@ -12,28 +12,28 @@
<div class="search_wrap">
<div class="input_box cal">
<label for="right" class="label txt">조회기간</label>
<p> 최대 1개월까지 조회 가능합니다.</p>
<p>최대 1개월까지 조회 가능합니다.</p>
<div class="term">
<span class="custom_input icon_date">
<vuejs-datepicker
:language="ko"
:format="customFormatter"
:disabled-dates="disabledSDate"
v-model="startDate"
@selected="selectedStartDate(0)"
@closed="closeDate('start')"
></vuejs-datepicker>
</span>~
<span class="custom_input icon_date">
<vuejs-datepicker
:language="ko"
:format="customFormatter"
:disabled-dates="disabledEDate"
v-model="endDate"
@selected="selectedEndDate(0)"
@closed="closeDate('end')"
></vuejs-datepicker>
</span>
<vuejs-datepicker
:language="ko"
:format="customFormatter"
:disabled-dates="disabledSDate"
v-model="startDate"
@selected="selectedStartDate"
@closed="closeDate('start')"
></vuejs-datepicker> </span
>~
<span class="custom_input icon_date">
<vuejs-datepicker
:language="ko"
:format="customFormatter"
:disabled-dates="disabledEDate"
v-model="endDate"
@selected="selectedEndDate(0)"
@closed="closeDate('end')"
></vuejs-datepicker>
</span>
</div>
</div>
<button type="button" class="button grey" @click="search">조회</button>
@@ -41,77 +41,82 @@
<div class="info">
<div class="count">집계결과</div>
<div class="button_group">
<button type="button" class="button blue download" @click="excelDown();">엑셀 다운로드</button>
<button type="button" class="button blue download" @click="excelDown()">엑셀 다운로드</button>
</div>
</div>
<div class="table calculate">
<table>
<colgroup>
<col width="7%">
<col width="9.3%">
<col width="9.3%">
<col width="9.3%">
<col width="9.3%">
<col width="9.3%">
<col width="9.3%">
<col width="9.3%">
<col width="9.3%">
<col width="9.3%">
<col width="9.3%">
<col width="7%" />
<col width="9.3%" />
<col width="9.3%" />
<col width="9.3%" />
<col width="9.3%" />
<col width="9.3%" />
<col width="9.3%" />
<col width="9.3%" />
<col width="9.3%" />
<col width="9.3%" />
<col width="9.3%" />
</colgroup>
<thead>
<tr>
<th rowspan="2">날짜</th>
<th colspan="2">전체</th>
<th colspan="2">SMS</th>
<th colspan="2">LMS</th>
<th colspan="2">MMS</th>
<th colspan="2">알림톡</th>
</tr>
<tr class="total">
<th>발송건수</th>
<th>성공건수/(%)</th>
<th>발송건수</th>
<th>성공건수/(%)</th>
<th>발송건수</th>
<th>성공건수/(%)</th>
<th>발송건수</th>
<th>성공건수/(%)</th>
<th>발송건수</th>
<th>성공건수/(%)</th>
</tr>
<tr>
<th rowspan="2">날짜</th>
<th colspan="2">전체</th>
<th colspan="2">SMS</th>
<th colspan="2">LMS</th>
<th colspan="2">MMS</th>
<th colspan="2">알림톡</th>
</tr>
<tr class="total">
<th>발송건수</th>
<th>성공건수/(%)</th>
<th>발송건수</th>
<th>성공건수/(%)</th>
<th>발송건수</th>
<th>성공건수/(%)</th>
<th>발송건수</th>
<th>성공건수/(%)</th>
<th>발송건수</th>
<th>성공건수/(%)</th>
</tr>
</thead>
<tbody>
<tr v-for="(option, i) in list" v-bind:key="i">
<td>{{ option.sumYmd }}</td>
<td>{{ option.sndCnt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</td>
<td>{{ option.succCnt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}<br>({{ option.succRt }}%)</td>
<td>{{ option.sndCntS.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</td>
<td>{{ option.succCntS.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}<br>({{ option.succRtS }}%)</td>
<td>{{ option.sndCntL.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</td>
<td>{{ option.succCntL.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}<br>({{ option.succRtL }}%)</td>
<td>{{ option.sndCntM.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</td>
<td>{{ option.succCntM.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}<br>({{ option.succRtM }}%)</td>
<td>{{ option.sndCntR.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</td>
<td>{{ option.succCntR.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}<br>({{ option.succRtR }}%)</td>
</tr>
<tr v-for="(option, i) in list" v-bind:key="i">
<td>{{ option.sumYmd }}</td>
<td>{{ option.sndCnt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</td>
<td>{{ option.succCnt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}<br />({{ option.succRt }}%)</td>
<td>{{ option.sndCntS.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</td>
<td>
{{ option.succCntS.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}<br />({{ option.succRtS }}%)
</td>
<td>{{ option.sndCntL.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</td>
<td>
{{ option.succCntL.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}<br />({{ option.succRtL }}%)
</td>
<td>{{ option.sndCntM.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</td>
<td>
{{ option.succCntM.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}<br />({{ option.succRtM }}%)
</td>
<td>{{ option.sndCntR.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</td>
<td>
{{ option.succCntR.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}<br />({{ option.succRtR }}%)
</td>
</tr>
</tbody>
</table>
</div>
<common-modal ref="commmonModal"></common-modal>
</div>
</div>
</template>
<script>
import moment from 'moment';
import statsApi from "../service/statsApi.js";
import statsApi from '../service/statsApi.js';
import xlsx from '@/common/excel';
import commonModal from "@/components/modal/commonModal";
import commonModal from '@/components/modal/commonModal';
export default {
name: 'dayList',
@@ -145,12 +150,8 @@ export default {
this.getDayList();
this.getExcelHeader();
},
destroyed() {
},
mounted() {
},
destroyed() {},
mounted() {},
methods: {
async getDayList() {
this.row.startDay = moment(this.startDate).format('YYYYMMDD');
@@ -159,28 +160,27 @@ export default {
this.row.title = '발송통계';
this.row.msg1 = '검색 기간은 최대 1개월까지 선택 가능 합니다.';
this.$refs.commmonModal.alertModalOpen(this.row);
return false
return false;
}
try {
const response = await statsApi.dayList(this.row);
const result = response.data;
if (result != null && result.retCode == "0000") {
if (result != null && result.retCode == '0000') {
if (result.data.list.length > 0) {
this.list = result.data.list;
}
this.totalCnt = result.data.list.length;
} else {
}
} catch (err) {
}
} catch (err) {}
},
toMove(routeName) {
this.$router.push({name: routeName, params: {page: 1, searchText: ''}});
this.$router.push({ name: routeName, params: { page: 1, searchText: '' } });
},
search: function () {
this.getDayList();
},
},
setPeriodDay(day) {
this.periodDay = day;
@@ -197,6 +197,14 @@ export default {
if (this.startDate > this.endDate) {
this.startDate = this.endDate;
}
const todayDate = new Date();
let selectDay = new Date(day);
let after30Day = new Date(selectDay.setDate(selectDay.getDate() + 30));
if (after30Day > todayDate) {
this.endDate = new Date();
} else {
this.endDate = after30Day;
}
},
selectedEndDate(day) {
if (day != undefined && day != null) {
@@ -206,11 +214,22 @@ export default {
closeDate(type) {
if (type != undefined && type != null) {
if (type == 'start') {
this.disabledSDate = {from: this.endDate};
this.disabledEDate = {to: this.startDate, from: this.endDate};
this.disabledSDate = { from: new Date() };
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()};
let stDate = new Date(this.startDate);
let fromDate = new Date(stDate.setMonth(stDate.getDay() + 30));
let endDate = this.endDate;
const nowDate = new Date();
let selectedEndDate = endDate.getDay() + 30;
if (Number(selectedEndDate) > Number(nowDate.getMonth())) {
this.disabledSDate = { from: new Date() };
this.disabledEDate = { to: this.startDate, from: new Date() };
} else {
this.disabledSDate = { from: new Date() };
this.disabledEDate = { to: this.startDate, from: fromDate };
}
}
}
},
@@ -243,63 +262,61 @@ export default {
let options = {
header: this.excelHeader,
dataOrder: 'header'
dataOrder: 'header',
};
console.log(this.list);
// 일 별 통계 엑셀 데이터 만들기
var excelList = [];
for(var i=0; i<this.list.length; i++){
for (var i = 0; i < this.list.length; i++) {
var excelData = {};
excelData.sumYmd = this.list[i].sumYmd;
// 성공 건수
var succCnt = this.list[i].succCnt;
var succCnt = this.list[i].succCnt;
var succRt = this.list[i].succRt;
succCnt = succCnt + '(' + succRt + '%)'
succCnt = succCnt + '(' + succRt + '%)';
excelData.sndCnt = this.list[i].sndCnt;
excelData.succCnt = succCnt;
// SMS 성공 건수
var succCntS = this.list[i].succCntS;
var succCntS = this.list[i].succCntS;
var succRtS = this.list[i].succRtS;
succCntS = succCntS + '(' + succRtS + '%)'
succCntS = succCntS + '(' + succRtS + '%)';
excelData.sndCntS = this.list[i].sndCntS;
excelData.succCntS = succCntS;
// LMS 성공 건수
var succCntL = this.list[i].succCntL;
var succCntL = this.list[i].succCntL;
var succRtL = this.list[i].succRtL;
succCntL = succCntL + '(' + succRtL + '%)'
succCntL = succCntL + '(' + succRtL + '%)';
excelData.sndCntL = this.list[i].sndCntL;
excelData.succCntL = succCntL;
// MMS 성공 건수
var succCntM = this.list[i].succCntM;
var succCntM = this.list[i].succCntM;
var succRtM = this.list[i].succRtM;
succCntM = succCntM + '(' + succRtM + '%)'
succCntM = succCntM + '(' + succRtM + '%)';
excelData.sndCntM = this.list[i].sndCntM;
excelData.succCntM = succCntM;
// ALIMTALK 성공 건수
var succCntR = this.list[i].succCntR;
var succCntR = this.list[i].succCntR;
var succRtR = this.list[i].succRtR;
succCntR = succCntR + '(' + succRtR + '%)'
succCntR = succCntR + '(' + succRtR + '%)';
excelData.sndCntR = this.list[i].sndCntR;
excelData.succCntR = succCntR;
excelList.push(excelData);
}
xlsx.export(excelList, saveFileName, options).then(() => {
});
xlsx.export(excelList, saveFileName, options).then(() => {});
},
getExcelHeader() {
// 헤더를 mockup으로 관리한다.
statsApi.getExcelHeader(this.pageType).then(res => {
statsApi.getExcelHeader(this.pageType).then((res) => {
this.excelHeader = res;
});
},
}
},
};
</script>
</script>

View File

@@ -12,32 +12,32 @@
<div class="search_wrap">
<div class="input_box cal">
<label for="right" class="label txt">조회기간</label>
<p> 최대 3개월까지 조회 가능합니다.</p>
<p>최대 3개월까지 조회 가능합니다.</p>
<div class="term">
<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="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>
<vuejs-datepicker
:language="ko"
:format="customFormatter"
:disabled-dates="disabledSDate"
:minimumView="sDateDiv"
:maximumView="sDateDiv"
v-model="startDate"
@selected="selectedStartDate"
@closed="closeDate('start')"
></vuejs-datepicker> </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>
<button type="button" class="button grey" @click="search">조회</button>
@@ -45,76 +45,82 @@
<div class="info">
<div class="count">집계결과</div>
<div class="button_group">
<button type="button" class="button blue download" @click="excelDown();">엑셀 다운로드</button>
<button type="button" class="button blue download" @click="excelDown()">엑셀 다운로드</button>
</div>
</div>
<div class="table calculate">
<table>
<colgroup>
<col width="7%">
<col width="9.3%">
<col width="9.3%">
<col width="9.3%">
<col width="9.3%">
<col width="9.3%">
<col width="9.3%">
<col width="9.3%">
<col width="9.3%">
<col width="9.3%">
<col width="9.3%">
<col width="7%" />
<col width="9.3%" />
<col width="9.3%" />
<col width="9.3%" />
<col width="9.3%" />
<col width="9.3%" />
<col width="9.3%" />
<col width="9.3%" />
<col width="9.3%" />
<col width="9.3%" />
<col width="9.3%" />
</colgroup>
<thead>
<tr>
<th rowspan="2">날짜</th>
<th colspan="2">전체</th>
<th colspan="2">SMS</th>
<th colspan="2">LMS</th>
<th colspan="2">MMS</th>
<th colspan="2">알림톡</th>
</tr>
<tr class="total">
<th>발송건수</th>
<th>성공건수/(%)</th>
<th>발송건수</th>
<th>성공건수/(%)</th>
<th>발송건수</th>
<th>성공건수/(%)</th>
<th>발송건수</th>
<th>성공건수/(%)</th>
<th>발송건수</th>
<th>성공건수/(%)</th>
</tr>
<tr>
<th rowspan="2">날짜</th>
<th colspan="2">전체</th>
<th colspan="2">SMS</th>
<th colspan="2">LMS</th>
<th colspan="2">MMS</th>
<th colspan="2">알림톡</th>
</tr>
<tr class="total">
<th>발송건수</th>
<th>성공건수/(%)</th>
<th>발송건수</th>
<th>성공건수/(%)</th>
<th>발송건수</th>
<th>성공건수/(%)</th>
<th>발송건수</th>
<th>성공건수/(%)</th>
<th>발송건수</th>
<th>성공건수/(%)</th>
</tr>
</thead>
<tbody>
<tr v-for="(option, i) in list" v-bind:key="i">
<td>{{ option.sumYm }}</td>
<td>{{ option.sndCnt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</td>
<td>{{ option.succCnt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}<br>({{ option.succRt }}%)</td>
<td>{{ option.sndCntS.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</td>
<td>{{ option.succCntS.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}<br>({{ option.succRtS }}%)</td>
<td>{{ option.sndCntL.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</td>
<td>{{ option.succCntL.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}<br>({{ option.succRtL }}%)</td>
<td>{{ option.sndCntM.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</td>
<td>{{ option.succCntM.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}<br>({{ option.succRtM }}%)</td>
<td>{{ option.sndCntR.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</td>
<td>{{ option.succCntR.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}<br>({{ option.succRtR }}%)</td>
</tr>
<tr v-for="(option, i) in list" v-bind:key="i">
<td>{{ option.sumYm }}</td>
<td>{{ option.sndCnt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</td>
<td>{{ option.succCnt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}<br />({{ option.succRt }}%)</td>
<td>{{ option.sndCntS.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</td>
<td>
{{ option.succCntS.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}<br />({{ option.succRtS }}%)
</td>
<td>{{ option.sndCntL.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</td>
<td>
{{ option.succCntL.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}<br />({{ option.succRtL }}%)
</td>
<td>{{ option.sndCntM.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</td>
<td>
{{ option.succCntM.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}<br />({{ option.succRtM }}%)
</td>
<td>{{ option.sndCntR.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</td>
<td>
{{ option.succCntR.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}<br />({{ option.succRtR }}%)
</td>
</tr>
</tbody>
</table>
</div>
<common-modal ref="commmonModal"></common-modal>
</div>
</div>
</template>
<script>
import moment from 'moment';
import statsApi from "../service/statsApi.js";
import statsApi from '../service/statsApi.js';
import xlsx from '@/common/excel';
import commonModal from "@/components/modal/commonModal";
import commonModal from '@/components/modal/commonModal';
// import DatePicker from "vue2-datepicker";
export default {
@@ -137,7 +143,7 @@ export default {
row: {},
list: [],
totalCnt: '',
pageType: 'MONTH'
pageType: 'MONTH',
};
},
components: {
@@ -149,10 +155,8 @@ export default {
this.getMonthList();
this.getExcelHeader();
},
destroyed() {
},
mounted() {
},
destroyed() {},
mounted() {},
methods: {
async getMonthList() {
this.row.startMon = moment(this.startDate).format('YYYYMM');
@@ -162,24 +166,23 @@ export default {
this.row.title = '발송통계';
this.row.msg1 = '검색 기간은 최대 3개월까지 선택 가능 합니다.';
this.$refs.commmonModal.alertModalOpen(this.row);
return false
return false;
}
try {
const response = await statsApi.monthList(this.row);
const result = response.data;
if (result != null && result.retCode == "0000") {
if (result != null && result.retCode == '0000') {
this.list = result.data.list;
this.totalCnt = result.data.list.length;
}
} catch (err) {
}
}
} catch (err) {}
},
search: function () {
this.getMonthList();
},
toMove(routeName) {
this.$router.push({name: routeName, params: {}});
this.$router.push({ name: routeName, params: {} });
},
setPeriodDay(day) {
this.periodDay = day;
@@ -196,6 +199,14 @@ export default {
if (this.startDate > this.endDate) {
this.startDate = this.endDate;
}
const todayDate = new Date();
let selectDay = new Date(day);
let after3Month = new Date(selectDay.setMonth(selectDay.getMonth() + 2));
if (after3Month > todayDate) {
this.endDate = new Date();
} else {
this.endDate = after3Month;
}
},
selectedEndDate(day) {
if (day != undefined && day != null) {
@@ -205,11 +216,22 @@ export default {
closeDate(type) {
if (type != undefined && type != null) {
if (type == 'start') {
this.disabledSDate = {from: this.endDate};
this.disabledEDate = {to: this.startDate, from: this.endDate};
this.disabledSDate = { from: new Date() };
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()};
let stDate = new Date(this.startDate);
let fromDate = new Date(stDate.setMonth(stDate.getMonth() + 2));
let endDate = this.endDate;
const nowDate = new Date();
let selectedEndDate = endDate.getMonth() + 2;
if (Number(selectedEndDate) > Number(nowDate.getMonth())) {
this.disabledSDate = { from: new Date() };
this.disabledEDate = { to: this.startDate, from: new Date() };
} else {
this.disabledSDate = { from: new Date() };
this.disabledEDate = { to: this.startDate, from: fromDate };
}
}
}
},
@@ -271,62 +293,60 @@ export default {
let options = {
header: this.excelHeader,
dataOrder: 'header'
dataOrder: 'header',
};
// 월 별 통계 엑셀 데이터 만들기
// 월 별 통계 엑셀 데이터 만들기
var excelList = [];
for(var i=0; i<this.list.length; i++){
for (var i = 0; i < this.list.length; i++) {
var excelData = {};
excelData.sumYm = this.list[i].sumYm;
// 성공 건수
var succCnt = this.list[i].succCnt;
var succCnt = this.list[i].succCnt;
var succRt = this.list[i].succRt;
succCnt = succCnt + '(' + succRt + '%)'
succCnt = succCnt + '(' + succRt + '%)';
excelData.sndCnt = this.list[i].sndCnt;
excelData.succCnt = succCnt;
// SMS 성공 건수
var succCntS = this.list[i].succCntS;
var succCntS = this.list[i].succCntS;
var succRtS = this.list[i].succRtS;
succCntS = succCntS + '(' + succRtS + '%)'
succCntS = succCntS + '(' + succRtS + '%)';
excelData.sndCntS = this.list[i].sndCntS;
excelData.succCntS = succCntS;
// LMS 성공 건수
var succCntL = this.list[i].succCntL;
var succCntL = this.list[i].succCntL;
var succRtL = this.list[i].succRtL;
succCntL = succCntL + '(' + succRtL + '%)'
succCntL = succCntL + '(' + succRtL + '%)';
excelData.sndCntL = this.list[i].sndCntL;
excelData.succCntL = succCntL;
// MMS 성공 건수
var succCntM = this.list[i].succCntM;
var succCntM = this.list[i].succCntM;
var succRtM = this.list[i].succRtM;
succCntM = succCntM + '(' + succRtM + '%)'
succCntM = succCntM + '(' + succRtM + '%)';
excelData.sndCntM = this.list[i].sndCntM;
excelData.succCntM = succCntM;
// ALIMTALK 성공 건수
var succCntR = this.list[i].succCntR;
var succCntR = this.list[i].succCntR;
var succRtR = this.list[i].succRtR;
succCntR = succCntR + '(' + succRtR + '%)'
succCntR = succCntR + '(' + succRtR + '%)';
excelData.sndCntR = this.list[i].sndCntR;
excelData.succCntR = succCntR;
excelList.push(excelData);
}
xlsx.export(excelList, saveFileName, options).then(() => {
});
xlsx.export(excelList, saveFileName, options).then(() => {});
},
getExcelHeader() {
// 헤더를 mockup으로 관리한다.
statsApi.getExcelHeader(this.pageType).then(res => {
statsApi.getExcelHeader(this.pageType).then((res) => {
this.excelHeader = res;
});
},
}
},
};
</script>
</script>