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

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으로 관리한다.