eomsangdon/Control_Panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

초기화

Browse Source
This commit is contained in:
eomsangdon
2026-07-15 18:37:19 +09:00
commit 94abc5461d
1268 changed files with 380198 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/frontend/analysis.html
+291
View File
@@ -0,0 +1,291 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ChemiFactory 생산성 및 비용 시뮬레이터 (계산기)</title>
<!-- Google Fonts Inter -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- 테마 적용 (base.css보다 먼저 로드해 FOWT 방지) -->
<script src="js/theme.js"></script>
<link rel="stylesheet" href="css/base.css">
<style>
.analysis-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
align-items: start;
}
@media (max-width: 992px) {
.analysis-grid {
grid-template-columns: 1fr;
}
}
.form-group {
margin-bottom: 16px;
}
.form-group label {
display: block;
font-size: 13px;
color: var(--text-secondary);
margin-bottom: 6px;
font-weight: 600;
}
.form-control {
background-color: var(--overlay-hover);
border: 1px solid var(--border-color);
color: var(--text-primary);
padding: 10px 14px;
border-radius: 8px;
font-size: 14px;
width: 100%;
transition: all 0.2s ease;
}
.form-control:focus {
outline: none;
border-color: var(--border-focus);
background-color: var(--overlay-strong);
}
/* 결과 박스 레이아웃 */
.result-section {
border-top: 1px solid var(--border-color);
padding-top: 20px;
margin-top: 20px;
}
.result-card-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.result-card {
background-color: var(--overlay-subtle);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.result-label {
font-size: 12px;
color: var(--text-secondary);
margin-bottom: 6px;
}
.result-value {
font-size: 20px;
font-weight: 700;
color: var(--text-primary);
}
.result-value.profit {
color: var(--accent-green);
}
.result-value.cost {
color: var(--accent-orange);
}
</style>
</head>
<body>
<div class="app-container">
<!-- 공통 사이드바 -->
<aside class="sidebar" id="sidebar"></aside>
<!-- 메인 콘텐츠 영역 -->
<main class="main-content">
<header class="content-header">
<div class="page-title">
<h1>생산성 및 비용 시뮬레이터 (계산/분석)</h1>
<p>기기 가동 물성 변수들을 조정하여 최종 생산 소요 기간 및 기대 회사 마진을 미리 측정합니다.</p>
</div>
</header>
<div class="analysis-grid">
<!-- 가동 물성 입력 카드 -->
<div class="card">
<h2 class="section-title" style="margin-top:0;">물성 변수 입력</h2>
<form id="simulator-form">
<div class="form-group">
<label for="sim-yarn">사용 예정 원사 자재 (재고) *</label>
<select id="sim-yarn" class="form-control" required></select>
</div>
<div class="form-group">
<label for="sim-bond">사용 예정 본드 자재 (선택)</label>
<select id="sim-bond" class="form-control"></select>
</div>
<div class="form-group">
<label for="sim-qty">목표 생산량 (kg) *</label>
<input type="number" id="sim-qty" value="1000" class="form-control" required>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap:12px;">
<div class="form-group">
<label for="sim-dia">원사 선경 (㎛) *</label>
<input type="number" id="sim-dia" value="7.0" step="0.1" class="form-control" required>
</div>
<div class="form-group">
<label for="sim-k">K수 (K 번수) *</label>
<input type="number" id="sim-k" value="12" class="form-control" required>
</div>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap:12px;">
<div class="form-group">
<label for="sim-ports">포트 수 (Ports) *</label>
<input type="number" id="sim-ports" value="40" class="form-control" required>
</div>
<div class="form-group">
<label for="sim-hz">사이클 타임 (Hz) *</label>
<input type="number" id="sim-hz" value="8.0" step="0.1" class="form-control" required>
</div>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap:12px;">
<div class="form-group">
<label for="sim-cut">커팅 길이 (mm) *</label>
<input type="number" id="sim-cut" value="6.0" step="0.1" class="form-control" required>
</div>
<div class="form-group">
<label for="sim-hours">일 작업 시간 *</label>
<input type="number" id="sim-hours" value="16" class="form-control" required>
</div>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap:12px;">
<div class="form-group">
<label for="sim-machines">투입 예정 설비 대수 *</label>
<input type="number" id="sim-machines" value="2" class="form-control" required>
</div>
<div class="form-group">
<label for="sim-bond-pct">본드 혼합비 (%)</label>
<input type="number" id="sim-bond-pct" value="3.0" step="0.1" class="form-control">
</div>
</div>
<button type="submit" class="btn btn-primary" style="width:100%; padding: 12px 0; font-weight:700;">시뮬레이션 가동 진단</button>
</form>
</div>
<!-- 시뮬레이션 산출 보고서 카드 -->
<div class="card" style="min-height:500px; display:flex; flex-direction:column; justify-content:space-between;">
<div>
<h2 class="section-title" style="margin-top:0; color:var(--accent-blue);">가동 연산 결과 보고서</h2>
<div class="result-card-grid">
<div class="result-card">
<span class="result-label">소요 작업일 (필요일수)</span>
<span class="result-value" id="res-days">- 일</span>
</div>
<div class="result-card">
<span class="result-label">총 가공비 (Processing Fee)</span>
<span class="result-value" id="res-fee">- 원</span>
</div>
<div class="result-card">
<span class="result-label">예상 총매출 (Estimated Sales)</span>
<span class="result-value" id="res-sales">- 원</span>
</div>
<div class="result-card">
<span class="result-label">회사 영업 이익 (Margin)</span>
<span class="result-value profit" id="res-margin">- 원</span>
</div>
</div>
<div class="result-section">
<h3 style="font-size: 14px; margin-bottom: 12px; color:var(--text-secondary);">원자재 소요 비용</h3>
<div style="display:grid; grid-template-columns: 1fr 1fr; gap:16px;">
<div class="result-card">
<span class="result-label">원사 구매 소요 비용</span>
<span class="result-value cost" id="res-yarn-cost">- 원</span>
</div>
<div class="result-card">
<span class="result-label">본드 구매 소요 비용</span>
<span class="result-value cost" id="res-bond-cost">- 원</span>
</div>
</div>
</div>
</div>
<div style="margin-top:20px; font-size:12px; color:var(--text-muted); border-top:1px solid var(--border-color); padding-top:16px;">
※ 본 연산 시뮬레이터 결과치는 등록된 자재 매입 원장(Inventory)의 단가와 밀도 기준에 의해 자동으로 산출되며, 실제 생산 여건에 따라 오차가 있을 수 있습니다.
</div>
</div>
</div>
<!-- 만능 조절 & 건조 전력 계산기 그리드 -->
<div class="analysis-grid" style="margin-top: 30px;">
<!-- 만능 조절 계산기 -->
<div class="card">
<h2 class="section-title" style="margin-top:0; color:var(--accent-green);">만능 조절 계산기</h2>
<form id="adjustment-form">
<div class="form-group">
<label for="adj-raw-conc">원자재 본드 농도 (%) *</label>
<input type="number" id="adj-raw-conc" value="40" step="0.1" class="form-control" required>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap:12px;">
<div class="form-group">
<label for="adj-curr-vol">현재 수조 부피 (L) *</label>
<input type="number" id="adj-curr-vol" value="100" step="0.1" class="form-control" required>
</div>
<div class="form-group">
<label for="adj-curr-conc">현재 수조 농도 (%) *</label>
<input type="number" id="adj-curr-conc" value="15" step="0.1" class="form-control" required>
</div>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap:12px;">
<div class="form-group">
<label for="adj-tgt-vol">목표 부피 (L) *</label>
<input type="number" id="adj-tgt-vol" value="150" step="0.1" class="form-control" required>
</div>
<div class="form-group">
<label for="adj-tgt-conc">목표 농도 (%) *</label>
<input type="number" id="adj-tgt-conc" value="20" step="0.1" class="form-control" required>
</div>
</div>
<button type="submit" class="btn btn-primary" style="width:100%; padding: 10px 0; font-weight:700; background-color:var(--accent-green); border:none;">조절 수량 연산</button>
</form>
<div class="result-section" id="adj-result-box" style="display:none;">
<h3 style="font-size: 13px; margin-bottom: 12px; color:var(--accent-green);">조절 연산 결과</h3>
<div style="display:flex; flex-direction:column; gap:6px; font-size:13px;" id="adj-results">
<!-- JS 결과 바인딩 -->
</div>
</div>
</div>
<!-- 전기 건조 필요 전력 계산기 -->
<div class="card">
<h2 class="section-title" style="margin-top:0; color:var(--accent-orange);">전기 건조 필요 전력 계산기</h2>
<form id="dryer-form">
<div class="form-group">
<label for="dry-speed">원사 이송 속도 (mm/s) *</label>
<input type="number" id="dry-speed" value="60" step="0.1" class="form-control" required>
</div>
<div class="form-group">
<label for="dry-conc">용액의 농도 (%) *</label>
<input type="number" id="dry-conc" value="20" step="0.1" class="form-control" required>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap:12px;">
<div class="form-group">
<label for="dry-usage">일간 용액 사용량 (L/day) *</label>
<input type="number" id="dry-usage" value="15" step="0.1" class="form-control" required>
</div>
<div class="form-group">
<label for="dry-loss">Loss Factor (%) *</label>
<input type="number" id="dry-loss" value="10" step="0.1" class="form-control" required>
</div>
</div>
<button type="submit" class="btn btn-primary" style="width:100%; padding: 10px 0; font-weight:700; background-color:var(--accent-orange); border:none;">필요 전력 연산</button>
</form>
<div class="result-section" id="dry-result-box" style="display:none;">
<h3 style="font-size: 13px; margin-bottom: 12px; color:var(--accent-orange);">소요 전력 연산 결과</h3>
<div style="display:flex; flex-direction:column; gap:6px; font-size:13px;" id="dry-results">
<!-- JS 결과 바인딩 -->
</div>
</div>
</div>
</div>
</main>
</div>
<!-- 스크립트 연결 -->
<script src="js/common.js"></script>
<script src="js/analysis.js"></script>
</body>
</html>