|
|
@@ -0,0 +1,367 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="ko"
|
|
|
+ xmlns:th="http://www.thymeleaf.org">
|
|
|
+<!--
|
|
|
+ *******************************************************************************
|
|
|
+ * @source : CustomerJoinForm.html
|
|
|
+ * @desc : 회원가입현황 Page
|
|
|
+ *============================================================================
|
|
|
+ * STYLE24
|
|
|
+ * Copyright(C) 2020 TSIT, All rights reserved.
|
|
|
+ *============================================================================
|
|
|
+ * VER DATE AUTHOR DESCRIPTION
|
|
|
+ * === =========== ========== =============================================
|
|
|
+ * 1.0 2021.09.28 swkim 최초 작성
|
|
|
+ *******************************************************************************
|
|
|
+ -->
|
|
|
+ <div id="main">
|
|
|
+ <!-- 메인타이틀 영역 -->
|
|
|
+ <div class="main-title">
|
|
|
+ </div>
|
|
|
+ <!-- //메인타이틀 영역 -->
|
|
|
+
|
|
|
+ <!-- 메뉴 설명 -->
|
|
|
+ <div class="infoBox menu-desc">
|
|
|
+ </div>
|
|
|
+ <!-- //메뉴 설명 -->
|
|
|
+
|
|
|
+ <!-- 검색조건 영역 -->
|
|
|
+ <div class="panelStyle">
|
|
|
+ <form id="searchForm" name="searchForm" action="#" th:action="@{'/statistics/customer/join/list'}" onsubmit="$('#btnSearch').trigger('click'); return false;">
|
|
|
+ <input type="hidden" name="dayGb" value="D"/>
|
|
|
+
|
|
|
+ <table class="frmStyle" aria-describedby="검색조건">
|
|
|
+ <colgroup>
|
|
|
+ <col style="width:10%;"/>
|
|
|
+ <col style="width:25%;"/>
|
|
|
+ <col style="width:10%;"/>
|
|
|
+ <col style="width:25%;"/>
|
|
|
+ <col style="width:10%;"/>
|
|
|
+ <col style="width:20%;"/>
|
|
|
+ </colgroup>
|
|
|
+ <tr>
|
|
|
+ <th>기간<i class="required" title="필수" aria-hidden="true"></i></th>
|
|
|
+ <td colspan="5" id="terms">
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <th>성별</th>
|
|
|
+ <td>
|
|
|
+ <label class="chkBox checked"><input type="checkbox" name="multiSexGb" value="G007_F" checked="checked"/>여성</label>
|
|
|
+ <label class="chkBox checked"><input type="checkbox" name="multiSexGb" value="G007_M" checked="checked"/>남성</label>
|
|
|
+ <label class="chkBox checked"><input type="checkbox" name="multiSexGb" value="G007_X" checked="checked"/>알수없음</label>
|
|
|
+ </td>
|
|
|
+ <th>연령별</th>
|
|
|
+ <td colspan="3">
|
|
|
+ <label class="chkBox checked"><input type="checkbox" name="multiAgeGb" value="10" checked="checked"/>10대</label>
|
|
|
+ <label class="chkBox checked"><input type="checkbox" name="multiAgeGb" value="20" checked="checked"/>20대</label>
|
|
|
+ <label class="chkBox checked"><input type="checkbox" name="multiAgeGb" value="30" checked="checked"/>30대</label>
|
|
|
+ <label class="chkBox checked"><input type="checkbox" name="multiAgeGb" value="40" checked="checked"/>40대</label>
|
|
|
+ <label class="chkBox checked"><input type="checkbox" name="multiAgeGb" value="X" checked="checked"/>기타/미상</label>
|
|
|
+ </td>
|
|
|
+
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+
|
|
|
+ <ul class="panelBar">
|
|
|
+ <li class="center">
|
|
|
+ <button type="button" class="btn btn-base btn-lg" id="btnSearch">조회</button>
|
|
|
+ <button type="button" class="btn btn-gray btn-lg" id="btnInit">초기화</button>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ <!-- 검색조건 영역 -->
|
|
|
+
|
|
|
+ <!-- 차트영역 -->
|
|
|
+ <div class="panelStyle" id="chartDiv">
|
|
|
+ <div id="chart" class="chartUnit"></div>
|
|
|
+ </div>
|
|
|
+ <!-- //차트영역 -->
|
|
|
+
|
|
|
+ <!-- 리스트 영역 -->
|
|
|
+ <div class="panelStyle">
|
|
|
+ <!-- 버튼 배치 영역 -->
|
|
|
+ <ul class="panelBar">
|
|
|
+ <li class="left">
|
|
|
+ <button type="button" class="btn btn-default btn-lg" id="btnExcel">엑셀다운로드</button>
|
|
|
+ </li>
|
|
|
+ <li class="right">
|
|
|
+ <span class="btnGroup marR10">
|
|
|
+ <button type="button" class="btn btn-default btn-lg active" id="dayGbD" onclick="fnSetDayGb('D');">일별</button>
|
|
|
+ <button type="button" class="btn btn-default btn-lg" id="dayGbW" onclick="fnSetDayGb('W');">주별</button>
|
|
|
+ <button type="button" class="btn btn-default btn-lg" id="dayGbM" onclick="fnSetDayGb('M');">월별</button>
|
|
|
+ </span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <!-- //버튼 배치 영역 -->
|
|
|
+
|
|
|
+ <div id="gridList" style="width: 100%; height: 470px" class="ag-theme-balham"></div>
|
|
|
+ </div>
|
|
|
+ <!-- //리스트 영역 -->
|
|
|
+ </div>
|
|
|
+
|
|
|
+<script th:inline="javascript">
|
|
|
+/*<![CDATA[*/
|
|
|
+ let columnDefs = [
|
|
|
+ { headerName: "기간", field: "day", width: 100, cellClass: 'text-center' },
|
|
|
+ {
|
|
|
+ headerName: "전체회원", field: "", width: 450, cellClass: 'text-center',
|
|
|
+ children: [
|
|
|
+ {headerName: "전체회원", field: "allCnt", width: 150, cellClass: 'text-center',
|
|
|
+ cellRenderer: function(params) {
|
|
|
+ return gagaAgGrid.toAddComma(params.value);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {headerName: "실회원", field: "realCnt", width: 150, cellClass: 'text-center',
|
|
|
+ cellRenderer: function(params) {
|
|
|
+ return gagaAgGrid.toAddComma(params.value);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {headerName: "휴면회원", field: "dormCnt", width: 150, cellClass: 'text-center',
|
|
|
+ cellRenderer: function(params) {
|
|
|
+ return gagaAgGrid.toAddComma(params.value);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ headerName: "등급별회원수(실회원)", field: "", width: 600, cellClass: 'text-center',
|
|
|
+ children: [
|
|
|
+ {headerName: "VIP", field: "vipCnt", width: 120, cellClass: 'text-center',
|
|
|
+ cellRenderer: function(params) {
|
|
|
+ return gagaAgGrid.toAddComma(params.value);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {headerName: "GOLD", field: "goldCnt", width: 120, cellClass: 'text-center',
|
|
|
+ cellRenderer: function(params) {
|
|
|
+ return gagaAgGrid.toAddComma(params.value);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {headerName: "SILVER", field: "silverCnt", width: 120, cellClass: 'text-center',
|
|
|
+ cellRenderer: function(params) {
|
|
|
+ return gagaAgGrid.toAddComma(params.value);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {headerName: "BRONZE", field: "bronzeCnt", width: 120, cellClass: 'text-center',
|
|
|
+ cellRenderer: function(params) {
|
|
|
+ return gagaAgGrid.toAddComma(params.value);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {headerName: "WELCOME", field: "welcomeCnt", width: 120, cellClass: 'text-center',
|
|
|
+ cellRenderer: function(params) {
|
|
|
+ return gagaAgGrid.toAddComma(params.value);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ headerName: "가입", field: "", width: 450, cellClass: 'text-center',
|
|
|
+ children: [
|
|
|
+ {headerName: "가입수", field: "joinCnt", width: 150, cellClass: 'text-center',
|
|
|
+ cellRenderer: function(params) {
|
|
|
+ return gagaAgGrid.toAddComma(params.value);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {headerName: "직방문", field: "drJoinCnt", width: 150, cellClass: 'text-center',
|
|
|
+ cellRenderer: function(params) {
|
|
|
+ return gagaAgGrid.toAddComma(params.value);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {headerName: "제휴", field: "afJoinCnt", width: 150, cellClass: 'text-center',
|
|
|
+ cellRenderer: function(params) {
|
|
|
+ return gagaAgGrid.toAddComma(params.value);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ headerName: "휴면/탈퇴", field: "", width: 450, cellClass: 'text-center',
|
|
|
+ children: [
|
|
|
+ {headerName: "휴면전환", field: "chgDormCnt", width: 150, cellClass: 'text-center',
|
|
|
+ cellRenderer: function(params) {
|
|
|
+ return gagaAgGrid.toAddComma(params.value);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {headerName: "휴면해제", field: "rmDormCnt", width: 150, cellClass: 'text-center',
|
|
|
+ cellRenderer: function(params) {
|
|
|
+ return gagaAgGrid.toAddComma(params.value);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {headerName: "탈퇴", field: "seceedCnt", width: 150, cellClass: 'text-center',
|
|
|
+ cellRenderer: function(params) {
|
|
|
+ return gagaAgGrid.toAddComma(params.value);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ];
|
|
|
+
|
|
|
+ let gridOptions = gagaAgGrid.getGridOptions(columnDefs);
|
|
|
+
|
|
|
+ gridOptions.autoGroupColumnDef = {
|
|
|
+ headerName: "일자",
|
|
|
+ field: "grouping",
|
|
|
+ width: 200,
|
|
|
+ cellRendererParams: {
|
|
|
+ suppressCount: true
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // for expand everything
|
|
|
+ gridOptions.groupDefaultExpanded = -1;
|
|
|
+
|
|
|
+ // 검색
|
|
|
+ $('#btnSearch').on('click', function() {
|
|
|
+ // 입력 값 체크
|
|
|
+ if (!gagajf.validation($('#searchForm')))
|
|
|
+ return false;
|
|
|
+
|
|
|
+ gagaAgGrid.fetch($('#searchForm').prop('action'), gridOptions, '#searchForm', fnCreateTotal);
|
|
|
+ });
|
|
|
+
|
|
|
+ // 합계 생성
|
|
|
+ let fnCreateTotal = function() {
|
|
|
+ // Draw chart
|
|
|
+ fnDrawChart(gagaAgGrid.getAllRowData(gridOptions));
|
|
|
+
|
|
|
+ let tmpData = gagaAgGrid.getAllRowData(gridOptions);
|
|
|
+ let tmpLen = 0;
|
|
|
+
|
|
|
+ let allCnt = tmpData[tmpLen].allCnt;
|
|
|
+ let realCnt = tmpData[tmpLen].realCnt;
|
|
|
+ let dormCnt = tmpData[tmpLen].dormCnt;
|
|
|
+ let vipCnt = tmpData[tmpLen].vipCnt;
|
|
|
+ let goldCnt = tmpData[tmpLen].goldCnt;
|
|
|
+ let silverCnt = tmpData[tmpLen].silverCnt;
|
|
|
+ let bronzeCnt = tmpData[tmpLen].bronzeCnt;
|
|
|
+ let welcomeCnt = tmpData[tmpLen].welcomeCnt;
|
|
|
+ let joinCnt = 0;
|
|
|
+ let drJoinCnt = 0;
|
|
|
+ let afJoinCnt = 0;
|
|
|
+ let chgDormCnt = 0;
|
|
|
+ let rmDormCnt = 0;
|
|
|
+ let seceedCnt = 0;
|
|
|
+
|
|
|
+ gridOptions.api.forEachNode(function(rowNode, index) {
|
|
|
+ if (!rowNode.group) {
|
|
|
+ if (typeof rowNode.data.joinCnt == 'number') { joinCnt += rowNode.data.joinCnt; }
|
|
|
+ if (typeof rowNode.data.drJoinCnt == 'number') { drJoinCnt += rowNode.data.drJoinCnt; }
|
|
|
+ if (typeof rowNode.data.afJoinCnt == 'number') { afJoinCnt += rowNode.data.afJoinCnt; }
|
|
|
+ if (typeof rowNode.data.chgDormCnt == 'number') { chgDormCnt += rowNode.data.chgDormCnt; }
|
|
|
+ if (typeof rowNode.data.rmDormCnt == 'number') { rmDormCnt += rowNode.data.rmDormCnt; }
|
|
|
+ if (typeof rowNode.data.seceedCnt == 'number') { seceedCnt += rowNode.data.seceedCnt; }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ let data = {
|
|
|
+ day: 'TOTAL',
|
|
|
+ allCnt: allCnt, realCnt: realCnt, dormCnt: dormCnt,
|
|
|
+ vipCnt: vipCnt, goldCnt: goldCnt, silverCnt: silverCnt,
|
|
|
+ bronzeCnt: bronzeCnt, welcomeCnt: welcomeCnt, joinCnt: joinCnt,
|
|
|
+ drJoinCnt: drJoinCnt, afJoinCnt: afJoinCnt, chgDormCnt: chgDormCnt,
|
|
|
+ rmDormCnt: rmDormCnt, seceedCnt: seceedCnt
|
|
|
+ };
|
|
|
+
|
|
|
+ gagaAgGrid.setPinnedRowData(gridOptions, data, 'top');
|
|
|
+ }
|
|
|
+
|
|
|
+ // 그래프 그리기
|
|
|
+ var chart1;
|
|
|
+ var fnDrawChart = function(data) {
|
|
|
+ let xList = [];
|
|
|
+ let totCntList = [];
|
|
|
+
|
|
|
+ for(var i = (data.length - 1); i > -1; i--){
|
|
|
+ if ($('#dayGbD').hasClass('active')) {
|
|
|
+ xList.push(data[i].day.toDate('YYYY-MM-DD').format('MM-DD'));
|
|
|
+ } else {
|
|
|
+ xList.push(data[i].day);
|
|
|
+ }
|
|
|
+ totCntList.push(data[i].allCnt);
|
|
|
+ }
|
|
|
+
|
|
|
+ chart1 = c3.generate({
|
|
|
+ bindto: "#chart",
|
|
|
+ padding: {
|
|
|
+ bottom: 20 //adjust chart padding bottom
|
|
|
+ },
|
|
|
+ data: {
|
|
|
+ x: 'x',
|
|
|
+ json: {
|
|
|
+ x: xList,
|
|
|
+ 회원수: totCntList
|
|
|
+ },
|
|
|
+ types: {
|
|
|
+ x: 'line',
|
|
|
+ 회원수: 'line'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axis : {
|
|
|
+ x: {
|
|
|
+ type: 'category',
|
|
|
+ padding: { left: 0.5, right: 0.5 }
|
|
|
+ },
|
|
|
+ y : {
|
|
|
+ tick: {
|
|
|
+ format: d3.format(",")
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ color: {
|
|
|
+ pattern: ['#48C9B0', '#FF7043']
|
|
|
+ },
|
|
|
+ legend: { padding: 15 }, //범례 item 우측 간격
|
|
|
+ tooltip: {
|
|
|
+ format: {
|
|
|
+ title: function (d) {
|
|
|
+ return '가입 통계 Chart';
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // LNB 또는 GNB 클릭시 차트 넓이 변경
|
|
|
+ var chartResize = function() {
|
|
|
+ setTimeout(function () {
|
|
|
+ // 모든 차트 ID객체에 적용
|
|
|
+ chart1.resize();
|
|
|
+ }, 300);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 초기화 클릭시
|
|
|
+ $('#btnInit').on('click', function() {
|
|
|
+ $('#searchForm')[0].reset();
|
|
|
+
|
|
|
+ $('#cardIdTxt').html('');
|
|
|
+ $('#searchForm input[name=cardIdList]').val('');
|
|
|
+ });
|
|
|
+
|
|
|
+ // 엑셀다운로드
|
|
|
+ $('#btnExcel').on('click', function() {
|
|
|
+ gagaAgGrid.exportToExcel('결제수단별통계 목록', gridOptions);
|
|
|
+ });
|
|
|
+
|
|
|
+ // 일자구분 변경 시
|
|
|
+ var fnSetDayGb = function(dayGb) {
|
|
|
+ $('#searchForm input[name=dayGb]').val(dayGb);
|
|
|
+ $('#dayGbD').removeClass('active');
|
|
|
+ $('#dayGbW').removeClass('active');
|
|
|
+ $('#dayGbM').removeClass('active');
|
|
|
+ $('#dayGb' + dayGb).addClass('active');
|
|
|
+ $('#btnSearch').trigger('click');
|
|
|
+ }
|
|
|
+
|
|
|
+ $(document).ready(function() {
|
|
|
+ cfnCreateCalendar('#terms', 'startDt', 'endDt', true, '주문', undefined, ['btnToday']);
|
|
|
+ $('.btnRecentWeek').trigger('click');
|
|
|
+
|
|
|
+ // Create a agGrid
|
|
|
+ gagaAgGrid.createGrid('gridList', gridOptions);
|
|
|
+
|
|
|
+ });
|
|
|
+/*]]>*/
|
|
|
+</script>
|
|
|
+
|
|
|
+</html>
|