204 lines
9.2 KiB
HTML
204 lines
9.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>销售数据分析器</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="app-container">
|
|
<header class="main-header">
|
|
<div class="logo">
|
|
<i class="fas fa-chart-pie"></i>
|
|
<h1>SaleShow</h1>
|
|
</div>
|
|
<p class="subtitle">智能销售分析助手</p>
|
|
</header>
|
|
|
|
<main class="content-area">
|
|
<!-- 上传区域 -->
|
|
<section class="upload-section glass-card">
|
|
<div class="section-header">
|
|
<h2><i class="fas fa-magic"></i> 开始分析</h2>
|
|
</div>
|
|
|
|
<div class="upload-controls">
|
|
<button class="btn btn-primary btn-lg btn-block" onclick="openUploadModal()">
|
|
<i class="fas fa-plus-circle"></i> 上传新文件
|
|
</button>
|
|
<button class="btn btn-accent btn-lg btn-block" onclick="openAutoDownloadModal()">
|
|
<i class="fas fa-cloud-download-alt"></i> 自动获取
|
|
</button>
|
|
<a href="/settings" class="btn btn-text btn-sm" title="系统设置">
|
|
<i class="fas fa-cog"></i> 设置
|
|
</a>
|
|
|
|
<div class="file-selector-wrapper" id="fileSelector" style="display: none;">
|
|
<span class="label">当前分析:</span>
|
|
<div class="file-tags" id="fileList">
|
|
<!-- 文件标签 -->
|
|
</div>
|
|
</div>
|
|
|
|
<button class="btn btn-text btn-sm" onclick="cleanupFiles()" title="清理旧文件">
|
|
<i class="fas fa-trash-alt"></i> 清理
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 状态提示 -->
|
|
<div id="noData" class="empty-state">
|
|
<div class="illustration">
|
|
<i class="fas fa-chart-area"></i>
|
|
</div>
|
|
<h3>暂无数据</h3>
|
|
<p>上传 Excel 文件即可生成精美报表</p>
|
|
</div>
|
|
|
|
<!-- 数据展示 -->
|
|
<div id="dataDisplay" class="data-dashboard" style="display: none;">
|
|
<!-- 概览卡片 -->
|
|
<section class="summary-cards">
|
|
<div class="card stat-card total-sales">
|
|
<div class="icon-circle"><i class="fas fa-yen-sign"></i></div>
|
|
<div class="stat-content">
|
|
<span class="stat-label">总销售额</span>
|
|
<span class="stat-value" id="totalAmount">0.00</span>
|
|
</div>
|
|
</div>
|
|
<div class="card stat-card total-count">
|
|
<div class="icon-circle"><i class="fas fa-shopping-bag"></i></div>
|
|
<div class="stat-content">
|
|
<span class="stat-label">销售件数</span>
|
|
<span class="stat-value" id="totalQuantity">0</span>
|
|
</div>
|
|
</div>
|
|
<div class="card stat-card total-days">
|
|
<div class="icon-circle"><i class="fas fa-calendar-alt"></i></div>
|
|
<div class="stat-content">
|
|
<span class="stat-label">统计天数</span>
|
|
<span class="stat-value" id="totalDays">0</span>
|
|
</div>
|
|
</div>
|
|
<div class="card stat-card total-products">
|
|
<div class="icon-circle"><i class="fas fa-box-open"></i></div>
|
|
<div class="stat-content">
|
|
<span class="stat-label">商品种类</span>
|
|
<span class="stat-value" id="totalProducts">0</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 工具栏 -->
|
|
<div class="toolbar glass-card">
|
|
<div class="search-wrapper">
|
|
<i class="fas fa-search"></i>
|
|
<input type="text" id="searchInput" placeholder="搜索商品...">
|
|
</div>
|
|
<div class="filter-group">
|
|
<button class="filter-chip active" onclick="filterByAmount('all', this)">全部</button>
|
|
<button class="filter-chip" onclick="filterByAmount('high', this)">高额</button>
|
|
<button class="filter-chip" onclick="filterByAmount('medium', this)">中等</button>
|
|
<button class="filter-chip" onclick="filterByAmount('low', this)">低额</button>
|
|
</div>
|
|
<button class="btn btn-outline btn-sm action-btn" onclick="exportData()">
|
|
<i class="fas fa-download"></i> 导出
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 每日详情 -->
|
|
<section class="daily-list" id="dailyData">
|
|
<!-- 动态生成 -->
|
|
</section>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- 上传弹窗 -->
|
|
<div id="uploadModal" class="modal-overlay">
|
|
<div class="modal-card bounce-in">
|
|
<div class="modal-header">
|
|
<h3>上传文件</h3>
|
|
<button class="btn-close" onclick="closeUploadModal()"><i class="fas fa-times"></i></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="drop-zone" id="uploadArea">
|
|
<div class="icon-wrapper"><i class="fas fa-cloud-upload-alt"></i></div>
|
|
<p>点击或拖拽文件至此</p>
|
|
<span class="support-text">支持 .xlsx / .xls</span>
|
|
<input type="file" id="fileInput" hidden accept=".xlsx,.xls">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 自动获取弹窗 -->
|
|
<div id="autoDownloadModal" class="modal-overlay">
|
|
<div class="modal-card bounce-in">
|
|
<div class="modal-header">
|
|
<h3><i class="fas fa-cloud-download-alt"></i> 自动获取数据</h3>
|
|
<button class="btn-close" onclick="closeAutoDownloadModal()"><i class="fas fa-times"></i></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label for="autoStartDate">开始日期</label>
|
|
<input type="date" id="autoStartDate" class="form-input">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="autoEndDate">结束日期</label>
|
|
<input type="date" id="autoEndDate" class="form-input">
|
|
</div>
|
|
<div class="form-hint" id="autoDownloadHint">
|
|
<i class="fas fa-info-circle"></i>
|
|
将从 secsion.com 自动下载指定日期范围的销售数据
|
|
</div>
|
|
<div id="autoDownloadStatus" class="download-status" style="display: none;">
|
|
<div class="loader-dots small">
|
|
<div></div><div></div><div></div>
|
|
</div>
|
|
<span id="autoDownloadStatusText">准备中...</span>
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button class="btn btn-outline" onclick="closeAutoDownloadModal()">取消</button>
|
|
<button class="btn btn-primary" id="autoDownloadBtn" onclick="startAutoDownload()">
|
|
<i class="fas fa-download"></i> 开始下载
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 加载层 -->
|
|
<div id="loadingOverlay" class="loading-overlay">
|
|
<div class="loading-box">
|
|
<div class="loader-dots">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
<p id="loadingText">处理中...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
|
|
<script>
|
|
// 覆盖部分 JS 逻辑以适应新的 DOM 结构
|
|
// 特别是 ID 变更后的 element 获取
|
|
// 为了方便，我们在 main.js 中尽量保持 ID 不变，或者在这里做少量适配
|
|
|
|
// 更新统计数据显示的逻辑需要适配新的 DOM 结构
|
|
const originalDisplayData = window.displayData;
|
|
|
|
// 我们需要重新定义 displayData 因为 DOM 结构变了
|
|
// 或者我们直接修改 main.js?
|
|
// 更好的做法是修改 main.js 适配新的 ID。
|
|
// 这里我尽量保持了 main.js 中使用的 ID (uploadArea, fileInput, loading... etc)
|
|
// 但是 summaryStats 的结构变了，需要更新 main.js。
|
|
</script>
|
|
</body>
|
|
|
|
</html> |