453 lines
20 KiB
HTML
453 lines
20 KiB
HTML
{% extends 'ewoooc_base.html' %}
|
||
{% block title %}月份總表數據分析 - EwoooC{% endblock %}
|
||
|
||
{#
|
||
Turn B — extends ewoooc_base + BEM 結構化
|
||
- 原 inline <style> 已搬至 page-monthly-summary.css (Turn A)
|
||
- 新 BEM class 由 page-monthly-summary-bem.css 提供 (Turn B)
|
||
- JS 邏輯保留在 Turn C 處理；本檔暫保留原 inline <script> 以維持頁面可運作
|
||
#}
|
||
|
||
{% block extra_css %}
|
||
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css">
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='css/page-monthly-summary.css') }}">
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='css/page-monthly-summary-bem.css') }}">
|
||
{% endblock %}
|
||
|
||
{% block ewooo_content %}
|
||
{# Runtime data source lives in page-monthly-summary.js: /api/monthly_summary_data #}
|
||
|
||
<!-- ============ Loading Overlay (warm reskin) ============ -->
|
||
<div id="loadingOverlay" class="ms-loading" role="status" aria-live="polite">
|
||
<div class="ms-loading__spinner" aria-hidden="true"></div>
|
||
<span class="ms-loading__text">資料載入中…</span>
|
||
</div>
|
||
|
||
<div class="monthly-analysis-page ms-page"
|
||
data-page-group="analytics"
|
||
data-screen-label="monthly-summary-analysis">
|
||
|
||
{% include 'components/_analysis_report_tabs.html' %}
|
||
|
||
<!-- ═══════ Page head ═══════ -->
|
||
<header class="monthly-analysis-hero ms-page-head">
|
||
<div class="ms-page-head__main">
|
||
<h1 class="ms-page-head__title">
|
||
<i class="fas fa-chart-pie ms-page-head__icon" aria-hidden="true"></i>
|
||
月份總表數據分析
|
||
</h1>
|
||
<p class="ms-page-head__sub">
|
||
用月結資料判斷成長、毛利與品類結構。
|
||
</p>
|
||
</div>
|
||
<div class="ms-page-head__meta">
|
||
<span class="ms-tag ms-tag--pill">
|
||
<i class="fas fa-database" aria-hidden="true"></i>
|
||
<span>{{ system_version }}</span>
|
||
</span>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ═══════ 進階篩選器 ═══════ -->
|
||
<section class="ms-filter-card filter-section" aria-label="資料篩選器">
|
||
<div class="row g-3">
|
||
<div class="col-md-2 ms-filter-group ms-filter-group--year">
|
||
<label class="ms-filter-group__label form-label" for="btnYear">
|
||
<i class="fas fa-calendar-alt" aria-hidden="true"></i> 年份
|
||
</label>
|
||
<div class="dropdown">
|
||
<button class="btn btn-light custom-dropdown-btn dropdown-toggle ms-filter-group__btn"
|
||
type="button" id="btnYear" data-bs-toggle="dropdown" aria-expanded="false">
|
||
選擇年份
|
||
</button>
|
||
<ul class="dropdown-menu w-100 ms-filter-group__menu" id="listYear">
|
||
<li><a class="dropdown-item" href="#" onclick="selectFilter('year', '')">全部年份</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-2 ms-filter-group ms-filter-group--month">
|
||
<label class="ms-filter-group__label form-label" for="btnMonth">
|
||
<i class="fas fa-calendar-day" aria-hidden="true"></i> 月份
|
||
</label>
|
||
<div class="dropdown">
|
||
<button class="btn btn-light custom-dropdown-btn dropdown-toggle ms-filter-group__btn"
|
||
type="button" id="btnMonth" data-bs-toggle="dropdown" aria-expanded="false">
|
||
選擇月份
|
||
</button>
|
||
<ul class="dropdown-menu w-100 ms-filter-group__menu" id="listMonth">
|
||
<li><a class="dropdown-item" href="#" onclick="selectFilter('month', '')">全部月份</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-2 ms-filter-group ms-filter-group--area">
|
||
<label class="ms-filter-group__label form-label" for="btnArea">
|
||
<i class="fas fa-map-marker-alt" aria-hidden="true"></i> 區名稱
|
||
</label>
|
||
<div class="dropdown">
|
||
<button class="btn btn-light custom-dropdown-btn dropdown-toggle ms-filter-group__btn"
|
||
type="button" id="btnArea" data-bs-toggle="dropdown" aria-expanded="false">
|
||
所有區域
|
||
</button>
|
||
<ul class="dropdown-menu w-100 ms-filter-group__menu" id="listArea">
|
||
<li><a class="dropdown-item" href="#" onclick="selectFilter('area', '')">所有區域</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-3 ms-filter-group ms-filter-group--vendor">
|
||
<label class="ms-filter-group__label form-label" for="btnVendor">
|
||
<i class="fas fa-truck" aria-hidden="true"></i> 廠商名稱
|
||
</label>
|
||
<div class="dropdown">
|
||
<button class="btn btn-light custom-dropdown-btn dropdown-toggle ms-filter-group__btn"
|
||
type="button" id="btnVendor" data-bs-toggle="dropdown" aria-expanded="false">
|
||
所有及廠商
|
||
</button>
|
||
<ul class="dropdown-menu w-100 ms-filter-group__menu" id="listVendor">
|
||
<li class="px-2 py-1">
|
||
<input type="text" class="form-control form-control-sm" placeholder="搜尋..." onkeyup="filterList(this)">
|
||
</li>
|
||
<li><a class="dropdown-item" href="#" onclick="selectFilter('vendor', '')">所有廠商</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-2 ms-filter-group ms-filter-group--trade">
|
||
<label class="ms-filter-group__label form-label" for="btnTrade">
|
||
<i class="fas fa-exchange-alt" aria-hidden="true"></i> 借採轉
|
||
</label>
|
||
<div class="dropdown">
|
||
<button class="btn btn-light custom-dropdown-btn dropdown-toggle ms-filter-group__btn"
|
||
type="button" id="btnTrade" data-bs-toggle="dropdown" aria-expanded="false">
|
||
所有類別
|
||
</button>
|
||
<ul class="dropdown-menu w-100 ms-filter-group__menu" id="listTrade">
|
||
<li><a class="dropdown-item" href="#" onclick="selectFilter('trade', '')">所有類別</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-1 d-flex align-items-end">
|
||
<button class="btn ms-filter-card__refresh w-100" type="button" onclick="fetchData()">
|
||
<i class="fas fa-sync-alt" aria-hidden="true"></i> 刷新
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════ 商業洞察 (Top 3 Highlights) ═══════ -->
|
||
<section class="row g-3 mb-4 ms-highlight-grid" id="highlightsRow" style="display: none;" aria-label="Top 3 品牌洞察">
|
||
<div class="col-md-4">
|
||
<article class="card h-100 border-0 shadow-sm overflow-hidden ms-highlight ms-highlight--accent">
|
||
<header class="card-header ms-highlight__head">
|
||
<h6 class="ms-highlight__title"><i class="fas fa-trophy" aria-hidden="true"></i> 業績貢獻王 (Top 3 Brands)</h6>
|
||
</header>
|
||
<div class="card-body p-0">
|
||
<table class="table table-sm table-hover mb-0 ms-highlight__table">
|
||
<tbody id="revHighlightsBody"></tbody>
|
||
</table>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<article class="card h-100 border-0 shadow-sm overflow-hidden ms-highlight ms-highlight--olive">
|
||
<header class="card-header ms-highlight__head">
|
||
<h6 class="ms-highlight__title"><i class="fas fa-coins" aria-hidden="true"></i> 獲利金雞母 (Top 3 Brands)</h6>
|
||
</header>
|
||
<div class="card-body p-0">
|
||
<table class="table table-sm table-hover mb-0 ms-highlight__table">
|
||
<tbody id="profitHighlightsBody"></tbody>
|
||
</table>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<article class="card h-100 border-0 shadow-sm overflow-hidden ms-highlight ms-highlight--honey">
|
||
<header class="card-header ms-highlight__head">
|
||
<h6 class="ms-highlight__title"><i class="fas fa-fire" aria-hidden="true"></i> 人氣引流款 (Top 3 Brands)</h6>
|
||
</header>
|
||
<div class="card-body p-0">
|
||
<table class="table table-sm table-hover mb-0 ms-highlight__table">
|
||
<tbody id="volHighlightsBody"></tbody>
|
||
</table>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════ 年度 YoY ═══════ -->
|
||
<section class="row mb-4">
|
||
<div class="col-12">
|
||
<article class="card border-0 shadow-sm ms-chart-card">
|
||
<header class="card-header ms-chart-card__head">
|
||
<h6 class="ms-chart-card__title"><i class="fas fa-history ms-chart-card__icon" aria-hidden="true"></i>年度 YoY 業績對比分析（本期 vs 去年同期）</h6>
|
||
</header>
|
||
<div class="card-body">
|
||
<div id="yoyTrendChart" class="ms-chart-card__canvas" style="height: 400px;"></div>
|
||
<div class="table-responsive mt-3">
|
||
<table class="table table-bordered table-sm text-center mb-0 small ms-chart-card__table">
|
||
<tbody id="yoyTrendChartTableBody"></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════ 廠商排行 ═══════ -->
|
||
<section class="row mb-4">
|
||
<div class="col-lg-12">
|
||
<article class="card border-0 shadow-sm ms-chart-card">
|
||
<header class="card-header ms-chart-card__head">
|
||
<h6 class="ms-chart-card__title"><i class="fas fa-building ms-chart-card__icon" aria-hidden="true"></i>Top 50 廠商獲利能力排行</h6>
|
||
</header>
|
||
<div class="card-body">
|
||
<div id="vendorRankingChart" class="ms-chart-card__canvas" style="height: 900px;"></div>
|
||
<div class="table-responsive mt-3">
|
||
<table class="table table-bordered table-sm text-center mb-0 small ms-chart-card__table">
|
||
<tbody id="vendorRankingChartTableBody"></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════ 類別分佈 + 價格帶 ═══════ -->
|
||
<section class="row mb-4">
|
||
<div class="col-lg-6">
|
||
<article class="card border-0 shadow-sm h-100 ms-chart-card">
|
||
<header class="card-header ms-chart-card__head">
|
||
<h6 class="ms-chart-card__title"><i class="fas fa-chart-pie ms-chart-card__icon" aria-hidden="true"></i>全站類別業績分佈（Top 12）</h6>
|
||
</header>
|
||
<div class="card-body text-center">
|
||
<div id="divisionDistChart" class="ms-chart-card__canvas" style="height: 350px;"></div>
|
||
<div id="divisionDistChartTable" class="mt-2 ms-chart-card__scroll" style="max-height: 200px; overflow-y: auto;">
|
||
<table class="table table-bordered table-sm text-center mb-0 small ms-chart-card__table">
|
||
<tbody id="divisionDistChartTableBody"></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<article class="card border-0 shadow-sm h-100 ms-chart-card">
|
||
<header class="card-header ms-chart-card__head">
|
||
<h6 class="ms-chart-card__title"><i class="fas fa-tags ms-chart-card__icon" aria-hidden="true"></i>價格帶業績貢獻比例</h6>
|
||
</header>
|
||
<div class="card-body">
|
||
<div id="priceRangeChart" class="ms-chart-card__canvas" style="height: 350px;"></div>
|
||
<div class="table-responsive mt-2">
|
||
<table class="table table-bordered table-sm text-center mb-0 small ms-chart-card__table">
|
||
<tbody id="priceRangeChartTableBody"></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════ 主對比圖 ═══════ -->
|
||
<section class="row">
|
||
<div class="col-lg-12">
|
||
<article class="card mb-4 ms-chart-card">
|
||
<header class="card-header ms-chart-card__head">
|
||
<h6 class="ms-chart-card__title"><i class="fas fa-chart-line ms-chart-card__icon" aria-hidden="true"></i>年度月份業績對比趨勢</h6>
|
||
</header>
|
||
<div class="card-body">
|
||
<div id="compareChart" class="ms-chart-card__canvas" style="height: 400px;"></div>
|
||
<div id="compareChartDataTable" class="mt-2">
|
||
<div class="table-responsive">
|
||
<table class="table table-bordered table-sm text-center mb-0 small ms-chart-card__table">
|
||
<tbody id="compareChartTableBody"></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════ BCG + 散佈 ═══════ -->
|
||
<section class="row mb-4">
|
||
<div class="col-lg-6">
|
||
<article class="card border-0 shadow-sm ms-chart-card">
|
||
<header class="card-header ms-chart-card__head">
|
||
<h6 class="ms-chart-card__title"><i class="fas fa-th ms-chart-card__icon" aria-hidden="true"></i>品牌策略 BCG 矩陣（銷量 vs 毛利率）</h6>
|
||
</header>
|
||
<div class="card-body">
|
||
<div id="bcgMatrixChart" class="ms-chart-card__canvas" style="height: 400px;"></div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<article class="card border-0 shadow-sm ms-chart-card">
|
||
<header class="card-header ms-chart-card__head">
|
||
<h6 class="ms-chart-card__title"><i class="fas fa-braille ms-chart-card__icon" aria-hidden="true"></i>價格 vs 銷售量分佈散佈圖</h6>
|
||
</header>
|
||
<div class="card-body">
|
||
<div id="priceVolumeScatterChart" class="ms-chart-card__canvas" style="height: 400px;"></div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════ 季節熱力圖 ═══════ -->
|
||
<section class="row mb-4">
|
||
<div class="col-lg-12">
|
||
<article class="card border-0 shadow-sm ms-chart-card">
|
||
<header class="card-header ms-chart-card__head">
|
||
<h6 class="ms-chart-card__title"><i class="fas fa-th-large ms-chart-card__icon" aria-hidden="true"></i>分類與月份淡旺季業績熱力圖</h6>
|
||
</header>
|
||
<div class="card-body">
|
||
<div id="seasonalityHeatmapChart" class="ms-chart-card__canvas" style="height: 400px;"></div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════ 區域排行 ═══════ -->
|
||
<section class="row mb-4">
|
||
<div class="col-lg-12">
|
||
<article class="card border-0 shadow-sm ms-chart-card">
|
||
<header class="card-header ms-chart-card__head">
|
||
<h6 class="ms-chart-card__title"><i class="fas fa-map ms-chart-card__icon" aria-hidden="true"></i>區名稱全站銷售排行（Area Ranking）</h6>
|
||
</header>
|
||
<div class="card-body">
|
||
<div id="areaRankingChart" class="ms-chart-card__canvas" style="height: 400px;"></div>
|
||
<div class="table-responsive mt-3">
|
||
<table class="table table-bordered table-sm text-center mb-0 small ms-chart-card__table">
|
||
<tbody id="areaRankingChartTableBody"></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════ 4 個專屬區域對比圖（情報族群色） ═══════ -->
|
||
<section class="row">
|
||
<div class="col-lg-12">
|
||
<article class="card mb-4 shadow-sm ms-special ms-special--info">
|
||
<header class="card-header ms-special__head">
|
||
<h6 class="ms-special__title"><i class="fas fa-layer-group" aria-hidden="true"></i>開架保養 & 臉部清潔（合併業績）</h6>
|
||
</header>
|
||
<div class="card-body">
|
||
<div id="specialChart" class="ms-chart-card__canvas" style="height: 400px;"></div>
|
||
<div id="specialChartDataTable" class="mt-2">
|
||
<div class="table-responsive">
|
||
<table class="table table-bordered table-sm text-center mb-0 small ms-chart-card__table">
|
||
<tbody id="specialChartTableBody"></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="row">
|
||
<div class="col-lg-12">
|
||
<article class="card mb-4 shadow-sm ms-special ms-special--olive">
|
||
<header class="card-header ms-special__head">
|
||
<h6 class="ms-special__title"><i class="fas fa-magic" aria-hidden="true"></i>身體保養（年度業績分析）</h6>
|
||
</header>
|
||
<div class="card-body">
|
||
<div id="bodyCareChart" class="ms-chart-card__canvas" style="height: 400px;"></div>
|
||
<div id="bodyCareChartDataTable" class="mt-2">
|
||
<div class="table-responsive">
|
||
<table class="table table-bordered table-sm text-center mb-0 small ms-chart-card__table">
|
||
<tbody id="bodyCareChartTableBody"></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="row">
|
||
<div class="col-lg-12">
|
||
<article class="card mb-4 shadow-sm ms-special ms-special--honey">
|
||
<header class="card-header ms-special__head">
|
||
<h6 class="ms-special__title"><i class="fas fa-palette" aria-hidden="true"></i>彩妝／指彩 & 精油擴香（合併業績）</h6>
|
||
</header>
|
||
<div class="card-body">
|
||
<div id="makeupFragranceChart" class="ms-chart-card__canvas" style="height: 400px;"></div>
|
||
<div id="makeupFragranceChartDataTable" class="mt-2">
|
||
<div class="table-responsive">
|
||
<table class="table table-bordered table-sm text-center mb-0 small ms-chart-card__table">
|
||
<tbody id="makeupFragranceChartTableBody"></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="row">
|
||
<div class="col-lg-12">
|
||
<article class="card mb-4 shadow-sm ms-special ms-special--mahogany">
|
||
<header class="card-header ms-special__head">
|
||
<h6 class="ms-special__title"><i class="fas fa-heartbeat" aria-hidden="true"></i>私密保養 & 嬰幼洗沐（合併業績）</h6>
|
||
</header>
|
||
<div class="card-body">
|
||
<div id="privacyInfantChart" class="ms-chart-card__canvas" style="height: 400px;"></div>
|
||
<div id="privacyInfantChartDataTable" class="mt-2">
|
||
<div class="table-responsive">
|
||
<table class="table table-bordered table-sm text-center mb-0 small ms-chart-card__table">
|
||
<tbody id="privacyInfantChartTableBody"></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════ 資料明細 ═══════ -->
|
||
<section class="card shadow-sm mb-5 ms-data-table">
|
||
<header class="card-header ms-data-table__head">
|
||
<h5 class="ms-data-table__title"><i class="fas fa-list" aria-hidden="true"></i> 資料明細</h5>
|
||
<a href="/system_settings" class="btn btn-sm btn-outline-primary ms-data-table__import">
|
||
<i class="fas fa-plus" aria-hidden="true"></i> 匯入數據
|
||
</a>
|
||
</header>
|
||
<div class="card-body">
|
||
<div class="table-responsive">
|
||
<table id="summaryTable" class="table table-hover align-middle ms-data-table__table" style="width:100%">
|
||
<thead>
|
||
<tr>
|
||
<th>年/月</th>
|
||
<th>處別</th>
|
||
<th>區名稱</th>
|
||
<th>PM</th>
|
||
<th>品牌</th>
|
||
<th>廠商</th>
|
||
<th>交易</th>
|
||
<th>銷售額(本月)</th>
|
||
<th>YoY</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
|
||
{% endblock %}
|
||
|
||
{% block extra_js %}
|
||
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
||
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
|
||
<script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
|
||
<script src="{{ url_for('static', filename='js/analysis-chart-theme.js') }}"></script>
|
||
<script src="{{ url_for('static', filename='js/page-monthly-summary.js') }}"></script>
|
||
{% endblock %}
|