초기소스

This commit is contained in:
jazz
2025-10-29 17:08:05 +09:00
parent e531aa9540
commit 439a379a02
7551 changed files with 1234427 additions and 3 deletions

View File

@@ -0,0 +1,524 @@
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="ui" uri="http://www.winbit.kr/ctl/ui" %>
<%@ taglib prefix="f" uri="/WEB-INF/tlds/f.tld" %>
<!DOCTYPE html>
<html lang="ko">
<head>
<%@include file ="/WEB-INF/views/comm/mngr/Include.jsp" %>
</head>
<script>
$(document).ready(function() {
fn_set_dateRange_function('#dataRangeBtn', 'srchStrtSndngDt','srchEndSndngDt', 'srchEndSndngDt');
fn_set_date('srchStrtSndngDt', 'srchEndSndngDt','srchEndSndngDt', '7D');
// 차트 조회
fn_select_chart_data();
// 표 조회
fn_select_table_data(null, null);
// 날짜 검색
$("#srchBtn").on("click", function(){
fn_select_chart_data();
$("#goodsSex").click();
});
// 표
$("#goodsSex").on("click", function() {
fn_select_table_data(null, 'goodsSex', 'goodsInnb', 'ASC');
});
$("#goodsAge").on("click", function() {
fn_select_table_data(null, 'goodsAge', 'goodsInnb', 'ASC');
});
$("#goodsSexAge").on("click", function() {
fn_select_table_data(null, 'goodsSexAge', 'goodsInnb', 'ASC');
});
$("#categorySex").on("click", function() {
fn_select_table_data(null, 'categorySex', 'ctgryNm', 'ASC');
});
$("#categoryAge").on("click", function() {
fn_select_table_data(null, 'categoryAge', 'ctgryNm', 'ASC');
});
$("#categorySexAge").on("click", function() {
fn_select_table_data(null, 'categorySexAge', 'ctgryNm', 'ASC');
});
// 페이징 제자리 새로고침(Submit) 방지
$('body').on('click', 'button.pagination__item.active', function(event) {
event.preventDefault();
});
});
/**
* 차트 데이터 조회
* unitFlag : 일, 주, 월 구분 값
*/
const fn_select_chart_data = function() {
const srchStrtSndngDt = $("#srchStrtSndngDt").val();
const srchEndSndngDt = $("#srchEndSndngDt").val();
const srchOrdrEnvrnCds = $('input[name="srchOrdrEnvrnCds"]:checked').map(function() { return $(this).val(); }).get();
const data = {
srchStrtSndngDt : srchStrtSndngDt,
srchEndSndngDt : srchEndSndngDt,
srchOrdrEnvrnCds : srchOrdrEnvrnCds
}
$.ajax({
type: "POST",
url : "/mngr/stats/sleAnals/selectMngrGoodsPopulationStatsChartInqire",
data : data,
success:function(resultHtml) {
let result = JSON.parse(resultHtml.resBody.result);
// console.log("result : ", result);
loadChart1(result.chart1);
loadChart2(result.chart2);
}
});
}
/**
* 차트1
*/
var chart1;
function loadChart1(data) {
var divHolder = document.getElementById('ChartDiv1');
divHolder.style.height = (94 + data.length * 40) + 'px';
// 데이터가 없는 경우
if(data == '') {
chart1 = null;
divHolder.innerHTML = '';
return;
}
// 차트가 이미 존재하는 경우 기존 차트를 제거
if (chart1) {
chart1 = null;
divHolder.innerHTML = '';
}
// 차트 생성
chart1 = new cfx.Chart();
chart1.setGallery(cfx.Gallery.Gantt);
// 데이터 설정
chart1.setDataSource(data);
// 시리즈 텍스트 설정
chart1.getAllSeries().setStackedStyle(cfx.Stacked.Normal);
// chart1.getSeries().getItem(2).setStacked(false);
chart1.getSeries().getItem(0).setText("회원(여성)");
chart1.getSeries().getItem(1).setText("회원(남성)");
chart1.getSeries().getItem(2).setText("회원(기타)");
chart1.getSeries().getItem(3).setText("비회원");
// 데이터 라벨 값 노출
chart1.getAllSeries().getPointLabels().setVisible(true);
// 툴 팁 표시 속도 조절
chart1.getToolTips().setInitialDelay(0);
chart1.getToolTips().setHideDelay(0);
// 가로형 그래프 - X축 라벨 포맷을 Number로 지정하기(천단위 콤마 표시)
chart1.getAxisY().getLabelsFormat().setFormat(cfx.AxisFormat.Number);
chart1.create(divHolder);
}
/**
* 차트2
*/
var chart2;
function loadChart2(data) {
var divHolder = document.getElementById('ChartDiv2');
divHolder.style.height = (94 + data.length * 40) + 'px';
// 데이터가 없는 경우
if(data == '') {
chart2 = null;
divHolder.innerHTML = '';
return;
}
// 차트가 이미 존재하는 경우 기존 차트를 제거
if (chart2) {
chart2 = null;
divHolder.innerHTML = '';
}
// 차트 생성
chart2 = new cfx.Chart();
chart2.setGallery(cfx.Gallery.Gantt);
// 데이터 설정
chart2.setDataSource(data);
// 시리즈 텍스트 설정
chart2.getAllSeries().setStackedStyle(cfx.Stacked.Normal);
// 데이터 라벨 값 노출
chart2.getAllSeries().getPointLabels().setVisible(true);
// 툴 팁 표시 속도 조절
chart2.getToolTips().setInitialDelay(0);
chart2.getToolTips().setHideDelay(0);
// 가로형 그래프 - X축 라벨 포맷을 Number로 지정하기(천단위 콤마 표시)
chart2.getAxisY().getLabelsFormat().setFormat(cfx.AxisFormat.Number);
chart2.create(divHolder);
}
/**
* 테이블 데이터 조회
* pageIndex
* unitFlag
* - 상품 - 성별 : 'goodsSex'
* - 상품 - 나이 : 'goodsAge'
* - 상품 - 성별/나이 : 'goodsSexAge'
* - 카테고리 - 성별 : 'categorySex'
* - 카테고리 - 나이 : 'categoryAge'
* - 카테고리 - 성별/나이 : 'categorySexAge'
*
* ordrStand
* - fn_select_ordrStandMapping() 참조
*
* ordrType
* - 오름차순 : 'ASC'
* - 내림차순 : 'DESC'
*/
let PordrStand;
let TordrType;
const fn_select_table_data = function(pageIndex, unitFlag, ordrStand, ordrType) {
// console.log("fn_select_table_data()pageIndex, unitFlag : ", pageIndex, unitFlag);
const srchStrtSndngDt = $("#srchStrtSndngDt").val();
const srchEndSndngDt = $("#srchEndSndngDt").val();
const srchOrdrEnvrnCds = $('input[name="srchOrdrEnvrnCds"]:checked').map(function() { return $(this).val(); }).get();
const pageUnit = $("#pageUnit").val();
const recordCountPerPage = '50';
if(!pageIndex) {
$('#pageIndex').val(1);
} else {
$('#pageIndex').val(pageIndex);
}
const pageIndexValue = $("#pageIndex").val();
if(!unitFlag) {
if ($('#goodsSex').hasClass('selected')) {
unitFlag = 'goodsSex';
}else if ($('#goodsAge').hasClass('selected')) {
unitFlag = 'goodsAge';
}else if ($('#goodsSexAge').hasClass('selected')) {
unitFlag = 'goodsSexAge';
}else if ($('#categorySex').hasClass('selected')) {
unitFlag = 'categorySex';
}else if ($('#categoryAge').hasClass('selected')) {
unitFlag = 'categoryAge';
}else if ($('#categorySexAge').hasClass('selected')) {
unitFlag = 'categorySexAge';
}
}
if(!pageIndex){
if (!ordrType && PordrStand == ordrStand) {
//정렬 방식 변경 (정렬 기준 파라미터가 이전과 동일)
TordrType = (TordrType == 'ASC') ? 'DESC' : 'ASC';
}else if(!ordrType){
//정렬 방식 기본값으로 지정 (정렬 기준 변경)
TordrType = 'ASC';
}else{
//정렬 방식 초기화 (표 조회)
TordrType = ordrType;
}
if(!ordrStand){
//정렬 기준 기본값으로 지정
PordrStand = 'goodsInnb';
}else{
//정렬 기준 변경
PordrStand = ordrStand;
}
}
const data = {
srchStrtSndngDt : srchStrtSndngDt,
srchEndSndngDt : srchEndSndngDt,
srchOrdrEnvrnCds : srchOrdrEnvrnCds,
unitFlag : unitFlag,
ordrStand : PordrStand,
ordrType : TordrType,
pageUnit : pageUnit,
pageIndex : pageIndexValue,
recordCountPerPage : recordCountPerPage
}
$.ajax({
type: "POST",
url : "/mngr/stats/sleAnals/selectMngrGoodsPopulationStatsTableInqire",
data : data,
success:function(resultHtml) {
// console.log('success');
$('#pageDiv').empty();
$('#pageDiv').html(resultHtml);
$('.reorder_' + PordrStand).text(fn_select_ordrStandMapping()[PordrStand] + (TordrType === 'ASC' ? ' ▲' : ' ▼'));
}
});
}
/**
* 테이블 정렬 조건(행)
*/
const fn_select_ordrStandMapping = function() {
let ordrStandMapping;
if ($('#goodsSex').hasClass('selected')) {
ordrStandMapping = {
'goodsNm': '상품명',
'goodsInnb': '상품번호',
'sex': '성별',
'ordrCnt': '결제건수',
'rlSetleAmt': '결제금액',
'rlSetleAmtRt': '결제금액비율'
};
}else if ($('#goodsAge').hasClass('selected')) {
ordrStandMapping = {
'goodsNm': '상품명',
'goodsInnb': '상품번호',
'ageDvCd': '나이별',
'ordrCnt': '결제건수',
'rlSetleAmt': '결제금액',
'rlSetleAmtRt': '결제금액비율'
};
}else if ($('#goodsSexAge').hasClass('selected')) {
ordrStandMapping = {
'goodsNm': '상품명',
'goodsInnb': '상품번호',
'sex': '성별',
'ageDvCd': '나이별',
'ordrCnt': '결제건수',
'rlSetleAmt': '결제금액',
'rlSetleAmtRt': '결제금액비율'
};
}else if ($('#categorySex').hasClass('selected')) {
ordrStandMapping = {
'ctgryNm': '카테고리명',
'sex': '성별',
'ordrCnt': '결제건수',
'rlSetleAmt': '결제금액',
'rlSetleAmtRt': '결제금액비율'
};
}else if ($('#categoryAge').hasClass('selected')) {
ordrStandMapping = {
'ctgryNm': '카테고리명',
'ageDvCd': '나이별',
'ordrCnt': '결제건수',
'rlSetleAmt': '결제금액',
'rlSetleAmtRt': '결제금액비율'
};
}else if ($('#categorySexAge').hasClass('selected')) {
ordrStandMapping = {
'ctgryNm': '카테고리명',
'sex': '성별',
'ageDvCd': '나이별',
'ordrCnt': '결제건수',
'rlSetleAmt': '결제금액',
'rlSetleAmtRt': '결제금액비율'
};
}
return ordrStandMapping;
}
/**
* 엑셀 다운로드
*/
const fn_download_excel = function() {
let unitFlag = "";
if ($('#goodsSex').hasClass('selected')) {
unitFlag = 'goodsSex';
} else if ($('#goodsAge').hasClass('selected')) {
unitFlag = 'goodsAge';
}else if ($('#goodsSexAge').hasClass('selected')) {
unitFlag = 'goodsSexAge';
}else if ($('#categorySex').hasClass('selected')) {
unitFlag = 'categorySex';
}else if ($('#categoryAge').hasClass('selected')) {
unitFlag = 'categoryAge';
}else if ($('#categorySexAge').hasClass('selected')) {
unitFlag = 'categorySexAge';
}
$('#unitFlag').val(unitFlag);
// console.log('unitFlag : ', unitFlag);
var tempForm = $('#listForm').clone();
tempForm.append('<input type="hidden" name="ordrStand" value="' + PordrStand + '">');
tempForm.append('<input type="hidden" name="ordrType" value="' + TordrType + '">');
tempForm.attr('action', '<c:url value="/mngr/stats/sleAnals/selectMngrGoodsPopulationStatsExcelFileDownload"/>');
tempForm.attr('method', 'POST');
$('body').append(tempForm);
tempForm.submit();
tempForm.remove();
};
</script>
<body>
<%@include file ="/WEB-INF/views/comm/mngr/Header.jsp" %>
<main class="main">
<%@include file ="/WEB-INF/views/comm/mngr/Left.jsp" %>
<div class="content">
<div class="content__inner">
<input type="hidden" id="pageIndex" value="${ resultMap.pageIndex }"/>
<input type="hidden" id="pageUnit" value="${ resultMap.pageUnit }"/>
<div class="page-title">
<div class="dashboardTitle__left">
<h2 class="page-title__title">전자상거래 요약</h2>
<p class="dashboardTitle__subTitle">전자상거래 분석에 꼭 필요한 정보만을 요약하여 볼 수 있습니다.</p>
</div>
</div>
<form id="listForm">
<section class="content-section">
<div class="table-wrapper">
<table class="table dashboardSearch">
<tbody>
<tr>
<th>결제기간</th>
<td>
<div class="td-inner">
<div class="input-container">
<input type="text" class="datepicker"
id="srchStrtSndngDt" name="srchStrtSndngDt" title="시작 날짜 선택"
autocomplete="off">
<span class="tilde">~</span>
<input type="text" class="datepicker"
id="srchEndSndngDt" name="srchEndSndngDt" title="종료 날짜 선택"
autocomplete="off">
</div>
<div class="dateRange-btnContainer" id="dataRangeBtn">
<button type="button" class="dateRange-btn" id="yesterday">어제</button>
<button></button>
<button type="button" class="dateRange-btn" id="threeDays">3일간</button>
<button type="button" class="dateRange-btn selected" id="sevenDays">일주일</button>
<button type="button" class="dateRange-btn" id="oneMonth">1개월</button>
<button type="button" class="dateRange-btn" id="threeMonth">3개월</button>
<button type="button" class="dateRange-btn" id="sixMonth">6개월</button>
<button type="button" class="dateRange-btn" id="year">1년</button>
</div>
<button class="btn sm primary ml-5" type="button" id="srchBtn">검색</button>
</div>
</td>
</tr>
<tr>
<th>주문환경</th>
<td>
<div class="td-inner">
<div class="b-checkbox-container">
<c:forEach items="${cond.ordrEnvrnDvCdList}" var="ordrEnvrnDvCd" varStatus="status">
<c:if test="${!(ordrEnvrnDvCd.cd == 'S1' || ordrEnvrnDvCd.cd == 'S2' || ordrEnvrnDvCd.cd == 'S3')}">
<label class="b-checkbox checkbox">
<input type="checkbox" name="srchOrdrEnvrnCds" value="${ordrEnvrnDvCd.cd}">
<span class="check"></span>
<span class="control-label">${ordrEnvrnDvCd.cdNm}</span>
</label>
</c:if>
</c:forEach>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="dashboardContent__wrapper">
<div class="dashboardContentTitle">
<div class="dashboardContentTitle__left">
<h3 class="content-section__title">
상품카테고리(소)에 따른 성별 결제금액
<p class="dashboardTitle__subTitle">상품카테고리(소)별로 각 성별 결제금액을 알 수 있습니다.</p>
</h3>
</div>
</div>
<div id="ChartDiv1" style="height:400px;"></div>
</div>
<div class="dashboardContent__wrapper">
<div class="dashboardContentTitle">
<div class="dashboardContentTitle__left">
<h3 class="content-section__title">
상품카테고리(소)에 따른 나이별 결제금액
<p class="dashboardTitle__subTitle">상품카테고리(소)별로 각 나이별 결제금액을 알 수 있습니다.</p>
</h3>
</div>
</div>
<div id="ChartDiv2" style="height:400px;"></div>
</div>
<br>
<div class="table-wrapper">
<div class="dashboardContentTitle" style="margin-bottom: 20px;">
<div class="dashboardContentTitle__left">
<div class="dateRange-btnContainer">
<button class="dateRange-btn selected" id="goodsSex">상품 - 성별</button>
<button class="dateRange-btn" id="goodsAge">상품 - 나이</button>
<button class="dateRange-btn" id="goodsSexAge">상품 - 성별/나이</button>
<button class="dateRange-btn" id="categorySex">카테고리 - 성별</button>
<button class="dateRange-btn" id="categoryAge">카테고리 - 나이</button>
<button class="dateRange-btn" id="categorySexAge">카테고리 - 성별/나이</button>
<input type="hidden" name="unitFlag" id="unitFlag" />
</div>
</div>
<div class="dashboardContentTitle__right">
<button class="btn outline sm" onclick="fn_download_excel(); return false;">
<i class="icon icon_excel"></i>
다운로드
</button>
</div>
</div>
<div id="pageDiv">
</div>
</div>
</section>
</form>
</div>
<button class="scroll-to-top"><span class="visually-hidden">위로가기</span></button>
</div>
</main>
</body>
</html>

View File

@@ -0,0 +1,171 @@
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="ui" uri="http://www.winbit.kr/ctl/ui" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<script>
$(document).ready(function() {
$('th[class^="reorder_"]').click(function() {
var className = $(this).attr('class');
var ordrStand = className.replace('reorder_', '');
fn_select_table_data(null, null, ordrStand);
});
});
</script>
<style>
th[class^="reorder_"] {
cursor: pointer;
}
</style>
<section class="content-section">
<table class="table vertical">
<caption>해당 테이블에 대한 설명</caption>
<colgroup>
<col style="width: auto;">
</colgroup>
<thead id="tableHeader">
<tr>
<c:if test="${ resultMap.unitFlag eq 'goodsSex' }">
<th class="reorder_goodsNm">상품명</th>
<th class="reorder_goodsInnb">상품번호</th>
<th class="reorder_sex">성별</th>
<th class="reorder_ordrCnt">결제건수</th>
<th class="reorder_rlSetleAmt">결제금액</th>
<th class="reorder_rlSetleAmtRt">결제금액비율</th>
</c:if>
<c:if test="${ resultMap.unitFlag eq 'goodsAge' }">
<th class="reorder_goodsNm">상품명</th>
<th class="reorder_goodsInnb">상품번호</th>
<th class="reorder_ageDvCd">나이별</th>
<th class="reorder_ordrCnt">결제건수</th>
<th class="reorder_rlSetleAmt">결제금액</th>
<th class="reorder_rlSetleAmtRt">결제금액비율</th>
</c:if>
<c:if test="${ resultMap.unitFlag eq 'goodsSexAge' }">
<th class="reorder_goodsNm">상품명</th>
<th class="reorder_goodsInnb">상품번호</th>
<th class="reorder_sex">성별</th>
<th class="reorder_ageDvCd">나이별</th>
<th class="reorder_ordrCnt">결제건수</th>
<th class="reorder_rlSetleAmt">결제금액</th>
<th class="reorder_rlSetleAmtRt">결제금액비율</th>
</c:if>
<c:if test="${ resultMap.unitFlag eq 'categorySex' }">
<th class="reorder_ctgryNm">카테고리명</th>
<th class="reorder_sex">성별</th>
<th class="reorder_ordrCnt">결제건수</th>
<th class="reorder_rlSetleAmt">결제금액</th>
<th class="reorder_rlSetleAmtRt">결제금액비율</th>
</c:if>
<c:if test="${ resultMap.unitFlag eq 'categoryAge' }">
<th class="reorder_ctgryNm">카테고리명</th>
<th class="reorder_ageDvCd">나이별</th>
<th class="reorder_ordrCnt">결제건수</th>
<th class="reorder_rlSetleAmt">결제금액</th>
<th class="reorder_rlSetleAmtRt">결제금액비율</th>
</c:if>
<c:if test="${ resultMap.unitFlag eq 'categorySexAge' }">
<th class="reorder_ctgryNm">카테고리명</th>
<th class="reorder_sex">성별</th>
<th class="reorder_ageDvCd">나이별</th>
<th class="reorder_ordrCnt">결제건수</th>
<th class="reorder_rlSetleAmt">결제금액</th>
<th class="reorder_rlSetleAmtRt">결제금액비율</th>
</c:if>
</tr>
</thead>
<tbody id="tableBody">
<c:choose>
<c:when test="${ empty resultMap.resultList }">
<tr>
<td class="row-no-data" colspan="20">조회된 데이터가 없습니다.</td>
</tr>
</c:when>
<c:otherwise>
<c:forEach items="${ resultMap.resultList }" var="list" varStatus="status">
<c:if test="${ resultMap.unitFlag eq 'goodsSex' }">
<tr>
<td>${ list.goodsNm }</td>
<td>${ list.goodsInnb }</td>
<td>${ list.sex }</td>
<td><fmt:formatNumber value="${ list.ordrCnt }" pattern="#,###"/></td>
<td><fmt:formatNumber value="${ list.rlSetleAmt }" pattern="#,###"/></td>
<td>${ list.rlSetleAmtRt }%</td>
</tr>
</c:if>
<c:if test="${ resultMap.unitFlag eq 'goodsAge' }">
<tr>
<td>${ list.goodsNm }</td>
<td>${ list.goodsInnb }</td>
<td>${ list.ageDvCd }</td>
<td><fmt:formatNumber value="${ list.ordrCnt }" pattern="#,###"/></td>
<td><fmt:formatNumber value="${ list.rlSetleAmt }" pattern="#,###"/></td>
<td>${ list.rlSetleAmtRt }%</td>
</tr>
</c:if>
<c:if test="${ resultMap.unitFlag eq 'goodsSexAge' }">
<tr>
<td>${ list.goodsNm }</td>
<td>${ list.goodsInnb }</td>
<td>${ list.sex }</td>
<td>${ list.ageDvCd }</td>
<td><fmt:formatNumber value="${ list.ordrCnt }" pattern="#,###"/></td>
<td><fmt:formatNumber value="${ list.rlSetleAmt }" pattern="#,###"/></td>
<td>${ list.rlSetleAmtRt }%</td>
</tr>
</c:if>
<c:if test="${ resultMap.unitFlag eq 'categorySex' }">
<tr>
<td>${ list.ctgryNm }</td>
<td>${ list.sex }</td>
<td><fmt:formatNumber value="${ list.ordrCnt }" pattern="#,###"/></td>
<td><fmt:formatNumber value="${ list.rlSetleAmt }" pattern="#,###"/></td>
<td>${ list.rlSetleAmtRt }%</td>
</tr>
</c:if>
<c:if test="${ resultMap.unitFlag eq 'categoryAge' }">
<tr>
<td>${ list.ctgryNm }</td>
<td>${ list.ageDvCd }</td>
<td><fmt:formatNumber value="${ list.ordrCnt }" pattern="#,###"/></td>
<td><fmt:formatNumber value="${ list.rlSetleAmt }" pattern="#,###"/></td>
<td>${ list.rlSetleAmtRt }%</td>
</tr>
</c:if>
<c:if test="${ resultMap.unitFlag eq 'categorySexAge' }">
<tr>
<td>${ list.ctgryNm }</td>
<td>${ list.sex }</td>
<td>${ list.ageDvCd }</td>
<td><fmt:formatNumber value="${ list.ordrCnt }" pattern="#,###"/></td>
<td><fmt:formatNumber value="${ list.rlSetleAmt }" pattern="#,###"/></td>
<td>${ list.rlSetleAmtRt }%</td>
</tr>
</c:if>
</c:forEach>
</c:otherwise>
</c:choose>
</tbody>
</table>
</section>
<div class="pagination__container">
<ui:pagination paginationInfo="${ resultMap.paginationInfo }" type="image" jsFunction="fn_select_table_data" />
</div>

View File

@@ -0,0 +1,662 @@
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="ui" uri="http://www.winbit.kr/ctl/ui" %>
<%@ taglib prefix="f" uri="/WEB-INF/tlds/f.tld" %>
<!DOCTYPE html>
<html lang="ko">
<head>
<%@include file ="/WEB-INF/views/comm/mngr/Include.jsp" %>
</head>
<script>
$(document).ready(function() {
fn_set_dateRange_function('#dataRangeBtn', 'srchStrtSndngDt','srchEndSndngDt', 'srchEndSndngDt');
fn_set_date('srchStrtSndngDt', 'srchEndSndngDt','srchEndSndngDt', '7D');
// 차트 조회
fn_select_chart_data();
// 표 조회
fn_select_table_data(null, null);
// 날짜 검색
$("#srchBtn").on("click", function(){
fn_select_chart_data();
$('#tableCategory').click();
});
// 표
$("#tableCategory").on("click", function() {
fn_select_table_data(null, 'tableCategory', 'rlSetleAmt', 'DESC');
});
$("#tableGoodsNm").on("click", function() {
fn_select_table_data(null, 'tableGoodsNm', 'rlSetleAmt', 'DESC');
});
$("#tableOptionNm").on("click", function() {
fn_select_table_data(null, 'tableOptionNm', 'rlSetleAmt', 'DESC');
});
$("#tableWeeklyRslt").on("click", function() {
fn_select_table_data(null, 'tableWeeklyRslt', 'dt', 'ASC');
});
$("#tableDailyRslt").on("click", function() {
fn_select_table_data(null, 'tableDailyRslt', 'dt', 'ASC');
});
$("#tableSleEnvRslt").on("click", function() {
fn_select_table_data(null, 'tableSleEnvRslt', 'dt', 'ASC');
});
// 페이징 제자리 새로고침(Submit) 방지
$('body').on('click', 'button.pagination__item.active', function(event) {
event.preventDefault();
});
});
/**
* 차트 데이터 조회
* unitFlag : 일, 주, 월 구분 값
*/
const fn_select_chart_data = function() {
const srchStrtSndngDt = $("#srchStrtSndngDt").val();
const srchEndSndngDt = $("#srchEndSndngDt").val();
const srchDate = $("#srchDate").val();
const srchOrdrEnvrnCds = $('input[name="srchOrdrEnvrnCds"]:checked').map(function() { return $(this).val(); }).get();
const data = {
srchStrtSndngDt : srchStrtSndngDt,
srchEndSndngDt : srchEndSndngDt,
srchDate : srchDate,
srchOrdrEnvrnCds : srchOrdrEnvrnCds
}
$.ajax({
type: "POST",
url : "/mngr/stats/sleAnals/selectMngrGoodsRsltChartInqire",
data : data,
success:function(resultHtml) {
let result = JSON.parse(resultHtml.resBody.result);
// console.log("result : ", result);
loadChart1(result.chart1, srchDate);
loadChart2(result.chart2, srchDate);
loadChart3(result.chart3);
}
});
}
/**
* 차트1
*/
var chart1;
function loadChart1(data, srchDate) {
var divHolder = document.getElementById('ChartDiv1');
divHolder.style.height = (94 + data.length * 40) + 'px';
// 데이터가 없는 경우
if(data == '') {
chart1 = null;
divHolder.innerHTML = '';
return;
}
// 차트가 이미 존재하는 경우 기존 차트를 제거
if (chart1) {
chart1 = null;
divHolder.innerHTML = '';
}
// 차트 생성
chart1 = new cfx.Chart();
chart1.setGallery(cfx.Gallery.Gantt);
// 데이터 설정
chart1.setDataSource(data);
// 시리즈 텍스트 설정
if( srchDate == 1) {
chart1.getSeries().getItem(0).setText("결제금액");
}else {
chart1.getSeries().getItem(0).setText("환불금액");
}
// 데이터 라벨 값 노출
chart1.getAllSeries().getPointLabels().setVisible(true);
// 툴 팁 표시 속도 조절
chart1.getToolTips().setInitialDelay(0);
chart1.getToolTips().setHideDelay(0);
// 가로형 그래프 - X축 라벨 포맷을 Number로 지정하기(천단위 콤마 표시)
chart1.getAxisY().getLabelsFormat().setFormat(cfx.AxisFormat.Number);
// 우측 여백 증가
chart1.getPlotAreaMargin().setRight(50);
// 차트 생성
chart1.create(divHolder);
}
/**
* 차트2
*/
var chart2;
function loadChart2(data, srchDate) {
var divHolder = document.getElementById('ChartDiv2');
divHolder.style.height = (94 + data.length * 40) + 'px';
// 데이터가 없는 경우
if(data == '') {
chart2 = null;
divHolder.innerHTML = '';
return;
}
// 차트가 이미 존재하는 경우 기존 차트를 제거
if (chart2) {
chart2 = null;
divHolder.innerHTML = '';
}
// 차트 생성
chart2 = new cfx.Chart();
chart2.setGallery(cfx.Gallery.Gantt);
// 데이터 설정
chart2.setDataSource(data);
// 시리즈 텍스트 설정
if( srchDate == 1) {
chart2.getSeries().getItem(0).setText("결제금액");
}else {
chart2.getSeries().getItem(0).setText("환불금액");
}
// 데이터 라벨 값 노출
chart2.getAllSeries().getPointLabels().setVisible(true);
// 툴 팁 표시 속도 조절
chart2.getToolTips().setInitialDelay(0);
chart2.getToolTips().setHideDelay(0);
// 가로형 그래프 - X축 라벨 포맷을 Number로 지정하기(천단위 콤마 표시)
chart2.getAxisY().getLabelsFormat().setFormat(cfx.AxisFormat.Number);
// 우측 여백 증가
chart2.getPlotAreaMargin().setRight(50);
// 차트 생성
chart2.create(divHolder);
}
/**
* 차트3
*/
var chart3;
function loadChart3(data) {
var divHolder = document.getElementById('ChartDiv3');
divHolder.style.height = (94 + data.length * 40) + 'px';
// 데이터가 없는 경우
if(data == '') {
chart3 = null;
divHolder.innerHTML = '';
return;
}
// 차트가 이미 존재하는 경우 기존 차트를 제거
if (chart3) {
chart3 = null;
divHolder.innerHTML = '';
}
// 차트 생성
chart3 = new cfx.Chart();
chart3.setGallery(cfx.Gallery.Gantt);
// 데이터 설정
chart3.setDataSource(data);
// 시리즈 텍스트 설정
chart3.getSeries().getItem(0).setGallery(cfx.Gallery.Lines);
chart3.getSeries().getItem(0).setText("환불율");
chart3.getSeries().getItem(1).setText("결제금액");
chart3.getSeries().getItem(2).setText("환불금액");
// 환불율 Y axis 추가하기
var axisY2 = chart3.getAxisY2();
var series3 = chart3.getSeries().getItem(0);
series3.setAxisY(axisY2);
// 환불율 Y axis 라벨 축 숨기기
axisY2.getGrids().getMajor().setVisible(false);
// 환불율 Y axis 라벨 값 포멧 지정(백분율)
axisY2.getLabelsFormat().setFormat(cfx.AxisFormat.Percentage);
// 환불율 Y axis 라벨 값 최대,최소값 지정
axisY2.setMin(0);
axisY2.setMax(1);
// 환불율 Y axis 라벨 값이 100%를 넘었을 때
data.map(item => item.refundAmtRy).forEach(refundAmtRy => {
// console.log(refundAmtRy);
if (refundAmtRy > 1) {
axisY2.setMax(Math.floor(refundAmtRy)+1);
}
});
// 데이터 라벨 값 노출
chart3.getAllSeries().getPointLabels().setVisible(true);
// 툴 팁 표시 속도 조절
chart3.getToolTips().setInitialDelay(0);
chart3.getToolTips().setHideDelay(0);
// 가로형 그래프 - X축 라벨 포맷을 Number로 지정하기(천단위 콤마 표시)
chart3.getAxisY().getLabelsFormat().setFormat(cfx.AxisFormat.Number);
// 우측 여백 증가
chart3.getPlotAreaMargin().setRight(50);
// 차트 생성
chart3.create(divHolder);
}
/**
* 테이블 데이터 조회
* pageIndex
* unitFlag
* - 카테고리 : 'tableCategory'
* - 상품명 : 'tableGoodsNm'
* - 옵션명 : 'tableOptionNm'
* - 일자/옵션별 : 'tableWeeklyRslt'
* - 일자별 : 'tableDailyRslt'
* - 일자별/판매환경별 : 'tableSleEnvRslt'
*
* ordrStand
* - fn_select_ordrStandMapping() 참조
*
* ordrType
* - 오름차순 : 'ASC'
* - 내림차순 : 'DESC'
*/
let PordrStand;
let TordrType;
const fn_select_table_data = function(pageIndex, unitFlag, ordrStand, ordrType) {
// console.log("fn_select_table_data()pageIndex, unitFlag : ", pageIndex, unitFlag);
const srchStrtSndngDt = $("#srchStrtSndngDt").val();
const srchEndSndngDt = $("#srchEndSndngDt").val();
const srchDate = $("#srchDate").val();
const srchOrdrEnvrnCds = $('input[name="srchOrdrEnvrnCds"]:checked').map(function() { return $(this).val(); }).get();
const pageUnit = $("#pageUnit").val();
const recordCountPerPage = '50';
if(!pageIndex) {
$('#pageIndex').val(1);
} else {
$('#pageIndex').val(pageIndex);
}
const pageIndexValue = $("#pageIndex").val();
if(!unitFlag) {
if ($('#tableCategory').hasClass('selected')) {
unitFlag = 'tableCategory';
} else if ($('#tableGoodsNm').hasClass('selected')) {
unitFlag = 'tableGoodsNm';
}else if ($('#tableOptionNm').hasClass('selected')) {
unitFlag = 'tableOptionNm';
}else if ($('#tableWeeklyRslt').hasClass('selected')) {
unitFlag = 'tableWeeklyRslt';
}else if ($('#tableDailyRslt').hasClass('selected')) {
unitFlag = 'tableDailyRslt';
}else if ($('#tableSleEnvRslt').hasClass('selected')) {
unitFlag = 'tableSleEnvRslt';
}
}
if(!pageIndex){
if (!ordrType && PordrStand == ordrStand) {
//정렬 방식 변경 (정렬 기준 파라미터가 이전과 동일)
TordrType = (TordrType == 'ASC') ? 'DESC' : 'ASC';
}else if(!ordrType){
//정렬 방식 기본값으로 지정 (정렬 기준 변경)
TordrType = 'DESC';
}else{
//정렬 방식 초기화 (표 조회)
TordrType = ordrType;
}
if(!ordrStand){
//정렬 기준 기본값으로 지정
PordrStand = 'rlSetleAmt';
}else{
//정렬 기준 변경
PordrStand = ordrStand;
}
}
const data = {
srchStrtSndngDt : srchStrtSndngDt,
srchEndSndngDt : srchEndSndngDt,
srchDate : srchDate,
srchOrdrEnvrnCds : srchOrdrEnvrnCds,
unitFlag : unitFlag,
ordrStand : PordrStand,
ordrType : TordrType,
pageUnit : pageUnit,
pageIndex : pageIndexValue,
recordCountPerPage : recordCountPerPage
}
$.ajax({
type: "POST",
url : "/mngr/stats/sleAnals/selectMngrGoodsRsltTableInqire",
data : data,
success:function(resultHtml) {
// console.log('success');
$('#pageDiv').empty();
$('#pageDiv').html(resultHtml);
$('.reorder_' + PordrStand).text(fn_select_ordrStandMapping()[PordrStand] + (TordrType === 'ASC' ? ' ▲' : ' ▼'));
}
});
}
/**
* 테이블 정렬 조건(행)
*/
const fn_select_ordrStandMapping = function() {
let ordrStandMapping;
if ($('#tableCategory').hasClass('selected')) {
ordrStandMapping = {
'ctgryNm': '카테고리',
'ordrCnt': '결제건수',
'rlSetleAmt': '결제금액',
'refundCnt': '환불건수',
'refundAmt': '환불금액',
'refundRt': '환불비율'
};
} else if ($('#tableGoodsNm').hasClass('selected')) {
ordrStandMapping = {
'ctgryNm': '카테고리',
'goodsNm': '상품명',
'goodsInnb': '상품번호',
'ordrCnt': '결제건수',
'rlSetleAmt': '결제금액',
'refundCnt': '환불건수',
'refundAmt': '환불금액',
'refundRt': '환불비율'
};
}else if ($('#tableOptionNm').hasClass('selected')) {
ordrStandMapping = {
'ctgryNm': '카테고리',
'goodsNm': '상품명',
'optnVal1': '옵션명',
'goodsInnb': '상품번호',
'optnCd1': '옵션코드',
'ordrCnt': '결제건수',
'ordrQy': '옵션주문수량',
'rlSetleAmt': '결제금액',
'refundCnt': '환불건수',
'refundQy': '환불옵션수량',
'refundAmt': '환불금액',
'refundRt': '환불비율'
};
}else if ($('#tableWeeklyRslt').hasClass('selected')) {
ordrStandMapping = {
'yrWk': '주',
'dt': '일자',
'ctgryNm': '카테고리',
'goodsNm': '상품명',
'optnVal1': '옵션명',
'goodsInnb': '상품번호',
'optnCd1': '옵션코드',
'ordrCnt': '결제건수',
'ordrQy': '옵션주문수량',
'rlSetleAmt': '결제금액',
'refundCnt': '환불건수',
'refundQy': '환불옵션수량',
'refundAmt': '환불금액',
'rlDlvyAmt': '배송비'
};
}else if ($('#tableDailyRslt').hasClass('selected')) {
ordrStandMapping = {
'dt': '일자',
'ordrCnt': '결제건수',
'rlSetleAmt': '결제금액',
'refundCnt': '환불건수',
'refundAmt': '환불금액',
'rlDlvyAmt': '배송비'
};
}else if ($('#tableSleEnvRslt').hasClass('selected')) {
ordrStandMapping = {
'dt': '일자',
'sleEnvrnCd': '판매환경코드',
'ctgryNm': '카테고리',
'goodsInnb': '상품번호',
'goodsNm': '상품명',
'optnCd1': '옵션코드',
'optnVal1': '옵션명',
'ordrCnt': '결제건수',
'ordrQy': '옵션주문수량',
'rlSetleAmt': '결제금액',
'refundCnt': '환불건수',
'refundQy': '환불옵션수량',
'refundAmt': '환불금액',
'rlDlvyAmt': '배송비'
};
}
return ordrStandMapping;
}
/**
* 엑셀 다운로드
*/
const fn_download_excel = function() {
let unitFlag = "";
if ($('#tableCategory').hasClass('selected')) {
unitFlag = 'tableCategory';
} else if ($('#tableGoodsNm').hasClass('selected')) {
unitFlag = 'tableGoodsNm';
}else if ($('#tableOptionNm').hasClass('selected')) {
unitFlag = 'tableOptionNm';
}else if ($('#tableWeeklyRslt').hasClass('selected')) {
unitFlag = 'tableWeeklyRslt';
}else if ($('#tableDailyRslt').hasClass('selected')) {
unitFlag = 'tableDailyRslt';
}else if ($('#tableSleEnvRslt').hasClass('selected')) {
unitFlag = 'tableSleEnvRslt';
}
$('#unitFlag').val(unitFlag);
// console.log('unitFlag : ', unitFlag);
var tempForm = $('#listForm').clone();
tempForm.append('<input type="hidden" name="ordrStand" value="' + PordrStand + '">');
tempForm.append('<input type="hidden" name="ordrType" value="' + TordrType + '">');
tempForm.attr('action', '<c:url value="/mngr/stats/sleAnals/selectMngrGoodsRsltExcelFileDownload"/>');
tempForm.attr('method', 'POST');
$('body').append(tempForm);
tempForm.submit();
tempForm.remove();
};
</script>
<body>
<%@include file ="/WEB-INF/views/comm/mngr/Header.jsp" %>
<main class="main">
<%@include file ="/WEB-INF/views/comm/mngr/Left.jsp" %>
<div class="content">
<div class="content__inner">
<input type="hidden" id="pageIndex" value="${ resultMap.pageIndex }"/>
<input type="hidden" id="pageUnit" value="${ resultMap.pageUnit }"/>
<div class="page-title">
<div class="dashboardTitle__left">
<h2 class="page-title__title">전자상거래 요약</h2>
<p class="dashboardTitle__subTitle">전자상거래 분석에 꼭 필요한 정보만을 요약하여 볼 수 있습니다.</p>
</div>
</div>
<form id="listForm">
<section class="content-section">
<div class="table-wrapper">
<table class="table dashboardSearch">
<tbody>
<tr>
<th>
<div class="select-box">
<select title="해당 셀렉트에 대한 설명" name="srchDate" id="srchDate">
<option value="1">결제기간</option>
<option value="2">환불기간</option>
</select>
</div>
</th>
<td>
<div class="td-inner">
<div class="input-container">
<input type="text" class="datepicker"
id="srchStrtSndngDt" name="srchStrtSndngDt" title="시작 날짜 선택"
autocomplete="off">
<span class="tilde">~</span>
<input type="text" class="datepicker"
id="srchEndSndngDt" name="srchEndSndngDt" title="종료 날짜 선택"
autocomplete="off">
</div>
<div class="dateRange-btnContainer" id="dataRangeBtn">
<button type="button" class="dateRange-btn" id="yesterday">어제</button>
<button></button>
<button type="button" class="dateRange-btn" id="threeDays">3일간</button>
<button type="button" class="dateRange-btn selected" id="sevenDays">일주일</button>
<button type="button" class="dateRange-btn" id="oneMonth">1개월</button>
<button type="button" class="dateRange-btn" id="threeMonth">3개월</button>
<button type="button" class="dateRange-btn" id="sixMonth">6개월</button>
<button type="button" class="dateRange-btn" id="year">1년</button>
</div>
<button class="btn sm primary ml-5" type="button" id="srchBtn">검색</button>
</div>
</td>
</tr>
<tr>
<th>주문환경</th>
<td>
<div class="td-inner">
<div class="b-checkbox-container">
<c:forEach items="${cond.ordrEnvrnDvCdList}" var="ordrEnvrnDvCd" varStatus="status">
<c:if test="${!(ordrEnvrnDvCd.cd == 'S1' || ordrEnvrnDvCd.cd == 'S2' || ordrEnvrnDvCd.cd == 'S3')}">
<label class="b-checkbox checkbox">
<input type="checkbox" name="srchOrdrEnvrnCds" value="${ordrEnvrnDvCd.cd}">
<span class="check"></span>
<span class="control-label">${ordrEnvrnDvCd.cdNm}</span>
</label>
</c:if>
</c:forEach>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="dashboardContent__wrapper">
<div class="dashboardContentTitle">
<div class="dashboardContentTitle__left">
<h3 class="content-section__title">
상품카테고리(소)별 결제금액
<p class="dashboardTitle__subTitle">많이 팔리는 상품카테고리(소)를 알 수 있습니다.</p>
</h3>
</div>
</div>
<div id="ChartDiv1" style="height:600px;"></div>
</div>
<div class="dashboardContent__wrapper">
<div class="dashboardContentTitle">
<div class="dashboardContentTitle__left">
<h3 class="content-section__title">
상품별 결제금액
<p class="dashboardTitle__subTitle">많이 팔리는 상품을 알 수 있습니다.</p>
</h3>
</div>
</div>
<div id="ChartDiv2" style="height:600px;"></div>
</div>
<div class="dashboardContent__wrapper">
<div class="dashboardContentTitle">
<div class="dashboardContentTitle__left">
<h3 class="content-section__title">
상품별 환불율
<p class="dashboardTitle__subTitle">환불이 많이 발생하는 상풀을 알 수 있습니다.</p>
</h3>
</div>
</div>
<div id="ChartDiv3" style="height:600px;"></div>
</div>
<br>
<div class="table-wrapper">
<div class="dashboardContentTitle" style="margin-bottom: 20px;">
<div class="dashboardContentTitle__left">
<div class="dateRange-btnContainer">
<button class="dateRange-btn selected" id="tableCategory">카테고리</button>
<button class="dateRange-btn" id="tableGoodsNm">상품명</button>
<button class="dateRange-btn" id="tableOptionNm">옵션명</button>
<button class="dateRange-btn" id="tableWeeklyRslt">일자/옵션별</button>
<button class="dateRange-btn" id="tableDailyRslt">일자별</button>
<button class="dateRange-btn" id="tableSleEnvRslt">일자별/판매환경별</button>
<input type="hidden" name="unitFlag" id="unitFlag" />
</div>
</div>
<div class="dashboardContentTitle__right">
<button class="btn outline sm" onclick="fn_download_excel(); return false;">
<i class="icon icon_excel"></i>
다운로드
</button>
</div>
</div>
<div id="pageDiv">
</div>
</div>
</section>
</form>
</div>
<button class="scroll-to-top"><span class="visually-hidden">위로가기</span></button>
</div>
</main>
</body>
</html>

View File

@@ -0,0 +1,223 @@
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="ui" uri="http://www.winbit.kr/ctl/ui" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<script>
$(document).ready(function() {
$('th[class^="reorder_"]').click(function() {
var className = $(this).attr('class');
var ordrStand = className.replace('reorder_', '');
fn_select_table_data(null, null, ordrStand);
});
});
</script>
<style>
th[class^="reorder_"] {
cursor: pointer;
}
</style>
<section class="content-section">
<table class="table vertical">
<caption>해당 테이블에 대한 설명</caption>
<colgroup>
<col style="width: auto;">
</colgroup>
<thead id="tableHeader">
<tr>
<c:if test="${ resultMap.unitFlag eq 'tableCategory' }">
<th class="reorder_ctgryNm">카테고리</th>
<th class="reorder_ordrCnt">결제건수</th>
<th class="reorder_rlSetleAmt">결제금액</th>
<th class="reorder_refundCnt">환불건수</th>
<th class="reorder_refundAmt">환불금액</th>
<th class="reorder_refundRt">환불비율</th>
</c:if>
<c:if test="${ resultMap.unitFlag eq 'tableGoodsNm' }">
<th class="reorder_ctgryNm">카테고리</th>
<th class="reorder_goodsNm">상품명</th>
<th class="reorder_goodsInnb">상품번호</th>
<th class="reorder_ordrCnt">결제건수</th>
<th class="reorder_rlSetleAmt">결제금액</th>
<th class="reorder_refundCnt">환불건수</th>
<th class="reorder_refundAmt">환불금액</th>
<th class="reorder_refundRt">환불비율</th>
</c:if>
<c:if test="${ resultMap.unitFlag eq 'tableOptionNm' }">
<th class="reorder_ctgryNm">카테고리</th>
<th class="reorder_goodsNm">상품명</th>
<th class="reorder_optnVal1">옵션명</th>
<th class="reorder_goodsInnb">상품번호</th>
<th class="reorder_optnCd1">옵션코드</th>
<th class="reorder_ordrCnt">결제건수</th>
<th class="reorder_ordrQy">옵션주문수량</th>
<th class="reorder_rlSetleAmt">결제금액</th>
<th class="reorder_refundCnt">환불건수</th>
<th class="reorder_refundQy">환불옵션수량</th>
<th class="reorder_refundAmt">환불금액</th>
<th class="reorder_refundRt">환불비율</th>
</c:if>
<c:if test="${ resultMap.unitFlag eq 'tableWeeklyRslt' }">
<th class="reorder_yrWk">주</th>
<th class="reorder_dt">일자</th>
<th class="reorder_ctgryNm">카테고리</th>
<th class="reorder_goodsNm">상품명</th>
<th class="reorder_optnVal1">옵션명</th>
<th class="reorder_goodsInnb">상품번호</th>
<th class="reorder_optnCd1">옵션코드</th>
<th class="reorder_ordrCnt">결제건수</th>
<th class="reorder_ordrQy">옵션주문수량</th>
<th class="reorder_rlSetleAmt">결제금액</th>
<th class="reorder_refundCnt">환불건수</th>
<th class="reorder_refundQy">환불옵션수량</th>
<th class="reorder_refundAmt">환불금액</th>
<th class="reorder_rlDlvyAmt">배송비</th>
</c:if>
<c:if test="${ resultMap.unitFlag eq 'tableDailyRslt' }">
<th class="reorder_dt">일자</th>
<th class="reorder_ordrCnt">결제건수</th>
<th class="reorder_rlSetleAmt">결제금액</th>
<th class="reorder_refundCnt">환불건수</th>
<th class="reorder_refundAmt">환불금액</th>
<th class="reorder_rlDlvyAmt">배송비</th>
</c:if>
<c:if test="${ resultMap.unitFlag eq 'tableSleEnvRslt' }">
<th class="reorder_dt">일자</th>
<th class="reorder_sleEnvrnCd">판매환경코드</th>
<th class="reorder_ctgryNm">카테고리</th>
<th class="reorder_goodsNm">상품명</th>
<th class="reorder_optnVal1">옵션명</th>
<th class="reorder_goodsInnb">상품번호</th>
<th class="reorder_optnCd1">옵션코드</th>
<th class="reorder_ordrCnt">결제건수</th>
<th class="reorder_ordrQy">옵션주문수량</th>
<th class="reorder_rlSetleAmt">결제금액</th>
<th class="reorder_refundCnt">환불건수</th>
<th class="reorder_refundQy">환불옵션수량</th>
<th class="reorder_refundAmt">환불금액</th>
<th class="reorder_rlDlvyAmt">배송비</th>
</c:if>
</tr>
</thead>
<tbody id="tableBody">
<c:choose>
<c:when test="${ empty resultMap.resultList }">
<tr>
<td class="row-no-data" colspan="20">조회된 데이터가 없습니다.</td>
</tr>
</c:when>
<c:otherwise>
<c:forEach items="${ resultMap.resultList }" var="list" varStatus="status">
<c:if test="${ resultMap.unitFlag eq 'tableCategory' }">
<tr>
<td>${ list.ctgryNm }</td>
<td><fmt:formatNumber value="${ list.ordrCnt }" pattern="#,###"/></td>
<td><fmt:formatNumber value="${ list.rlSetleAmt }" pattern="#,###"/></td>
<td><fmt:formatNumber value="${ list.refundCnt }" pattern="#,###"/></td>
<td><fmt:formatNumber value="${ list.refundAmt }" pattern="#,###"/></td>
<td>${ list.refundRt }%</td>
</tr>
</c:if>
<c:if test="${ resultMap.unitFlag eq 'tableGoodsNm' }">
<tr>
<td>${ list.ctgryNm }</td>
<td>${ list.goodsNm }</td>
<td>${ list.goodsInnb }</td>
<td><fmt:formatNumber value="${ list.ordrCnt }" pattern="#,###"/></td>
<td><fmt:formatNumber value="${ list.rlSetleAmt }" pattern="#,###"/></td>
<td><fmt:formatNumber value="${ list.refundCnt }" pattern="#,###"/></td>
<td><fmt:formatNumber value="${ list.refundAmt }" pattern="#,###"/></td>
<td>${ list.refundRt }%</td>
</tr>
</c:if>
<c:if test="${ resultMap.unitFlag eq 'tableOptionNm' }">
<tr>
<td>${ list.ctgryNm }</td>
<td>${ list.goodsNm }</td>
<td>${ list.optnVal1 }</td>
<td>${ list.goodsInnb }</td>
<td>${ list.optnCd1 }</td>
<td><fmt:formatNumber value="${ list.ordrCnt }" pattern="#,###"/></td>
<td><fmt:formatNumber value="${ list.ordrQy }" pattern="#,###"/></td>
<td><fmt:formatNumber value="${ list.rlSetleAmt }" pattern="#,###"/></td>
<td><fmt:formatNumber value="${ list.refundCnt }" pattern="#,###"/></td>
<td><fmt:formatNumber value="${ list.refundQy }" pattern="#,###"/></td>
<td><fmt:formatNumber value="${ list.refundAmt }" pattern="#,###"/></td>
<td>${ list.refundRt }%</td>
</tr>
</c:if>
<c:if test="${ resultMap.unitFlag eq 'tableWeeklyRslt' }">
<tr>
<td>${ list.yrWk }</td>
<td>${ list.dt }</td>
<td>${ list.ctgryNm }</td>
<td>${ list.goodsNm }</td>
<td>${ list.optnVal1 }</td>
<td>${ list.goodsInnb }</td>
<td>${ list.optnCd1 }</td>
<td><fmt:formatNumber value="${ list.ordrCnt }" pattern="#,###"/></td>
<td><fmt:formatNumber value="${ list.ordrQy }" pattern="#,###"/></td>
<td><fmt:formatNumber value="${ list.rlSetleAmt }" pattern="#,###"/></td>
<td><fmt:formatNumber value="${ list.refundCnt }" pattern="#,###"/></td>
<td><fmt:formatNumber value="${ list.refundQy }" pattern="#,###"/></td>
<td><fmt:formatNumber value="${ list.refundAmt }" pattern="#,###"/></td>
<td><fmt:formatNumber value="${ list.rlDlvyAmt }" pattern="#,###"/></td>
</tr>
</c:if>
<c:if test="${ resultMap.unitFlag eq 'tableDailyRslt' }">
<tr>
<td>${ list.dt }</td>
<td><fmt:formatNumber value="${ list.ordrCnt }" pattern="#,###"/></td>
<td><fmt:formatNumber value="${ list.rlSetleAmt }" pattern="#,###"/></td>
<td><fmt:formatNumber value="${ list.refundCnt }" pattern="#,###"/></td>
<td><fmt:formatNumber value="${ list.refundAmt }" pattern="#,###"/></td>
<td><fmt:formatNumber value="${ list.rlDlvyAmt }" pattern="#,###"/></td>
</tr>
</c:if>
<c:if test="${ resultMap.unitFlag eq 'tableSleEnvRslt' }">
<tr>
<td>${ list.dt }</td>
<td>${ list.sleEnvrnCd }</td>
<td>${ list.ctgryNm }</td>
<td>${ list.goodsNm }</td>
<td>${ list.optnVal1 }</td>
<td>${ list.goodsInnb }</td>
<td>${ list.optnCd1 }</td>
<td><fmt:formatNumber value="${ list.ordrCnt }" pattern="#,###"/></td>
<td><fmt:formatNumber value="${ list.ordrQy }" pattern="#,###"/></td>
<td><fmt:formatNumber value="${ list.rlSetleAmt }" pattern="#,###"/></td>
<td><fmt:formatNumber value="${ list.refundCnt }" pattern="#,###"/></td>
<td><fmt:formatNumber value="${ list.refundQy }" pattern="#,###"/></td>
<td><fmt:formatNumber value="${ list.refundAmt }" pattern="#,###"/></td>
<td><fmt:formatNumber value="${ list.rlDlvyAmt }" pattern="#,###"/></td>
</tr>
</c:if>
</c:forEach>
</c:otherwise>
</c:choose>
</tbody>
</table>
</section>
<div class="pagination__container">
<ui:pagination paginationInfo="${ resultMap.paginationInfo }" type="image" jsFunction="fn_select_table_data" />
</div>

View File

@@ -0,0 +1,86 @@
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="ui" uri="http://www.winbit.kr/ctl/ui" %>
<%@ taglib prefix="f" uri="/WEB-INF/tlds/f.tld" %>
<!DOCTYPE html>
<html lang="ko">
<head>
<%@include file ="/WEB-INF/views/comm/mngr/Include.jsp" %>
</head>
<script>
$(document).ready(function() {
fn_set_dateRange_function('#dataRangeBtn', 'srchStrtSndngDt','srchEndSndngDt', 'srchEndSndngDt');
fn_set_date('srchStrtSndngDt', 'srchEndSndngDt','srchEndSndngDt', '1M');
});
</script>
<body>
<%@include file ="/WEB-INF/views/comm/mngr/Header.jsp" %>
<main class="main">
<%@include file ="/WEB-INF/views/comm/mngr/Left.jsp" %>
<div class="content">
<div class="content__inner">
<div class="page-title">
<div class="dashboardTitle__left">
<h2 class="page-title__title">전자상거래 요약</h2>
<p class="dashboardTitle__subTitle">전자상거래 분석에 꼭 필요한 정보만을 요약하여 볼 수 있습니다.</p>
</div>
</div>
<section class="content-section">
<div class="table-wrapper">
<table class="table dashboardSearch">
<tbody>
<tr>
<th>결제기간</th>
<td>
<div class="td-inner">
<div class="input-container">
<input type="text" class="datepicker"
id="srchStrtSndngDt" name="srchStrtSndngDt" title="시작 날짜 선택"
autocomplete="off">
<span class="tilde">~</span>
<input type="text" class="datepicker"
id="srchEndSndngDt" name="srchEndSndngDt" title="종료 날짜 선택"
autocomplete="off">
</div>
<div class="dateRange-btnContainer" id="dataRangeBtn">
<button type="button" class="dateRange-btn" id="yesterday">어제</button>
<button type="button" class="dateRange-btn" id="today" >오늘</button>
<button type="button" class="dateRange-btn" id="threeDays">3일간</button>
<button type="button" class="dateRange-btn" id="sevenDays">일주일</button>
<button type="button" class="dateRange-btn selected" id="oneMonth">1개월</button>
<button type="button" class="dateRange-btn" id="threeMonth">3개월</button>
<button type="button" class="dateRange-btn" id="sixMonth">6개월</button>
<button type="button" class="dateRange-btn" id="year">1년</button>
</div>
<button class="btn sm primary ml-5" type="button" id="srchBtn">검색</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
<button class="scroll-to-top"><span class="visually-hidden">위로가기</span></button>
</div>
</main>
</body>
</html>

View File

@@ -0,0 +1,566 @@
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="ui" uri="http://www.winbit.kr/ctl/ui" %>
<%@ taglib prefix="f" uri="/WEB-INF/tlds/f.tld" %>
<!DOCTYPE html>
<html lang="ko">
<head>
<%@include file ="/WEB-INF/views/comm/mngr/Include.jsp" %>
</head>
<script>
$(document).ready(function() {
fn_set_dateRange_function('#dataRangeBtn', 'srchStrtSndngDt','srchEndSndngDt', 'srchEndSndngDt');
fn_set_date('srchStrtSndngDt', 'srchEndSndngDt','srchEndSndngDt', '7D');
// 차트1 조회
fn_select_chart1_data('day');
// 차트2 조회
fn_select_chart2_data('day');
// 테이블 조회
fn_select_table_data(null, null);
// 날짜 검색
$("#srchBtn").on("click", function(){
$("#chart1Day").click();
$("#chart2Day").click();
$("#tableSimple").click();
});
// 차트1
$("#chart1Day").on("click", function() {
fn_select_chart1_data('day');
});
$("#chart1Week").on("click", function() {
fn_select_chart1_data('week');
});
$("#chart1Month").on("click", function() {
fn_select_chart1_data('month');
});
// 차트2
$("#chart2Day").on("click", function() {
fn_select_chart2_data('day');
});
$("#chart2Week").on("click", function() {
fn_select_chart2_data('week');
});
$("#chart2Month").on("click", function() {
fn_select_chart2_data('month');
});
// 표
$("#tableSimple").on("click", function() {
fn_select_table_data(null, 'simple', 'dt', 'ASC');
});
$("#tableDetail").on("click", function() {
fn_select_table_data(null, 'detail', 'dt', 'ASC');
});
// 페이징 제자리 새로고침(Submit) 방지
$('body').on('click', 'button.pagination__item.active', function(event) {
event.preventDefault();
});
});
/**
* 차트1 데이터 조회
* unitFlag : 일, 주, 월 구분 값
*/
const fn_select_chart1_data = function(unitFlag) {
const srchStrtSndngDt = $("#srchStrtSndngDt").val();
const srchEndSndngDt = $("#srchEndSndngDt").val();
const srchOrdrEnvrnCds = $('input[name="srchOrdrEnvrnCds"]:checked').map(function() { return $(this).val(); }).get();
const data = {
srchStrtSndngDt : srchStrtSndngDt,
srchEndSndngDt : srchEndSndngDt,
srchOrdrEnvrnCds : srchOrdrEnvrnCds,
unitFlag : unitFlag
}
$.ajax({
type: "POST",
url : "/mngr/stats/sleAnals/selectMngrSleRsltChart1Inqire",
data : data,
success:function(resultHtml) {
// console.log('success');
let result = JSON.parse(resultHtml.resBody.result);
// console.log("result : ", result);
loadChart1(result.chartData);
fn_chart1_data_box_set(result.totalRlSetleAmt, result.totalRefundAmt, result.totalRefundAmtPercent);
}
});
}
/**
* 차트 1
*/
var chart1;
function loadChart1(data) {
var divHolder1 = document.getElementById('ChartDiv1');
// 데이터가 없는 경우
if(data == '') {
chart1 = null;
divHolder1.innerHTML = '';
return;
}
// 차트가 이미 존재하는 경우 기존 차트를 제거
if (chart1) {
chart1 = null;
divHolder1.innerHTML = '';
}
// 차트 생성
chart1 = new cfx.Chart();
chart1.setGallery(cfx.Gallery.Bar);
// 데이터 설정
chart1.setDataSource(data);
// y축 단위 설정
// chart1.getAxisY().setStep(10000000);
chart1.getSeries().getItem(0).setText("결제금액");
chart1.getSeries().getItem(1).setText("환불금액");
// 데이터 라벨 값 노출
chart1.getAllSeries().getPointLabels().setVisible(true);
// 툴 팁 표시 속도 조절
chart1.getToolTips().setInitialDelay(0);
chart1.getToolTips().setHideDelay(0);
// Y축 라벨 포맷을 Number로 지정하기(천단위 콤마 표시)
chart1.getAxisY().getLabelsFormat().setFormat(cfx.AxisFormat.Number);
chart1.create(divHolder1);
}
/**
* 차트1 데이터 상단 네모 박스 데이터 set
* totalRlSetleAmt : 결제금액
* totalRefundAmt : 환불금액
* totalRefundAmtPercent : 환불금액 비율
*/
const fn_chart1_data_box_set = function(totalRlSetleAmt, totalRefundAmt, totalRefundAmtPercent) {
// console.log(totalRlSetleAmt, totalRefundAmt, totalRefundAmtPercent);
$('#totalRlSetleAmt').text(totalRlSetleAmt.toLocaleString()); // 결제금액
$('#totalRefundAmt').text(totalRefundAmt.toLocaleString()); // 환불금액
$('#totalRefundAmtPercent').text(totalRefundAmtPercent + '%'); // 환불금액 비율
}
/**
* 차트2 데이터 조회
* unitFlag : 일, 주, 월 구분 값
*/
const fn_select_chart2_data = function(unitFlag) {
const srchStrtSndngDt = $("#srchStrtSndngDt").val();
const srchEndSndngDt = $("#srchEndSndngDt").val();
const srchOrdrEnvrnCds = $('input[name="srchOrdrEnvrnCds"]:checked').map(function() { return $(this).val(); }).get();
const data = {
srchStrtSndngDt : srchStrtSndngDt,
srchEndSndngDt : srchEndSndngDt,
srchOrdrEnvrnCds : srchOrdrEnvrnCds,
unitFlag : unitFlag
}
$.ajax({
type: "POST",
url : "/mngr/stats/sleAnals/selectMngrSleRsltChart2Inqire",
data : data,
success:function(resultHtml) {
let result = JSON.parse(resultHtml.resBody.result);
loadChart2(result);
}
});
}
/**
* 차트 2
*/
var chart2;
function loadChart2(data) {
var divHolder2 = document.getElementById('ChartDiv2');
// 데이터가 없는 경우
if(data == '') {
chart2 = null;
divHolder2.innerHTML = '';
return;
}
// 차트가 이미 존재하는 경우 기존 차트를 제거
if (chart2) {
chart2 = null;
divHolder2.innerHTML = '';
}
// 차트 생성
chart2 = new cfx.Chart();
chart2.setGallery(cfx.Gallery.Bar);
// 데이터 설정
chart2.setDataSource(data);
// y축 단위 설정
// chart2.getAxisY().setStep(100)
chart2.getSeries().getItem(0).setText("결제건수");
chart2.getSeries().getItem(1).setText("환불건수");
// 데이터 라벨 값 노출
chart2.getAllSeries().getPointLabels().setVisible(true);
// 툴 팁 표시 속도 조절
chart2.getToolTips().setInitialDelay(0);
chart2.getToolTips().setHideDelay(0);
// Y축 라벨 포맷을 Number로 지정하기(천단위 콤마 표시)
chart2.getAxisY().getLabelsFormat().setFormat(cfx.AxisFormat.Number);
chart2.create(divHolder2);
}
/**
* 테이블 데이터 조회
* pageIndex
* unitFlag
* - 간단 : 'simple'
* - 상세 : 'detail'
*
* ordrStand
* - fn_select_ordrStandMapping() 참조
*
* ordrType
* - 오름차순 : 'ASC'
* - 내림차순 : 'DESC'
*/
let PordrStand;
let TordrType;
const fn_select_table_data = function(pageIndex, unitFlag, ordrStand, ordrType) {
// console.log("fn_select_table_data()pageIndex, unitFlag : ", pageIndex, unitFlag);
const srchStrtSndngDt = $("#srchStrtSndngDt").val();
const srchEndSndngDt = $("#srchEndSndngDt").val();
const srchOrdrEnvrnCds = $('input[name="srchOrdrEnvrnCds"]:checked').map(function() { return $(this).val(); }).get();
const pageUnit = $("#pageUnit").val();
const recordCountPerPage = '10';
if(!pageIndex) {
$('#pageIndex').val(1);
} else {
$('#pageIndex').val(pageIndex);
}
const pageIndexValue = $("#pageIndex").val();
if(!unitFlag) {
if ($('#tableSimple').hasClass('selected')) {
unitFlag = 'simple';
} else if ($('#tableDetail').hasClass('selected')) {
unitFlag = 'detail';
}
}
if(!pageIndex){
if (!ordrType && PordrStand == ordrStand) {
//정렬 방식 변경 (정렬 기준 파라미터가 이전과 동일)
TordrType = (TordrType == 'ASC') ? 'DESC' : 'ASC';
}else if(!ordrType){
//정렬 방식 기본값으로 지정 (정렬 기준 변경)
TordrType = 'ASC';
}else{
//정렬 방식 초기화 (표 조회)
TordrType = ordrType;
}
if(!ordrStand){
//정렬 기준 기본값으로 지정
PordrStand = 'dt';
}else{
//정렬 기준 변경
PordrStand = ordrStand;
}
}
const data = {
srchStrtSndngDt : srchStrtSndngDt,
srchEndSndngDt : srchEndSndngDt,
srchOrdrEnvrnCds : srchOrdrEnvrnCds,
unitFlag : unitFlag,
ordrStand : PordrStand,
ordrType : TordrType,
pageIndex : pageIndexValue,
pageUnit : pageUnit,
recordCountPerPage : recordCountPerPage
}
$.ajax({
type: "POST",
url : "/mngr/stats/sleAnals/selectMngrSleRsltTableInqire",
data : data,
success:function(resultHtml) {
// console.log('success');
$('#pageDiv').empty();
$('#pageDiv').html(resultHtml);
$('.reorder_' + PordrStand).text(fn_select_ordrStandMapping()[PordrStand] + (TordrType === 'ASC' ? ' ▲' : ' ▼'));
}
});
}
/**
* 테이블 정렬 조건(행)
*/
const fn_select_ordrStandMapping = function() {
let ordrStandMapping;
if ($('#tableSimple').hasClass('selected')) {
ordrStandMapping = {
'dt':'일자',
'ordrCnt': '결제건수',
'slepricSum': '상품금액',
'goodsCouponDscntSum': '쿠폰사용금액',
'mlgDscntSum': '마일리지사용금액',
'cartCouponDscntSum': '장바구니 할인금액',
'purchsDscntSum': '복수구매 할인금액',
'evtDscntSum': '이벤트 할인금액',
'enuriDscntSum': '에누리 할인금액',
'rlDlvyAmt': '배송비',
'rlSetleAmt': '결제금액'
// ,'refundCnt': '환불건수',
// 'refundAmt': '환불금액'
};
} else if ($('#tableDetail').hasClass('selected')) {
ordrStandMapping = {
'dt':'일자',
'hr': '시간대',
'ordrCnt': '결제건수',
'slepricSum': '상품금액',
'goodsCouponDscntSum': '쿠폰사용금액',
'mlgDscntSum': '마일리지사용금액',
'cartCouponDscntSum': '장바구니 할인금액',
'purchsDscntSum': '복수구매 할인금액',
'evtDscntSum': '이벤트 할인금액',
'enuriDscntSum': '에누리 할인금액',
'rlDlvyAmt': '배송비',
'rlSetleAmt': '결제금액'
// ,'refundCnt': '환불건수',
// 'refundAmt': '환불금액'
};
}
return ordrStandMapping;
}
/**
* 엑셀 다운로드
*/
const fn_download_excel = function() {
let unitFlag = "";
if ($('#tableSimple').hasClass('selected')) {
unitFlag = 'simple';
} else if ($('#tableDetail').hasClass('selected')) {
unitFlag = 'detail';
}
$('#unitFlag').val(unitFlag);
var tempForm = $('#listForm').clone();
tempForm.append('<input type="hidden" name="ordrStand" value="' + PordrStand + '">');
tempForm.append('<input type="hidden" name="ordrType" value="' + TordrType + '">');
tempForm.attr('action', '<c:url value="/mngr/stats/sleAnals/selectMngrSleRsltExcelFileDownload"/>');
tempForm.attr('method', 'POST');
$('body').append(tempForm);
tempForm.submit();
tempForm.remove();
};
</script>
<body>
<%@include file ="/WEB-INF/views/comm/mngr/Header.jsp" %>
<main class="main">
<%@include file ="/WEB-INF/views/comm/mngr/Left.jsp" %>
<div class="content">
<div class="content__inner">
<input type="hidden" id="pageIndex" value="${ resultMap.pageIndex }"/>
<input type="hidden" id="pageUnit" value="${ resultMap.pageUnit }"/>
<div class="page-title">
<div class="dashboardTitle__left">
<h2 class="page-title__title">전자상거래 요약</h2>
<p class="dashboardTitle__subTitle">전자상거래 분석에 꼭 필요한 정보만을 요약하여 볼 수 있습니다.</p>
</div>
<div class="dashboardTitle__right">
</div>
</div>
<div class="dashboardSummary">
<div class="dashboardSummary__item">
<div>
<p class="dashboardSummary__subText">결제금액</p>
<div class="dashboardSummary__title" id="totalRlSetleAmt">
</div>
</div>
</div>
<div class="dashboardSummary__item">
<div>
<p class="dashboardSummary__subText">환불금액 비율</p>
<div class="dashboardSummary__title">
<span id="totalRefundAmt"></span>
<span id="totalRefundAmtPercent"></span>
</div>
</div>
</div>
</div>
<form id="listForm">
<section class="content-section">
<div class="table-wrapper">
<table class="table dashboardSearch">
<caption>해당 테이블에 대한 설명</caption>
<colgroup>
<col>
<col>
</colgroup>
<tbody>
<tr>
<th>결제기간</th>
<td>
<div class="td-inner">
<div class="input-container">
<input type="text" class="datepicker"
id="srchStrtSndngDt" name="srchStrtSndngDt" title="시작 날짜 선택"
autocomplete="off">
<span class="tilde">~</span>
<input type="text" class="datepicker"
id="srchEndSndngDt" name="srchEndSndngDt" title="종료 날짜 선택"
autocomplete="off">
</div>
<div class="dateRange-btnContainer" id="dataRangeBtn">
<button type="button" class="dateRange-btn" id="yesterday">어제</button>
<button></button>
<button type="button" class="dateRange-btn" id="threeDays">3일간</button>
<button type="button" class="dateRange-btn selected" id="sevenDays">일주일</button>
<button type="button" class="dateRange-btn" id="oneMonth">1개월</button>
<button type="button" class="dateRange-btn" id="threeMonth">3개월</button>
<button type="button" class="dateRange-btn" id="sixMonth">6개월</button>
<button type="button" class="dateRange-btn" id="year">1년</button>
</div>
<button class="btn sm primary ml-5" type="button" id="srchBtn">검색</button>
</div>
</td>
</tr>
<tr>
<th>주문환경</th>
<td>
<div class="td-inner">
<div class="b-checkbox-container">
<c:forEach items="${cond.ordrEnvrnDvCdList}" var="ordrEnvrnDvCd" varStatus="status">
<c:if test="${!(ordrEnvrnDvCd.cd == 'S1' || ordrEnvrnDvCd.cd == 'S2' || ordrEnvrnDvCd.cd == 'S3')}">
<label class="b-checkbox checkbox">
<input type="checkbox" name="srchOrdrEnvrnCds" value="${ordrEnvrnDvCd.cd}">
<span class="check"></span>
<span class="control-label">${ordrEnvrnDvCd.cdNm}</span>
</label>
</c:if>
</c:forEach>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="dashboardContent__wrapper">
<div class="dashboardContentTitle">
<div class="dashboardContentTitle__left">
<h3 class="content-section__title">결제금액, 환불금액</h3>
</div>
<div class="dashboardContentTitle__right">
<div class="dateRange-btnContainer">
<button class="dateRange-btn selected" id="chart1Day">일</button>
<button class="dateRange-btn" id="chart1Week">주</button>
<button class="dateRange-btn" id="chart1Month">월</button>
</div>
</div>
</div>
<div id="ChartDiv1" style="height:400px;"></div>
</div>
<div class="dashboardContent__wrapper">
<div class="dashboardContentTitle">
<div class="dashboardContentTitle__left">
<h3 class="content-section__title">결제건수, 환불건수</h3>
</div>
<div class="dashboardContentTitle__right">
<div class="dateRange-btnContainer">
<button class="dateRange-btn selected" id="chart2Day">일</button>
<button class="dateRange-btn" id="chart2Week">주</button>
<button class="dateRange-btn" id="chart2Month">월</button>
</div>
</div>
</div>
<div id="ChartDiv2" style="height:400px;"></div>
</div>
<br>
<div class="table-wrapper">
<div class="dashboardContentTitle" style="margin-bottom: 20px;">
<div class="dashboardContentTitle__left">
<div class="dateRange-btnContainer">
<button class="dateRange-btn selected" id="tableSimple">간단</button>
<button class="dateRange-btn" id="tableDetail">상세</button>
<input type="hidden" name="unitFlag" id="unitFlag" />
</div>
</div>
<div class="dashboardContentTitle__right">
<button class="btn outline sm" onclick="fn_download_excel(); return false;">
<i class="icon icon_excel"></i>
다운로드
</button>
</div>
</div>
<div id="pageDiv">
</div>
</div>
</section>
</form>
</div>
<button class="scroll-to-top"><span class="visually-hidden">위로가기</span></button>
</div>
</main>
</body>
</html>

View File

@@ -0,0 +1,81 @@
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="ui" uri="http://www.winbit.kr/ctl/ui" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<script>
$(document).ready(function() {
$('th[class^="reorder_"]').click(function() {
var className = $(this).attr('class');
var ordrStand = className.replace('reorder_', '');
fn_select_table_data(null, null, ordrStand);
});
});
</script>
<style>
th[class^="reorder_"] {
cursor: pointer;
}
</style>
<section class="content-section">
<table class="table vertical">
<caption>해당 테이블에 대한 설명</caption>
<colgroup>
<col style="width: auto;">
</colgroup>
<thead id="tableHeader">
<tr>
<th class="reorder_dt">일자</th>
<c:if test="${ not empty resultMap.resultList[0].hr }">
<th class="reorder_hr">시간대</th>
</c:if>
<th class="reorder_ordrCnt">결제건수</th>
<th class="reorder_slepricSum">상품금액</th>
<th class="reorder_goodsCouponDscntSum">쿠폰사용금액</th>
<th class="reorder_mlgDscntSum">마일리지사용금액</th>
<th class="reorder_cartCouponDscntSum">장바구니 할인금액</th>
<th class="reorder_purchsDscntSum">복수구매 할인금액</th>
<th class="reorder_evtDscntSum">이벤트 할인금액</th>
<th class="reorder_enuriDscntSum">에누리 할인금액</th>
<th class="reorder_rlDlvyAmt">배송비</th>
<th class="reorder_rlSetleAmt">결제금액</th>
</tr>
</thead>
<tbody id="tableBody">
<c:if test="${ empty resultMap.resultList }">
<tr>
<td class="row-no-data" colspan="20">조회된 데이터가 없습니다.</td>
</tr>
</c:if>
<c:forEach items="${ resultMap.resultList }" var="list" varStatus="status">
<tr>
<td>${ list.dt }</td>
<c:if test="${ not empty resultMap.resultList[0].hr }">
<td>${ list.hr }</td>
</c:if>
<td>${ list.ordrCnt }</td>
<td><fmt:formatNumber value="${ list.slepricSum }" pattern="#,###"/></td>
<td><fmt:formatNumber value="${ list.goodsCouponDscntSum }" pattern="#,###"/></td>
<td><fmt:formatNumber value="${ list.mlgDscntSum }" pattern="#,###"/></td>
<td><fmt:formatNumber value="${ list.cartCouponDscntSum }" pattern="#,###"/></td>
<td><fmt:formatNumber value="${ list.purchsDscntSum }" pattern="#,###"/></td>
<td><fmt:formatNumber value="${ list.evtDscntSum }" pattern="#,###"/></td>
<td><fmt:formatNumber value="${ list.enuriDscntSum }" pattern="#,###"/></td>
<td><fmt:formatNumber value="${ list.rlDlvyAmt }" pattern="#,###"/></td>
<td><fmt:formatNumber value="${ list.rlSetleAmt }" pattern="#,###"/></td>
</tr>
</c:forEach>
</tbody>
</table>
</section>
<div class="pagination__container">
<ui:pagination paginationInfo="${ resultMap.paginationInfo }" type="image" jsFunction="fn_select_table_data" />
</div>