| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396 |
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>叁强鲜配 - 数据统计分析</title>
- <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
- <style>
- * { margin: 0; padding: 0; box-sizing: border-box; }
- body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f7fa; color: #303133; }
-
- /* 顶部导航 */
- .topbar { height: 60px; background: linear-gradient(135deg, #1989fa 0%, #07c160 100%); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; color: white; }
- .topbar-logo h1 { font-size: 22px; font-weight: 600; }
- .topbar-logo span { font-size: 13px; opacity: 0.85; }
- .topbar-user { display: flex; align-items: center; gap: 16px; }
-
- /* 主布局 */
- .main-container { display: flex; min-height: calc(100vh - 60px); }
-
- /* 侧边栏 */
- .sidebar { width: 220px; background: #fff; border-right: 1px solid #e4e7ed; padding: 16px 0; }
- .menu-item { padding: 14px 24px; cursor: pointer; display: flex; align-items: center; gap: 12px; color: #606266; font-size: 14px; }
- .menu-item:hover { background: #f5f7fa; color: #1989fa; }
- .menu-item.active { background: #ecf5ff; color: #1989fa; border-right: 3px solid #1989fa; }
-
- /* 内容区 */
- .content { flex: 1; padding: 24px; }
- .breadcrumb { font-size: 13px; color: #909399; margin-bottom: 8px; }
-
- /* 统计卡片 */
- .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 24px; }
- .stat-card { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); display: flex; align-items: center; gap: 16px; }
- .stat-icon { width: 56px; height: 56px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 28px; }
- .stat-icon.blue { background: #ecf5ff; color: #1989fa; }
- .stat-icon.green { background: #f0f9eb; color: #07c160; }
- .stat-icon.orange { background: #fdf6ec; color: #ff976a; }
- .stat-icon.red { background: #fef0f0; color: #ee0a24; }
- .stat-info h3 { font-size: 28px; font-weight: 700; color: #303133; margin-bottom: 4px; }
- .stat-info p { font-size: 14px; color: #909399; }
- .stat-trend { font-size: 12px; margin-top: 8px; }
- .stat-trend.up { color: #07c160; }
- .stat-trend.down { color: #ee0a24; }
-
- /* 卡片样式 */
- .card { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); margin-bottom: 20px; }
- .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #ebeef5; }
- .card-title { font-size: 16px; font-weight: 600; }
-
- /* 图表区域 */
- .chart-row { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
- .chart-placeholder { height: 280px; background: linear-gradient(135deg, #f5f7fa 0%, #ebeef5 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #c0c4cc; font-size: 14px; position: relative; overflow: hidden; }
- .chart-placeholder::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60%; background: linear-gradient(to top, rgba(25, 137, 250, 0.1), transparent); }
-
- /* 排名列表 */
- .rank-list { }
- .rank-item { display: flex; align-items: center; padding: 14px 0; border-bottom: 1px solid #f5f7fa; }
- .rank-item:last-child { border-bottom: none; }
- .rank-num { width: 28px; height: 28px; border-radius: 50%; background: #f5f7fa; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; margin-right: 14px; color: #606266; }
- .rank-num.top1 { background: linear-gradient(135deg, #ffd700, #ff976a); color: #fff; }
- .rank-num.top2 { background: linear-gradient(135deg, #c0c0c0, #909399); color: #fff; }
- .rank-num.top3 { background: linear-gradient(135deg, #cd7f32, #b87333); color: #fff; }
- .rank-info { flex: 1; }
- .rank-name { font-size: 14px; font-weight: 500; }
- .rank-region { font-size: 12px; color: #909399; margin-top: 2px; }
- .rank-value { font-size: 16px; font-weight: 600; color: #1989fa; }
- .rank-sub { font-size: 12px; color: #909399; }
-
- /* 表格样式 */
- .table-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
- .el-table { border-radius: 8px; overflow: hidden; }
- .el-table th { background: #f5f7fa !important; color: #606266; font-weight: 600; }
-
- /* Tab切换 */
- .tab-group { display: flex; gap: 4px; background: #f5f7fa; padding: 4px; border-radius: 8px; width: fit-content; margin-bottom: 16px; }
- .tab-btn { padding: 10px 20px; cursor: pointer; border-radius: 6px; font-size: 14px; color: #606266; background: transparent; border: none; }
- .tab-btn.active { background: #fff; color: #1989fa; font-weight: 500; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
-
- /* 筛选条件 */
- .filter-row { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; align-items: center; }
-
- /* 状态标签 */
- .status-tag { padding: 4px 12px; border-radius: 4px; font-size: 12px; }
- .status-tag.success { background: #f0f9eb; color: #07c160; }
- .status-tag.warning { background: #fdf6ec; color: #ff976a; }
- .status-tag.primary { background: #ecf5ff; color: #1989fa; }
-
- /* 原型导航 */
- .prototype-nav { position: fixed; top: 80px; right: 24px; background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.1); z-index: 100; }
- .prototype-nav h4 { font-size: 13px; color: #909399; margin-bottom: 12px; }
- .prototype-nav a { display: block; padding: 8px 16px; color: #606266; text-decoration: none; font-size: 13px; border-radius: 6px; margin-bottom: 4px; }
- .prototype-nav a:hover, .prototype-nav a.active { background: #ecf5ff; color: #1989fa; }
- </style>
- </head>
- <body>
- <!-- 原型导航 -->
- <div class="prototype-nav">
- <h4>页面导航</h4>
- <a href="#" class="active">数据统计分析</a>
- </div>
- <!-- 顶部导航 -->
- <div class="topbar">
- <div class="topbar-logo">
- <h1>叁强鲜配</h1>
- <span>运营管理后台</span>
- </div>
- <div class="topbar-user">
- <el-avatar :size="32" style="background:#fff;color:#1989fa;">管</el-avatar>
- <span>管理员</span>
- </div>
- </div>
- <div class="main-container">
- <!-- 左侧菜单 -->
- <div class="sidebar">
- <div class="menu-item active"><span>📊</span><span>数据统计</span></div>
- <div class="menu-item"><span>👤</span><span>用户管理</span></div>
- <div class="menu-item"><span>📍</span><span>区域管理</span></div>
- <div class="menu-item"><span>📦</span><span>商品管理</span></div>
- <div class="menu-item"><span>🔍</span><span>询价管理</span></div>
- <div class="menu-item"><span>💰</span><span>报价管理</span></div>
- <div class="menu-item"><span>🎫</span><span>价格管理</span></div>
- <div class="menu-item"><span>🛒</span><span>订单管理</span></div>
- <div class="menu-item"><span>🚚</span><span>配送管理</span></div>
- <div class="menu-item"><span>💳</span><span>结算管理</span></div>
- </div>
- <!-- 内容区 -->
- <div class="content">
- <div class="breadcrumb">首页 / 数据统计</div>
-
- <!-- 核心指标 -->
- <div class="stats-grid">
- <div class="stat-card">
- <div class="stat-icon blue">🛒</div>
- <div class="stat-info">
- <h3>1,286</h3>
- <p>今日订单数</p>
- <div class="stat-trend up">▲ 12.5% 较昨日</div>
- </div>
- </div>
- <div class="stat-card">
- <div class="stat-icon green">💰</div>
- <div class="stat-info">
- <h3>¥58,620</h3>
- <p>今日交易额</p>
- <div class="stat-trend up">▲ 8.3% 较昨日</div>
- </div>
- </div>
- <div class="stat-card">
- <div class="stat-icon orange">📦</div>
- <div class="stat-info">
- <h3>156</h3>
- <p>待处理配送</p>
- <div class="stat-trend down">▼ 5.2% 较昨日</div>
- </div>
- </div>
- <div class="stat-card">
- <div class="stat-icon red">💥</div>
- <div class="stat-info">
- <h3>12</h3>
- <p>异常订单</p>
- <div class="stat-trend down">▼ 20% 较昨日</div>
- </div>
- </div>
- </div>
-
- <!-- Tab切换 & 筛选 -->
- <div class="filter-row">
- <div class="tab-group">
- <button class="tab-btn active">今日</button>
- <button class="tab-btn">本周</button>
- <button class="tab-btn">本月</button>
- <button class="tab-btn">本季度</button>
- </div>
- <el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width:260px" />
- <el-select placeholder="选择区域" style="width:150px">
- <el-option label="全部区域" value />
- <el-option label="城东区域" value="cd" />
- <el-option label="城西区域" value="cx" />
- <el-option label="城南区域" value="cn" />
- </el-select>
- <el-button type="primary">查询</el-button>
- <el-button>导出</el-button>
- </div>
- <!-- 图表区域 -->
- <div class="chart-row">
- <div class="card">
- <div class="card-header">
- <span class="card-title">订单趋势</span>
- <el-radio-group size="small">
- <el-radio-button label="近7天" />
- <el-radio-button label="近30天" />
- </el-radio-group>
- </div>
- <div class="chart-placeholder">
- 📊 订单金额与数量趋势图表区域
- <div style="position:absolute;bottom:20px;left:20px;display:flex;gap:20px;">
- <span style="display:flex;align-items:center;gap:6px;"><span style="width:12px;height:3px;background:#1989fa;border-radius:2px;"></span>订单金额</span>
- <span style="display:flex;align-items:center;gap:6px;"><span style="width:12px;height:3px;background:#07c160;border-radius:2px;"></span>订单数量</span>
- </div>
- </div>
- </div>
- <div class="card">
- <div class="card-header">
- <span class="card-title">区域订单排名</span>
- </div>
- <div class="rank-list">
- <div class="rank-item">
- <div class="rank-num top1">1</div>
- <div class="rank-info">
- <div class="rank-name">城东区</div>
- <div class="rank-region">386单 | 占比 30%</div>
- </div>
- <div class="rank-value">¥18,560</div>
- </div>
- <div class="rank-item">
- <div class="rank-num top2">2</div>
- <div class="rank-info">
- <div class="rank-name">城西区</div>
- <div class="rank-region">312单 | 占比 24%</div>
- </div>
- <div class="rank-value">¥15,280</div>
- </div>
- <div class="rank-item">
- <div class="rank-num top3">3</div>
- <div class="rank-info">
- <div class="rank-name">城南区域</div>
- <div class="rank-region">285单 | 占比 22%</div>
- </div>
- <div class="rank-value">¥12,450</div>
- </div>
- <div class="rank-item">
- <div class="rank-num">4</div>
- <div class="rank-info">
- <div class="rank-name">城北区域</div>
- <div class="rank-region">258单 | 占比 20%</div>
- </div>
- <div class="rank-value">¥10,890</div>
- </div>
- </div>
- </div>
- </div>
- <!-- 详细表格 -->
- <div class="table-grid">
- <div class="card">
- <div class="card-header">
- <span class="card-title">热销商品 TOP 10</span>
- <el-button type="primary" link size="small">查看更多</el-button>
- </div>
- <el-table :data="hotProducts" style="width:100%">
- <el-table-column prop="rank" label="排名" width="60" align="center" />
- <el-table-column prop="name" label="商品名称" />
- <el-table-column prop="sales" label="销量" width="100" align="right" />
- <el-table-column prop="amount" label="销售额" width="110" align="right" />
- </el-table>
- </div>
- <div class="card">
- <div class="card-header">
- <span class="card-title">客户下单排名</span>
- <el-button type="primary" link size="small">查看更多</el-button>
- </div>
- <el-table :data="topClients" style="width:100%">
- <el-table-column prop="rank" label="排名" width="60" align="center" />
- <el-table-column prop="name" label="客户名称" />
- <el-table-column prop="region" label="区域" width="90" />
- <el-table-column prop="orders" label="订单数" width="80" align="right" />
- <el-table-column prop="amount" label="消费额" width="100" align="right" />
- </el-table>
- </div>
- </div>
- <!-- 收入统计 -->
- <div class="card">
- <div class="card-header">
- <span class="card-title">收入统计</span>
- </div>
- <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:20px;">
- <div style="text-align:center;padding:20px;background:#f5f7fa;border-radius:8px;">
- <div style="font-size:13px;color:#909399;margin-bottom:8px;">线上收入(微信)</div>
- <div style="font-size:24px;font-weight:700;color:#07c160;">¥38,620</div>
- <div style="font-size:12px;color:#07c160;margin-top:4px;">占比 66%</div>
- </div>
- <div style="text-align:center;padding:20px;background:#f5f7fa;border-radius:8px;">
- <div style="font-size:13px;color:#909399;margin-bottom:8px;">线下收入</div>
- <div style="font-size:24px;font-weight:700;color:#1989fa;">¥20,000</div>
- <div style="font-size:12px;color:#1989fa;margin-top:4px;">占比 34%</div>
- </div>
- <div style="text-align:center;padding:20px;background:#f5f7fa;border-radius:8px;">
- <div style="font-size:13px;color:#909399;margin-bottom:8px;">待结算金额</div>
- <div style="font-size:24px;font-weight:700;color:#ff976a;">¥12,450</div>
- <div style="font-size:12px;color:#909399;margin-top:4px;">本月</div>
- </div>
- <div style="text-align:center;padding:20px;background:#f5f7fa;border-radius:8px;">
- <div style="font-size:13px;color:#909399;margin-bottom:8px;">退款金额</div>
- <div style="font-size:24px;font-weight:700;color:#ee0a24;">¥1,280</div>
- <div style="font-size:12px;color:#909399;margin-top:4px;">本月</div>
- </div>
- </div>
- <div class="chart-placeholder" style="height:200px;">
- 📊 支付方式占比饼图 / 收入趋势折线图
- </div>
- </div>
- <!-- 供应商报价统计 -->
- <div class="card">
- <div class="card-header">
- <span class="card-title">供应商报价统计</span>
- <el-select placeholder="选择区域" style="width:150px">
- <el-option label="全部区域" value />
- <el-option label="城东区域" value="cd" />
- <el-option label="城西区域" value="cx" />
- </el-select>
- </div>
- <el-table :data="quotationStats" style="width:100%">
- <el-table-column prop="supplier" label="供应商名称" />
- <el-table-column prop="region" label="所属区域" width="100" />
- <el-table-column prop="inquiryCount" label="收到询价" width="100" align="center" />
- <el-table-column prop="quoteCount" label="已报价" width="100" align="center" />
- <el-table-column prop="selectedCount" label="被选用" width="100" align="center" />
- <el-table-column prop="totalAmount" label="报价总额" width="120" align="right" />
- <el-table-column prop="winRate" label="选用率" width="100" align="center">
- <template #default="{row}">
- <span :class="'status-tag '+ (row.winRate > 50 ? 'success' : 'warning')">{{row.winRate}}%</span>
- </template>
- </el-table-column>
- </el-table>
- </div>
- <!-- 配送效率统计 -->
- <div class="card">
- <div class="card-header">
- <span class="card-title">配送效率统计</span>
- </div>
- <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:20px;">
- <div style="text-align:center;padding:20px;background:#f5f7fa;border-radius:8px;">
- <div style="font-size:13px;color:#909399;margin-bottom:8px;">平均配送时长</div>
- <div style="font-size:24px;font-weight:700;color:#1989fa;">45分钟</div>
- </div>
- <div style="text-align:center;padding:20px;background:#f5f7fa;border-radius:8px;">
- <div style="font-size:13px;color:#909399;margin-bottom:8px;">准时率</div>
- <div style="font-size:24px;font-weight:700;color:#07c160;">96.8%</div>
- </div>
- <div style="text-align:center;padding:20px;background:#f5f7fa;border-radius:8px;">
- <div style="font-size:13px;color:#909399;margin-bottom:8px;">配送员数量</div>
- <div style="font-size:24px;font-weight:700;color:#ff976a;">28人</div>
- </div>
- <div style="text-align:center;padding:20px;background:#f5f7fa;border-radius:8px;">
- <div style="font-size:13px;color:#909399;margin-bottom:8px;">完成配送</div>
- <div style="font-size:24px;font-weight:700;color:#303133;">1,286单</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
- <script src="https://unpkg.com/element-plus"></script>
- <script>
- const { createApp } = Vue;
- const app = createApp({
- setup() {
- const hotProducts = [
- { rank: 1, name: '新鲜猪肉', sales: '1,286斤', amount: '¥23,148' },
- { rank: 2, name: '新鲜蔬菜', sales: '986斤', amount: '¥7,888' },
- { rank: 3, name: '新鲜鸡肉', sales: '756斤', amount: '¥11,340' },
- { rank: 4, name: '新鲜水果', sales: '658斤', amount: '¥7,896' },
- { rank: 5, name: '大米', sales: '420袋', amount: '¥28,560' }
- ];
-
- const topClients = [
- { rank: 1, name: 'AA餐厅', region: '城东', orders: 68, amount: '¥12,560' },
- { rank: 2, name: 'BB超市', region: '城西', orders: 52, amount: '¥10,280' },
- { rank: 3, name: 'CC商行', region: '城东', orders: 45, amount: '¥8,650' },
- { rank: 4, name: 'DD食堂', region: '城南', orders: 38, amount: '¥6,780' },
- { rank: 5, name: 'EE饭店', region: '城北', orders: 32, amount: '¥5,420' }
- ];
-
- const quotationStats = [
- { supplier: 'XX供应商', region: '城东', inquiryCount: 12, quoteCount: 10, selectedCount: 6, totalAmount: '¥45,600', winRate: 60 },
- { supplier: 'YY供应商', region: '城东', inquiryCount: 12, quoteCount: 11, selectedCount: 4, totalAmount: '¥42,300', winRate: 36 },
- { supplier: 'ZZ供应商', region: '城西', inquiryCount: 10, quoteCount: 9, selectedCount: 5, totalAmount: '¥38,500', winRate: 56 },
- { supplier: 'AA供应商', region: '城西', inquiryCount: 10, quoteCount: 8, selectedCount: 3, totalAmount: '¥35,200', winRate: 38 }
- ];
-
- return { hotProducts, topClients, quotationStats };
- }
- });
- app.use(ElementPlus);
- app.mount('#app');
- </script>
- </body>
- </html>
|