447 lines
20 KiB
HTML
447 lines
20 KiB
HTML
{% extends 'ewoooc_base.html' %}
|
||
{% block title %}PChome 月結作戰分析 - 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 #}
|
||
|
||
<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' %}
|
||
|
||
<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>
|
||
PChome 月結作戰分析
|
||
</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-calendar-check" aria-hidden="true"></i>
|
||
<span>月結分析</span>
|
||
</span>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="ms-action-strip" aria-label="月結業績判斷順序">
|
||
<span class="ms-action-strip__label">決策路徑</span>
|
||
<strong><i class="fas fa-chart-line" aria-hidden="true"></i>先看成長缺口</strong>
|
||
<strong><i class="fas fa-coins" aria-hidden="true"></i>再看毛利貢獻</strong>
|
||
<strong><i class="fas fa-layer-group" aria-hidden="true"></i>最後調整品類結構</strong>
|
||
</section>
|
||
|
||
<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>
|
||
|
||
<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> 業績主推品牌</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> 高毛利守價品牌</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> 人氣引流品牌</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>
|
||
|
||
<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>年度業績對照（本期 / 去年同期）</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>全站類別業績佔比</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>
|
||
|
||
<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>品牌策略矩陣（銷量 / 毛利率）</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>價格與銷售量分佈</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>區域銷售排行</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>
|
||
|
||
<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 %}
|