524 lines
16 KiB
Plaintext
524 lines
16 KiB
Plaintext
<%@ 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> |