237 lines
10 KiB
Plaintext
237 lines
10 KiB
Plaintext
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
|
<%@ page import="java.util.Date" %>
|
|
<%@ 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"%>
|
|
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
|
|
|
|
|
|
<%--
|
|
Class Name : StrSelngR.jsp
|
|
Description : 매장 매출 조회 화면
|
|
Modification Information
|
|
|
|
수정일 수정자 수정내용
|
|
------- -------- ---------------------------
|
|
2024-03-19 이운산 최초 생성(퍼블리싱 적용)
|
|
--%>
|
|
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<%-- 공통 include --%>
|
|
<%@ include file="/WEB-INF/views/comm/itrnt/Include.jsp"%>
|
|
|
|
<script>
|
|
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<%@ include file="/WEB-INF/views/comm/itrnt/Header.jsp"%>
|
|
<main class="main">
|
|
<%@ include file="/WEB-INF/views/comm/itrnt/Left.jsp"%>
|
|
<div class="content">
|
|
<div class="content__inner">
|
|
<button class="side-nav__fold"><span class="visually-hidden">좌측메뉴 펼치기/닫기</span></button>
|
|
<div class="page-title">
|
|
<h2 class="page-title__title">매장별 매출</h2>
|
|
<div class="page-title__btn-container">
|
|
</div>
|
|
</div>
|
|
<section class="content-section">
|
|
<form>
|
|
<div class="table-wrapper">
|
|
<table class="table">
|
|
<caption>해당 테이블에 대한 설명</caption>
|
|
<colgroup>
|
|
<col style="width: 12%;">
|
|
<col style="width: 38%;">
|
|
<col style="width: 12%;">
|
|
<col style="width: 38%;">
|
|
</colgroup>
|
|
<tbody>
|
|
<tr>
|
|
<th>검색어</th>
|
|
<td>
|
|
<div class="td-inner">
|
|
<div class="select-box">
|
|
<select class="md" title="해당 셀렉트에 대한 설명">
|
|
<option value="" disabled selected>매장 선택</option>
|
|
<option value="">뉴트리코어 화명점</option>
|
|
</select>
|
|
</div><input class="input-text md" type="text" title="해당 인풋에 대한 설명"
|
|
placeholder="">
|
|
</div>
|
|
</td>
|
|
<th>날짜</th>
|
|
<td>
|
|
<div class="td-inner">
|
|
<div class="input-container">
|
|
<input type="text" id="datepicker_1" class="datepicker"
|
|
title="시작 날짜 선택" autocomplete="off">
|
|
<span class="tilde">~</span>
|
|
<input type="text" id="datepicker_2" class="datepicker"
|
|
title="종료 날짜 선택" autocomplete="off">
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="form-control-container">
|
|
<div class="left"></div>
|
|
<div class="center">
|
|
<button class="btn outline">초기화</button>
|
|
<button class="btn primary">검색</button>
|
|
</div>
|
|
<div class="right"></div>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
<section class="content-section">
|
|
<div class="form-control-container">
|
|
<div class="left">
|
|
</div>
|
|
<div class="center">
|
|
</div>
|
|
<div class="right">
|
|
<button class="btn outline sm">
|
|
<i class="icon icon_excel"></i>
|
|
다운로드
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<hr class="spacing">
|
|
<div id='my-spreadsheet'></div>
|
|
</section>
|
|
<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>
|
|
<button class="scroll-to-top"><span class="visually-hidden">위로가기</span></button>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<script>
|
|
// 파이 차트
|
|
Chart.register(ChartDataLabels);
|
|
|
|
const chart1 = document.getElementById('pieGraph');
|
|
|
|
new Chart(chart1, {
|
|
type: 'pie',
|
|
data: {
|
|
labels: ['면역&그린 프로폴리스', '프리미엄(30포)', '쏘팔메토 옥타코사놀', '여성을 위한 유산균 이너 프로바이오틱스', '순캔디 120g', '키즈 멑티비타민 미네랄'],
|
|
datasets: [{
|
|
data: [39, 41, 44, 20, 24, 27],
|
|
borderWidth: 2,
|
|
order: 1
|
|
}]
|
|
},
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
display: false,
|
|
},
|
|
|
|
},
|
|
plugins: {
|
|
title: {
|
|
display: true,
|
|
text: '판매가격 순위 Top 10',
|
|
font: {
|
|
size: 20,
|
|
weight: 'bold'
|
|
}
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'top'
|
|
},
|
|
datalabels: {
|
|
color: '#fff',
|
|
font: {
|
|
weight: '500',
|
|
size: 15,
|
|
},
|
|
formatter: (value, ctx) => {
|
|
return value + '%';
|
|
}
|
|
}
|
|
},
|
|
maintainAspectRatio: false,
|
|
},
|
|
});
|
|
|
|
|
|
const chart2 = document.getElementById('pieGraph2');
|
|
|
|
new Chart(chart2, {
|
|
type: 'pie',
|
|
data: {
|
|
labels: ['면역&그린 프로폴리스', '프리미엄(30포)', '쏘팔메토 옥타코사놀', '여성을 위한 유산균 이너 프로바이오틱스', '순캔디 120g', '키즈 멑티비타민 미네랄'],
|
|
datasets: [{
|
|
data: [20, 39, 24, 27, 41, 44],
|
|
borderWidth: 2,
|
|
order: 1
|
|
}]
|
|
},
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
display: false,
|
|
}
|
|
},
|
|
plugins: {
|
|
title: {
|
|
display: true,
|
|
text: '판매수량 순위 Top 10',
|
|
font: {
|
|
size: 20,
|
|
weight: 'bold'
|
|
}
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'top'
|
|
},
|
|
datalabels: {
|
|
color: '#fff',
|
|
font: {
|
|
weight: '500',
|
|
size: 15,
|
|
},
|
|
formatter: (value, ctx) => {
|
|
return value + '%';
|
|
}
|
|
}
|
|
},
|
|
maintainAspectRatio: false,
|
|
},
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|