TC 기능 수정 / 디자인 수정 변경

frontend/src/modules/stats/service/mixins.js

@@ -0,0 +1,358 @@
+import lodash from "lodash";
+
+const utils_mixin = {
+    methods: {
+        /** * 이메일 형식 체크 * * @param 데이터 */
+        emailCheck(email, rtnArrYn) {
+            if (this.isNull(rtnArrYn)) {
+                rtnArrYn = 'N';
+            }
+            // var regExp = /(^[A-Za-z0-9_\.\-]+)@([A-Za-z0-9\-]+\.[A-Za-z0-9\-]+)/;
+            var regExp = /^([0-9a-zA-Z_\.\-]([-_.]?[0-9a-zA-Z_\.\-])*)@([0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$)/i;//이메일 정규식
+
+            if (regExp.test(email) == false) {
+                // 이메일 형식이 알파벳+숫자@알파벳+숫자.알파벳+숫자 형식이 아닐경우
+                if (rtnArrYn == 'Y') {
+                    return email;
+                }
+                return false;
+            } else {
+                var myArray = regExp.exec(email);
+                if (rtnArrYn == 'Y') {
+                    return myArray;
+                }
+                return true;
+            }
+
+        },
+        /** * 전화번호 포맷으로 변환 * * @param 데이터 */
+        formatPhone(phoneNum, fmt, rtnArrYn) {
+            if (this.isNull(fmt)) {
+                fmt = '';
+            }
+            if (this.isNull(rtnArrYn)) {
+                fmt = 'N';
+            }
+            if (this.isPhone(phoneNum)) {
+                var rtnNum;
+                var regExp = /(02)([0-9]{3,4})([0-9]{4})$/;
+                var myArray;
+                if (regExp.test(phoneNum)) {
+                    myArray = regExp.exec(phoneNum);
+                    rtnNum = myArray[1] + fmt + myArray[2] + fmt + myArray[3];
+                    if (rtnArrYn == 'Y') {
+                        return myArray;
+                    }
+                    return rtnNum;
+                } else {
+                    regExp = /(0[3-9]{1}[0-9]{1})([0-9]{3,4})([0-9]{4})$/;
+                    if (regExp.test(phoneNum)) {
+                        myArray = regExp.exec(phoneNum);
+                        rtnNum = myArray[1] + fmt + myArray[2] + fmt + myArray[3];
+                        if (rtnArrYn == 'Y') {
+                            return myArray;
+                        }
+                        return rtnNum;
+                    } else {
+                        return phoneNum;
+                    }
+                }
+            } else {
+                return phoneNum;
+            }
+        },
+        /** * 핸드폰번호 포맷으로 변환 * * @param 데이터 */
+        formatMobile(phoneNum, fmt, rtnArrYn) {
+
+            if (this.isNull(fmt)) {
+                fmt = '';
+            }
+            if (this.isNull(rtnArrYn)) {
+                fmt = 'N';
+            }
+            if (this.isMobile(phoneNum)) {
+
+                var rtnNum;
+                var regExp = /(01[016789])([0-9]{3,4})([0-9]{4})$/;
+                var myArray;
+
+                if (regExp.test(phoneNum)) {
+
+                    myArray = regExp.exec(phoneNum);
+                    rtnNum = myArray[1] + fmt + myArray[2] + fmt + myArray[3];
+                    if (rtnArrYn == 'Y') {
+                        return myArray;
+                    }
+                    return rtnNum;
+                } else {
+                    return phoneNum;
+                }
+            } else {
+                return phoneNum;
+            }
+        },
+
+        /** * 전화번호 형식 체크 * * @param 데이터 */
+        isPhone(phoneNum) {
+            var regExp = /(02)([0-9]{3,4})([0-9]{4})$/;
+            if (regExp.test(phoneNum)) {
+                return true;
+            } else {
+                regExp = /(0[3-9]{1}[0-9]{1})([0-9]{3,4})([0-9]{4})$/;
+                if (regExp.test(phoneNum)) {
+                    return true;
+                } else {
+                    return false;
+                }
+            }
+        },
+
+        /** * 핸드폰번호 형식 체크 * * @param 데이터 */
+        isMobile(phoneNum) {
+            var regExp = /(01[016789])([0-9]{3,4})([0-9]{4})$/;
+            var myArray;
+            if (regExp.test(phoneNum)) {
+                myArray = regExp.exec(phoneNum);
+                return true;
+            } else {
+                return false;
+            }
+        },
+        isMobile2(phoneNum) {
+            var regExp = /(1[016789])([0-9]{3,4})([0-9]{4})$/;
+            var myArray;
+            if (regExp.test(phoneNum)) {
+                myArray = regExp.exec(phoneNum);
+                return true;
+            } else {
+                return false;
+            }
+        },
+
+        isNull(obj) {
+            if (lodash.isNil(obj) || lodash.trim(obj) == '') {
+                return true;
+            }
+            return false;
+        },
+        getParent(name) {
+            let p = this.$parent;
+            while (typeof p !== 'undefined') {
+                if (p.$options.name == name) {
+                    return p;
+                } else {
+                    p = p.$parent;
+                }
+            }
+            return false;
+        },
+        getJsonObj(str) {
+            return JSON.parse(JSON.stringify(str));
+        },
+    }
+};
+
+var chkPattern2 = {
+    data: function () {
+        return {}
+    },
+    methods: {
+        selSesStorage(keyLike) {
+            if (this.isNull(keyLike)) {
+                return null;
+            }
+            if (sessionStorage.length > 0) {
+                let keyList = [];
+                for (let i = 0; i < sessionStorage.length; i++) {
+                    const keyNm = sessionStorage.key(i);
+                    if (keyNm.indexOf(keyLike) > -1) {
+                        keyList.push({name: keyNm, value: sessionStorage.getItem(keyNm)});
+                    }
+                }
+                if (keyList.length > 0) {
+                    return keyList;
+                }
+                return null;
+            }
+            return null;
+        },
+
+        delSesStorage(keyList) {
+            if (this.isNull(keyList)) {
+                return null;
+            }
+            if (keyList.length > 0) {
+                keyList.map((o) => (sessionStorage.removeItem(o.name)));
+                return true;
+            }
+        },
+
+        setGridMouseDownActive() {
+            const ele = document.querySelector(`div.tui-grid-container.tui-grid-show-lside-area`);
+            if (window.getEventListeners(ele).mousedown) {
+                ele.removeEventListener('mousedown', window.getEventListeners(ele).mousedown[0].listener);
+            }
+        },
+        restrictChars: function ($event, regExp, hanYn) {
+
+            if (this.isNull(hanYn)) {
+                hanYn = 'N';
+            }
+            if (hanYn === 'N' && $event.type === 'keydown') {
+                if ($event.keyCode === 229) {
+                    $event.preventDefault();
+                    return false;
+                }
+            }
+
+            if ($event.type === 'keypress') {
+                //한글 처리 불가
+                if (regExp.test(String.fromCharCode($event.charCode))) {
+                    return true;
+                } else {
+                    $event.preventDefault();
+                    return false;
+                }
+            }
+
+            if (hanYn === 'N' && ($event.type === 'keyup' || $event.type === 'input' || $event.type === 'change' || $event.type === 'blur')) {
+                $event.target.value = $event.target.value.replace(/[ㄱ-ㅎㅏ-ㅣ가-힣]/g, '');
+                $event.preventDefault();
+                return false;
+            }
+            return true;
+        },
+        setLenth: function (e, len) {
+            this.cut(e, len);
+        },
+        onlyCustom: function (e, strRegExp, hanYn) {
+            var regExp_g = new RegExp(strRegExp, 'g');
+            this.cut(e);
+            return this.restrictChars(e, regExp_g, hanYn);
+        },
+        onlyCommon: function (strRegExp, e, len, isEventCall, hanYn) {
+            var regExp_g = new RegExp(strRegExp, 'g');
+            if (isEventCall === 'N') {
+                if (!this.cut(e, len, isEventCall)) {
+                    return false;
+                }
+                if (!regExp_g.test(e.value)) {
+                    return false;
+                }
+                return true;
+            }
+            this.cut(e, len);
+            return this.restrictChars(e, regExp_g, hanYn);
+        },
+        onlyNum: function (e, len, isEventCall) {
+            var strRegExp = '^[0-9]*$';
+            return this.onlyCommon(strRegExp, e, len, isEventCall);
+        },
+        onlyEng: function (e, len, isEventCall) {
+            var strRegExp = '^[A-Za-z]*$';
+            return this.onlyCommon(strRegExp, e, len, isEventCall);
+        },
+        onlyLowerEng: function (e, len, isEventCall) {
+            var strRegExp = '^[a-z]*$';
+            return this.onlyCommon(strRegExp, e, len, isEventCall);
+        },
+        onlyUpperEng: function (e, len, isEventCall) {
+            var strRegExp = '^[A-Z]*$';
+            return this.onlyCommon(strRegExp, e, len, isEventCall);
+        },
+        onlyEmail: function (e, len, isEventCall) {
+            var strRegExp = '^[a-zA-Z0-9_\.\-@._-]*$';
+            return this.onlyCommon(strRegExp, e, len, isEventCall);
+        },
+        onlyName: function (e, len, isEventCall) {
+            var strRegExp = '^[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z]*$';
+            return this.onlyCommon(strRegExp, e, len, isEventCall, 'Y');
+        },
+        onlyTitle: function (e, len, isEventCall) {
+            var strRegExp = '^[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z0-9]*$';
+            return this.onlyCommon(strRegExp, e, len, isEventCall, 'Y');
+        },
+        onlyText: function (e, len, isEventCall) {
+            var strRegExp = '^[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z0-9_-]*$';
+            return this.onlyCommon(strRegExp, e, len, isEventCall, 'Y');
+        },
+        onlyPassword: function (e, len, isEventCall) {
+            var strRegExp = '^[A-Za-z0-9!@#$%^&*]*$';
+            return this.onlyCommon(strRegExp, e, len, isEventCall);
+        },
+        onlyId: function (e, len, isEventCall) {
+            var strRegExp = '^[A-Za-z0-9_\.\-]*$';
+            return this.onlyCommon(strRegExp, e, len, isEventCall);
+        },
+        onlyIp: function (e, len, isEventCall) {
+            var strRegExp = '^[0-9,.*]*$';
+            return this.onlyCommon(strRegExp, e, len, isEventCall);
+        },
+        onlyRoleNm_Space: function (e, len, isEventCall) {
+            var strRegExp = '^[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z0-9]*$';
+            return this.onlyCommon(strRegExp, e, len, isEventCall, 'Y');
+        },
+        onlyRoleId_UnderBar: function (e, len, isEventCall) {
+            var strRegExp = '^[a-zA-Z0-9_]*$';
+            return this.onlyCommon(strRegExp, e, len, isEventCall);
+        },
+        cut: function (ele, len, isValidChk) {
+            let e = ele;
+            if (typeof ele.target != "undefined") {
+                e = ele.target;
+            }
+            let max = this.isNull(len) ? e.attributes.maxlength.value : len;
+            let str = e.value;
+
+            if (this.bytes(str) > max) {
+                if (this.isNull(isValidChk)) {
+                    e.value = this.cutBytes(str, max);
+                }
+                return false;
+            }
+            return true;
+        },
+        cutBytes: function (str, len) {
+            while (1 === 1) {
+                if (this.bytes(str) <= len) {
+                    return str;
+                }
+                str = str.slice(0, -1);
+            }
+        },
+        bytes: function (str) {
+            var length = ((s, b, i, c) => {
+                // for(b=i=0;c=s.charCodeAt(i++);b+=c>>11?3:c>>7?2:1);  // 한글 3바이트
+                // for(b=i=0;c=s.charCodeAt(i++);b+=c>>11?2:c>>7?1:1);     //한글 2바이트
+                b = 0, i = 0;
+                while (1 === 1) {
+                    c = s.charCodeAt(i++);
+                    if (isNaN(c)) {
+                        break;
+                    }
+                    b += c >> 11 ? 2 : c >> 7 ? 1 : 1;
+                }
+                return b
+            })(str);
+            return length;
+        },
+        checkPhone: function (str) {
+            str = str.replace(/[-\s]+/g, '');
+            if (str.charAt(0) != "0") {
+                str = "0" + str;
+            }
+            if (str.length < 10 || str.length > 12) {
+                return "";
+            }
+            if (isNaN(str)) {
+                return "";
+            }
+            if (str.substr(0, 2) != "01" && str.substr(0, 3) != "070" && str.substr(0, 4) != "0505" && str.substr(0, 4) != "0503") {
+                return "";
+            }
+            return str;
+
+        },
+    }
+};
+export {utils_mixin, chkPattern2};

frontend/src/modules/stats/views/BsnmDayList.vue

@@ -6,60 +6,56 @@
         <h3 class="title">사업자별 통계</h3>
         <p class="breadcrumb">발송통계 &gt; 사업자별 통계</p>
       </div>
-
       <div class="top_tab">
         <a href="javascript:void(0);" @click="toMove('bsnmMonthList')">월별통계</a>
         <a href="javascript:void(0);" class="on">일별통계</a>
       </div>
-
-
-      <form autocomplete="off" class="search_form">
-        <div class="search_wrap">
-          <div class="input_box cal">
-            <label for="right" class="label txt">날짜</label>
-            <p> 최대 1개월까지 조회 가능합니다.</p>
-            <div class="term">
-            <!-- 
+      <div class="search_wrap">
+        <div class="input_box cal">
+          <label for="right" class="label txt">날짜</label>
+          <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;">
+            <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>
+                      :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">
+              <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>
+                      :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 type="text" id="name" placeholder="검색어 입력" v-model="grid.params.custNm">
-          </div>
-          <div class="input_box">
-            <label for="name" class="label">사업자등록번호</label>
-            <input type="text" id="name" placeholder="검색어 입력" v-model="grid.params.bizrno">
-          </div>
-          <button type="button" class="button grey" @click="search">조회</button>
         </div>
-      </form>
+        <div class="input_box id">
+          <label for="name" class="label">고객사명</label>
+          <input type="text" id="name" placeholder="검색어 입력" v-model.trim="grid.params.custNm">
+        </div>
+        <div class="input_box">
+          <label for="name" class="label">사업자등록번호</label>
+          <input 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">
@@ -67,21 +63,21 @@
         </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"        
-				></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"
+        ></custom-grid>
       </div>
       <common-modal ref="commmonModal"></common-modal>
     </div>
@@ -94,9 +90,11 @@ 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';
 
 export default {
   name: 'bsnmDayList',
+  mixins: [utils_mixin, chkPattern2],
   data() {
     return {
       // 달력 데이터
@@ -106,124 +104,134 @@ export default {
       startDate: new Date(),
       endDate: new Date(),
 
-        startDt:'',
-    	endDt:'',		
-		startYear:'',
-		startMonth:'',
-		endYear:'',
-		endMonth:'',
-		row: {},
-    	list:[],
-    	totalCnt: '',
+      startDt: '',
+      endDt: '',
+      startYear: '',
+      startMonth: '',
+      endYear: '',
+      endMonth: '',
+      row: {},
+      list: [],
+      totalCnt: '',
 
       pageType: 'BSNM_DAY',
 
       // 테이블 리스트 데이터
       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,	  
+      totalItems: 0,
       grid: {
         url: '/api/v1/bo/stats/bsnmDayList',
         pagePerRows: 20,
-        pagination: true,           
+        pagination: true,
         isCheckbox: false,        // true:첫번째 컬럼 앞에 체크박스 생성 / false:체크박스 제거
         initialRequest: false,
         addCls: 'box_OFvis',
 
-        header:[
+        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: 'sndCnt', header: '발송건수', align: 'center', cls: 'td_line',
-            formatter: props =>{
+        columns: [
+          {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 => {
               let result = props.sndCnt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
               return result;
             }
           },
-          { name: 'succCntRt', 
-            header: '성공건수/(%)', 
-            align: 'center', 
+          {
+            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>";
-            }            
+              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', 
+          {
+            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>";
-            }            
+              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', 
+          {
+            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>";
-            }            
+              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', 
+          {
+            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>";
-            }            
+              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', 
+          {
+            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>";
-            }            
+              return "<p>" + props.succCntR.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + "</p>\n<p>(" + props.succRtR + ")</p>";
+            }
           },
         ],
-        noDataStr: '검색 결과가 없습니다.',        
-        params: {       
+        noDataStr: '검색 결과가 없습니다.',
+        params: {
           startDay: '',
           endDay: ''
         },
@@ -232,32 +240,32 @@ export default {
 
 
     };
-  },  
+  },
   components: {
     customGrid: customGrid,
     commonModal,
-	  vuejsDatepicker,
+    vuejsDatepicker,
   },
-  created(){
-	  this.setPeriodDay(0);
+  created() {
+    this.setPeriodDay(0);
     this.getExcelHeader();
   },
   destroyed() {
-    this.grid.params.custNm='';
-    this.grid.params.bizrno='';
+    this.grid.params.custNm = '';
+    this.grid.params.bizrno = '';
 
   },
   mounted() {
     let page = 1;
     // 페이지 정보 및 검색 조건
     const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
-    console.log('getCondition : '+getCondition);
+    console.log('getCondition : ' + getCondition);
 
     // store에 저장된 페이지 정보 및 검색 조건을 불러오기
     let isKeep = false;
     if (getCondition) {
       this.grid.pagePerRows = getCondition.perPage;
-      this.grid.params = getCondition.params;      
+      this.grid.params = getCondition.params;
       page = getCondition.page;
       isKeep = true;
     }
@@ -276,7 +284,7 @@ export default {
     next();
   },
   methods: {
-    search: function(isKeep) {
+    search: function (isKeep) {
       console.log('>>>>>>> search Start >>>>>>');
       this.grid.params = {
         startDay: moment(this.startDate).format('YYYYMMDD'),
@@ -284,24 +292,24 @@ export default {
         custNm: this.grid.params.custNm,
         bizrno: this.grid.params.bizrno
       };
-      console.log('this.perPageCnt'+this.perPageCnt);
-      console.log(this.grid.params);	 
-      
+      console.log('this.perPageCnt' + this.perPageCnt);
+      console.log(this.grid.params);
+
       if (moment(this.grid.params.startDay).isBefore(moment(this.grid.params.endDay).subtract(1, 'months').format('YYYYMMDD'))) {
-			  //alert('검색 기간은 최대 1개월까지 선택 가능 합니다.');
-			  this.row.title = '발송통계';
+        //alert('검색 기간은 최대 1개월까지 선택 가능 합니다.');
+        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) {
+    setPeriodDay(day) {
       this.periodDay = day;
       this.endDate = new Date();
       // this.startDate = moment(this.endDate)
@@ -312,7 +320,7 @@ export default {
       this.closeDate('start');
       this.closeDate('end');
     },
-	  selectedStartDate(day) {
+    selectedStartDate(day) {
       if (day != undefined && day != null) {
         this.periodDay = day;
       }
@@ -330,15 +338,15 @@ 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() };
+          this.disabledSDate = {from: this.endDate};
+          this.disabledEDate = {to: this.startDate, from: new Date()};
         }
       }
     },
-    customFormatter: function(date) {
+    customFormatter: function (date) {
       if (this.sDateDiv == 'month') {
         return moment(date).format('YYYY-MM');
       } else if (this.sDateDiv == 'year') {
@@ -347,11 +355,11 @@ export default {
         return moment(date).format('YYYY-MM-DD');
       }
     },
-    changePerPage: function(){ 	// 페이지당 조회할 개수
+    changePerPage: function () { 	// 페이지당 조회할 개수
       this.grid.pagePerRows = this.perPageCnt;
       this.search(true);
     },
-    sendStoreData: function() {
+    sendStoreData: function () {
       const getP = this.$refs.table.getPagination();
       console.log("==========getP : " + getP._currentPage);
       this.$store.commit('searchcondition/updateSearchCondition', {
@@ -361,11 +369,11 @@ export default {
       });
 
       const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
-      console.log("getCondition : "+ getCondition.perPage);
+      console.log("getCondition : " + getCondition.perPage);
     },
-    initSetStartDate(){
+    initSetStartDate() {
       let initStartDate = new Date();
-      initStartDate.setMonth(Number(moment(initStartDate).format('MM')) -2);
+      initStartDate.setMonth(Number(moment(initStartDate).format('MM')) - 2);
       this.startDate = initStartDate;
       console.log(moment(this.startDate).format('YYYY-MM-DD'));
     },
@@ -378,7 +386,7 @@ export default {
         const result = response.data;
         if (result != null && result.retCode == "0000") {
           return result.data;
-        }else{
+        } else {
           return false;
         }
       } catch (err) {
@@ -402,12 +410,13 @@ export default {
         dataOrder: 'header'
       };
       // console.log(data);
-      xlsx.export(data.list, saveFileName, options).then(() => {});
+      xlsx.export(data.list, saveFileName, options).then(() => {
+      });
     },
     getExcelHeader() {
       // 헤더를 mockup으로 관리한다.
       statsApi.getExcelHeader(this.pageType).then(res => {
-        this.excelHeader = res;        
+        this.excelHeader = res;
       });
     },
   }

frontend/src/modules/stats/views/BsnmMonthList.vue

@@ -6,64 +6,55 @@
         <h3 class="title">사업자별 통계</h3>
         <p class="breadcrumb">발송통계 &gt; 사업자별 통계</p>
       </div>
-
       <div class="top_tab">
         <a href="javascript:void(0);" class="on">월별통계</a>
         <a href="javascript:void(0);" @click="toMove('bsnmDayList')">일별통계</a>
       </div>
-
-
-      <form autocomplete="off" class="search_form">
-        <div class="search_wrap">
-          <div class="input_box cal">
-            <label for="right" class="label txt">날짜</label>
-            <p> 최대 3개월까지 조회 가능합니다.</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;">
+      <div class="search_wrap">
+        <div class="input_box cal">
+          <label for="right" class="label txt">날짜</label>
+          <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>
+                      :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">
+              <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>
+                      :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 type="text" id="name" placeholder="검색어 입력" v-model="grid.params.custNm">
-          </div>
-          <div class="input_box">
-            <label for="name" class="label">사업자등록번호</label>
-            <input type="text" id="name" placeholder="검색어 입력" v-model="grid.params.bizrno">
-          </div>
-          <button type="button" class="button grey" @click="search">조회</button>
         </div>
-      </form>
+        <div class="input_box id">
+          <label for="name" class="label">고객사명</label>
+          <input 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 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">
@@ -73,18 +64,18 @@
       </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"        
-				></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"
+        ></custom-grid>
       </div>
       <common-modal ref="commmonModal"></common-modal>
     </div>
@@ -97,9 +88,11 @@ 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';
 
 export default {
   name: 'bsnmMonthList',
+  mixins: [utils_mixin, chkPattern2],
   data() {
     return {
       // 달력 데이터
@@ -109,129 +102,140 @@ export default {
       startDate: new Date(),
       endDate: new Date(),
 
-    	startDt:'',
-    	endDt:'',		
-		  startYear:'',
-		  startMonth:'',
-		  endYear:'',
-		  endMonth:'',
-		  row: {},
-    	list:[],
-    	totalCnt: '',
+      startDt: '',
+      endDt: '',
+      startYear: '',
+      startMonth: '',
+      endYear: '',
+      endMonth: '',
+      row: {},
+      list: [],
+      totalCnt: '',
 
       pageType: 'BSNM_MONTH',
 
       // 테이블 리스트 데이터
       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,	  
+      totalItems: 0,
       grid: {
         url: '/api/v1/bo/stats/bsnmMonthList',
         pagePerRows: 20,
-        pagination: true,           
+        pagination: true,
         isCheckbox: false,        // true:첫번째 컬럼 앞에 체크박스 생성 / false:체크박스 제거
         initialRequest: false,
         addCls: 'box_OFvis',
 
-        header:[
+        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: '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;
-            }
+        columns: [
+          {name: 'sumYm', header: '날짜', align: 'center'},
+          {name: 'custNm', 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', 
+          {
+            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>";
-            }            
+              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', 
+          {
+            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>";
-            }            
+              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', 
+          {
+            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>";
-            }            
+              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', 
+          {
+            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>";
-            }            
+              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', 
+          {
+            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>";
-            }            
+              return "<p>" + props.succCntR.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + "</p>\n<p>(" + props.succRtR + ")</p>";
+            }
           },
         ],
-        noDataStr: '검색 결과가 없습니다.',        
-        params: {       
+        noDataStr: '검색 결과가 없습니다.',
+        params: {
           startMon: '',
           endMon: ''
         },
@@ -240,33 +244,33 @@ export default {
 
 
     };
-  },  
+  },
   components: {
     customGrid: customGrid,
     commonModal,
-	  vuejsDatepicker,
+    vuejsDatepicker,
   },
-  created(){
-	  this.setPeriodDay(0);
+  created() {
+    this.setPeriodDay(0);
     this.getExcelHeader();
 
   },
   destroyed() {
-    this.grid.params.custNm='';
-    this.grid.params.bizrno='';
+    this.grid.params.custNm = '';
+    this.grid.params.bizrno = '';
 
   },
   mounted() {
     let page = 1;
     // 페이지 정보 및 검색 조건
     const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
-    console.log('getCondition : '+getCondition);
+    console.log('getCondition : ' + getCondition);
 
     // store에 저장된 페이지 정보 및 검색 조건을 불러오기
     let isKeep = false;
     if (getCondition) {
       this.grid.pagePerRows = getCondition.perPage;
-      this.grid.params = getCondition.params;      
+      this.grid.params = getCondition.params;
       page = getCondition.page;
       isKeep = true;
     }
@@ -285,7 +289,7 @@ export default {
     next();
   },
   methods: {
-    search: function(isKeep) {
+    search: function (isKeep) {
       console.log('>>>>>>> search Start >>>>>>');
       this.grid.params = {
         startMon: moment(this.startDate).format('YYYYMM'),
@@ -293,24 +297,24 @@ export default {
         custNm: this.grid.params.custNm,
         bizrno: this.grid.params.bizrno
       };
-      console.log('this.perPageCnt'+this.perPageCnt);
-      console.log(this.grid.params);	 
-      
+      console.log('this.perPageCnt' + this.perPageCnt);
+      console.log(this.grid.params);
+
       if (moment(this.grid.params.startMon).isBefore(moment(this.grid.params.endMon).subtract(2, 'months').format('YYYYMM'))) {
-			  //alert('검색 기간은 최대 3개월까지 선택 가능 합니다.');
-			  this.row.title = '발송통계';
+        //alert('검색 기간은 최대 3개월까지 선택 가능 합니다.');
+        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) {
+    setPeriodDay(day) {
       this.periodDay = day;
       this.endDate = new Date();
       // this.startDate = moment(this.endDate)
@@ -321,7 +325,7 @@ export default {
       this.closeDate('start');
       this.closeDate('end');
     },
-	  selectedStartDate(day) {
+    selectedStartDate(day) {
       if (day != undefined && day != null) {
         this.periodDay = day;
       }
@@ -339,15 +343,15 @@ 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() };
+          this.disabledSDate = {from: this.endDate};
+          this.disabledEDate = {to: this.startDate, from: new Date()};
         }
       }
     },
-    customFormatter: function(date) {
+    customFormatter: function (date) {
       if (this.sDateDiv == 'month') {
         return moment(date).format('YYYY-MM');
       } else if (this.sDateDiv == 'year') {
@@ -356,11 +360,11 @@ export default {
         return moment(date).format('YYYY-MM-DD');
       }
     },
-    changePerPage: function(){ 	// 페이지당 조회할 개수
+    changePerPage: function () { 	// 페이지당 조회할 개수
       this.grid.pagePerRows = this.perPageCnt;
       this.search(true);
     },
-    sendStoreData: function() {
+    sendStoreData: function () {
       const getP = this.$refs.table.getPagination();
       console.log("==========getP : " + getP._currentPage);
       this.$store.commit('searchcondition/updateSearchCondition', {
@@ -370,18 +374,18 @@ export default {
       });
 
       const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
-      console.log("getCondition : "+ getCondition.perPage);
+      console.log("getCondition : " + getCondition.perPage);
     },
-    initSetStartDate(){
+    initSetStartDate() {
       let initStartDate = new Date();
-      initStartDate.setMonth(Number(moment(initStartDate).format('MM')) -3);
+      initStartDate.setMonth(Number(moment(initStartDate).format('MM')) - 3);
       this.startDate = initStartDate;
       console.log(moment(this.startDate).format('YYYY-MM-DD'));
     },
     getExcelHeader() {
       // 헤더를 mockup으로 관리한다.
       statsApi.getExcelHeader(this.pageType).then(res => {
-        this.excelHeader = res;        
+        this.excelHeader = res;
       });
     },
     async getExcelDataDown() {
@@ -394,7 +398,7 @@ export default {
         console.log(result)
         if (result != null && result.retCode == "0000") {
           return result.data;
-        }else{
+        } else {
           return false;
         }
       } catch (err) {
@@ -417,8 +421,9 @@ export default {
         header: this.excelHeader,
         dataOrder: 'header'
       };
-      console.log(data);      
-      xlsx.export(data.list, saveFileName, options).then(() => {});
+      console.log(data);
+      xlsx.export(data.list, saveFileName, options).then(() => {
+      });
     },
   }
 };

frontend/src/modules/stats/views/DayList.vue

@@ -1,115 +1,110 @@
 <template>
-	<div class="contents">
-			<div class="contents_wrap">
-				<div class="top_wrap">
-					<h3 class="title">날짜별 통계</h3>
-					<p class="breadcrumb">발송통계 &gt; 날짜별 통계</p>
-				</div>
-				
-				<div class="top_tab">
-					<a href="javascript:void(0);" @click="toMove('monthList')">월별통계</a>
-                    <a href="javascript:void(0);" class="on">일별통계</a>
-				</div>
-				
-				
-				<form autocomplete="off" class="search_form">
-					<div class="search_wrap">
-						<div class="input_box cal">
-							<label for="right" class="label txt">날짜</label>
-							<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>
-							</div>
-						</div>
-						<button type="button" class="button grey" @click="search">조회</button>
-					</div>
-				</form>
-				<div class="info">
-					<div class="count">집계결과</div>
-					<div class="button_group">
-						<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%">
-                        </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>
-						</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>
-						
-					</tbody>
-				</table>
-			</div>
+  <div class="contents">
+    <div class="contents_wrap">
+      <div class="top_wrap">
+        <h3 class="title">날짜별 통계</h3>
+        <p class="breadcrumb">발송통계 &gt; 날짜별 통계</p>
+      </div>
+      <div class="top_tab">
+        <a href="javascript:void(0);" @click="toMove('monthList')">월별통계</a>
+        <a href="javascript:void(0);" class="on">일별통계</a>
+      </div>
+      <div class="search_wrap">
+        <div class="input_box cal">
+          <label for="right" class="label txt">날짜</label>
+          <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>
+          </div>
+        </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>
+        </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%">
+          </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>
+          </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>
+
+          </tbody>
+        </table>
+      </div>
 
       <common-modal ref="commmonModal"></common-modal>
-      
-		</div>
-	</div>
+
+    </div>
+  </div>
 </template>
 
 <script>
@@ -122,78 +117,78 @@ export default {
   name: 'dayList',
   data() {
     return {
-        // 달력 데이터
-        ko: vdp_translation_ko.js,
-      	periodDay: 7,
-      	sDateDiv: 'day',
-      	startDate: new Date(),
-      	endDate: new Date(),
+      // 달력 데이터
+      ko: vdp_translation_ko.js,
+      periodDay: 7,
+      sDateDiv: 'day',
+      startDate: new Date(),
+      endDate: new Date(),
 
-        startDt:'',
-        endDt:'',
+      startDt: '',
+      endDt: '',
 
-        pageType:'DAY',
+      pageType: 'DAY',
 
-		    row: {},
-        list:[],
-        totalCnt: '',      
+      row: {},
+      list: [],
+      totalCnt: '',
     };
-  },  
-  components: {    
-    commonModal,
-	vuejsDatepicker,
   },
-  created(){
-	// this.startDt = moment().format('YYYY-MM-DD');
-	// this.endDt = moment().format('YYYY-MM-DD');
-	this.setPeriodDay(0);
-	this.getDayList();
+  components: {
+    commonModal,
+    vuejsDatepicker,
+  },
+  created() {
+    // this.startDt = moment().format('YYYY-MM-DD');
+    // this.endDt = moment().format('YYYY-MM-DD');
+    this.setPeriodDay(0);
+    this.getDayList();
     this.getExcelHeader();
   },
   destroyed() {
-      
+
   },
   mounted() {
-    
+
   },
   methods: {
-	async getDayList(){
-        console.log('getDayList Start');
-		this.row.startDay = moment(this.startDate).format('YYYYMMDD');        
-		this.row.endDay = moment(this.endDate).format('YYYYMMDD');
-		console.log('검색_시작일시(변환후):'+this.row.startDay);
-		console.log('검색_종료일시(변환후):'+this.row.endDay);
-		if (moment(this.row.startDay).isBefore(moment(this.row.endDay).subtract(1, 'months').format('YYYYMMDD'))) {
-			//alert('검색 기간은 최대 1개월까지 선택 가능 합니다.');
-			this.row.title = '발송통계';
-          	this.row.msg1 = '검색 기간은 최대 1개월까지 선택 가능 합니다.';
-          	this.$refs.commmonModal.alertModalOpen(this.row);
-			return false
-		}
+    async getDayList() {
+      console.log('getDayList Start');
+      this.row.startDay = moment(this.startDate).format('YYYYMMDD');
+      this.row.endDay = moment(this.endDate).format('YYYYMMDD');
+      console.log('검색_시작일시(변환후):' + this.row.startDay);
+      console.log('검색_종료일시(변환후):' + this.row.endDay);
+      if (moment(this.row.startDay).isBefore(moment(this.row.endDay).subtract(1, 'months').format('YYYYMMDD'))) {
+        //alert('검색 기간은 최대 1개월까지 선택 가능 합니다.');
+        this.row.title = '발송통계';
+        this.row.msg1 = '검색 기간은 최대 1개월까지 선택 가능 합니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
+        return false
+      }
 
-		try {
-			const response = await statsApi.dayList(this.row);
-			const result = response.data;
-			console.log(result);
-			if (result != null && result.retCode == "0000") {
-				if(result.data.list.length > 0){
-					this.list = result.data.list;
-				} 
-                this.totalCnt = result.data.list.length;
-			} else {
-				alert("조회정보가 없습니다.");
-			}
-		} catch(err) {
-			alert("실패 하였습니다.");
-		}
-	},
-    toMove(routeName) {
-      this.$router.push({ name: routeName, params: { page: 1, searchText: '' } });
+      try {
+        const response = await statsApi.dayList(this.row);
+        const result = response.data;
+        console.log(result);
+        if (result != null && result.retCode == "0000") {
+          if (result.data.list.length > 0) {
+            this.list = result.data.list;
+          }
+          this.totalCnt = result.data.list.length;
+        } else {
+          alert("조회정보가 없습니다.");
+        }
+      } catch (err) {
+        alert("실패 하였습니다.");
+      }
     },
-	search: function() {
-      	console.log('검색_시작일시:'+this.startDt);	
-	  	console.log('검색_종료일시:'+this.endDt);  
-      	this.getDayList();
+    toMove(routeName) {
+      this.$router.push({name: routeName, params: {page: 1, searchText: ''}});
+    },
+    search: function () {
+      console.log('검색_시작일시:' + this.startDt);
+      console.log('검색_종료일시:' + this.endDt);
+      this.getDayList();
     },
     // calendarCalbackFnc(year, month, day){
 
@@ -223,18 +218,18 @@ export default {
     //   }
     // },
 
-	setPeriodDay(day) {
+    setPeriodDay(day) {
       this.periodDay = day;
       this.endDate = new Date();
-    //   this.startDate = moment(this.endDate)
-    //       .subtract(day, 'day')
-    //       .toDate();
-	  this.initSetStartDate();
+      //   this.startDate = moment(this.endDate)
+      //       .subtract(day, 'day')
+      //       .toDate();
+      this.initSetStartDate();
 
       this.closeDate('start');
       this.closeDate('end');
     },
-	selectedStartDate(day) {
+    selectedStartDate(day) {
       if (day != undefined && day != null) {
         this.periodDay = day;
       }
@@ -252,15 +247,15 @@ 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() };
+          this.disabledSDate = {from: this.endDate};
+          this.disabledEDate = {to: this.startDate, from: new Date()};
         }
       }
     },
-    customFormatter: function(date) {
+    customFormatter: function (date) {
       if (this.sDateDiv == 'month') {
         return moment(date).format('YYYY-MM');
       } else if (this.sDateDiv == 'year') {
@@ -269,9 +264,9 @@ export default {
         return moment(date).format('YYYY-MM-DD');
       }
     },
-	initSetStartDate(){
+    initSetStartDate() {
       let initStartDate = new Date();
-      initStartDate.setMonth(Number(moment(initStartDate).format('MM')) -2);
+      initStartDate.setMonth(Number(moment(initStartDate).format('MM')) - 2);
       this.startDate = initStartDate;
       console.log(moment(this.startDate).format('YYYY-MM-DD'));
     },
@@ -293,7 +288,8 @@ export default {
         dataOrder: 'header'
       };
       // console.log(data);
-      xlsx.export(this.list, saveFileName, options).then(() => {});
+      xlsx.export(this.list, saveFileName, options).then(() => {
+      });
     },
     getExcelHeader() {
       // 헤더를 mockup으로 관리한다.

frontend/src/modules/stats/views/MonthList.vue

@@ -1,120 +1,113 @@
 <template>
-	<div class="contents">
-			<div class="contents_wrap">
-				<div class="top_wrap">
-					<h3 class="title">날짜별 통계</h3>
-					<p class="breadcrumb">발송통계 &gt; 날짜별 통계</p>
-				</div>
-				
-				<div class="top_tab">
-					<a href="javascript:void(0);" class="on">월별통계</a>
-          			<a href="javascript:void(0);" @click="toMove('dayList')" >일별통계</a>
-				</div>
-				
-				
-				<form autocomplete="off" class="search_form">
-					<div class="search_wrap">
-						<div class="input_box cal">
-							<label for="right" class="label txt">날짜</label>
-							<p> 최대 3개월까지 조회 가능합니다.</p>
-                            <div class="term">								
+  <div class="contents">
+    <div class="contents_wrap">
+      <div class="top_wrap">
+        <h3 class="title">날짜별 통계</h3>
+        <p class="breadcrumb">발송통계 &gt; 날짜별 통계</p>
+      </div>
+      <div class="top_tab">
+        <a href="javascript:void(0);" class="on">월별통계</a>
+        <a href="javascript:void(0);" @click="toMove('dayList')">일별통계</a>
+      </div>
+      <div class="search_wrap">
+        <div class="input_box cal">
+          <label for="right" class="label txt">날짜</label>
+          <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(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>
+          </div>
+        </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>
+        </div>
 
-							</div>
-						</div>
-						<button type="button" class="button grey" @click="search">조회</button>
-						<!--<button type="button" class="button grey">조회</button>-->
-					</div>
-				</form>
-				<div class="info">
-					<div class="count">집계결과</div>
-					<div class="button_group">
-						<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%">
-                        </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>
-						</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>
-					</tbody>
-				</table>
-			</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%">
+          </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>
+          </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>
+          </tbody>
+        </table>
+      </div>
 
       <common-modal ref="commmonModal"></common-modal>
 
-		</div>
-	</div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -129,87 +122,87 @@ export default {
   data() {
     return {
       // 달력 데이터
-    	ko: vdp_translation_ko.js,
-      	periodDay: 7,
-      	sDateDiv: 'month',
-      	startDate: new Date(),
-      	endDate: new Date(),
+      ko: vdp_translation_ko.js,
+      periodDay: 7,
+      sDateDiv: 'month',
+      startDate: new Date(),
+      endDate: new Date(),
 
-    	startDt:'',
-    	endDt:'',		
-		startYear:'',
-		startMonth:'',
-		endYear:'',
-		endMonth:'',
-		row: {},
-    	list:[],
-    	totalCnt: '',  
-		pageType:'MONTH'   
+      startDt: '',
+      endDt: '',
+      startYear: '',
+      startMonth: '',
+      endYear: '',
+      endMonth: '',
+      row: {},
+      list: [],
+      totalCnt: '',
+      pageType: 'MONTH'
     };
-  },  
-  components: {    
+  },
+  components: {
     commonModal,
-	vuejsDatepicker,
+    vuejsDatepicker,
   },
-  created(){
-	this.setPeriodDay(0);
-	this.getMonthList();
-	this.getExcelHeader();
+  created() {
+    this.setPeriodDay(0);
+    this.getMonthList();
+    this.getExcelHeader();
   },
-  destroyed() {      
+  destroyed() {
   },
   mounted() {
   },
   methods: {
-	async getMonthList(){		
+    async getMonthList() {
 
-        console.log('getMonthList Start');
-		this.row.startMon = moment(this.startDate).format('YYYYMM');  
-		this.row.endMon = moment(this.endDate).format('YYYYMM');
-		console.log('검색_시작년월:'+this.row.startMon);
-		console.log('검색_종료년월:'+this.row.endMon);
+      console.log('getMonthList Start');
+      this.row.startMon = moment(this.startDate).format('YYYYMM');
+      this.row.endMon = moment(this.endDate).format('YYYYMM');
+      console.log('검색_시작년월:' + this.row.startMon);
+      console.log('검색_종료년월:' + this.row.endMon);
 
-		if (moment(this.row.startMon).isBefore(moment(this.row.endMon).subtract(2, 'months').format('YYYYMM'))) {
-			//alert('검색 기간은 최대 3개월까지 선택 가능 합니다.');
-			this.row.title = '발송통계';
-          	this.row.msg1 = '검색 기간은 최대 3개월까지 선택 가능 합니다.';
-          	this.$refs.commmonModal.alertModalOpen(this.row);
-			return false
-		}
+      if (moment(this.row.startMon).isBefore(moment(this.row.endMon).subtract(2, 'months').format('YYYYMM'))) {
+        //alert('검색 기간은 최대 3개월까지 선택 가능 합니다.');
+        this.row.title = '발송통계';
+        this.row.msg1 = '검색 기간은 최대 3개월까지 선택 가능 합니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
+        return false
+      }
 
-		try {
-			const response = await statsApi.monthList(this.row);
-			const result = response.data;
-			console.log(result);
-			if (result != null && result.retCode == "0000") {
-				this.list = result.data.list;
-                this.totalCnt = result.data.list.length;
-			} else {
-				alert("조회정보가 없습니다.");
-			}
-		} catch(err) {
-			alert("실패 하였습니다.");
-		}
-	},
-	search: function() {
-      	this.getMonthList();
+      try {
+        const response = await statsApi.monthList(this.row);
+        const result = response.data;
+        console.log(result);
+        if (result != null && result.retCode == "0000") {
+          this.list = result.data.list;
+          this.totalCnt = result.data.list.length;
+        } else {
+          alert("조회정보가 없습니다.");
+        }
+      } catch (err) {
+        alert("실패 하였습니다.");
+      }
+    },
+    search: function () {
+      this.getMonthList();
     },
     toMove(routeName) {
       //this.$router.push({ name: routeName, params: { page: 1, searchText: '' } });
-      this.$router.push({ name: routeName, params: {} });
+      this.$router.push({name: routeName, params: {}});
     },
-	setPeriodDay(day) {
+    setPeriodDay(day) {
       this.periodDay = day;
       this.endDate = new Date();
-    //   this.startDate = moment(this.endDate)
-    //       .subtract(day, 'day')
-    //       .toDate();
-	this.initSetStartDate();
+      //   this.startDate = moment(this.endDate)
+      //       .subtract(day, 'day')
+      //       .toDate();
+      this.initSetStartDate();
 
       this.closeDate('start');
       this.closeDate('end');
     },
-	selectedStartDate(day) {
+    selectedStartDate(day) {
       if (day != undefined && day != null) {
         this.periodDay = day;
       }
@@ -227,15 +220,15 @@ 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() };
+          this.disabledSDate = {from: this.endDate};
+          this.disabledEDate = {to: this.startDate, from: new Date()};
         }
       }
     },
-    customFormatter: function(date) {
+    customFormatter: function (date) {
       if (this.sDateDiv == 'month') {
         return moment(date).format('YYYY-MM');
       } else if (this.sDateDiv == 'year') {
@@ -244,9 +237,9 @@ export default {
         return moment(date).format('YYYY-MM-DD');
       }
     },
-	initSetStartDate(){
+    initSetStartDate() {
       let initStartDate = new Date();
-      initStartDate.setMonth(Number(moment(initStartDate).format('MM')) -3);
+      initStartDate.setMonth(Number(moment(initStartDate).format('MM')) - 3);
       this.startDate = initStartDate;
       console.log(moment(this.startDate).format('YYYY-MM-DD'));
     },
@@ -266,9 +259,10 @@ export default {
         header: this.excelHeader,
         dataOrder: 'header'
       };
-	  
+
       // console.log(data);
-      xlsx.export(this.list, saveFileName, options).then(() => {});
+      xlsx.export(this.list, saveFileName, options).then(() => {
+      });
     },
     getExcelHeader() {
       // 헤더를 mockup으로 관리한다.