数据统计分析.html 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>叁强鲜配 - 数据统计分析</title>
  7. <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
  8. <style>
  9. * { margin: 0; padding: 0; box-sizing: border-box; }
  10. body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f7fa; color: #303133; }
  11. /* 顶部导航 */
  12. .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; }
  13. .topbar-logo h1 { font-size: 22px; font-weight: 600; }
  14. .topbar-logo span { font-size: 13px; opacity: 0.85; }
  15. .topbar-user { display: flex; align-items: center; gap: 16px; }
  16. /* 主布局 */
  17. .main-container { display: flex; min-height: calc(100vh - 60px); }
  18. /* 侧边栏 */
  19. .sidebar { width: 220px; background: #fff; border-right: 1px solid #e4e7ed; padding: 16px 0; }
  20. .menu-item { padding: 14px 24px; cursor: pointer; display: flex; align-items: center; gap: 12px; color: #606266; font-size: 14px; }
  21. .menu-item:hover { background: #f5f7fa; color: #1989fa; }
  22. .menu-item.active { background: #ecf5ff; color: #1989fa; border-right: 3px solid #1989fa; }
  23. /* 内容区 */
  24. .content { flex: 1; padding: 24px; }
  25. .breadcrumb { font-size: 13px; color: #909399; margin-bottom: 8px; }
  26. /* 统计卡片 */
  27. .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 24px; }
  28. .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; }
  29. .stat-icon { width: 56px; height: 56px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 28px; }
  30. .stat-icon.blue { background: #ecf5ff; color: #1989fa; }
  31. .stat-icon.green { background: #f0f9eb; color: #07c160; }
  32. .stat-icon.orange { background: #fdf6ec; color: #ff976a; }
  33. .stat-icon.red { background: #fef0f0; color: #ee0a24; }
  34. .stat-info h3 { font-size: 28px; font-weight: 700; color: #303133; margin-bottom: 4px; }
  35. .stat-info p { font-size: 14px; color: #909399; }
  36. .stat-trend { font-size: 12px; margin-top: 8px; }
  37. .stat-trend.up { color: #07c160; }
  38. .stat-trend.down { color: #ee0a24; }
  39. /* 卡片样式 */
  40. .card { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); margin-bottom: 20px; }
  41. .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #ebeef5; }
  42. .card-title { font-size: 16px; font-weight: 600; }
  43. /* 图表区域 */
  44. .chart-row { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
  45. .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; }
  46. .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); }
  47. /* 排名列表 */
  48. .rank-list { }
  49. .rank-item { display: flex; align-items: center; padding: 14px 0; border-bottom: 1px solid #f5f7fa; }
  50. .rank-item:last-child { border-bottom: none; }
  51. .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; }
  52. .rank-num.top1 { background: linear-gradient(135deg, #ffd700, #ff976a); color: #fff; }
  53. .rank-num.top2 { background: linear-gradient(135deg, #c0c0c0, #909399); color: #fff; }
  54. .rank-num.top3 { background: linear-gradient(135deg, #cd7f32, #b87333); color: #fff; }
  55. .rank-info { flex: 1; }
  56. .rank-name { font-size: 14px; font-weight: 500; }
  57. .rank-region { font-size: 12px; color: #909399; margin-top: 2px; }
  58. .rank-value { font-size: 16px; font-weight: 600; color: #1989fa; }
  59. .rank-sub { font-size: 12px; color: #909399; }
  60. /* 表格样式 */
  61. .table-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
  62. .el-table { border-radius: 8px; overflow: hidden; }
  63. .el-table th { background: #f5f7fa !important; color: #606266; font-weight: 600; }
  64. /* Tab切换 */
  65. .tab-group { display: flex; gap: 4px; background: #f5f7fa; padding: 4px; border-radius: 8px; width: fit-content; margin-bottom: 16px; }
  66. .tab-btn { padding: 10px 20px; cursor: pointer; border-radius: 6px; font-size: 14px; color: #606266; background: transparent; border: none; }
  67. .tab-btn.active { background: #fff; color: #1989fa; font-weight: 500; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
  68. /* 筛选条件 */
  69. .filter-row { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; align-items: center; }
  70. /* 状态标签 */
  71. .status-tag { padding: 4px 12px; border-radius: 4px; font-size: 12px; }
  72. .status-tag.success { background: #f0f9eb; color: #07c160; }
  73. .status-tag.warning { background: #fdf6ec; color: #ff976a; }
  74. .status-tag.primary { background: #ecf5ff; color: #1989fa; }
  75. /* 原型导航 */
  76. .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; }
  77. .prototype-nav h4 { font-size: 13px; color: #909399; margin-bottom: 12px; }
  78. .prototype-nav a { display: block; padding: 8px 16px; color: #606266; text-decoration: none; font-size: 13px; border-radius: 6px; margin-bottom: 4px; }
  79. .prototype-nav a:hover, .prototype-nav a.active { background: #ecf5ff; color: #1989fa; }
  80. </style>
  81. </head>
  82. <body>
  83. <!-- 原型导航 -->
  84. <div class="prototype-nav">
  85. <h4>页面导航</h4>
  86. <a href="#" class="active">数据统计分析</a>
  87. </div>
  88. <!-- 顶部导航 -->
  89. <div class="topbar">
  90. <div class="topbar-logo">
  91. <h1>叁强鲜配</h1>
  92. <span>运营管理后台</span>
  93. </div>
  94. <div class="topbar-user">
  95. <el-avatar :size="32" style="background:#fff;color:#1989fa;">管</el-avatar>
  96. <span>管理员</span>
  97. </div>
  98. </div>
  99. <div class="main-container">
  100. <!-- 左侧菜单 -->
  101. <div class="sidebar">
  102. <div class="menu-item active"><span>&#128202;</span><span>数据统计</span></div>
  103. <div class="menu-item"><span>&#128100;</span><span>用户管理</span></div>
  104. <div class="menu-item"><span>&#128205;</span><span>区域管理</span></div>
  105. <div class="menu-item"><span>&#128230;</span><span>商品管理</span></div>
  106. <div class="menu-item"><span>&#128269;</span><span>询价管理</span></div>
  107. <div class="menu-item"><span>&#128176;</span><span>报价管理</span></div>
  108. <div class="menu-item"><span>&#127915;</span><span>价格管理</span></div>
  109. <div class="menu-item"><span>&#128722;</span><span>订单管理</span></div>
  110. <div class="menu-item"><span>&#128666;</span><span>配送管理</span></div>
  111. <div class="menu-item"><span>&#128179;</span><span>结算管理</span></div>
  112. </div>
  113. <!-- 内容区 -->
  114. <div class="content">
  115. <div class="breadcrumb">首页 / 数据统计</div>
  116. <!-- 核心指标 -->
  117. <div class="stats-grid">
  118. <div class="stat-card">
  119. <div class="stat-icon blue">&#128722;</div>
  120. <div class="stat-info">
  121. <h3>1,286</h3>
  122. <p>今日订单数</p>
  123. <div class="stat-trend up">&#9650; 12.5% 较昨日</div>
  124. </div>
  125. </div>
  126. <div class="stat-card">
  127. <div class="stat-icon green">&#128176;</div>
  128. <div class="stat-info">
  129. <h3>¥58,620</h3>
  130. <p>今日交易额</p>
  131. <div class="stat-trend up">&#9650; 8.3% 较昨日</div>
  132. </div>
  133. </div>
  134. <div class="stat-card">
  135. <div class="stat-icon orange">&#128230;</div>
  136. <div class="stat-info">
  137. <h3>156</h3>
  138. <p>待处理配送</p>
  139. <div class="stat-trend down">&#9660; 5.2% 较昨日</div>
  140. </div>
  141. </div>
  142. <div class="stat-card">
  143. <div class="stat-icon red">&#128165;</div>
  144. <div class="stat-info">
  145. <h3>12</h3>
  146. <p>异常订单</p>
  147. <div class="stat-trend down">&#9660; 20% 较昨日</div>
  148. </div>
  149. </div>
  150. </div>
  151. <!-- Tab切换 & 筛选 -->
  152. <div class="filter-row">
  153. <div class="tab-group">
  154. <button class="tab-btn active">今日</button>
  155. <button class="tab-btn">本周</button>
  156. <button class="tab-btn">本月</button>
  157. <button class="tab-btn">本季度</button>
  158. </div>
  159. <el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width:260px" />
  160. <el-select placeholder="选择区域" style="width:150px">
  161. <el-option label="全部区域" value />
  162. <el-option label="城东区域" value="cd" />
  163. <el-option label="城西区域" value="cx" />
  164. <el-option label="城南区域" value="cn" />
  165. </el-select>
  166. <el-button type="primary">查询</el-button>
  167. <el-button>导出</el-button>
  168. </div>
  169. <!-- 图表区域 -->
  170. <div class="chart-row">
  171. <div class="card">
  172. <div class="card-header">
  173. <span class="card-title">订单趋势</span>
  174. <el-radio-group size="small">
  175. <el-radio-button label="近7天" />
  176. <el-radio-button label="近30天" />
  177. </el-radio-group>
  178. </div>
  179. <div class="chart-placeholder">
  180. &#128202; 订单金额与数量趋势图表区域
  181. <div style="position:absolute;bottom:20px;left:20px;display:flex;gap:20px;">
  182. <span style="display:flex;align-items:center;gap:6px;"><span style="width:12px;height:3px;background:#1989fa;border-radius:2px;"></span>订单金额</span>
  183. <span style="display:flex;align-items:center;gap:6px;"><span style="width:12px;height:3px;background:#07c160;border-radius:2px;"></span>订单数量</span>
  184. </div>
  185. </div>
  186. </div>
  187. <div class="card">
  188. <div class="card-header">
  189. <span class="card-title">区域订单排名</span>
  190. </div>
  191. <div class="rank-list">
  192. <div class="rank-item">
  193. <div class="rank-num top1">1</div>
  194. <div class="rank-info">
  195. <div class="rank-name">城东区</div>
  196. <div class="rank-region">386单 | 占比 30%</div>
  197. </div>
  198. <div class="rank-value">¥18,560</div>
  199. </div>
  200. <div class="rank-item">
  201. <div class="rank-num top2">2</div>
  202. <div class="rank-info">
  203. <div class="rank-name">城西区</div>
  204. <div class="rank-region">312单 | 占比 24%</div>
  205. </div>
  206. <div class="rank-value">¥15,280</div>
  207. </div>
  208. <div class="rank-item">
  209. <div class="rank-num top3">3</div>
  210. <div class="rank-info">
  211. <div class="rank-name">城南区域</div>
  212. <div class="rank-region">285单 | 占比 22%</div>
  213. </div>
  214. <div class="rank-value">¥12,450</div>
  215. </div>
  216. <div class="rank-item">
  217. <div class="rank-num">4</div>
  218. <div class="rank-info">
  219. <div class="rank-name">城北区域</div>
  220. <div class="rank-region">258单 | 占比 20%</div>
  221. </div>
  222. <div class="rank-value">¥10,890</div>
  223. </div>
  224. </div>
  225. </div>
  226. </div>
  227. <!-- 详细表格 -->
  228. <div class="table-grid">
  229. <div class="card">
  230. <div class="card-header">
  231. <span class="card-title">热销商品 TOP 10</span>
  232. <el-button type="primary" link size="small">查看更多</el-button>
  233. </div>
  234. <el-table :data="hotProducts" style="width:100%">
  235. <el-table-column prop="rank" label="排名" width="60" align="center" />
  236. <el-table-column prop="name" label="商品名称" />
  237. <el-table-column prop="sales" label="销量" width="100" align="right" />
  238. <el-table-column prop="amount" label="销售额" width="110" align="right" />
  239. </el-table>
  240. </div>
  241. <div class="card">
  242. <div class="card-header">
  243. <span class="card-title">客户下单排名</span>
  244. <el-button type="primary" link size="small">查看更多</el-button>
  245. </div>
  246. <el-table :data="topClients" style="width:100%">
  247. <el-table-column prop="rank" label="排名" width="60" align="center" />
  248. <el-table-column prop="name" label="客户名称" />
  249. <el-table-column prop="region" label="区域" width="90" />
  250. <el-table-column prop="orders" label="订单数" width="80" align="right" />
  251. <el-table-column prop="amount" label="消费额" width="100" align="right" />
  252. </el-table>
  253. </div>
  254. </div>
  255. <!-- 收入统计 -->
  256. <div class="card">
  257. <div class="card-header">
  258. <span class="card-title">收入统计</span>
  259. </div>
  260. <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:20px;">
  261. <div style="text-align:center;padding:20px;background:#f5f7fa;border-radius:8px;">
  262. <div style="font-size:13px;color:#909399;margin-bottom:8px;">线上收入(微信)</div>
  263. <div style="font-size:24px;font-weight:700;color:#07c160;">¥38,620</div>
  264. <div style="font-size:12px;color:#07c160;margin-top:4px;">占比 66%</div>
  265. </div>
  266. <div style="text-align:center;padding:20px;background:#f5f7fa;border-radius:8px;">
  267. <div style="font-size:13px;color:#909399;margin-bottom:8px;">线下收入</div>
  268. <div style="font-size:24px;font-weight:700;color:#1989fa;">¥20,000</div>
  269. <div style="font-size:12px;color:#1989fa;margin-top:4px;">占比 34%</div>
  270. </div>
  271. <div style="text-align:center;padding:20px;background:#f5f7fa;border-radius:8px;">
  272. <div style="font-size:13px;color:#909399;margin-bottom:8px;">待结算金额</div>
  273. <div style="font-size:24px;font-weight:700;color:#ff976a;">¥12,450</div>
  274. <div style="font-size:12px;color:#909399;margin-top:4px;">本月</div>
  275. </div>
  276. <div style="text-align:center;padding:20px;background:#f5f7fa;border-radius:8px;">
  277. <div style="font-size:13px;color:#909399;margin-bottom:8px;">退款金额</div>
  278. <div style="font-size:24px;font-weight:700;color:#ee0a24;">¥1,280</div>
  279. <div style="font-size:12px;color:#909399;margin-top:4px;">本月</div>
  280. </div>
  281. </div>
  282. <div class="chart-placeholder" style="height:200px;">
  283. &#128202; 支付方式占比饼图 / 收入趋势折线图
  284. </div>
  285. </div>
  286. <!-- 供应商报价统计 -->
  287. <div class="card">
  288. <div class="card-header">
  289. <span class="card-title">供应商报价统计</span>
  290. <el-select placeholder="选择区域" style="width:150px">
  291. <el-option label="全部区域" value />
  292. <el-option label="城东区域" value="cd" />
  293. <el-option label="城西区域" value="cx" />
  294. </el-select>
  295. </div>
  296. <el-table :data="quotationStats" style="width:100%">
  297. <el-table-column prop="supplier" label="供应商名称" />
  298. <el-table-column prop="region" label="所属区域" width="100" />
  299. <el-table-column prop="inquiryCount" label="收到询价" width="100" align="center" />
  300. <el-table-column prop="quoteCount" label="已报价" width="100" align="center" />
  301. <el-table-column prop="selectedCount" label="被选用" width="100" align="center" />
  302. <el-table-column prop="totalAmount" label="报价总额" width="120" align="right" />
  303. <el-table-column prop="winRate" label="选用率" width="100" align="center">
  304. <template #default="{row}">
  305. <span :class="'status-tag '+ (row.winRate > 50 ? 'success' : 'warning')">{{row.winRate}}%</span>
  306. </template>
  307. </el-table-column>
  308. </el-table>
  309. </div>
  310. <!-- 配送效率统计 -->
  311. <div class="card">
  312. <div class="card-header">
  313. <span class="card-title">配送效率统计</span>
  314. </div>
  315. <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:20px;">
  316. <div style="text-align:center;padding:20px;background:#f5f7fa;border-radius:8px;">
  317. <div style="font-size:13px;color:#909399;margin-bottom:8px;">平均配送时长</div>
  318. <div style="font-size:24px;font-weight:700;color:#1989fa;">45分钟</div>
  319. </div>
  320. <div style="text-align:center;padding:20px;background:#f5f7fa;border-radius:8px;">
  321. <div style="font-size:13px;color:#909399;margin-bottom:8px;">准时率</div>
  322. <div style="font-size:24px;font-weight:700;color:#07c160;">96.8%</div>
  323. </div>
  324. <div style="text-align:center;padding:20px;background:#f5f7fa;border-radius:8px;">
  325. <div style="font-size:13px;color:#909399;margin-bottom:8px;">配送员数量</div>
  326. <div style="font-size:24px;font-weight:700;color:#ff976a;">28人</div>
  327. </div>
  328. <div style="text-align:center;padding:20px;background:#f5f7fa;border-radius:8px;">
  329. <div style="font-size:13px;color:#909399;margin-bottom:8px;">完成配送</div>
  330. <div style="font-size:24px;font-weight:700;color:#303133;">1,286单</div>
  331. </div>
  332. </div>
  333. </div>
  334. </div>
  335. </div>
  336. <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  337. <script src="https://unpkg.com/element-plus"></script>
  338. <script>
  339. const { createApp } = Vue;
  340. const app = createApp({
  341. setup() {
  342. const hotProducts = [
  343. { rank: 1, name: '新鲜猪肉', sales: '1,286斤', amount: '¥23,148' },
  344. { rank: 2, name: '新鲜蔬菜', sales: '986斤', amount: '¥7,888' },
  345. { rank: 3, name: '新鲜鸡肉', sales: '756斤', amount: '¥11,340' },
  346. { rank: 4, name: '新鲜水果', sales: '658斤', amount: '¥7,896' },
  347. { rank: 5, name: '大米', sales: '420袋', amount: '¥28,560' }
  348. ];
  349. const topClients = [
  350. { rank: 1, name: 'AA餐厅', region: '城东', orders: 68, amount: '¥12,560' },
  351. { rank: 2, name: 'BB超市', region: '城西', orders: 52, amount: '¥10,280' },
  352. { rank: 3, name: 'CC商行', region: '城东', orders: 45, amount: '¥8,650' },
  353. { rank: 4, name: 'DD食堂', region: '城南', orders: 38, amount: '¥6,780' },
  354. { rank: 5, name: 'EE饭店', region: '城北', orders: 32, amount: '¥5,420' }
  355. ];
  356. const quotationStats = [
  357. { supplier: 'XX供应商', region: '城东', inquiryCount: 12, quoteCount: 10, selectedCount: 6, totalAmount: '¥45,600', winRate: 60 },
  358. { supplier: 'YY供应商', region: '城东', inquiryCount: 12, quoteCount: 11, selectedCount: 4, totalAmount: '¥42,300', winRate: 36 },
  359. { supplier: 'ZZ供应商', region: '城西', inquiryCount: 10, quoteCount: 9, selectedCount: 5, totalAmount: '¥38,500', winRate: 56 },
  360. { supplier: 'AA供应商', region: '城西', inquiryCount: 10, quoteCount: 8, selectedCount: 3, totalAmount: '¥35,200', winRate: 38 }
  361. ];
  362. return { hotProducts, topClients, quotationStats };
  363. }
  364. });
  365. app.use(ElementPlus);
  366. app.mount('#app');
  367. </script>
  368. </body>
  369. </html>