1072 lines
34 KiB
Plaintext
1072 lines
34 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_yesterday();
|
|
|
|
// 차트1 조회
|
|
fn_select_chart1_data('day');
|
|
// 차트2 조회
|
|
fn_select_chart2_data('day');
|
|
|
|
$("#srchBtn").on("click", function(){
|
|
$("#chart1Day").click();
|
|
$("#chart2Day").click();
|
|
});
|
|
|
|
$("#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');
|
|
});
|
|
|
|
|
|
$("#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');
|
|
});
|
|
|
|
});
|
|
|
|
|
|
/**
|
|
* 차트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();
|
|
|
|
$.ajax({
|
|
type: "post",
|
|
url : "/mngr/selectMngrMainChart1Inqire",
|
|
data : {
|
|
srchStrtSndngDt : srchStrtSndngDt,
|
|
srchEndSndngDt : srchEndSndngDt,
|
|
srchOrdrEnvrnCds : srchOrdrEnvrnCds,
|
|
unitFlag : unitFlag
|
|
},
|
|
success:function(resultHtml) {
|
|
let result = JSON.parse(resultHtml.resBody.result);
|
|
|
|
loadChart1(result);
|
|
}
|
|
});
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
/**
|
|
* 차트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();
|
|
|
|
$.ajax({
|
|
type: "post",
|
|
url : "/mngr/selectMngrMainChart2Inqire",
|
|
data : {
|
|
srchStrtSndngDt : srchStrtSndngDt,
|
|
srchEndSndngDt : srchEndSndngDt,
|
|
srchOrdrEnvrnCds : srchOrdrEnvrnCds,
|
|
unitFlag : unitFlag
|
|
},
|
|
success:function(resultHtml) {
|
|
let result = JSON.parse(resultHtml.resBody.result);
|
|
loadChart2(result);
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
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(1000)// 천
|
|
|
|
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);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// var chart1;
|
|
// function loadChart1()
|
|
// {
|
|
// chart1 = new cfx.Chart();
|
|
// chart1.getAxisY().setMin(0);
|
|
|
|
// const data1 = fn_get_chart1_data_daliy();
|
|
// var maxItem = data1.map(item => Math.max(item.setlePrice, item.rtnPrice));
|
|
// chart1.getAxisY().setMax(Math.max(...maxItem));
|
|
// chart1.getAllSeries().setGallery(cfx.Gallery.Bar);
|
|
|
|
|
|
|
|
// const legendBox = chart1.getLegendBox();
|
|
// legendBox.setDock(cfx.DockArea.Bottom);
|
|
// legendBox.setContentLayout(cfx.ContentLayout.Center);
|
|
|
|
// chart1.setDataSource(data1);
|
|
|
|
// chart1.getSeries().getItem(0).setText("결제금액");
|
|
// chart1.getSeries().getItem(1).setText("반환금액");
|
|
// var divHolder1 = document.getElementById('ChartDiv1');
|
|
// chart1.create(divHolder1);
|
|
// }
|
|
|
|
/***************************
|
|
* 차트 수정
|
|
* ************************/
|
|
// const fn_update_chart1 = function(data) {
|
|
// const chartData = chart1.getData();
|
|
// chartData.clear();
|
|
// var maxItem = data.map(item => Math.max(item.setlePrice, item.rtnPrice));
|
|
// chart1.getAxisY().setMax(Math.max(...maxItem));
|
|
// chart1.setDataSource(data);
|
|
// chart1.getSeries().getItem(0).setText("결제금액");
|
|
// chart1.getSeries().getItem(1).setText("반환금액");
|
|
// }
|
|
|
|
|
|
|
|
// function getRandomInt(min, max) {
|
|
// return Math.floor(Math.random() * (max - min + 1)) + min;
|
|
// }
|
|
|
|
// const fn_get_chart1_data_daliy = function(){
|
|
// var dataList = [];
|
|
// const srchStrtSndngDt = $("#srchStrtSndngDt").val();
|
|
// const srchEndSndngDt = $("#srchEndSndngDt").val();
|
|
// var startDate = new Date(srchStrtSndngDt);
|
|
// var endDate = new Date(srchEndSndngDt);
|
|
|
|
// while (startDate <= endDate) {
|
|
// var year = startDate.getFullYear();
|
|
// var month = ("0" + (startDate.getMonth() + 1)).slice(-2); // Add leading zero to month
|
|
// var day = ("0" + startDate.getDate()).slice(-2); // Add leading zero to day
|
|
// var formattedDate = `\${year}-\${month}-\${day}`;
|
|
|
|
// var setlePrice = getRandomInt(100000, 500000); // Random price between 100,000 and 500,000
|
|
// var rtnPrice = getRandomInt(1000, 50000); // Random return price between 1,000 and 50,000
|
|
|
|
// dataList.push({
|
|
// date: formattedDate,
|
|
// setlePrice: setlePrice,
|
|
// rtnPrice: rtnPrice
|
|
// });
|
|
|
|
// // console.log('formattedDate : ', formattedDate);
|
|
// // console.log('setlePrice : ', setlePrice);
|
|
// // console.log('rtnPrice : ', rtnPrice);
|
|
|
|
// // console.log(dataList);
|
|
|
|
// // Move to the next day
|
|
// startDate.setDate(startDate.getDate() + 1);
|
|
// }
|
|
|
|
// return dataList;
|
|
// }
|
|
|
|
// const fn_get_chart1_data_daliyttt = function(){
|
|
// var dataList = [];
|
|
// const srchStrtSndngDt = $("#srchStrtSndngDt").val();
|
|
// const srchEndSndngDt = $("#srchEndSndngDt").val();
|
|
|
|
// var startDate = new Date(srchStrtSndngDt);
|
|
// var endDate = new Date(srchEndSndngDt);
|
|
|
|
// while (startDate <= endDate) {
|
|
// var year = startDate.getFullYear();
|
|
// var month = ("0" + (startDate.getMonth() + 1)).slice(-2); // Add leading zero to month
|
|
// var day = ("0" + startDate.getDate()).slice(-2); // Add leading zero to day
|
|
// var formattedDate = `\${year}-\${month}-\${day}`;
|
|
|
|
// // 한국어 형식으로 날짜 포맷
|
|
// var formattedStartDate = startDate.toLocaleDateString('ko-KR', {
|
|
// year: 'numeric',
|
|
// month: 'long',
|
|
// day: 'numeric'
|
|
// });
|
|
|
|
// console.log(formattedStartDate)
|
|
|
|
// var setlePrice = getRandomInt(100000, 500000); // Random price between 100,000 and 500,000
|
|
// var rtnPrice = getRandomInt(1000, 50000); // Random return price between 1,000 and 50,000
|
|
|
|
// dataList.push({
|
|
// date: formattedStartDate,
|
|
// setlePrice: setlePrice,
|
|
// rtnPrice: rtnPrice
|
|
// });
|
|
|
|
// // Move to the next day
|
|
// startDate.setDate(startDate.getDate() + 1);
|
|
// }
|
|
|
|
// return dataList;
|
|
// }
|
|
|
|
|
|
// const fn_get_chart1_data_weekly = function(){
|
|
// var dataList = [];
|
|
// const srchStrtSndngDt = $("#srchStrtSndngDt").val();
|
|
// const srchEndSndngDt = $("#srchEndSndngDt").val();
|
|
// var startDate = new Date(srchStrtSndngDt);
|
|
// var endDate = new Date(srchEndSndngDt);
|
|
// while (startDate <= endDate) {
|
|
// var year = startDate.getFullYear();
|
|
// var month = ("0" + (startDate.getMonth() + 1)).slice(-2); // Add leading zero to month
|
|
// var day = ("0" + startDate.getDate()).slice(-2); // Add leading zero to day
|
|
// var formattedDate = `\${year}-\${month}-\${day}`;
|
|
|
|
// var setlePrice = getRandomInt(100000, 500000); // Random price between 100,000 and 500,000
|
|
// var rtnPrice = getRandomInt(1000, 50000); // Random return price between 1,000 and 50,000
|
|
|
|
// dataList.push({
|
|
// date: formattedDate,
|
|
// setlePrice: setlePrice,
|
|
// rtnPrice: rtnPrice
|
|
// });
|
|
|
|
// // Move to the next day
|
|
// startDate.setDate(startDate.getDate() + 7);
|
|
// }
|
|
|
|
// return dataList;
|
|
// }
|
|
|
|
|
|
// const fn_get_chart1_data_monthly = function(){
|
|
// var dataList = [];
|
|
// const srchStrtSndngDt = $("#srchStrtSndngDt").val();
|
|
// const srchEndSndngDt = $("#srchEndSndngDt").val();
|
|
// var startDate = new Date(srchStrtSndngDt);
|
|
// var endDate = new Date(srchEndSndngDt);
|
|
// while (startDate <= endDate) {
|
|
// var year = startDate.getFullYear();
|
|
// var month = ("0" + (startDate.getMonth() + 1)).slice(-2); // Add leading zero to month
|
|
// var day = ("0" + startDate.getDate()).slice(-2); // Add leading zero to day
|
|
// var formattedDate = `\${year}-\${month}-\${day}`;
|
|
|
|
// var setlePrice = getRandomInt(100000, 500000); // Random price between 100,000 and 500,000
|
|
// var rtnPrice = getRandomInt(1000, 50000); // Random return price between 1,000 and 50,000
|
|
|
|
// dataList.push({
|
|
// date: formattedDate,
|
|
// setlePrice: setlePrice,
|
|
// rtnPrice: rtnPrice
|
|
// });
|
|
|
|
// // Move to the next day
|
|
// startDate.setMonth(startDate.getMonth() + 1);
|
|
// }
|
|
|
|
// return dataList;
|
|
// }
|
|
|
|
// const fn_get_chart1_data_monthlyttt = function(){
|
|
// var dataList = [];
|
|
// const srchStrtSndngDt = $("#srchStrtSndngDt").val();
|
|
// const srchEndSndngDt = $("#srchEndSndngDt").val();
|
|
|
|
// var startDate = new Date(srchStrtSndngDt);
|
|
// var endDate = new Date(srchEndSndngDt);
|
|
|
|
// while (startDate <= endDate) {
|
|
// var year = startDate.getFullYear();
|
|
// var month = ("0" + (startDate.getMonth() + 1)).slice(-2); // Add leading zero to month
|
|
// var day = ("0" + startDate.getDate()).slice(-2); // Add leading zero to day
|
|
// var formattedDate = `\${year}-\${month}-\${day}`;
|
|
|
|
// // 한국어 형식으로 날짜 포맷
|
|
// var formattedStartDate = startDate.toLocaleDateString('ko-KR', {
|
|
// year: 'numeric',
|
|
// month: 'long',
|
|
|
|
// });
|
|
|
|
// console.log(formattedStartDate)
|
|
|
|
// var setlePrice = getRandomInt(100000, 500000); // Random price between 100,000 and 500,000
|
|
// var rtnPrice = getRandomInt(1000, 50000); // Random return price between 1,000 and 50,000
|
|
|
|
// dataList.push({
|
|
// date: formattedStartDate,
|
|
// setlePrice: setlePrice,
|
|
// rtnPrice: rtnPrice
|
|
// });
|
|
|
|
// // Move to the next day
|
|
// startDate.setMonth(startDate.getMonth() + 1);
|
|
// }
|
|
|
|
// return dataList;
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// var chart2;
|
|
// function loadChart2()
|
|
// {
|
|
|
|
// chart2 = new cfx.Chart();
|
|
// chart2.getData().setSeries(30);
|
|
// chart2.getAxisY().setMin(0);
|
|
// chart2.getAxisY().setMax(1000);
|
|
|
|
// const data2 = fn_get_chart2_data_daliy();
|
|
// var maxItem = data2.map(item => Math.max(item.flowCnt, item.setleCnt));
|
|
// chart2.getAxisY().setMax(Math.max(...maxItem));
|
|
// chart2.getAllSeries().setGallery(cfx.Gallery.Bar);
|
|
|
|
// const legendBox = chart2.getLegendBox();
|
|
// legendBox.setDock(cfx.DockArea.Bottom);
|
|
// legendBox.setContentLayout(cfx.ContentLayout.Center);
|
|
|
|
// chart2.setDataSource(data2);
|
|
// chart2.getSeries().getItem(0).setText("유입수");
|
|
// chart2.getSeries().getItem(1).setText("결제수");
|
|
// var divHolder2 = document.getElementById('ChartDiv2');
|
|
// chart2.create(divHolder2);
|
|
// }
|
|
|
|
|
|
/***************************
|
|
* 차트 수정
|
|
* ************************/
|
|
// const fn_update_chart2 = function(data) {
|
|
// const chartData = chart2.getData();
|
|
// chartData.clear();
|
|
// var maxItem = data.map(item => Math.max(item.flowCnt, item.setleCnt));
|
|
// chart2.getAxisY().setMax(Math.max(...maxItem));
|
|
// chart2.setDataSource(data);
|
|
// chart2.getSeries().getItem(0).setText("유입수");
|
|
// chart2.getSeries().getItem(1).setText("결제수");
|
|
// }
|
|
|
|
|
|
|
|
// const fn_get_chart2_data_daliy = function(){
|
|
// var dataList = [];
|
|
// const srchStrtSndngDt = $("#srchStrtSndngDt").val();
|
|
// const srchEndSndngDt = $("#srchEndSndngDt").val();
|
|
// var startDate = new Date(srchStrtSndngDt);
|
|
// var endDate = new Date(srchEndSndngDt);
|
|
// while (startDate <= endDate) {
|
|
// var year = startDate.getFullYear();
|
|
// var month = ("0" + (startDate.getMonth() + 1)).slice(-2); // Add leading zero to month
|
|
// var day = ("0" + startDate.getDate()).slice(-2); // Add leading zero to day
|
|
// var formattedDate = `\${year}-\${month}-\${day}`;
|
|
|
|
// var flowCnt = getRandomInt(10000, 50000); // Random price between 100,000 and 500,000
|
|
// var setleCnt = getRandomInt(100, 5000); // Random return price between 1,000 and 50,000
|
|
|
|
// dataList.push({
|
|
// date: formattedDate,
|
|
// flowCnt: flowCnt,
|
|
// setleCnt: setleCnt
|
|
// });
|
|
|
|
// // Move to the next day
|
|
// startDate.setDate(startDate.getDate() + 1);
|
|
// }
|
|
|
|
// return dataList;
|
|
// }
|
|
|
|
|
|
// const fn_get_chart2_data_weekly = function(){
|
|
// var dataList = [];
|
|
// const srchStrtSndngDt = $("#srchStrtSndngDt").val();
|
|
// const srchEndSndngDt = $("#srchEndSndngDt").val();
|
|
// var startDate = new Date(srchStrtSndngDt);
|
|
// var endDate = new Date(srchEndSndngDt);
|
|
// while (startDate <= endDate) {
|
|
// var year = startDate.getFullYear();
|
|
// var month = ("0" + (startDate.getMonth() + 1)).slice(-2); // Add leading zero to month
|
|
// var day = ("0" + startDate.getDate()).slice(-2); // Add leading zero to day
|
|
// var formattedDate = `\${year}-\${month}-\${day}`;
|
|
|
|
// var flowCnt = getRandomInt(10000, 50000); // Random price between 100,000 and 500,000
|
|
// var setleCnt = getRandomInt(100, 5000); // Random return price between 1,000 and 50,000
|
|
|
|
// dataList.push({
|
|
// date: formattedDate,
|
|
// flowCnt: flowCnt,
|
|
// setleCnt: setleCnt
|
|
// });
|
|
|
|
// // Move to the next day
|
|
// startDate.setDate(startDate.getDate() + 7);
|
|
// }
|
|
|
|
// return dataList;
|
|
// }
|
|
|
|
// const fn_get_chart2_data_monthly = function(){
|
|
// var dataList = [];
|
|
// const srchStrtSndngDt = $("#srchStrtSndngDt").val();
|
|
// const srchEndSndngDt = $("#srchEndSndngDt").val();
|
|
// var startDate = new Date(srchStrtSndngDt);
|
|
// var endDate = new Date(srchEndSndngDt);
|
|
// while (startDate <= endDate) {
|
|
// var year = startDate.getFullYear();
|
|
// var month = ("0" + (startDate.getMonth() + 1)).slice(-2); // Add leading zero to month
|
|
// var day = ("0" + startDate.getDate()).slice(-2); // Add leading zero to day
|
|
// var formattedDate = `\${year}-\${month}-\${day}`;
|
|
|
|
// var flowCnt = getRandomInt(10000, 50000); // Random price between 100,000 and 500,000
|
|
// var setleCnt = getRandomInt(100, 5000); // Random return price between 1,000 and 50,000
|
|
|
|
// dataList.push({
|
|
// date: formattedDate,
|
|
// flowCnt: flowCnt,
|
|
// setleCnt: setleCnt
|
|
// });
|
|
|
|
// // Move to the next day
|
|
// startDate.setMonth(startDate.getMonth() + 1);
|
|
// }
|
|
|
|
// return dataList;
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//어제 날짜 표출
|
|
const fn_yesterday = function (){
|
|
// 현재 날짜 가져오기
|
|
var currentDate = new Date();
|
|
|
|
// 하루 빼기
|
|
currentDate.setDate(currentDate.getDate() - 1);
|
|
|
|
// 날짜 형식 지정 (YYYY-MM-DD)
|
|
const year = currentDate.getFullYear();
|
|
const month = ("0" + (currentDate.getMonth() + 1)).slice(-2);
|
|
const day = ("0" + currentDate.getDate()).slice(-2);
|
|
|
|
// 요일
|
|
const daysOfWeekArr = ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'];
|
|
|
|
const dayOfWeek = daysOfWeekArr[currentDate.getDay()];
|
|
// 형식화된 날짜 생성
|
|
const yesterday = year + '.' + month + '.' + day + ' (' + dayOfWeek + ')';
|
|
|
|
// jQuery로 날짜 표출
|
|
$('#yesterdayDate').text(yesterday);
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
<body>
|
|
<%@include file ="/WEB-INF/views/comm/mngr/Header.jsp" %>
|
|
<main class="main">
|
|
<%@include file ="/WEB-INF/views/comm/mngr/Left.jsp" %>
|
|
<c:set var="mainList" value="${resultMap.mainList}" />
|
|
<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 class="dashboardTitle__right">
|
|
<div id="yesterdayDate">
|
|
<%-- <button class="dashboardDate__btn prev"><span class="visually-hidden">이전</span></button>--%>
|
|
<%-- <div class="dashboardDate__date">2023.07.07.~2023.07.20. (지난14일 ,14일)</div>--%>
|
|
<%-- <button class="dashboardDate__btn next"><span class="visually-hidden">다음</span></button>--%>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dashboardSummary">
|
|
<div class="dashboardSummary__item">
|
|
<div>
|
|
<p class="dashboardSummary__subText">어제 결제 금액</p>
|
|
<div class="dashboardSummary__title">
|
|
<c:choose>
|
|
<c:when test="${mainList.rlSetleAmt == null}">
|
|
0
|
|
</c:when>
|
|
<c:otherwise>
|
|
<fmt:formatNumber value="${mainList.rlSetleAmt}" pattern="#,##0" />원
|
|
</c:otherwise>
|
|
</c:choose>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dashboardSummary__item">
|
|
<div>
|
|
<p class="dashboardSummary__subText">어제 결제 건수</p>
|
|
<div class="dashboardSummary__title">
|
|
<c:choose>
|
|
<c:when test="${mainList.ordrCnt == null}">
|
|
0
|
|
</c:when>
|
|
<c:otherwise>
|
|
${mainList.ordrCnt}
|
|
</c:otherwise>
|
|
</c:choose>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dashboardSummary__item">
|
|
<div>
|
|
<p class="dashboardSummary__subText">어제 환불 금액</p>
|
|
<div class="dashboardSummary__title">
|
|
<c:choose>
|
|
<c:when test="${mainList.refundAmt == null}">
|
|
0
|
|
</c:when>
|
|
<c:otherwise>
|
|
<fmt:formatNumber value="${mainList.refundAmt}" pattern="#,##0" />원
|
|
</c:otherwise>
|
|
</c:choose>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dashboardSummary__item">
|
|
<div>
|
|
<p class="dashboardSummary__subText">어제 환불 건수</p>
|
|
<div class="dashboardSummary__title">
|
|
<span class="comma">
|
|
<c:choose>
|
|
<c:when test="${mainList.refundCnt == null}">
|
|
0
|
|
</c:when>
|
|
<c:otherwise>
|
|
${mainList.refundCnt}
|
|
</c:otherwise>
|
|
</c:choose>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dashboardSummary__item">
|
|
<div>
|
|
<p class="dashboardSummary__subText">어제 유입수</p>
|
|
<div class="dashboardSummary__title">
|
|
<c:choose>
|
|
<c:when test="${mainList.accessUserCnt == null}">
|
|
0
|
|
</c:when>
|
|
<c:otherwise>
|
|
${mainList.accessUserCnt}
|
|
</c:otherwise>
|
|
</c:choose>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dashboardSummary__item">
|
|
<div>
|
|
<p class="dashboardSummary__subText">어제 유입당 결제율</p>
|
|
<div class="dashboardSummary__title">
|
|
<c:choose>
|
|
<c:when test="${mainList.accessUserPercent == 0}">
|
|
0%
|
|
</c:when>
|
|
<c:otherwise>
|
|
<fmt:formatNumber value="${mainList.accessUserPercent}" pattern="#,##0.00" />%
|
|
</c:otherwise>
|
|
</c:choose>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
<%-- <button type="button" class="dateRange-btn" id="allDays">전체</button>--%>
|
|
<%-- <button class="dateRange-btn">어제</button>--%>
|
|
<%-- <button class="dateRange-btn">오늘</button>--%>
|
|
<%-- <button class="dateRange-btn">3일간</button>--%>
|
|
<%-- <button class="dateRange-btn">일주일</button>--%>
|
|
<%-- <button class="dateRange-btn">1개월</button>--%>
|
|
<%-- <button class="dateRange-btn">3개월</button>--%>
|
|
<%-- <button class="dateRange-btn">6개월</button>--%>
|
|
<%-- <button class="dateRange-btn selected">전체</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="${resultMap.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>
|
|
<!-- <p class="dashboardContentTitle__subTitle">setlePrice을 일별로 살펴볼 수 있으며, 7일 평균 차트를 통해 setlePrice 트렌드를 살펴볼 수
|
|
있습니다.</p> -->
|
|
</div>
|
|
<div class="dashboardContentTitle__right">
|
|
<!-- <div class="dashboardDate">
|
|
<button class="dashboardDate__btn prev"><span class="visually-hidden">이전</span></button>
|
|
<div class="dashboardDate__date">2023.07.07.~2023.07.20. (지난14일 ,14일)</div>
|
|
<button class="dashboardDate__btn next"><span class="visually-hidden">다음</span></button>
|
|
</div> -->
|
|
<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>
|
|
<!-- <p class="dashboardContentTitle__subTitle">setlePrice을 일별로 살펴볼 수 있으며, 7일 평균 차트를 통해 setlePrice 트렌드를 살펴볼 수
|
|
있습니다.</p> -->
|
|
</div>
|
|
<div class="dashboardContentTitle__right">
|
|
<!-- <div class="dashboardDate">
|
|
<button class="dashboardDate__btn prev"><span class="visually-hidden">이전</span></button>
|
|
<div class="dashboardDate__date">2023.07.07.~2023.07.20. (지난14일 ,14일)</div>
|
|
<button class="dashboardDate__btn next"><span class="visually-hidden">다음</span></button>
|
|
</div> -->
|
|
<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>
|
|
|
|
|
|
</section>
|
|
</div>
|
|
<button class="scroll-to-top"><span class="visually-hidden">위로가기</span></button>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- 헤더 팝업(빠른검색 ,메모, 알림등) -->
|
|
|
|
<!-- 빠른 검색 -->
|
|
<div id="quick-search-info" class="modal" style="max-width: 840px;">
|
|
<div class="modal-header">
|
|
<h4>빠른 검색</h4>
|
|
</div>
|
|
<div class="modal-content">
|
|
<p class="text-center fw-500 mb-10">아래의 정의된 검색어로 빠르게 검색하세요</p>
|
|
<div class="table-wrapper">
|
|
<table class="table vertical">
|
|
<caption>해당 테이블에 대한 설명</caption>
|
|
<!-- 각 열 width 설정 -->
|
|
<colgroup>
|
|
</colgroup>
|
|
<thead>
|
|
<tr>
|
|
<th>주문 → 주문리스트</th>
|
|
<th>출고 → 출고리스트</th>
|
|
<th>상품 → 실물 배송 상품</th>
|
|
<th>티켓 → 티켓 발송 상품</th>
|
|
<th>회원 → 회원리스트</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="text-left v-align-top">
|
|
<ul class="header__quick-search-list">
|
|
<li>주문자</li>
|
|
<li>수령자</li>
|
|
<li>입금자</li>
|
|
<li>아이디</li>
|
|
<li>이메일</li>
|
|
<li>휴대폰</li>
|
|
<li>상품명</li>
|
|
<li>상품 고유값</li>
|
|
<li>상품코드</li>
|
|
<li>사은품</li>
|
|
<li>운송장번호</li>
|
|
<li>주문번호</li>
|
|
<li>출고번호</li>
|
|
<li>반품번호</li>
|
|
<li>환불번호</li>
|
|
</ul>
|
|
</td>
|
|
<td class="text-left v-align-top">
|
|
<ul class="header__quick-search-list">
|
|
<li>주문자</li>
|
|
<li>수령자</li>
|
|
<li>입금자</li>
|
|
<li>아이디</li>
|
|
<li>이메일</li>
|
|
<li>휴대폰</li>
|
|
<li>상품명</li>
|
|
<li>상품 고유값</li>
|
|
<li>상품코드</li>
|
|
<li>사은품</li>
|
|
<li>운송장번호</li>
|
|
<li>주문번호</li>
|
|
<li>출고번호</li>
|
|
<li>반품번호</li>
|
|
<li>환불번호</li>
|
|
</ul>
|
|
</td>
|
|
<td class="text-left v-align-top">
|
|
<ul class="header__quick-search-list">
|
|
<li>상품명</li>
|
|
<li>상품 고유값</li>
|
|
<li>상품코드</li>
|
|
<li>태그</li>
|
|
<li>간략설명</li>
|
|
</ul>
|
|
</td>
|
|
<td class="text-left v-align-top">
|
|
<ul class="header__quick-search-list">
|
|
<li>상품명</li>
|
|
<li>상품 고유값</li>
|
|
<li>상품코드</li>
|
|
<li>태그</li>
|
|
<li>간략설명</li>
|
|
</ul>
|
|
</td>
|
|
<td class="text-left v-align-top">
|
|
<ul class="header__quick-search-list">
|
|
<li>아이디</li>
|
|
<li>회원명</li>
|
|
<li>닉네임</li>
|
|
<li>이메일</li>
|
|
<li>주소</li>
|
|
<li>전화번호</li>
|
|
<li>핸드폰</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 알림 팝업 -->
|
|
<div id="notification-list-pop" class="modal" style="max-width: 840px;">
|
|
<div class="modal-header">
|
|
<h4>알림</h4>
|
|
</div>
|
|
<div class="modal-content">
|
|
<div class="table-wrapper">
|
|
<table class="table">
|
|
<caption>해당 테이블에 대한 설명</caption>
|
|
<colgroup>
|
|
<col style="width: 12%;">
|
|
<col>
|
|
<col style="width: 12%;">
|
|
<col>
|
|
</colgroup>
|
|
<tr>
|
|
<th>검색어</th>
|
|
<td colspan="3">
|
|
<div class="td-inner">
|
|
<input class="input-text xl" type="text" title="해당 인풋에 대한 설명">
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>행위일시</th>
|
|
<td colspan="3">
|
|
<div class="td-inner">
|
|
<div class="input-container">
|
|
<input type="text" id="datepicker_3" class="datepicker" title="시작 날짜 선택"
|
|
autocomplete="off">
|
|
<span class="tilde">~</span>
|
|
<input type="text" id="datepicker_4" class="datepicker" title="종료 날짜 선택"
|
|
autocomplete="off">
|
|
</div>
|
|
<div class="dateRange-btnContainer">
|
|
<button class="dateRange-btn">어제</button>
|
|
<button class="dateRange-btn">오늘</button>
|
|
<button class="dateRange-btn">3일간</button>
|
|
<button class="dateRange-btn">일주일</button>
|
|
<button class="dateRange-btn">1개월</button>
|
|
<button class="dateRange-btn">3개월</button>
|
|
<button class="dateRange-btn">6개월</button>
|
|
<button class="dateRange-btn selected">전체</button>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="form-control-container mb-40">
|
|
<div class="left"></div>
|
|
<div class="center">
|
|
<button class="btn outline">초기화</button>
|
|
<button class="btn primary">검색</button>
|
|
</div>
|
|
</div>
|
|
<div class="form-control-container">
|
|
<div class="left">
|
|
<div class="search-number">
|
|
<span class="search-number__text">총 <strong>22</strong>건 <span>(진행 중 <em>1</em>, 종료
|
|
<em>21</em>)</span></span>
|
|
</div>
|
|
</div>
|
|
<div class="center">
|
|
</div>
|
|
<div class="right">
|
|
</div>
|
|
</div>
|
|
<hr class="spacing">
|
|
<div class="table-wrapper">
|
|
<table class="table vertical tight">
|
|
<caption>해당 테이블에 대한 설명</caption>
|
|
<!-- 각 열 width 설정 -->
|
|
<colgroup>
|
|
<col style="width: 20%;">
|
|
<col style="width: 17%;">
|
|
<col style="width: 17%">
|
|
<col style="width: auto;">
|
|
</colgroup>
|
|
<thead>
|
|
<tr>
|
|
<th>행위일시</th>
|
|
<th>행위자</th>
|
|
<th>IP</th>
|
|
<th>내용</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>2017-01-20 15:50:30 </td>
|
|
<td>관리자(gson)</td>
|
|
<td>106.246.242.226 </td>
|
|
<td class="text-left">무통장입금계좌저장</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2017-01-20 15:50:30 </td>
|
|
<td>관리자(gson)</td>
|
|
<td>106.246.242.226 </td>
|
|
<td class="text-left">무통장입금계좌저장</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2017-01-20 15:50:30 </td>
|
|
<td>관리자(gson)</td>
|
|
<td>106.246.242.226 </td>
|
|
<td class="text-left">무통장입금계좌저장</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2017-01-20 15:50:30 </td>
|
|
<td>관리자(gson)</td>
|
|
<td>106.246.242.226 </td>
|
|
<td class="text-left">무통장입금계좌저장</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2017-01-20 15:50:30 </td>
|
|
<td>관리자(gson)</td>
|
|
<td>106.246.242.226 </td>
|
|
<td class="text-left">무통장입금계좌저장</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2017-01-20 15:50:30 </td>
|
|
<td>관리자(gson)</td>
|
|
<td>106.246.242.226 </td>
|
|
<td class="text-left">무통장입금계좌저장</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2017-01-20 15:50:30 </td>
|
|
<td>관리자(gson)</td>
|
|
<td>106.246.242.226 </td>
|
|
<td class="text-left">무통장입금계좌저장</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="pagination__container">
|
|
<div class="pagination">
|
|
<button disabled="" class="pagination__item first"><span class="visually-hidden">첫
|
|
페이지로</span></button>
|
|
<button disabled="" class="pagination__item prev"><span class="visually-hidden">이전
|
|
페이지로</span></button>
|
|
<ol class="pagination__number-group">
|
|
<li><button class="pagination__item active"><span>1</span></button></li>
|
|
<li><button class="pagination__item"><span>2</span></button></li>
|
|
<li><button class="pagination__item"><span>3</span></button></li>
|
|
<li><button class="pagination__item"><span>4</span></button></li>
|
|
<li><button class="pagination__item"><span>5</span></button></li>
|
|
<li><button class="pagination__item"><span>6</span></button></li>
|
|
<li><button class="pagination__item"><span>7</span></button></li>
|
|
<li><button class="pagination__item"><span>8</span></button></li>
|
|
<li><button class="pagination__item"><span>9</span></button></li>
|
|
<li><button class="pagination__item"><span>10</span></button></li>
|
|
</ol>
|
|
<button class="pagination__item next"><span class="visually-hidden">다음 페이지로</span></button>
|
|
<button class="pagination__item last"><span class="visually-hidden">마지막 페이지로</span></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<a href="#" rel="modal:close" class="btn outline">닫기</a>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |