dsyoon
419f529d06
- 섹션 id를 ASCII(mgmt-sec-*)로 통일하고 isSectionActive를 state 기준으로 변경 - multipart 파일명 UTF-8 복원(decodeMultipartFilename) 후 스냅샷 메타에 저장 - Chart.js 미로드·UM 누락 시 조기 종료 및 README 정리 Made-with: Cursor
267 lines
14 KiB
Plaintext
267 lines
14 KiB
Plaintext
<div class="container">
|
|
<div class="header">
|
|
<h1><%= typeof dashboardTitle !== 'undefined' ? dashboardTitle : '경영성과 대시보드' %></h1>
|
|
<p>실시간 성과 분석 및 사업본부별 상세 현황</p>
|
|
</div>
|
|
|
|
<!-- Slicers Container -->
|
|
<div class="slicers-container">
|
|
<div class="slicer-group">
|
|
<div class="slicer-label">사업본부 (Division)</div>
|
|
<div class="slicer-tabs" id="divisionSlicer">
|
|
<button class="slicer-tab active" data-division="all">전체</button>
|
|
<button class="slicer-tab" data-division="fscan">FSCAN국내</button>
|
|
<button class="slicer-tab" data-division="fscanovs">FSCAN해외</button>
|
|
<button class="slicer-tab" data-division="xscan">XSCAN국내</button>
|
|
<button class="slicer-tab" data-division="xscanovs">XSCAN해외</button>
|
|
<button class="slicer-tab" data-division="battery">배터리</button>
|
|
<button class="slicer-tab" data-division="newbiz">신사업</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="slicer-group">
|
|
<div class="slicer-label">월별 (Month)</div>
|
|
<div class="slicer-tabs" id="monthSlicer">
|
|
<button class="slicer-tab active" data-month="all"><%= typeof quarterLabel !== 'undefined' ? quarterLabel : 'Q1' %> 전체</button>
|
|
<button class="slicer-tab" data-month="1">1월</button>
|
|
<button class="slicer-tab" data-month="2">2월</button>
|
|
<button class="slicer-tab" data-month="3">3월</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section Tabs -->
|
|
<div class="section-tabs">
|
|
<button class="section-tab-btn active" data-section="mgmt-sec-sales">매출현황</button>
|
|
<button class="section-tab-btn" data-section="mgmt-sec-order">수주현황</button>
|
|
<button class="section-tab-btn" data-section="mgmt-sec-forecast">예상실적</button>
|
|
</div>
|
|
|
|
<!-- Content Area -->
|
|
<div class="content">
|
|
<!-- 매출현황 Section -->
|
|
<div id="mgmt-sec-sales" class="section active">
|
|
<!-- Overview Mode -->
|
|
<div id="overviewMode">
|
|
<div class="kpi-grid" id="overviewKpis"></div>
|
|
<div class="chart-row">
|
|
<div class="chart-container">
|
|
<div class="chart-title">월별 매출 추이</div>
|
|
<div class="chart-wrapper">
|
|
<canvas id="monthlyTrendChart"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="chart-container">
|
|
<div class="chart-title">사업본부별 매출 현황</div>
|
|
<div class="chart-wrapper">
|
|
<canvas id="divisionSalesChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="chart-row">
|
|
<div class="chart-container">
|
|
<div class="chart-title">목표 대비 실적</div>
|
|
<div class="chart-wrapper">
|
|
<canvas id="targetVsActualChart"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="chart-container">
|
|
<div class="chart-title">사업본부별 목표달성률</div>
|
|
<div class="chart-wrapper">
|
|
<canvas id="achievementRateChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Division Detail Mode -->
|
|
<div id="divisionDetailMode" style="display:none;">
|
|
<div class="kpi-grid" id="divisionDetailKpis"></div>
|
|
<div class="chart-row">
|
|
<div class="chart-container">
|
|
<div class="chart-title">월별 매출 추이</div>
|
|
<div class="chart-wrapper">
|
|
<canvas id="divisionMonthlyChart"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="chart-container">
|
|
<div class="chart-title">매출비중 (Top Customers)</div>
|
|
<div class="chart-wrapper">
|
|
<canvas id="customerShareChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="table-wrapper">
|
|
<div class="table-title">주요 고객사 현황</div>
|
|
<table id="customerTable">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 40px;">순위</th>
|
|
<th style="width: 200px;">고객사명</th>
|
|
<th style="width: 80px;">구분</th>
|
|
<th style="width: 100px;">매출유형</th>
|
|
<th style="width: 120px;">매출액</th>
|
|
<th style="width: 80px;">비중(%)</th>
|
|
<th style="width: 120px;">미발행잔액</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- 미수채권 Section -->
|
|
<div class="risk-section">
|
|
<div class="risk-title">미수채권 (세금계산서 미발행 리스크)</div>
|
|
<div style="margin-bottom: 30px;">
|
|
<div class="risk-label">총 미발행 잔액</div>
|
|
<div class="risk-value" id="divisionRiskTotal">0</div>
|
|
</div>
|
|
<div class="chart-container" style="margin-bottom: 0;">
|
|
<div class="chart-title">고객사별 미발행금액</div>
|
|
<div class="chart-wrapper">
|
|
<canvas id="riskByCustomerChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-wrapper">
|
|
<div class="table-title">미수채권 상세현황</div>
|
|
<table id="riskDetailTable">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 60px;">월</th>
|
|
<th style="width: 180px;">사업본부</th>
|
|
<th style="width: 180px;">고객사</th>
|
|
<th style="width: 150px;">제품</th>
|
|
<th style="width: 120px;">미발행금액</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<!-- Sales Category Breakdown -->
|
|
<div class="chart-row" id="salesCatRow">
|
|
<div class="chart-container">
|
|
<div class="chart-title" id="salesCatTitle">매출유형별 비중</div>
|
|
<div class="chart-wrapper">
|
|
<canvas id="salesCatChart"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="chart-container">
|
|
<div class="chart-title" id="salesCatBarTitle">매출유형별 금액 (단위: 억원)</div>
|
|
<div class="chart-wrapper">
|
|
<canvas id="salesCatBarChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Model Rankings (FSCAN/XSCAN only) -->
|
|
<div class="chart-row" id="salesModelRow">
|
|
<div class="chart-container">
|
|
<div class="chart-title" id="fscanSalesModelTitle">FSCAN 주요 모델별 매출 Top 5</div>
|
|
<div class="chart-wrapper">
|
|
<canvas id="fscanModelChart"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="chart-container">
|
|
<div class="chart-title" id="xscanSalesModelTitle">XSCAN 주요 모델별 매출 Top 5</div>
|
|
<div class="chart-wrapper">
|
|
<canvas id="xscanModelChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 수주현황 Section -->
|
|
<div id="mgmt-sec-order" class="section">
|
|
<div class="kpi-grid" id="orderKpis"></div>
|
|
<div class="chart-row">
|
|
<div class="chart-container">
|
|
<div class="chart-title">월별 수주 현황 (단위: 억원)</div>
|
|
<div class="chart-wrapper">
|
|
<canvas id="orderMonthlyChart"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="chart-container">
|
|
<div class="chart-title">사업본부별 수주 실적</div>
|
|
<div class="chart-wrapper">
|
|
<canvas id="orderByDivisionChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="chart-row">
|
|
<div class="chart-container">
|
|
<div class="chart-title" id="orderCatTitle">수주유형별 비중</div>
|
|
<div class="chart-wrapper">
|
|
<canvas id="orderCatChart"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="chart-container">
|
|
<div class="chart-title" id="orderCatBarTitle">수주유형별 금액 (단위: 억원)</div>
|
|
<div class="chart-wrapper">
|
|
<canvas id="orderCatBarChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="chart-row" id="orderModelRow">
|
|
<div class="chart-container">
|
|
<div class="chart-title" id="fscanOrderModelTitle">FSCAN 주요 모델별 수주</div>
|
|
<div class="chart-wrapper">
|
|
<canvas id="fscanOrderModelChart"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="chart-container">
|
|
<div class="chart-title" id="xscanOrderModelTitle">XSCAN 주요 모델별 수주</div>
|
|
<div class="chart-wrapper">
|
|
<canvas id="xscanOrderModelChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="table-wrapper">
|
|
<div class="table-title">사업본부별 월별 수주 현황 (단위: 억원)</div>
|
|
<table id="orderDetailTable">
|
|
<thead>
|
|
<tr>
|
|
<th>사업본부</th>
|
|
<th style="text-align: right;">1월</th>
|
|
<th style="text-align: right;">2월</th>
|
|
<th style="text-align: right;">3월</th>
|
|
<th style="text-align: right;">합계</th>
|
|
<th style="text-align: right;">계획</th>
|
|
<th style="text-align: right;">달성률</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 예상전망 Section -->
|
|
<div id="mgmt-sec-forecast" class="section">
|
|
<div class="kpi-grid" id="forecastKpis"></div>
|
|
<div class="chart-container">
|
|
<div class="chart-title">3개월 예상실적 (단위: 억원)</div>
|
|
<div class="chart-wrapper">
|
|
<canvas id="annualForecastChart"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="table-wrapper">
|
|
<div class="table-title">월별 전망치</div>
|
|
<table id="forecastTable">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 100px;">월</th>
|
|
<th style="width: 150px;">계획(억원)</th>
|
|
<th style="width: 150px;">손익분기점(억원)</th>
|
|
<th style="width: 150px;">실적(억원)</th>
|
|
<th style="width: 100px;">달성률</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|