Files
sake/src/main/webapp/WEB-INF/views/mngr/index.jsp
2025-10-29 17:08:05 +09:00

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>