范围:主面板 ops-panel + 明细 ops-panel-detail。以可交付实现为准,并统一术语口径。
实现硬约束(先读)
1)员工日增量为唯一原子;市/区/部必须由下属员工加总,禁止各层独立造数。2)「人均」与「榜单均值」禁止混用同一文案。3)涨跌配色:上涨红 / 下跌绿。4)K 线最高/最低 = 截至该柱的历史收盘 max/min,禁止随机影线。
1. 概述
目标
用「增量 K 线」统一观察房源、激活房源、客户、带看、成交、业绩六类运营增量,支持市→区→部→人下钻与横向对比。
用户:运营 / 管理层 / 区域负责人。场景:日会复盘、异常下钻、横比找强弱。
范围
In:主面板总览、明细页(K 线 + 折线对比 + 排行榜)、周期切换、排序、跳转参数。
Out:真实权限体系、导出报表、告警订阅、与业务地图大屏的数据回写(仅外链)。
信息架构
| 层级 | 页面 | 职责 |
| L0 | 主面板 | 六指标全市 K 线总览 + 区/部/全员表格横比 |
| L1 | 明细(city) | 单指标全市深挖:榜单切换区/部/人 + 折线对比 |
| L1 | 明细(region/dept/staff) | 单实体单指标:K 线 + 下属/同级对比 + 排行 |
2. 指标定义
展示顺序固定;key 为路由与接口字段,禁止随意改名。
| key | 展示名 | 业务含义 | 量纲 |
listing | 房源新增数量 | 日新增房源件数 | 整数 |
activeListing | 激活房源新增数量 | 日新增激活房源件数 | 整数 |
customer | 客户新增数量 | 日新增客户数 | 整数 |
showing | 带看新增数量 | 日新增带看次数 | 整数 |
deal | 成交新增数量 | 日新增成交单数 | 整数 |
commission | 业绩新增数量 | 日新增业绩(业务约定单位) | 数值 |
实体层级
| scope | 名称 | 标识 | 聚合规则 |
city | 全市 | 唯一实体 city | Σ 全体员工日增量 |
region | 区域 | 上海市 16 区名称 | Σ 该区员工日增量 |
dept | 部门 | d1…d16(一部…十六部) | Σ 该部门员工日增量 |
staff | 员工 | 员工 ID | 员工本人日增量(原子) |
人数口径
区域人数 = 该区提供数据的员工数;部门人数 = 部门编制人数;全市人数 = 全体员工。人均分母取对应人数;人数为 0 时人均展示「—」。
3. 计算口径
3.1 日增量 → 日 K
对任意实体、任意指标,先得到按日的增量序列 I[0…n-1]。第 i 根日 K:开盘 = I[i-1](i=0 时取 I[0]);收盘 = I[i]。
最高 / 最低(强制业务口径,禁止随机影线):以收盘序列为准。第 i 根日 K:最高 = max(收盘[0…i])(截至当日含当日的历史收盘最大值);最低 = min(收盘[0…i])(截至当日含当日的历史收盘最小值)。不参与涨跌额、涨跌幅、人均、榜均值与加总校验,仅用于 K 线影线与 Tooltip 展示。
3.2 周 / 月聚合
将日 K 按 bucketDays 切段:开盘 = 段内首根开盘;收盘 = 段内末根收盘;最高 = 段内各日「历史收盘最高」的最大值(等价于截至段末日的历史收盘最大值);最低 = 段内各日「历史收盘最低」的最小值(等价于截至段末日的历史收盘最小值)。标签取段末日。
| 周期 | k 参数 | 回溯长度 | bucketDays | 表头开盘/收盘名 |
| 日K | day | 90 日 | 1 | 昨日开盘 / 昨日收盘 |
| 周K | week | 180 日 | 7 | 周开盘 / 周收盘 |
| 月K | month | 360 日 | 30 | 月开盘 / 月收盘 |
3.3 派生量
| 字段 | 公式 | 备注 |
| 涨跌额 | close − open | 有符号 |
| 涨跌幅 | (close − open) / open × 100% | open=0 需统一兜底 |
| 人均 | close / headcount | 保留 2 位 |
| 榜单均值 | Σ close / N | N=当前榜条目数 |
| 对比差值 | close − 榜单均值 | 保留 2 位 |
| 最高 | max(closes[0…i]) | 截至该 K 柱的历史收盘最大值;禁止随机影线 |
| 最低 | min(closes[0…i]) | 截至该 K 柱的历史收盘最小值;<0 时按业务取 0 或保留(实现统一) |
| MA7/14/21/28 | 收盘简单移动平均 | 不足窗口为 null → 展示 — |
最高 / 最低说明
「历史」指当前图表序列起点至该 K 柱(含)。日 K 用收盘滚动极值;周/月 K 在日 K 基础上按段取高/低的极值,与「截至段末日的历史收盘 max/min」一致。不得再使用 mock 随机上下影。
加总恒等式(验收必测)
同一 metric、同一自然日:city.close = Σ region.close = Σ dept.close = Σ staff.close。实现侧必须从员工向上 rollup,禁止三层各算各的。
4. 术语词典(UI 文案唯一真相)
开发、设计、产品统一按此表命名。禁止再用「本区域均值」等与收盘同值的别名。
| 标准名 | 定义 | 说明 | 优先级 |
| 开盘 | 当前 K 柱对应区间的开盘增量 | 日K:昨增量;周/月K:区间首日开盘 | 强制 |
| 收盘 | 当前 K 柱对应区间的收盘增量 | 日K:今增量;周/月K:区间末日收盘 | 强制 |
| 涨跌额 | 收盘 − 开盘 | 有符号数值 | 强制 |
| 涨跌幅 | 涨跌额 ÷ 开盘 × 100% | 开盘=0 时展示 0% 或「—」(实现需统一) | 强制 |
| 人均 | 该实体收盘总量 ÷ 该实体人数 | 仅 city/region/dept;员工不展示 | 强制 |
| 榜单均值 | 当前榜各实体收盘之和 ÷ 条目数 | 随榜单范围变化;勿称「人均」 | 强制 |
| 对比差值 | 本实体收盘 − 榜单均值 | 文案:高于/低于/等于均值 | 强制 |
禁止文案 禁止
本区域均值 / 本部门均值(与昨日收盘同值)
员工顶栏把「榜单均值」写成「人均值」
用「人均」指代条目算术平均
对比展示模板 推荐
顶栏固定:榜单均值 | 本实体收盘 | 对比差值
差值文案:高于均值 +x / 低于均值 -x / 等于均值
人均单独成列,不进入对比链路
5. 主面板(ops-panel)
5.1 顶栏
标题「运营数据面板」;副标题说明六指标与增量 K 线口径。右侧:日K/周K/月K 分段控件;外链「需求文档」「业务地图大屏」「数据看板」。
5.2 第一层 · 六指标卡片
| 字段 | 类型 | 规则 |
| 指标名 | 文案 | 六指标固定顺序 |
| 开盘 | 数值 | 随周期切换标签 |
| 收盘 | 数值 · 涨跌色 | 主数字,字号最大 |
| 涨跌额 | 有符号 · 涨跌色 | — |
| 涨跌幅 | 有符号% · 涨跌色 | 保留 2 位 |
| 人均 | 数值 | 全市收盘 ÷ 全员人数 |
图表:蜡烛图 + 收盘折线 + MA7/14/21/28。Tooltip 展示开高低收、涨跌额/幅、四条 MA。点击卡片或图表 → 明细 scope=city。
5.3 第二层 · 区 / 部 / 全员表
分段切换 scope=region|dept|staff。六指标分列并排(宽屏 6 列)。每表列头展示榜单均值。默认按涨跌幅降序;表头可排序。
| 列 | 适用范围 | 规则 |
| 名称 | 全部 scope | 实体名,可点进明细 |
| 开盘 / 收盘 | 全部 | 随周期改标签 |
| 涨跌额 / 涨跌幅 | 全部 | 有符号;涨跌幅默认可排序 |
| 人均 | region / dept | 员工榜隐藏 |
| 对比差值 | 全部 | 相对当前榜榜单均值 |
6. 明细页(ops-panel-detail)
6.1 顶栏与统计条
返回主面板;标题含实体名 + 指标名;副标题标明入口类型。
| 统计项 | 入口 | 规则 |
| 开盘 / 收盘 / 涨跌额 / 涨跌幅 | 全部入口 | 随周期标签;涨跌色 |
| 人均 | city / region / dept | 员工入口不展示「人均」 |
| 榜单均值 | 全部入口 | 随下方榜单范围刷新 |
| 对比差值 | region / dept / staff | city 入口可只展示均值说明 |
6.2 city 入口专属
展示「区域 / 部门 / 全体员工」切换条,控制下方排行榜与折线主体范围;榜单均值随切换刷新。
6.3 图表区
左:增量 K 线
可拖动缩放时间轴;周期控件与主面板同一套。
MA 读数条:MA7/14/21/28 最新值。
配色:阳线红、阴线绿;MA 四色固定。
右:折线对比
默认「前三」(按涨跌幅);「自定义」最多勾选 8 个对象。
region 入口可在 部门/全员 间切换对比池;dept/staff 锁定为下属或本人场景。
city 入口由顶部 scope 驱动,隐藏面板内重复切换。
6.4 排行榜
列与主面板第二层对齐:名称 | 开盘 | 收盘 | 涨跌额 | 涨跌幅 |(非员工)人均 | 对比差值。展示高于/低于均值人数摘要。当前实体行可高亮。
7. 路由与跳转
Query 参数
| 参数 | 枚举 / 格式 | 必填 | 说明 |
scope | city | region | dept | staff | 是 | 明细页实体类型 |
id | 区域名 / 部门ID / 员工ID | 非 city 必填 | city 可省略 |
metric | 六指标 key 之一 | 是 | 默认 listing |
k | day | week | month | 否 | 默认 day;与主面板联动 |
跳转矩阵
| 起点 | 动作 | 目标 |
| 主面板 L1 卡片 | 点击 | detail?scope=city&metric={key}&k={k} |
| 主面板 L2 行 | 点击 | detail?scope={scope}&id={id}&metric={key}&k={k} |
| 明细页 | 返回 | ops-panel.html |
| 主面板顶栏 | 点击「需求文档」 | ops-panel-prd.html |
缺参行为
非 city 且缺少 id:展示空态「缺少参数 scope / id / metric」。非法 k / metric:回落默认 day / listing。
8. 数据契约(对接后端时)
当前原型为前端 mock。落地生产时建议提供员工日增量原子接口;前端或 BFF 做 rollup 与 OHLC/MA。
推荐:GET /api/ops/increments
| 字段 | 类型 | 说明 |
| metric | string | 六指标 key |
| from / to | date | 闭区间 |
| grain | staff | 仅员工粒度 |
| rows[] | object | { staffId, date, value } |
组织关系另提供 staff→dept、staff→region、headcount。
前端状态(主面板)
| state | 类型 | 默认 |
| k | day|week|month | day |
| scope | region|dept|staff | region |
| sortKey / sortDir | string / asc|desc | pct / desc |
9. 非功能需求
视觉与交互
深色运营大屏风:背景 #0a0e14 系;涨 #ef4444 / 跌 #22c55e。
数字等宽(tabular-nums);Tooltip 防遮挡(优先左侧、appendToBody)。
图表库:ECharts 5.x;resize 时全量 chart.resize()。
性能与适配
主面板同时最多 6 个 K 图;切换周期销毁/重建或 setOption 替换。
员工表数据量大时虚拟滚动可作为后续优化(v1 可不做)。
断点:≤720 单列;≤1400 三列;否则六列。
兼容与埋点(建议)
现代 Chromium / Edge。建议埋点:周期切换、scope 切换、进明细、折线自定义勾选、打开需求文档。
10. 验收标准
| 编号 | 标准 |
| A1 | 六指标卡片顺序与命名与指标表一致 |
| A2 | 切换日/周/月K后,开盘收盘标签与序列长度正确刷新 |
| A3 | 全市 = Σ区域 = Σ部门 = Σ员工(同 metric、同日) |
| A4 | 「人均」仅表示总量÷人数;「榜单均值」仅表示条目算术平均 |
| A5 | 员工榜无人均列,有对比差值列 |
| A6 | 主面板点卡片进 city 明细;点表格行进对应实体明细,并带上 metric、k |
| A7 | 表头排序:默认涨跌幅降序;再次点击同列切换升/降 |
| A8 | 明细页 K 线含 MA7/14/21/28;折线支持前三 / 自定义(≤8) |
| A8b | K 线最高 = 截至该柱历史收盘最大值,最低 = 截至该柱历史收盘最小值;Tooltip 与影线一致;无随机影线 |
| A9 | 红涨绿跌;涨跌色与「高于/低于均值」语义一致 |
| A10 | ≤720px 第一层单列;≤1400px 三列;宽屏六列 |
| A11 | 主面板顶栏可打开本需求文档页,并可返回面板 |
交付物清单
主面板页、明细页、口径页脚文案、与本 PRD 一致的术语、需求文档入口;若仍用 mock,需标注「演示数据」。