발송통계 조회기간을 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> <template>
<div class="contents"> <div class="contents">
<div class="contents_wrap"> <div class="contents_wrap">
<div class="top_wrap"> <div class="top_wrap">
@@ -20,17 +19,17 @@
~ ~
<input class="" type="text" id="" placeholder="2022-10-12"/> <input class="" type="text" id="" placeholder="2022-10-12"/>
--> -->
<div class="group" style="width:500px;"> <div class="group" style="width: 500px">
<span class="custom_input icon_date"> <span class="custom_input icon_date">
<vuejs-datepicker <vuejs-datepicker
:language="ko" :language="ko"
:format="customFormatter" :format="customFormatter"
:disabled-dates="disabledSDate" :disabled-dates="disabledSDate"
v-model="startDate" v-model="startDate"
@selected="selectedStartDate(0)" @selected="selectedStartDate"
@closed="closeDate('start')" @closed="closeDate('start')"
></vuejs-datepicker> ></vuejs-datepicker> </span
</span>~ >~
<span class="custom_input icon_date"> <span class="custom_input icon_date">
<vuejs-datepicker <vuejs-datepicker
:language="ko" :language="ko"
@@ -42,26 +41,32 @@
></vuejs-datepicker> ></vuejs-datepicker>
</span> </span>
</div> </div>
</div> </div>
</div> </div>
<div class="input_box id"> <div class="input_box id">
<label for="name" class="label">고객사명</label> <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>
<div class="input_box"> <div class="input_box">
<label for="name" class="label">사업자번호</label> <label for="name" class="label">사업자번호</label>
<input class="search-box" type="text" id="name" placeholder="검색어 입력" v-model.trim="grid.params.bizrno" @keypress="onlyNum" <input
@input="onlyNum" maxlength="10"> class="search-box"
type="text"
id="name"
placeholder="검색어 입력"
v-model.trim="grid.params.bizrno"
@keypress="onlyNum"
@input="onlyNum"
maxlength="10"
/>
</div> </div>
<button type="button" class="button grey" @click="search">조회</button> <button type="button" class="button grey" @click="search">조회</button>
</div> </div>
<div class="info"> <div class="info">
<div class="count">집계결과</div> <div class="count">집계결과</div>
<div class="button_group"> <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> </div>
<div class="table calculate scroll"> <div class="table calculate scroll">
@@ -86,10 +91,10 @@
<script> <script>
import moment from 'moment'; import moment from 'moment';
import statsApi from "../service/statsApi.js"; import statsApi from '../service/statsApi.js';
import customGrid from '@/components/CustomGrid'; import customGrid from '@/components/CustomGrid';
import xlsx from '@/common/excel'; import xlsx from '@/common/excel';
import commonModal from "@/components/modal/commonModal"; import commonModal from '@/components/modal/commonModal';
import { utils_mixin, chkPattern2 } from '../service/mixins'; import { utils_mixin, chkPattern2 } from '../service/mixins';
export default { export default {
@@ -121,7 +126,7 @@ export default {
options: [ options: [
{ text: '20', value: 20 }, { text: '20', value: 20 },
{ text: '50', value: 50 }, { text: '50', value: 50 },
{text: '100', value: 100} { text: '100', value: 100 },
], ],
totalItems: 0, totalItems: 0,
grid: { grid: {
@@ -142,7 +147,7 @@ export default {
{ header: 'LMS', childNames: ['sndCntL', 'succCntRtL'] }, { header: 'LMS', childNames: ['sndCntL', 'succCntRtL'] },
{ header: 'MMS', childNames: ['sndCntM', 'succCntRtM'] }, { header: 'MMS', childNames: ['sndCntM', 'succCntRtM'] },
{ header: '알림톡', childNames: ['sndCntR', 'succCntRtR'] }, { header: '알림톡', childNames: ['sndCntR', 'succCntRtR'] },
] ],
], ],
columns: [ columns: [
@@ -150,95 +155,138 @@ export default {
{ name: 'custNm', header: '고객사명', align: 'center' }, { name: 'custNm', header: '고객사명', align: 'center' },
{ name: 'bizrno', header: '사업자번호', align: 'center' }, { name: 'bizrno', header: '사업자번호', align: 'center' },
{ {
name: 'sndCnt', header: '발송건수', align: 'center', cls: 'td_line', name: 'sndCnt',
formatter: props => { header: '발송건수',
align: 'center',
cls: 'td_line',
formatter: (props) => {
let result = props.sndCnt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); let result = props.sndCnt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
return result; return result;
} },
}, },
{ {
name: 'succCntRt', name: 'succCntRt',
header: '성공건수/(%)', header: '성공건수/(%)',
align: 'center', align: 'center',
cls: 'td_line', cls: 'td_line',
formatter: props => { formatter: (props) => {
return "<p>" + props.succCnt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + "</p>\n<p>(" + props.succRt + "%)</p>"; 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', name: 'sndCntS',
formatter: props => { header: '발송건수',
align: 'center',
cls: 'td_line',
formatter: (props) => {
let result = props.sndCntS.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); let result = props.sndCntS.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
return result; return result;
} },
}, },
{ {
name: 'succCntRtS', name: 'succCntRtS',
header: '성공건수/(%)', header: '성공건수/(%)',
align: 'center', align: 'center',
cls: 'td_line', cls: 'td_line',
formatter: props => { formatter: (props) => {
return "<p>" + props.succCntS.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + "</p>\n<p>(" + props.succRtS + "%)</p>"; 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', name: 'sndCntL',
formatter: props => { header: '발송건수',
align: 'center',
cls: 'td_line',
formatter: (props) => {
let result = props.sndCntL.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); let result = props.sndCntL.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
return result; return result;
} },
}, },
{ {
name: 'succCntRtL', name: 'succCntRtL',
header: '성공건수/(%)', header: '성공건수/(%)',
align: 'center', align: 'center',
cls: 'td_line', cls: 'td_line',
formatter: props => { formatter: (props) => {
return "<p>" + props.succCntL.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + "</p>\n<p>(" + props.succRtL + "%)</p>"; 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', name: 'sndCntM',
formatter: props => { header: '발송건수',
align: 'center',
cls: 'td_line',
formatter: (props) => {
let result = props.sndCntM.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); let result = props.sndCntM.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
return result; return result;
} },
}, },
{ {
name: 'succCntRtM', name: 'succCntRtM',
header: '성공건수/(%)', header: '성공건수/(%)',
align: 'center', align: 'center',
cls: 'td_line', cls: 'td_line',
formatter: props => { formatter: (props) => {
return "<p>" + props.succCntM.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + "</p>\n<p>(" + props.succRtM + "%)</p>"; 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', name: 'sndCntR',
formatter: props => { header: '발송건수',
align: 'center',
cls: 'td_line',
formatter: (props) => {
let result = props.sndCntR.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); let result = props.sndCntR.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
return result; return result;
} },
}, },
{ {
name: 'succCntRtR', name: 'succCntRtR',
header: '성공건수/(%)', header: '성공건수/(%)',
align: 'center', align: 'center',
cls: 'td_line', cls: 'td_line',
formatter: props => { formatter: (props) => {
return "<p>" + props.succCntR.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + "</p>\n<p>(" + props.succRtR + ")</p>"; return (
} '<p>' +
props.succCntR.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +
'</p>\n<p>(' +
props.succRtR +
')</p>'
);
},
}, },
], ],
noDataStr: '검색 결과가 없습니다.', noDataStr: '검색 결과가 없습니다.',
params: { params: {
startDay: '', startDay: '',
endDay: '' endDay: '',
},
excelHeader: [],
}, },
excelHeader: []
}
}; };
}, },
components: { components: {
@@ -253,7 +301,6 @@ export default {
destroyed() { destroyed() {
this.grid.params.custNm = ''; this.grid.params.custNm = '';
this.grid.params.bizrno = ''; this.grid.params.bizrno = '';
}, },
mounted() { mounted() {
let page = 1; let page = 1;
@@ -271,12 +318,11 @@ export default {
this.search(isKeep); this.search(isKeep);
}, },
beforeRouteLeave(to, from, next) { beforeRouteLeave(to, from, next) {
const getP = this.$refs.table.getPagination(); const getP = this.$refs.table.getPagination();
this.$store.commit('searchcondition/updateSearchCondition', { this.$store.commit('searchcondition/updateSearchCondition', {
page: getP._currentPage, page: getP._currentPage,
perPage: this.perPageCnt, perPage: this.perPageCnt,
params: this.grid.params params: this.grid.params,
}); });
// 라우트 하기전 실행 // 라우트 하기전 실행
next(); next();
@@ -287,14 +333,18 @@ export default {
startDay: moment(this.startDate).format('YYYYMMDD'), startDay: moment(this.startDate).format('YYYYMMDD'),
endDay: moment(this.endDate).format('YYYYMMDD'), endDay: moment(this.endDate).format('YYYYMMDD'),
custNm: this.grid.params.custNm, 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.title = '발송통계';
this.row.msg1 = '검색 기간은 최대 1개월까지 선택 가능 합니다.'; this.row.msg1 = '검색 기간은 최대 1개월까지 선택 가능 합니다.';
this.$refs.commmonModal.alertModalOpen(this.row); this.$refs.commmonModal.alertModalOpen(this.row);
return false return false;
} }
this.$refs.table.search(this.grid.params, isKeep); this.$refs.table.search(this.grid.params, isKeep);
@@ -318,7 +368,14 @@ export default {
if (this.startDate > this.endDate) { if (this.startDate > this.endDate) {
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) { selectedEndDate(day) {
if (day != undefined && day != null) { if (day != undefined && day != null) {
@@ -331,8 +388,19 @@ export default {
this.disabledSDate = { from: this.endDate }; this.disabledSDate = { from: this.endDate };
this.disabledEDate = { to: this.startDate, from: this.endDate }; this.disabledEDate = { to: this.startDate, from: this.endDate };
} else if (type == 'end') { } else if (type == 'end') {
this.disabledSDate = {from: this.endDate}; 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() }; 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'); return moment(date).format('YYYY-MM-DD');
} }
}, },
changePerPage: function () { // 페이지당 조회할 개수 changePerPage: function () {
// 페이지당 조회할 개수
this.grid.pagePerRows = this.perPageCnt; this.grid.pagePerRows = this.perPageCnt;
this.search(true); this.search(true);
}, },
@@ -354,7 +423,7 @@ export default {
this.$store.commit('searchcondition/updateSearchCondition', { this.$store.commit('searchcondition/updateSearchCondition', {
page: getP._currentPage, page: getP._currentPage,
perPage: this.perPageCnt, perPage: this.perPageCnt,
params: this.grid.params params: this.grid.params,
}); });
const getCondition = this.$store.getters['searchcondition/getSearchCondition']; const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
@@ -375,10 +444,10 @@ export default {
result.data.list = result.data.list.map((item) => { result.data.list = result.data.list.map((item) => {
return { return {
...item, ...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; return result.data;
} else { } else {
return false; return false;
@@ -401,14 +470,13 @@ export default {
const data = await this.getExcelDataDown(); const data = await this.getExcelDataDown();
let options = { let options = {
header: this.excelHeader, header: this.excelHeader,
dataOrder: 'header' dataOrder: 'header',
}; };
xlsx.export(data.list, saveFileName, options).then(() => { xlsx.export(data.list, saveFileName, options).then(() => {});
});
}, },
getExcelHeader() { getExcelHeader() {
// 헤더를 mockup으로 관리한다. // 헤더를 mockup으로 관리한다.
statsApi.getExcelHeader(this.pageType).then(res => { statsApi.getExcelHeader(this.pageType).then((res) => {
this.excelHeader = res; this.excelHeader = res;
}); });
}, },
@@ -417,6 +485,6 @@ export default {
return String.fromCharCode(s.match(/\d+/gm)[0]); return String.fromCharCode(s.match(/\d+/gm)[0]);
}); });
}, },
} },
}; };
</script> </script>

View File

@@ -1,5 +1,4 @@
<template> <template>
<div class="contents"> <div class="contents">
<div class="contents_wrap"> <div class="contents_wrap">
<div class="top_wrap"> <div class="top_wrap">
@@ -15,7 +14,7 @@
<label for="right" class="label txt">조회기간</label> <label for="right" class="label txt">조회기간</label>
<p>최대 3개월까지 조회 가능합니다.</p> <p>최대 3개월까지 조회 가능합니다.</p>
<div class="term"> <div class="term">
<div class="group" style="width:500px;"> <div class="group" style="width: 500px">
<span class="custom_input icon_date"> <span class="custom_input icon_date">
<vuejs-datepicker <vuejs-datepicker
:language="ko" :language="ko"
@@ -24,10 +23,10 @@
:minimumView="sDateDiv" :minimumView="sDateDiv"
:maximumView="sDateDiv" :maximumView="sDateDiv"
v-model="startDate" v-model="startDate"
@selected="selectedStartDate(0)" @selected="selectedStartDate"
@closed="closeDate('start')" @closed="closeDate('start')"
></vuejs-datepicker> ></vuejs-datepicker> </span
</span>~ >~
<span class="custom_input icon_date"> <span class="custom_input icon_date">
<vuejs-datepicker <vuejs-datepicker
:language="ko" :language="ko"
@@ -41,26 +40,40 @@
></vuejs-datepicker> ></vuejs-datepicker>
</span> </span>
</div> </div>
</div> </div>
</div> </div>
<div class="input_box id"> <div class="input_box id">
<label for="name" class="label">고객사명</label> <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>
<div class="input_box"> <div class="input_box">
<label for="name" class="label">사업자번호</label> <label for="name" class="label">사업자번호</label>
<input class="search-box" type="text" id="name" placeholder="검색어 입력" v-model.trim="grid.params.bizrno" @keypress="onlyNum" <input
@input="onlyNum" minlength="10" maxlength="10"> class="search-box"
type="text"
id="name"
placeholder="검색어 입력"
v-model.trim="grid.params.bizrno"
@keypress="onlyNum"
@input="onlyNum"
minlength="10"
maxlength="10"
/>
</div> </div>
<button type="button" class="button grey" @click="search">조회</button> <button type="button" class="button grey" @click="search">조회</button>
</div> </div>
<div class="info"> <div class="info">
<div class="count">집계결과</div> <div class="count">집계결과</div>
<div class="button_group"> <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> </div>
<div class="table calculate scroll"> <div class="table calculate scroll">
<custom-grid <custom-grid
@@ -84,10 +97,10 @@
<script> <script>
import moment from 'moment'; import moment from 'moment';
import statsApi from "../service/statsApi.js"; import statsApi from '../service/statsApi.js';
import customGrid from '@/components/CustomGrid'; import customGrid from '@/components/CustomGrid';
import xlsx from '@/common/excel'; import xlsx from '@/common/excel';
import commonModal from "@/components/modal/commonModal"; import commonModal from '@/components/modal/commonModal';
import { utils_mixin, chkPattern2 } from '../service/mixins'; import { utils_mixin, chkPattern2 } from '../service/mixins';
export default { export default {
@@ -119,7 +132,7 @@ export default {
options: [ options: [
{ text: '20', value: 20 }, { text: '20', value: 20 },
{ text: '50', value: 50 }, { text: '50', value: 50 },
{text: '100', value: 100} { text: '100', value: 100 },
], ],
totalItems: 0, totalItems: 0,
grid: { grid: {
@@ -140,109 +153,154 @@ export default {
{ header: 'LMS', childNames: ['sndCntL', 'succCntRtL'] }, { header: 'LMS', childNames: ['sndCntL', 'succCntRtL'] },
{ header: 'MMS', childNames: ['sndCntM', 'succCntRtM'] }, { header: 'MMS', childNames: ['sndCntM', 'succCntRtM'] },
{ header: '알림톡', childNames: ['sndCntR', 'succCntRtR'] }, { header: '알림톡', childNames: ['sndCntR', 'succCntRtR'] },
] ],
], ],
columns: [ columns: [
{ name: 'sumYm', header: '날짜', align: 'center' }, { name: 'sumYm', header: '날짜', align: 'center' },
{ name: 'custNm', header: '고객사명', align: 'center' }, { name: 'custNm', header: '고객사명', align: 'center' },
{ {
name: 'bizrno', header: '사업자번호', align: 'center' name: 'bizrno',
header: '사업자번호',
align: 'center',
// , formatter: props => { // , formatter: props => {
// let result = props.bizrno.substring(0, 3) + '-' + props.bizrno.substring(3, 5) + '-' + props.bizrno.substring(5, 10) // let result = props.bizrno.substring(0, 3) + '-' + props.bizrno.substring(3, 5) + '-' + props.bizrno.substring(5, 10)
// return result; // return result;
// } // }
}, },
{ {
name: 'sndCnt', header: '발송건수', align: 'center', cls: 'td_line', name: 'sndCnt',
formatter: props => { header: '발송건수',
align: 'center',
cls: 'td_line',
formatter: (props) => {
let result = props.sndCnt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); let result = props.sndCnt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
return result; return result;
} },
}, },
{ {
name: 'succCntRt', name: 'succCntRt',
header: '성공건수/(%)', header: '성공건수/(%)',
align: 'center', align: 'center',
cls: 'td_line', cls: 'td_line',
formatter: props => { formatter: (props) => {
return "<p>" + props.succCnt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + "</p>\n<p>(" + props.succRt + "%)</p>"; 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', name: 'sndCntS',
formatter: props => { header: '발송건수',
align: 'center',
cls: 'td_line',
formatter: (props) => {
let result = props.sndCntS.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); let result = props.sndCntS.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
return result; return result;
} },
}, },
{ {
name: 'succCntRtS', name: 'succCntRtS',
header: '성공건수/(%)', header: '성공건수/(%)',
align: 'center', align: 'center',
cls: 'td_line', cls: 'td_line',
formatter: props => { formatter: (props) => {
return "<p>" + props.succCntS.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + "</p>\n<p>(" + props.succRtS + "%)</p>"; 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', name: 'sndCntL',
formatter: props => { header: '발송건수',
align: 'center',
cls: 'td_line',
formatter: (props) => {
let result = props.sndCntL.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); let result = props.sndCntL.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
return result; return result;
} },
}, },
{ {
name: 'succCntRtL', name: 'succCntRtL',
header: '성공건수/(%)', header: '성공건수/(%)',
align: 'center', align: 'center',
cls: 'td_line', cls: 'td_line',
formatter: props => { formatter: (props) => {
return "<p>" + props.succCntL.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + "</p>\n<p>(" + props.succRtL + "%)</p>"; 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', name: 'sndCntM',
formatter: props => { header: '발송건수',
align: 'center',
cls: 'td_line',
formatter: (props) => {
let result = props.sndCntM.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); let result = props.sndCntM.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
return result; return result;
} },
}, },
{ {
name: 'succCntRtM', name: 'succCntRtM',
header: '성공건수/(%)', header: '성공건수/(%)',
align: 'center', align: 'center',
cls: 'td_line', cls: 'td_line',
formatter: props => { formatter: (props) => {
return "<p>" + props.succCntM.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + "</p>\n<p>(" + props.succRtM + "%)</p>"; 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', name: 'sndCntR',
formatter: props => { header: '발송건수',
align: 'center',
cls: 'td_line',
formatter: (props) => {
let result = props.sndCntR.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); let result = props.sndCntR.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
return result; return result;
} },
}, },
{ {
name: 'succCntRtR', name: 'succCntRtR',
header: '성공건수/(%)', header: '성공건수/(%)',
align: 'center', align: 'center',
cls: 'td_line', cls: 'td_line',
formatter: props => { formatter: (props) => {
return "<p>" + props.succCntR.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + "</p>\n<p>(" + props.succRtR + ")</p>"; return (
} '<p>' +
props.succCntR.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +
'</p>\n<p>(' +
props.succRtR +
')</p>'
);
},
}, },
], ],
noDataStr: '검색 결과가 없습니다.', noDataStr: '검색 결과가 없습니다.',
params: { params: {
startMon: '', startMon: '',
endMon: '' endMon: '',
},
excelHeader: [],
}, },
excelHeader: []
}
}; };
}, },
components: { components: {
@@ -253,12 +311,10 @@ export default {
created() { created() {
this.setPeriodDay(0); this.setPeriodDay(0);
this.getExcelHeader(); this.getExcelHeader();
}, },
destroyed() { destroyed() {
this.grid.params.custNm = ''; this.grid.params.custNm = '';
this.grid.params.bizrno = ''; this.grid.params.bizrno = '';
}, },
mounted() { mounted() {
let page = 1; let page = 1;
@@ -276,12 +332,11 @@ export default {
this.search(isKeep); this.search(isKeep);
}, },
beforeRouteLeave(to, from, next) { beforeRouteLeave(to, from, next) {
const getP = this.$refs.table.getPagination(); const getP = this.$refs.table.getPagination();
this.$store.commit('searchcondition/updateSearchCondition', { this.$store.commit('searchcondition/updateSearchCondition', {
page: getP._currentPage, page: getP._currentPage,
perPage: this.perPageCnt, perPage: this.perPageCnt,
params: this.grid.params params: this.grid.params,
}); });
// 라우트 하기전 실행 // 라우트 하기전 실행
next(); next();
@@ -292,14 +347,18 @@ export default {
startMon: moment(this.startDate).format('YYYYMM'), startMon: moment(this.startDate).format('YYYYMM'),
endMon: moment(this.endDate).format('YYYYMM'), endMon: moment(this.endDate).format('YYYYMM'),
custNm: this.grid.params.custNm, 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.title = '발송통계';
this.row.msg1 = '검색 기간은 최대 3개월까지 선택 가능 합니다.'; this.row.msg1 = '검색 기간은 최대 3개월까지 선택 가능 합니다.';
this.$refs.commmonModal.alertModalOpen(this.row); this.$refs.commmonModal.alertModalOpen(this.row);
return false return false;
} }
this.$refs.table.search(this.grid.params, isKeep); this.$refs.table.search(this.grid.params, isKeep);
@@ -324,7 +383,14 @@ export default {
if (this.startDate > this.endDate) { if (this.startDate > this.endDate) {
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) { selectedEndDate(day) {
if (day != undefined && day != null) { if (day != undefined && day != null) {
@@ -334,11 +400,22 @@ export default {
closeDate(type) { closeDate(type) {
if (type != undefined && type != null) { if (type != undefined && type != null) {
if (type == 'start') { if (type == 'start') {
this.disabledSDate = {from: this.endDate}; this.disabledSDate = { from: new Date() };
this.disabledEDate = { to: this.startDate, from: this.endDate }; this.disabledEDate = { to: this.startDate, from: this.endDate };
} else if (type == 'end') { } else if (type == 'end') {
this.disabledSDate = {from: this.endDate}; 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() }; 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'); return moment(date).format('YYYY-MM-DD');
} }
}, },
changePerPage: function () { // 페이지당 조회할 개수 changePerPage: function () {
// 페이지당 조회할 개수
this.grid.pagePerRows = this.perPageCnt; this.grid.pagePerRows = this.perPageCnt;
this.search(true); this.search(true);
}, },
@@ -360,7 +438,7 @@ export default {
this.$store.commit('searchcondition/updateSearchCondition', { this.$store.commit('searchcondition/updateSearchCondition', {
page: getP._currentPage, page: getP._currentPage,
perPage: this.perPageCnt, perPage: this.perPageCnt,
params: this.grid.params params: this.grid.params,
}); });
const getCondition = this.$store.getters['searchcondition/getSearchCondition']; const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
@@ -372,7 +450,7 @@ export default {
}, },
getExcelHeader() { getExcelHeader() {
// 헤더를 mockup으로 관리한다. // 헤더를 mockup으로 관리한다.
statsApi.getExcelHeader(this.pageType).then(res => { statsApi.getExcelHeader(this.pageType).then((res) => {
this.excelHeader = res; this.excelHeader = res;
}); });
}, },
@@ -387,10 +465,10 @@ export default {
result.data.list = result.data.list.map((item) => { result.data.list = result.data.list.map((item) => {
return { return {
...item, ...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; return result.data;
} else { } else {
return false; return false;
@@ -413,17 +491,15 @@ export default {
const data = await this.getExcelDataDown(); const data = await this.getExcelDataDown();
let options = { let options = {
header: this.excelHeader, header: this.excelHeader,
dataOrder: 'header' dataOrder: 'header',
}; };
xlsx.export(data.list, saveFileName, options).then(() => { xlsx.export(data.list, saveFileName, options).then(() => {});
});
}, },
fromHtmlEntities(str) { fromHtmlEntities(str) {
return (str + '').replace(/&#\d+;/gm, function (s) { return (str + '').replace(/&#\d+;/gm, function (s) {
return String.fromCharCode(s.match(/\d+/gm)[0]); return String.fromCharCode(s.match(/\d+/gm)[0]);
}); });
}, },
},
}
}; };
</script> </script>

View File

@@ -20,10 +20,10 @@
:format="customFormatter" :format="customFormatter"
:disabled-dates="disabledSDate" :disabled-dates="disabledSDate"
v-model="startDate" v-model="startDate"
@selected="selectedStartDate(0)" @selected="selectedStartDate"
@closed="closeDate('start')" @closed="closeDate('start')"
></vuejs-datepicker> ></vuejs-datepicker> </span
</span>~ >~
<span class="custom_input icon_date"> <span class="custom_input icon_date">
<vuejs-datepicker <vuejs-datepicker
:language="ko" :language="ko"
@@ -41,24 +41,23 @@
<div class="info"> <div class="info">
<div class="count">집계결과</div> <div class="count">집계결과</div>
<div class="button_group"> <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> </div>
<div class="table calculate"> <div class="table calculate">
<table> <table>
<colgroup> <colgroup>
<col width="7%"> <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="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> </colgroup>
<thead> <thead>
<tr> <tr>
@@ -86,32 +85,38 @@
<tr v-for="(option, i) in list" v-bind:key="i"> <tr v-for="(option, i) in list" v-bind:key="i">
<td>{{ option.sumYmd }}</td> <td>{{ option.sumYmd }}</td>
<td>{{ option.sndCnt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</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.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.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.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.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.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.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.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.sndCntR.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</td>
<td>{{ option.succCntR.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}<br>({{ option.succRtR }}%)</td> <td>
{{ option.succCntR.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}<br />({{ option.succRtR }}%)
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<common-modal ref="commmonModal"></common-modal> <common-modal ref="commmonModal"></common-modal>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import moment from 'moment'; import moment from 'moment';
import statsApi from "../service/statsApi.js"; import statsApi from '../service/statsApi.js';
import xlsx from '@/common/excel'; import xlsx from '@/common/excel';
import commonModal from "@/components/modal/commonModal"; import commonModal from '@/components/modal/commonModal';
export default { export default {
name: 'dayList', name: 'dayList',
@@ -145,12 +150,8 @@ export default {
this.getDayList(); this.getDayList();
this.getExcelHeader(); this.getExcelHeader();
}, },
destroyed() { destroyed() {},
mounted() {},
},
mounted() {
},
methods: { methods: {
async getDayList() { async getDayList() {
this.row.startDay = moment(this.startDate).format('YYYYMMDD'); this.row.startDay = moment(this.startDate).format('YYYYMMDD');
@@ -159,21 +160,20 @@ export default {
this.row.title = '발송통계'; this.row.title = '발송통계';
this.row.msg1 = '검색 기간은 최대 1개월까지 선택 가능 합니다.'; this.row.msg1 = '검색 기간은 최대 1개월까지 선택 가능 합니다.';
this.$refs.commmonModal.alertModalOpen(this.row); this.$refs.commmonModal.alertModalOpen(this.row);
return false return false;
} }
try { try {
const response = await statsApi.dayList(this.row); const response = await statsApi.dayList(this.row);
const result = response.data; const result = response.data;
if (result != null && result.retCode == "0000") { if (result != null && result.retCode == '0000') {
if (result.data.list.length > 0) { if (result.data.list.length > 0) {
this.list = result.data.list; this.list = result.data.list;
} }
this.totalCnt = result.data.list.length; this.totalCnt = result.data.list.length;
} else { } else {
} }
} catch (err) { } catch (err) {}
}
}, },
toMove(routeName) { toMove(routeName) {
this.$router.push({ name: routeName, params: { page: 1, searchText: '' } }); this.$router.push({ name: routeName, params: { page: 1, searchText: '' } });
@@ -197,6 +197,14 @@ export default {
if (this.startDate > this.endDate) { if (this.startDate > this.endDate) {
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) { selectedEndDate(day) {
if (day != undefined && day != null) { if (day != undefined && day != null) {
@@ -206,11 +214,22 @@ export default {
closeDate(type) { closeDate(type) {
if (type != undefined && type != null) { if (type != undefined && type != null) {
if (type == 'start') { if (type == 'start') {
this.disabledSDate = {from: this.endDate}; this.disabledSDate = { from: new Date() };
this.disabledEDate = { to: this.startDate, from: this.endDate }; this.disabledEDate = { to: this.startDate, from: this.endDate };
} else if (type == 'end') { } else if (type == 'end') {
this.disabledSDate = {from: this.endDate}; 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() }; this.disabledEDate = { to: this.startDate, from: new Date() };
} else {
this.disabledSDate = { from: new Date() };
this.disabledEDate = { to: this.startDate, from: fromDate };
}
} }
} }
}, },
@@ -243,7 +262,7 @@ export default {
let options = { let options = {
header: this.excelHeader, header: this.excelHeader,
dataOrder: 'header' dataOrder: 'header',
}; };
console.log(this.list); console.log(this.list);
// 일 별 통계 엑셀 데이터 만들기 // 일 별 통계 엑셀 데이터 만들기
@@ -255,51 +274,49 @@ export default {
// 성공 건수 // 성공 건수
var succCnt = this.list[i].succCnt; var succCnt = this.list[i].succCnt;
var succRt = this.list[i].succRt; var succRt = this.list[i].succRt;
succCnt = succCnt + '(' + succRt + '%)' succCnt = succCnt + '(' + succRt + '%)';
excelData.sndCnt = this.list[i].sndCnt; excelData.sndCnt = this.list[i].sndCnt;
excelData.succCnt = succCnt; excelData.succCnt = succCnt;
// SMS 성공 건수 // SMS 성공 건수
var succCntS = this.list[i].succCntS; var succCntS = this.list[i].succCntS;
var succRtS = this.list[i].succRtS; var succRtS = this.list[i].succRtS;
succCntS = succCntS + '(' + succRtS + '%)' succCntS = succCntS + '(' + succRtS + '%)';
excelData.sndCntS = this.list[i].sndCntS; excelData.sndCntS = this.list[i].sndCntS;
excelData.succCntS = succCntS; excelData.succCntS = succCntS;
// LMS 성공 건수 // LMS 성공 건수
var succCntL = this.list[i].succCntL; var succCntL = this.list[i].succCntL;
var succRtL = this.list[i].succRtL; var succRtL = this.list[i].succRtL;
succCntL = succCntL + '(' + succRtL + '%)' succCntL = succCntL + '(' + succRtL + '%)';
excelData.sndCntL = this.list[i].sndCntL; excelData.sndCntL = this.list[i].sndCntL;
excelData.succCntL = succCntL; excelData.succCntL = succCntL;
// MMS 성공 건수 // MMS 성공 건수
var succCntM = this.list[i].succCntM; var succCntM = this.list[i].succCntM;
var succRtM = this.list[i].succRtM; var succRtM = this.list[i].succRtM;
succCntM = succCntM + '(' + succRtM + '%)' succCntM = succCntM + '(' + succRtM + '%)';
excelData.sndCntM = this.list[i].sndCntM; excelData.sndCntM = this.list[i].sndCntM;
excelData.succCntM = succCntM; excelData.succCntM = succCntM;
// ALIMTALK 성공 건수 // ALIMTALK 성공 건수
var succCntR = this.list[i].succCntR; var succCntR = this.list[i].succCntR;
var succRtR = this.list[i].succRtR; var succRtR = this.list[i].succRtR;
succCntR = succCntR + '(' + succRtR + '%)' succCntR = succCntR + '(' + succRtR + '%)';
excelData.sndCntR = this.list[i].sndCntR; excelData.sndCntR = this.list[i].sndCntR;
excelData.succCntR = succCntR; excelData.succCntR = succCntR;
excelList.push(excelData); excelList.push(excelData);
} }
xlsx.export(excelList, saveFileName, options).then(() => { xlsx.export(excelList, saveFileName, options).then(() => {});
});
}, },
getExcelHeader() { getExcelHeader() {
// 헤더를 mockup으로 관리한다. // 헤더를 mockup으로 관리한다.
statsApi.getExcelHeader(this.pageType).then(res => { statsApi.getExcelHeader(this.pageType).then((res) => {
this.excelHeader = res; this.excelHeader = res;
}); });
}, },
} },
}; };
</script> </script>

View File

@@ -22,10 +22,10 @@
:minimumView="sDateDiv" :minimumView="sDateDiv"
:maximumView="sDateDiv" :maximumView="sDateDiv"
v-model="startDate" v-model="startDate"
@selected="selectedStartDate(0)" @selected="selectedStartDate"
@closed="closeDate('start')" @closed="closeDate('start')"
></vuejs-datepicker> ></vuejs-datepicker> </span
</span>~ >~
<span class="custom_input icon_date"> <span class="custom_input icon_date">
<vuejs-datepicker <vuejs-datepicker
:language="ko" :language="ko"
@@ -45,24 +45,23 @@
<div class="info"> <div class="info">
<div class="count">집계결과</div> <div class="count">집계결과</div>
<div class="button_group"> <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> </div>
<div class="table calculate"> <div class="table calculate">
<table> <table>
<colgroup> <colgroup>
<col width="7%"> <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="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> </colgroup>
<thead> <thead>
<tr> <tr>
@@ -90,31 +89,38 @@
<tr v-for="(option, i) in list" v-bind:key="i"> <tr v-for="(option, i) in list" v-bind:key="i">
<td>{{ option.sumYm }}</td> <td>{{ option.sumYm }}</td>
<td>{{ option.sndCnt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</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.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.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.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.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.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.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.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.sndCntR.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</td>
<td>{{ option.succCntR.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}<br>({{ option.succRtR }}%)</td> <td>
{{ option.succCntR.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}<br />({{ option.succRtR }}%)
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<common-modal ref="commmonModal"></common-modal> <common-modal ref="commmonModal"></common-modal>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import moment from 'moment'; import moment from 'moment';
import statsApi from "../service/statsApi.js"; import statsApi from '../service/statsApi.js';
import xlsx from '@/common/excel'; import xlsx from '@/common/excel';
import commonModal from "@/components/modal/commonModal"; import commonModal from '@/components/modal/commonModal';
// import DatePicker from "vue2-datepicker"; // import DatePicker from "vue2-datepicker";
export default { export default {
@@ -137,7 +143,7 @@ export default {
row: {}, row: {},
list: [], list: [],
totalCnt: '', totalCnt: '',
pageType: 'MONTH' pageType: 'MONTH',
}; };
}, },
components: { components: {
@@ -149,10 +155,8 @@ export default {
this.getMonthList(); this.getMonthList();
this.getExcelHeader(); this.getExcelHeader();
}, },
destroyed() { destroyed() {},
}, mounted() {},
mounted() {
},
methods: { methods: {
async getMonthList() { async getMonthList() {
this.row.startMon = moment(this.startDate).format('YYYYMM'); this.row.startMon = moment(this.startDate).format('YYYYMM');
@@ -162,18 +166,17 @@ export default {
this.row.title = '발송통계'; this.row.title = '발송통계';
this.row.msg1 = '검색 기간은 최대 3개월까지 선택 가능 합니다.'; this.row.msg1 = '검색 기간은 최대 3개월까지 선택 가능 합니다.';
this.$refs.commmonModal.alertModalOpen(this.row); this.$refs.commmonModal.alertModalOpen(this.row);
return false return false;
} }
try { try {
const response = await statsApi.monthList(this.row); const response = await statsApi.monthList(this.row);
const result = response.data; const result = response.data;
if (result != null && result.retCode == "0000") { if (result != null && result.retCode == '0000') {
this.list = result.data.list; this.list = result.data.list;
this.totalCnt = result.data.list.length; this.totalCnt = result.data.list.length;
} }
} catch (err) { } catch (err) {}
}
}, },
search: function () { search: function () {
this.getMonthList(); this.getMonthList();
@@ -196,6 +199,14 @@ export default {
if (this.startDate > this.endDate) { if (this.startDate > this.endDate) {
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) { selectedEndDate(day) {
if (day != undefined && day != null) { if (day != undefined && day != null) {
@@ -205,11 +216,22 @@ export default {
closeDate(type) { closeDate(type) {
if (type != undefined && type != null) { if (type != undefined && type != null) {
if (type == 'start') { if (type == 'start') {
this.disabledSDate = {from: this.endDate}; this.disabledSDate = { from: new Date() };
this.disabledEDate = { to: this.startDate, from: this.endDate }; this.disabledEDate = { to: this.startDate, from: this.endDate };
} else if (type == 'end') { } else if (type == 'end') {
this.disabledSDate = {from: this.endDate}; 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() }; this.disabledEDate = { to: this.startDate, from: new Date() };
} else {
this.disabledSDate = { from: new Date() };
this.disabledEDate = { to: this.startDate, from: fromDate };
}
} }
} }
}, },
@@ -271,7 +293,7 @@ export default {
let options = { let options = {
header: this.excelHeader, header: this.excelHeader,
dataOrder: 'header' dataOrder: 'header',
}; };
// 월 별 통계 엑셀 데이터 만들기 // 월 별 통계 엑셀 데이터 만들기
@@ -282,51 +304,49 @@ export default {
// 성공 건수 // 성공 건수
var succCnt = this.list[i].succCnt; var succCnt = this.list[i].succCnt;
var succRt = this.list[i].succRt; var succRt = this.list[i].succRt;
succCnt = succCnt + '(' + succRt + '%)' succCnt = succCnt + '(' + succRt + '%)';
excelData.sndCnt = this.list[i].sndCnt; excelData.sndCnt = this.list[i].sndCnt;
excelData.succCnt = succCnt; excelData.succCnt = succCnt;
// SMS 성공 건수 // SMS 성공 건수
var succCntS = this.list[i].succCntS; var succCntS = this.list[i].succCntS;
var succRtS = this.list[i].succRtS; var succRtS = this.list[i].succRtS;
succCntS = succCntS + '(' + succRtS + '%)' succCntS = succCntS + '(' + succRtS + '%)';
excelData.sndCntS = this.list[i].sndCntS; excelData.sndCntS = this.list[i].sndCntS;
excelData.succCntS = succCntS; excelData.succCntS = succCntS;
// LMS 성공 건수 // LMS 성공 건수
var succCntL = this.list[i].succCntL; var succCntL = this.list[i].succCntL;
var succRtL = this.list[i].succRtL; var succRtL = this.list[i].succRtL;
succCntL = succCntL + '(' + succRtL + '%)' succCntL = succCntL + '(' + succRtL + '%)';
excelData.sndCntL = this.list[i].sndCntL; excelData.sndCntL = this.list[i].sndCntL;
excelData.succCntL = succCntL; excelData.succCntL = succCntL;
// MMS 성공 건수 // MMS 성공 건수
var succCntM = this.list[i].succCntM; var succCntM = this.list[i].succCntM;
var succRtM = this.list[i].succRtM; var succRtM = this.list[i].succRtM;
succCntM = succCntM + '(' + succRtM + '%)' succCntM = succCntM + '(' + succRtM + '%)';
excelData.sndCntM = this.list[i].sndCntM; excelData.sndCntM = this.list[i].sndCntM;
excelData.succCntM = succCntM; excelData.succCntM = succCntM;
// ALIMTALK 성공 건수 // ALIMTALK 성공 건수
var succCntR = this.list[i].succCntR; var succCntR = this.list[i].succCntR;
var succRtR = this.list[i].succRtR; var succRtR = this.list[i].succRtR;
succCntR = succCntR + '(' + succRtR + '%)' succCntR = succCntR + '(' + succRtR + '%)';
excelData.sndCntR = this.list[i].sndCntR; excelData.sndCntR = this.list[i].sndCntR;
excelData.succCntR = succCntR; excelData.succCntR = succCntR;
excelList.push(excelData); excelList.push(excelData);
} }
xlsx.export(excelList, saveFileName, options).then(() => { xlsx.export(excelList, saveFileName, options).then(() => {});
});
}, },
getExcelHeader() { getExcelHeader() {
// 헤더를 mockup으로 관리한다. // 헤더를 mockup으로 관리한다.
statsApi.getExcelHeader(this.pageType).then(res => { statsApi.getExcelHeader(this.pageType).then((res) => {
this.excelHeader = res; this.excelHeader = res;
}); });
}, },
} },
}; };
</script> </script>