即时销售表 — 设计规范

最后更新：2026-05-26 | 页面：https://www.sieta.vip/sietadata/erp/report_20260526.html

页面结构

三部分从上到下：

部分	内容	来源
Part 1	5 个 KPI 卡片	销售额、毛利、双数、店铺均价、商场均价
Part 2	2 张图表 + 店铺汇总表	Chart.js v4 柱状图 + 环形图
Part 3	按店铺分组商品卡片	和 SietaData sales_pics.html 完全一致的结构

Part 1 — KPI 卡片

5 个卡片，单列 grid（grid-template-columns: 1fr）。

顺序	标签	副标题	值	计算方式
1	销售额	实收金额	¥6,622	sum(金额)
2	毛利	金额−选择价格金额	¥3,451	sum(金额) - sum(选择价格金额)
3	双数	零售数量	23	sum(数量)
4	店铺均价	二店+四店+五店+六店	¥268	sum(4店金额) / sum(4店数量)
5	商场均价	八店	¥361	八店金额 / 八店数量

CSS 关键： - .kc 白底 3px 黑边框 + shadow:4px 4px 0 #000 - .kc-l .l 标签字号 font-size:1.2em; font-weight:700 - .kc-l .s 副标题 font-size:11px; color:#888 - .kc .n 数值 font-size:1.6em; font-weight:900

Part 2 — 图表

2.1 各店销售额（水平柱状图）

类型：Chart.js v4 bar + indexAxis:'y'（水平柱）
CDN：cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js
datalabels：cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js
必须 Chart.register(ChartDataLabels) 否则标签不显示

双轴配置： - 销售额（上轴 x1）：红色 #FF6B6B，标签在柱右侧 anchor:'end', align:'end' - 溢出处理：最大值标签 align:'start'（柱内）+ 白色字体 - 双数（下轴 x）：紫色 #C4B5FD，标签贴近Y轴 anchor:'start', align:'end' - barPercentage:1.0, categoryPercentage:0.78

销售额标签字号 13，双数标签字号 12

2.2 品牌销售排名（嵌套环形图）

类型：doughnut, cutout:'2%'
三层结构：外层双数(weight:2) + 透明间隙(weight:1) + 内层销售额(weight:7)
前 4 名标注，外层标双数，内层标金额
'其他' 统一用 #94A3B8
品牌颜色映射：{'依歌':'#C4B5FD','娇媚':'#F472B6','是她':'#DC2626','俏俏':'#FF6B6B'}

图表容器 CSS

.cd（图表卡片）白底 border:3px solid #000; shadow:4px 4px 0 #000
.cw（chart wrap）height:500px
.g2（两图表 grid）grid-template-columns:1fr; gap:12px

Part 3 — 商品图片卡片

结构和 sales_pics.html 完全一致，唯一区别：不标注清版/店铺清版标签。

3.1 店铺表头

┌──────────────────────────────────────────────────────┐
│ 二店           金额：¥889   毛利：¥505   3双          │ ← st-hd
├──────────────────────────────────────────────────────┤
│  货号编码                                            │ ← 商品卡片
│  金额：¥xxx    毛利：¥xxx            [图片90x90]      │
└──────────────────────────────────────────────────────┘

CSS： - .st：border:4px solid #000; shadow:6px 6px 0 #000 - .st-hd：display:flex; justify-content:space-between，黑底白字 background:#1a1a2e - .st-hd h2：店铺名 font-size:16px; font-weight:900 - .s-val：表头数据 font-size:16px; font-weight:900; margin-left:12px; display:inline-block - .st-hd .sum：white-space:nowrap; flex-shrink:0

3.2 商品卡片

HTML 结构：

<div class="cd">              <!-- ⚠️ 和图表 .cd 不同！商品卡片用 .ci 避免冲突 -->
  <div class="cd-info">
    <div class="cd-bot">
      <div class="code">DHYG17295-3</div>
      <div class="meta">
        <span class="amt">金额：¥360</span>
        <span class="profit pos">毛利：¥240</span>
      </div>
    </div>
  </div>
  <div class="tw">
    <a href="#lb-ID"><img src="http://a.sieta.vip/img/DHYG17295-3.jpg"></a>
  </div>
</div>

关键 CSS（必须和 sales_pics.html 一致）：

元素	CSS
`.ci`（商品行）	`display:flex; padding:8px 14px; gap:10px; border-bottom:2px solid #eee; min-height:100px`
`.cd-info`	`flex:1; display:flex; flex-direction:column; justify-content:center`
`.cd-bot`	`margin:auto 0`（垂直居中）
`.cd-bot .code`（货号）	`font-size:20px; font-weight:900`
`.cd-bot .meta`	`font-size:20px; display:flex; flex-wrap:nowrap; white-space:nowrap; gap:8px 16px`
`.meta .amt`（金额）	`font-weight:700; color:#cc0000`
`.meta .profit.pos`（毛利正）	`font-weight:700; color:#cc0000`
`.meta .profit.neg`（毛利负）	`font-weight:700; color:#2e7d32`
`.tw`（图片容器）	`width:90px; height:90px; flex-shrink:0; border:1px solid #000; margin-top:auto`
`.tw img`	`width:100%; height:100%; object-fit:cover`

3.3 Lightbox 大图

<div id="lb-DHYG17295-3-STA102" class="lb">
  <a href="#" class="cl">&times;</a>
  <img src="http://a.sieta.vip/img/DHYG17295-3.jpg">
  <div class="lc">DHYG17295-3 · ¥360</div>
</div>

CSS： - .lb：display:none; position:fixed; background:rgba(0,0,0,.88); z-index:999 - .lb:target：display:flex（纯 CSS lightbox，无需 JS） - .lb img：max-width:100%; max-height:82vh; border:4px solid #000

图片 URL 规则

http://a.sieta.vip/img/{货号}.jpg

缺少图片时 fallback：

<img src="..." onerror="this.outerHTML='<div class=ni>暂无图片</div>'">

数据抓取

脚本：~/erp_fetch.py

用 curl 登录 + 查询，零依赖，0.5 秒完成
查询 URL：/retail/summary?start_date=...&end_date=...&mode=10&is_pos=1
mode=10 = 店铺+商品+颜色汇总
解析 HTML <tr> 表格，首列 STA 开头为数据行

页面生成脚本

~/erp_daily_report.py：抓取 + 生成页面 + 飞书通知一体化
输出路径：/var/www/sieta/sietadata/erp/report_{YYYYMMDD}.html

字体

font-family: -apple-system, BlinkMacSystemFont, "Noto Sans SC", sans-serif;

全局背景：background:#FFFDF5

已踩坑

Chart.js CDN：必须用 cdnjs.cloudflare.com，jsdelivr 在国内被墙
datalabels：必须 Chart.register(ChartDataLabels) 否则标签不显示
图表 .cd 与商品 .ci 冲突：图表卡片和商品卡片不能用同一个 class，图表用 .cd，商品用 .ci
手机端字号：20px 在手机上会换行，需要 @media(max-width:400px) 缩小到 15-16px
meta nowrap：flex-wrap:nowrap; white-space:nowrap 防止金额/毛利换行
毛利计算：金额 - 选择价格金额（不是结算金额）
店铺均价：只算 STA102+104+105+106，不含 STA108（商场）