초기소스
This commit is contained in:
@@ -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>
|
||||
@@ -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>
|
||||
662
src/main/webapp/WEB-INF/views/mngr/stats/sleAnals/goodsRslt.jsp
Normal file
662
src/main/webapp/WEB-INF/views/mngr/stats/sleAnals/goodsRslt.jsp
Normal 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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
566
src/main/webapp/WEB-INF/views/mngr/stats/sleAnals/sleRslt.jsp
Normal file
566
src/main/webapp/WEB-INF/views/mngr/stats/sleAnals/sleRslt.jsp
Normal 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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user