firstgarden/static
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

웹페이지 형식으로 데이터를 추출할 수 있는 기능

Browse Source
This commit is contained in:
KWON
2025-07-21 17:37:35 +09:00
parent 1e0ddf6280
commit f22e5922a2
4 changed files with 481 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
app/templates/2weeks.html Normal file
View File

@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>월별 입장객 현황</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body class="p-4">
<section class="2weeks_visitor_detail">
<h2>직전 2주간 방문객 현황 상세 내역</h2>
<table class="table table-bordered text-center align-middle">
<thead>
<tr>
<th colspan="2">구분</th>
<th colspan="{{ dates|length }}">방문현황</th>
<th rowspan="2">합계/평균</th>
<th colspan="3">예상</th>
</tr>
<tr>
<th>년도</th>
<th>항목</th>
{% for d in dates %}
<th>{{ d.strftime('%-m/%-d') }}</th>
{% endfor %}
<th>1일</th>
<th>2일</th>
<th>3일</th>
</tr>
</thead>
<tbody>
{% for year_label, data_by_item in data.items() %}
{% set rowspan_val = data_by_item|length %}
{% for item_name, row in data_by_item.items() %}
<tr>
{% if loop.first %}
<th rowspan="{{ rowspan_val }}">{{ year_label }}</th>
{% endif %}
<th>{{ item_name }}</th>
{% for val in row.values_list %}
<td>{{ val }}</td>
{% endfor %}
<td>{{ row.total or '' }}</td>
{% if row.expected %}
{% for ex_val in row.expected %}
<td>{{ ex_val }}</td>
{% endfor %}
{% else %}
<td colspan="3"></td>
{% endif %}
</tr>
{% endfor %}
{% endfor %}
</tbody>
</table>
</section>
</body>
</html>

145
app/templates/index.html Normal file
View File

@ -0,0 +1,145 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>POS 데이터 조회</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body class="p-4">
<h2>POS 데이터 조회</h2>
<form id="filterForm" class="row g-3">
<div class="col-md-3">
<label>시작일</label>
<input type="date" name="start_date" value="{{ start_date }}" class="form-control">
</div>
<div class="col-md-3">
<label>종료일</label>
<input type="date" name="end_date" value="{{ end_date }}" class="form-control">
</div>
<div class="col-md-2">
<label>대분류</label>
<select name="ca01" class="form-select">
<option value="전체">전체</option>
</select>
</div>
<div class="col-md-2">
<label>소분류</label>
<select name="ca03" class="form-select">
<option value="전체">전체</option>
</select>
</div>
<div class="col-md-2 align-self-end">
<button type="submit" class="btn btn-primary w-100">조회</button>
</div>
</form>
<hr>
<table class="table table-bordered mt-3" id="resultTable">
<thead>
<tr>
<th>대분류</th><th>중분류</th><th>소분류</th><th>상품명</th>
<th>수량</th><th>총매출액</th><th>총할인액</th><th>실매출액</th>
</tr>
</thead>
<tbody></tbody>
<tfoot>
<tr>
<th colspan="4" class="text-end">합계</th>
<th id="sum_qty">0</th>
<th id="sum_tot_amount">0</th>
<th id="sum_tot_discount">0</th>
<th id="sum_actual_amount">0</th>
</tr>
</tfoot>
</table>
<script>
async function fetchAndFillSelect(url, selectElem) {
const res = await fetch(url);
const list = await res.json();
selectElem.innerHTML = '';
list.forEach(val => {
const opt = document.createElement('option');
opt.value = val;
opt.textContent = val;
selectElem.appendChild(opt);
});
}
document.addEventListener('DOMContentLoaded', async () => {
const ca01Select = document.querySelector('select[name="ca01"]');
const ca03Select = document.querySelector('select[name="ca03"]');
// 대분류 목록 불러오기
await fetchAndFillSelect('/api/ca01_list', ca01Select);
// 대분류 변경 시 소분류 목록 갱신
ca01Select.addEventListener('change', async () => {
const selectedCa01 = ca01Select.value;
await fetchAndFillSelect(`/api/ca03_list?ca01=${encodeURIComponent(selectedCa01)}`, ca03Select);
});
// 초기 소분류 목록 불러오기
await fetchAndFillSelect('/api/ca03_list', ca03Select);
// 폼 제출 이벤트 처리
document.getElementById('filterForm').addEventListener('submit', async function(e) {
e.preventDefault();
const formData = new FormData(this);
const params = new URLSearchParams(formData);
const res = await fetch('/search?' + params.toString());
if (!res.ok) {
alert('조회 중 오류가 발생했습니다.');
return;
}
const data = await res.json();
const tbody = document.querySelector('#resultTable tbody');
tbody.innerHTML = '';
// 합계 초기화
let sum_qty = 0;
let sum_tot_amount = 0;
let sum_tot_discount = 0;
let sum_actual_amount = 0;
if (data.length === 0) {
tbody.innerHTML = `<tr><td colspan="8" class="text-center">조회 결과가 없습니다.</td></tr>`;
} else {
data.forEach(row => {
const tr = document.createElement('tr');
tr.innerHTML = `
<td>${row.ca01}</td>
<td>${row.ca02}</td>
<td>${row.ca03}</td>
<td>${row.name}</td>
<td>${row.qty}</td>
<td>${row.tot_amount}</td>
<td>${row.tot_discount}</td>
<td>${row.actual_amount}</td>
`;
tbody.appendChild(tr);
// 합계 계산
sum_qty += Number(row.qty) || 0;
sum_tot_amount += Number(row.tot_amount) || 0;
sum_tot_discount += Number(row.tot_discount) || 0;
sum_actual_amount += Number(row.actual_amount) || 0;
});
}
// 합계 출력
document.getElementById('sum_qty').textContent = sum_qty.toLocaleString();
document.getElementById('sum_tot_amount').textContent = sum_tot_amount.toLocaleString();
document.getElementById('sum_tot_discount').textContent = sum_tot_discount.toLocaleString();
document.getElementById('sum_actual_amount').textContent = sum_actual_amount.toLocaleString();
});
});
</script>
</body>
</html>

144
app/templates/monthly_view.html Normal file
View File

@ -0,0 +1,144 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>월별 입장객 현황</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
.diff-positive { color: blue; }
.diff-negative { color: red; }
.diff-zero { color: gray; }
table th, table td { vertical-align: middle; }
table th { text-align: center; }
table td { text-align: right; } /* 숫자 우측 정렬 */
#visitorChart {
width: 90% ;
max-width: 1200px;
min-height: 600px;
margin: 30px auto;
}
</style>
</head>
<body class="p-4">
<h2>월별 입장객 현황 (2017년 ~ 현재)</h2>
<table class="table table-bordered table-sm">
<thead class="table-secondary">
<tr>
<th>연도</th>
<th>1월</th><th>2월</th><th>3월</th><th>4월</th><th>5월</th><th>6월</th>
<th>7월</th><th>8월</th><th>9월</th><th>10월</th><th>11월</th><th>12월</th>
<th>합계</th>
</tr>
</thead>
<tbody id="dataBody">
<!-- 데이터가 여기에 삽입됩니다 -->
</tbody>
</table>
<canvas id="visitorChart"></canvas>
<script>
const visitorData = JSON.parse('{{ visitor_data | safe }}');
function formatNumber(num) {
return num.toLocaleString('ko-KR');
}
function formatDiff(diff) {
if (diff > 0) return `<span class="diff-positive">(+${formatNumber(diff)})</span>`;
else if (diff < 0) return `<span class="diff-negative">(${formatNumber(diff)})</span>`;
else return `<span class="diff-zero">(0)</span>`;
}
function renderTable(data) {
const years = Object.keys(data).sort();
const tbody = document.getElementById('dataBody');
tbody.innerHTML = '';
years.forEach((year, idx) => {
const currYearData = data[year];
const prevYearData = idx > 0 ? data[years[idx-1]] : null;
let row = `<tr><th style="text-align:center">${year}</th>`;
let annualSum = 0;
for(let m=0; m<12; m++) {
const curr = currYearData[m] || 0;
annualSum += curr;
let diff = prevYearData ? (curr - (prevYearData[m] || 0)) : 0;
row += `<td>${formatNumber(curr)}<br>${formatDiff(diff)}</td>`;
}
row += `<th style="text-align:right">${formatNumber(annualSum)}</th></tr>`;
tbody.insertAdjacentHTML('beforeend', row);
});
}
function renderChart(data) {
const ctx = document.getElementById('visitorChart').getContext('2d');
const labels = ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'];
// 연도를 숫자형으로 정렬
const years = Object.keys(data).map(Number).sort((a, b) => a - b);
// 각 연도별 데이터셋 생성
const datasets = years.map((year, i) => ({
label: year.toString(),
data: data[year],
backgroundColor: `hsla(${(i * 40) % 360}, 70%, 50%, 0.7)`,
borderColor: `hsla(${(i * 40) % 360}, 70%, 50%, 1)`,
borderWidth: 1
}));
const chartData = {
labels: labels,
datasets: datasets
};
new Chart(ctx, {
type: 'bar',
data: chartData,
options: {
responsive: true,
maintainAspectRatio: true,
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: '입장객 수'
},
ticks: {
callback: value => value.toLocaleString('ko-KR')
}
}
},
plugins: {
legend: {
position: 'top'
},
title: {
display: true,
text: '월별 입장객 수 (연도별)'
},
tooltip: {
callbacks: {
label: context => `입장객 수: ${context.parsed.y.toLocaleString('ko-KR')}`
}
}
}
}
});
}
document.addEventListener('DOMContentLoaded', () => {
renderTable(visitorData);
renderChart(visitorData);
});
</script>
</body>
</html>