小草代账管家_H5/stats.html · 约 3349 字符
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,maximum-scale=1,user-scalable=no"/>
6<title>经营报表 · 小草代账管家</title>
7<link rel="stylesheet" href="style.css"/>
8</head>
9<body>
10
11<header class="header"><span class="back"></span><h1>经营报表</h1><span class="right">📅</span></header>
12<div class="card" style="display:flex;text-align:center">
13 <div style="flex:1"><b style="font-size:20px;color:#1e3a8a;display:block">128</b><span style="font-size:11px;color:#7c8aa8">客户总数</span></div>
14 <div style="flex:1"><b style="font-size:20px;color:#1e3a8a;display:block">+6</b><span style="font-size:11px;color:#7c8aa8">本月新增</span></div>
15 <div style="flex:1"><b style="font-size:20px;color:#1e3a8a;display:block">91%</b><span style="font-size:11px;color:#7c8aa8">续费率</span></div>
16 <div style="flex:1"><b style="font-size:20px;color:#1e3a8a;display:block">4</b><span style="font-size:11px;color:#7c8aa8">流失预警</span></div>
17</div>
18<div class="chart-card">
19 <div class="ch-title">📊 月度营收趋势（万元）</div>
20 <div id="barList"></div>
21</div>
22<div class="section-title">🏆 员工业绩排行（本月）</div>
23<div class="rank-list" id="rankList"></div>
24<div class="section-title">📋 管理报表</div>
25<div class="menu-list" style="margin-top:0">
26 <a data-toast="已生成客户应收汇总表"><span class="ml-l"><span class="ico">💰</span>客户应收汇总表</span><span class="ml-r">›</span></a>
27 <a data-toast="已生成合同总表"><span class="ml-l"><span class="ico">📄</span>合同明细总表</span><span class="ml-r">›</span></a>
28 <a data-toast="已生成证件到期统计"><span class="ml-l"><span class="ico">🗓️</span>证照到期统计</span><span class="ml-r">12 项</span></a>
29 <a data-toast="已生成工作量统计"><span class="ml-l"><span class="ico">💼</span>会计工作量统计</span><span class="ml-r">›</span></a>
30 <a data-toast="已生成代收代缴明细"><span class="ml-l"><span class="ico">🏦</span>代收代缴明细账</span><span class="ml-r">›</span></a>
31</div>
32
33
34<nav class="tabbar"><a class="" href="index.html"><span class="icon">🏠</span>工作台</a><a class="" href="clients.html"><span class="icon">👥</span>客户</a><a class="" href="contracts.html"><span class="icon">📄</span>合同</a><a class=" active" href="stats.html"><span class="icon">📊</span>报表</a><a class="" href="mine.html"><span class="icon">👤</span>我的</a></nav>
35<script src="data.js"></script>
36<script>
37 var bl = document.getElementById('barList');
38 var h = '';
39 var max = 100;
40 window.DATA.barData.forEach(function (b) {
41 h += '<div class="bar-row"><span class="br-label">' + b.label + '</span><div class="br-bar"><i style="width:' + b.val + '%"></i></div><span class="br-val">' + b.val + '</span></div>';
42 });
43 bl.innerHTML = h;
44 var rl = document.getElementById('rankList');
45 var h2 = '';
46 window.DATA.ranks.forEach(function (r, i) {
47 h2 += '<div class="rank-item"><div class="rk-no">' + (i + 1) + '</div><div class="rk-name">' + r.name + '</div><div class="rk-val">' + r.val + '</div></div>';
48 });
49 rl.innerHTML = h2;
50</script>
51<script src="app.js"></script>
52</body>
53</html>