itfirst/sake
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

초기소스

Browse Source
This commit is contained in:
jazz
2025-10-29 17:08:05 +09:00
parent e531aa9540
commit 439a379a02
7551 changed files with 1234427 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

275
src/main/webapp/WEB-INF/views/itrnt/sel/MnthlySelR.jsp Normal file
View File

@@ -0,0 +1,275 @@
<%@ 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 : MnthlySelR.jsp
Description : 월일 판매 조회 화면
Modification Information
수정일 수정자 수정내용
------- -------- ---------------------------
2024-04-06 이운산 최초 생성(퍼블리싱 적용)
--%>
<!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="b-checkbox-container">
<label class="b-checkbox checkbox">
<input type="checkbox" value="">
<span class="check"></span>
<span class="control-label">가맹</span>
</label>
<label class="b-checkbox checkbox">
<input type="checkbox" value="">
<span class="check"></span>
<span class="control-label">직영</span>
</label>
<label class="b-checkbox checkbox">
<input type="checkbox" value="">
<span class="check"></span>
<span class="control-label">유통</span>
</label>
<label class="b-checkbox checkbox check-all">
<input type="checkbox" value="">
<span class="check"></span>
<span class="control-label">전체</span>
</label>
</div>
</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>
// 차트
const chart1 = document.getElementById('barGraph');
new Chart(chart1, {
type: 'bar',
data: {
labels: Array.from({ length: 31 }, (_, i) => i + 1),
datasets: [{
label: '거래액',
data: [39, 41, 44, 20, 2, 27, 90, 7, 91, 98, 50, 13, 79, 69, 78, 63, 95, 21, 46, 56, 76, 90, 49, 26, 70, 98, 65, 73, 66, 89, 53],
borderWidth: 2,
borderColor: '#36A2EB',
backgroundColor: '#9BD0F5',
order: 1
},
{
label: '매출이익',
data: [20, 22, 24, 10, 12, 17, 80, 5, 81, 88, 40, 8, 70, 60, 70, 50, 90, 15, 36, 46, 60, 80, 40, 20, 60, 90, 50, 60, 55, 80, 40],
borderWidth: 2,
borderColor: '#FF6384',
backgroundColor: '#FFB1C1',
order: 1
},
{
label: '순이익',
data: [10, 12, 14, 5, 8, 12, 50, 3, 52, 58, 25, 5, 40, 35, 45, 30, 60, 8, 18, 25, 35, 50, 25, 15, 45, 65, 35, 40, 35, 50, 25],
type: 'line',
borderColor: '#4bc0c0',
backgroundColor: '#4bc0c0',
order: 0
}]
},
options: {
scales: {
y: {
beginAtZero: true,
}
},
plugins: {
title: {
display: true,
text: '차트 제목',
font: {
size: 20,
weight: 'bold'
}
},
legend: {
display: true
},
},
maintainAspectRatio: false,
},
});
// 데이터 테이블
var data1 = [
['2024-03-01', 10000000, 5000000, 100000, 20000, 5000, 1000000, 800000, 500000, 2000000, 1000000, 500000, 5000000, 1000000, 500000, 200000, 400000, 500000, 200000, 400000],
['2024-03-02', 15000000, 10000000, 200000, 30000, 10000, 1500000, 1200000, 600000, 2500000, 1200000, 600000, 6000000, 1200000, 600000, 250000, 500000, 500000, 200000, 400000],
['2024-03-03', 20000000, 15000000, 300000, 40000, 15000, 2000000, 1600000, 700000, 3000000, 1400000, 700000, 7000000, 1400000, 700000, 300000, 600000, 500000, 200000, 400000],
['2024-03-04', 25000000, 20000000, 400000, 50000, 20000, 2500000, 2000000, 800000, 3500000, 1600000, 800000, 8000000, 1600000, 800000, 350000, 700000, 500000, 200000, 400000],
['2024-03-05', 30000000, 25000000, 500000, 60000, 25000, 3000000, 2400000, 900000, 4000000, 1800000, 900000, 9000000, 1800000, 900000, 400000, 800000, 500000, 200000, 400000],
['2024-03-06', 35000000, 30000000, 600000, 70000, 30000, 3500000, 2800000, 1000000, 4500000, 2000000, 1000000, 10000000, 2000000, 1000000, 450000, 900000, 500000, 200000, 400000],
['2024-03-07', 40000000, 35000000, 700000, 80000, 35000, 4000000, 3200000, 1100000, 5000000, 2200000, 1100000, 11000000, 2200000, 1100000, 500000, 1000000, 500000, 200000, 400000],
['2024-03-08', 45000000, 40000000, 800000, 90000, 40000, 4500000, 3600000, 1200000, 5500000, 2400000, 1200000, 12000000, 2400000, 1200000, 550000, 1100000, 500000, 200000, 400000],
];
var SUMCOL = function (instance, columnId) {
var total = 0;
for (var j = 0; j < instance.options.data.length; j++) {
if (Number(instance.records[j][columnId].innerHTML)) {
total += Number(instance.records[j][columnId].innerHTML);
}
}
return total;
}
jspreadsheet(document.getElementById('my-spreadsheet'), {
data: data1,
defaultColWidth: 120,
columns: [
{ title: '매출일', width: 160 },
{ title: '주문수' },
{ title: '판매수' },
{ title: '거래액' },
{ title: '환불금액' },
{ title: '할인' },
{ title: '매출액' },
{ title: '순매출' },
{ title: '매입원가' },
{ title: '매출이익' },
{ title: '객단가' },
{ title: '임대료' },
{ title: '관리비' },
{ title: '로열티' },
{ title: '시스템사용료' },
{ title: '직원인건비' },
{ title: '카드수수료' },
{ title: '홍보비' },
{ title: '매장운영비' },
{ title: '순이익' }
],
footers: generateFooters(data1),
editable: false,
contextMenu: false,
});
// 합계
function generateFooters(data) {
var footers = [['합계']];
for (var i = 1; i < data[0].length; i++) {
var formula = '=SUMCOL(TABLE(), ' + i + ')';
footers[0].push(formula);
}
return footers;
}
</script>
</body>
</html>